Como Criar um Catálogo de Moda com Rolagem com Divi

Neste post, mostraremos como você pode criar um catálogo de moda com rolagem. Usar este método o ajudará a se conectar com seu público como faria se entregasse a eles um catálogo de papel. A criação de um catálogo de moda com rolagem on-line pode ajudar a aumentar os resultados que você obtém do catálogo. Ao incluir links diretos para itens da loja, por exemplo, o processo de compra também será aprimorado.

Resultado

O resultado mostraremos como criar, passo a passo, a seguinte aparência no desktop:

E assim no telefone e no tablet:

Como Criar um Catálogo de Moda com Rolagem com Divi

Inscreva-se no nosso canal no Youtube

Adicionar formas transparentes a imagens com o Photoshop

A primeira coisa que mostraremos a você é como adicionar uma parte transparente a uma imagem com o Photoshop. Existe uma alternativa gratuita para o Photoshop chamada GimpShop, mas nesta parte do tutorial, usaremos apenas o Photoshop. Precisaremos de duas imagens com cada uma de duas formas diferentes; um para desktop e outro para celular e tablet. Nesta parte, vamos simplesmente mostrar como adicionar uma forma transparente à imagem. Depois, você mesmo pode fazer todas as imagens de que precisa.

Abra o Photoshop

Comece abrindo o Photoshop no seu computador.

Imagem Aberta

Em seguida, abra a primeira imagem que deseja editar. O método permanece o mesmo para todas as três imagens que você usará neste tutorial. É por isso que vamos explicar apenas uma vez.

Clique duas vezes na imagem e crie uma camada

Depois de abrir a imagem que deseja editar, clique duas vezes na imagem e crie uma nova camada para ela.

Adicionar outra camada

Continue adicionando outra camada vazia em cima dela.

Selecione Camada 1 e Ferramenta Laço Poligonal

Selecione Layer 1 e comece usando a Polygonal Lasso Tool.

Faça uma forma

Enquanto estiver com a Polygonal Lasso Tool ativada, vá em frente e crie a forma transparente dentro de sua imagem.

Torne a camada 1 invisível e pressione Delete enquanto seleciona a camada 0

Depois de selecionar a área que deseja tornar transparente, vá em frente, torne a Camada 1 invisível, selecione a Camada 0 novamente e pressione o botão Excluir no teclado.

Selecione a ferramenta Rectangular Marquee e clique em algum lugar da imagem

Depois de fazer isso, selecione a ferramenta Rectangular Marquee e clique em algum lugar na sua imagem.

Salvar imagem como PNG

Por último, você precisará salvar a imagem como PNG e repetir o mesmo processo para todas as quatro imagens que usará em todo o layout.

Configurações da barra de menu principal

As configurações da barra de menu principal de que precisamos para o layout que estamos criando são as seguintes:

• Ocultar imagem do logotipo: Habilitar
• Altura do menu: 30
• Tamanho do texto: 15
• Espaçamento entre letras: -1
• Fonte: Lato
• Estilo da fonte: negrito e maiúsculas
• Cor do texto: #FFFFFF
• Cor do link ativo: #FFFFFF
• Cor de fundo: rgba (255,255,255,0)
• Cor de fundo do menu suspenso: rgba (255,255,255,0)

Edição de introdução

Depois de modificar a barra de menu principal, você pode ir em frente e adicionar uma nova página, usar o Divi Builder e mudar para o Visual Builder.

Adicionar nova seção

Nessa página, comece adicionando uma seção padrão.

Cor de fundo da seção

O plano de fundo dessa cor precisa ser '# d6d6d6'.

Preenchimento personalizado

Vá para a guia Design dessa seção. Na subcategoria Espaçamento, adicione '24px' ao preenchimento superior e 0px ao inferior.

Adicionar linha de uma coluna

Feito isso, você pode prosseguir e adicionar uma linha de uma coluna à seção.

Dimensionamento

Vá para a guia Design e modifique a subcategoria Dimensionamento:

• Tornar esta linha com largura total: Sim
• Use largura de calha personalizada: 1

Preenchimento personalizado

Role para baixo e adicione '0px' ao preenchimento superior da linha.

Módulo de Primeiro Texto

Feito isso, você pode adicionar um Módulo de Texto à linha. Depois de inserir o texto que deseja que apareça, vá para a guia Design e certifique-se de que as seguintes alterações se apliquem à subcategoria Texto:

• Fonte do texto: TT padrão antigo
• Estilo da fonte: maiúsculas
• Tamanho da fonte do texto: 72 (desktop), 41 (tablet), 29 (telefone)
• Cor do texto: # 000000
• Espaçamento entre letras do texto: 11px
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Abra a subcategoria Espaçamento e adicione '30px' ao preenchimento superior e inferior.

Módulo Divisor

Logo abaixo do Módulo de Texto, adicione um Módulo Divisor e habilite a opção 'Mostrar Divisor'.

