Como equilibrar os botões primário e secundário em seu módulo de cabeçalho Divi Fullwidth

Publicados: 2022-10-26

O módulo Divi Fullwidth Header facilita a adição de belas seções de heróis ao seu site. O módulo vem com dois botões, um texto de título, texto de legenda, corpo de texto, um logotipo e uma imagem, tornando as opções de personalização infinitas.

No post de hoje, vamos demonstrar como recriar seções de heróis usando o Divi Fullwidth Header. Começaremos nosso design usando 3 pacotes de layout pré-fabricados e projetaremos nossas seções com foco no equilíbrio dos botões primário e secundário. Queremos que o botão principal se destaque, pois é nosso principal apelo à ação, mantendo o botão secundário visível e acessível sem ultrapassar o botão principal.

Princípios de design de botões primários e secundários

Botões primários e botões secundários ajudam a orientar os visitantes do seu site para determinadas ações. Os botões primários são normalmente a ação mais comum ou desejada e os botões secundários são uma ação menos comum. Isso ajuda a guiar os visitantes para onde eles querem ir.

Para conseguir isso, os botões primários devem se destacar visualmente e os botões secundários não devem se destacar tanto. Isso significa que os botões primários devem ser mais distintos e ter mais peso visual para atrair mais atenção.

Agora que entendemos como os botões primários e secundários funcionam, vamos ao tutorial!

Visualização do projeto

Aqui está uma olhada nos três cabeçalhos de largura total que projetaremos hoje.

Cabeçalho de largura total de UX

Cabeçalho de largura total do centro de aposentadoria Divi

Cabeçalho de largura total de planejamento financeiro

Baixe os Layouts GRATUITAMENTE

Para colocar as mãos nos designs deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para ter acesso ao download, você precisará assinar nossa newsletter usando o formulário abaixo. Como novo assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será “subscrito novamente” ou receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao Boletim Divi e nós lhe enviaremos por e-mail uma cópia do pacote de layout de página de destino Divi, além de muitos outros recursos, dicas e truques incríveis e gratuitos do Divi. Acompanhe e você será um mestre Divi em pouco tempo. Se você já é inscrito, basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Verifique seu endereço de e-mail para confirmar sua assinatura e ter acesso a pacotes de layout Divi semanais gratuitos!

Para importar o modelo de cabeçalho para sua biblioteca Divi, faça o seguinte:

  1. Navegue até o Divi Theme Builder.
  2. Clique no botão Importar no canto superior direito da página.
  3. No pop-up de portabilidade, selecione a guia de importação
  4. Escolha o arquivo de download do seu computador (certifique-se de descompactar o arquivo primeiro e usar o arquivo JSON).
  5. Em seguida, clique no botão importar.

Uma vez feito, o layout da seção estará disponível no Divi Builder.

Vamos ao tutorial?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

  1. Instale o Divi no seu site WordPress.
  2. Adicione uma Página e dê um título a ela.
  3. Ativar o Visual Builder

Etapas de design de cabeçalho de largura total UX

Agora que temos nossa página configurada, vamos começar com o cabeçalho de largura total para uma página de destino UX.

Configurando nossa página

Antes de começarmos a estilizar, precisaremos carregar o pacote de layout pré-fabricado UX gratuito da Biblioteca Divi. Ao habilitar o Visual Builder, você verá três opções pop-up, selecione Escolher um layout pré-fabricado.

Carregar pacote de layout

Para carregar o pacote de layout UX em sua página:

  1. Na aba “Premade Layouts” use a função de busca para encontrar o pacote de layout UX.
  2. Depois de encontrá-lo, clique nele. Isso exibirá os detalhes do layout e as páginas disponíveis.
  3. Clique no design da página de destino e clique em “Usar este layout”.

Estaremos recriando a seção superior do layout como um módulo de cabeçalho de largura total.

Excluir primeira seção

