Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo shop

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Divi foi projetado para ser compatível com WooCommerce. Integrar WooCommercevocê precisa instalar a versão mais recente do WooCommerce.

O WooCommerce é o plugin de e-commerce que recomendamos porque possui o melhor conjunto de recursos, interface e segue as melhores práticas de codificação. Depois de ativar o plug-in, você verá duas novas seções "WooCommerce" e "Produtos" adicionadas ao seu painel do WordPress. Você pode usar esses campos para ajustar suas configurações de comércio eletrônico e publicar novos produtos. Você pode encontrar o documentação Completo no WooCommerce aqui .

Por favor, note que mesmo que o fabricante inclua vários módulos WooCommerce, você também pode usar o WooCommerce sozinho sem o construtor. Você pode criar páginas padrão para o Google Checkout, Carrinho de Compras e assim por diante, conforme mostrado em sua documentação. Você também pode vincular diretamente a suas categorias de comércio de produtos ou usar o Códigos de Acesso WooCommerce em um módulo de texto Divi. Isso lhe dá a liberdade de fazer praticamente qualquer coisa.

Como adicionar um módulo de loja à sua página

Antes de adicionar um módulo de loja à sua página, você deve primeiro entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro. Temos excelente tutoriais sobre o uso de elementos de linha e seções de Divi.

módulo de loja divi.png

Localize o módulo de armazenamento na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "shop", depois clicar em enter para pesquisar e adicionar automaticamente o módulo da loja! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de caso de uso: Apresentar os produtos mais recentes em uma home page usando o módulo Shop

Para este exemplo, usarei o módulo de loja para exibir os produtos mais recentes em uma página inicial.

Aqui está a página com os quatro produtos apresentados.

exibir produtos em uma página de accel divi.jpg

Vamos começar.

Use o construtor visual para incluir uma seção regular com uma linha de largura total (coluna 1). Modifique o parâmetro de linha para torná-lo fullwidth com uma largura de medianiz personalizada de 2.

opção de zona divi.png

Em seguida, adicione um módulo de loja à linha.

insira o módulo boutique divi.png

Atualize as configurações do módulo da seguinte maneira:

Opções de conteúdo

Tipo: produtos recentes
Número de produtos: 4

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Opções de design

Cor do ícone suspenso: # ea1d63
Título da polícia: abrir sem
Tamanho da fonte do título: 24px
Prémio Policial: Aberto sem
Tamanho da fonte do preço: 20px

Opções avançadas (CSS personalizado)

Título:

texto-alinhar: centro;
fundo: #fff;
margem superior: -10px! significativa;

Prix:

texto-alinhar: centro;
fundo: #fff;
estofado para baixo: 15px;

Isso é tudo! Aqui está o resultado final.

seção do produto divi.jpg

Comprar opções de conteúdo

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

Tipo

Escolha o tipo de produtos que você deseja exibir no seu feed de produtos. Você pode escolher entre produtos recentes que exibirão todos os seus produtos em ordem cronológica, produtos em destaque, produtos de venda, produtos mais vendidos ou produtos com melhor classificação.

Número de produtos

Defina o número de produtos que você deseja exibir. Você precisará ter produtos fabricados para que qualquer coisa apareça neste módulo.

Incluir Categorias

Escolha as categorias que você deseja incluir.

Número de colunas

Escolha o número de colunas para exibir no seu módulo de loja. As colunas 4 devem ser usadas para uma linha de colunas 1. As colunas 3 devem ser usadas para uma coluna que ocupa o espaço 3 / 4 na linha. A coluna 2 deve ser usada para uma coluna que ocupe espaço de luz 1 / 2. Uma coluna deve ser usada para uma coluna de espaço 1 / 4 da linha.

Reorganizar por

Escolha como você deseja que seus produtos sejam encomendados. Opte por classificar por padrão Classificar, Popularidade, Classificação, Data, Preço de menor a maior, Preço de maior a menor, Mais antigo para Mais recente, Mais recente para Mais antigo.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Opções de design de oficina

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

loja de configuração divi.png

Ícone de sobreposição

Ao passar o mouse sobre um item no módulo de armazenamento, um ícone de sobreposição é exibido. Você pode ajustar a cor usada para este ícone usando o seletor de cores nessa configuração.

Cor da sobreposição

Quando você passa o mouse sobre um item no módulo de armazenamento, uma cor de sobreposição aparece na parte superior da imagem e sob o texto e o ícone de título da loja. Por padrão, uma cor branca semitransparente é usada. Se você quiser usar uma cor diferente, poderá ajustar a cor usando o seletor de cores nessa configuração

Ícone de seletor

Aqui, você pode escolher um ícone personalizado para exibir quando um visitante passar por cima de itens na loja.

Cor do selo de vendas

Quando um item está à venda, um selo de vendas aparece na imagem do produto. Com essa configuração, você pode ajustar a cor usada para o fundo do emblema.

Fonte de título

Você pode alterar a fonte do texto do título selecionando a fonte desejada no menu suspenso. Divi oferece dezenas de ótimas fontes oferecidas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do título

Aqui você pode ajustar o tamanho do texto do seu título. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Título da cor do texto

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do título, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento das letras do título

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do título, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do título

A altura da linha afeta o espaço entre cada linha do texto do título Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Política de Preços

Você pode alterar a fonte do texto do preço selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte de preço

Aqui você pode ajustar o tamanho do seu texto de preço. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto de preço

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto de preço, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de cartas de preços

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto de preço, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de preço

Altura da linha afeta o espaço entre cada linha do seu texto de preço Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Opções avançadas da loja

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

opção antecipada boutique divi.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Este artigo contém 1 comentário
  1. Caro Bair

    Obrigado pela sua contribuição.
    Eu tenho uma pergunta sobre o módulo de loja e ficaria muito feliz se você pudesse responder por mim.
    E eu gostaria no meu módulo de loja, produtos selecionados individualmente para ser visível. Eu pensei que isso poderia ser alcançado adotando "produtos estrela". Mas depois de selecionar essa opção, não consigo encontrar nenhuma maneira de selecionar meus produtos desejados para o módulo. Eu senti falta de algo? Você tem uma explicação?

    Atenciosamente, Frederik

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
10 ações
ação4
chilrear2
Enregistrer4
Whatsapp