post
Alinhando texto flutuante no centro de imagem de fundo no Elementor
Publicado em: 26/07/2022
Caso você precise centralizar um texto, em uma imagem de fundo, atingindo um resultado como esse da imagem abaixo:

É muito simples.
Este artigo mostra como fazer isso no Elementor, mas pode ser adaptado para trabalhar com qualquer site HTML, que seja possível adicionar CSS personalizado. A única coisa que o Elementor vai fazer, é trazer as estruturas HTML mais fácil.
Primeiro, você precisa adicionar os blocos corretos com o Elementor, deixe seu esquema como abaixo:

No exemplo acima, adicionei dentro da mesma coluna, um bloco de imagem, e logo abaixo um bloco de texto.
Nesse caso, no editor, um fica em baixo do outro (imagem em cima e texto em baixo), porem, queremos que o texto que esta em baixo fique em cima da imagem.
Para isso, vá na seção de “CSS personalizado”, e adicione o trecho abaixo:
selector { position: absolute; width: 100%; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; }
Desse jeito você terá o texto alinhado com a imagem de fundo.
Também é possível manipular mais ainda os elementos de texto, para melhorar a disposição.
Como no exemplo abaixo:

Onde tenho 2 textos (1 titulo + 1 descrição), além de um ícone acima, que fiz apenas aplicando um “Margin” e “z-index” no próprio painel da imagem de fundo, como abaixo:

Mas, vamos focar nos textos, o resto é irrelevante para isso.
Minha estrutura de blocos ficou assim:

Os textos pode ser manipulados com o mesmo código acima, porem com alguns ajustes:
CSS do titulo:
selector { position: absolute; width: 88%; top: 90px; bottom: 0; left: 6%; right: 0; display: flex; flex-direction: column; justify-content: flex-start; }
CSS da descrição em baixo:
selector { position: absolute; width: 88%; top: 0; bottom: 25px; left: 6%; right: 0; display: flex; flex-direction: column; justify-content: flex-end; }
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1860
ID de Referência: 1860
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.