Divi Builder Plugin Documentation

Como adicionar, configurar e personalizar o módulo Divi blog.

Com Divi, até os blogs são um módulo, e o seu “blog” pode ser colocado em qualquer lugar do seu site, e em vários formatos. Você pode combinar módulos de blog e sidebar para criar designs de blogs clássicos. Blogs de 1 coluna, 2 colunas ou 3 colunas podem ser todos construídos usando módulos blog e sidebar.

Veja uma demonstração ao vivo deste módulo

Como adicionar um módulo blog à sua página

Antes de poder adicionar um módulo blog à sua página, você precisa primeiro saltar para o Divi Builder. Uma vez que o Tema Divi tenha sido instalado no seu website, notará um botão Use Divi Builder acima do editor de posts cada vez que estiver a construir uma nova página. Clicando neste botão irá activar o Divi Builder, dando-lhe acesso a todos os módulos do Divi Builder. A seguir, clique no botão Use Visual Builder para iniciar o construtor no Modo Visual. Você também pode clicar no botão Use Visual Builder ao navegar no seu site no front end se você estiver logado no seu Painel do WordPress.

Após ter entrado no Visual Builder, você pode clicar no botão cinza mais para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de Linhas. Se você está iniciando uma nova página, não se esqueça de adicionar uma linha à sua página primeiro. Temos alguns tutoriais ótimos sobre como usar os elementos de linha e seção do Divi.

Localize o módulo do blog dentro da 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 “blog” e depois clicar em enter para encontrar e adicionar automaticamente o módulo do blog! Uma vez que o módulo tenha sido adicionado, você será saudado com a lista de opções do módulo. Estas opções estão separadas em três grupos principais: Content, Design e Advanced.

Use Case Example: Adicionando o Módulo Blog com um Layout de Grade em uma Seção Especializada com uma Barra lateral direita

Para este exemplo, vou adicionar um Módulo Blog a uma página de blog. Esta página de blog tem um cabeçalho de largura total com um módulo de busca abaixo dele. Sob o Módulo de Busca, vou adicionar uma seção especializada com o Módulo Blog no lado esquerdo e uma seção lateral no lado direito. A barra lateral à direita tem um widget de posts recentes, um Módulo Optin de Email e um Módulo Person.

Aqui está como a página de exemplo.

Notem que o módulo do blog está em um layout de grade no lado esquerdo da seção de especialidade.

Vamos começar.

Utilize o construtor visual para adicionar uma seção especial com o seguinte layout:

>

Você será solicitado a adicionar uma linha de 1 coluna ou 2 colunas para o lado esquerdo. Escolha a linha de 1 coluna.

>

Então adicione o Módulo Blog à linha.

Atualize as Configurações do Blog da seguinte forma:

Opções de Conteúdo:

Número de Posts: 6
Ler Mais Botão: ON
Mostrar Paginação: NO
Cor de fundo do azulejo: #ffffffff

Opções de desenho

Layout: Grid
Use Dropshadow: ON
Cor do Ícone de Sobreposição: #ffffffff
Cor do Overlay: rgba(224,153,0,0,51)
Fonte do Cabeçalho: Padrão
Tamanho da fonte do cabeçalho: 21px
Cor do texto do cabeçalho: #33333333
Espaçamento de Letras do Cabeçalho: 1px
Altura da linha de cabeçalho: 1.2em
Fronteira de utilização: SIM
Cor da Borda: #f0f0f0f0
Largura da Borda: 1px
Estilo da Borda: Sólido

Opções Avançadas

CSS Personalizado (Read More Button):

O CSS Personalizado avançado para o botão read more cria um visual personalizado que se encaixa bem no design.

Na seção lateral direita do layout da Specialty Section você precisará adicionar um módulo de barra lateral que puxa o widget dos posts recentes. Abaixo disso você precisará adicionar um módulo de Optin de Email. E então abaixo do Email Optin você precisará adicionar o módulo Person com informações sobre o autor.

É isso!

Opções de Conteúdo do Blog

Na aba de conteúdo você encontrará todos os elementos de conteúdo do módulo, tais como texto, imagens e ícones. Qualquer coisa que controle o que aparece no seu módulo será sempre encontrada dentro desta aba.

Número de posts

Definir os posts de número que você deseja exibir. Você precisará ter os posts feitos para que qualquer coisa apareça dentro deste módulo.

Selecione as categorias que você gostaria de incluir no feed dos posts. Qualquer categoria de posts que você tenha criado aparecerá aqui para que você selecione/desmarque.

