Construindo um Site de Avaliação de Produto com Extra - Parte 4

Bem-vindo à parte 4 desta série de 4 partes sobre como desenvolver um site de avaliação de produto usando o Extra. Se você está quebrando a cabeça para saber como começar a desenvolver um site de avaliação de produto, esta série é para você. Com sua funcionalidade de revisão integrada e categorização inteligente de postagens, o Extra é especialmente equipado para criar resenhas de ótima aparência, modelos de postagens de produtos, mega menus e layouts de categorias em minutos. Junte-se a mim enquanto exploramos o poder do Extra.

Na parte 1, definimos nossas opções de tema e configurações do personalizador. Na parte 2, adicionamos nossas postagens e construímos um layout de postagem para exibir as avaliações de nossos produtos. Na parte 3 desta série, criamos dois layouts de categoria para nosso site de análise de produto - um para nossa página inicial e outro para a página “Todas as categorias”.

Hoje vamos terminar nosso site de análise de produtos construindo nosso layout de categoria padrão, nosso menu e nosso rodapé. O destaque da postagem de hoje será o menu personalizado, que possui links de menu que correspondem à cor de suas páginas de categoria correspondentes. Também mostrarei como implantar as opções de mega menu integradas do Extra e adicionar algumas personalizações próprias.

Aqui está uma prévia do que vamos construir

Vamos começar.

Construindo um Site de Avaliação de Produto com Extra - Parte 4

Inscreva-se no nosso canal no Youtube

Construindo a página de categoria padrão

Extra vem com uma página de categoria padrão já instalada. A página de categoria padrão é o layout que será usado ao visualizar uma página de categoria que não possui um layout de categoria específico selecionado. Na parte 3 desta série, designamos um layout de categoria para nossa página inicial e atribuímos nossa página “Todas as categorias” à categoria específica “Todas as categorias”. Para o restante de nossas páginas de categoria de análise de produto, usaremos esse layout de categoria padrão.

Para personalizar nosso layout de categoria padrão, vá para o painel do wordpress e navegue até Extra> Construtor de categoria. Em seguida, passe o mouse sobre "Categoria padrão" e clique no link editar.

Por padrão, sua categoria padrão tem dois módulos empilhados um em cima do outro dentro de uma linha de uma coluna de uma seção padrão. Antes de fazer qualquer alteração no layout, certifique-se de selecionar a opção “Usar este layout como o layout padrão?” na caixa Layout Usage na barra lateral direita.

Primeiro, substitua o controle deslizante de postagens em destaque por um módulo de carrossel de postagens. Em seguida, atualize as configurações do módulo marcando “Categoria / Tag / Taxonomia atual” como a categoria para este módulo. Agora, este módulo de carrossel de postagens exibirá apenas os produtos da página da categoria que está sendo visitada. Muito inteligente, hein?

Saída segura

Você pode deixar o Módulo de Maçonaria do Blog Feed com as configurações padrão. Apenas certifique-se de que qualquer módulo de categoria que você adicionar a esta página no futuro tenha a categoria “Categoria / Tag / Taxonomia Atual” atribuída a ele.

Agora, para estilizar o título h1 da página da categoria, você precisa adicionar o seguinte CSS personalizado ao CSS adicional no personalizador de temas. Certifique-se de colocá-lo dentro de uma consulta de mídia com largura mínima de 980 px.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

Isso é tudo para o layout de categoria padrão. Vamos verificar como fica nosso layout padrão na página de categorias de minha cozinha.

Agora que temos nosso layout de categoria padrão, vamos chamar nossa atenção para uma das partes mais importantes de nosso site - o menu de navegação.

Já configuramos nosso estilo básico de cabeçalho na parte 1 desta série. Mas hoje vamos criar e estilizar nosso menu de navegação principal.

No painel do WordPress, navegue até Aparência> Menus e selecione Menus . Selecione o link “criar um novo menu” na parte superior da página e digite o nome “Menu de categorias” como o nome do menu. Em seguida, selecione “Menu principal” como o local de exibição na seção Configurações do menu.

