Como criar uma página inicial de navegação com Divi

Existem várias abordagens que você pode aplicar em sua página inicial, mas se você quiser adicionar um toque extra ao seu site, optar por uma página de navegação como sua página inicial pode ser o caminho a percorrer. Você não o verá por aí com tanta frequência e dá aos visitantes uma visão clara do que podem esperar do seu site. Além disso, também ajudará seus visitantes a navegar visualmente pelas diferentes páginas cheias do incrível conteúdo que você oferece.

Para mostrar como você pode fazer isso com Divi, de uma maneira estilosa e elegante, criamos um design que mostraremos como recriar neste post. Haverá duas versões; a versão desktop e aquela que é adequada para tablet e telefone. Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado final.

Resultado na área de trabalho

O resultado que vamos recriar tem a seguinte aparência no desktop:

Resultado no celular

O resultado no celular é um pouco diferente e tem a seguinte aparência:

Como criar uma página inicial de navegação com Divi

Inscreva-se no nosso canal no Youtube

Recriar a versão da área de trabalho

Vamos criar duas versões da página de navegação; uma versão desktop e uma versão para tablet e telefone. Dessa forma, teremos certeza de que a página de navegação terá uma boa aparência em todos os dispositivos. Como de costume, vamos começar criando a versão desktop.

Adicionar nova seção

Comece criando uma nova página e adicionando uma seção regular a ela. Para este tutorial, usaremos apenas uma seção que incluirá todas as linhas com o conteúdo de que precisaremos (para a versão desktop e móvel). No entanto, você também pode escolher separar a versão para desktop da versão móvel em duas seções.

Recriar a primeira linha de navegação

Como você pode notar na visualização do resultado acima, cada um dos itens de navegação tem mais ou menos o mesmo design com alguns detalhes diferentes. A maioria das configurações para cada um dos itens de navegação que você deseja criar são as mesmas. É por isso que mostraremos como você pode criar a primeira linha em detalhes e, em seguida, mostraremos como você pode fazer as modificações para os outros itens de navegação que deseja adicionar à página também.

Estrutura da Coluna

Em primeiro lugar, escolha uma coluna de largura total para a linha que você acabou de adicionar. Antes de adicionar qualquer módulo a ele, vamos ter certeza de que as configurações de linha estão no lugar, então vá em frente e abra as configurações de linha.

Imagem de fundo

Enquanto estiver na guia Conteúdo, a primeira coisa que faremos é adicionar uma imagem de plano de fundo à sua linha. Recomendamos o uso de uma imagem com largura de '1400px' e altura de '934px', pois ela levará ao melhor resultado. Além disso, certifique-se de colocar a imagem em 'sem repetição'.

Alinhamento

Em seguida, vá para a guia Design e adicione um alinhamento correto à sua linha. Ao fazer isso, você criará espaço suficiente no lado esquerdo da tela para adicionar a descrição e o link.

Dimensionamento

Em seguida, abra a subcategoria Dimensionamento, ative a opção 'Usar largura personalizada' e use uma largura de porcentagem de '100%'.

Espaçamento

Continuando, queremos adicionar um pouco de espaço em branco entre cada item de navegação, é por isso que vamos adicionar uma margem superior e inferior de '5px' à linha.

Visibilidade

Por último, mas não menos importante, queremos desativar essa linha no telefone e no tablet, pois criaremos outra linha que corresponderá ao tablet e ao telefone posteriormente neste post.

Módulo de texto para descrição da página

Configurações de texto

Assim que as configurações da linha forem feitas, você pode adicionar um primeiro Módulo de Texto à coluna da linha e usar as seguintes configurações para a subcategoria Texto na guia Design:

• Fonte do texto: Andika
• Peso da fonte do texto: regular
• Tamanho do texto: 13px
• Cor do texto: # 000000
• Altura da linha de texto: 1.1em
• Orientação do Texto: Esquerda

Dimensionamento

Role para baixo, abra a subcategoria Sizing e adicione uma largura de '18% '. Esta largura garantirá que nosso Módulo de Texto não cruze a imagem de fundo de nossa linha, uma vez que adicionamos a margem esquerda negativa a ela.

Espaçamento

