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

Ao construir um site com WordPress, você sempre pode escolher qual página aparece primeiro quando as pessoas visitam seu site diretamente. A maioria dos criadores de sites direciona os visitantes imediatamente para sua página inicial. Mas você também pode escolher outra abordagem que permite que os visitantes escolham a página de seu site que irão primeiro, adicionando uma página de navegação de ícones como sua página inicial. Assim que as pessoas clicarem na página de sua escolha, elas terão a experiência normal do site novamente com uma barra de menu na parte superior da página que lhes permite navegar para outras páginas. Isso significa que eles não terão que voltar para esta página de navegação de ícones depois de passarem por ela após a primeira interação.

Neste tutorial, mostraremos como criar uma página inicial de navegação de ícones moderna e 100% responsiva que terá uma boa aparência em todos os tamanhos de tela. Também o ajudaremos a tornar esta a página inicial do seu site e a remover a barra de menu principal e o rodapé na primeira interação.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Criar nova página

Inscreva-se no nosso canal no Youtube

Adicionar nova página

Comece adicionando uma nova página ao seu site WordPress.

Dê um título à sua página e publique

Dê um título à sua página e publique-a imediatamente.

Definir página como página inicial

Vá para as configurações de leitura do site

Em seguida, acesse as configurações de leitura do seu site.

Definir nova página como página inicial

Aqui, vamos selecionar a nova página de navegação de ícones como a página inicial do nosso site.

Ocultar barra de menu principal e rodapé na página de navegação de ícones

Volte para a página de navegação de ícones e habilite o Divi's Visual Builder

Agora que selecionamos a página inicial, podemos começar a construir nossa página de navegação de ícones. Volte para a página que você criou e mude para o Divi's Visual Builder.

Depois de fazer isso, você terá três possibilidades. Você pode começar a construir do zero, escolher um layout predefinido ou clonar uma página existente. Escolha a primeira opção.

Adicione CSS personalizado para ocultar barra de menu principal e rodapé somente nesta página

Como esta é uma página de navegação, queremos que o foco esteja nos itens de menu que criamos manualmente. É por isso que ocultaremos a barra de menu principal e o rodapé nesta página. Assim que as pessoas continuarem no site, elas receberão a barra de menu principal e o rodapé de volta.

#main-header, #main-footer {
display: none;}

Vamos começar a projetar!

Adicionar Seção # 1

Vamos começar a criar nosso design responsivo com Divi! Adicione a primeira seção regular.

Adicionar linha

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 habilite a opção 'Tornar esta linha largura total' nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim

Adicionar Módulo de Imagem

Carregar logotipo da empresa

O primeiro módulo de que precisamos nesta linha é um Módulo de imagem. Faça upload do logotipo de sua empresa para que as pessoas saibam que acessaram o site correto.

Alinhamento

Em seguida, altere o alinhamento da imagem na guia de design. Certifique-se de desativar a opção 'Always Center Image On Mobile'.

• Alinhamento de imagem: esquerda

Espaçamento

Adicione um pouco de margem inferior personalizada a seguir.

• Parte inferior: 10vw (desktop), 20vw (tablet e telefone)

Adicionar Módulo de Texto

Adicionar conteúdo H1

O próximo módulo de que precisamos é um Módulo de Texto. Adicione algum conteúdo H1 de sua escolha.

Configurações de texto H1

Continue modificando as configurações de texto H1 na guia de design.

• Fonte do título: Didact Gothic
• Peso da fonte do cabeçalho: negrito
• Alinhamento do Texto do Título: Esquerda
• Cor do texto do título: # 333333
• Tamanho do texto do título: 5vw (desktop), 6vw (tablet), 7vw (telefone)
• Altura da linha de direção: 0,8em

Dimensionamento

Modifique as configurações de dimensionamento a seguir.

• Largura: 68% (desktop), 80% (tablet), 88% (telefone)
• Alinhamento do Módulo: Esquerda

Adicionar Módulo Divisor

Visibilidade

O próximo e último módulo de que precisamos nesta linha é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor do ícone.

• Cor: # 333333

Dimensionamento

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

• Peso do divisor: 10px
• Largura: 8% (desktop), 20% (tablet), 25% (telefone)
• Alinhamento do Módulo: Esquerda

Adicionar Seção # 1

Para a próxima seção! Adicione uma seção regular abaixo da anterior.

Adicionar linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção.

Dimensionamento

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

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

Espaçamento

Em seguida, vá para as configurações de espaçamento e faça algumas alterações em diferentes tamanhos de tela.

