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

Bem-vindo à parte 2 desta série de 4 partes sobre como desenvolver um site de análise 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 desta série, começamos nossa jornada de construção de um site de análise de produto configurando as opções de tema e as configurações do personalizador de tema.

Hoje vamos começar a trabalhar adicionando nossa primeira análise do produto como uma nova postagem e personalizando o layout dessa postagem usando o Divi Builder e as configurações de tema Extra. Depois de concluir este tutorial, você terá um modelo de postagem salvo que pode ser obtido em sua biblioteca para criar o restante de suas postagens com facilidade.

Aqui está uma prévia do que iremos construir

Preparando os Elementos de Design

Como adicionaremos nossos produtos nesta parte da série, você precisará das imagens de seus produtos. Para este tutorial, terei 4 categorias com 3 produtos em cada categoria, então estarei usando um total de 12 imagens. Estou usando imagens de estoque do shutterstock com fundos brancos para dar uma aparência mais limpa.

Para projetar o layout do post, usaremos o Visual Builder e um pouco de Custom CSS.

Vamos começar.

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

Inscreva-se no nosso canal no Youtube

Adicionando sua primeira avaliação do produto como uma nova postagem

No painel do WordPress, vá para Postagens> Adicionar novo .

Cada postagem será a sua avaliação do produto, então o nome da postagem deve ser o nome do seu produto. Como meu produto será um rastreador de condicionamento físico, irei inserir “Rastreador de condicionamento físico” como título da minha postagem.

Observação : se ainda não o fez, agora é um bom momento para definir as configurações do permalink para a opção “Nome da postagem” para que seu URL contenha apenas o nome do produto (de sua preferência, é claro).

Em seguida, clique no botão “Usar Divi Builder” e depois no botão “Usar Visual Builder” para implantar o Visual Builder.

No Visual Builder, insira uma linha de uma coluna e adicione um módulo de texto à coluna.

Na guia de conteúdo das Configurações do Módulo de Texto, digite o seguinte html na caixa de conteúdo (certifique-se de estar trabalhando na guia “texto” e não na guia “visual”):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Isso servirá como nossas legendas “extravagantes” para as diferentes seções. Vamos estilizá-lo com CSS personalizado mais tarde.

Logo abaixo da tag h2, você pode adicionar o texto da descrição do produto. Estou usando algum “lorem ipsum” por enquanto.

Adicione outra linha de uma coluna abaixo da linha atual e adicione outro módulo de texto nela. Nas configurações do módulo de texto, adicione outra legenda html inserindo a seguinte tag h2 “Prós e contras” na guia de texto da sua seção de conteúdo.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

Isso iniciará a seção Prós e Contras da análise do seu produto.

Em seguida, adicione meia linha e meia (duas colunas) sob a anterior. Na coluna da esquerda adicione um módulo de texto e coloque um título h3 com o texto “Pros”.

Agora duplique esse módulo de texto e arraste o módulo duplicado para a coluna da direita. Altere o título h3 no novo módulo de texto para “Contras”.

Dica : No Visual Builder, você pode simplesmente clicar na caixa de texto e digitar o novo título em vez de abrir as configurações.

A seguir, usaremos o módulo blurb para adicionar alguns subitens nos títulos Prós e Contras.

Na coluna esquerda, sob o Módulo de texto “Prós”, adicione um Módulo Blurb. Na guia de conteúdo das configurações do Blurb, adicione uma linha de texto (estou usando um texto fictício por enquanto) na caixa de conteúdo.

Em seguida, role para baixo e selecione “Usar ícone”. Na caixa Ícone que aparece, selecione o símbolo de adição.

Clique na guia Design e atualize o seguinte:

Cor do ícone: #ffffff

Ícone de círculo: SIM

Cor do círculo: # 5bd999

Posicionamento de imagem / ícone: esquerda

Salvar configurações

Duplique (ou copie) esse módulo de sinopse e arraste (ou cole) no módulo de texto “Contras”. Em seguida, atualize a guia Blurb Settings Design com a seguinte cor de círculo: # e6567a

Salvar configurações

Agora duplique os módulos do blurb em cada coluna algumas vezes, pois não sabemos quantos você pode precisar para um determinado produto.

