Como usar o conteúdo dinâmico para criar um acordeão de informações do produto WooCommerce na Divi
Publicados: 2019-10-11Ao construir uma página de produto no Divi, podemos utilizar o módulo acordeão para exibir informações do produto usando conteúdo dinâmico. Isso dará a você páginas de produtos com um design exclusivo, além de preservar um espaço valioso na página.
Neste tutorial, mostraremos como usar a funcionalidade de conteúdo dinâmico do Divi para criar um acordeão com informações sobre o produto e também como projetar o acordeão (e seu conteúdo) usando o Divi Visual Builder.
Vamos começar.
Espiada
Aqui está uma olhada rápida no design que construiremos neste tutorial.
Baixe o layout de acordeão de informações do produto GRATUITAMENTE
Para colocar suas mãos no design de layout deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Inscreva-se no nosso canal no Youtube
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Lembre-se de que você deve ter uma configuração do produto conforme descrito neste tutorial para ver os mesmos resultados.
Vamos para o tutorial, vamos?
Começando
Para começar, você precisará fazer o seguinte:
Configurando o Produto de Exemplo
Para configurar o produto de exemplo para este tutorial, navegue até Produtos> Adicionar novo. Dê ao produto o título “Massagem (sessão única)” e clique para usar o Divi Builder.
Em seguida, atualize as seguintes configurações da página do produto e informações do produto:
1. Em Configurações da página Divi, selecione o layout Sem página da barra lateral.
2. Adicionar / selecionar uma categoria de produto
3. Adicione a imagem do produto
4. Adicione o seguinte conteúdo de descrição longa do produto:
<h3>Quality Massage</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Vestibulum sagittis orci ac odio dictum tincidunt.</li> <li>Donec ut metus leo.</li> </ul> <h3>Our Gaurantee</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
5. Em Dados do produto, altere o tipo de produto para Produto variável.
6. Adicione um Atributo denominado “Tipo” com os seguintes valores: Sueco | Pedra quente | Aromaterapia | Tecido profundo. Certifique-se de selecionar “Usado para variações”.
7. Em seguida, na guia de variações sob a alternância de dados do produto, use a entrada suspensa para criar variações de todos os atributos.
8. Selecione “Definir preços regulares” no menu suspenso para definir o preço normal para todas as três variáveis.
9. Na caixa pop-up, insira o valor “50” e selecione OK.
10. Depois de terminar, salve ou publique o produto.
Agora você está pronto para começar a projetar seu layout com um acordeão de informações de produto personalizado.
Criação do acordeão de informações do produto com conteúdo dinâmico na Divi
O layout padrão do produto exibe informações do produto usando vários módulos Woo. Para este exemplo, queremos usar o acordeão para exibir três peças principais de informações do produto: descrição do produto, informações adicionais do produto e análises do produto. Todas essas três partes de conteúdo estão sendo exibidas dentro do módulo woo tabs. Tudo o que precisamos fazer é excluir o módulo woo tabs e substituí-lo por um módulo acordeão com a mesma informação obtida por meio de conteúdo dinâmico.
Veja como fazer.
Primeiro, clique para usar Divi no front end para implantar o construtor visual. Em seguida, exclua o Módulo Woo Tabs.
Em seguida, adicione um novo Módulo de acordeão para substituir as guias.
No pop-up Configurações do acordeão, clique no ícone de engrenagem no primeiro acordeão para abrir as configurações individuais do acordeão.
Digite o título, “Sobre o produto”.
Em seguida, passe o mouse sobre a caixa de entrada do conteúdo do corpo e clique no ícone de conteúdo dinâmico.
Selecione “Descrição do produto” na lista de conteúdo dinâmico.
Isso puxará a descrição longa do produto que definimos para o produto no backend.
Depois de colocar o conteúdo do primeiro acordeão no lugar, abra as configurações do segundo acordeão e atualize o seguinte:
- Título: Especificações
Em seguida, adicione o conteúdo dinâmico “Informações adicionais do produto” ao corpo.
Depois que o conteúdo do segundo acordeão estiver pronto, adicione um novo item de acordeão e atualize as configurações para esse acordeão da seguinte forma:
- Título: Resenhas
Em seguida, adicione o conteúdo dinâmico “Avaliações do produto” ao corpo para inserir o elemento / conteúdo da avaliação do produto.
NOTA: Certifique-se de ter adicionado pelo menos um comentário ao produto para ver o conteúdo na página ao vivo.
Projetando as informações do produto, acordeão e conteúdo com Divi
Agora que nosso acordeão de informações de produto tem o conteúdo dinâmico necessário para exibir as informações do produto, estamos prontos para estilizar o acordeão usando as configurações do módulo de acordeão embutido.
Abra as configurações do Accordion Module e atualize o seguinte:
- Cor do ícone: # ff9375
- Use o tamanho da fonte do ícone: SIM
- Tamanho da fonte do ícone: 26px
- Cor de fundo de alternância fechada: #ffffff
- Cor do texto do título aberto: # ff9375
- Cor do texto do título: # 222222
- Fonte do título: Lato
- Peso da fonte do título: negrito
- Estilo da fonte do título: TT
- Tamanho do texto do título: 20px
- Espaçamento entre letras de título: 0.2em
- Altura da linha do título: 2em
- Fonte do corpo: Lato
- Tamanho do corpo do texto: 16px
- Altura da linha corporal: 1,8em
- Cor do texto do link: # ff9375
Isso irá direcionar todos os links que você tem dentro do conteúdo dinâmico para cada acordeão incluído coisas como a avaliação com estrelas.
- Cor do texto da lista não ordenada: # ff9375
- Tipo de estilo de lista não ordenado: círculo
- Recuo do item da lista não ordenado: 5%
- Largura da borda: 0 px
- Largura da borda superior: 1 px
- Cor da borda superior: # 222222
E para uma etapa final, vamos adicionar um pequeno trecho de css para tirar a margem padrão entre os seletores de acordeão.
Na guia avançada, adicione o seguinte CSS ao elemento Alternar:
margin-bottom: 0px;
Agora vamos verificar o design final do acordeão de informações do produto.
Ajustes finais no layout
Existem alguns ajustes que podemos fazer no layout para combinar com o design do acordeão. Por exemplo, podemos ajustar a fonte de cada um dos módulos para Lato, adicionar uma borda personalizada e um raio de borda ao redor da lista suspensa de variável e atualizar o botão adicionar ao carrinho com uma cor de fundo sólida para corresponder.
Feito isso, aqui está o resultado final.
Incluí este design de layout como um download gratuito acima. Sinta-se à vontade para verificar por si mesmo. Lembre-se de que você deve ter a configuração do produto conforme descrito neste tutorial para ver os mesmos resultados.
NOTA: A cor padrão para muitos dos elementos WooCommerce para um produto no Divi é herdada do valor da cor secundária das configurações do personalizador de tema. Pode ser mais fácil atualizar essa cor secundária uma vez em vez de atualizar as cores por módulo woo.
Pensamentos finais
Como aprendemos, os Módulos Woo não são os únicos elementos que podem ser usados para extrair informações dinâmicas do produto. O acordeão de informações do produto é um ótimo exemplo de como você pode usar qualquer módulo Divi para exibir as informações do produto de uma forma única e concisa. Sinta-se à vontade para explorar novos e empolgantes designs de acordeão para as páginas de seus produtos. E, é claro, você pode usar vários módulos de alternância em vez de um acordeão para obter resultados semelhantes.
Estou ansioso para ouvir de você nos comentários.
Saúde!