• Preenchimento inferior: 0,2vw
• Preenchimento esquerdo: 4vw (desktop), 2vw (tablet), 1vw (telefone)
• Preenchimento direito: 25vw (desktop), 2vw (tablet), 1vw (telefone)
• Preenchimento direito da coluna 1: 0,2vw
• Preenchimento esquerdo da coluna 2: 0,1vw
• Preenchimento direito da coluna 2: 0,1vw
• Preenchimento esquerdo da coluna 3: 0,2vw

CSS customizado

Estamos garantindo que todas as colunas apareçam próximas umas das outras, mesmo no tablet e no telefone, adicionando uma única linha de código CSS ao elemento principal na guia avançada.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Adicionar Título

Agora podemos começar a adicionar nossos módulos! Adicione um novo Módulo Blurb à primeira coluna e insira um título.

Selecione o ícone

Em seguida, selecione um ícone de sua escolha.

Ligação

Adicione um link para o módulo também. Certifique-se de usar o URL correto que encaminhe os visitantes para a página que desejam visitar.

• URL do link do módulo: https://www.yourwebsite.com/homepage

Fundo Gradiente

Adicione um fundo gradiente a seguir.

• Cor 1: # 4b42ff
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 60%
• Posição final: 60%

Imagem de fundo

Junto com uma imagem de fundo. Salve a seguinte imagem em sua área de trabalho:

E use-o em combinação com as seguintes configurações de fundo:

• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição

Configurações de ícone

Continue modificando as configurações do ícone na guia de design.

• Cor do ícone: #ffffff
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 4vw (desktop), 6vw (tablet), 8vw (telefone)

Configurações de texto do título

Altere as configurações de texto do título também.

• Fonte do título: Didact Gothic
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 2vw (desktop), 3vw (tablet), 4vw (telefone)
• Espaçamento entre letras de título: -2 px
• Altura da linha do título: 0em

Espaçamento

E adicione alguns valores personalizados de preenchimento superior e inferior para os diferentes tamanhos de tela.

• Preenchimento superior: 9vw (desktop e tablet), 12vw (telefone)
• Preenchimento inferior: 9vw (desktop e tablet), 12vw (telefone)

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Quando terminar de modificar o módulo Blurb na coluna 1, você pode prosseguir e clonar o módulo duas vezes. Coloque as duplicatas nas colunas restantes da linha.

Alterar o conteúdo do Blurb

Claro, você precisará alterar os títulos de cada duplicata.

Alterar ícones do Blurb

Junto com os ícones.

Alterar links do Blurb

Combine os novos módulos do Blurb com um URL exclusivo que leva à página correta.

• URL do link do módulo: https://www.yourwebsite.com/about

Alterar fundos gradientes do Blurb

Em seguida, altere as primeiras cores dos fundos gradientes de ambas as duplicatas.

• Cor 1: # f9f9f9

• Cor 1: # ff445d

Alterar ícone e cores de texto do módulo Blurb na coluna 2

E combine as cores do ícone e do texto do Módulo Blurb com a nova cor de fundo gradiente.

• Cor do ícone: # 000000
• Cor do texto do título: # 000000

Clonar linha inteira

Depois de concluir a linha, você pode cloná-la inteiramente.

Clone o módulo Blurb na coluna 2

Clone o módulo Blurb na coluna 2.

Coloque os Módulos Blurb de fundo claro na coluna 1 e coluna 3

E coloque os módulos do Blurb de fundo claro nas colunas 1 e 3.

Coloque o Módulo de Resumo de Cor-Plano de Fundo na Coluna 2

Mova um dos Módulos do Blurb com fundo colorido para a segunda coluna.

Remover Módulo Blurb Restante

E exclua o Módulo Blurb restante.

Alterar o conteúdo do Blurb

Novamente, você precisará alterar os títulos de cada Módulo do Blurb.

Alterar ícones do Blurb

Junto com os ícones.

Alterar links do Blurb

E os links também.

• URL do link do módulo: https://www.yourwebsite.com/shop

Alterar plano de fundo gradiente do módulo Blurb na coluna 2

Por último, mas não menos importante, altere a primeira cor do fundo gradiente do Módulo Blurb na coluna 2.

• Cor 1: # 000000

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Nesta postagem, mostramos como criar uma página de navegação de ícones e usá-la como sua página inicial. Essa abordagem permite que seus visitantes escolham a página para a qual navegam antes de ver o conteúdo do site. Depois que alguém clica em um item de menu, ele experimenta a navegação normal pela barra de menu principal novamente. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!