Como criar títulos de seção aderentes com Divi

A maneira como você projeta suas páginas é um reflexo direto de sua marca. É por isso que, em algum ponto do seu brainstorm de design, você pode querer encontrar e adicionar elementos de design exclusivos ao seu site que ajudarão a gerar um padrão em todas as páginas. Uma maneira única de destacar a identidade do seu site é usar títulos de seção adesiva. Esses títulos de seção aderentes seguirão o comportamento de navegação dos visitantes, aderindo à parte superior do navegador. Neste tutorial, mostraremos como criar títulos de seção adesiva usando as opções adesivas do Divi. Os títulos das seções fixas serão menos enfatizados quando os visitantes estiverem fazendo a rolagem, mas serão visíveis o suficiente para que eles reconheçam a seção em que estão. Você também poderá baixar o arquivo JSON 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 suas mãos no layout gratuito, primeiro você precisa baixá-los 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!

Inscreva-se no nosso canal no Youtube

1. Criar Projeto de Seção

Adicionar nova seção

Espaçamento

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações de seção e aplique algum preenchimento superior e inferior.

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Adicionar linha # 1

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 modifique as configurações de dimensionamento da seguinte forma:

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

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

Agora, adicione um Módulo de Texto à coluna da linha e insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Vá para a guia de design do módulo e modifique as configurações de texto H2 da seguinte forma:

• Fonte do título 2: Poppins
• Cabeçalho 2 Peso da fonte: Semi negrito
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2:
  • Desktop: 20vw
  • Tablet e telefone: 28vw

Adicionar linha # 2

Estrutura da Coluna

Adicione outra linha logo abaixo da anterior usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento de acordo:

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

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Em seguida, adicione um primeiro Módulo de texto à coluna 2 com algum conteúdo descritivo de sua escolha.

Configurações de texto

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

• Fonte do texto: Poppins
• Cor do texto: # 000000
• Tamanho do texto:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefone: 5vw
• Espaçamento entre letras do texto: -0,1vw
• Altura da linha de texto: 1,6em

Dimensionamento

Modifique as configurações de dimensionamento em diferentes tamanhos de tela também.

• Largura:
  • Desktop: 70%
  • Tablet e telefone: 90%
• Alinhamento do Módulo: Centro

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

Passe para o próximo módulo, que é um Módulo de Imagem. Faça upload de uma imagem de sua escolha.

Dimensionamento

Vá para a guia de design do módulo e force a largura total da imagem.

• Forçar largura total: Sim

Espaçamento

Adicione alguma margem superior também.

• Margem superior: 100px

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

Em seguida, temos um Módulo de botão. Adicione alguma cópia de sua escolha.

Configurações de botão

Altere as configurações do botão do módulo de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão:
  • Desktop: 1.5vw
  • Tablet: 2,5vw
  • Telefone: 3,5vw
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # f6223e
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px

• Fonte do botão: Poppins
• Mostrar ícone do botão: Sim
• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: Não

Espaçamento

E conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Enchimento superior:
  • Desktop e tablet: 3%
  • Telefone: 5%
• Preenchimento inferior:
  • Desktop e tablet: 3%
  • Telefone: 5%
• Preenchimento esquerdo:
  • Desktop: 5vw
  • Tablet: 8vw
  • Telefone: 12vw
• Preenchimento direito:
  • Desktop: 5vw
  • Tablet: 8vw
  • Telefone: 12vw

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo da lista de marcadores

O próximo e último módulo que adicionaremos a esta coluna é outro Módulo de Texto. Adicione os itens da lista de sua escolha à caixa de conteúdo.

Configurações de texto

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

• Fonte do texto: Poppins
• Cor do texto: # 000000
• Tamanho do texto:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefone: 5vw
• Espaçamento entre letras do texto: -0,1vw
• Altura da linha de texto: 1,6em

Configurações de texto da lista ordenada

