Como criar seções flutuantes com as novas configurações de dimensionamento e estouro da Divi

Usar as novas opções de dimensionamento arrastáveis ​​do Divi não só ajuda a criar sites altamente responsivos, mas também pode realmente ajudar a criar interações exclusivas. Ao brincar com essas opções, você pode personalizar qualquer site que estiver criando e personalizar as estruturas da página para atender às tendências de design atuais.

Neste tutorial, especificamente, mostraremos como criar seções de foco com Divi. Criaremos uma nova página e permitiremos que todos os títulos das seções sejam exibidos, mas cada seção só será aberta ao passar o mouse (desktop) ou ao clicar (móvel). Assim que você abrir outra seção, aquela que você abriu anteriormente será fechada automaticamente. Começaremos explicando a abordagem geral e continuaremos recriando o exemplo que você pode ver abaixo do zero. Esperamos que este tutorial o incentive a criar seus próprios designs de seção de foco também!

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 das Seções Hover GRATUITAMENTE

Para colocar suas mãos no layout das seções de navegação livre, 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!

Abordagem

Antes de mergulharmos no tutorial real, examinaremos a técnica usada para criar seções de foco. Você pode aplicar essa técnica a qualquer tipo de site que esteja construindo, com qualquer tipo de estilo de design.

1. Adicione a primeira seção à sua página

Vamos supor que você esteja iniciando um novo design em uma página totalmente nova. A primeira coisa que você precisa fazer é adicionar uma nova seção regular a ele.

2. Adicione uma nova linha que inclua um título de seção

Em seguida, você pode continuar adicionando uma nova linha com um Módulo de Texto que inclui o título da seção. Você também pode adicionar um módulo divisor e algo que indica que a linha se expande ao passar o mouse ou tocar (veja o exemplo na visualização deste post). É importante manter o título da seção separado do restante do conteúdo da seção, portanto, certifique-se de deixar espaço em branco suficiente entre o título da seção e o que vem a seguir.

3. Ajuste o restante do conteúdo da seção (adicione quantas linhas e módulos desejar)

Os elementos de design que seguem os títulos das seções dependem inteiramente de você. Você pode fazer a seção tão longa ou tão curta quanto quiser e fazer uso de qualquer tipo de estilo de design.

4. Modifique o padrão e passe o mouse sobre a altura máxima da seção

Depois de fazer o ajuste fino da seção e de todos os elementos de design nela, é hora de criar o efeito de foco. A altura padrão de sua seção destina-se a caber apenas no título da seção. Ao passar o mouse, a seção retomará seu tamanho inicial.

5. Ocultar o estouro vertical

Outra parte importante dessa técnica é ocultar o estouro vertical. Depois de definir uma altura máxima padrão para sua seção que seja menor do que a altura inicial da seção, um estouro será criado. Para garantir que o estouro não apareça, você terá que se certificar de que ele está oculto nas configurações de visibilidade da seção.

5. Repita as etapas para todas as seções da página

Repita as mesmas etapas para todas as seções de sua página para criar uma experiência de usuário óbvia que agrade aos visitantes.

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção

Cor de fundo padrão

Agora que examinamos a abordagem deste post, é hora de começar a colocar as coisas em ação! Adicione uma primeira seção regular a uma nova página em seu site WordPress e abra as configurações da seção. Altere a cor de fundo padrão de sua seção para uma cor de sua escolha.

• Cor de fundo: # 000000

Hover Background Color

Altere esta cor de fundo ao pairar.

• Cor de fundo: #ffffff

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando a primeira linha à sua seção usando a seguinte estrutura de colunas:

Adicionar Módulo de Texto

Adicionar conteúdo H2

Em seguida, adicione um Módulo de Texto à sua nova linha. Adicione alguma cópia H2 junto com o símbolo '▼' que indica que algo virá a seguir.

Configurações de texto H2

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

• Fonte do Título 2: Trebuchet
• Peso da fonte do cabeçalho 2: ultra negrito
• Alinhamento de Texto Título 2: Esquerda
• Cor do texto do título 2: # ff0f3b
• Tamanho do texto do título 2: 100 px (desktop), 80 px (tablet), 60 px (telefone)
• Cabeçalho 2 espaçamento entre letras: -5px

Adicionar Módulo Divisor

Visibilidade

O segundo e último módulo de que precisamos nesta linha é um Módulo Divisor. Certifique-se de habilitar a opção 'Mostrar divisor' nas configurações de visibilidade.

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor do divisor.

• Cor: # ff0f3b

Dimensionamento

Modifique as configurações de dimensionamento do módulo também.

• Peso do divisor: 2px
• Largura: 14%

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha! É aqui que você precisa colocar todo o conteúdo que deseja exibir após passar o mouse (desktop) ou clicar (tablet e celular). Estamos usando a seguinte estrutura de colunas, mas observe que você pode adicionar quantas linhas e módulos quiser e estilizá-los de acordo com suas necessidades:

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Coloque um Módulo de Texto na primeira coluna com algum conteúdo de sua escolha.

Configurações de texto

Vá para a guia de design do Módulo de Texto e altere a orientação do texto.

• Orientação do Texto: Justificar

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Adicione também um Módulo de Texto à segunda coluna com algum conteúdo de sua escolha.

Configurações de texto

Novamente, altere a orientação do texto nas configurações de texto do módulo.

• Orientação do Texto: Justificar

Adicionar configurações de dimensionamento à seção

Dimensionamento Padrão

Depois de concluir sua seção, é hora de fazer o efeito pairar acontecer. Abra as configurações da seção e altere a altura máxima em diferentes tamanhos de tela:

• Altura máxima: 300 px (desktop), 280 px (tablet), 260 px (telefone)

Hover Sizing

Habilite a opção de foco na altura máxima também e adicione um valor que seja alto o suficiente para cobrir todos os elementos em diferentes tamanhos de tela. Este valor garante que todos os seus elementos apareçam sem exceder o tamanho inicial do contêiner da seção.

• Altura máxima: 5000px

Estouro vertical

Em seguida, vá para a guia avançada da seção e altere o estouro vertical. Isso ocultará todo o conteúdo que excede o contêiner da seção.

• Estouro vertical: oculto

Transições

Para criar uma transição suave, também estamos alterando as configurações de transições na guia avançada.

• Duração da transição: 800ms
• Atraso de transição: 500ms

Clone a seção inteira quantas vezes desejar

Depois de criar a primeira seção de foco, você pode cloná-la quantas vezes quiser.

Alterar títulos de seção

Obviamente, você desejará alterar os títulos das seções das duplicatas.

Alterar cores de texto H2

Para criar alguma variação no design, também alteraremos as cores do texto dos módulos destacados na tela de impressão abaixo.

• Cor do texto do título 2: # c4c4c4

Alterar as cores do divisor

Junto com as cores divisórias que acompanham os Módulos de Texto.

• Cor: # c4c4c4

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 usar criativamente as novas opções de tamanho arrastável do Divi para criar interações exclusivas, usando seções de foco, em qualquer site que você estiver criando. Começamos explicando a abordagem e continuamos recriando o exemplo de design do zero. Você também pode baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, certifique-se de deixar 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.