Como usar criativamente as opções de alinhamento de novas linhas da Divi

No tutorial de hoje do Divi, mostraremos como você pode usar as novas opções de alinhamento de linha no Divi a seu favor. Estaremos combinando as opções de alinhamento de linha com outras opções de design embutidas para lhe dar uma idéia do que é possível com as opções de design avançado do Divi. O exemplo que mostraremos a você como recriar não contém absolutamente nenhum código adicional, o que significa que qualquer pessoa de qualquer nível de habilidade pode realizar esse design.

Vamos começar!

Antevisão do Design

Aqui está uma visão rápida do que estaremos criando hoje (no desktop):

E aqui está como o design ficará no celular:

Como usar criativamente as opções de alinhamento de novas linhas da Divi

Inscreva-se no nosso canal no Youtube

Configurações do personalizador de tema

Barra de Menu Principal

Como você pode notar, também combinamos o menu principal com o layout. Para modificar sua barra de menu principal, vá para Painel de controle do WordPress> Aparência> Personalizar> Cabeçalho e navegação> Barra de menu principal> E faça as seguintes alterações:

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

Seção Hero

Depois de modificar o menu principal, é hora de começar com o layout. A primeira coisa que você precisa fazer é adicionar uma nova página, alternar para o Visual Builder e adicionar uma nova seção padrão. Esta primeira seção será a nossa seção de heróis e tem a seguinte aparência:

Configurações da seção

Fundo Gradiente

Depois de adicionar a seção padrão, você pode adicionar um fundo gradiente a ela:

• Primeira cor: # 9e5555
• Segunda cor: # 000000
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 50%
• Posição final: 50%

Configurações de linha

Sobreposição de cores

Em seguida, adicione uma linha de uma coluna a essa seção e abra suas configurações. A primeira coisa que precisamos fazer é adicionar uma sobreposição de cor. Você pode escolher o quão escuro deseja que sua imagem seja selecionando uma cor cinza escuro. Nesse caso, usamos '# 595959'.

Imagem de fundo

A próxima coisa que precisaremos fazer é adicionar uma imagem de plano de fundo à linha de uma coluna e aplicar a sobreposição de cores. Para misturar a sobreposição de cores e a imagem de fundo, escolha 'Multiplicar' como sua mesclagem de imagem de fundo.

Alinhamento da linha central

Como a maioria dos sites, vamos escolher um alinhamento de linha central para a seção do herói.

Aumentar a largura total da linha

Também queremos que nossa linha tenha largura total, então vamos habilitar essa opção na subcategoria Dimensionamento da guia Design.

Preenchimento personalizado

A última coisa que precisamos fazer nas configurações de linha é adicionar um preenchimento personalizado de '300px' na parte superior e inferior.

Módulo de Primeiro Texto

Depois de definir todas as configurações, adicionaremos o primeiro Módulo de texto à linha. Escolha o texto que deseja que apareça na guia Conteúdo e vá para a guia Design. Na guia Design, certifique-se de que as seguintes configurações se apliquem à subcategoria Texto:

• Fonte do Texto: Arvo
• Tamanho da fonte do texto: 64 (desktop), 47 (tablet), 33 (telefone)
• Cor do texto: #FFFFFF
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Segundo Módulo de Texto

Em seguida, adicione outro Módulo de Texto. O segundo Módulo de Texto contém, em vez disso, as seguintes configurações:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 25 (desktop), 18 (tablet), 16 (telefone)
• Cor do texto: #FFFFFF
• Altura da linha de texto: 1,7em
• Orientação do Texto: Centro

Segunda Seção

Assim que a seção do herói estiver concluída, podemos passar para a segunda seção. Para esta seção, usaremos o alinhamento de linha correto em vez do centro em combinação com fundos personalizados de margens e colunas para criar um belo efeito. Precisamos criar duas versões de linha nesta seção: a versão para desktop e a versão para tablet / telefone. Isso garantirá que o design tenha uma aparência deslumbrante em todos os tipos de telas.

Configurações da seção

