Construindo um Site de Avaliação de Produto com Extra - Parte 3
Publicados: 2017-09-14Bem-vindo à parte 3 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 2 desta série, criamos nosso modelo de postagem de revisão de produto usando as configurações integradas do Extra e o Visual Builder. Com o novo modelo de postagem, você pode adicionar postagens adicionais e atribuí-las às respectivas categorias.
Hoje vamos construir dois layouts de categoria usando o Construtor de categorias do Extra. O primeiro layout exibirá as postagens / análises de produtos em sua página inicial, destacando as análises mais recentes e populares. O segundo layout mostrará todas as categorias em uma página usando o módulo deslizante do carrossel. Depois de concluir este tutorial, você terá uma boa base para um site de análise de produto bem projetado.
Aqui está uma prévia do que iremos construir
Preparando os Elementos de Design
Como os layouts das categorias dependem muito do conteúdo das postagens, certifique-se de adicionar postagens suficientes para que você possa ter uma ideia de como o site ficará depois de adicionar seu próprio conteúdo. Conforme discutido na parte 2 desta série, meus layouts de categoria são preenchidos com 4 categorias e com 3 produtos em cada categoria. Estou usando imagens de banco de imagens do shutterstock para as imagens em destaque de minhas postagens.
Para projetar os layouts de categorias, usaremos o Construtor de categorias do Extra e um pouco de CSS personalizado.
Vamos começar.
Construindo um Site de Avaliação de Produto com Extra - Parte 3
Inscreva-se no nosso canal no Youtube
Construindo o Layout de Categoria para a Página Inicial
Por padrão, o extra usa um layout de categoria para a página inicial. Para criar um layout personalizado, na barra lateral do painel do WordPress, vá para Extra> Criação de categoria . Encontre o layout de categoria já chamado de “página inicial”, em seguida, passe o mouse sobre ele e selecione editar.
Em seguida, clique em “Limpar Layout” no menu construtor roxo para apagar o layout padrão atual.
Agora podemos começar a construir nosso layout personalizado. Comece adicionando uma coluna de dois terços de um terço à linha na seção padrão.
À esquerda (dois terços) coluna, adicione um controle deslizante Postagens em destaque.
Atualize as configurações do módulo deslizante de postagens em destaque da seguinte forma:
Na guia Conteúdo ...
Categorias: todas
Exibir somente postagens em destaque: [Eu manteria isto desativado até você decidir quais postagens deseja destacar. Você pode designar uma determinada postagem como destaque na caixa Configurações extras na página do editor de postagem.]
Mostrar Autor: OFF
Mostrar Data: DESLIGADO
Na guia Design ...
Cor da seta de navegação: #ffffff
Fundo de seta de navegação: # 000000
Fundo da legenda: rgba (255,255,255,0,4)
Tamanho da fonte do título: 24px
Cor do texto do título: # 000000
Tamanho da fonte meta: 16px
Meta Cor do Texto: # 000000
Margem personalizada: inferior 0px
Na guia Avançado ...
Insira o seguinte CSS personalizado na caixa de texto Elemento principal:
border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; margin-bottom: 0px !important;
Salvar configurações
Agora adicione um Módulo de Texto à coluna da direita (um terço) e atualize as Configurações do Módulo de Texto da seguinte maneira:
Na guia Conteúdo, adicione o seguinte html à guia de texto da caixa de conteúdo:
<h1>Get the Latest Reviews on Popular Products</h1> <a class="join-cta" href="/reviews" target="_blank">Click to Join</a>
O link aqui serve como um botão de CTA simulado. Você pode optar por usá-lo como quiser. Basta atualizar o URL e o texto do link.
Dica : você pode usar o Bloom para acionar uma caixa pop-up de optin por e-mail ao clicar neste CTA. Dessa forma, os visitantes poderão ficar atualizados com os produtos da sua campanha de marketing por e-mail. Para fazer isso, você precisará instalar o Bloom, adicionar um formulário pop-up e integrar seu provedor de e-mail. Em seguida, opte por exibir o pop-up ao clicar no seletor CSS “a.join-cta” que corresponde à classe do link no código html acima.
Você também pode ler mais sobre como fazer o pop-up do formulário bloom optin ao clicar em um botão.
Agora, de volta às configurações do módulo de texto.
Na guia Design ...
Tamanho da fonte do texto: 40 px (desktop), 24 px (tablet e smartphone)
Tamanho da fonte do cabeçalho: 42 px (desktop), 38 px (tablet), 28 px (smartphone)
Preenchimento personalizado: 40 px (superior), 15 px (direita), 15 px (inferior), 15 px (esquerda)
Salvar configurações
Agora vá para Configurações de linha para que possamos estilizar o plano de fundo da linha.
Em seguida, atualize o seguinte:
Na guia Conteúdo ...
Plano de fundo: #ffffff
Na guia Design ...
Tornar esta linha com largura total: SIM
Equalize a altura das colunas: SIM
Na guia Avançado , adicione o seguinte CSS personalizado à caixa de entrada Elemento principal:
border-top: 10px solid #121212; border-radius: 3px; -webkit-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); -moz-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); 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);
Salvar configurações
Verifique agora a seção do controle deslizante em destaque personalizado.
Parece bom até agora.
Vamos continuar. Volte para o Construtor de categorias e adicione uma seção padrão abaixo da seção atual e adicione uma linha de uma coluna com um Módulo de texto.
Em seguida, atualize as configurações do Módulo de Texto da seguinte forma:
Na guia Conteúdo , adicione este título html na guia de texto da caixa de conteúdo:
<h1 class="subtitle fancy"><span>Product Reviews</span></h1>
Na guia Design ...
Orientação do Texto: Centro
Fonte do cabeçalho: B (negrito)
Tamanho da fonte do cabeçalho: 48 px (desktop), 42 px (tablet), 36 px (smartphone)
Salvar configurações
Isso servirá como o título da seção abaixo, que exibirá as análises de seus produtos.
Em seguida, adicione uma Seção de especialidade com a seguinte estrutura de colunas de três quartos um quarto:
Na seção esquerda (três quartos), adicione uma linha de duas colunas.
Na coluna esquerda dessa linha, adicione um Módulo de Postagens
Em seguida, atualize as Configurações do módulo de postagens na guia Conteúdo atribuindo uma categoria ao módulo. Desta forma, o Módulo de Postagens mostrará apenas aquela Categoria. Para fazer isso, selecionarei “Roupas” como minha categoria.
Em seguida, atualize o seguinte:
Mostrar Autor: NÃO
Data de exibição: NÃO
Salvar configurações
Duplique este Módulo de Postes para que você tenha dois módulos de postes empilhados na coluna esquerda e 2 na direita.
Em seguida, atualize as configurações em cada módulo com uma categoria diferente. As categorias que possuo são: Vestuário, Eletrônicos, Cozinha e Saúde e Fitness.
Se você deseja adicionar um Módulo de Postagens que exibe resenhas de vídeo, você pode adicioná-lo aqui. Primeiro você precisará adicionar uma nova categoria de postagem chamada Vídeo, atribua à categoria a cor # 222222. Em seguida, crie uma nova postagem, selecione “Vídeo” para o formato e adicione o URL do vídeo à caixa de opções de formato de vídeo embutida do Extra.
Em seguida, você pode adicionar o conteúdo da caixa de revisão para exibir sob o vídeo.
Depois de enviar alguns vídeos, certifique-se de adicioná-los à categoria Vídeo. Em seguida, volte para o Construtor de categorias de sua página inicial e adicione uma linha de uma coluna sob a linha que contém seus quatro módulos de postagens. Em seguida, duplique um Módulo de Postagens da linha anterior e adicione à nova linha. Nas configurações do módulo de postagens na guia Conteúdo, selecione a categoria “Vídeo”. Agora você tem um módulo de postagens que exibirá vídeos.
Na área direita (barra lateral) da seção de especialidades, vamos adicionar mais dois Módulos de Postagens empilhados um em cima do outro.
Para o primeiro, atualize as Configurações do Módulo de Postagens para incluir “Todas” as categorias. Em seguida, selecione o método de classificação “Classificação mais alta”.
Duplique esse Módulo de Postes para que outro seja armazenado embaixo dele. Em seguida, atualize o método de classificação para “Mais popular”.
Vá em frente e atualize a postagem para salvar suas configurações. Aqui está a aparência do layout até agora.
Em seguida, duplique (ou copie) a segunda seção principal contendo o Módulo de Texto com o título “Avaliações de Produtos”.
Em seguida, arraste (ou cole) a seção duplicada sob a seção de especialidade. Na nova seção, atualize o conteúdo de Configurações do Módulo de Texto com o seguinte html:
<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>
Salvar configurações
Em seguida, vamos adicionar um feed de blog que exibe todas as análises de produtos, começando pela mais recente.
No Módulo de texto que você acabou de atualizar, adicione um Módulo de Maçonaria de Feed de Blog à coluna. Nas configurações do módulo de alvenaria do feed de blog, na guia Conteúdo, selecione todas as categorias que deseja exibir no feed.
Salvar configurações
E, finalmente, no Módulo de Maçonaria de Feed de Blog, adicione um Módulo de carrossel de postagens. Atualize as configurações do módulo do carrossel de postagens na guia Conteúdo para incluir todas as categorias e selecione SIM para exibir apenas as postagens em destaque.
Este carrossel destina-se a exibir apenas as postagens que você selecionou como itens em destaque ao criar suas postagens de avaliação do produto.
Agora vamos ver como fica o layout final.
Adicionando algumas linhas de CSS personalizado
Para reunir o design, precisamos adicionar algumas linhas de CSS personalizado. Vá para Theme Customizer> Additional CSS e adicione o seguinte no topo do código CSS atual já lá:
.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;
}
Em seguida, dentro dos colchetes de consulta de mídia definidos para uma largura mínima de 980 px, adicione o seguinte:
.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;
}
O primeiro snippet CSS adiciona uma sombra um pouco mais escura e uma borda superior mais alta aos módulos. O segundo personaliza o botão “Inscreva-se agora” na seção superior.
Bem, é isso para o layout de categoria da página inicial. Aqui está a aparência do resultado final:
Além do Layout de categoria da página inicial, vamos adicionar mais um layout simples para exibir todas as nossas categorias em uma página.
Construindo o Layout de “Todas as Categorias”
Este layout é realmente simples de criar, agora que você tem todas as suas postagens carregadas, suas categorias definidas e o estilo do tema no lugar. O objetivo deste layout é criar uma página que exibe todas as categorias e produtos em uma página. Isso pode ser feito de muitas maneiras diferentes, mas com o Extra, eu queria aproveitar as vantagens do módulo de carrossel de postagens para exibir as categorias e postagens em um layout semelhante ao que você veria em sites de streaming de vídeo como Hulu e Netflix.
Para adicionar o layout, vá até o topo do layout da categoria atual e selecione Adicionar novo. Usando o construtor Category, inclua uma linha de uma coluna em uma seção padrão. Em seguida, adicione um Módulo de Texto à Linha. Atualize as configurações do módulo de texto, na guia Conteúdo, para incluir a seguinte tag h1 na caixa de conteúdo:
<h1 class="subtitle fancy"><span>All Categories</span></h1>
Salvar configurações
Em seguida, adicione um Módulo de carrossel de postagens no Módulo de texto. Nas configurações do módulo de carrossel de postagens, selecione Roupas como a categoria.
Salvar configurações
Em seguida, adicione um Módulo de texto no carrossel de postagens da categoria Roupas. Nas configurações do módulo de texto, adicione o seguinte link à caixa Conteúdo na guia Conteúdo:
<a href="/category/clothing">view all clothing reviews</a>
O URL e / ou o texto do link podem precisar ser alterados de acordo com o seu site, mas a ideia é criar um link para a página da categoria dessa categoria específica para mostrar todas as resenhas de produtos dessa categoria.
Na guia Design, altere a orientação do texto para “Right”.
Salvar configurações
Para exibir as próximas três categorias da mesma maneira, repita o processo de adicionar um Módulo de carrossel de postagens atribuído a uma categoria específica seguido por Módulos de texto contendo um link para a página da categoria correspondente.
Na caixa de categoria à direita do construtor, adicione uma nova categoria chamada “Todas as categorias” e selecione-a para este layout. Dessa forma, sempre que fizermos um link para a página da categoria “Todas as categorias”, esse modelo será exibido.
O layout final deve ficar assim quando você terminar.
E aqui está a aparência do layout da categoria no site.
Você pode dizer agora porque não temos muitos produtos adicionados ainda, mas isso funcionará eventualmente como uma maneira conveniente de embaralhar os produtos para cada categoria usando o módulo deslizante do carrossel de postagens.
É isso para o post de hoje. Espero que você tenha gostado da parte 3 desta série de 4 partes sobre a construção de um site de análise de produto com o Extra.
Espero que você não esteja se cansando ainda, temos um último post para publicar em nossa série.
Chegando
Na postagem final de nossa série, iremos personalizar o cabeçalho e os elementos de navegação de nosso site de avaliação de produtos. Além de criar o seu menu, irei mostrar a você uma maneira legal de atribuir cores aos links do seu menu que correspondem às cores da categoria em todo o site. Também mostrarei como construir mega menus com apenas alguns cliques.
Estou ansioso para construir a última parte do nosso site juntos.
Como sempre, sinta-se à vontade para enviar comentários abaixo.