Faça algumas alterações nas configurações de texto da lista ordenada também.

• Cor do texto da lista ordenada: # ff2340
• Altura da linha da lista ordenada: 1,6em
• Tipo de estilo de lista ordenada: romano superior
• Posição do estilo da lista ordenada: Fora

Adicionar cor preta do texto aos itens da lista individualmente na caixa de conteúdo

Em seguida, transformaremos os itens novamente em preto navegando até a caixa de conteúdo e adicionando manualmente uma cor de texto preta a cada um dos itens da lista.

Dimensionamento

A seguir, alteraremos as configurações de dimensionamento em diferentes tamanhos de tela.

• Largura:
  • Desktop: 70%
  • Tablet e telefone: 90%
• Alinhamento do Módulo: Centro

Espaçamento

Aplicaremos alguns valores de margem e preenchimento personalizados às configurações de espaçamento do módulo também.

• Margem superior: 50px
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

2. Aplicar efeito aderente ao título da seção

Adicionar efeito pegajoso à linha

Agora que configuramos a base do nosso design, é hora de fazer acontecer o efeito que você pôde ver na prévia deste post. Para fazer isso, vamos deixar toda a nossa primeira linha fixa, abrindo as configurações de linha, indo para a guia avançada e aplicando as seguintes configurações:

• Posição pegajosa: grudar no topo
• Limite inferior de aderência: seção
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos

Modificar Índice da Linha Z

Para garantir que a linha aderente permaneça abaixo da segunda linha em nosso design, atribuiremos um índice az de “1” à nossa linha aderente. Ao rolar, você verá a linha pegajosa e seu Módulo de texto ficar abaixo dos módulos da segunda linha.

• Índice Z: 1

Adicionar modo de mesclagem da coluna 2 (linha # 2)

No entanto, como você pode notar na visualização desta postagem, o título da seção fixa está visível o tempo todo. Para obter esse efeito, adicionaremos um módulo de mesclagem à segunda coluna de nossa segunda linha. Isso ajudará a misturar a linha fixa e os módulos na segunda linha, enquanto ainda mantém um índice z baixo para a linha fixa.

• Modo de mistura: Multiplicar

Alterar configurações de texto H2 aderente

Aplicaremos alguns estilos fixos ao nosso Módulo de texto na linha # 1 também. Comece alterando a cor do texto H2 em um estado fixo e aplique uma sombra de texto personalizada também.

• Cor do texto H2 aderente: #ffffff
• Sombra do texto do título 2: segunda opção (consulte a tela de impressão abaixo)
• Cor da sombra do texto do título 2:
  • Padrão: rgba (0,0,0,0)
  • Pegajoso: rgba (0,0,0,0,08)

Alterar espaçamento do módulo de texto fixo

Iremos mudar a posição do módulo também usando alguma margem esquerda adesiva negativa nas configurações de espaçamento

• Margem esquerda aderente: -35%

Aumentar a duração da transição do módulo de texto

E para garantir uma transição suave, aumentaremos a duração da transição na guia avançada.

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

3. Seção de Reutilização

Seção Clone

Agora que temos uma seção concluída, incluindo o título da seção pegajosa, podemos reutilizar a seção inteira quantas vezes quisermos, clonando-a.

Alterar o conteúdo do título

Certifique-se de alterar o conteúdo do título na primeira linha.

Corresponder o tamanho do texto ao comprimento do caractere

Dependendo de quantos caracteres seu novo título H2 possui, você pode querer ajustar o tamanho do texto do título 2.

Alterar todos os outros conteúdos e imagens

E, claro, você também precisará alterar todos os outros conteúdos na seção duplicada. É isso!

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 ser criativo com as opções pegajosas do Divi. Mais especificamente, mostramos como criar títulos de seção fixos que seguem seus visitantes ao longo do design que você está criando. Este efeito dá ao seu design uma dimensão extra e uma transição perfeita. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para 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.