Como Estilizar Categorias Individuais de Forma Diferente no WordPress

Você já quis fazer suas categorias do WordPress se destacarem? Talvez você queira que sua seção de 'Notícias' pareça diferente de suas categorias de 'Tutoriais' ou 'Avaliações' 🎨

Para ser honesto, estilizar categorias de forma diferente não é um problema urgente para a maioria dos blogs. Nós mesmos nem fazemos isso no WPBeginner.

Mas entendemos que cada blog tem necessidades únicas e o quão importante é engajar seus leitores. E para alguns sites, ter estilos e recursos distintos para cada página de categoria pode realmente ajudar os leitores a encontrar conteúdo com mais facilidade.

A boa notícia é que estilizar páginas de categoria individualmente é, na verdade, bem fácil. Criamos várias maneiras sem código para fazer isso: com o editor de site completo, um construtor de páginas e um editor visual de CSS.

Como Estilizar Categorias Individuais de Forma Diferente no WordPress

É Tão Importante Estilizar Suas Páginas de Categoria do WordPress de Forma Diferente? 🧐

Embora não seja necessário para todos os sites WordPress, existem algumas situações em que categorias personalizadas podem realmente melhorar a experiência dos seus leitores.

Se os tópicos das suas postagens do WordPress variam muito, você pode querer estilizar categorias individuais de forma única.

Por exemplo, se o seu blog WordPress cobre notícias e tutoriais, então você pode estilizar essas categorias de forma diferente. Isso ajuda os leitores a saberem que tipo de conteúdo estão vendo imediatamente.

Ou, pegue um site de avaliações. Você poderia estilizar uma única categoria para avaliações de produtos de forma diferente da sua categoria de comparações. Isso facilita para os visitantes encontrarem o que querem em seu site WordPress.

Alguns sites também podem querer estilizar certas categorias para se destacarem mais, enfatizando sua importância. Em um site de notícias, você pode querer dar à sua categoria 'Notícias Urgentes' um estilo mais chamativo em comparação com suas categorias de notícias regulares no WordPress.

Lembre-se, a principal razão para estilizar categorias no WordPress de forma diferente é tornar seu site mais fácil de usar. Se você acha que isso ajudaria seus leitores a encontrar o que procuram mais rapidamente, então implementar esta dica de design do WordPress pode ser uma boa ideia.

Com isso em mente, vamos dar uma olhada em 3 maneiras de estilizar categorias individuais no WordPress. Você pode usar os links rápidos abaixo para pular para o seu método preferido:

Método 1: Use um Page Builder para Estilizar Páginas de Categoria (Temas Personalizados)

Se você estiver disposto a trocar de tema ou criar um tema personalizado do WordPress do zero, usar um page builder pode ser uma excelente maneira de estilizar categorias no WordPress.

Este método é ideal para aqueles que desejam mais controle sobre o design do seu site e se sentem confortáveis usando ferramentas de terceiros.

Após testar várias opções, descobrimos que Thrive Architect é um dos melhores construtores de páginas para estilizar categorias individuais.

Ele oferece uma interface intuitiva de arrastar e soltar, permitindo que você crie categorias personalizadas e as estilize de forma única sem conhecimento de codificação. Você pode saber mais sobre o plugin em nossa análise do Thrive Architect.

No entanto, é importante notar que essa abordagem não é adequada para todos.

Se você estiver satisfeito com o seu tema atual do WordPress e não quiser trocá-lo, talvez queira considerar a Método 2 com o editor de site completo ou a Método 3 com o editor visual de CSS (que abordaremos mais tarde).

Mas se você estiver procurando mudar de tema, recomendamos a leitura do nosso guia sobre como mudar temas do WordPress corretamente.

Outra coisa a notar é que o Thrive Architect não tem versão gratuita. Mas você pode usar o nosso código de cupom Thrive Themes para obter até 50% de desconto na sua primeira compra.

Passo 1: Instalar o Thrive Architect

Vamos começar configurando o Thrive Architect. Após comprar um plano, você pode acessar o site da Thrive Themes.

Lá, você encontrará o plugin Thrive Product Manager. Simplesmente baixe o arquivo e instale-o no seu painel do WordPress. Se você não tiver certeza de como fazer isso, confira nosso guia sobre como instalar plugins do WordPress para iniciantes.

Instalar o Thrive Product Manager

Assim que ativar o plugin, abra o item de menu Product Manager no seu painel do WordPress.