Como vamos recriar a primeira seção usando o módulo Fullwidth Header, precisaremos excluir esta seção. Passe o mouse sobre a seção e clique no ícone da lixeira.

Adicionar seção de largura total

Antes de podermos adicionar o cabeçalho de largura total, precisamos adicionar uma seção de largura total.

Clique na seta “+” para abrir as seções Divi e clique em “fullwidth”. Isso abrirá automaticamente a biblioteca do Divi Fullwidth Module.

Adicionar cabeçalho de largura total

Dentro da Biblioteca de Módulos Divi Fullwidth, clique em “Fullwidth Header”.

Adicionando conteúdo

Antes de começarmos a estilizar o módulo, vamos adicionar o conteúdo necessário para este módulo.

Adicionar conteúdo de texto

Abaixo da guia Texto, adicione o seguinte conteúdo:

  1. Título: Melhore seu conhecimento de design de UX
  2. Legenda: Curso de UX Design
  3. Botão nº 1: Visão geral do curso
  4. Botão nº 2: Saiba mais
  5. Corpo: texto do espaço reservado

Adicione imagens

Agora que temos nosso conteúdo de texto no lugar, precisamos adicionar duas imagens ao nosso design.

  1. Na guia Imagens, adicione a imagem do logotipo (as estrelas) e a imagem do cabeçalho (a foto da pessoa segurando um telefone).

Alterar cor de fundo

Na guia Background, defina esta configuração:

  1. Cor de fundo: #131517

Estilizando o cabeçalho de largura total

Agora que temos nosso conteúdo configurado, vamos adicionar alguns estilos a ele por meio da guia Design.

Ícone de rolagem para baixo

Vamos adicionar o ícone de rolagem para baixo, a seta para baixo.

  1. Este design usa um ícone de rolagem para baixo, então alterne esta opção para sim.
  2. Selecione o ícone de seta para baixo e defina a cor do ícone para branco.

Imagem

Vamos adicionar curvas às nossas imagens arredondando os cantos.

Na guia imagem, defina as seguintes configurações:

  1. Cantos arredondados da imagem : Clique no botão chainlink para desvincular os cantos e digite 1000px nas caixas de entrada inferior esquerda e inferior direita. Isso arredondará os cantos inferior esquerdo e inferior direito de nossas imagens.

Texto do título

Aqui vamos estilizar o texto do título para este módulo. Na guia Texto do título, defina estas configurações:

  1. Fonte do título: PT Sans
  2. Peso da fonte do título: Negrito
  3. Tamanho do texto do título: 5rem
  4. Altura da linha de título: 1,2 em

Texto de corpo

É aqui que estilizamos o texto do corpo deste módulo. Na guia Corpo do texto, defina estas configurações:

  1. Fonte do corpo: Mukta
  2. Tamanho do corpo do texto: 18px

Texto da legenda

É aqui que estilizamos o texto da legenda para este módulo. Na guia Texto da legenda, defina estas configurações:

  1. Fonte da legenda: Mukta
  2. Peso da fonte da legenda: negrito
  3. Estilo da fonte da legenda: maiúscula
  4. Cor do Texto da Legenda: #13d678
  5. Espaçamento das letras das legendas: 3px

Botão Um

É aqui que podemos definir estilos personalizados para o botão um, o botão principal. Na guia Button One, defina estas configurações:

  1. Usar estilos personalizados para o botão um: Sim
  2. Botão de uma cor: #ffffff
  3. Fundo do Botão Um: #13d678
  4. Largura de uma borda do botão: 0px
  5. Raio de uma borda do botão: 100px
  6. Fonte do botão um: Mukta
  7. Botão Um Peso da Fonte: Negrito
  8. Mostrar ícone do botão um: sim
  9. Ícone do botão um: seta para a direita
  10. Mostrar ícone apenas ao passar o mouse para o botão um: não

Botão Dois

