Texto do elementor sobre imagem: mais de 25 efeitos de pairar (tutorial de widget gratuito)

Adicionar texto sobre uma imagem no Elementor soa como um trabalho de dois minutos Então você tenta com os widgets padrão e acaba lutando com margens negativas, posicionamento absoluto e um widget Heading empilhado em uma imagem de fundo que quebra no celular Há uma maneira mais rápida O gratuito Widget Efeitos do Image Hover de Master Addons coloca um título e uma descrição em cima de qualquer imagem e revela-os com uma das mais de 25 animações de hover Você nunca toca em CSS.

Neste tutorial você vai configurar um texto Elementor sobre seção de imagem a partir do zero: fazer upload da imagem, escolher um efeito de hover a partir de um dropdown, estilo a sobreposição, e decidir o que acontece quando alguém clica Cada captura de tela abaixo vem direto do editor Elementor, para que você possa seguir ao longo clique por clique.

O que este guia cobre:

• Por que texto sobre imagem precisa de um widget
• O widget Efeitos de Imagem Hover em um relance
• Como adicionar texto sobre uma imagem (passo a passo)
• Estilizando a sobreposição: cor, opacidade, forma
• Tipografia para o título e descrição
• Clique em ações: abra um pop-up ou vincule a imagem
• Dicas de design que mantêm o texto legível
• Outros widgets Master Addons para efeitos de imagem
• Grátis vs Pro: o que você realmente precisa
• Perguntas frequentes

Por que o texto sobre a imagem precisa de um widget (não de um hack CSS)

A documentação do próprio Elementor sugere duas soluções alternativas para texto sobre imagem: defina a imagem como um fundo de seção e solte um widget de Cabeçalho dentro, ou empurre um rumo para cima com margens negativas Ambos funcionam para uma legenda estática Nenhum dos dois lhe dá uma revelação de hover, uma sobreposição animada ou uma ação de clique, e o truque de margem negativa tende a desmoronar nos pontos de interrupção do tablet e do celular.

Um widget dedicado resolve tudo isso em um só lugar:

• Hover revelar construído em. A imagem permanece limpa até que o visitante paire, então o título e a descrição são animados.
• Um painel de configurações. Imagem, texto, cor de sobreposição e tipografia vivem em um único widget em vez de três empilhados.
• Responsivo por padrão. A sobreposição é dimensionada com a imagem, portanto nada muda de lugar em telas menores.
• Clique ações. Toda a imagem pode abrir um link ou um pop-up As grades de portfólio e as placas de serviço dependem disso.

É por isso que os layouts de texto sobre imagem aparecem em todos os lugares: blocos de portfólio que revelam o nome do projeto, cartões de equipe que mostram uma biografia no hover, banners de categorias de blog e grades de galeria onde as legendas, de outra forma, sobrecarregariam o design.

O widget de efeitos de pairar de imagens em resumo

Efeitos de Hover de Imagem navios na versão gratuita do Master Addons, a biblioteca de mais de 80 widgets e extensões executando em 30.000+ sites WordPress ativos Aqui está o que você obtém neste widget:

• Mais de 25 efeitos de hover nomeados (Sadie, Chico, Marley, Ruby e amigos), cada um com uma animação de revelação diferente
• Um campo de cabeçalho com uma tag HTML selecionável (H1 a H6), para que seu texto de sobreposição possa permanecer correto para SEO
• Um campo de descrição para uma linha de suporte curta
• Sobrepor a cor de fundo, a opacidade da imagem e os controles de opacidade do hover
• Raio da borda, preenchimento, sombra de caixa e tipografia separada para título e descrição
• Três comportamentos de clique: nada, abra um pop-up ou siga um link

Tudo funciona sem uma licença Pro. Se você quiser a referência de configurações completas, o Documentação do Image Hover Effects cobre cada controle.

Como adicionar texto sobre uma imagem no elementor (passo a passo)

Etapa 1: Instale complementos mestres

No seu painel WordPress, vá para Plugins > Adicionar novo e procure por “Master Addons” Instale e ative o plugin gratuito do WordPress.org. Se alguma coisa te deixar chateado, o guia instalação caminha por ele Você precisa do Elementor ativo também, mas a versão gratuita é suficiente.

Passo 2: arraste o widget de efeitos de pairar de imagem para sua página

Abra qualquer página com o Elementor e procure por “Image Hover Effects” no painel de widgets Você irá identificá-lo entre os outros widgets com o emblema MA, como Imagem Avançada, Hotspot de Imagem e Comparação de Imagens Arraste-o para a sua seção.

