Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo de menu em tela cheia

Divi: o tema WordPress mais fácil de usar

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]

O módulo Divi Menu em tela cheia facilita a adição de lindos cabeçalhos coloridos ao topo de suas páginas (ou em qualquer lugar do site, se desejar). Esses módulos só podem ser colocados em seções de largura total.

módulo de cabeçalho de largura total divi.png

Como adicionar o módulo de menu Divi Full Screen

Antes de adicionar um módulo de menu de tela cheia à sua página, primeiro você deve pular para o 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.

usar o construtor divi

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 menu em tela cheia 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.

menu completo divi.png

Localize o módulo de cabeçalho de tela inteira 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 "cabeçalho de tela inteira" e clicar em "Enter" para pesquisar automaticamente e adicionar o módulo de cabeçalho de tela inteira! 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: adicionar um cabeçalho de tela inteira a uma página Sobre

Para este exemplo, mostrarei como usar o módulo de cabeçalho Fullwidth para adicionar um cabeçalho com texto personalizado e uma imagem de plano de fundo.

Todos os módulos de tela cheia só estão disponíveis ao usar seções de tela inteira. Usando o Visual Builder, insira uma nova seção de tela cheia. Em seguida, adicione um módulo Person à seção.

Atualize as configurações do cabeçalho de tela inteira da seguinte maneira:

Opções de conteúdo

Título: Sobre nós Texto da legenda: Fazemos as coisas de forma diferente ... URL da imagem de fundo: [inserir uma imagem 1920 x 800] Sobreposição Cor de fundo: rgba (0,0,0,0.2)

Opções de design

Texto e orientação do logotipo: Botão central Botão de rolagem para baixo: SIM Ícone: [Selecionar ícone] Rolar para baixo Ícone Cor: #fcbf00 Ícone de rolagem: 50px Cor do texto: Texto claro Cor: #fcbf00 Fonte Título: Aberto, negrito, letras maiúsculas Título Tamanho da fonte: 60px (desktop), 40px (tablet), 30px (telefone) Subtitle Tamanho da fonte: 25px

Opções avançadas (CSS personalizado)

Elemento principal:
estofamento: 100px 0;

seção conteúdo divi module full screen.png

Isso é tudo!

cabeçalho de exemplo divi.jpg

Opções de conteúdo de cabeçalho em tela cheia

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.

seção de conteúdo divi.png

Título

Digite o título da sua página aqui.

Texto de legenda

Se você quiser usar uma legenda, adicione-a aqui. Sua legenda aparecerá sob seu título em uma pequena fonte.

Botão # 1 Text

Digite o texto para o botão.

Botão # 2 Text

Digite o texto para o botão.

Conteúdo

Aqui você pode definir o conteúdo que será colocado sob o título e o texto do título.

URL do botão 1

Digite o URL do botão.

URL do botão 2

Digite o URL do botão.

URL da imagem do logotipo

Carregue a imagem desejada ou digite o URL da imagem que você deseja visualizar.

URL da imagem do cabeçalho

Carregue a imagem desejada ou digite o URL da imagem que você deseja visualizar.

URL da imagem de fundo

Se definida, esta imagem será usada como plano de fundo para este módulo. Para excluir uma imagem de plano de fundo, basta excluir o URL do campo de configurações. As imagens de plano de fundo aparecerão acima das cores do plano de fundo, o que significa que a cor do plano de fundo não ficará visível quando uma imagem de plano de fundo for aplicada.

Cor de fundo

Defina uma cor de fundo personalizada para o seu módulo ou deixe em branco para usar a cor padrão.

Divi: O melhor tema WordPress de todos os tempos!

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

Cor de sobreposição de plano de fundo

Escolha uma cor de sobreposição de plano de fundo, que será colocada sobre a imagem de plano de fundo. Imagens de sobreposição semitransparentes podem criar efeitos interessantes quando colocadas sobre imagens de fundo.

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 cabeçalho 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.

módulo de design de seção largura total divi.png

Orientação de Texto e Logo

Isso controla como o texto é alinhado no módulo.

Faça uma tela cheia