Clique em ‘Log into my account’ para conectar seu site WordPress à sua conta Thrive Themes.

Faça login na sua conta Thrive Themes

Agora, você deverá ver uma lista de produtos Thrive Themes que pode usar.

Encontre ‘Thrive Architect’ e marque a caixa ao lado de ‘Install Product’.

Instalando o Thrive Architect

Role para baixo até ver ‘Thrive Theme Builder’ e escolha a opção ‘Instalar Tema’.

Em seguida, clique em ‘Instalar produtos selecionados’. Precisamos fazer isso porque o Thrive Architect funciona em conjunto com o Thrive Theme Builder.

Instalando o Thrive Theme Builder

A próxima página mostrará o Thrive Product Manager configurando o Thrive Architect e o Thrive Theme Builder.

Quando terminar, clique no botão ‘Ir para o Painel do Theme Builder’.

Ativando o Thrive Architect e o Thrive Theme Builder

Agora é hora de escolher um design inicial para o seu site na coleção de temas do Thrive.

Se você não tiver certeza de qual escolher, basta usar o botão ‘Visualizar’ para ver como cada tema fica. Quando encontrar um que goste, clique em ‘Escolher’.

Escolhendo um tema do Thrive Theme Builder

Em seguida, você iniciará o Assistente do Theme Builder. Este assistente ajudará você a adicionar seu logotipo, escolher as cores da sua marca e configurar diferentes partes do seu tema.

Certifique-se de concluir o assistente de configuração antes de passar para a próxima etapa.

Assistente de configuração do Thrive Theme Builder

Etapa 2: Criar um Modelo de Arquivo de Categoria

Com seu tema configurado, vamos mudar para a guia ‘Modelos’. É aqui que você verá os modelos padrão usados pelo seu tema para projetar suas páginas da web. Neste caso, o modelo usado para arquivos de categoria é chamado ‘Todos os Arquivos’.

Como queremos estilizar categorias do WordPress individuais, precisamos criar um novo modelo de arquivo de categoria primeiro. Para fazer isso, clique em ‘+ Adicionar Novo’.

Adicionando um novo template no Thrive Architect

Uma nova janela pop-up aparecerá. Primeiro, insira o nome do seu novo modelo de categoria. Você pode usar algo simples e incluir o nome da categoria lá.

Abaixo disso, selecione ‘Lista’ porque queremos criar uma página que liste todas as postagens de uma categoria específica.

Em Tipo de Lista, selecione ‘Arquivos’ e escolha ‘Categorias’ em ‘Tipo de Arquivo’.

No campo Definido para, escolha o nome da categoria para a qual você está criando o modelo. Para fins de exemplo, escolhemos ‘Blog’.

No final, você pode escolher ‘Começar do Zero’ ou ‘Escolher Modelo’.

Criando um novo template de categoria no Thrive Architect

Vamos com a segunda opção porque muitos dos modelos prontos do Thrive Themes já parecem bem projetados.

No próximo pop-up, você pode escolher um dos modelos disponíveis. Para ilustração, escolheremos ‘Layout em Grade – Post em Destaque’.

Assim que você fizer sua escolha, clique no botão ‘Criar Modelo’.

Escolhendo um layout de template no Thrive Architect

Agora você deve ver seu novo modelo adicionado à lista de modelos.

Passe o mouse sobre ele e clique em ‘Editar’ para começar a personalizá-lo.

Editando um modelo de categoria no Thrive Architect

Etapa 3: Personalize sua página de modelo de categoria

O Thrive Architect oferece muitas maneiras de personalizar sua página.

Funciona de forma semelhante ao editor de blocos, pois você pode arrastar e soltar elementos em sua página, selecionar um para personalizar e pronto. A diferença é que há muito mais opções de personalização para brincar.

O construtor de páginas Thrive Architect

Vamos dar uma olhada em um exemplo. Em nosso modelo de arquivo de categoria, há uma grande postagem em destaque no topo, com o restante das postagens na mesma categoria abaixo dela. Por padrão, a postagem em destaque é a postagem mais recente publicada nessa categoria.

Se você quiser alterar o layout deste elemento, clique no elemento ‘Featured List 01’. Em seguida, clique no botão de ícone externo na parte superior da barra lateral esquerda.

Alterando o design da postagem em destaque no Thrive Architect

Um pop-up aparecerá, pedindo para você escolher um design diferente para a postagem em destaque.