Vá para a guia Design e escolha '#FFFFFF' como a cor do divisor.

A seguir, escolha 'Solid' como Divider Style e 'Top' como Divider Position dentro da subcategoria Styles.

Em seguida, abra a subcategoria Dimensionamento e aplique as seguintes configurações:

• Peso do divisor: 10px
• Altura: 23px
• Largura: 100%
  

Segundo Módulo de Texto

Logo abaixo do Módulo Divisor, adicione outro Módulo de Texto. Escolha o ícone que você deseja em seu Mapa de caracteres (Windows) ou Paleta de caracteres (Mac) e coloque-o na guia Conteúdo. Para este exemplo, usamos o seguinte símbolo: '↓'. Em seguida, vá para a guia Design e aplique as seguintes configurações:

• Tamanho da fonte do texto: 42px
• Cor do texto: # 000000
• Orientação do Texto: Centro

Catálogo de moda para área de trabalho (nova seção)

Agora, adicione outra seção padrão. Esta seção conterá duas linhas que exibirão uma parte diferente do catálogo no desktop.

Configurações da seção

Cor de fundo

Use '#FFFFFF' como a cor de fundo desta seção.

Preenchimento personalizado

Em seguida, vá para a guia Design e adicione '15px' ao preenchimento superior.

Primeira linha

Estrutura da Coluna

Depois de fazer as alterações na configuração, adicione uma linha com a seguinte estrutura de coluna:

Cor de fundo

Abra as configurações de linha e adicione 'rgba (255,255,255,0.14)' como a cor de fundo.

Imagem de fundo

Adicione uma das imagens que você fez na parte do Photoshop deste post e use 'Hue' como Background Image Blend.

Dimensionamento

Por último, faça as seguintes alterações na subcategoria de dimensionamento:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Módulo de Primeiro Texto

Depois de concluir as configurações de linha, adicione um Módulo de Texto à segunda coluna. Use as seguintes configurações para a subcategoria Texto:

• Fonte do texto: amargo
• Tamanho da fonte do texto: 63px
• Cor do texto: # 000000
• Orientação do Texto: Centro

Módulo Divisor

Logo abaixo do primeiro Módulo de Texto, adicione um Módulo Divisor e habilite a opção 'Mostrar Divisor'.

Vá para a guia Design e use '# 000000' como a cor do divisor.

Dentro da subcategoria Estilos, use 'Sólido' como o Estilo do divisor e 'Superior' como a Posição do divisor.

Role para baixo na mesma guia e faça com que as seguintes configurações se apliquem à subcategoria de dimensionamento:

• Peso do divisor: 3px
• Altura: 23px
• Largura: 57%
• Alinhamento do Módulo: Esquerda

Por último, adicione uma margem superior de '30px' e uma margem inferior de '50px'.

Segundo Módulo de Texto

Assim que o Divisor estiver no lugar, vá em frente e adicione o segundo Módulo de Texto que conterá um título. Em primeiro lugar, use '# 000000' como cor de fundo na guia Conteúdo.

Em seguida, vá para a guia Design e faça com que as seguintes configurações se apliquem à subcategoria Texto:

• Fonte do texto: amargo
• Tamanho da fonte do texto: 92px
• Cor do texto: # 000000
• Altura da linha de texto: 1em
• Orientação do Texto: Esquerda

Abra a subcategoria Borda e use a seguinte borda:

• Borda de uso: Sim
• Cor da borda: # 000000
• Largura da borda: 3px
• Estilo de borda: sólido

Além disso, use uma largura de '77% 'e um alinhamento de módulo à esquerda.

Por último, adicione '15px' ao preenchimento superior, direito, inferior e esquerdo do Módulo de Texto.

Terceiro Módulo de Texto

Adicione outro Módulo de Texto logo abaixo do anterior. Este representará a descrição. Vá para a guia Design e use as seguintes configurações para a subcategoria de texto:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 16px
• Cor do texto: # 000000
• Altura da linha de texto: 1em
• Orientação do Texto: Esquerda

Abra a subcategoria Sizing, use '70% 'para Width e selecione o Module Alignment à esquerda.

Por último, adicione uma margem superior de '20px'.

Quinto Módulo de Texto

O quinto Módulo de Texto funciona como um botão minimalista. Na guia Conteúdo, use o símbolo '→' + o texto e coloque um link atrás dele.

Em seguida, vá para a guia Design. Use as seguintes configurações para a subcategoria Texto:

• Fonte do texto: amargo
• Tamanho da fonte do texto: 23px
• Cor do texto: # 000000
• Altura da linha de texto: 1em
• Orientação do Texto: Esquerda

Role para baixo na mesma guia até encontrar a subcategoria Dimensionamento. Dentro dessa subcategoria, use uma largura de '49% 'e um alinhamento de módulo correto.