Agora vá para as configurações de linha que contêm seus prós e contras. Na guia de conteúdo , atualize o seguinte:

Plano de fundo da coluna 1: # f8f8f8

Plano de fundo da coluna 2: # f8f8f8

Na guia Design , atualize o seguinte:

Usar largura de calha personalizada: SIM

Largura da calha: 1

Equalize a altura das colunas: SIM

Preenchimento da coluna 1: 20 px (superior), 20 px (direita), 20 px (inferior), 20 px (esquerda)

Preenchimento da coluna 2: 20 px (superior), 20 px (direita), 20 px (inferior), 20 px (esquerda)

Na guia Avançado , adicione o seguinte CSS personalizado à caixa de texto Elemento principal da coluna 1 :

 border-top: 10px solid #5bd999; 

Adicione o seguinte CSS à caixa de texto Elemento principal da coluna 2 :

 border-top: 10px solid #e6567a; 

Dica : se você tiver uma versão atualizada do Extra, deverá ser capaz de aplicar as novas animações ao seu site. Adicione uma animação à linha Prós e Contras acessando Configurações de linha na guia Design e selecionando o estilo de animação desejado. Isso fará com que sua seção Prós e Contras se destaque à medida que o usuário rola a página para baixo.

Salvar configurações

Duplique (ou copie) a segunda linha que contém o subtítulo “Prós e Contras” e arraste (ou cole) sob a linha que acabamos de terminar. Em seguida, altere o cabeçalho h2 para “Especificações”.

Duplique a linha de duas colunas que contém os itens da lista de prós e contras e coloque-a no novo módulo de texto com o título “Especificações”. Exclua os dois módulos de texto que contêm os cabeçalhos “Prós” e “Contras” da coluna.

Agora clique em Configurações do Blurb para o primeiro módulo do blurb na coluna à esquerda.

Na guia Conteúdo , altere o ícone para uma marca de seleção.

Na guia Design , altere a cor do círculo para # 222222.

Salvar configurações

Agora exclua os outros módulos do blurb e substitua-os pelo que você acabou de atualizar, duplicando e arrastando-os para os lugares certos.

Agora vá para Configurações de linha e substitua o CSS personalizado na caixa de texto Elemento principal da coluna 1 e Elemento principal da coluna 2 pelo seguinte:

border-top: 10px solid #222222;

Salvar configurações

Agora, a última coisa que precisamos adicionar a esse layout de postagem é um botão “comprar”. Vá em frente e crie uma nova linha de uma coluna e adicione um Módulo de botão . Em seguida, atualize as configurações do módulo de botão da seguinte forma:

Na guia Conteúdo ...

Texto do botão: Compre agora

URL do botão: [inserir URL] (provavelmente, será um link afiliado para um site de terceiros)

Url é aberto: na nova guia

Na guia Design ...

Alinhamento do botão: Centro

Cor do Texto: Escuro

Use estilos personalizados para botão: SIM

Tamanho do texto do botão: 30 px

Cor do texto do botão: # 222222

Cor do texto flutuante do botão: # 5bd999

Botão Hover Background Cor: #ffffff

Cor da borda do botão flutuante: # 5bd999

Isso é tudo para a seção de conteúdo do layout de postagem do seu produto. Certifique-se de salvar a página . Depois de salvar a página, saia do construtor visual para editar a postagem no painel do wordpress.

Adicionando comentários à sua postagem

Role para baixo até a parte inferior da página do editor de postagem e encontre a caixa intitulada “Conteúdo da caixa de revisão” .

Esta adição inteligente ao Extra permite que você adicione uma avaliação do produto às suas postagens. O sistema de classificação é projetado para ter uma ou várias avarias. Uma divisão é um componente que compõe a classificação geral. Por exemplo, se você for avaliar uma câmera, os detalhamentos de exemplo incluiriam coisas como design, desempenho, duração da bateria, etc ... Esses são componentes da câmera aos quais você pode adicionar uma porcentagem de classificação separada. O Extra irá então calcular a porcentagem de classificação geral com base nesses componentes e exibi-la na caixa Revisão. A caixa de revisão também possui áreas de entrada úteis para um título de caixa de revisão, resumo e título de resumo.

