Como criar uma navegação vertical com Divi que impulsiona os negócios

No tutorial Divi de hoje, mostraremos como criar uma navegação vertical que direcione os negócios para o seu site. A navegação vertical que mostraremos como fazer normalmente será usada por empresas que acham importante que os visitantes ajam imediatamente. Por exemplo, se você possui um restaurante que permite que os clientes façam pedidos online, convém que seu site ajude os visitantes a agirem rapidamente.

A navegação vertical que mostraremos como fazer conterá informações importantes e frases de chamariz em vez de páginas. Incluir estes na navegação vertical vai estimular os visitantes a fazerem pedidos e, assim, aumentar a taxa de conversão do site.

Resultado

Antes de mergulhar nas diferentes etapas e na inspiração, vamos dar uma olhada no resultado da navegação vertical que você poderá obter no final deste post:

Além de mostrar como adicionar todos os diferentes itens de menu à navegação vertical, também usaremos a navegação fixa. Dessa forma, você tem certeza de que as informações seguem os visitantes durante todo o período de uma página.

Inspiração

A inspiração que tivemos para isso na navegação vertical que impulsiona os negócios vem de um site que mostramos em um post anterior. Nessa postagem, listamos 12 sites que usam a navegação vertical para os propósitos de seus próprios sites. Um dos exemplos que chamou a atenção das pessoas foi o site Eat Thai Restaurant. Sua navegação vertical é um desses conceitos out-of-the-box. O site deles tem uma página, mas eles encontraram uma maneira legal de usar as possibilidades de navegação. O site deles é parecido com este:

Como criar uma navegação vertical com Divi que impulsiona os negócios

Inscreva-se no nosso canal no Youtube

Habilitar navegação vertical

Para começar, teremos que ativar a opção de navegação vertical que Divi oferece. Para fazer isso, vá para o Painel do WordPress> Aparência> Cabeçalho e navegação> Formato do cabeçalho> Habilitar navegação vertical.

Habilitar navegação fixa

A navegação vertical que estamos recriando, como o site do Eat Thai Restaurant, será corrigida. Para tornar sua navegação vertical fixa, vá para o Painel do WordPress> Divi> Opções de tema> guia Geral> Habilitar navegação fixa.

Configurações do menu principal (personalizador de tema)

A próxima coisa que você precisa fazer é fazer algumas alterações em seu Menu Principal. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> Cabeçalho e navegação> Barra de menu principal . Assim que estiver lá, você pode fazer as seguintes alterações nele (ou quaisquer outras alterações que deseja fazer):

• Ocultar imagem do logotipo: Desativar
• Altura máxima do logotipo: 100
• Margem superior do menu: 0
• Tamanho do texto: 14
• Espaçamento entre letras: -1
• Fonte: Lato Light
• Cor do texto: #FFFFFF
• Cor do link ativo: #FFFFFF
• Cor de fundo: # 004159
• Cor de fundo do menu suspenso: # 004159

Configurações fixas do menu de navegação (personalizador de tema)

A última coisa que precisaremos fazer no Theme Customizer é garantir que o logotipo apareça durante a rolagem também. Se você ainda estiver no Customizador de tema, vá para Cabeçalho e navegação> Configurações de navegação fixas> e certifique-se de que a opção 'Ocultar logotipo' esteja desabilitada.

Adicionar itens do menu

Continuando, vamos adicionar os itens de menu à nossa navegação vertical. Esta parte da postagem provavelmente ocupará a maior parte do seu tempo. Você deve adicionar cada um dos itens individualmente por meio de links personalizados.

Ativar classes CSS

Mas antes de começarmos a adicionar os itens de menu, você terá que se certificar de que a opção Classes CSS está habilitada. Esta opção permite que você atribua uma classe a cada um dos itens do menu individualmente. Nesse caso, isso é necessário, pois a maioria dos itens terá suas próprias configurações de estilo. Para habilitar a opção CSS Classes, clique em 'Screen Options' no canto superior direito da página Menu e habilite a opção CSS Classes conforme mostrado na captura de tela abaixo.

Adicionar Novo Menu

Depois de ativar as classes CSS para seus itens de menu, você pode prosseguir e criar um novo menu. Dê a ele um nome e certifique-se de tornar este novo menu o seu menu principal.

Depois de adicionar todos os itens de menu (que mostraremos passo a passo), seu menu ficará assim no backend:

Número de telefone

Como se trata de uma página única, não haverá nenhuma página incluída no menu. Todos os itens que adicionaremos ao menu serão, em vez disso, links personalizados. Isso nos dá a possibilidade de brincar com as coisas que queremos adicionar.

Para adicionar seu primeiro item de menu, clique em Links personalizados e adicione o número de telefone no campo Etiqueta de navegação. Você pode escolher se deseja adicionar um URL a ele ou não. No entanto, ao adicionar o item de menu ao seu menu, você terá que preencher um URL. Depois que o item de menu for adicionado ao seu menu, você pode apagar o URL e terá a certeza de que nada acontecerá quando alguém clicar no item de menu.

Depois de adicionar o item de menu ao seu menu, você também verá a classe CSS aparecer. É aí que você terá que decidir sobre uma classe CSS que modificará o estilo do item de menu. Nesse caso, estamos usando a classe 'número de telefone'. Se você deseja apenas copiar e colar as linhas do código CSS no final deste post, certifique-se de usar as classes CSS mencionadas nestas etapas.

Endereço

