Como empilhar verticalmente imagens da galeria Woo dentro do modelo de página de seu produto Divi
Publicados: 2020-07-01Por padrão, assim que você adicionar imagens de galeria aos seus produtos WooCommerce, elas aparecerão horizontalmente abaixo da imagem em destaque do seu produto no frontend do design da página do seu produto. Em alguns designs específicos, empilhar verticalmente essas imagens da galeria woo pode ser mais conveniente, em designs de página de produto em tela cheia, por exemplo. Se você está procurando uma maneira rápida de empilhar verticalmente as imagens da galeria woo dentro do modelo de página do produto que você cria com o Divi's Theme Builder, você vai adorar este tutorial. Mostraremos passo a passo como chegar lá. Acompanharemos essa abordagem com um modelo mínimo de página de produto que você também poderá baixar gratuitamente! Este tutorial funciona melhor em páginas de produtos que usam imagens com proporção de 1: 1.
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Baixe o modelo da página do produto GRATUITAMENTE
Para colocar suas mãos no modelo de página de produto 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!
Construir modelo de página de produto dentro do Divi Theme Builder
Vá para Divi Theme Builder e adicione um novo modelo
Comece indo ao Divi Theme Builder e clique em 'Add New Template'.
Use o modelo em todos os produtos
Usaremos este modelo em todos os produtos, mas sinta-se à vontade para modificar as condições como quiser.
Entrar no Editor de Modelos de Corpo do Modelo
Depois de criar o modelo, clique em 'Adicionar corpo personalizado' e continue selecionando 'Construir corpo personalizado' para ser redirecionado ao editor de modelos.
Comece a construir o corpo do modelo da página de categoria
Modificar Seção # 1
Cor de fundo
Dentro do editor de template, você notará uma seção. Abra essa seção e adicione uma cor de fundo branca.
- Cor de fundo: #ffffff
Espaçamento
Vá para a guia de design e remova todo o preenchimento padrão superior e inferior a seguir.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento de acordo:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Equalize Alturas de Coluna: Sim
- Largura: 95%
- Largura máxima: 2560px
- Alinhamento de linha: centro
Espaçamento
Usaremos alguns preenchimentos personalizados na parte superior e inferior em telas menores também.
- Preenchimento superior: 100 px (apenas tablet e telefone)
- Preenchimento inferior: 100 px (apenas tablet e telefone)
CSS do elemento principal
Para alinhar o conteúdo da coluna no desktop, usaremos duas linhas de código CSS no elemento principal da linha. Traremos de volta a propriedade de exibição no tablet e no telefone.
Área de Trabalho:
display: flex; align-items: center;
Tablet e telefone:
display: block;
Fundo Gradiente da Coluna 2
Assim que as configurações gerais da linha forem feitas, abra as configurações da segunda coluna e aplique um fundo gradiente radial.
- Cor 1: # f7f2ef
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Centro
- Posição inicial: 20%
- Posição final: 20%
Espaçamento da coluna 2
Vá para a guia de design da coluna e altere os valores de preenchimento personalizado em diferentes tamanhos de tela.
- Preenchimento superior: 30% (desktop), 10% (tablet e telefone)
- Estofamento inferior: 10%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Adicione o módulo Woo Images à coluna 1
Conteúdo Dinâmico
É hora de adicionar módulos! O primeiro módulo de que precisamos na coluna 1 é um Módulo Woo Images. Este tutorial funciona melhor se você estiver usando uma imagem em destaque e imagens de galeria com uma proporção de 1: 1. Dessa forma, poderemos transformar as imagens em círculos nas próximas etapas. Depois de adicionar o Módulo Woo Images, certifique-se de que o conteúdo dinâmico esteja definido como 'Este Produto'.
- Produto: Este produto
Adicionar Módulo de Código à Coluna 1
Adicionar código CSS
Logo abaixo do Módulo Woo Images, vamos adicionar um Módulo de Código. O código CSS que inserimos neste Módulo de Código nos ajudará a empilhar verticalmente as imagens da galeria woo no lado esquerdo de nossa coluna.
<style>
.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}
.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}
</style>
Adicionar Módulo de Título Woo à Coluna 2
Conteúdo Dinâmico
Para a próxima coluna. Lá, o primeiro módulo de que precisamos é um Módulo Woo Title.
- Produto: Este produto
Configurações de texto do título
Vá para a guia de design do módulo e altere as configurações de texto do título da seguinte forma:
- Fonte do título: PT Sans
- Peso da fonte do título: negrito
- Cor do texto do título: # 000000
- Tamanho do texto do título: 84 px (desktop), 60 px (tablet), 45 px (telefone)
Adicionar Módulo de Descrição Woo à Coluna 2
Conteúdo Dinâmico
Passe para o próximo módulo, que é um Módulo de Descrição Woo.
- Produto: Este produto
- Tipo de descrição: breve descrição
Configurações de texto
Modifique as configurações de texto do módulo de acordo:
- Fonte do Texto: Karla
- Tamanho do texto: 17 px (desktop e tablet), 15 px (telefone)
- Altura da linha de texto: 1,9em
Espaçamento
Conclua as configurações do módulo adicionando alguma margem superior e inferior.
- Margem superior: 5%
- Margem inferior: 5%
Adicionar Módulo de Preço Woo à Coluna 2
Conteúdo Dinâmico
Adicione um Módulo de Preço Woo logo abaixo do Módulo de Descrição Woo.
- Produto: Este produto
Configurações de texto de preço
Vá para a guia de design do módulo e modifique as configurações de texto de preço da seguinte maneira:
- Fonte de preço: PT Sans
- Peso da fonte de preço: negrito
- Cor do texto do preço: # ce8654
- Tamanho do texto do preço: 27 px
Adicionar Woo Adicionar ao Módulo do Carrinho à Coluna 2
Conteúdo Dinâmico
O próximo e último módulo de que precisamos para concluir este tutorial é um Módulo Woo Add to Cart.
- Produto: Este produto
Configurações de campos
Vá para a guia de design e altere as configurações dos campos da seguinte forma:
- Cor de fundo dos campos: #ffffff
- Cor do texto dos campos: # 000000
- Fonte dos Campos: Open Sans
- Todos os cantos: 0px
- Largura da borda inferior dos campos: 1px
- Cor da borda inferior dos campos: # ce8654
Configurações de botão
Em seguida, defina o estilo do botão nas configurações do botão.
- Usar estilos personalizados para botão: Sim
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 0a0201
- Largura da borda do botão: 0 px
- Raio da borda do botão: 100 px
- Fonte do botão: PT Sans
- Peso da fonte do botão: negrito
- Preenchimento da parte superior do botão: 20 px
- Preenchimento inferior do botão: 20 px
- Preenchimento do botão esquerdo: 50 px
- Preenchimento do botão direito: 50 px
Espaçamento
E conclua as configurações do módulo e este tutorial, adicionando alguma margem superior ao Módulo Woo Add to Cart. Quando terminar de modificar o modelo da página do produto, certifique-se de salvar todas as alterações do Theme Builder antes de visualizar o resultado nas páginas do produto!
- Margem superior: 5%
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Nesta postagem, mostramos como ser criativo com as páginas de produtos que você constrói usando o Divi's Theme Builder e os módulos WooCommerce. Mais especificamente, mostramos como empilhar verticalmente as imagens da galeria woo. Essa abordagem funciona bem com um design de página de produto em tela cheia, mas pode ser útil para qualquer tipo de modelo de página de produto que você criar. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar 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.