Ir para o conteúdo principal

Como usar o módulo de blog no 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]

Com Divi, até os blogs são um módulo e seu "blog" pode ser colocado em qualquer lugar do seu site e em diferentes formatos. Você pode combinar módulos de blog e barra lateral para criar designs de blog clássicos. Coluna 1, 2 colunas ou colunas 3 podem ser criadas usando o módulo blog e sidebar.

preview blog módulo divi blog.png

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

Antes de adicionar um módulo de blog à sua página, você deve primeiro acessar 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. Ao clicar neste botão, você poderá ativar o Divi Builder, que lhe dará acesso a 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 estiver navegando em seu site upstream se você estiver logado no seu painel do WordPress.

botão divi builder module blog divi.png

Uma vez inserido no 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. Temos ótimos tutoriais sobre como usar os elementos de linhas e para seções de Divi.

adicionar o módulo do blog divi builder.png

Localize o módulo do blog 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 "blog" e clicar em entrar para pesquisar e adicionar automaticamente o módulo do blog! Uma vez que o módulo é adicionado, você será bem-vindo com a lista de opções do módulo. Essas opções são divididas em três grupos principais: Conteúdo , Projeto et avançado .

Caso de uso do módulo de blog com um layout de grade em uma seção especializada com uma barra lateral direita

Para este exemplo, adicionarei um módulo de blog a uma página de blog. Esta página do blog tem um cabeçalho completo com um módulo de pesquisa abaixo. Sob o módulo de pesquisa, adicionarei uma seção especializada com o módulo de blog no lado esquerdo e uma seção de barra lateral à direita. A barra lateral à direita contém um widget de publicação recente, um módulo de email Optin e um módulo Person.

É assim que a página de exemplo se parece.

exemplo de página divi.jpg

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

Vamos começar.

Use o construtor visual para incluir uma seção especializada com o seguinte layout:

disposição especial divi.png

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

seletion zone divi builder.png

Em seguida, adicione o módulo do blog à linha.

use o módulo blog.png

Atualize as configurações do blog da seguinte maneira:

Opções de conteúdo

Número de Posts: 6
Saiba mais Botão: ON
Mostrar paginação: NÃO
Cor de fundo da grade: #ffffff

Opções de design

Layout: grade
Use Dropshadow: ON
Ícone de cor de sobreposição: #ffffff
Cor de sobreposição de passar o mouse: rgba (224,153,0,0.51) cabeçalho
Polícia:
Cabeçalho do Tamanho da Fonte: 21px
Cor do texto do cabeçalho: # 333333
Espaçamento entre letras: 1px
Altura da linha de cabeçalho: 1.2 em
Fronteira: SIM
Cor da borda: # f0f0f0
Largura da borda: 1px
Estilo de borda: sólido

Opções avançadas

CSS personalizado (botão Leia mais):

color: # e09900;
bloco de visualização;
text-align: center;
margem superior: 10px;
border: 1px solid #ccc;
preenchimento: 5px;
Transformação de Texto: Capitalize;
espaçamento entre letras: 1px;

configurações do blog divi.png

O avançado botão CSS personalizado para o botão Ler mais cria uma aparência personalizada que corresponde ao design.

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]

artigos de design de bloco divi.jpg

Na seção da barra lateral direita do layout da seção, você precisará adicionar um módulo da barra lateral que insere o widget de publicações recentes. Abaixo, você precisará adicionar um módulo de E-mail Optin. E, em seguida, em The Email Optin, você precisa adicionar o módulo Person com informações sobre o autor.

Isso é tudo!

Opções de conteúdo do blog

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

blog module divi.png

Número de posições (número de itens)

Definir o número de mensagens que você deseja visualizar. Você precisará ter mensagens para tudo que aparece neste módulo.

Selecione as categorias que você deseja incluir no fluxo de publicação. Todas as categorias de mensagens que você criou aparecerão aqui para você selecionar / desmarcar.

Categorias incluídas

Escolha as categorias que você deseja incluir no feed.

Formato de data e data

Defina o formato de data que você deseja exibir em seus posts aqui. O layout padrão é um formato M j, Y (6 Jan 2014). Codex WordPress em formatos de data para mais opções.

Conteúdo