Categorias incluídas

Selecione quais categorias você gostaria de incluir no feed.

Formato de data Meta

Definir aqui o formato de data que você gostaria de exibir nos posts do seu blog. O layout padrão é um formato M j, Y (6 de janeiro de 2014) Veja o Codex WordPress nos formatos de data para mais opções.

Conteúdo

Mostrar o conteúdo completo não truncará suas postagens na página de índice. Mostrar o excerto apenas mostrará o seu texto.

Número de Offset

Escolha por quantas mensagens você gostaria de compensar. Se você compensar por 3 posts, por exemplo, os três primeiros posts no feed do seu blog não serão exibidos.

Show Featured Image

Esta opção permite que você escolha se você gostaria ou não que as imagens em miniatura aparecessem no módulo do seu blog.

Ler Mais Botão

Aqui você pode definir se quer ou não mostrar o link “leia mais” após o trecho.

Mostrar Autor

Escolha se você gostaria ou não de mostrar o autor de cada post do blog dentro da meta área do post abaixo do título do post.

Mostrar Data

Selecione se você gostaria ou não de exibir a data em que cada post foi criado dentro da meta área abaixo do título do post.

Mostrar Categorias

Selecione se você gostaria ou não de exibir as categorias de cada post dentro da meta área abaixo do título do post.

Mostrar Contagem de Comentários

Selecione se você gostaria ou não de exibir a contagem de comentários dentro da meta área abaixo do título do post.

Mostrar Paginação

Selecione se você gostaria ou não de exibir a paginação para este feed. Para habilitar a paginação numerada, você precisará instalar o plugin WP Page Navi.

Admin Label

Isso irá mudar a etiqueta do módulo no construtor para facilitar a identificação. Ao usar a vista WireFrame no Visual Builder, estas etiquetas aparecerão dentro do bloco do módulo na interface do Divi Builder.

>

Opções de Design de Blog

Na aba de design você encontrará todas as opções de estilo do módulo, tais como fontes, cores, tamanho e espaçamento. Esta é a aba que você usará para mudar a aparência do seu módulo. Cada módulo Divi tem uma longa lista de configurações de design que você pode usar para mudar quase tudo.

Layout

Você pode escolher entre exibir seus posts no blog em uma grade ou um layout de largura total.

Fatured Image Overlay

Se ativado, uma cor e um ícone de overlay será exibido quando um visitante pairar sobre a imagem em destaque de um post.

Cor do ícone Overlay

Aqui você pode definir uma cor personalizada para o ícone overlay.

Cor do ícone Overlay

Aqui você pode definir uma cor personalizada para o overlay.

Picker do Ícone de Sobreposição

Aqui você pode definir um ícone personalizado para a sobreposição.

Cor do Texto

Se o seu blog está sendo colocado em um fundo claro a Cor do Texto deve ser definida como ‘Escuro’. Visa versa, se o seu blog está sendo colocado em um fundo escuro, a cor do texto deve ser definida como ‘Light’.

Header Font

Você pode alterar a fonte do seu texto de cabeçalho selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrã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, tudo-caps e sublinhado.

Tamanho da fonte do cabeçalho

Aqui você pode ajustar o tamanho do seu texto de cabeçalho. Você pode arrastar o selector de intervalo para aumentar ou diminuir o tamanho do seu texto, ou pode introduzir o valor do tamanho do texto desejado directamente no campo de entrada à direita do selector. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Cor do texto de cabeçalho

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

Espaçamento de letras do cabeçalho

Espaçamento livre afeta o espaço entre cada letra. Se você gostaria de aumentar o espaço entre cada letra no seu texto de 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 pode introduzir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Altura da linha de cabeçalho

Altura da linha afecta o espaço entre cada linha do seu texto de cabeçalho Se desejar aumentar o espaço entre cada linha, utilize a barra deslizadora de intervalo para ajustar o espaço ou introduzir o tamanho de espaçamento desejado no campo de entrada à direita da barra deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode introduzir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Body Font

Você pode alterar a fonte do seu texto de corpo selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrã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, tudo-caps e sublinhado.

Tamanho da fonte corporal

Aqui você pode ajustar o tamanho do seu corpo de texto. Pode arrastar o selector de intervalo para aumentar ou diminuir o tamanho do seu texto, ou pode introduzir o valor do tamanho do texto desejado directamente no campo de entrada, à direita do selector. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Cor do texto corporal

