Divi Plugin Highlight - Divi Blog Extras

Divi inclui um módulo de blog para exibir suas postagens em largura total ou layout de grade. É um bom módulo e dá conta do recado. E se você quisesse layouts e recursos diferentes? Isso pode ser feito com CSS, mas um plugin de terceiros chamado Divi Blog Extras torna a tarefa muito mais fácil.

Divi Blog Extras é um plugin de terceiros da Divi Extended que adiciona um novo módulo ao Divi Builder com vários novos recursos para exibir suas postagens de blog. Inclui seis designs de layout diferentes e adiciona um recurso de carregamento AJAX com um botão carregar mais. As postagens são carregadas conforme você rola e o carregamento é rápido. Você pode alterar o texto dos botões ler mais e carregar mais.

Neste plugin em destaque, daremos uma olhada no Divi Blog Extras e obteremos algumas idéias do que pode ser feito com este plugin. As imagens para esses exemplos foram retiradas de Unsplash.com.

Instalação e configurações dos extras do Divi Blog

Faça upload e ative normalmente. Um novo módulo denominado Divi Blog Extras estará então disponível no Divi Builder. Para usá-lo, basta colocá-lo em uma linha como qualquer módulo. Como as opções são as mesmas dos módulos Divi Builder padrão, o uso deste módulo é intuitivo.

As configurações de conteúdo incluem as opções familiares e tem seis opções de layout, comprimento de trecho, cores de categoria, carregar mais texto de botão, sobreposição de imagem em destaque, ler mais texto de botão e opções de cor de texto. As configurações de Design incluem cabeçalho, meta e texto do corpo e estilo de borda. O layout Block Extended adiciona a posição da imagem e o Classic adiciona ícones sociais. Vamos examinar mais de perto cada um dos layouts.

Grid Extended

O layout padrão, Grid Extended, exibe postagens de blog com imagens e texto alternados. As imagens ficam mais claras ao pairar. Os nomes das categorias são colocados dentro de uma caixa. no modo responsivo, as imagens são colocadas na parte superior.

Neste exemplo, adicionei uma sobreposição de foco, ícone de foco, alterei o texto para ler mais, limitei o trecho a 100 caracteres e alterei o texto da categoria e as cores de fundo. A animação instantânea é exibida quando você passa o mouse sobre qualquer parte da postagem.

Box Extended

Box Extended coloca o trecho em uma caixa que se sobrepõe à imagem e remove a caixa ao redor do nome da categoria. A imagem do autor é adicionada à meta seção. As imagens e o texto se alternam. Este é um dos layouts de blog mais elegantes.

Neste exemplo, alterei a fonte da categoria e as cores de fundo, limitei o comprimento do trecho a 150 caracteres, alterei a fonte para azul e alterei o texto do botão ler mais. O foco padrão ilumina a imagem como visto na imagem superior acima.

Largura completa

Largura total coloca as imagens à esquerda e o trecho à direita, adicionando uma data estilizada à extrema esquerda. Cada postagem é separada por uma linha. O nome da categoria é colocado dentro de meta.

Este exemplo desativa a data e a meta informação. O texto usa cores personalizadas. Eu mudei o leia mais e carreguei mais o texto do botão. O trecho é limitado a 200 caracteres.

Todos os layouts são responsivos. Aqui está uma olhada no visual responsivo da Full Width. Isso mostra dois módulos lado a lado em uma linha de 2 colunas.

Bloco Estendido

Block Extended é uma grade de blog que adiciona o nome da categoria sobre a imagem e meta na parte inferior do cartão. A imagem aumenta quando você passa o mouse sobre qualquer parte do cartão. Gosto desse tipo de microinteração porque mostra que o cartão é clicável.

O Bloco Estendido possui três opções de exibição das imagens. Este exemplo coloca a imagem em destaque no fundo com o texto em uma sobreposição.

Este exemplo alterna a imagem de fundo entre as duas primeiras opções.

Fundo de largura total

Full Width Background exibe uma versão recortada da imagem em largura total e coloca o trecho com meta em uma sobreposição sobre a imagem. A colocação do trecho se alterna. Meta é separada do trecho por uma linha.

Este exemplo usa uma sobreposição escura sobre a imagem para mostrar que a sobreposição do trecho não usa a mesma sobreposição ao passar o mouse. O fundo da seção é vermelho para este exemplo. Observe que o vermelho aparece ao passar o mouse. Também adicionei meu próprio texto de botão para ler mais e uma borda de 2 pixels.

Clássico

O layout Clássico exibe as postagens do blog com imagens em tamanho real e trechos de largura total sob as imagens. A categoria e a data são colocadas acima do título. O título inclui um separador de linha curto para destacá-lo da imagem. Abaixo do trecho está o nome do autor e o número de comentários separados por uma barra. Um separador de linha mais fino e mais largo separa as postagens umas das outras.

Este layout tem a opção de exibir ícones sociais. Clicar em Carregar mais (ou como o rotulei - Ver mais artigos) exibe o próximo conjunto de postagens, que é igual ao número de postagens que selecionei para exibir. Neste exemplo, estou exibindo duas postagens. Load More carrega os próximos 2 posts.

Criando um Layout Único com Extras do Divi Blog

Vários módulos podem ser usados ​​juntos para criar layouts de magazine. Este layout simples inclui quatro módulos exibindo o layout Gird Extended. Cada módulo exibe categorias diferentes. Os dois no meio exibem duas postagens cada.

Isso cria um layout de revista com diferentes categorias para as várias seções. Este exemplo mostra como o Extended Grid parece responsivo.

Este é o mesmo layout do Divi Builder, mas usa o fundo de largura total. As sobreposições cobrem as imagens quase completamente quando em modo responsivo.

Este exemplo usa o layout Classic para o módulo superior e Grid Extended para os próximos dois módulos. Cada um dos módulos exibe categorias diferentes e tem seu próprio estilo para o texto da categoria. O módulo superior não exibe um trecho.

Isso cria um layout de revista interessante. Eu também defino as linhas para exibir a largura total. Você pode misturar e combinar os layouts para obter um design exclusivo. Criei os layouts com diferentes categorias para cada módulo. Em uma atualização futura, o módulo terá um recurso de deslocamento para que você possa usar vários módulos na mesma categoria.

Licença

Um único site custa $ 15. A licença estendida é de $ 30 e pode ser usada em sites ilimitados para você e seus clientes. Inclui atualizações vitalícias.

Este plugin não funciona com o Extra.

• Você pode comprar este plugin no site do Divi Extended.

Pensamentos finais

Divi Blog Extras adiciona alguns recursos de design e estilo agradáveis ​​para dar um toque especial ao seu módulo de blog. Ele também adiciona a capacidade de definir o estilo de fundos e texto de categorias. Ele usa AJAX para carregar e inclui um novo botão de carregamento. Você pode até adicionar seu próprio texto para carregar mais e ler mais botões. Cada um desses designs é ótimo para dar ao seu blog uma aparência exclusiva do blog padrão. Se você deseja um design de blog que vá além do módulo de blog padrão do Divi Builder, o Divi Blog Extras pode ser o módulo que você está procurando.

Nós queremos ouvir de você. Você já experimentou o Divi Blog Extras? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via pulsar011 / shutterstock.com