Como definir o plano de fundo da imagem no WordPress

Existem mais maneiras de adicionar imagens de fundo no WordPress. Do básico ao mais avançado com alteração do código do tema. No entanto, temos o prazer de apresentar uma ferramenta amigável, ideal para administradores de sites sem conhecimento de codificação e design. plug-in Citadela Pro vem com muitos recursos e configurações para personalização do site.

Experimente os poderosos blocos, configurações e recursos do plug-in Citadela Pro gratuitamente. Oferecemos 7 dias de avaliação com todos os recursos premium. Você pode explorar a ferramenta perfeita que permite adicionar imagens de plano de fundo às páginas, postagens e tipos de postagem personalizados do WordPress.

O Cluster é um bloco do Gutenberg no WordPress que permite adicionar uma imagem de fundo. O elemento multifuncional permite que você altere o WordPress de fundo de seu padrão. Você pode não apenas adicionar uma imagem de fundo, mas também combiná-la com outros blocos. Você ganha muitas variações e versatilidade.

Combinado com o Bloco de título da página, você obtém um site de aparência fabulosa com facilidade. Você pode adicionar mais blocos Gutenberg e personalizar a imagem de fundo no WordPress. Além disso, você pode salvar um conjunto de blocos como blocos reutilizáveis e adicionar um tema em qualquer lugar do seu site. Assim, você pode alterar o plano de fundo do site WordPress de uma só vez.

Como adicionar imagem de fundo no WordPress usando o bloco Gutenberg

Imagem de plano de fundo do WordPress através do bloco Cluster

Apresentamos o bloco útil que criamos para o bloco WordPress Gutenberg para imagem de fundo - Bloco de cluster. Faz parte do nosso próprio grupo de blocos. O plug-in Citadela Pro possui muitos recursos para ajudá-lo a criar um site bonito. Todos os blocos personalizados AitThemes estão disponíveis em plug-in Citadela Pro.

Por favor leia Documentação do bloco de cluster para configurações detalhadas.

Bloco de cluster permite agrupar vários blocos em um. Você pode efetivamente trabalhar com todo o grupo agrupado como se fosse um bloco. A largura do cluster pode ser definida como largura total da página, o que significa que você tem um espaço extra grande para adicionar vários blocos.

O cluster não se estenderá até a largura total se:

• Você tem uma barra lateral ativa
• Se você usar colunas que limitarão o espaço para Cluster

Como alguns dos blocos principais do WordPress podem ser alinhados apenas à largura do conteúdo, o bloco Cluster oferece maior variabilidade na construção do seu site. Um ótimo recurso também é que você pode definir uma imagem de fundo para o WordPress, alterar sua cor ou definir a sobreposição da imagem de fundo. O plano de fundo pode, portanto, ser configurado para o design do site.

Neste artigo mostraremos a você:

• Como adicionar bloco Cluster ao editor do WordPress
• Agrupamento dentro do cluster
• Configurações básicas na barra de ferramentas
• Cabeçalho e cor do separador
• Como adicionar imagem de fundo em blocos agrupados
• O que é sobreposição de plano de fundo
• Qual é a diferença entre o bloco Group e o bloco Ait Cluster

Como adicionar bloco de Cluster

Bloco de cluster é um bloco premium e só está disponível se você instalar e ativar Plug-in de blocos Citadela. Depois de instalar o plug-in, o bloco Cluster será adicionado automaticamente ao editor de blocos do WordPress e você poderá começar a trabalhar imediatamente com ele.

O bloco de cluster pode ser adicionado em postagens e páginas. Basta clicar em “+” na barra superior ou em qualquer lugar na área de trabalho do editor. Depois é só procurar pelo bloco Cluster.

A segunda opção para adicionar o bloco Cluster é digitando “/” e o nome do bloco depois disso. O bloco de cluster está pronto para uso.

Agrupando blocos usando Cluster

A principal característica do bloco Cluster é agrupar vários blocos em um. Vamos dar uma olhada em como funciona. Se você inserir o bloco Cluster em sua página, verá imediatamente um espaço reservado “Insira mais blocos aqui”. Se você clicar nele, obterá uma lista de todos os blocos disponíveis. Você também pode pesquisar o bloco solicitado usando a barra de pesquisa no topo da lista.

Todos os blocos aninhados terão todas as opções e configurações padrão disponíveis. Por exemplo, se você inserir um bloco de imagem, terá a opção de fazer upload da imagem ou selecioná-la na Biblioteca de mídia.

Usando o bloco Cluster, você pode, por exemplo, criar uma seção atraente em seu site para apresentar seu trabalho recente. Adicione imagens do seu portfólio e depois defina a imagem de fundo abaixo dela. Você acabou de criar um bom link para o seu portfólio.