Passo 3: Carregue sua imagem

A guia Conteúdo abre com o Efeitos e imagem seção. Clique Carregar Imagem e escolha algo da sua biblioteca de mídia. Duas configurações estão logo abaixo:

• Tamanho da imagem controla as dimensões renderizadas O padrão funciona para a maioria dos layouts.
• Resolução de imagem escolhe quais cargas de tamanho geradas pelo WordPress. “Full” dá o resultado mais nítido Em uma página com oito ou dez desses blocos, caia para “Large”; ninguém vê a diferença no tamanho da grade e a página carrega visivelmente mais rápido.

Etapa 4: Escolha um efeito pairado

Aqui está a parte divertida Abra o Efeito Hover dropdown e você obtém a lista completa de efeitos nomeados: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey, Oscar, Marley, Ruby, Milo, Dexter, Sarah, Zoe, Chico, Julia, Golias, Hera, Winston, Selena, Terry, Phoebe, Apollo, Kira, Steve, Moses, Jazz, Ming, Lexi e Duke.

Cada nome é uma combinação diferente de animação de sobreposição e revelação de texto Sadie desliza um gradiente para cima a partir da parte inferior Marley deixa cair o título com um sublinhado Chico amplia a imagem ligeiramente e enquadra o texto com uma borda fina O editor de pré-visualização atualiza ao vivo, então clique em alguns e passe o mouse sobre a imagem para testar Aqui está Chico mid-hover:

Um agrupamento rápido para salvá-lo clicando em todos eles:

• Desaparecimentos sutis: Lily, Sadie, Layla, Zoe. Boas escolhas padrão para portfólios.
• Slides direcionais: Querida, Oscar, Romeu, Sarah O texto chega de um limite.
• Zoom e escala: Chico, Bubba, Milo, Julia A imagem se move, o que chama a atenção.
• Brincalhão e ousado: Marley, Ruby, Dexter, Golias, Apolo Movimento mais forte, melhor para sites criativos.

Passo 5: Adicione seu título

Abrir o Título seção. Digite seu título e escolha um Tag HTML. Isso importa mais do que parece: se a imagem estiver em uma grade de serviços, o H3 geralmente se ajusta melhor à hierarquia da sua página do que o H2 padrão. Os mecanismos de pesquisa leem esta tag como qualquer outro título da página.

Passo 6: Escreva a Descrição

O Descrição seção adiciona a linha menor que aparece sob o título no hover Mantenha-a em uma ou duas frases curtas parágrafos longos são cortados em imagens menores e derrotam o ponto de uma sobreposição limpa.

Estilizando a sobreposição: cor, opacidade e forma

Mudar para o Estilo guia. O Imagem painel controla como a sobreposição parece:

• Cor de fundo tons a sobreposição que aparece no hover Escolha uma cor da sua paleta de marcas; um valor HEXA como #DD5555 com alfa reduzido mantém a foto visível por baixo.
• Opacidade Imagem define o estado de repouso e Opacidade Hover define o quanto a imagem escurece quando a sobreposição aparece Uma lacuna entre os dois (digamos 0,5 descansando, 0,7 no hover) faz com que a revelação pareça deliberada.
• Filtro Imagem e Filtro de imagem Hover adicione filtros CSS como escala de cinza ou desfoque para modos antes/depois.

Abaixo disso, Raio Fronteira remodela todo o bloco Os valores correspondentes proporcionam cantos arredondados suaves; valores assimétricos (100 no canto superior esquerdo, 0 no canto superior direito, 100 no canto inferior direito, 0 no canto inferior esquerdo) criam o formato de folha que você vê em muitos sites de agências modernas.

Tipografia para o Título e Descrição

Ainda na guia Estilo, o Título e Descrição cada painel obtém seus próprios controles de cor, tipografia e espaçamento A família de fontes, tamanho, peso, transformação, altura da linha e espaçamento entre letras estão todos aqui, além de uma opção de sombra de texto para a descrição Se sua imagem for clara, mude a cor do título para um valor escuro para que o texto permaneça legível em ambos os estados.

Uma regra de legibilidade que vale a pena manter: procure um contraste claro entre o texto e o que quer que esteja por trás dele Se a foto estiver ocupada, apoie-se na cor de sobreposição e na opacidade da etapa anterior, em vez de combatê-la apenas com o peso da fonte.

Clique em Ações: Abra um Popup ou Vincule a Imagem Inteira

