Como criar um modelo de página de produto Woo para todo o site com o Divi's Theme Builder
Publicados: 2019-11-06O novo Theme Builder da Divi automatiza a maneira como construímos nossos sites Divi. Ao projetar páginas de produtos, por exemplo, só temos que passar pelo processo de criação uma vez e, a partir daí, podemos atribuir o design a todas as nossas páginas de produtos. Isso é exatamente o que mostraremos no tutorial de caso de uso de hoje. Iremos guiá-lo através da configuração de um modelo de página de produto woo para todo o site usando Divi. Começaremos definindo o estilo da página de produto woo padrão de um determinado produto, para combiná-la com o Pacote de layout de impressão em tela. Continuaremos salvando o layout em nossa Biblioteca Divi e, em seguida, usá-lo como o corpo global em um novo modelo que criamos.
Vamos lá!
Antevisão
Baixe o modelo de página de produto de exemplo GRATUITAMENTE
Para colocar as mãos no modelo de página de produto de exemplo gratuito, primeiro você precisa baixá-lo 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!
1. Habilite o Divi Builder no produto existente
Habilitar Divi e modificar as configurações da página
Existem duas maneiras de abordar a criação de um modelo de página de produto; você pode começar a editar o corpo global dentro de seu modelo de página de produto ou pode criar o design em uma página de produto individual primeiro. Pessoalmente, prefiro criar o design em uma página individual de produto primeiro. Ele permite que você publique o design e veja o resultado ao vivo antes de aplicá-lo a todas as páginas do produto de uma vez. Essa é a abordagem que faremos hoje, então vá em frente e abra uma de suas páginas existentes e altere o layout da página para largura total.
Mudar para o Visual Builder
Depois de alterar o layout da página nas configurações da página, você pode começar a construir no front end.
2. Personalize o layout para combinar com o estilo do site / pacote de layout
Cores de fundo
Dentro do Visual Builder, você pode observar todos os elementos woo de que precisa. Vamos alterar as configurações de alguns desses módulos para combiná-los com o Pacote de layout de impressão em tela. As alterações que estamos fazendo são mínimas e apenas ajudam você a aplicar um determinado estilo de design à página do seu produto. Se você está trabalhando em um projeto pessoal, fique à vontade para ir tão longe com a personalização quanto quiser, mas para este tutorial, vamos tentar mantê-lo simples. Começaremos modificando algumas cores de fundo.
- Woo Cart Notice Module: Background Color
Abra o Woo Cart Notice Module e mude sua cor de fundo.
- Cor de fundo: # 29314f
- Módulo Woo Tabs: Tabs Text / Background Colors
Continue abrindo o Módulo Woo Tabs e altere o texto da guia e as cores de fundo a seguir.
- Cor de fundo da guia ativa: #ffffff
- Cor de fundo da guia inativa: # 29314f
- Cor do texto da guia ativa: # 000000
- Cor do texto da guia: #ffffff
Configurações do corpo do texto
Também queremos fazer algumas alterações no corpo do texto dos seguintes módulos:
- Módulo Woo Breadcrumb: Configurações de texto
- Módulo Woo Adicionar ao carrinho: Configurações de texto
- Módulo de descrição Woo: configurações de texto
- Woo Meta Module: Configurações de texto
- Módulo Woo Tabs: Configurações de texto
- Módulo Woo Tabs: Configurações de texto de guias
Abra cada módulo listado acima e altere o tamanho do texto e a altura da linha do texto da seguinte forma:
- Tamanho do texto: 16 px (desktop e tablet), 14 px (telefone)
- Altura da linha de texto: 2em (desktop e tablet), 1.7em (telefone)
Configurações de texto do título
Também estamos mudando o estilo de nossos títulos. Aplicaremos as alterações a cada um destes módulos:
- Woo Title Module: Title Text Settings
- Módulo de produtos relacionados a Woo: Configurações de texto de título
- Módulo de produtos relacionados ao Woo: Configurações de texto do título do produto
As únicas duas coisas que estamos mudando são a fonte do título e a espessura da fonte do título.
- Fonte do título: Roboto
- Peso da fonte do título: negrito
Cores do link
Continuando, queremos ter certeza de que os itens clicáveis estão destacados. Mudaremos a cor do texto do link dos dois módulos a seguir:
- Módulo Woo Breadcrumb: Cor do Texto do Link
- Woo Meta Module: cor do texto do link
Este é o código de cores que estamos usando:
- Cor do texto do link: # ff7145
Configurações de texto de preço
Queremos estilizar o texto do preço também, começando com o Módulo de Preço Woo.
- Módulo Woo Price: Configurações de texto de preço
Altere as configurações de texto de preço da seguinte forma:
- Fonte de preço: Roboto
- Peso da fonte de preço: negrito
- Cor do texto do preço: # ff7145
Abra o Módulo de Produto Relacionado a Woo a seguir.
- Módulo de produto relacionado ao Woo: Configurações de texto de preço
E faça algumas alterações nas configurações de texto do preço:
- Fonte de preço: Roboto
- Peso da fonte de preço: negrito
- Cor do texto do preço: # ff7145
- Tamanho do texto do preço: 16px
Configurações de botão
Também temos dois botões em nossa página de produto, cada um deles precisa ser estilizado.
- Módulo Woo Cart Notice: Button Settings
- Módulo Woo Adicionar ao carrinho: Configurações do botão
Altere as configurações dos botões dos módulos da seguinte forma:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 14 px
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # ff7145
- Largura da borda do botão: 2 px
- Cor da borda do botão: # ff7145
- Raio da borda do botão: 100 px
- Espaçamento entre letras dos botões: 1px
- Fonte do botão: Roboto
- Peso da fonte do botão: negrito
- Estilo da fonte do botão: maiúscula
- Enchimento superior: 20 px
- Preenchimento inferior: 20 px
- Preenchimento esquerdo: 30px
- Preenchimento direito: 30px
detalhes adicionais
Existem algumas alterações adicionais que queremos aplicar ao design da página do produto, começando com o fundo da coluna 2 da segunda linha de nossa página.
- Coluna 2: cor de fundo
Use o seguinte código de cores:
- Cor de fundo: #efefef
Estamos modificando o espaçamento da coluna 2 também.
- Coluna 2: Espaçamento
Use os seguintes valores de espaçamento:
- Enchimento superior: 50 px
- Preenchimento inferior: 50 px
- Preenchimento esquerdo: 50 px
- Preenchimento direito: 50 px
Por último, mas não menos importante, queremos definir o estilo das configurações dos campos de nosso Módulo Woo Adicionar ao Carrinho.
- Módulo Woo Add To Cart: Fields Settings
Aplique as seguintes alterações:
- Cor de fundo dos campos: #efefef
- Cor do texto dos campos: # 7f7f7f
- Fonte dos Campos: Roboto
- Peso da fonte dos campos: negrito
3. Crie um novo modelo para produtos e importe o layout da página do produto na área do corpo
Salvar o layout da página do produto na biblioteca Divi
Depois de concluir o design da página do produto, você pode salvar todo o layout na sua biblioteca Divi.
Vá para Divi Theme Builder
É hora de transformar o layout em um modelo de página de produto! Para fazer isso, navegue até o Theme Builder nas configurações do Divi.
Adicionar novo modelo
Continue clicando em 'Adicionar Novo Modelo'.
Selecione 'Todos os produtos' na guia 'Usar em' das configurações do seu modelo para fazer com que o modelo se aplique a todos os seus produtos de uma vez.
Adicionar corpo personalizado da biblioteca
Em seguida, clique em 'Adicionar Corpo Global'. Em vez de construir o corpo personalizado do zero, selecionaremos o layout que acabamos de salvar em nossa Biblioteca Divi.
Vá para a guia 'Seus layouts salvos' para selecionar o layout salvo.
4. Salvar opções do criador de temas e visualizar modelo em produtos existentes
Depois que o corpo do seu modelo foi criado, só há uma coisa a fazer; salve as alterações. Assim que seu novo modelo for salvo, você pode visualizar cada um de seus produtos e observar o mesmo modelo de corpo sendo aplicado a ele!
Antevisão
Pensamentos finais
Nesta postagem, mostramos como criar um modelo de página de produto para todo o site. Começamos modificando uma página de produto existente, usando os módulos woo do Divi. Fizemos algumas alterações mínimas na página do produto, para combiná-la com o Pacote de Layout de Serigrafia. Continuamos salvando o layout da página do produto em nossa Biblioteca Divi. Nós, então, criamos um novo modelo e carregamos o layout para o corpo de nosso modelo de página de produto para aplicá-lo a todo o nosso site. Esperamos que este tutorial ajude você a construir belos sites de comércio eletrônico com o novo Theme Builder da Divi! Se você tiver alguma dúvida, deixe um comentário na seção de comentários abaixo.
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.