Existem vários para escolher, e você sempre pode alterá-lo novamente se não estiver satisfeito com sua escolha atual. Basta clicar no layout desejado, e o Thrive Architect o implementará automaticamente em seu modelo de página.

Escolhendo um design de postagem em destaque no Thrive Architect

Você também pode fazer a mesma coisa com a lista de postagens abaixo.

Basta selecionar o elemento ‘Blog List’. Depois disso, clique no ícone externo na parte superior da barra lateral esquerda, e você encontrará outros modelos para exibir sua lista de postagens como antes.

Escolhendo um design de lista de categorias no Thrive Architect

Se você quiser alterar ainda mais o design da lista de categorias, role a barra lateral para baixo.

Lá, você encontrará configurações para alterar o tipo de exibição (como transformá-lo em um carrossel), desativar a postagem em destaque, alternar o tipo de paginação (como de numérico para ‘Carregar mais’), aumentar/diminuir o número de postagens exibidas e muito mais.

Configurando o bloco de lista de posts no Thrive Architect

Você também pode adicionar outros elementos, como um título grande para informar aos visitantes em qual página de categoria eles estão e uma descrição junto com ele.

Para fazer isso, você pode clicar no botão ‘+’ no lado direito do construtor. Em seguida, selecione o elemento ‘Texto’ e solte-o onde for mais adequado para a página.

Adicionando um bloco de texto no Thrive Architect

No elemento de texto, clique no ícone de texto dinâmico no lado direito da barra de ferramentas de texto. Feito isso, selecione ‘Arquivo’ no campo Texto dinâmico e, em seguida, escolha ‘Nome do arquivo’ no campo abaixo dele.

Agora, clique em ‘Inserir’. O Thrive Architect adicionará o nome da sua categoria. Como este recurso adiciona conteúdo dinâmico, o nome da categoria será ajustado automaticamente se você o alterar no futuro.

A partir daqui, você pode alterar o estilo, formato, alinhamento do texto e muito mais.

Adicionando texto dinâmico no Thrive Architect

Para adicionar a descrição da categoria, basta clicar no botão ‘+’ novamente.

Depois disso, selecione o elemento ‘Descrição do Termo de Taxonomia’.

Adicionando uma descrição de termo de taxonomia no Thrive Architect

Se você adicionou uma descrição à sua categoria no admin do WordPress » Posts » Categorias, a descrição deverá aparecer automaticamente aqui.

Caso contrário, você pode voltar a essa página e atualizá-la mais tarde. Você pode seguir nosso tutorial sobre como exibir descrições de categoria no WordPress para mais informações.

Exemplo de bloco de descrição de termo de taxonomia no Thrive Architect

Uma coisa legal sobre estilizar suas categorias de forma diferente no WordPress é que você pode adicionar vários elementos que são especificamente adaptados para cada categoria.

Por exemplo, se você tem um ímã de leads ou um formulário de inscrição que é adequado apenas para um tópico específico, adicioná-lo a esta página de categoria é uma ótima maneira de segmentar leitores interessados.

Felizmente, o Thrive Architect tem blocos especificamente para esse fim.

Por exemplo, você pode clicar no botão '+' e adicionar o elemento 'Chamada para Ação' em qualquer lugar da sua página. É uma tática excelente para quebrar uma longa lista de posts em uma página de categoria.

Adicionando um elemento de chamada para ação no Thrive Architect

A partir daqui, você pode escolher um modelo de chamada para ação.

Se você não gostar de nenhum dos designs existentes, pode escolher o que mais gostar e alterar o estilo mais tarde.

Escolhendo um elemento de chamada para ação no Thrive Architect

Agora, você pode alterar o texto dos elementos de chamada para ação.

Para adicionar o URL de destino para o botão de chamada para ação, basta clicar no próprio botão. Em seguida, insira o URL e escolha se deseja que ele abra em uma nova aba e nofollow.

Adicionando uma URL de destino ao elemento de chamada para ação no Thrive Architect

Depois disso, sinta-se à vontade para alterar ainda mais o elemento de chamada para ação modificando sua tipografia, adicionando uma cor de fundo, inserindo animações, e assim por diante.

Quando estiver satisfeito com a aparência da página da categoria, clique em ‘Salvar Trabalho’.

Salvando seu trabalho no Thrive Architect

Com sua página de categoria pronta, você pode agora visualizar seu site no celular, desktop ou tablet para garantir que tudo esteja com boa aparência.

