Coloque texto sobre a imagem

No GemPages v7, você pode colocar texto sobre uma imagem usando um Bandeira de herói elemento ou um Linha elemento.

Método 1: Usando o Elemento Hero Banner

O elemento Hero Banner foi projetado para criar banners Hero impactantes ou banners de coleção que tenham links para páginas de coleção, entre outros casos de uso.

Por padrão, ele fornece predefinições que permitem que você defina um plano de fundo e edite texto na imagem de plano de fundo. Isso o torna uma solução ideal para situações em que o texto precisa ser colocado sobre uma imagem.

Etapa 1: Entre no Editor GemPages

No painel do GemPages, navegue até PÁGINAS, e clique na página de destino para abrir o editor.

Na barra lateral esquerda, encontre o Bandeira de herói elemento sob o Media seção e arraste e solte-a em qualquer posição da sua página.

Etapa 2: carregue e modifique sua imagem

• Clique no elemento para abrir o Configurações painel. Role para baixo até o Contexto seção e clique no Imagem campo.

• Sob o fonte, passe o mouse sobre a imagem de amostra e clique Carregar imagem para carregar sua imagem. Se você a carregou para os Arquivos do Shopify, selecione Procurar biblioteca.

• Modifique as configurações da imagem conforme preferir. Consulte Este artigo para mais detalhes sobre como configurar o plano de fundo da sua imagem no Hero Banner.

Para melhorar a legibilidade, você pode aplicar uma sobreposição:

• Na seção Plano de fundo, clique em Mostre mais, e localize o Sobreposição opção.
• Escolha uma cor escura (por exemplo, preto ou cinza escuro).
• Ajuste o controle deslizante Opacidade até que o texto se destaque claramente em relação ao fundo.

Isso cria uma camada escura sutil sobre a imagem, tornando o texto mais fácil de ler e mantendo o fundo visualmente atraente.

Etapa 3: personalize o bloco de texto

Clique no elemento Bloco de Texto para revelar sua configuração. Em seguida, personalize a fonte, o tamanho e a cor do texto diretamente no painel de configurações para garantir que ele se destaque na imagem.

Para um guia completo sobre as configurações do Hero Banner, confira Este artigo.

Método 2: Usando o elemento Row

Etapa 1: No editor, arraste e solte um Linha elemento da barra lateral esquerda para sua página.

Para entender profundamente o Row Element, confira Este artigo.

Etapa 2: No painel de configurações, role para baixo até Contexto seção e clique no Imagem campo.

Passo 3: Defina uma imagem como plano de fundo para toda a linha. Você pode escolher entre os Arquivos do Shopify (Procurar biblioteca) ou carregar um novo.

Então, ajuste o escada e posição, escolha a imagem tipo de repetição e apego, e habilitar/desabilitar o pré-carga recurso para otimizar o LCP.

Etapa 3: Arraste e solte um Bloco de texto elemento dentro desta linha para criar o texto sobre sua imagem.

Passo 4: Modifique o texto como preferir.

Bandeira do Herói vs. Row

Ambas as opções podem atender às suas necessidades de forma eficaz, mas usar o elemento Banner do Herói é geralmente mais rápido e fácil. Enquanto isso, usar o Linha O elemento oferece mais flexibilidade para certos casos de uso específicos.

Melhores Práticas

• Manter contraste: Certifique-se sempre de que a cor do texto contraste fortemente com a imagem de fundo.
• Usar sobreposições: Aplique sobreposições escuras em imagens claras para melhorar a legibilidade do texto.
• Teste móvel: Visualize seu design em telas menores para confirmar se o texto permanece claro.
• Mantenha o texto conciso: Limite a quantidade de texto sobre as imagens para melhor legibilidade.