Como alterar o ponto de interrupção da coluna móvel do módulo Divi Shop

Publicados: 2020-01-24

Por padrão, assim que você muda para um dispositivo móvel, o módulo de loja se transforma em um layout de uma coluna. Agora, se você deseja destacar cada produto individualmente, isso é ótimo, mas com os tamanhos de tela maiores dos smartphones hoje em dia, você pode permitir que dois produtos apareçam um ao lado do outro ao usar o Módulo de Loja. No tutorial Divi de hoje, mostraremos como alterar o ponto de interrupção móvel do módulo de loja usando CSS, permitindo que dois produtos apareçam um ao lado do outro na maioria dos smartphones modernos. Este é um ótimo tutorial para se ter ao alcance se você estiver abrindo uma loja online no futuro! Você também poderá baixar o arquivo JSON do design gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Móvel

ponto de interrupção móvel do módulo da loja

Área de Trabalho

ponto de interrupção móvel do módulo da loja

Baixe o modelo da página da loja GRATUITAMENTE

Para colocar suas mãos no modelo de página de loja gratuita, 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.

Baixe os arquivos
Download de graça

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. Vá para Divi Theme Builder e adicione um novo modelo

Vá para Divi Theme Builder e adicione um novo modelo

Comece indo ao Theme Builder do DIvi e adicione um novo modelo.

ponto de interrupção móvel do módulo da loja

Use o modelo na página da loja

Use este novo modelo na página da loja do seu site.

  • Use em: Loja

ponto de interrupção móvel do módulo da loja

Comece a construir o corpo do modelo

E comece a construir o corpo do modelo de loja.

ponto de interrupção móvel do módulo da loja

2. Comece a construir o corpo do modelo

Configurações da seção

Fundo Gradiente

Uma vez dentro do editor de template, você notará uma seção. Abra essa seção e use o seguinte fundo gradiente para ela:

  • Cor 1: # 32ff3d
  • Cor 2: # 29c4a9
  • Tipo de gradiente: Linear
  • Direção do gradiente: 109 graus

ponto de interrupção móvel do módulo da loja

Imagem de fundo

Faça upload de uma imagem de plano de fundo também. Você pode encontrar a imagem de fundo que estamos usando neste tutorial na pasta de download que você baixou no início deste post.

  • Tamanho da imagem de fundo: Ajustar

ponto de interrupção móvel do módulo da loja

Espaçamento

Vá para a guia de design da seção e modifique os valores de espaçamento de acordo:

  • Margem superior: 50px
  • Margem esquerda: 50px
  • Margem direita: 50px
  • Preenchimento inferior: 150 px

ponto de interrupção móvel do módulo da loja

Fronteira

Conclua as configurações da seção adicionando algum raio de borda.

  • Todos os cantos: 20px

ponto de interrupção móvel do módulo da loja

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

ponto de interrupção móvel do módulo da loja

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H1

Adicione um Módulo de Texto à coluna da linha com algum conteúdo H1 de sua escolha.

ponto de interrupção móvel do módulo da loja

Configurações de texto H1

Altere as configurações de texto H1 do módulo de acordo:

  • Fonte do cabeçalho: Prata
  • Alinhamento do Texto do Título: Centro
  • Cor do texto do título: #ffffff
  • Tamanho do texto do título: 80px (desktop), 60px (tablet), 40px (telefone)

ponto de interrupção móvel do módulo da loja

Adicionar Seção # 2

Índice Z

Adicione outra seção logo abaixo da anterior. Abra as configurações da seção e aumente o índice z.

  • Índice Z: 2

ponto de interrupção móvel do módulo da loja

Adicionar nova linha

Estrutura da Coluna

Em seguida, adicione uma nova linha usando a seguinte estrutura de coluna:

ponto de interrupção móvel do módulo da loja

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo.

  • Cor de fundo: #ffffff

ponto de interrupção móvel do módulo da loja

Dimensionamento

Vá para a guia de design do módulo e modifique as configurações de dimensionamento da seguinte forma:

  • Largura: 100%
  • Largura máxima: 1380 px

ponto de interrupção móvel do módulo da loja

Espaçamento