Fundo Gradiente

Depois de adicionar uma segunda seção, adicione o seguinte fundo gradiente a ela:

• Primeira cor: # 000000
• Segunda cor: # d6d6d6
• Tipo de gradiente: Linear
• Direção do gradiente: 184 graus
• Posição inicial: 20%
• Posição final: 20%

Adicionar linha de área de trabalho

Então, você pode ir em frente e adicionar uma primeira linha de duas colunas a ele; esta linha será a versão desktop. Felizmente, poderemos reutilizar a maior parte dele para a versão para tablet / celular também.

Configurações de linha

Fundo da coluna

Na guia Conteúdo, adicione '#FFFFFF' como a cor de fundo da segunda coluna.

Alinhamento da linha direita

Vá para a guia Design e selecione um alinhamento de linha correto.

Aumentar a largura total da linha

Em seguida, abra a subcategoria Sizing e ative a opção 'Make This Row Fullwidth'.

Preenchimento personalizado

A última coisa que você precisa fazer nas configurações de linha é adicionar um preenchimento superior de '300px' à linha e o seguinte preenchimento à segunda coluna:

• Superior: 35px
• Certo: 35px
• Inferior: 150px
• Esquerda: 35px

Coluna 1

Primeiro Módulo Divisor

Para a primeira coluna, vamos começar adicionando um Módulo Divisor. Na subcategoria Visibilidade da guia Conteúdo, ative a opção 'Mostrar divisor'.

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

Em seguida, escolha 'Solid' como Divider Style e 'Top' como Divider Position dentro da subcategoria Styles.

A última coisa que você precisa fazer na guia Design do Módulo Divisor é fazer os seguintes ajustes na subcategoria Dimensionamento:

• Peso do divisor: 3
• Altura: 0 px
• Largura: 20%
• Alinhamento do Módulo: Direito

Módulo de Primeiro Texto

Logo abaixo do Módulo Divisor, adicione o primeiro Módulo de Texto e use as seguintes configurações na subcategoria Texto da guia Design:

• Fonte do Texto: Arvo
• Tamanho da fonte do texto: 30px
• Cor do texto: # 000000
• Altura da linha de texto: 1,6em
• Orientação do Texto: Centro

Clonar o primeiro módulo divisor e alterar o alinhamento

Clone o Módulo Divisor que criamos e posicione-o logo abaixo do primeiro Módulo de Texto. A única coisa que precisa ser alterada é o Alinhamento do Módulo na subcategoria Dimensionamento. Em vez de colocá-lo no lado direito, escolha o esquerdo.

Segundo Módulo de Texto

A última coisa que você precisa adicionar à primeira coluna é outro Módulo de Texto com as seguintes configurações:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 14
• Altura da linha de texto: 1,7em
• Orientação do Texto: Centro

Coluna 2

Módulo de Imagem

A primeira coisa que você precisa adicionar à segunda coluna é um Módulo de imagem com as seguintes configurações na subcategoria Espaçamento da guia Design:

• Mostrar espaço abaixo da imagem: Sim
• Margem superior: -300px
• Esquerda: -80px

Módulo de Texto

Em seguida, adicione um Módulo de Texto logo abaixo do Módulo de Imagem e escolha as seguintes configurações na subcategoria Texto da guia Design:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 14
• Altura da linha de texto: 1,7em
• Orientação do Texto: Centro

Módulo de acompanhamento de mídia social

A última coisa que você precisa adicionar à segunda coluna é um Módulo de Acompanhamento de Mídia Social. Adicione quantos ícones sociais desejar e certifique-se de selecionar 'Centralizar' como Alinhamento de item na guia Design.

Desativar no tablet e telefone

Depois de fazer tudo isso, você pode ir em frente e desabilitar a linha em Telefone e Tablet.

Adicionar linha móvel

Clonar linha da área de trabalho

Agora que já fizemos a versão Desktop, a versão Mobile será muito mais rápida. Clone a linha Desktop e siga as próximas etapas.

Mudar de coluna

