Como destacar categorias de produtos em uma seção impressionante do herói do site da Divi

Se você está familiarizado com sites de comércio eletrônico, sem dúvida também está familiarizado com as categorias de produtos. As categorias de produtos podem ser algumas das páginas mais poderosas do seu site. É por isso que é importante torná-los fáceis de encontrar e destacá-los de uma forma simples e elegante. Com as opções integradas do Divi, você pode levar seu projeto em várias direções. Neste tutorial, mostraremos como destacar categorias de produtos em sua seção de heróis. Criaremos o exemplo de design do zero e, com sorte, ele irá inspirá-lo a destacar as categorias de produtos em sua própria maneira criativa também!

Vamos lá.

Antevisão

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

Vamos começar a criar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Fundo Gradiente

Comece adicionando uma nova seção à sua página. Abra as configurações desta seção e adicione um fundo gradiente a ela.

• Cor 1: #ffffff
• Cor 2: # 757f1e
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Posição inicial: 50%
• Posição final: 50%

Espaçamento

Em seguida, vá para a guia de design e adicione algum preenchimento personalizado superior e inferior à seção.

• Enchimento superior: 130px
• Preenchimento inferior: 130px

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo da coluna 1

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

• Cor de fundo da coluna 1: rgba (0,0,0,0.19)

Imagem de fundo da coluna 1

Adicione uma imagem de plano de fundo à primeira coluna, bem como um modo de mesclagem.

• Posição da imagem de fundo da coluna 1: Centro inferior
• Repetição da imagem de fundo da coluna 1: sem repetição
• Mistura de imagem de fundo da coluna 1: multiplique

Cor de fundo da coluna 2

A segunda coluna precisará apenas de uma cor de fundo branca.

• Cor de fundo da coluna 2: #ffffff

Dimensionamento

Continue indo para a guia de design das configurações de linha e altere as configurações de dimensionamento.

• Usar largura personalizada: Sim
• Unidade: PX
• Largura personalizada: 2.000 px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim

Espaçamento

Remova também todo o preenchimento personalizado padrão da linha.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

E adicione uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

É hora de começar a adicionar módulos! O primeiro módulo de que precisaremos na segunda coluna é um Módulo de texto de título. Adicione algum conteúdo de sua escolha.

Configurações de texto de título

Em seguida, vá para as configurações de texto do título e faça algumas alterações.

• Peso da fonte do cabeçalho: Ultra negrito
• Tamanho do texto do título: 60 px (desktop e tablet), 50 px (telefone)
• Espaçamento entre letras do cabeçalho: -4px
• Altura da linha de direção: 0,8em

Espaçamento

Adicione algumas margens personalizadas e valores de preenchimento também.

• Margem superior: 17vw
• Preenchimento esquerdo: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Adicionar Módulo Divisor à Coluna 2

Visibilidade

O segundo e último módulo necessário na segunda coluna é um Módulo Divisor. Certifique-se de que a opção Mostrar divisor esteja habilitada.

• Mostrar divisor: Sim

Cor

Altere a cor da divisória a seguir.

• Cor: # 757f1e

Estilos

Modifique o estilo do divisor nas configurações de estilos também.

• Estilo Divisor: Duplo

Dimensionamento

E aumente o Peso do Divisor nas configurações de dimensionamento do módulo.

• Peso do divisor: 6px

Espaçamento

Por último, adicione algumas margens superior e inferior personalizadas ao Módulo Divisor.

• Margem superior: 2vw
• Margem inferior: 15vw

Adicionar linha # 2

Estrutura da Coluna

Para a segunda fila! Escolha a seguinte estrutura de coluna para ele:

Cor de fundo da coluna 1

Abra as configurações de linha e adicione uma cor de fundo à primeira coluna.

• Cor de fundo da coluna 1: # 212121

Dimensionamento

Em seguida, vá para a guia de design e brinque com o tamanho da linha.

• Usar largura personalizada: Sim
• Unidade: PX
• Largura personalizada: 2.000 px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Remova também todo o preenchimento personalizado da linha adicionando '0px' ao preenchimento superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

Por último, mas não menos importante, dê à linha uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

