Criando um painel de navegação marcante com as novas estruturas de coluna da Divi

Procurando uma maneira nova e única de estruturar sua página inicial? Criar um painel de navegação pode ser o caminho a percorrer. Neste tutorial, vamos mostrar como exatamente você pode obter uma página de painel impressionante que pode ser usada para muitos propósitos.

Se você deseja mudar a maneira como as pessoas navegam em sua página ou deseja destacar os serviços que sua empresa oferece, a criação de um painel o ajudará a alcançar exatamente o que você tinha em mente. Estamos usando apenas as opções integradas do Divi e, além disso, também fornecemos uma paleta de cores claras e escuras que você pode usar. Este tutorial é inspirado em um dos designs de Edoardo Mercati.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado final em diferentes tamanhos de tela:

Paletas de cores

Antes de começar, você pode escolher se deseja criar um painel claro ou escuro. As cores necessárias para cada paleta de cores estão listadas abaixo. Certifique-se de manter esses códigos de cores próximos para que possa usá-los depois de passar pelo tutorial. Ao usar uma cor específica para a paleta de cores, vamos nos referir ao número da cor.

Luz

• Cor # 1: # f6f6f6 (fundo da seção)
• Cor # 2: #ffffff (fundo da coluna)
• Cor # 3: # 333333 (cor do texto do título)
• Cor # 4: # 000000 (cor divisória)
• Cor # 5: # 6F6B68 (descrição da cor do texto do corpo)
• Cor # 6: # e5e5e5 (fundo da coluna 2)
• Cor # 7: #ffffff (cor de fundo do blurb)

Escuro

• Cor # 1: # 141414
• Cor # 2: # 212121
• Cor # 3: #ffffff
• Cor # 4: #ffffff
• Cor # 5: #dddddd
• Cor # 6: # 212121
• Cor # 7: # 333333

Cores mútuas

• Cor # 7: # 0457ff
• Cor # 8: # cc0432
• Cor # 9: # 839e00
• Cor # 10: # c68e00

Vamos começar a criar

Adicionar nova seção padrão

Cor de fundo

Comece adicionando uma nova seção à sua página. Em seguida, abra as configurações da seção e adicione uma cor de fundo:

• Cor de fundo: Cor # 1 (encontrar na paleta de cores)

Espaçamento

Para criar algum espaço extra na parte superior e inferior, aplicaremos alguns preenchimentos personalizados também:

• Enchimento superior: 100px
• Preenchimento inferior: 100px

Adicionar linha # 1

Estrutura da Coluna

Agora que terminamos de modificar as configurações da seção, podemos começar a adicionar linhas. Escolha a seguinte estrutura de coluna para sua primeira linha:

Cor de fundo da coluna 1

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo da coluna 1:

• Cor de fundo da coluna 1: Cor 2 (encontrar na paleta de cores)

Dimensionamento

Vá para a guia Design a seguir e altere as configurações de dimensionamento de sua linha:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Equalize a altura das colunas: Sim

Espaçamento

Por último, adicione um pouco de preenchimento à linha e à primeira coluna:

• Preenchimento inferior: 100px
• Preenchimento superior da coluna 1: 100 px
• Preenchimento inferior da coluna 1: 100 px
• Preenchimento esquerdo da coluna 1: 50 px
• Preenchimento direito da coluna 1: 50 px

Adicionar Módulo de Título de Texto à Coluna 1

Configurações de texto H1

É hora de começar a adicionar módulos! Começaremos adicionando um Título do Módulo de Texto. Depois de adicionar sua cópia H1, altere as configurações de texto do título do seu módulo:

• Peso da fonte do cabeçalho: negrito
• Alinhamento do Texto do Título: Esquerda
• Cor do Texto do Título: Cor # 3 (Encontre na Paleta de Cores)
• Tamanho do texto do título: 75 px (desktop), 55 px (tablet), 36 px (telefone)

Adicionar Módulo Divisor à Coluna 1

Divider Color

Logo abaixo do título Módulo de texto, vá em frente e adicione um Módulo divisor com a seguinte cor:

• Divider Color: Color # 4 (Find in Color Palette)

Dimensionamento

Abra as configurações de dimensionamento a seguir e ajuste a largura do seu divisor:

• Largura: 27%

Espaçamento

Adicione um pouco de espaço na parte superior de sua divisória também:

• Margem superior: 50px

Adicionar Módulo de Texto de Descrição à Coluna 1

Configurações de texto

O próximo e último módulo nesta linha é um Módulo de Texto de descrição. Depois de adicionar seu conteúdo, altere a orientação do texto nas configurações de texto:

• Orientação do Texto: Justificar

Dimensionamento

Altere também as configurações de dimensionamento deste módulo:

• Largura: 80% (desktop), 100% (tablet e telefone)

Espaçamento

E adicione algum espaço na parte superior do seu módulo usando margem personalizada:

• Margem superior: 50px

Adicionar Módulo Blurb à Coluna 2

Ícone

Podemos agora passar para a segunda coluna. Começaremos criando um dos módulos do Blurb. Depois, podemos clonar este módulo e alterá-lo de acordo. Depois de adicionar o Módulo Blurb e alterar o conteúdo, selecione um ícone de sua escolha.

Cor de fundo

Continue adicionando uma cor de fundo ao seu Módulo Blurb:

• Cor de fundo: Cor # 7 (Encontre na Paleta de Cores)

Padrão de Fundo

Salve o seguinte pequeno padrão em seu computador:

Faça o upload como sua imagem de plano de fundo junto com as seguintes configurações:

• Tamanho da imagem de fundo: tamanho real
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: repetir

Configurações de ícone

Vá para a guia Design, abra as configurações de Imagem e Ícone e altere as configurações de acordo:

• Cor do ícone: Cor # 7 (Encontre na Paleta de Cores)
• Ícone de círculo: Sim
• Cor do círculo: #FFFFFF
• Use o tamanho da fonte do ícone: 33px

Configurações de texto

Em seguida, abra as configurações de texto e faça algumas alterações:

• Orientação do Texto: Centro
• Cor do Texto: Claro

Configurações de texto do título

O título do nosso Módulo Blurb também precisa de algumas alterações adicionais:

• Peso da fonte do título: Ultra negrito
• Estilo da fonte do título: maiúsculas

Espaçamento

Por último, mas não menos importante, adicione um preenchimento personalizado para dar ao seu Módulo Blurb a aparência que você deseja:

• Enchimento superior: 75 px
• Preenchimento inferior: 75 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Clone o módulo Blurb três vezes e coloque 2 na coluna restante

Agora que concluímos o primeiro módulo do Blurb, vá em frente e clone-o três vezes. Deixe uma das duplicatas na primeira coluna e coloque as outras duas na coluna restante da linha.

Alterar novos módulos do Blurb

Alterar ícone

Para cada uma das duplicatas, você precisará alterar o ícone que está sendo usado.

Mudar a cor do fundo