Em seguida, você pode repetir os mesmos passos anteriores para criar páginas de categoria individuais com seus próprios estilos. Ou, apenas estilize suas categorias principais e deixe as demais usarem o modelo de arquivo de categoria padrão do Thrive Themes.

Veja como o nosso fica em nosso site de demonstração:

Exemplo de página de categoria de blog no Thrive Architect

Método 2: Use o Editor de Site Completo para Estilizar Páginas de Categoria (Temas de Bloco)

Este segundo método é para usuários de temas de bloco. O editor completo do site oferece uma maneira fácil de criar um modelo personalizado do WordPress para páginas de arquivo de categoria e estilizar categorias individuais de forma diferente.

A vantagem deste método é que ele não precisa de um plugin. Dito isso, certifique-se de que você esteja satisfeito com as opções de personalização fornecidas pelo seu tema WordPress e pelo editor completo do site, pois é com isso que você estará trabalhando.

Primeiro, vamos abrir o editor completo do site indo para Aparência » Editor no seu administrador do WordPress.

Selecionando o Editor de Site Completo no painel de administração do WordPress

Agora você verá as configurações principais para personalizar seu tema de bloco.

Para criar um modelo de categoria personalizado, clique em ‘Modelos’.

Escolhendo o menu Modelos no FSE

Agora, você verá vários modelos padrão que seu tema oferece. Isso variará de acordo com o tema do WordPress, mas normalmente, um tema incluirá um modelo usado para todas as suas páginas de arquivo de categoria. O desenvolvedor do tema especificaria qual é esse modelo na descrição.

No nosso caso, o modelo padrão para páginas de arquivo de categoria é chamado ‘Todos os Arquivos’. Além de categorias, este modelo também é usado para outros tipos de arquivos como tags, taxonomias personalizadas, tipos de postagem personalizados e assim por diante.

Para criar um novo modelo para suas páginas de arquivo de categoria, clique em ‘Adicionar Novo Modelo’ no canto superior direito.

Adicionando um novo modelo no FSE

Uma janela pop-up aparecerá agora, pedindo para você escolher qual tipo de modelo criar.

Aqui, basta escolher ‘Arquivos de Categoria’.

Escolhendo um tipo de arquivo para criar um modelo no FSE

Nesta etapa, você pode escolher se deseja criar um novo modelo de arquivo de categoria personalizado para todas as categorias ou apenas para uma categoria específica.

Como estamos tentando estilizar categorias individuais de forma diferente, escolheremos ‘Categoria Para um item específico’.

Escolhendo uma categoria específica para criar um modelo no FSE

Tudo o que você precisa fazer agora é escolher a categoria para a qual deseja criar um modelo.

Neste caso, escolheremos a categoria ‘Blogging’.

Escolhendo um nome de categoria para criar um modelo no FSE

Agora você entrará no editor completo do site. Um pop-up deve aparecer, pedindo para você escolher um padrão de bloco para usar na página de arquivo de categoria.

Você pode escolher um padrão ou pular esta etapa se quiser começar do zero.

Escolhendo um padrão de bloco para o modelo de categoria no FSE

Para fins de exemplo, começaremos do zero e daremos exemplos de como estilizar sua página de categoria de forma diferente no WordPress.

Agora, se você não quiser começar completamente do zero e encontrar outros padrões para usar, aqui está o que você pode fazer.

Você pode clicar no sinal preto de ‘+’ no canto superior esquerdo para adicionar um bloco. Em seguida, mude para a aba ‘Padrões’ e role para baixo até a opção ‘Posts’. Você deverá ver alguns padrões para exibir vários posts do WordPress.

Escolhendo um padrão de bloco no FSE

Se você não estiver satisfeito com as opções padrão, pode criar seu próprio design. O processo é simples com o editor de site completo, pois você estará apenas arrastando e soltando blocos como de costume no editor de blocos.

Dito isso, recomendamos usar o Bloco de Grupo primeiro para que você possa gerenciar partes do modelo como um único bloco. Clique no botão '+' em qualquer lugar da página e escolha 'Grupo'.

Adicionando um bloco de grupo no FSE

Agora, selecione um layout para o bloco de grupo.

Existem quatro opções para escolher, e você pode selecionar a que melhor funciona para o seu site WordPress.

Escolhendo um layout para um bloco de grupo no FSE

Sugerimos adicionar o bloco Título do Arquivo ao bloco de grupo primeiro. Isso exibirá automaticamente o título da sua categoria.