Comece alternando os módulos localizados em ambas as colunas.

Cor de fundo da coluna

Depois, remova a cor de fundo da segunda coluna e coloque-a na primeira coluna.

Preenchimento da coluna

Em vez de ter o preenchimento personalizado na segunda coluna, precisaremos tê-lo na primeira coluna. Além disso, o preenchimento inferior não é '150px', mas '35px', como o preenchimento superior, direito e esquerdo.

Usar alinhamento da linha central

Então, também teremos que alterar o alinhamento da linha para 'Centro'.

Desativar no desktop

Por último, mas não menos importante, certifique-se de que a linha esteja desabilitada na área de trabalho.

Terceira Seção

A terceira seção será muito semelhante à segunda. Criar esta seção será fácil, pois podemos assumir a maioria das configurações da segunda seção e fazer alguns ajustes. Depois de concluir todas as etapas, você poderá testemunhar o seguinte resultado:

Configurações da seção

Fundo Gradiente

Adicione uma nova seção padrão e use o seguinte fundo gradiente:

• Primeira cor: # d6d6d6
• Segunda cor: # 9e5555
• Tipo de gradiente: Linear
• Direção do gradiente: 184 graus
• Posição inicial: 30%
• Posição final: 30%

Margem Personalizada

Em seguida, adicione também uma margem personalizada de '-200px'.

Desktop Row

A mesma forma de trabalhar conta para a terceira seção; vamos fazer uma versão para desktop e tablet / telefone.

Clonar linha da área de trabalho da segunda seção

Comece clonando a linha Desktop da seção anterior. A maioria das configurações é a mesma e examinaremos as alterações que precisam ser feitas.

Mudar de coluna

Uma das mudanças que precisamos fazer é trocar os módulos que estão localizados em ambas as colunas.

Cor de fundo da coluna

Em seguida, também precisaremos remover a cor de fundo da segunda coluna e adicionar '# 000000' como a cor de fundo da primeira coluna.

Preenchimento da coluna

Exclua o preenchimento personalizado da coluna 2 e use '35px' para o preenchimento personalizado superior, direito, inferior e esquerdo da primeira coluna.

Usar alinhamento da linha esquerda

Além disso, altere o alinhamento da linha da direita para a esquerda.

Margem personalizada do módulo de imagem

A subcategoria de espaçamento do Módulo de Imagem também precisará de algumas alterações:

• Superior: -150px
• Direito: -80px

Margem personalizada do primeiro módulo divisor

Em seguida, adicione uma margem superior de '200px' ao primeiro Módulo divisor na segunda coluna.

Use cores opostas

Como você pode notar; o uso de cores é o oposto da segunda seção. Vá em frente e mude todas as cores da fonte para '#FFFFFF' e as cores do divisor para '# 000000'.

Desativar no tablet e telefone

Embora a linha já esteja desabilitada no tablet e no telefone (por causa do clone), você pode ir para a subcategoria Visibilidade se quiser ter certeza.

Mobile Row

Clonar a linha anterior da área de trabalho

Para a versão Mobile, clone a linha Desktop que você acabou de criar e faça as alterações que se seguem na próxima parte desta postagem.

Usar alinhamento da linha central

Abra as configurações de linha e altere o alinhamento de linha para o centro.

Margem personalizada do módulo de imagem

Outra coisa que você precisa fazer é alterar a margem superior do Módulo de imagem para '-20%'.

Desativar no desktop

Por último, mas não menos importante, certifique-se de que esta última linha esteja desabilitada na área de trabalho.

Resultado

Seguindo este tutorial passo a passo, você deverá conseguir o seguinte resultado no desktop:

E o seguinte resultado no celular:

Pensamentos finais

Nesta postagem, mostramos como você pode usar de forma criativa as diferentes opções de alinhamento de linhas no Divi Builder. As pessoas aprendem mais fazendo, por isso fornecemos um exemplo que mostramos passo a passo como criar. Se você tiver dúvidas ou sugestões; sinta-se à vontade para 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!