Em seguida, adicione alguns valores de espaçamento personalizados em diferentes tamanhos de tela.

  • Margem superior: 200px
  • Preenchimento superior: 50 px (desktop), 20 px (tablet e telefone)
  • Preenchimento inferior: 50 px (desktop), 20 px (tablet e telefone)
  • Preenchimento esquerdo: 100 px (desktop), 20 px (tablet e telefone)
  • Preenchimento direito: 100 px (desktop), 20 px (tablet e telefone)

ponto de interrupção móvel do módulo da loja

Fronteira

Também estamos adicionando algum raio de borda a toda a linha.

  • Todos os cantos: 25px

ponto de interrupção móvel do módulo da loja

Sombra da caixa

Conclua as configurações de linha adicionando uma sombra de caixa sutil.

  • Força do desfoque de sombra da caixa: 50 px
  • Cor da sombra: rgba (0,0,0,0.1)

ponto de interrupção móvel do módulo da loja

Adicionar Módulo de Loja à Coluna

Contente

Agora é hora de inserir nosso Módulo de Loja. Estamos usando um layout de 4 colunas.

  • Layout da coluna: 4 colunas

ponto de interrupção móvel do módulo da loja

Sobreposição

Vá para a guia de design do módulo e altere as cores de sobreposição.

  • Cor do ícone de sobreposição: # 29c6a6
  • Sobreposição de cor de fundo: rgba (255,255,255,0,75)

ponto de interrupção móvel do módulo da loja

Imagem

Altere também as configurações de imagem.

  • Todos os cantos: 10px

ponto de interrupção móvel do módulo da loja

  • Força do desfoque de sombra da caixa: 50 px
  • Cor da sombra: rgba (0,0,0,0.11)

ponto de interrupção móvel do módulo da loja

Configurações de texto do título

Continue modificando as configurações de texto do título de acordo:

  • Fonte do Título: Prata
  • Tamanho do texto do título: 30 px (desktop), 25 px (tablet), 20 px (telefone)

ponto de interrupção móvel do módulo da loja

Configurações de texto de preço

Em seguida, faça algumas alterações nas configurações de texto do preço.

  • Fonte de preço: Montserrat
  • Peso da fonte de preço: médio
  • Tamanho do texto de preço: 18 px (desktop), 16 px (tablet), 14 px (telefone)

ponto de interrupção móvel do módulo da loja

Espaçamento

Conclua as configurações do módulo adicionando algum preenchimento superior.

  • Enchimento superior: 50 px

ponto de interrupção móvel do módulo da loja

Adicionar Módulo de Código à Coluna

Depois de concluir o design geral do Módulo da Loja, é hora de modificar o ponto de interrupção da coluna móvel do Módulo da Loja usando CSS. Vamos adicionar o código CSS a um Módulo de Código dentro de nosso design. Vá em frente e adicione um novo Módulo de Código logo abaixo do Módulo de Loja.

ponto de interrupção móvel do módulo da loja

Insira o código CSS

Estamos reduzindo o ponto de interrupção móvel de uma coluna para largura de 300 px. Isso significa que a maioria dos smartphones modernos exibe dois produtos lado a lado, em vez de um. Para que isso aconteça, adicionaremos as seguintes linhas de código CSS ao Módulo de Código: 

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

ponto de interrupção móvel do módulo da loja

3. Salvar todas as alterações do Theme Builder e o resultado da visualização

Depois de concluir o design da página da loja e adicionar o código CSS para alterar o ponto de interrupção móvel, você pode salvar todas as alterações do Theme Builder e visualizar o resultado em sua página da loja!

ponto de interrupção móvel do módulo da loja

ponto de interrupção móvel do módulo da loja

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Móvel

ponto de interrupção móvel do módulo da loja

Área de Trabalho

ponto de interrupção móvel do módulo da loja

Pensamentos finais

Neste post, mostramos como alterar o breakpoint da coluna móvel do módulo shop, que permite mostrar dois produtos um ao lado do outro na maioria dos smartphones modernos da atualidade. Esta é uma excelente maneira de reduzir a rolagem móvel necessária e mostrar aos visitantes mais produtos de uma vez. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida, sinta-se à 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.