Escondendo elegantemente sua cópia abaixo dos divisores de seção em um design impressionante com Divi

As opções integradas do Divi permitem que você use uma configuração de design específica para vários fins, o que, por sua vez, ajuda a despertar a criatividade. Hoje, vamos usar divisores de seção de uma maneira única para ocultar elegantemente a cópia do seu site. Essa é uma ótima maneira de adicionar interação extra à sua página sem a necessidade de um código personalizado. Vamos recriar um belo exemplo do zero e você também poderá baixar o arquivo JSON do exemplo gratuitamente.

Vamos lá!

Antevisão

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

Área de Trabalho

Móvel

Baixe o Layout GRATUITAMENTE

Para colocar as mãos no layout gratuito, primeiro você precisa fazer o download 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

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.

DOWNLOAD

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!

Vamos começar a recriar!

Adicionar Seção # 1

A primeira coisa que você precisa fazer é adicionar uma nova seção regular à página em que está trabalhando.

Adicionar nova linha

Estrutura da Coluna

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

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

O primeiro módulo de que precisamos nesta linha é um Módulo de Texto com algum conteúdo H2.

Configurações de texto H2

Vá para a guia de design e altere as configurações de texto H2.

• Fonte do título 2: Playfair Display
• Peso da fonte do cabeçalho 2: regular
• Alinhamento de Texto do Título 2: Centro
• Tamanho do texto do título 2: 70 px (desktop), 40 px (tablet), 30 px (telefone)

Adicionar Módulo Divisor à Coluna

Visibilidade

O segundo e último módulo de que precisamos nesta linha é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Também estamos mudando a cor da linha na guia de design.

• Cor da linha: # 000000

Dimensionamento

Passe para as configurações de dimensionamento e aplique as seguintes configurações:

• Peso do divisor: 5px
• Largura: 27%
• Alinhamento do Módulo: Centro

Adicionar Seção # 2

Cor de fundo

Adicione a segunda seção regular à sua página, abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: # f7f7f7

Transbordar

Certifique-se de ocultar o estouro da seção na guia avançada também. Isso garantirá que nada ultrapasse o contêiner da seção.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Transições

Mais tarde nesta postagem, criaremos uma transição de foco. Para garantir que tudo corra bem, aumentaremos a duração da transição na guia avançada.

• Duração da transição: 800ms

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura do contêiner de seção aplicando as seguintes configurações:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H3

É hora de começar a adicionar módulos, começando com um Módulo de Texto. Insira algum conteúdo H3 de sua escolha.

Configurações de texto H3

Vá para a guia de design e altere as configurações de texto H3.

• Fonte do título 3: Playfair Display
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: # 000000
• Tamanho do texto do título 3: 3vw (desktop), 6vw (tablet), 7vw (telefone)

Adicionar Módulo Divisor à Coluna

Visibilidade

O segundo módulo de que precisamos nesta linha é um Módulo divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Altere também a cor da divisória.

• Cor da linha: # 000000

Espaçamento

E adicione alguma margem superior e inferior personalizada para criar espaço.

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

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

O próximo módulo de que precisamos é outro Módulo de Texto. Adicione algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto.

• Fonte do texto: Open Sans
• Alinhamento de Texto: Centro
• Cor do texto: # 777777
• Tamanho do texto: 0.8vw (desktop), 1.7vw (tablet), 2.2vw (telefone)
• Altura da linha de texto: 1.8em

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem esquerda: 3vw (desktop), 7vw (tablet), 10vw (telefone)
• Margem direita: 3vw (desktop), 7vw (tablet e telefone)

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O próximo e último módulo de que precisamos nesta linha é um Módulo de Botão. Insira alguma cópia de sua escolha.

Alinhamento

Altere o alinhamento do botão na guia de design.

• Alinhamento do botão: Centro

Configurações de botão

Continue definindo o estilo das configurações do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: # 000000
• Largura da borda do botão: 1 px
• Raio da borda do botão: 0 px
• Fonte do botão: Playfair Display

