Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo de navegação em artigos

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]

Antes de poder adicionar um módulo de navegação de artigos Divi à sua página, você deve primeiro saltar 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 Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

navegação em articles.png

Localize o módulo de navegação 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 "navegação em artigos" e clicar em enter para pesquisar e adicionar automaticamente o módulo de navegação. 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: adição de links de navegação personalizados na parte inferior de uma postagem de blog

Ter links de navegação para os artigos seguintes e anteriores na parte inferior de seu artigo é uma ótima maneira de manter seus visitantes envolvidos com seu conteúdo. Neste exemplo, mostrarei a você como usar os nomes reais dos títulos de publicação para seus links de navegação, em vez dos nomes de links gerais "anterior" e "próximo". Também mostrarei como adicionar uma borda ao redor dos links para dar mais efeito.

exemplo título do menu de navegação publication.jpg

Vamos começar.

Use o construtor visual para incluir uma seção padrão com um layout de largura total (coluna 1) na parte inferior da publicação. Em seguida, adicione um módulo de navegação após a linha.

mudar os títulos dos links divi.png

Atualize as configurações de navegação da publicação da seguinte maneira:

Guia Conteúdo

Texto do link anterior:% title (esta variável insere o título do artigo)
Texto do seguinte link:% title (esta variável insere o título do artigo)

Guia Design

Ligações da Fonte: PT Sans
Ligações Tamanho da Fonte: 20px
Cor do texto dos links: # 5e95c1
Use a borda: SIM
Cor da borda: # 5e95c1
Largura da borda: 1px
Preenchimento personalizado: 20px superior, 20px direito, 20px inferior, 20px esquerda

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]

mudar navigation links.png

Isso é tudo! Agora você tem títulos de publicações nos links de navegação

exemplo de link do artigo em divi.png

Opções de conteúdo para o módulo de navegação

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.

módulo de área de conteúdo title of article.png

Texto do link anterior

Defina um texto personalizado para o link anterior. Você pode usar a variável% title para incluir o título do artigo. Deixe em branco para o valor padrão.

Texto do seguinte link

Defina um texto personalizado para o link a seguir. Você pode usar a variável% title para incluir o título da mensagem. Deixe em branco para o valor padrão.

Na mesma categoria

Aqui você pode definir se os artigos anteriores e os próximos devem estar no mesmo termo de taxonomia do artigo atual.

Nome da taxonomia personalizada

Deixe esta opção em branco se você estiver usando este módulo em um projeto ou um artigo. Caso contrário, digite o nome da taxonomia para que a opção "Na mesma categoria" funcione corretamente.

Ocultar link anterior

Você pode escolher aqui para ocultar ou mostrar o link anterior.

Ocultar o seguinte link

Você pode escolher aqui para ocultar ou mostrar o link a seguir.

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]

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 após a navegação

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 da seção article title.png

Fonte de links

Você pode alterar a fonte do texto do link 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 link

Aqui você pode ajustar o tamanho do texto do seu link. 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 dos links

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

Espaçamento de cartas de links

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 link, 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 links

A altura da linha afeta o espaço entre cada linha de texto em seus links 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 texto. inserido à 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.

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medida personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da beira

Bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, groove, crista, inlay e start. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Margem personalizada

Margem é o espaço adicionado ao exterior do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Preenchimento personalizado

Fill é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Opções avançadas para o módulo de navegação

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 título de opção antecipada de articles.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
114 ações
ação10
chilrear3
Enregistrer101
Whatsapp