De volta à guia Conteúdo, o Links ou Popup? o controle decide o que um clique faz Três opções ficam atrás do pequeno ícone alternar: nenhuma, pop-up e link externo.

Pop-up abre uma janela de sobreposição com qualquer conteúdo que escolher Escolha um Tipo de Conteúdo e ou escreva conteúdo diretamente no editor WYSIWYG ou carregue um modelo Elementor salvo As grades de portfólio usam isso constantemente: cada bloco abre um estudo de caso sem sair da página.

Link transforma a imagem inteira em um cartão clicável Cole o URL no campo URL do link e toda a área de hover aponta para lá, o que supera um pequeno link de texto para tocar em alvos no celular.

Se você quiser mais padrões de pop-up além deste widget (intenção de saída, gatilhos de rolagem, pop-ups cronometrados), veja como fazer adicione um pop-up no Elementor gratuitamente.

O Resultado Terminado

Clique em visualização e passe o mouse sobre sua imagem A sobreposição desaparece, o título e a descrição revelam com o efeito que você escolheu e o cursor sinaliza a ação de clique:

O tempo total de compilação é de cerca de cinco minutos E, como cada escolha vive nas configurações do widget, você pode trocar o efeito ou recolorir a sobreposição no próximo mês sem reconstruir nada.

Dicas de design que mantêm o texto legível por imagem

• Um efeito por grelha. Se você construir um portfólio de 6 blocos, dê a cada bloco o mesmo efeito de hover Efeitos mistos lidos como acidentais.
• Contraste primeiro. O texto branco precisa de uma sobreposição escura; o texto escuro precisa de uma imagem clara ou de uma tonalidade de sobreposição clara.
• Descrições curtas. Dez palavras ou menos A sobreposição é um teaser, não um parágrafo.
• Teste ao toque. Nos telefones, o primeiro toque revela a sobreposição e o segundo toque dispara a ação de clique, portanto, certifique-se de que o estado revelado pareça completo em uma tela pequena.
• Corresponda ao raio da sua fronteira para o resto da página Uma forma de folha de 100 px ao lado de cartões de canto afiado olha fora.

Para uma orientação mais ampla de design de movimento, nosso guia para Efeitos de animação elementar as capas quando pairam, rolam e animações de entrada ganham cada uma seu lugar, e o Recursos de animação Master Addons a página mostra o que mais o plugin pode animar.

Outros widgets de complementos mestres para efeitos de imagem

Image Hover Effects é a ferramenta certa para revelações de texto, mas alguns widgets irmãos cobrem os casos de uso vizinhos:

• Imagem Avançada adiciona inclinação 3 D, fitas e emblemas a uma única imagem sem texto de sobreposição.
• O Widget flipbox vira um cartão para um verso totalmente projetado, melhor quando você precisa de botões ou ícones no estado revelado.
• Hotspot de imagem fixa marcadores interativos de dicas de ferramentas em pontos específicos de uma imagem, ideais para chamadas de produtos.
• O Carrossel de Imagem lida com controles deslizantes de múltiplas imagens quando um bloco flutuante não é suficiente.
• Comparação Imagem coloca um controle deslizante antes/depois arrastável em duas versões de um tiro.

Grátis vs Pro: O que você realmente precisa?

Para texto sobre imagem, nada além do plugin gratuito Todos os efeitos de hover 25 +, os campos de cabeçalho e descrição, estilo de sobreposição, pop-ups e links são enviados gratuitamente. Master Addons Pro adiciona o conjunto de widgets premium mais amplo, kits de modelos e extras como o Widget Builder, por isso vale a pena dar uma olhada quando você estiver construindo sites inteiros em vez de uma seção Há uma garantia de devolução do dinheiro em 14 dias se você tentar e mudar de ideia.

Prefere assistir? aqui está um passo a passo rápido no Elementor:

Perguntas frequentes

Embrulhando

Uma seção de texto sobre imagem do Elementor leva cinco minutos com o widget certo: solte os efeitos de passagem de imagem, carregue sua foto, escolha um efeito pelo nome e estilize a sobreposição para combinar com sua marca O posicionamento e o comportamento responsivo já são tratados para você, e a versão gratuita cobre tudo neste guia.

Pegue o plugin gratuito, navegue pelo resto do biblioteca de widgets e extensões, e se você ficar preso o documentação widget tem todas as configurações mapeadas.

Leitura relacionada: Efeitos de animação elementar, o widget Flipbox Elementor, e adicionando pop-ups no Elementor gratuitamente.