Como sobrepor uma imagem no WordPress

Se você está entusiasmado em tornar seu site excepcional, sempre trabalhará muito para embelezá-lo. Existem milhões de maneiras de tornar seu site uma musa, e uma delas será mencionada em nossa postagem de hoje: sobrepondo uma imagem .

Ainda está se perguntando o que é? Vá com calma e vamos levá-lo para sair!

O que é uma sobreposição?

Como você pode ver, usei uma imagem com texto e sobreposição como título; isso fez uma grande diferença em escrever um título de texto simples. Parece muito mais estiloso e atraente em comparação com o normal, certo?

Mais importante, a sobreposição na imagem ajuda a destacar o texto enquanto mantém a imagem de fundo visível. Você pode adicionar uma imagem com texto e sobreposição em postagens / páginas como essa com facilidade e usá-la para diferentes fins. Nesta postagem, mostraremos como fazer isso em etapas simples.

Ficou animado ainda? Vamos começar!

Como sobrepor uma imagem no WordPress

Existem dois métodos que você pode tentar sobrepor uma imagem no WordPress: usando o bloco de cobertura de Gutenberg e usando CSS. Embora o uso de Gutenberg o ajude a construir um post / página que inclua uma imagem com sobreposição mesmo de uma folha vazia, o uso de CSS o ajudará a personalizar rapidamente as imagens em um post / página pré-construído.

Esses dois métodos são fáceis de usar de algumas maneiras e mostraremos como usá-los um por um.

Método 1: Usando o Cover Block de Gutenberg

Vá para o editor de página de Gutenberg.

Etapa 1: Insira uma imagem usando o bloco de cobertura.

Clique em Adicionar bloco e escolha o tipo de bloco como Capa .

Em seguida, escolha uma imagem de plano de fundo para exibir naquele bloco de capa. Você pode fazer upload de uma imagem ou escolher uma imagem de sua biblioteca.

Você também pode alterar uma imagem adicionada anteriormente em uma imagem de capa, se necessário. Clique na imagem, escolha Alterar estilo ou tipo de bloco e escolha Capa :

No meu caso, vou escolher este gorro como plano de fundo e escrever algum texto aleatório nele também.

Além disso, posso definir a largura da minha imagem nas configurações abaixo. Vou apenas alinhá-lo no centro.

Agora meu bloco de capa está pronto com uma imagem de fundo e um texto. Por padrão, o bloco de cobertura já tem uma sobreposição de cor preta, então veremos como podemos editá-lo na próxima parte:

Etapa 2: personalizar a sobreposição do bloco de cobertura

A seguir, você continuará com as configurações de bloqueio para fazer uma sobreposição.

Clique no bloco> clique no botão Opções (exibido como um botão de três pontos)> escolha Mostrar mais configurações .

O menu de configurações de bloqueio agora deve estar pronto à direita da tela. Vá para a seção Sobreposição .

Ele oferece duas opções de cores que são Sólido e Gradiente para sobrepor sua imagem de capa:

Tentaremos essas duas opções. Primeiro, vamos tentar a sobreposição de cor sólida.

Sobreposição de cor sólida

Agora você pode:

• Escolha uma cor no menu sugerido;
• Escolha uma cor personalizada. Você pode escolher uma cor na paleta ou inserir um código de cores. A cor personalizada é exibida conforme abaixo.

Acabei de escolher uma cor rosa doce para a minha sobreposição. Além disso, também posso alterar a opacidade (o nível de transparência) da sobreposição:

A taxa de opacidade de 30 a 60% é um valor adequado. Se você definir a opacidade abaixo ou acima da taxa sugerida, a sobreposição pode ser quase invisível ou muito ousada para ver o plano de fundo. Vou manter a taxa de opacidade em 50% como padrão.

Está tudo pronto aqui! É assim que você pode simplesmente adicionar uma sobreposição de cor sólida à imagem da capa.

Agora vamos passar para a opção de cor gradiente.

Sobreposição de cor gradiente

Uma cor gradiente, conforme mencionado acima, é um esquema de pelo menos duas cores escolhidas. Ou simplesmente, a cor da sobreposição mudará respectivamente e gradualmente da primeira para a segunda cor escolhida (e assim por diante).

Vamos ver como faço uma sobreposição de gradiente para entender melhor.

Primeiro, mudei o modo de cor de Sólido para Gradiente. Além disso, escolhi um conjunto de cores gradientes no menu de sugestões. Isto é o que parece:

Como você pode ver, a sobreposição consiste em 3 pontos de controle. Cada um carrega uma cor sólida e você pode mover esses pontos de controle para ajustar o esquema de cores da sobreposição.

O arranjo de cores padrão ao escolher a cor do gradiente é equilibrado. Vou tentar ajustar um pouco, e é assim que muda:

Outro ajuste que você pode fazer é o tipo de esquema de cores. Você pode escolher entre o tipo Linear e Radial . Com o tipo Linear , você também pode escolher a direção da sobreposição.

Para dominar essa opção de gradiente de cor, você precisará de um melhor senso artístico e também aprender a misturar e combinar cores para fazer a melhor combinação para a sobreposição.

Método 2: usando CSS

Se você deseja adicionar sobreposição a uma imagem usando o Editor Clássico, é necessário usar CSS. Você precisa adicionar algum CSS. Vá para Aparência> Personalizar> CSS adicional .

Para sobreposição de gradiente

Adicione este código para sobreposição de gradiente:

 .background-gradient {
    posição: relativa;
}
.background-gradient :: before {
    contente: '';
    fundo: gradiente linear (135deg, # 0693e3, # 9b51e0);
    posição: absoluta;
    topo: 0;
    esquerda: 0;
    inferior: 0;
    direita: 0;
    índice z: 1;
    opacidade: 0,5;
}

Para sobreposição sólida:

Adicione este código para sobreposição sólida:

 .background-opacity {
    posição: relativa;
}
.background-opacity: antes de {
    contente: '';
    posição: absoluta;
    topo: 0;
    esquerda: 0;
    inferior: 0;
    direita: 0;
    índice z: 1;
    opacidade: 0,5;
    cor de fundo: # 000;
}

Observação: este código o ajudará a adicionar apenas a sobreposição, não o texto na imagem.

Você pode adicionar ambos se quiser adicionar muitas imagens com diferentes tipos de sobreposição. Para definir a sobreposição como cor sólida ou gradiente , vá para o editor de texto e adicione uma classe à imagem que deseja sobrepor:

• Sólido: <div class="background-opacity"> … </div>
• Gradiente: <div class="background-gradient is-style-default"> … </div>

Por exemplo:

É assim que eu faço!

Veredito

Adicionar overlay às imagens realmente ajuda você a decorar seus posts / páginas e causar uma impressão melhor aos visitantes. Vale a pena estudar como fazer uma sobreposição perfeita, portanto, recomendo que você comece a trabalhar nisso imediatamente. Você também pode tornar seu site mais atraente com controles deslizantes, banner pop-up, fundo de vídeo ... Espero que minhas instruções sejam claras o suficiente para você e fique à vontade para deixar perguntas e comentários abaixo, se houver. Tchau!