Como transformar divisores horizontais em verticais com Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, mostraremos como transformar o Módulo Divisor horizontal padrão que todos conhecemos em um vertical usando o Moving Company Layout Pack da Divi como exemplo. Essa abordagem será particularmente útil se você estiver tentando criar cronogramas em suas páginas. É ótimo usar também nas seções 'como funciona' e muito mais. Depois de configurar o divisor vertical, adicionaremos Módulos Blurb em cima dele para criar o efeito de linha do tempo. Este tutorial não requer nenhum código CSS e é baseado apenas nas opções integradas do Divi.

Vamos lá!

Antevisão

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

Vamos começar a criar: adicionar uma nova página e fazer upload da página de destino do Moving Company Layout Pack

Adicionar uma nova página e mudar para o Visual Builder

Vamos começar adicionando uma nova página, adicionando um título e mudando para o Visual Builder.

Escolha um layout pré-fabricado

Depois de fazer isso, você poderá construir do zero, escolher um layout predefinido ou clonar uma página existente. Usaremos a página inicial do Moving Company Layout Pack para criar o resultado final, então vá em frente e navegue pelos layouts predefinidos.

Selecione a página inicial do pacote de layout da empresa de mudança

Role para baixo nos layouts predefinidos até encontrar o Moving Company Layout Pack e carregar a página de destino em sua página.

Comece a criar a linha do tempo do divisor vertical

Encontre a seção da linha do tempo

Agora estamos prontos para começar a transformar divisores horizontais em verticais e usar esse divisor para criar uma linha do tempo. Vá em frente e localize a seguinte seção em sua página de destino:

Adicionar uma nova seção padrão abaixo

Logo abaixo desta seção, adicione uma seção padrão.

Coloque a linha 'Como funciona' na nova seção

Continue arrastando a linha 'Como funciona' da seção anterior para sua nova seção.

Adicionar nova linha

Estrutura da Coluna

Logo abaixo da linha que você acabou de colocar em sua seção, adicione outra com a seguinte estrutura de colunas:

Espaçamento

Antes de adicionar qualquer módulo, abra as configurações de linha e adicione '60px' à margem superior.

Adicionar Módulo Divisor à Coluna 1

Ocultar divisor

Agora podemos começar a adicionar módulos! Começaremos com a primeira coluna e, quando terminarmos, passaremos para a segunda. A primeira coisa de que precisaremos na primeira coluna é um Módulo divisor. Como mencionado antes, vamos transformá-lo em um vertical. O primeiro passo para alcançar o resultado desejado é desabilitar a opção Mostrar Divisor.

Fundo Gradiente

Em vez de usar o divisor real, criaremos um divisor usando o plano de fundo do Módulo Divisor. Estamos usando o seguinte fundo gradiente:

• Cor 1: # e0aa25
• Cor 2: # c11000

Dimensionamento

Agora, já nos certificamos de que o divisor não está visível. O próximo passo crucial para a criação de um divisor vertical é diminuir drasticamente a largura do nosso divisor. Estamos usando '2%', mas você pode fazer com que pareça tão espesso quanto desejar. Também estamos habilitando o alinhamento do módulo central.

Espaçamento

Para esticar o Módulo Divisor verticalmente, vamos adicionar '480px' ao preenchimento personalizado superior e inferior do nosso Módulo Divisor. Et voila, temos nosso divisor vertical!

Adicionar módulos do Blurb da seção anterior à coluna 1

A próxima coisa que faremos é criar uma linha do tempo usando este divisor vertical. Na seção anterior, você encontrará três módulos do Blurb. Vá em frente e coloque cada um deles na primeira coluna da linha em que você está trabalhando, logo abaixo do Módulo Divisor.

Modifique o módulo nº 1 do Blurb

Adicionar cor de fundo

Usaremos um dos recursos de eficiência do Divi para acelerar o processo durante a edição de nossos módulos Blurb. Aplicaremos todas as alterações ao primeiro módulo do Blurb e, em seguida, simplesmente copiaremos os estilos de módulo e adicioná-los aos outros módulos do Blurb com um clique. Abra seu primeiro módulo do Blurb e adicione 'rgba (255,255,255,0,73)' como cor de fundo.

Alterar o tamanho da fonte do ícone

A próxima coisa que você precisa fazer é alterar o tamanho da fonte do ícone para '65px'.

Remover Espaçamento

Também removeremos todas as margens nas configurações de Espaçamento. Posteriormente, adicionaremos a margem a cada Módulo Blurb individualmente porque os valores são diferentes.

Copiar estilo do módulo do Blurb e adicioná-lo aos módulos restantes do Blurb

Copiar estilos de módulo do Blurb

Terminamos de modificar o primeiro módulo do Blurb. Clique com o botão direito e selecione 'Copy Module Styles'. Isso copiará todas as modificações que acabamos de fazer.

Colar estilos de módulo nos módulos Blurb restantes

E cole os estilos de módulo nos dois módulos Blurb restantes. Você perceberá que isso não muda o conteúdo, apenas muda as configurações de design, o que economiza muito tempo.

Espaçando os módulos do Blurb

Módulo Blurb # 1

Como mencionado antes, o espaçamento dos Módulos do Blurb é diferente. O segundo não tem nenhum, mas o primeiro usa '-900px' para a margem superior. Depois de adicionar essa margem negativa, você notará que os Módulos do Blurb se tornam parte da linha do tempo. Dentro do Visual Builder, parece que o Módulo Divisor está no topo dos Módulos do Blurb. Mas depois de sair do Visual Builder, você verá tudo se encaixar, então não se preocupe com isso.

Módulo Blurb # 3

Abra seu último módulo do Blurb em seguida e adicione '150px' à margem inferior.

Solte o Módulo de Imagem na Coluna 2

Localizar imagem

Agora podemos passar para a coluna 2! O único módulo de que precisaremos é um Módulo de imagem. Estamos reutilizando um que já está em nossa página, então vá em frente e localize-o:

Solte a imagem na coluna 2

Solte e arraste-o para a próxima coluna.

Alterar espaçamento

Para centralizá-lo verticalmente, vamos adicionar alguma margem a ele:

• Margem superior: 300 px (desktop), 30 px (tablet e telefone)
• Margem inferior: 50 px (tablet e telefone)

Remover seção anterior e seguinte

Terminamos de criar nossa seção! A última coisa que falta fazer é excluir as seções excessivas.

Antevisão

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

Pensamentos finais

Nesta postagem de blog de caso de uso, mostramos como transformar divisores verticais em verticais usando o Moving Company Layout Pack da Divi. Essa abordagem é ideal se você deseja criar cronogramas em sua página sem precisar usar nenhum código adicional. Baseia-se exclusivamente nas opções integradas do Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!