Se você deseja criar um site WordPress visualmente agradável, a alteração das cores de fundo pode ajudá-lo a destacar conteúdo importante, criar uma hierarquia visual clara e tornar seu site mais atraente. Entretanto, com tantos blocos disponíveis no WordPress Block Editor, pode ser confuso descobrir como alterar a cor de fundo de cada um deles.
Embora alguns blocos venham com configurações de cor de fundo incorporadas, outros exigem uma abordagem ligeiramente diferente. A boa notícia é que a maioria dos blocos principais do WordPress suporta a personalização nativa da cor de fundo e, para aqueles que não suportam, há soluções simples, como o bloco Group e o bloco Cover.
Neste guia, vamos orientá-lo em três métodos fáceis para que você possa estilizar com confiança qualquer bloco do seu site. Abordaremos os blocos que permitem mudanças diretas de cor, mostraremos como usar o bloco Group e exploraremos o bloco Cover para designs avançados, como seções de heróis e banners. Vamos começar.
Método 1: Cor de fundo direta (suporte nativo)
Muitos blocos principais do WordPress vêm com suporte nativo para alterações de cor de fundo. Isso significa que você pode aplicar cores diretamente sem adicionar blocos extras ou código personalizado.
Etapa 1: Selecione o bloco
Comece clicando no bloco que deseja personalizar no editor. Isso ativará o bloco, e suas configurações aparecerão na seção Configurações de bloco painel à direita.
Etapa 2: Abra a barra lateral de configurações de bloqueio
Se o painel de configurações ainda não estiver visível, clique no ícone Configurações localizado no canto superior direito do editor. Sob o botão Configurações de bloco localize o painel Estilos seção.
Etapa 3: Ajuste a cor do plano de fundo
No painel de configurações Styles, você encontrará a opção Cor seção. Sob Configurações de cores, encontrar Histórico. Agora, basta escolher uma cor na paleta, trabalhar com o seletor de cores ou inserir um código HEX/RGB/HSL personalizado.
Aplica-se a
- Blocos de texto e conteúdo: Parágrafo, Título, Lista, Citação, Pullquote, Código, Pré-formatado, Verso
- Blocos de layout: Grupo, Colunas, Capa, Mídia e Texto
- Blocos interativos/Widget: Botões, calendário, últimas postagens, categorias, nuvem de tags, ícones sociais, navegação, arquivo, áudio, vídeo, RSS, pesquisa, login/saída, lista de páginas
- Blocos de site/post: Título do site, slogan do site, título da postagem, conteúdo da postagem, trecho da postagem, data da postagem, autor da postagem, categorias da postagem, tags da postagem, comentários, postagem seguinte/anterior, leia mais
- Blocos utilitários: Espaçador (limitado), Separador (limitado), Mesa (somente a mesa inteira).
Notas
- Bloco da capa: Em vez de um plano de fundo, você encontrará a opção Overlay (Sobreposição). Você pode ajustar a cor da sobreposição junto com as configurações de opacidade para efeitos em camadas.
- Bloco de botões: A cor de fundo se aplica ao próprio botão, enquanto a opção de cor do texto altera o texto do botão.
- Ícones sociais: A cor de fundo afeta apenas o contêiner do ícone.
- Bloco de tabelas:
- Para alterar o cor de fundo de toda a tabelaSelecione o bloco Table e aplique a cor no painel de configurações.
- Você pode ter cores diferentes para as linhas, mas isso está limitado à opção padrão. Vá para a seção Estilos e escolha a seção Listras mas a cor da faixa é predefinida e não pode ser personalizada nativamente.
Método 2: Embrulhar em um bloco de grupo
Para blocos que não têm opções nativas de cor de fundo, como blocos de mídia, legados ou utilitários, você pode usar um Bloco de grupos para atuar como um contêiner flexível. Ao envolver o conteúdo dentro do bloco Group, é possível aplicar cores de fundo a toda a seção.
Etapa 1: Identificar e direcionar o bloco específico
Clique no bloco que não é compatível com a cor de fundo diretamente. Depois de fazer isso, aparecerá a barra de ferramentas do bloco acima desse bloco específico.
Etapa 2: Agrupar o bloco
Agora, clique no botão Menu de opções (três pontos) na extremidade direita da barra de ferramentas do bloco e selecione Grupo no menu suspenso. Isso envolve o bloco selecionado em um bloco de grupo.
Etapa 3: Selecione o bloco de grupo
Clique na borda externa do bloco Group e, quando a barra de ferramentas aparecer, selecione o bloco do grupo pai na extremidade esquerda. Isso destacará toda a seção.
Etapa 4: Aplicar a cor de fundo
Em seguida, navegue até a seção Painel de configurações do bloco, role até Cor e escolha uma cor de fundo ou use o seletor de cores para obter tons personalizados.
Etapa 5: Ajuste o espaçamento (opcional)
Se o conteúdo dentro do bloco de grupo ocupar toda a largura do bloco, talvez seja necessário ajustar a largura do conteúdo para tornar a cor de fundo visível. Selecione o Grupo (como fizemos na etapa 3), vá para o bloco Configurações de blocorole para baixo até Largura do conteúdoe defina uma largura personalizada para criar espaço entre o conteúdo e o plano de fundo colorido.
Aplica-se a
- Blocos de mídia sem suporte direto: Imagem (se não for convertida em capa), vídeo, áudio
- Blocos de legado/utilidade: Shortcode, Classic, More, HTML personalizado, Legacy Widget, Template Part, Page Break, Archives, Embed (YouTube, Twitter, etc.), Avatar, Comments Query Loop, Spacer (para controle avançado), Separator (para maior flexibilidade)
Notas
- O bloco Group é ideal para criar seções com cores de fundo uniformes.
- É possível aninhar vários blocos dentro de um bloco Group para estilizá-los como uma seção coesa.
- Ajuste as configurações de layout (como alinhamento e preenchimento) para obter melhor controle sobre o espaçamento e o fluxo de conteúdo.
Método 3: Use um bloco de cobertura
Quando você precisar de opções avançadas de design, como efeitos de sobreposição ou planos de fundo em camadas, o Bloco de cobertura é a solução perfeita. Ele permite adicionar cores ou imagens de fundo com opacidade personalizável para torná-lo perfeito para seções de heróis, banners ou áreas de conteúdo em destaque.
Etapa 1: Adicionar um bloco de cobertura
Basta começar clicando no botão + no editor, procure por Capae insira-o em seu conteúdo.
Etapa 2: Escolha uma cor de fundo
Na configuração inicial, selecione uma cor de fundo ou adicione uma imagem. Se estiver usando uma imagem ou uma cor, você pode alterar a cor da sobreposição e ajustar a opacidade da sobreposição. Para fazer isso, vá para a seção Cor seção sob a Estilos na guia Configurações de bloco.
Etapa 3: Inserir conteúdo dentro do bloco de capa
Para inserir o conteúdo dentro do bloco de capa, você pode simplesmente usar a tag barra de ferramentas de blocos para arrastar o(s) bloco(s) que você deseja estilizar (como parágrafos, cabeçalhos ou imagens) para o bloco Cover ou adicionar novos blocos diretamente dentro dele usando o botão insersor de blocos (botão +).
Aplica-se a
- Para necessidades de design avançado: Qualquer bloco que exija efeitos de plano de fundo em camadas, como parágrafos, cabeçalhos, imagens, botões ou até mesmo vários blocos combinados.
Notas
- O bloco de cobertura é perfeito para seções de heróis, áreas de apelo à açãoe banners.
- Você pode colocar o texto em camadas sobre cores de fundo ou imagens para obter efeitos visuais impressionantes.
- Ajuste a opacidade para obter sobreposições sutis ou blocos de cores fortes.
Tabela de resumo: Blocos e métodos
Categoria de bloco |
Método |
|---|---|
Blocos de texto/conteúdo (por exemplo, parágrafo, título, lista) |
Método 1 |
Blocos de mídia (por exemplo, imagem, vídeo, áudio) |
Método 2 ou 3 |
Blocos de layout (por exemplo, Colunas, Grupo, Capa) |
Método 1, 2 ou 3 |
Blocos interativos (por exemplo, botões, ícones sociais) |
Método 1 |
Blocos de widgets (por exemplo, Search, Calendar) |
Método 1 |
Blocos legados/utilitários (por exemplo, Shortcode, Classic) |
Método 2 |
Conclusão
A maneira mais fácil de causar um grande impacto na aparência geral do seu site é provavelmente alterando a cor de fundo dos blocos principais do WordPress que você usa. Sua escolha de fornecer conteúdo usando a cor de fundo correta certamente atrairá os visitantes do site. É um truque simples, mas poderoso, para melhorar a experiência do usuário e fazer com que seu site se destaque. Quer você escolha as configurações nativas de cor de fundo, use o método de bloco de grupo ou escolha a abordagem de bloco de capa, no final das contas, não se trata apenas de adicionar cor; trata-se de criar um ambiente em que seu conteúdo fale mais alto. Portanto, vá em frente, faça experiências com cores e veja como pequenas mudanças podem transformar seu site em uma plataforma mais eficaz.
