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.