Conforme mencionado na etapa anterior, queremos que o Módulo de Texto fique no lado esquerdo de nossa linha sem sobrepor o fundo da linha. Também queremos ter algum espaço entre o topo da imagem da linha e o início do Módulo de Texto, é por isso que estamos usando alguma margem superior também.

• Margem superior: 150px
• Margem esquerda: -20px
• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Módulo Divisor

Visibilidade

Em seguida, vá em frente e adicione um módulo Divider logo abaixo do Módulo de Texto. Na subcategoria Visibilidade, ative a opção 'Mostrar divisor'.

Cor

Em seguida, vá para a guia Design e adicione '#FFFFFF' como a cor do divisor.

Estilos

Seguindo em frente, escolha 'Solid' como Divider Style e 'Top' como Divider Position.

Dimensionamento

Por último, faça com que as seguintes configurações se apliquem à subcategoria Dimensionamento:

• Peso do divisor: 5px
• Altura: 23px
• Largura: 47%
• Alinhamento do Módulo: Esquerda

Módulo de Texto para Item de Menu

Link de texto na caixa de conteúdo

Quando terminar de usar o Módulo divisor, vá em frente e adicione outro Módulo de texto logo abaixo dele. Este Módulo de Texto será nosso item de navegação. Abra as configurações, insira o texto e adicione um link para ele.

Cor de fundo gradiente

Enquanto ainda estiver na guia Conteúdo, use as seguintes configurações de fundo gradiente:

• Primeira cor: #FFFFFF
• Segunda cor: rgba (12.113.195.0.62)
• Tipo de gradiente: Linear
• Direção do gradiente: 108deg
• Posição inicial: 31%
• Posição final: 21%

Configurações de texto de link

Em seguida, vá para a guia Design e faça com que as seguintes configurações se apliquem à guia do link da Subcategoria de texto:

• Fonte do link: Andika
• Peso da fonte do link: negrito
• Estilo da fonte do link: maiúscula e sublinhada
• Estilo de sublinhado do link: Sólido
• Tamanho do texto do link: 100px
• Cor do texto do link: # 000000
• Altura da linha do link: 1em

Espaçamento

Este Módulo de Texto também deverá aparecer no lado esquerdo da tela, por isso estamos adicionando a margem esquerda. Também queremos que o espaço entre o Módulo divisor e este Módulo de texto seja menor, é aí que entra a margem superior negativa. Para criar esse alinhamento horizontal central, também vamos adicionar uma margem inferior. E, por último, queremos que o fundo gradiente seja maior, é por isso que estamos usando o preenchimento superior e inferior.

• Margem superior: -33px
• Margem inferior: 250px
• Margem esquerda: -20px
• Enchimento superior: 80px
• Preenchimento inferior: 80 px

Clone a primeira linha de navegação quantas vezes forem necessárias

Os diferentes itens de navegação em sua página de navegação terão, mais ou menos, as mesmas configurações. É por isso que recomendamos clonar a linha quantas vezes você precisar e fazer as modificações de detalhes depois. Há três coisas que você precisa alterar, vamos dar uma olhada.

Alterar o fundo da linha

A primeira coisa que você precisa fazer é mudar as imagens de fundo das duplicatas de sua linha. Novamente, certifique-se de usar uma imagem com uma largura de '1400px' e uma altura de '943px' para obter o melhor resultado.

Alterar Módulo de Texto para Item de Menu

Alterar Link

Em seguida, abra o item de navegação Módulo de Texto e altere o texto junto com o link.

Alterar o fundo gradiente de acordo com o comprimento do texto

Por último, você também precisará alterar o fundo gradiente deste Módulo de Texto. Altere a segunda cor gradiente para 'rgba (224,43,32,0.62)' e altere o valor da Posição inicial de acordo com o comprimento do seu novo item de navegação. Se você tiver um item de navegação muito longo, altere a porcentagem da Posição inicial para um valor mais alto até vê-lo se encaixar.

Recriar a versão móvel

Agora que criamos a versão Desktop, vamos criar a versão para tablet e celular também. O estilo dos diferentes Módulos é praticamente o mesmo da versão para desktop, mas nos bastidores, a estrutura de nossas linhas é completamente diferente. Por causa das muitas modificações que você teria que fazer em cada módulo se fosse cloná-los, vou simplesmente mostrar como criá-lo do zero sem clonar nenhum módulo da versão Desktop.

