Alguma vez você já desejou saber como exibir texto acima de uma imagem com Elementor ?

Neste novo tutorial, mostraremos como fazê-lo.

Se você não tem ideia do que queremos falar hoje, convidamos você a assistir ao vídeo a seguir:

Então vamos voltar ao porquê de estarmos aqui.

Para concluir este tutorial, você precisará a versão Pro do Elementor, porque usaremos o código CSS personalizado que é compatível apenas com esta versão doElementor.

Descubra também o nosso guia em: Como criar uma galeria de imagens com Elementor

Vamos criar uma nova seção com uma estrutura de 3 colunas, então no painel, vamos definir o hauteur defende Altura Mínimae, em seguida, Altura mínima vamos clicar em VH e defina o controle deslizante para 100.

Vamos selecionar a coluna do meio e na guia Style, na seção fundo vamos clicar em clássico para Tipo de plano de fundoe selecione uma cor escura.

Vamos colocar nesta coluna o Widget de seção interna. O widget Internal Section é configurado por padrão com 2 colunas, vamos deletar uma delas. Vamos configurar o resto no painel modificando seu hauteur defende Altura Mínima e Altura mínima vamos definir o cursor para 400.

Leia também: Elementor: Como ampliar um cartão de perfil

Em seguida Alinhamento vertical selecionar Meio social.

Em seguida, solte o Widget de título no seção interna vamos entrar como Fotografia de Título, e em Alinhamento, vamos Escolher Centro.

Na aba Style vamos modificar a cor do título para que fique visível se não estiver,

Vamos soltar um Widget Editor de texto abaixo de Widget de título. Em seguida, na aba Style, em Alinhamento escolha Centro. Vamos também alterar a cor do texto para que fique visível.

Veja também: Elementor: Como adicionar um divisor para criar uma seção

Vamos selecionar o coluna do meio e em sua aba Style, redefina a cor de fundo e carregue uma imagem, depois Posição selecionar Centrado Centrado, repetição defende Sem repetição, cobertura defende Tamanho.

Na secção fronteira vamos modificar tudo raios de borda de 12. Em Sombra da caixa, defina o controle deslizante para 0 para Horizontal Em 0 para Vertical, para 40 em Desfoque, para -10 na transmissão. Você deve ver um belo efeito de sombra sob sua imagem.

em Sobreposição de plano de fundo, selecione clássico para Tipo de plano de fundo e couleur escolha um cor preta, na Opacidade, vamos definir o controle deslizante para 0.55

Na aba avançado, vamos pegar 20 para todas as margens.

Vamos selecionar nosso Seção interna e vá para sua guia avançado na seção CSS personalizado, copie e cole o seguinte snippet de código:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(Se você não tem esta seção, então você não tem a versão Pro, se você quiser continuar, você precisa atualizar sua versão).

Vamos mais uma vez selecionar a coluna do meio da nossa seção, em sua guia Style, e na seção Sobreposição de plano de fundo, verifique se estamos na guia NORMAL, vamos baixar Opacidade à 0.

Em seguida, clique na aba VISÃO GLOBALem seguida, no clássico para tipo de plano de fundo e couleur, Selecione uma cor escura, então oopacidade defende 0.55E para Duração da transição vamos definir o controle deslizante para 0.5.

Aqui está o resultado final da nossa manipulação.

Vamos duplicar nossa coluna 2 vezes e deletar as outras 2 colunas vazias. Resta apenas alterar a imagem de fundo e também o conteúdo editores de texto para as 2 novas colunas.

Visualize seu trabalho em Tablet e Smartphone para ver como fica. Em seguida, salve ou atualize-o.

Então. Você acabou de exibir um texto acima de uma imagem com o página Builder Elementor.

Obtenha o Elementor Pro agora!

Conclusão

Assim ! É isso para este artigo que mostra como exibir texto acima de uma imagem. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...