Por padrão, todas as cores do texto no Divi aparecerão como branco ou cinza escuro. Se você gostaria de mudar a cor do seu texto corporal, escolha a cor desejada no seletor de cores usando esta opção.

Espaçamento de letras do corpo

Espaçamento de letras do corpo afeta o espaço entre cada letra. Se você gostaria de aumentar o espaço entre cada letra do seu corpo de texto, 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 pode introduzir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Altura da linha do corpo

Altura da linha afecta o espaço entre cada linha do seu texto de corpo. Os campos de entrada suportam diferentes unidades de medida, o que significa que pode introduzir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Meta Font

Pode alterar a fonte do seu meta texto, seleccionando a fonte desejada no menu pendente. Divi vem com dezenas de grandes fontes alimentadas por fontes do Google. Por padrã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, tudo-caps e sublinhado.

Meta Font Size

Aqui você pode ajustar o tamanho do seu meta texto. Pode arrastar o selector de intervalo para aumentar ou diminuir o tamanho do seu texto, ou pode introduzir o valor do tamanho de texto desejado directamente no campo de entrada à direita do selector. Os campos de entrada suportam diferentes unidades de medida, o que significa que pode introduzir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Meta Text Color

Por defeito, todas as cores de texto no Divi aparecerão como branco ou cinzento escuro. Se quiser alterar a cor do seu meta texto, escolha a cor desejada no seletor de cores usando esta opção.

Espaçamento de letras Meta

Espaçamento de letras Letter afeta o espaço entre cada letra. Se quiser aumentar o espaço entre cada letra no seu meta texto, use o selector de intervalo para ajustar o espaço ou introduza o tamanho de espaçamento desejado no campo de entrada à direita do selector. Os campos de entrada suportam diferentes unidades de medida, o que significa que pode introduzir “px” ou “em” seguindo o seu valor de tamanho para alterar o seu tipo de unidade.

Altura da linha Meta

Altura da linha afecta o espaço entre cada linha do seu meta texto Se desejar aumentar o espaço entre cada linha, utilize a barra deslizadora de intervalo para ajustar o espaço ou introduza o tamanho de espaçamento desejado no campo de entrada à direita da barra deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir “px” ou “em” seguindo seu valor de tamanho para mudar seu tipo de unidade.

Use Border

Ativar esta opção irá colocar uma borda ao redor de seu módulo. Esta borda pode ser personalizada usando as seguintes configurações condicionais.

Cor da Borda

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

Largura da borda

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar este valor arrastando o controle deslizante de faixa ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medidas personalizadas de suporte, o que significa que você pode mudar a unidade padrão de “px” para algo mais, como em, vh, vw etc.

Estilo de borda

Bordas suportam oito estilos diferentes, incluindo: sólido, pontilhado, tracejado, duplo, ranhura, crista, inset e outset. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Blog Advanced Options

Na aba advanced, você encontrará opções que os web designers mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizados a qualquer um dos muitos elementos do módulo. Você também pode aplicar classes e IDs CSS personalizados ao módulo, que podem ser usados para personalizar o módulo dentro do arquivo style.css do seu tema filho.

>

CSS ID

Entrar um ID CSS opcional a ser usado para este módulo. Um ID pode ser usado para criar um estilo CSS personalizado, ou para criar links para seções particulares da sua página.

CSS Class

Enter classes CSS opcionais a serem usadas para este módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar múltiplas classes, separadas com um espaço. Estas classes podem ser usadas no seu Divi Child Theme ou dentro do CSS personalizado que você adicionar à sua página ou ao seu site usando as Opções de Tema Divi ou as Configurações de Página do Divi Builder.

Custom CSS

Custom CSS também pode ser aplicado ao módulo e a qualquer um dos elementos internos do módulo. Dentro da seção Custom CSS, você encontrará um campo de texto onde você pode adicionar CSS personalizados diretamente a cada elemento. A entrada de CSS nestas configurações já está envolvida dentro de tags de estilo, portanto você só precisa inserir regras CSS separadas por ponto-e-vírgula.

Visibilidade

Esta opção permite-lhe controlar em que dispositivos o seu módulo aparece. Você pode escolher desabilitar seu módulo em tablets, smart phones ou computadores desktop individualmente. Isto é útil se você quiser usar módulos diferentes em dispositivos diferentes, ou se você quiser simplificar o design móvel eliminando certos elementos da página.

Deixe uma resposta

O seu endereço de email não será publicado.