Como adicionar uma barra inferior com posição absoluta à seção do seu herói com Divi

A maneira como você estrutura os elementos dentro de sua seção de herói pode ser complicada às vezes. Você quer ter um bom equilíbrio, sem ter que reduzir drasticamente a quantidade de conteúdo que deseja compartilhar. Felizmente, algumas abordagens simplificadas provaram seu valor em toda a web. Uma dessas abordagens é adicionar uma barra inferior com posição absoluta à sua seção de herói. Além de ter uma boa aparência em termos de design, também ajuda a adicionar várias chamadas à ação sem desequilibrar o design.

Neste tutorial, mostraremos como adicionar uma barra inferior com posição absoluta à seção do herói dentro do Divi. A barra inferior que adicionaremos conterá quatro partes; três botões e um formulário de contato. 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 da seção do herói da barra inferior com posição absoluta GRATUITAMENTE

Para colocar suas mãos no layout da seção de herói 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!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção

Fundo Gradiente

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e aplique um fundo gradiente.

• Cor 1: rgba (0,0,0,0.62)
• Cor 2: rgba (0,0,0,0.97)
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Faça upload de uma imagem de plano de fundo de sua escolha a seguir.

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Transbordamentos

Estamos escondendo os estouros da seção também.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique alguma margem superior e inferior.

• Margem superior: 20%
• Margem inferior: 20%

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H1

É hora de adicionar módulos, começando com um primeiro Módulo de Texto contendo algum conteúdo H1 de sua escolha.

Configurações de texto H1

Vá para a guia de design do módulo e estilize o texto H1 da seguinte maneira:

• Fonte do cabeçalho: Work Sans
• Cor do texto do título: #ffffff
• Tamanho do texto do título:
  • Desktop: 80px
  • Tablet: 50px
  • Telefone: 40px
• Espaçamento entre letras do cabeçalho:
  • Desktop: -4px
  • Tablet e telefone: -2px

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

Adicione outro Módulo de Texto logo abaixo do anterior e inclua algum conteúdo descritivo de sua escolha.

Configurações de texto

Modifique as configurações de texto do módulo de acordo:

• Fonte do texto: Open Sans
• Cor do texto: # a0a0a0

Dimensionamento

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

• Largura:
  • Desktop: 68%
  • Tablet e telefone: 100%

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O último módulo de que precisamos nesta linha é um Módulo de botão. Inclua alguma cópia de sua escolha.

Adicionar Link

Adicione um link de botão.

• URL do link do botão: #

Configurações de botão

Vá para a guia de design do módulo e estilize o botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px

• Fonte do botão: Work Sans
• Mostrar ícone do botão: Sim
• Posicionamento do ícone do botão: Esquerda

Adicionar linha # 2

Estrutura da Coluna

É hora de criar nossa barra de seção inferior do herói! Para fazer isso, adicionaremos uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e modifique as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura:
  • Desktop: 100%
  • Tablet e telefone: 80%
• Largura máxima: 2560px

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

Inclua também uma sombra de caixa.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: 50px
• Cor da sombra: rgba (135,135,135,0,08)

Posição

Em seguida, vá para a guia avançada e reposicione toda a linha na área de trabalho. Traga de volta ao padrão em tamanhos de tela menores. As configurações de posição desta linha garantirão que a linha grude na parte inferior do contêiner de seção.

• Posição:
  • Desktop: Absoluto
  • Tablet e telefone: padrão
• Localização: Centro Inferior

Configurações da coluna 1

Espaçamento

Continue abrindo as configurações da coluna 1 e aplique alguns valores de preenchimento personalizados.

• Enchimento superior: 3%
• Estofamento inferior: 3%
• Preenchimento esquerdo: 3%
• Preenchimento direito: 3%

Fronteira

Estamos usando algumas configurações de borda responsivas para esta coluna também.

• Borda superior:
  • Largura da borda superior: 5 px
  • Cor da borda superior:
    • Padrão: rgba (255,255,255,0)
    • Passe o mouse: #ffffff
• Borda inferior:
  • Largura da borda inferior:
    • Desktop e tablet: 0px
    • Telefone: 3px
  • Cor da borda inferior: rgba (255,255,255,0,11)
• Borda Esquerda:
  • Largura da borda esquerda:
    • Desktop: 0px
    • Tablet: 3px
    • Telefone: 0px
  • Cor da borda esquerda: rgba (255,255,255,0,11)

Configurações da coluna 2

Espaçamento

Vá para as configurações da segunda coluna. Adicione alguns valores de preenchimento às configurações de espaçamento.

• Enchimento superior: 3%
• Estofamento inferior: 3%
• Preenchimento esquerdo: 3%
• Preenchimento direito: 3%

Fronteira

E inclua as seguintes bordas responsivas:

• Borda superior:
  • Largura da borda superior: 5 px
  • Cor da borda superior:
    • Padrão: rgba (255,255,255,0)
    • Passe o mouse: #ffffff