O bloco de cluster também pode ser usado para criar uma apresentação atraente do produto. Você pode definir a imagem do produto como plano de fundo da seção e escolher sua cor. bloco de serviço também pode ser aninhado dentro do bloco Cluster.

Vários blocos em um só

Se você deseja adicionar vários blocos aninhados ao Cluster, pode usar o bloco Columns. Usando o Bloco de colunas, você pode adicionar vários blocos lado a lado. Cada coluna pode ter um tipo de conteúdo diferente, como imagem, parágrafo, lista ou botão.

Um exemplo típico de várias colunas em combinação com o bloco Cluster é o site de uma página.

Configurações básicas na barra de ferramentas: opções de alinhamento de conteúdo

Por padrão, a largura do bloco Cluster é definida como tamanho do conteúdo. Você pode alterar esse comportamento na barra de ferramentas. Existem as seguintes opções disponíveis:

• Tamanho do conteúdo – opção padrão, o bloco Cluster tem a mesma largura do conteúdo.
• Tamanho largo – o conteúdo dentro do cluster é mais largo que a largura do conteúdo.
• Tamanho da largura total – neste caso, a largura do cluster é de um lado ao outro da janela do navegador.

É importante observar que essa configuração só afetará o conteúdo do cluster se o seu tema atualmente ativo for compatível. Todos os blocos aninhados podem ser configurados com base na disponibilidade de suas opções.

Configurações de cores de título e separador

Mudança de cor do cabeçalho

Desde WP 5.3 você pode mudar a cor do seu cabeçalho através do bloco Cabeçalho. Esse é um recurso muito útil – especialmente se você tiver um layout e um esquema de cores escuros, é melhor alterar a cor do texto padrão (que é preto) para uma cor mais clara.

Não foi possível alterar a cor do cabeçalho até o novo lançamento, o que causou problemas com sua visibilidade em uma base escura. Portanto, muitas vezes aconteceu que o título se misturou com a imagem ou foto de plano de fundo do WordPress que você adicionou. Agora você pode escolher a cor certa do título para fazer seu site brilhar.

Nova cor para o separador usado em seu site

Quando você adiciona ao seu WP uma imagem de plano de fundo ou qualquer outro tipo de conteúdo, às vezes pode ser necessário separá-lo do restante do site. Para isso, você pode usar um bloco especial chamado Separator. Ao inserir o separador, você pode:

• Separe blocos específicos
• Divida o texto inteiro em seções menores
• Destaque partes importantes
• Garanta uma melhor legibilidade do conteúdo
• Simplifique a navegação no seu site

Além disso, agora você pode alterar a cor da linha do separador com o WordPress atualizado. Separador colorido é perfeito para completar o esquema de cores do seu site.

Como adicionar imagem de fundo em blocos agrupados

O verdadeiro poder do bloco Cluster é que você pode adicionar uma imagem de fundo e definir a cor de fundo abaixo dos blocos agrupados. Tudo pode ser configurado facilmente dentro do inspetor do WordPress. Vamos dar uma olhada em como fazer isso.

1. Clique em Imagem de fundo e ative a função “Mostrar imagem de fundo”.
2. Clique em “Selecionar imagem”. Biblioteca de mídia será aberta. Você pode selecionar uma imagem existente ou fazer upload de uma nova imagem para sua biblioteca.
3. A imagem de fundo também pode ser definida como fixa. Isso significa que, se você rolar a página, o plano de fundo não se moverá com o conteúdo e sua posição será fixa.
4. Você também pode escolher qual parte da imagem de fundo deve ser mostrada usando o “Seletor de ponto focal”. Também é possível escolher parte da imagem usando porcentagem.

Sobreposição de plano de fundo

Uma das opções avançadas no Cluster é a sobreposição de imagem de fundo. Você pode escolher uma das cores padrão ou selecionar uma cor personalizada usando o seletor de cores. Também é possível definir a opacidade da cor. Essas configurações de bloco de cluster ajudam você a criar uma apresentação de site realmente atraente.

Novo bloco de grupo disponível no núcleo

Qual é a diferença entre o bloco Group e o bloco AitThemes Cluster?

Nosso bloco Cluster personalizado foi lançado antes do bloco Group e fornece uma solução mais complexa. Você pode usar o bloco Group para agrupar vários blocos, mas ainda tem funções limitadas. Por exemplo, você não pode definir a sobreposição de cores no bloco – você só pode escolher a cor de fundo básica que ficará ao redor da imagem, não sobre ela.

A edição da imagem de fundo é moleza em nosso bloco Cluster.

Você pode fazer upload para sua imagem de plano de fundo do WordPress, definir a cor de fundo e também a sobreposição de cor de fundo (e personalizar a opacidade da sobreposição também!). Leva apenas alguns minutos.