Agora podemos começar a adicionar nossos itens de menu ao nosso menu. Clique no botão de alternar Categorias à esquerda da página. Nas opções que aparecem, selecione “ver tudo” para ter certeza de que pode ver todas as categorias disponíveis. Marque todas as 5 categorias que você criou (não sem categoria) e clique no botão Adicionar ao Menu para adicioná-las à seção de estrutura de menu à direita da página. Agora você pode clicar e arrastar cada um dos itens de menu a serem exibidos na seguinte ordem:

• Eletrônico
• Confecções
• Cozinha
• Saúde
• todas as categorias

Antes de editar os itens de menu, selecione o link de opções de tela na parte superior da página. Na seção de propriedades do menu avançado que é aberta, certifique-se de marcar a caixa ao lado de “Classes CSS”. Isso nos permitirá adicionar uma classe CSS personalizada a cada um de nossos itens de menu.

Volte para o seu menu. Começando com o item de menu Categoria de eletrônicos, clique para alternar para abrir as opções de configuração. Na caixa Classes CSS, adicione uma classe chamada “verde”. E para a opção Extra Mega Menu, selecione “Mega Menu 3 Apresentado”.

Isso vai realizar duas coisas. Primeiro, a classe “verde” será usada para tornar o item de menu verde ao pairar. Em segundo lugar, a opção de mega menu 3 em destaque adicionará três itens em destaque como um mega menu ao passar o mouse sobre o item de menu.

Para o item do Menu da Categoria de Roupas, adicione a classe “azul” e selecione a opção “Mega Menu 3 Apresentado” .

Para o item Cozinha Categoria Menu, adicione a classe “rosa” e selecione a opção “Mega Menu 3 Apresentado” .

Para o item de menu da categoria Health & Fitness, adicione a classe “roxo” e selecione a opção “Mega Menu 3 em destaque” .

O item de menu “Todas as categorias” será um pouco diferente. Vá em frente e deixe a caixa de texto Classes CSS em branco. E para a opção Mega Menu, selecione “Mega Menu List”. Este tipo de mega menu é um mega menu mais tradicional que cria uma lista de itens de submenu. O objetivo desse mega link de menu é mostrar todas as categorias com uma lista de seus produtos embaixo.

Volte e abra a caixa de categorias e selecione as mesmas quatro categorias (Eletrônicos, Roupas, Cozinha e Saúde e Fitness) e adicione-as ao menu. Em seguida, arraste cada uma das categorias que você acabou de adicionar um nível no mega item de menu “Todas as categorias”.

Alterne as opções de configuração para cada um desses itens de menu de categoria e adicione as mesmas classes CSS a cada um, como você fez anteriormente. Aqui estão as categorias com a classe que você precisa adicionar:

Eletrônica - verde
Roupas - azul
Cozinha - rosa
Saúde e Fitness - roxo

Em seguida, vamos adicionar nossa própria imagem personalizada para servir como nossa imagem de categoria em destaque para cada categoria no mega menu.

Use um editor de fotos para reduzir e cortar cada imagem para ter uma largura de 500 px e uma altura de 300 px.

Adicione / arraste-os para a biblioteca de mídia do WordPress.

Agora volte para a página de menus no WordPress Admin.

Neste exemplo, o link da categoria superior no meu mega menu é “Eletrônicos”. Clique na seta à direita do item “Eletrônicos”. Na caixa Navigation Label adicione a imagem desejada usando a tag html img diretamente antes do texto “Electronics”. A tag da imagem deve ter a seguinte aparência:

<img src="Insert Image Url" width="100%" />

Para encontrar o url da imagem, vá para Mídia → Biblioteca. Clique na imagem que você deseja adicionar. Na tela pop-up Detalhes do anexo, localize o url na seção à direita, realce-o e use ctrl + c para copiá-lo para a área de transferência.