Assim, se você alterar o nome da categoria no futuro, o título também será ajustado automaticamente. Você pode encontrá-lo clicando no botão '+' em qualquer lugar da página e selecionando 'Título do Arquivo'.

Escolhendo o bloco de título do arquivo no FSE

Por padrão, este bloco exibirá o título no formato 'Tipo de Arquivo: Título do Arquivo'.

Mas você pode desativar o tipo de arquivo no título acessando a barra lateral de configurações do bloco e desativando o botão 'Mostrar tipo de arquivo no título'.

Exibindo o título do tipo de arquivo no FSE

Outra coisa que você deve adicionar é um bloco que exibe todos os posts da categoria.

Para fazer isso, clique no botão '+' e escolha 'Lista de Posts'.

Escolhendo o bloco de lista de posts no FSE

Agora, você pode escolher se deseja usar um design pré-fabricado ou começar do zero.

Para ilustrar, usaremos a opção 'Começar do zero'.

Escolhendo o layout da lista de posts no FSE

Nesta etapa, você pode escolher um layout para exibir os posts.

Existem 4 opções: Título e Data; Título e Resumo; Título, Data e Resumo; e Imagem, Data e Título.

Escolhendo um layout para exibir a lista de posts no FSE

Depois de escolher um layout, você deverá ver a lista de todos os seus posts.

Agora você deve filtrar os posts com base na categoria. Para fazer isso, mude para a aba 'Bloco' na barra lateral de configurações do bloco. Em seguida, role para baixo até a seção 'Filtros' e clique no menu de três pontos.

Aqui, escolha 'Taxonomias'.

Filtrando os posts em uma taxonomia específica no FSE

Simplesmente insira o nome da categoria para filtrar a lista de posts no campo apropriado.

Certifique-se de pressionar a tecla 'Enter' depois disso.

Filtrando os posts em uma categoria específica no FSE

Para alterar quantos posts são exibidos, você pode clicar no bloco 'Lista de Posts' e selecionar o ícone 'Configurações'.

Agora, você pode alterar o número no campo 'Itens por Página'.

Alterar o número de posts exibidos no FSE

Para alterar a aparência da página, você pode escolher um dos blocos na página. Em seguida, mude para a aba ‘Bloco’ na barra lateral de configurações e navegue até a aba ‘Estilo’.

Agora você verá as opções de estilo disponíveis para esse bloco específico. Sinta-se à vontade para alterar a cor do texto ou a cor do link, mudar as fontes, ajustar o preenchimento e a margem, e assim por diante.

A barra lateral de configurações de estilos de bloco no FSE

Neste ponto, você pode descer a página e localizar o bloco que diz: ‘Adicionar texto ou blocos que serão exibidos quando uma consulta não retornar resultados.’

Aqui, você pode digitar algum texto ou adicionar blocos que aparecerão caso a categoria ainda não tenha nenhuma postagem.

Adicionando texto quando não há resultados na categoria no FSE

E isso é tudo sobre o básico de edição de uma página de categoria no editor completo do site. Agora você pode adicionar mais blocos a ela para torná-la mais distinta das outras páginas de arquivo de categoria.

Em seguida, basta clicar em ‘Salvar’.

Depois disso, você pode repetir os mesmos passos anteriores para criar páginas personalizadas do WordPress para todas as suas categorias. Você também pode simplesmente editar suas categorias principais, e as demais usarão o modelo de arquivo padrão do seu tema.

Salvando suas alterações no FSE

Se você quiser mais dicas e truques sobre como usar o editor completo do site, confira nosso guia completo para iniciantes sobre edição completa do site no WordPress.

Também recomendamos conferir nossa lista dos melhores plugins de blocos Gutenberg para que você possa adicionar muitos outros elementos à sua página de categoria.

Veja como fica nossa página de categoria simples:

Exemplo de uma página de categoria feita com FSE

Método 3: Use o CSS Hero para Estilizar Páginas de Categoria (Todos os Temas)

Este terceiro método é recomendado para usuários de temas clássicos do WordPress, embora usuários de temas de bloco também possam utilizá-lo.

O motivo é que muitos temas clássicos não oferecem a opção de estilizar individualmente suas páginas de arquivo de categoria. E se você não quiser usar o Método 1, a alternativa é usar CSS personalizado.

