Alinhando texto flutuante no centro de imagem de fundo no Elementor

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;
}