Agora vamos estilizar o botão secundário, o segundo botão. Na guia Botão Dois, defina estas configurações:

  1. Usar estilos personalizados para o botão um: sim
  2. Botão de uma cor: #ffffff
  3. Fundo do Botão Um: #303030
  4. Largura de uma borda do botão: 0px
  5. Raio de uma borda do botão: 100px
  6. Fonte do botão um: Mukta
  7. Botão Um Peso da Fonte: Negrito
  8. Mostrar ícone do botão um: sim
  9. Ícone do botão um: seta para a direita
  10. Mostrar ícone apenas ao passar o mouse para o botão um: sim

Adicionar links de botão

Não se esqueça de adicionar links aos seus botões! Na guia Link, defina as seguintes configurações:

  1. URL do link do botão #1: cole o URL do botão um aqui.
  2. Botão #2 URL do link: Cole o URL do botão dois aqui.

Salve seu projeto

Agora que temos nosso cabeçalho de largura total totalmente projetado, salve seu design!

  1. Clique na seta verde no canto inferior direito da janela do módulo.
  2. Em seguida, clique no ícone salvar na barra de ferramentas do Divi para salvar o design da sua página.
  3. Saia do Visual Builder.

Divirta-se experimentando

As maneiras de estilizar o módulo Divi Fullwidth Header são infinitas. Aproveitar o botão principal e o botão secundário pode ajudar a direcionar seus visitantes para a página que você deseja que eles visualizem ou executem a ação (como enviar uma consulta) que você deseja que eles executem.

Vamos dar uma olhada em dois outros exemplos de Fullwidth Header que possuem um botão primário que se destaca.

Cabeçalho de largura total do centro de aposentadoria Divi

Estilos de botões

Vejamos os estilos exclusivos dos botões primário e secundário.

Botão Um

Na guia Button One, defina as seguintes configurações:

  1. Usar estilos personalizados para o botão um: Sim
  2. Botão Um Tamanho do Texto: 14px
  3. Botão de uma cor: #ffffff
  4. Fundo do Botão Um: #0a0a0a
  5. Largura de uma borda do botão: 0px
  6. Raio de uma borda do botão: 10px
  7. Botão Um Peso da Fonte: Negrito

Botão Dois

Na guia Botão Dois, defina as seguintes configurações:

  1. Usar estilos personalizados para o botão um: Sim
  2. Botão Um Tamanho do Texto: 14px
  3. Botão de uma cor: #ffffff
  4. Fundo do Botão Um: #0a0a0a
  5. Largura de uma borda do botão: 0px
  6. Raio de uma borda do botão: 10px
  7. Botão Um Peso da Fonte: Negrito

E aí está! Dois botões exclusivos, um que se destaca e outro que ocupa o segundo assento.

Cabeçalho de largura total de planejamento financeiro

Estilos de botões

Vejamos os estilos exclusivos para os botões primários e secundários.

Botão Um

Na guia Button One, defina as seguintes configurações:

  1. Usar estilos personalizados para o botão um: Sim
  2. Botão Um Tamanho do Texto: 18px
  3. Cor do Texto do Botão Um: #ffffff
  4. Cor de fundo do botão um: #1b4ffe
  5. Preenchimento de um botão: 15px superior e inferior; 25px Esquerda e Direita

Botão Dois

Na guia Botão Dois, defina as seguintes configurações:

  1. Usar estilos personalizados para o botão dois: sim
  2. Cor do Texto do Botão Dois: #1b4ffe
  3. Botão Dois Cor de Fundo: Transparente
  4. Cor do ícone do botão dois: #1b4ffe

Pensamentos finais

O Divi Fullwidth Header facilita a criação de seções de heróis impressionantes em seu site. O uso estratégico dos botões primário e secundário melhorará a experiência do usuário e ajudará os visitantes do site a realizar as ações que desejam. As opções de personalização são infinitas com o Fullwidth Header, então divirta-se experimentando!