• Borda inferior:
  • Largura da borda inferior:
    • Desktop e tablet: 0px
    • Telefone: 3px
  • Cor da borda inferior: rgba (255,255,255,0,11)
• Borda Esquerda:
  • Largura da borda esquerda:
    • Desktop: 3px
    • Tablet: 3px
    • Telefone: 0px
  • Cor da borda esquerda: rgba (255,255,255,0,11)

Configurações da coluna 3

Espaçamento

A terceira coluna também precisa de valores de preenchimento personalizados.

• Enchimento superior: 3%
• Estofamento inferior: 3%
• Preenchimento esquerdo: 3%
• Preenchimento direito: 3%

Fronteira

Junto com as seguintes configurações de borda:

• Borda superior:
  • Largura da borda superior: 5 px
  • Cor da borda superior:
    • Padrão: rgba (255,255,255,0)
    • Passe o mouse: #ffffff
• Borda Esquerda:
  • Largura da borda esquerda:
    • Desktop: 3px
    • Tablet: 3px
    • Telefone: 0px
  • Cor da borda esquerda: rgba (255,255,255,0,11)

Configurações da coluna 4

Cor de fundo

Vamos para a última coluna. Adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Espaçamento

Aplique alguns valores de preenchimento responsivo personalizado.

• Top Padding
  • Desktop: 3%
  • Tablet: 3%
  • Telefone: 10%
• Preenchimento inferior:
  • Desktop: 3%
  • Tablet: 3%
  • Telefone: 10%
• Preenchimento esquerdo:
  • Desktop: 3%
  • Tablet: 5%
  • Telefone: 10%
• Preenchimento direito:
  • Desktop: 3%
  • Tablet: 5%
  • Telefone: 10%

Posição

E reposicione toda a coluna na área de trabalho. Isso tornará o tamanho da coluna absoluto e irá deixá-la ficar na parte inferior da linha.

• Posição:
  • Desktop: Absoluto
  • Tablet e telefone: padrão
• Localização: Inferior Direito

Clonar Módulo de Botão na Linha Anterior e Colocar Duplicado na Coluna 1 da Nova Linha

Depois de concluir as configurações de linha e coluna, é hora de começar a adicionar módulos. Estamos reutilizando o Módulo de Botão que faz parte da linha anterior. Clone o módulo e coloque sua duplicata na primeira coluna da nova linha.

Alterar o alinhamento do botão

Abra a duplicata do Button Module e altere o alinhamento.

• Alinhamento do botão: Centro

Alterar cópia e links

Modifique a cópia e o link do módulo a seguir.

Botão Clonar na Coluna 1 Duas Vezes e Colocar Duplicados nas Colunas 2 e 3

Depois de modificar as configurações do Módulo de botão na coluna 1, você pode clonar o módulo inteiro duas vezes e colocar as duplicatas nas colunas 2 e 3.

Alterar cópia e links

Altere a cópia e os links de cada duplicata.

Adicionar Módulo de Texto à Coluna 4

Adicionar conteúdo H2

Vá para a última coluna da linha. Lá, o primeiro módulo de que precisaremos é um Módulo de texto com algum conteúdo H2.

Configurações de texto H2

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

• Fonte do Título 2: Work Sans
• Cor do texto do título 2: # 000000
• Cabeçalho 2 espaçamento entre letras: -2 px

Espaçamento

Adicione alguma margem inferior também.

• Margem inferior: 10%

Adicionar Módulo de Formulário de Contato à Coluna 4

Tornar os campos de largura total

Em seguida, adicione um Módulo de formulário de contato logo abaixo do Módulo de texto. Abra os campos de nome e endereço de e-mail individualmente e habilite a opção “Make Fullwidth” para ambos.

• Faça largura total: Sim

Configurações de campos

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

• Cor de fundo dos campos: #ffffff
• Cor do texto dos campos: # 000000
• Preenchimento superior dos campos: 4%
• Preenchimento inferior dos campos: 4%
• Fonte dos Campos: Work Sans
• Tamanho do texto dos campos: 13px

Configurações de texto captcha

Em seguida, faça algumas alterações nas configurações de texto do captcha.

• Fonte Captcha: Work Sans
• Cor do texto captcha: # 000000

Configurações de botão

Também estamos estilizando o botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 17 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 000000
• Largura da borda do botão: 0 px

• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: -1px
• Fonte do botão: Work Sans

Fronteira

E por último, mas não menos importante, incluiremos uma largura da borda inferior. É isso!

• Largura da borda inferior das entradas: 1 px
• Cor da borda inferior das entradas: #dddddd

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 sua seção de heróis dentro do Divi. Mais especificamente, mostramos como incluir e projetar uma barra inferior com posição absoluta. Usar uma barra inferior o ajudará a compartilhar mais conteúdo dentro de sua seção de herói, sem se tornar muito opressor. Usando essa técnica, você pode criar qualquer tipo de design e ter vários CTAs acontecendo! 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.