O truque com CSS é que você precisa saber codificar. Se você é um iniciante completo, sem formação técnica, codificar pode não ser a opção mais amigável para você.

Felizmente, encontramos uma maneira fácil de personalizar seu tema usando CSS sem codificar nada, que é usando o CSS Hero.

O CSS Hero é um plugin que permite personalizar seu tema existente com um editor visual de CSS. Tudo o que você precisa fazer é selecionar um elemento em seu site, alterar seu estilo, e o CSS Hero mudará o código CSS desse elemento.

Dito isso, em comparação com os métodos anteriores, recomendamos o uso de CSS apenas se você quiser fazer pequenas alterações nas páginas de arquivo de suas categorias. Embora uma reformulação seja possível, pode levar mais tempo.

Além disso, o plugin não vem com uma versão gratuita, embora você possa usar nosso cupom CSS Hero para obter um desconto de 40%.

Para mais informações, você pode conferir nossa revisão completa do CSS Hero.

Depois de comprar e baixar o CSS Hero, você pode instalá-lo e ativá-lo no seu painel do WordPress. Para instruções passo a passo, confira nosso guia para iniciantes sobre como instalar plugins do WordPress.

Em seguida, você deverá ver um botão CSS Hero na parte superior da sua barra de administração. Clique nele para começar a editar seu site.

Abrindo o CSS Hero no WordPress

A captura de tela abaixo mostra como sua página deve ficar agora.

No lado esquerdo, há uma barra lateral onde você pode modificar os elementos individuais em sua página. Na parte superior, você encontrará botões para visualizar sua página em diferentes dispositivos, alternar para o modo de navegação e desfazer alterações.

Na parte inferior, você pode salvar seu trabalho.

A interface do CSS Hero

Por padrão, você verá sua página inicial.

Para personalizar uma página de arquivo de categoria, mude do modo ‘Editar’ para o modo ‘Navegar’ no canto superior direito da página. Em seguida, vá para a categoria que você deseja personalizar.

Ativando o modo Navegar no CSS Hero

Uma vez que você estiver na página certa, você pode voltar para o modo ‘Editar’.

Para garantir que suas edições afetem apenas esta página de categoria específica e não o restante, altere a configuração ‘Modo de Seleção’ para ‘Categoria’.

Mudando para o modo de seleção de Categoria no CSS Hero

Agora, você pode prosseguir e selecionar um elemento para editar.

Neste exemplo, clicamos no grupo de blocos que exibem o título e a descrição da categoria. A barra lateral esquerda agora tem configurações para alterar esse elemento.

Selecionando um bloco no CSS Hero

Vamos tentar um exemplo. Se você quiser alterar a cor de fundo, clique na opção ‘Fundo’.

Em seguida, você pode clicar no ícone do seletor de cores e selecionar a cor que mais lhe agrada. Também é possível adicionar um gradiente ou uma imagem como fundo.

As configurações de Fundo no CSS Hero

Como escolhemos uma cor bastante escura, o texto não está legível agora. Felizmente, o CSS permite que você clique nos elementos de texto individuais dentro deste grupo de blocos.

Para alterar a cor do texto, você pode mudar para a configuração ‘Tipografia’ e selecionar a cor desejada. Você também pode personalizar o tamanho da fonte, a altura da linha e até mesmo a família da fonte.

As configurações de Tipografia no CSS Hero

Outra coisa legal que você pode fazer é adicionar uma sombra de caixa aos seus elementos para que eles se destaquem ainda mais.

Para fazer isso, clique em qualquer elemento ao qual você deseja adicionar uma sombra. Em seguida, navegue até a aba ‘Extra’ e clique em ‘Criar Sombra’.

As configurações Extras no CSS Hero

Agora, comece a arrastar o ponto para onde você deseja que a sombra apareça. Você verá automaticamente uma sombra abaixo do elemento.

Quando terminar, você pode ajustar o desfoque, a expansão, a posição e a cor da sombra.

Ajustando as configurações de sombra de um bloco no CSS Hero

Se você achar que os elementos estão muito próximos uns dos outros (como se precisasse adicionar quebras de linha) ou muito distantes, você pode ajustá-los nas configurações de ‘Espaçamentos’.

Aqui, você pode alterar o preenchimento e a margem de cada elemento para que pareçam mais proporcionais.

Ajustando o preenchimento e a margem de um bloco no CSS Hero

Na verdade, há muito mais que você pode fazer com o CSS Hero. Se você quiser saber mais, confira estes guias:

Assim que estiver satisfeito com a aparência da página de categoria, basta clicar em ‘Salvar’.

Salvando seu trabalho no CSS Hero

É isso. Agora, você pode repetir os mesmos passos com as outras páginas de categoria para que elas pareçam mais exclusivas.

Aqui está o resultado final da nossa página de categoria, criada com o CSS Hero:

Um exemplo de página de arquivo de categoria feita com CSS Hero

Dica Bônus: Use um Tema Diferente para Páginas de Categoria Específicas

Quer fazer uma grande mudança na aparência de algumas de suas categorias? Você pode considerar usar um tema completamente diferente para certas categorias.

Isso pode ser ótimo se você quiser que um grupo de páginas de categoria tenha a mesma aparência, mas diferente de todo o resto.

Tenha em mente, no entanto, que você não pode estilizar cada categoria individualmente. Em vez disso, você está criando dois visuais distintos para o seu site.

Embora isso lhe dê muita liberdade para mudar as coisas, lembre-se de que ainda é importante manter seu site com uma aparência um tanto consistente. Mesmo que algumas categorias pareçam diferentes, tente manter alguns elementos comuns.

Isso ajuda os visitantes a se sentirem confortáveis enquanto navegam em seu site. Você pode manter seu site WordPress envolvente e fácil de usar, encontrando um equilíbrio entre designs exclusivos e consistência.

Para mais detalhes sobre como fazer isso, veja nosso guia sobre como usar vários temas em seu site WordPress.

Esperamos que este artigo tenha ajudado você a aprender como estilizar categorias individuais de forma diferente no WordPress. Você também pode querer conferir nossas seleções especializadas dos melhores construtores de temas WordPress e nosso guia definitivo sobre como editar um site WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

10 CommentsLeave a Reply

  1. Eu experimentei com a estilização de categorias personalizadas e gostaria de acrescentar que é crucial manter um equilíbrio entre exclusividade e consistência.
    Embora seja tentador tornar cada categoria drasticamente diferente, é importante reter alguns elementos comuns para garantir uma experiência de usuário coesa em todo o site.

  2. é possível alterar o estilo de todas as postagens sob a categoria e não apenas a página de arquivo da categoria, com a opção de CSS?

    eu quero display:none de um elemento apenas em páginas de categorias específicas

    • É possível, mas você precisaria adicionar algum código para adicionar o alvo da categoria às postagens, pois essa não é uma adição padrão do WordPress.

      Admin

  3. Obrigado pelo seu artigo!

    Digamos que eu queira estilizar todas as postagens na categoria "Reviews", mas apenas as subcategorias em reviews são selecionadas para a postagem.

    Como posso estilizar todas as subcategorias na categoria Review?

        • Desculpas pela confusão com o que quisemos dizer, quisemos dizer seguir este guia para cada uma das subcategorias e, se você quisesse agrupar as subcategorias, pode adicionar uma vírgula para que o CSS afete um alvo adicional.

    • A questão é como atribuir um layout de modelo de categoria personalizado do painel de administração para várias outras categorias.

      Por exemplo, eu criei um template chamado Category-grid.php. Como posso atribuí-lo a várias categorias no meu WordPress?

  4. Artigo Fantástico!

    Sou novato no WordPress e tenho tentado descobrir uma maneira de fazer exatamente isso. No entanto, encontrei alguns problemas ao seguir seus passos. Nosso site WP está configurado em um servidor Windows executando o iis 7, então não sei se isso está causando meu problema, mas tenho certeza de que o problema está do meu lado, não com suas instruções.

    Tentei ambos os métodos; copiando category.php para um novo arquivo php com o nome de uma das minhas categorias e CSS. O CSS funcionou perfeitamente, mas com o primeiro método, recebi um erro dizendo que uma chamada para uma determinada função no arquivo php category original foi duplicada no meu arquivo category personalizado. Criei o novo arquivo php no diretório do meu tema filho (estou usando Avada). O category.php original também não foi encontrado no local que você menciona, mas na pasta wp-includes. Minha página de blog tem funcionado bem; e minhas categorias também. Não tenho certeza de como lidar com isso, pois havia MUITA codificação no arquivo php category original; não tenho ideia do que, se é que alguma coisa, eu deveria ter excluído do meu arquivo php category personalizado.

    Muita informação, eu sei. Muito obrigado por responder se você tiver mais sugestões.

    Amo este site!

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.