O primeiro módulo de que precisaremos é um Módulo de Texto. Adicione um à primeira coluna com algum conteúdo de sua escolha.

Configurações de texto

Continue indo para a guia de design e alterando as configurações de texto.

• Peso da fonte do texto: leve
• Cor do texto: #ffffff
• Tamanho do texto: 18 px (desktop), 15 px (tablet), 12 px (telefone)
• Altura da linha de texto: 1em
• Orientação do Texto: Esquerda
• Cor do Texto: Claro

Configurações de texto de título

Modifique as configurações de texto do título também.

• Título 3 Cor do texto: #ffffff
• Tamanho do texto do título 3: 25 px (desktop), 20 px (tablet), 18 px (telefone)
• Cabeçalho 3 espaçamento entre letras: -1 px

Espaçamento

Adicione alguns valores de preenchimento personalizados nas configurações de espaçamento também.

• Enchimento superior: 30px
• Preenchimento inferior: 30 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Continue adicionando outro Módulo de Texto à segunda coluna. Adicione algum conteúdo de sua escolha e vincule a página de categoria do produto nas configurações de link.

Cor de fundo padrão

Em seguida, vá para as configurações de fundo e adicione uma cor de fundo.

• Cor de fundo: #eaeaea

Hover Background Color

Altere esta cor de fundo ao pairar.

• Cor de fundo: # ffbb00

Configurações de texto padrão

A seguir, altere as configurações de texto na guia de design.

• Peso da fonte do texto: ultra negrito
• Estilo da fonte do texto: maiúsculas
• Cor do texto: # 333333
• Tamanho do texto: 16px
• Espaçamento entre letras do texto: -1px
• Orientação do Texto: Centro

Configurações de texto flutuante

E modifique essas configurações ao passar o mouse.

• Cor do texto: #ffffff
• Tamanho do texto: 20px

Espaçamento Padrão

Também estamos aplicando alguns valores de espaçamento padrão.

• Enchimento superior: 45 px
• Preenchimento inferior: 45 px
• Preenchimento esquerdo: 5 px
• Preenchimento direito: 5 px

Espaçamento de pairar

Que mudaremos ao pairar.

• Margem superior: -50px
• Margem esquerda: -20px
• Enchimento superior: 70 px
• Preenchimento inferior: 70 px
• Preenchimento esquerdo: 5 px
• Preenchimento direito: 5 px

Sombra de caixa padrão

Continue abrindo as configurações de sombra de caixa e adicione uma sombra de caixa completamente transparente.

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

Hover Box Shadow

Altere a cor da sombra da caixa completamente transparente ao pairar para que ela apareça.

• Cor da sombra: rgba (0,0,0,0.34)

Clone o módulo de texto nº 2 duas vezes e coloque nas colunas restantes

Assim que terminar de modificar o Módulo de texto na coluna 2, você pode clonar o módulo duas vezes e colocar as duplicatas nas duas colunas restantes da linha.

Mudar a primeira duplicata

Mudar o Conteúdo

Abra a primeira duplicata na terceira coluna e altere o conteúdo e o link da categoria do produto.

Mudar a cor do fundo

Altere a cor de fundo deste módulo também.

• Cor de fundo: #dddddd

Alterar a segunda duplicata

Mudar o Conteúdo

Altere o conteúdo da segunda duplicata na coluna 4 também.

Mudar a cor do fundo

Junto com a cor de fundo.

• Cor de fundo: # c6c6c6

Adicionar Módulo de Imagem para Tamanhos de Tela Menores à Coluna 2 da Linha # 1

Enviar Imagem

Por último, mas não menos importante, também adicionaremos um Módulo de imagem à segunda coluna da primeira linha para otimizar tudo para tamanhos de tela menores.

Visibilidade

Certifique-se de que este módulo apareça apenas em telas menores, ocultando-o na área de trabalho na guia avançada do módulo.

Antevisão

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

Pensamentos finais

Neste post, recriamos um exemplo de design impressionante que coloca as principais categorias de produtos do seu site em destaque. Esperamos que este tutorial inspire você a criar seus próprios tipos de design também. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!