Da mesma forma, vamos adicionar o endereço. Preencha o endereço no rótulo de navegação e adicione um URL, se desejar. A classe que estamos usando para o item de menu de endereço é simplesmente 'endereço'.

Ícones Sociais

Adicionar os ícones sociais à sua navegação vertical requer um pouco mais de esforço. Em um post anterior, lidamos explicitamente com a adição de ícones sociais ao seu menu principal. Porém, neste caso, o método será um pouco diferente, pois teremos que alinhar os ícones um ao lado do outro na navegação vertical.

Adicionar fonte incrível

A primeira coisa que você precisa fazer, se ainda não o fez, é adicionar Font Awesome às suas opções de tema. Para fazer isso, vá para o painel do WordPress> Divi> Opções de tema> Integração> e cole o seguinte código de acesso no cabeçalho do seu site:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Obtenha códigos curtos

Para obter os códigos de acesso aos ícones sociais; abra esta página no site do Font Awesome. No campo de pesquisa que você verá nessa página, pesquise os diferentes ícones que deseja adicionar à sua navegação vertical.

Depois de clicar no ícone, você verá o código de acesso vinculado ao ícone. Salve cada um desses códigos de acesso em algum lugar.

Adicionar ícones sociais ao menu

Continuando, vamos adicionar os ícones sociais. Normalmente, você pode adicionar cada um dos ícones sociais individualmente como itens de menu. Mas como queremos que eles apareçam um ao lado do outro, teremos que colocá-los no mesmo item de menu. O código HTML que você precisará adicionar ao rótulo de navegação é o seguinte:

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

Não se esqueça de adicionar um URL a cada um dos ícones. A classe que estamos usando para todos os três ícones sociais combinados é 'icon-wrapper', mas também atribuímos uma classe extra a cada um dos ícones sociais para fazer ajustes individuais. Você pode notar essas classes logo após a classe Font Awesome. Eles são chamados de 'facebook', 'instagram' e 'envelope'.

instruções

Para o próximo item do menu, usamos a palavra 'direções' como o nome da classe CSS.

Linha

Para adicionar uma linha logo abaixo das direções, temos que adicionar um caractere em branco na Navegação do rótulo. Isso porque o WordPress não permite que você crie um item de menu sem ter um rótulo vinculado a ele. Para adicionar um caractere em branco ao seu item de menu de linha, basta adicionar '& nbsp;' ao rótulo de navegação. Além disso, também adicione 'linha' como o nome da classe CSS a este item de menu.

Horário de Funcionamento

Continuando, vamos adicionar o horário de funcionamento e atribuir o nome da classe CSS 'horas' a ele.

CTA 1

A seguir, vamos adicionar o primeiro CTA. Vamos atribuir o nome da classe CSS 'cta-1' a ele.

CTA 2

Para o segundo CTA, usaremos o nome da classe CSS 'cta-2'.

CTA de botão

Adicionar o botão CTA à sua navegação vertical requer mais algumas etapas do que os itens de menu regulares que são apenas texto. Comece abrindo a página que você está usando como página única e siga as próximas etapas mencionadas abaixo.

Criar botão na página inicial

Se você quiser usar um botão CTA em sua navegação vertical, você terá que ter esse mesmo botão em algum lugar de sua página única. Depois de criar um, você pode inspecionar o elemento e copiar as seguintes linhas de código (vinculadas ao botão que você criou) que aparecem no código do seu site:

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

Claro, esse código pode diferir de acordo com a maneira como você o estiliza. Também depende se existem outros botões na mesma página ou não. Saiba que o botão só aparecerá com o estilo que você atribuiu a ele na página onde o botão está localizado. É por isso que adicionar um botão à navegação vertical geralmente só é preferível quando se trata de uma página única.

Observação: certifique-se de ajustar o tamanho da fonte e o preenchimento de seu botão no Módulo de botão para que ele se encaixe perfeitamente em sua navegação vertical.

Adicionar como item de menu

Agora que você copiou o código HTML necessário vinculado ao botão, adicione um novo link personalizado e adicione o código ao rótulo de navegação. A classe CSS que estamos usando para este item de menu é 'cta-3'.

Adicionar linhas de código CSS

A próxima parte deste post é dedicada a compartilhar as linhas de código CSS que ajudam você a alcançar o resultado final e o layout. Você notará que usamos as classes CSS que atribuímos aos diferentes itens de menu. No entanto, se você decidiu usar nomes de classes diferentes, certifique-se de alterá-los no código CSS para que funcione.

Para adicionar o código CSS, vá para o Painel do WordPress> Divi> Opções de tema> Role a guia Geral para baixo e adicione as seguintes linhas de código CSS à caixa CSS personalizada:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

Alterar a cor de fundo das seções

A última etapa que você precisa fazer é alterar as cores de fundo das seções em seu one-page. Certifique-se de que essa cor seja a mesma que você está usando para o seu contêiner de página. Nesse caso, é '# d6d4d1'.

Resultado

Depois de adicionar todos os itens de menu e o código CSS vinculado a cada um desses itens de menu, você deve ser capaz de obter o seguinte resultado:

Pensamentos finais

Neste post, mostramos como criar uma navegação vertical para o seu one-pager. Este post foi inspirado no site Eat Thai Restaurant, que também foi feito com Divi. Se você seguiu todo o post passo a passo, deve ter conseguido alcançar o resultado apresentado acima. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Vectomart / shutterstock.com