Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Widget da Zona

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 Divi permite que você crie um número ilimitado de áreas prontas para uso em tempo real. As barras laterais podem ser adicionadas a qualquer página, permitindo que você crie barras laterais exclusivas para diferentes seções do seu site.

Como adicionar um módulo de widget Zonde da Divi

Antes de poder adicionar um módulo da barra lateral à 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 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 usar 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.

plugin de divis da barra lateral wordpress.png

Localize o módulo da barra lateral 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 "sidebar", depois clicar em "Enter" para pesquisar e adicionar automaticamente o módulo da barra lateral! 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 uma barra lateral à sua página do blog

O módulo da barra lateral permite que você insira uma barra lateral (e todos os seus widgets internos) em qualquer lugar de sua página. Na verdade, você pode adicionar qualquer área de widget usando o módulo da barra lateral. Para este exemplo, mostrarei como inserir uma barra lateral personalizada na sua página do blog usando a seção especializada para exibir o widget de pesquisa e as postagens recentes no WordPress.

barra lateral para artigo sobre WordPress.jpg

Esta página do blog tem um cabeçalho de largura total para exibir o título do blog na parte superior da página. No módulo de cabeçalho de largura total, há um layout de especialidade com um módulo de blog à esquerda e uma área de barra lateral direita à direita.

Usar a seção especializada permite adicionar variantes complexas de coluna ao lado das barras laterais verticais, sem adicionar quebras indesejadas à página. É perfeito para um blog com uma barra lateral.

Você deve primeiro certificar-se de ter os widgets configurados na página Widgets do seu painel do WordPress. Para este exemplo, incluo o widget de Pesquisa e o widget Artigos Recentes no widget da Barra Lateral.

barra lateral widget wordpress.png

Em seguida, implante o Visual Builder para editar a página do blog. Adicione uma seção especializada à sua página (logo abaixo do cabeçalho) com o seguinte layout:

crie uma seção personalizada divi.png

insira colunas divi.png

Depois de adicionar uma seção especializada à página, você notará que uma área (à esquerda) tem um botão "Adicionar módulo". Para este exemplo, é aqui que o módulo Blog com um layout de grade foi adicionado para exibir as postagens do blog.
exemplo artigo blog layout grid.png

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]

O outro (à direita) tem um botão "Inserir uma linha". A área "Inserir módulo" representa sua barra lateral vertical. É aqui que você entra no módulo da barra lateral. Você pode adicionar quantos módulos aqui, em uma linha, e eles se estenderão pela largura vertical da seção, adjacente à estrutura da coluna que você está construindo ao lado dela. De fato, para este exemplo, a página do blog já possui um módulo de e-mail Optin e um módulo Person nessa área da barra lateral vertical do layout Specialty.

Agora, adicione o módulo da barra lateral ao topo dos outros módulos na sua área da barra lateral vertical.

adicionar módulos ao sidebar.jpg

No parâmetro do Módulo da Barra Lateral, atualize o seguinte:

Guia Conteúdo

Área do widget: selecione Barra lateral

Guia Design

Orientação: Certo (porque a barra lateral está à direita)
Excluir separador de borda: SIM
Cor do texto:
Tamanho da Fonte do Cabeçalho Escuro: 26px
Espaçamento de cartas de
Cabeça: 3px Altura da linha de cabeçalho: 1.1em

Guia Avançado

Na seção CSS personalizado, adicione o seguinte CSS à caixa de texto Widget. Isso fará com que o design dos widgets da barra lateral corresponda ao design do site:

fundo: #fff; preenchimento: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);

criar uma barra lateral divi.jpg

Salvar configurações

Agora você pode ver que o módulo da barra lateral exibe os elementos do widget da Barra Lateral (Pesquisar e Artigos Recentes) e os exibe na área da barra lateral vertical de sua seção de especialidades.

exemplo de sidebar divi.jpg

Opções de conteúdo para a barra lateral

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 guia.

sidebar.png settings

Área do widget

O módulo da Barra Lateral usa as áreas de criação de widgets que você pode criar na guia Aparências> Widgets. Você pode selecionar uma das suas áreas de widget personalizadas neste menu suspenso.

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 da barra lateral

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.

opções de design divi.png

Orientação

Aqui você pode escolher qual lado da página sua barra lateral será exibida. Este parâmetro controla a orientação do texto e a posição da borda.

Excluir o separador de borda

Aqui você pode remover a borda cinza fina que separa a barra lateral do conteúdo da sua página.

Cor do texto

Aqui você pode escolher se o texto deve ser claro ou escuro. Se você estiver trabalhando em um fundo escuro, seu texto deve estar claro. Se seu plano de fundo estiver claro, seu texto deve estar escuro.

Cabeçalho da Polícia (Fonte do Cabeçalho)

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

Aqui você pode ajustar o tamanho do seu texto de cabeçalho. 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 cabeçalho

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

Espaçamento de papel timbrado

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

A altura da linha afeta o espaço entre cada linha do texto do cabeçalho Se você quiser aumentar o espaço entre cada linha, use o controle deslizante para ajustar o espaço ou insira o tamanho do espaçamento desejado no campo. inserido à 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 corpo

Você pode alterar a fonte do seu corpo 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 corpo

Aqui você pode ajustar o tamanho do texto do seu corpo. Você pode arrastar o controle deslizante para aumentar ou diminuir o tamanho do seu texto ou inserir diretamente o valor do tamanho de texto 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.

Cor do texto do corpo

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

Espaçamento de letras do corpo

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, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à 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.

Altura da linha do corpo

A altura da linha afeta o espaço entre cada linha de texto em seu corpo 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 do espaço 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 da barra lateral

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.

avanço sidebar 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.

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

Este artigo contém comentários 2

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
14 ações
ação8
chilrear2
Enregistrer4
Whatsapp