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.