Recriar a primeira linha de navegação

Comece adicionando outra linha à seção que criamos no início desta postagem.

Estrutura da Coluna

Esta coluna, como a versão para desktop, também precisará de apenas uma coluna.

Dimensionamento

O tamanho desta linha é o seguinte:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Essas configurações garantirão que nossa linha ocupe toda a largura da tela.

Visibilidade

E, por último, desabilite esta linha na área de trabalho porque temos outras linhas que serão exibidas na área de trabalho.

Módulo de texto para descrição da página

Configurações de texto

Vá em frente e adicione o primeiro Módulo de Texto à linha. Faça com que as seguintes configurações se apliquem à subcategoria Texto:

• Fonte do texto: Andika
• Peso da fonte do texto: regular
• Tamanho do texto: 13px
• Cor do texto: # 000000
• Altura da linha de texto: 1.1em
• Orientação do Texto: Centro

Dimensionamento

Em seguida, abra a subcategoria Sizing e, use uma largura de '71% 'e um Alinhamento de Módulo central.

Espaçamento

Por último, este Módulo de Texto precisará de um preenchimento superior e inferior de '10px'. Como você pode notar, não há necessidade de valores de margem no tablet e na versão móvel porque estamos optando por um alinhamento central.

Módulo de Texto para Item de Menu

Link de texto na caixa de conteúdo

Para a versão móvel, não precisamos de um módulo divisor, então vamos pular essa etapa. Em vez disso, vamos adicionar imediatamente o item de navegação Módulo de Texto logo abaixo do Módulo de Texto anterior que criamos. Depois de fazer isso, adicione o texto com o link para a Caixa de conteúdo na guia Conteúdo.

Cor de fundo gradiente

O fundo gradiente que usaremos para este Módulo de Texto é o mesmo da versão Desktop um:

• Primeira cor: #FFFFFF
• Segunda cor: rgba (12.113.195.0.62)
• Tipo de gradiente: Linear
• Direção do gradiente: 108deg
• Posição inicial: 31%
• Posição final: 21%

Configurações de texto de link

Use as seguintes configurações para a subcategoria de texto:

• Fonte do link: Andika
• Peso da fonte do link: negrito
• Tamanho do texto: 65px
• Cor do texto: # 000000
• Altura da linha de texto: 1em
• Orientação do Texto: Esquerda

Espaçamento

Como a versão para desktop, este item de navegação Módulo de texto precisará de um preenchimento superior e inferior de '80px' para tornar o fundo gradiente maior.

Módulo de Imagem

Enviar Imagem

Por último, adicione um Módulo de imagem como o último módulo em sua linha e carregue uma imagem de sua escolha.

Clone a primeira linha de navegação quantas vezes forem necessárias

A mesma coisa conta para a versão móvel; você pode clonar a linha que acabou de criar quantas vezes forem necessárias para adicionar outros itens de navegação também. Há três coisas que você precisa modificar cada vez que adicionar um novo item de navegação, vamos dar uma olhada.

Alterar Módulo de Texto para Item de Menu

Alterar Link

A primeira coisa que você precisa alterar é o texto e o link na Caixa de Conteúdo da guia Conteúdo do Módulo de Texto do item de navegação.

Alterar o fundo gradiente de acordo com o comprimento do texto

Então, você também pode alterar a segunda cor do gradiente para 'rgba (224,43,32,0.62)' e alterar o valor da posição inicial de acordo com o comprimento do seu texto.

Alterar Módulo de Imagem

Por último, você também pode alterar a imagem do Módulo de imagem dentro dessa linha.

Resultado

Depois de criar a versão para desktop e para celular, você terá uma página de navegação impressionante que fica bem em desktop, tablet e telefone. Vamos dar uma olhada final no resultado.

Resultado na área de trabalho

Resultado no celular

Pensamentos finais

Criar uma página de navegação como sua página inicial definitivamente deixará uma marca em seus visitantes. Isso não apenas ajuda seus visitantes a navegar mais visualmente, mas também permite que eles vejam uma prévia mais elaborada do que seu site tem a oferecer. 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 LanKogal / shutterstock.com