Aqui você pode escolher se o cabeçalho é expandido para o tamanho de tela inteira.

Use o efeito Parallax

Se ativada, suas imagens de plano de fundo terão uma posição fixa, como o pergaminho, criando um efeito de paralaxe engraçado.

Método de paralaxe

Defina o método usado para o efeito paralaxe.

Mostrar o botão de rolagem para baixo

Aqui você pode escolher se o botão de rolagem para baixo é exibido.

ícone

Escolha um ícone para exibir o botão de rolagem para baixo.

Role para baixo ícone de cor

Por padrão, o ícone suspenso herda a cor do texto do cabeçalho (branco ou cinza). Você pode alterar essa cor ajustando a cor nessa opção usando o seletor de cores.

Role para baixo o tamanho do ícone

Use essa configuração para aumentar ou diminuir o tamanho do ícone de rolagem para baixo que aparece na parte inferior do cabeçalho.

módulo de alinhamento divi full width in head.png

Alinhamento vertical da imagem

Isso controla a orientação da imagem no módulo.

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.

Alinhamento vertical do texto

Essa configuração determina o alinhamento vertical do seu conteúdo. Seu conteúdo pode ser centralizado verticalmente ou alinhado na parte inferior.

Fonte de título

Você pode alterar a fonte do texto do título 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.

Tamanho da fonte do título

Aqui você pode ajustar o tamanho do texto do seu título. 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.

Título da cor do texto

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

Espaçamento das letras do título

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do título, 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.

módulo de design de seção de título na cabeça de tela cheia divi.png

Altura da linha do título

A altura da linha afeta o espaço entre cada linha do texto do título 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.

Fonte de conteúdo

Você pode alterar a fonte do seu texto de conteúdo selecionando a fonte de sua escolha 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.

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]

Tamanho da fonte do conteúdo

Aqui você pode ajustar o tamanho do seu texto de conteúdo. 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 suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Cor do texto de conteúdo

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

Letras de conteúdo espaçadas

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 de conteúdo, 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 de conteúdo

Altura da linha afeta o espaço entre cada linha do seu texto de conteúdo 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.

Fonte Subtitle

Você pode alterar a fonte do texto da sua legenda 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.

Tamanho da fonte da legenda

Aqui você pode ajustar o tamanho do seu texto de legenda. 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 suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Cor do texto da legenda

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

Espaçamento de letras de legenda

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 de legenda, 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 suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Altura da linha de legendas

A altura da linha afeta o espaço entre cada linha do texto da sua legenda. 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 à 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.

Largura máxima do texto

Use essa configuração para reduzir a largura máxima do texto no módulo de cabeçalho. Por exemplo, um valor de 50% garantirá que o texto nunca exceda 50% da largura do módulo de cabeçalho global.

módulo de design de seção divi head full width.png

Use estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização para os botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão muda conforme o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões adotam a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Botão Largura da Borda

Todos os botões Divi possuem uma borda 2px padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

Cor da borda do botão

Por padrão, as bordas dos botões mudam para a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Raio da borda do botão

O raio da borda afeta a redondeza dos cantos dos seus botões. Por padrão, os botões em Divi têm um pequeno raio de borda que arredonda os cantos dos 3 pixels. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com bordas circulares.

Espaçamento de letras de botão

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do botão, 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.

Fonte do botão

Você pode alterar a fonte do texto do botão 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.

Adicionar um ícone de botão

Desabilitado, essa configuração removerá os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta no foco.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para escolher o ícone a ser usado no seu botão. Divi tem ícones diferentes para escolher.

Botão do ícone de cor

Definir essa configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Botão de colocação de ícone

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone quando o botão rola

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Cor do texto do botão suspenso

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor do fundo do botão em foco (cor do botão em foco)

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão de cor da borda suspensa (cor de borda flutuante)

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão do raio da beira do pairo

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Botão de espaçamento de notas pontiagudas

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Opções avançadas de cabeçalho de largura total

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.

cabeçalho do módulo divi section advance.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.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
11 ações
ação6
chilrear1
Enregistrer4
Whatsapp