Espaçamento

E adicione alguns valores de espaçamento personalizados também.

• Margem superior: 2vw
• Enchimento superior: 1vw
• Preenchimento inferior: 1vw
• Preenchimento esquerdo: 3vw (desktop), 6vw (tablet), 8vw (telefone)
• Preenchimento direito: 3vw (desktop), 6vw (tablet), 8vw (telefone)

Configurações de seção adicionais

Divisor superior padrão

Quando terminar de adicionar todos os módulos à seção, é hora de passar por algumas configurações adicionais da seção. Abra as configurações da seção, vá para a guia de design e adicione o seguinte divisor superior:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: # e8e8e8
• Altura do divisor: 7000px
• Divider Flip: Vertical
• Disposição do divisor: no topo do conteúdo da seção

Hover Top Divider

Altere a altura do divisor ao pairar.

• Altura do divisor: 0 px

Divisória Inferior

Adicione também uma divisória inferior.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: # 5c26ff
• Altura do divisor: 600px
• Disposição do divisor: no topo do conteúdo da seção

Hover Bottom Divider

E remova a altura do divisor ao pairar.

• Altura do divisor: 0 px

Espaçamento

Como você pode notar na visualização deste post, estamos girando esta seção em um círculo. Para fazer isso, primeiro precisamos adicionar alguns valores de margem e preenchimento personalizados em diferentes tamanhos de tela:

• Margem esquerda: 10vw (desktop), 11vw (tablet), 0vw (telefone)
• Margem direita: 47vw (desktop), 11vw (tablet), 0vw (telefone)
• Preenchimento superior: 8vw (desktop), 15vw (tablet), 16vw (telefone)
• Preenchimento inferior: 8vw (desktop), 15vw (tablet), 16vw (telefone)

Fronteira

Continue adicionando '50vw' a cada um dos cantos para transformar a seção em um círculo. Também estamos adicionando uma borda usando as seguintes configurações:

• Largura da borda: 1px
• Cor da borda: rgba (255,255,255,0)

Hover Border

Altere a cor da borda ao pairar.

• Cor da borda: # 000000

Clonar seção duas vezes

Depois de concluir todas as configurações da seção, você pode clonar a seção duas vezes.

Modificar Duplicado # 1

Alterar a cor do divisor superior

Vamos modificar as duas duplicatas da seção, começando pela primeira. Abra as configurações da seção e altere a cor do divisor superior.

• Cor do divisor: # 5c26ff

Alterar a cor do divisor inferior

Modifique a cor do divisor inferior também.

• Cor do divisor: # ff3a5e

Alterar espaçamento

Em seguida, vá para as configurações de espaçamento e certifique-se de que os seguintes valores se aplicam:

• Margem superior: -20vw (desktop), 0vw (tablet e telefone)
• Margem esquerda: 47vw (desktop), 11vw (tablet), 0vw (telefone)
• Margem direita: 10vw (desktop), 11vw (tablet), 0vw (telefone)

Modificar Duplicado # 2

Alterar a cor do divisor superior

Abra as configurações da segunda duplicata e altere a cor do divisor superior.

• Cor do divisor: # ff3a5e

Alterar a cor do divisor inferior

Altere a cor do divisor inferior também.

• Cor do divisor: # e8e8e8

Alterar espaçamento

E modifique os valores de espaçamento aqui também.

• Margem superior: -20vw (desktop), 0vw (tablet e telefone)
• Margem inferior: 7vw
• Margem esquerda: 10vw (desktop), 11vw (tablet), 0vw (telefone)
• Margem direita: 47vw (desktop), 11vw (tablet), 0vw (telefone)

Antevisão

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

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como esconder elegantemente sua cópia abaixo dos divisores de seções. Esta é uma ótima maneira de usar algumas das opções integradas intuitivas do Divi de uma maneira diferente da que você está acostumado. Esperamos que este tutorial inspire você a criar seus próprios designs alternativos usando essa técnica também. Se você tiver dúvidas ou sugestões, deixe 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.