Para adicionar sua revisão, atualize o conteúdo da caixa de revisão com o seguinte:

Título da caixa de revisão: [insira o título da caixa de revisão] (sugiro “Revisão do produto” ou “Revisão editorial”)

Resumo: [inserir o resumo]

Título do resumo: [insira um título para o resumo] (estou apenas usando “Resumo” para mantê-lo simples)

Em seguida, adicione quatro detalhamentos com um título e uma porcentagem de classificação da seguinte forma:

Discriminação # 0

Título: Design

Avaliação: 85%

Repartição # 1

Título: Performance

Avaliação: 90%

Repartição # 2

Título: Vida útil da bateria

Avaliação: 70%

Discriminação # 3

Título: Características

Avaliação: 85%

Agora que você definiu sua classificação, vamos dar alguns toques finais em nossa postagem antes de publicá-la.

Atribua uma categoria à sua postagem

Certifique-se de atribuir a categoria certa à sua postagem / produto clicando na caixa de seleção ao lado da categoria. Neste caso, como este post é para um rastreador de condicionamento físico, vou selecionar a categoria “Saúde e condicionamento físico”. Além disso, desmarque a caixa “sem categoria”.

Aqui está uma análise dos produtos e suas categorias que estou usando:

• Confecções
  • Sapato
  • Assistir
  • Meias legais
• Cozinha
  • Facas de cozinha
  • Mixer
  • Tábua de cortar
• Saúde
  • Rastreador de fitness
  • Pesos
  • Esteira
• Eletrônicos
  • Câmera
  • Fones de ouvido
  • Notebook

Não muito longe na página, você encontrará a caixa Configurações extras. Esses controles permitem que você substitua as configurações de tema padrão para esta postagem em particular. É claro que você pode personalizar isso como quiser, mas, para este exemplo, eu marquei as seguintes caixas:

Postagem em destaque (Isso permite que o produto seja puxado como uma postagem em destaque em determinados módulos de categoria.)

Ocultar caixa do autor

Finalmente, adicione sua imagem em destaque. Certifique-se de ter pelo menos 1280 px de largura, pois usaremos um layout de 0 uma coluna de largura total para a imagem apresentada.

Publique sua postagem.

Vá em frente e salve este modelo para que você possa duplicar esse processo para todos os seus produtos / postagens. Para salvar o modelo, clique no ícone “Salvar na biblioteca” no menu do construtor visual na parte inferior da página, insira um nome de modelo e clique em Salvar na biblioteca.

Agora, quando for adicionar o resto de suas postagens, você pode carregar este modelo da biblioteca e preencher o conteúdo para a revisão do novo produto. O processo então se torna muito mais rápido.

Adicionando CSS Personalizado

Estamos quase terminando. Precisamos adicionar algum CSS personalizado ao nosso tema para estilizar alguns elementos da postagem. Para fazer isso, no painel do WordPress, vá para Theme Customizer> Additional CSS e digite o seguinte:

/****************************
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) {
/***************************
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;
}
}

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

Salvar e publicar

Agora vamos verificar nosso resultado.

O sistema de classificação do usuário

Observe que na parte inferior da postagem você tem um sistema de racionamento de estrelas do usuário.

Aqui, seus visitantes podem enviar uma classificação inicial de qualquer produto simplesmente passando o mouse sobre os ícones de estrela e clicando no nível de estrela de sua escolha.

A classificação geral do usuário será exibida nos metadados no trecho da postagem.

Você sempre pode optar por desativar esse recurso na caixa Configurações extras.

Bem, é isso. Espero que você tenha gostado da parte 2 desta série.

A seguir: Criação de layouts de categoria para exibir seus produtos

Na parte 3, vou mostrar como construir os layouts de categoria para a página inicial e a página Todas as categorias. Certifique-se de usar seu novo modelo de postagem para adicionar pelo menos 3 produtos para cada uma das 4 categorias para se preparar para a parte 3 da série. Você precisará deles para preencher os módulos de categoria que exibirão seus produtos.

Aqui está o que você pode esperar construir na parte 3:

Sinta-se à vontade para enviar perguntas ou comentários abaixo. Estou ansioso para ouvir de você.