Da mesma forma, você precisará alterar a cor de fundo para uma cor de sua escolha ou uma das cores na paleta de cores (cor # 8, # 9 ou # 10).

Mudar a cor do ícone

Mude a cor do ícone para a mesma cor que você está usando para o plano de fundo.

Adicionar linha # 2

Estrutura da Coluna

A segunda linha precisa da seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha, vá para as configurações de dimensionamento e aumente a largura de sua linha:

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

Espaçamento

Abra as configurações de espaçamento a seguir e adicione algum preenchimento personalizado na parte superior e inferior de sua linha:

• Enchimento superior: 50 px
• Preenchimento inferior: 50 px

Adicionar Módulo de Texto

Configurações de texto H2

O primeiro módulo de que você precisará na coluna da linha é um Módulo de texto de título. Depois de adicionar o conteúdo H2, altere as configurações de texto H2:

• Peso da fonte do cabeçalho 2: negrito
• Alinhamento de Texto Título 2: Esquerda
• Cor do Texto do Título 2: Cor # 3 (Encontre na Paleta de Cores)
• Tamanho do texto do título: 32px

Adicionar Módulo Divisor

Divider Color

Logo abaixo do título Módulo de texto, adicione um Módulo divisor com a seguinte cor:

• Cor: Cor # 4 (Encontre na Paleta de Cores)

Dimensionamento

Altere a largura do divisor a seguir:

• Largura: 9%

Espaçamento

Por último, adicione algum espaço na parte superior da sua divisória:

• Enchimento superior: 20 px

Adicionar linha # 3

Estrutura da Coluna

Para compartilhar os recursos destacados, selecione a seguinte estrutura de coluna para sua nova linha:

Cor de fundo da coluna

Abra as configurações de linha e adicione a seguinte cor de fundo a cada uma de suas colunas:

• Cor de fundo da coluna: Cor # 6 (encontrar na paleta de cores)

Dimensionamento

Aumente a largura da sua linha a seguir:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Equalize a altura das colunas: Sim

Espaçamento

E adicione um pouco de preenchimento também:

• Enchimento superior: 100px
• Preenchimento inferior: 100px

Adicionar Módulo Blurb à Coluna 1

Ícone

Agora podemos começar a adicionar os diferentes módulos. Começaremos com um Módulo Blurb na primeira coluna. Depois de adicionar o conteúdo, selecione um ícone de sua escolha.

Cor de fundo

Em seguida, dê ao seu Módulo Blurb uma cor de fundo:

• Cor de fundo: Cor # 7 (Encontre na Paleta de Cores)

Configurações de ícone

Vá para a guia Design e altere as configurações do ícone:

• Cor do ícone: #ffffff
• Ícone de círculo: Sim
• Cor do Círculo: Cor # 7 (Encontre na Paleta de Cores)
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 33 px

Configurações de texto

Altere a orientação do texto do seu módulo do Blurb também:

• Orientação do Texto: Centro

Configurações de texto do título

A seguir, vá para as Configurações de texto do título e faça algumas alterações:

• Peso da fonte do título: Ultra negrito
• Estilo da fonte do título: maiúsculas
• Cor do texto do título: Cor # 3 (encontrar na paleta de cores)

Configurações do corpo do texto

O corpo do texto do Módulo Blurb também precisa de outra cor:

• Cor do corpo do texto: Cor # 5 (encontrar na paleta de cores)

Espaçamento

Por último, adicione algumas configurações de espaçamento personalizadas ao seu módulo Blurb:

• Enchimento superior: 50 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Adicionar Módulo de Botão à Coluna 1

Alinhamento de Botão

Logo abaixo do Módulo Blurb, vá em frente e adicione um Módulo de botão. Abra suas configurações e altere o Alinhamento do botão:

• Alinhamento do botão: Centro

Configurações de botão

Altere a aparência do seu botão a seguir:

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 15px
• Cor do texto do botão: Cor # 3
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Peso da fonte: ultra negrito
• Estilo da fonte: maiúsculas

Espaçamento

Adicione também alguma margem na parte inferior do seu Módulo de botão:

• Margem inferior: 30px

Clone Blurb e módulo de botão três vezes e coloque nas colunas restantes

Clone ambos os módulos na primeira coluna três vezes e coloque-os nas colunas restantes de sua linha.

Alterar novos módulos do Blurb

Alterar ícone

Mude o ícone de cada Módulo Blurb duplicado em um novo ícone de sua escolha.

Mudar a cor do ícone

Altere a cor do ícone também. Sinta-se à vontade para usar os números 8, 9 e 10 da paleta de cores.

Clone Row

Localizar e clonar a linha

Para exibir todos os recursos, em vez de apenas os realçados, vamos clonar a linha que contém o título.

Place Row

Em seguida, vamos colocá-lo logo abaixo da última linha que criamos.

Clone Row

Localizar e clonar a linha

Faça o mesmo com a linha que contém os módulos do Blurb destacados.

Place Row

E coloque-o abaixo do seu novo título.

Alterar Estrutura da Coluna

Para fazer com que mais recursos apareçam nesta linha, vamos alterar a estrutura da coluna em 5 colunas em vez de 4:

Adicionar Coluna 5 Cor de Fundo de Coluna

Adicione também a cor de fundo da coluna à sua nova coluna:

• Cor de fundo da coluna: Cor # 6 (encontrar na paleta de cores)

Clone Blurb e módulos de botão e coloque na coluna 5

Clone um dos módulos do Blurb em sua linha e preencha o espaço colocando a duplicata na coluna 5. Altere o ícone e a cor do ícone também.

Clone de linha de 5 colunas

Por último, mas não menos importante, clone esta linha de 5 colunas para criar duas linhas com todos os recursos que deseja oferecer e pronto!

Antevisão

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

Pensamentos finais

Os painéis têm uma ótima aparência e permitem que você facilite a navegação do usuário no seu site. Nesta postagem, compartilhamos um design de painel impressionante com duas paletas de cores que você pode criar do zero usando apenas as opções integradas do Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!