Ir para o conteúdo principal

Como usar o módulo de navegação de largura total do Divi Builder

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

A largura total do módulo de menu Divi permite que você coloque um menu de navegação em qualquer lugar da página. Isso pode ser usado para adicionar um segundo menu de página à página ou pode ser usado em conjunto com o recurso Página em branco para mover a navegação principal até a parte inferior da página. Por exemplo, você pode mover seu menu abaixo da primeira seção para acomodar pessoas com uma grande imagem de inicialização. Isso essencialmente permite que sua navegação de cabeçalho se mova na página usando o construtor!

Como adicionar um módulo de menu de tela cheia à sua página

Antes de adicionar um módulo de menu de largura total à sua página, você deve primeiro entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Ativar o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Os novos módulos de largura total só podem ser adicionados dentro das seções de largura total. Se você estiver iniciando uma nova página, não se esqueça de adicionar uma seção de largura total à sua página primeiro. Nós temos alguns bons tutoriais sobre o uso de elementos de seção Divi.

menu de largura total module.png

Localize o módulo de menu de largura total na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "Fullwith menu" ou "full-width menu" (dependendo da versão), então clique em enter para pesquisar automaticamente e adicionar o módulo de menu de largura total. ! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de Caso de Uso: Adicionando um Menu Fullwidth sob o Cabeçalho da Página

Para este exemplo, mostrarei como adicionar um menu de largura total na seção de cabeçalho de uma página.

Aqui está um exemplo:

exemplo de menu fullwidth divi.jpg

Como esse novo menu de página inteira substituirá o menu de navegação principal padrão, é necessário selecionar o modelo de página em branco para que o menu de navegação padrão não apareça na parte superior da página, além do menu de largura total que vou adicionar.

Para editar seu modelo de página, acesse o editor de páginas e selecione o modelo "página em branco" na caixa Atributos da página, na barra lateral direita.

atributo do page.png

Como este módulo exibirá um menu que já existe, é importante que você já tenha criado o menu antes de adicioná-lo ao módulo de menu de largura total.

exemplo menu wordpress.jpg

Depois de ter criado seu menu, use o Visual Builder para adicionar uma seção Fullwidth logo abaixo da seção de cabeçalho da página. Em seguida, adicione um módulo de menu de largura total à seção.

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

adicione um menu de largura total abaixo do title.jpg

Atualize as configurações do menu Fullwidth da seguinte maneira:

Opções de conteúdo

Menu: [selecione o menu que deve ser usado no módulo] Contexto: # 333333

Opções de design

Texto Cor: Luz Orientação do Texto: Centro Fonte Menu: Menu Roboto Tamanho da Fonte: 20px

Isso é tudo!

truque : Você pode usar as opções de exibição na guia Avançado para ocultar este menu no celular e exibir um menu diferente acima do cabeçalho para que os usuários móveis possam ver o menu sem precisar rolar a página para baixo. .

menu de resultados divi.jpg

Opções de conteúdo do menu de largura total

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

fullwidth-menu-section content.png

Menu

Selecione um menu para usar no módulo. Você pode criar novos menus usando a página Aparições> Menus do seu painel do WordPress. Sempre que você criar um novo menu, o menu será selecionável nesse menu suspenso.

Cor de fundo

Por padrão, o módulo de menu tem uma cor de fundo branco. Se você quiser usar uma cor diferente para o plano de fundo do menu, poderá escolhê-la aqui usando o seletor de cores.

Cor de fundo do menu suspenso

Por padrão, os menus suspensos no módulo de menu herdam a cor do plano de fundo definida na configuração anterior. Se você quiser que seus menus suspensos tenham sua própria cor, você pode escolher uma cor personalizada usando essa configuração.

Cor de fundo do menu móvel

No celular, o módulo de menu é transformado em um design diferente e mais otimizado para dispositivos móveis. Você pode controlar a cor de fundo do menu suspenso móvel, independentemente de sua contraparte na área de trabalho.

Rótulo de Administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design de menu de largura total

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

menu de módulos de design de seção fullwidth.png

Abrir submenus

Por padrão, todos os submenus são abertos em um menu suspenso abaixo da barra de menus principal. Se você colocar o menu na parte inferior da página e o menu contiver menus suspensos longos, convém abrir esses menus acima do módulo de menu para que o menu não ultrapasse a janela do navegador.

Crie links de menu de largura total

Por padrão, os links de nível superior com o módulo de menu são colocados dentro dos limites de sua largura de conteúdo padrão. Se você quiser remover essa restrição e seus links se estenderem por toda a largura da página, na extrema esquerda da tela, você poderá ativar essa opção.

Cor da linha do menu suspenso

Nos menus suspensos, os links são separados por uma linha de pixels 1. Se você quiser personalizar a cor dessa linha, poderá escolher uma cor personalizada usando o seletor de cores nessa configuração.

Cor do texto

Aqui você pode escolher o valor do seu texto. Se você está trabalhando em um fundo escuro, o texto deve estar ligado. Se você trabalha com um fundo claro, seu texto deve estar escuro.

Orientação de texto

Isso controla como o texto é alinhado no módulo. Você pode escolher entre Esquerda, Direita e Centralizada.

Cor do link ativo

As cores do link ativo são destacadas no módulo de menu para mostrar ao usuário sua localização atual. Você pode alterar a cor de realce usada para esses links ativos usando essa configuração.

Cor do texto do menu suspenso

Por padrão, o texto nos menus suspensos do módulo herda a cor do texto no menu principal. No entanto, talvez você queira alterar essa cor se tiver definido uma cor de plano de fundo do menu suspenso personalizado.

Cor do texto do menu para celular

Por padrão, o texto nos menus suspensos do módulo herda a cor do texto no menu principal. No entanto, você pode querer alterar essa cor se tiver definido uma cor de plano de fundo de menu móvel personalizada.

Fonte do menu

Você pode alterar a fonte da fonte do menu selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Menu Tamanho da Fonte

Aqui você pode ajustar o tamanho da sua fonte de menu. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto do menu

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto digital, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento das letras do menu

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto numérico, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do menu

A altura da linha afeta o espaço entre cada linha do texto digital. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada. localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Opções avançadas do menu Fullwidth

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

módulo de menu fullwidth seção avançada divi.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

Animação do menu suspenso

Você pode escolher entre diferentes animações para usar quando um menu suspenso é ativado. Por padrão, a animação está definida para desaparecer, mas você a altera para: expandir, arrastar ou inverter.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
17 ações
ação10
chilrear3
Enregistrer4
Whatsapp