post
Alinhando texto flutuante no centro de imagem de fundo no Elementor
Publicado em: 26/07/2022 / Atualizado 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;
}Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para 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 e sugira um publicação sobre um assunto que tenha dificuldades de resolver.