Por último, adicione uma margem superior de '80px'.

Sexto Módulo de Texto

O sexto e último módulo de que precisaremos é quase igual ao anterior. Use o texto '→' + e coloque um link atrás dele.

As configurações para a subcategoria de texto são as seguintes:

• Fonte do texto: amargo
• Tamanho da fonte do texto: 23px
• Cor do texto: # e02b20
• Altura da linha de texto: 1em
• Orientação do Texto: Esquerda

Altere a largura para '39% 'e use o alinhamento de módulo correto também.

Segunda linha

Cor de fundo

Abra as configurações de linha e adicione 'rgba (255,255,255,0.14)' como a cor de fundo.

Imagem de fundo

Adicione uma das imagens que você fez na parte do Photoshop deste post e use 'Hue' como Background Image Blend.

Estrutura da Coluna

A segunda linha que você precisa adicionar à seção padrão é exatamente o oposto da anterior.

Módulos de clone

Os módulos que usamos na linha anterior são os mesmos que precisamos para esta linha, então vá em frente, clone-os e coloque-os na primeira coluna em vez da segunda. Precisaremos fazer algumas mudanças de alinhamento na próxima parte deste post.

Modificações do Módulo do Primeiro Texto

Abra o primeiro Módulo de Texto e adicione uma margem superior de '20px'.

Modificações do Módulo Divisor

Em seguida, abra o Módulo Divisor e altere o Alinhamento do Módulo na subcategoria Dimensionamento para a direita.

Modificações do segundo módulo de texto

Defina a Orientação do texto do segundo Módulo de texto para a direita.

E escolha um Alinhamento de Módulo correto na subcategoria Dimensionamento também.

Modificações do terceiro módulo de texto

O terceiro Módulo de Texto também precisará de uma Orientação de Texto correta.

E um alinhamento de módulo correto também.

Modificações do Quinto Módulo de Texto

A única coisa que você terá que fazer para o quinto Módulo de Texto é alterar a Largura para '82% '.

Modificações do sexto módulo de texto

O mesmo conta para o sexto Módulo de Texto, mas use '87% 'no lugar.

Ocultar seção para tablet e telefone

Depois de terminar as duas linhas, você pode ir em frente e desabilitar toda a seção no telefone e no tablet.

Catálogo de tablets e telefones (nova seção)

Para que tudo tenha uma ótima aparência no tablet e no telefone também, vamos criar uma nova seção padrão.

Configurações da seção

Cor de fundo

Adicione '#FFFFFF' como a cor de fundo dessa seção.

Preenchimento personalizado

Vá para a guia Design e adicione um preenchimento superior de '15px'.

Primeira linha

Estrutura da Coluna

Em seguida, adicione uma linha de duas colunas à seção.

Dimensionamento

Vá para a subcategoria de dimensionamento dessa linha e faça as seguintes alterações:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Módulo de Imagem

Em vez de usar uma imagem de plano de fundo, vamos usar um Módulo de imagem. Assim, teremos certeza de que o texto e a imagem não se sobreporão. Vá em frente e adicione um módulo de imagem à primeira coluna da linha e carregue uma imagem.

Clonar Módulos da Primeira Linha na Versão Desktop

Em seguida, clone todos os módulos que você usou na primeira linha da versão para desktop e coloque-os na segunda coluna.

Alterar o tamanho da fonte do segundo módulo de texto

Só há uma coisa que precisa ser mudada; o tamanho da fonte do segundo Módulo de Texto. Mude para 65 px.

Segunda linha

Estrutura da Coluna

Em seguida, vá em frente e adicione outra linha de duas colunas à seção.

Dimensionamento

Esta linha também precisará de uma subcategoria de dimensionamento modificada:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Módulo de Imagem

Adicione também o Módulo de imagem à primeira coluna e carregue uma imagem.

Clonar Módulos da Segunda Linha na Versão Desktop

Então, vá em frente e clone os módulos que são colocados na segunda linha da versão desktop. Depois de cloná-los, coloque-os na segunda coluna desta linha.

Alterar o tamanho da fonte do segundo módulo de texto

O tamanho do texto do segundo Módulo de Texto também precisa ser alterado. Vá em frente e atribua a ele um tamanho de fonte de '65px'.

Ocultar seção para desktop

Depois de terminar as duas linhas, você pode ir em frente e desabilitar a seção inteira no desktop.

Resultado

Et voila, depois de seguir todos os passos desta postagem, você deve alcançar o seguinte resultado no desktop:

E o seguinte no telefone e tablet:

Pensamentos finais

Nesta postagem, mostramos como você pode criar um belo catálogo de moda com rolagem. Para fazer nosso design funcionar, primeiro mostramos como fazer uma forma transparente em sua imagem com o Photoshop. Depois, usamos essas imagens em nosso tutorial Divi para criar o design. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Rvector / shutterstock.com