Agora volte para a configuração do item de menu “Eletrônicos” na página do menu e substitua o texto “Inserir URL da Imagem” colando o URL da sua imagem usando ctrl + v.

Repita o mesmo processo para os próximos 3 itens de menu de categoria.

Depois de adicionar todas as quatro marcas de imagem a cada um dos itens de menu de sua categoria, é hora de adicionar seus itens de menu de postagens individuais (links para análises de produtos) em cada uma de suas respectivas categorias.

Clique para alternar para abrir a caixa Postagens à esquerda e selecione a guia “ver todos”. Em seguida, selecione todos os 12 produtos e clique em Adicionar ao menu. Em seguida, arraste cada um dos itens do menu de postagem um nível em cada uma de suas categorias.

Salvar menu

Antes de verificarmos nosso novo menu, precisamos adicionar alguns CSS customizados para dar os toques finais em nosso menu.

Acesse Theme Customizer> Additional CSS e digite o seguinte CSS:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

Salve e publique suas configurações.

Agora vamos verificar nosso novo menu. Observe as cores dos itens de menu conforme você passa o mouse sobre eles. As cores correspondem à cor da categoria correspondente.

Construindo o rodapé

Para construir o rodapé de nosso site de análises de produtos, vamos aproveitar as vantagens dos widgets integrados do Extra para exibir as análises de produtos mais recentes e uma lista de categorias.

Primeiro, precisamos ir para Theme Customizer> Footer Settings. Em seguida, clique em Layout e selecione um layout de 2 colunas.

Volte e selecione Tipografia e atualize o seguinte:

Tamanho do texto do título: 32
Corpo / tamanho do texto do link: 16
Cor do texto do widget: rgba (255,255,255,0,6)
Cor do link do widget: #ffffff
Cor do título do widget: #ffffff

Salvar e publicar

Volte ao menu principal do Customizador de Tema e selecione Widgets. Em seguida, selecione Rodapé Barra Lateral à Esquerda e clique no botão para Adicionar um Widget. Selecione o widget Extra - Resenhas recentes

Volte ao menu de widgets e selecione Rodapé Barra Lateral à Direita e adicione o widget Categorias.

Vá para a seção CSS adicional e adicione o seguinte CSS personalizado para seu rodapé.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Salve e publique as configurações do Customizador de tema e verifique seu rodapé.

É isso. Você concluiu com êxito a parte 4 e concluiu a série sobre a construção de um site de avaliação de produto usando o Extra.

CSS final

Dependendo de onde você entrou na série, pode ser necessário verificar seu CSS personalizado para garantir que tudo foi inserido corretamente. Aqui está o código CSS final a ser inserido no Customizador de Tema.

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
comment box background
*****************************/
#comment-wrap {
padding: 75px 40px;
background: #fff;
border-radius: 3px;
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

/***************************
Post Header Size
****************************/
h1.entry-title {
font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
text-align: center;
padding-bottom: 0px;
}
.fancy span {
display: inline-block;
position: relative;
line-height: 1.3em;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 4px solid #333;
border-top: 4px solid #333;
top: 40%;
width: 100%;
max-width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title {
display: block;
font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Empacotando

Espero que você tenha gostado de explorar o poder do Extra ao criar um site de avaliação de produtos comigo. Se qualquer coisa, estou confiante de que você pelo menos sairá com uma nova apreciação por este tema notável e um pouco de inspiração para fazer mais com ele. O sistema de avaliação integrado, os layouts de categoria inteligentes e o poder do Divi Builder o tornam ideal para um site de avaliação de produto.

Um tópico que não abordei (guardando para um post futuro) é como lidar com links afiliados usando Extra. Afinal, para a maioria das pessoas, o objetivo final de seu site de avaliação de produtos é ganhar dinheiro. Sinta-se à vontade para compartilhar sua opinião sobre este assunto abaixo nos comentários.

Estou ansioso para ouvir de você.