A visualização do conteúdo completo não truncará suas postagens na página de índice. Show Preview mostrará apenas o seu texto de extração.

Número de deslocamento

Escolha o número de mensagens que você deseja compensar. Se você compensar por mensagens 3, por exemplo, as três primeiras postagens no seu feed de blog não serão exibidas.

Mostrar imagem em destaque

Essa opção permite que você escolha se deseja ou não que as miniaturas apareçam em seu módulo de blog.

Leia mais botão

Aqui você pode definir se deseja exibir o link "leia mais" após a extração ou não.

Visualizar autor

Escolha se quer ou não exibir o autor de cada postagem do blog na caixa pós meta sob o título do artigo.

Mostrar data

Escolha se deseja ou não exibir a data em que cada artigo foi criado na caixa pós meta abaixo do título da mensagem.

elementos para exibir o módulo divi blog.png

Mostrar categorias

Escolha se deseja ou não exibir as categorias de postagem na área pós meta abaixo do título da publicação.

Mostrar o número de comentários

Escolha se deseja ou não exibir o número de comentários na caixa pós meta abaixo do título da postagem.

Visualizar paginação

Escolha se deseja ou não exibir paginação para este feed. Para ativar a paginação numerada, você precisará instalar o plug-in WP Page Navi .

Etiqueta de administração

Isso mudará a tag do módulo no gerador para fácil identificação. Ao usar a exibição WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo da interface do Divi Builder.

Opções de design de blog

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

opção de design divi builder module blog.png

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]

Provisão

Você pode optar por exibir as postagens do seu blog em uma grade ou em um layout de largura total.

Imagem sobreposta

Se essa opção estiver ativada, um ícone de cor e de sobreposição será exibido quando um visitante passar por cima da imagem selecionada de uma mensagem.

Cor do ícone de sobreposição

Aqui você pode definir uma cor personalizada para o ícone de sobreposição.

Cor da capa pairando

Aqui você pode definir uma cor personalizada para a sobreposição.

Seletor de ícones de focalização

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

Cor do texto

Se o seu blog é colocado em um fundo claro, a cor do texto deve ser definida como "Dark". Visto, se o seu blog for colocado em um fundo escuro, a cor do texto deverá ser definida como "Claro".

Fonte de cabeçalho

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

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 de 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor do texto do cabeçalho

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu cabeçalho, escolha a cor de sua escolha 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 do texto do cabeçalho, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

cabeçalho de espaçamento de configuração divi.png

Altura da linha de cabeçalho

Altura da linha afeta o espaço entre cada linha do seu texto de cabeçalho 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 em o 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Fonte do corpo

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

Tamanho da fonte do corpo

Aqui você pode ajustar o tamanho do seu corpo de texto. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor do texto do corpo

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do corpo, escolha a cor desejada no seletor de cores usando essa 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 do texto do seu corpo, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Altura da linha do corpo

A altura da linha afeta o espaço entre cada linha do texto do 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 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Fonte Metas

Você pode alterar a fonte do seu meta-texto, 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.

seção meta data diiv builder.png

Tamanho da fonte Metas

Aqui você pode ajustar o tamanho do seu texto meta. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor de texto para meta

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

Espaçamento de letras meta

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do seu meta-texto, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Altura da Linha Meta

Altura da linha afeta o espaço entre cada linha do seu meta-texto 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çamento desejado no campo entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o 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 no 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, por exemplo em, vh, vw etc.

Estilo da beira

As bordas suportam oito estilos diferentes, incluindo: sólido, pontilhado, pontilhado, duplo, sulco, crista, inserção e início. Selecione o estilo de sua escolha no menu suspenso para aplicá-lo à sua borda.

Opções avançadas de blog

Na guia Avançado, você encontrará opções que os web designers mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar um CSS personalizado a qualquer 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.

seção avançada do módulo blog.png

ID CSS

Digite um ID CSS opcional para usar neste módulo. Um identificador 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 Divi Child ou no CSS personalizado 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

Um CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizada, você encontrará um campo de texto no qual poderá adicionar CSS diretamente a cada elemento. As entradas CSS nessas configurações já estão incorporadas nas tags de estilo. Você só precisa 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.

Isso é tudo para este Tutoriel.

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