Destaque do plug-in Divi: conteúdo intenso

O Divi Builder inclui um módulo de blog para exibir postagens com base em categorias em largura total ou layout de grade. Você sempre quis ter mais controle sobre o layout do seu blog? Você pode estar interessado em um plug-in de terceiros chamado Conteúdo intenso.

Content Intense é um plugin da BeSuperfly que adiciona novos layouts e recursos de estilo para dar ao seu módulo de blog uma nova aparência. É baseado no módulo de blog padrão, portanto, inclui todos os recursos familiares.

(O plug-in está disponível no site do desenvolvedor.)

Neste destaque do plugin, vamos dar uma olhada nos recursos e ver como fica na página. Também vou carregá-lo no Extra (mas é claro que também é compatível com Divi).

Instalando conteúdo intenso

Carregue e ative o conteúdo intenso como qualquer plugin. Assim que o plugin for ativado, você verá um novo item de menu em Configurações no painel chamado Content Intense Plugin Activation. Clique aqui e insira sua chave de API e e-mail e salve as alterações.

Módulo de conteúdo intenso

Um novo módulo é adicionado ao Divi Builder chamado Content Intense.

A guia Conteúdo permite que você exiba apenas postagens, apenas páginas ou páginas e postagens, o número a ser exibido, as categorias e o número de deslocamento. Mostra a imagem em destaque, meta (que permite escolher um separador), trecho, navegação e plano de fundo. Como você verá, estou simplificando seriamente o número de opções nas configurações.

Um dos recursos mais exclusivos é que as categorias do WordPress são adicionadas às páginas. Se você optar por exibir páginas, elas são selecionadas quando você escolhe suas categorias.

A guia Design permite selecionar um dos 5 layouts, habilitar a sobreposição, ajustar o texto do cabeçalho, o texto do corpo e o metatexto. Ajuste também a borda, o botão, o espaçamento e a animação.

O avançado que inclui recursos de relacionamento de botão para que você possa especificar o valor do atributo rel do link. Isso é ótimo para criar favoritos, definir um link para nofollow, etc.

Configurações padrão intensas de conteúdo

As configurações padrão exibem a imagem em destaque com o Gravatar do autor sobrepondo a parte inferior da imagem. Isso é seguido pelo meta post, título, uma linha, trecho do post e botão leia mais com animação flutuante. Eu adicionei um plano de fundo na seção para ajudá-lo a se destacar.

Neste exemplo, adicionei um asterisco para o meta separador, alterei a contagem de trechos de 270 para 100 e substituí o botão ler mais por texto centralizado. Em vez da data, mostra há quanto tempo o post foi publicado. Desativei a contagem de comentários.

Este adiciona um pouco de cor ao fundo atrás do texto. Também movi o botão para a direita e defini o trecho como 150.

Existem cinco layouts diferentes. Os exemplos que vimos até agora usam Atlas - 3 colunas, layout vertical, com avatar. Vejamos cada layout. Estou usando as configurações padrão.

Este é o Alps. É um layout horizontal alternado de uma coluna. O fundo do texto corresponde à cor de fundo que escolhi na seção. Estas são cartas planas com efeitos de foco para o botão.

Este é o Himalaia, um layout vertical de 3 colunas que usa a imagem em destaque do post como plano de fundo. Ele também usa animação de botão. Este texto é mais difícil de ver sem ajustes. Vamos consertar isso mais tarde com uma sobreposição.

Isto é Rockies - um layout vertical de 3 colunas com efeitos de flutuação. Ele também coloca a imagem em destaque como plano de fundo. Os efeitos de foco revelam o trecho completo e o botão ler mais. Faremos alguns ajustes para tornar o texto mais legível.

Este é Andes - um layout vertical de 1 coluna com avatar. Ele usa uma versão recortada da imagem em destaque e usa pequenas linhas para separar meta e linhas maiores para separar postagens.

Na parte inferior da página, você verá os botões de navegação. Você pode desativá-los ou adicionar seu próprio texto. Eles assumem o estilo dos outros botões, portanto, quando você definir o estilo dos botões Ler mais, você os estilizou também. Você também pode usar texto em vez de um botão.

Exemplo - Alpes com Atlas

Eu criei este layout de blog usando 2 módulos de conteúdo intenso. O primeiro usa o layout dos Alpes sem navegação. O segundo módulo usa Atlas. Eu defini seu deslocamento para 1 para que ele não mostre a mesma imagem do primeiro módulo. Eu ajustei a cor da fonte para Arimo (uma das minhas favoritas). Os botões usam um gradiente. Ao passar o mouse, eles assumem uma cor sólida e aumentam o espaçamento entre as letras. O botão de navegação corresponde.

Exemplo - Alpes

Eu sou um otário para layouts alternativos. Eu amo a aparência do Alps sem nenhuma alteração, então fiz apenas alguns pequenos ajustes. Eu adicionei uma borda vermelha, uma sobreposição vermelha e alterei as cores do botão e do cabeçalho. Eu também mudei a fonte para Dosis e coloquei em negrito. Isso mostra a sobreposição ao passar o mouse.

Na verdade, eu gosto mais sem fronteiras. Este mostra o botão em foco.

Exemplo - Andes

Este exemplo usa 6 módulos de conteúdo intenso diferentes - todos eles usando Andes e cada um é compensado por 1 a mais do que o módulo anterior. Eu adicionei um plano de fundo à seção com uma sobreposição. A fonte do cabeçalho é Comfortaa. O último módulo usa navegação. Eu mudei os botões para texto.

Aqui está uma olhada no design normal de coluna única. Também adicionei uma sobreposição de foco. Todo o resto é padrão.

Exemplo - Himalaia

Este usa o Himalaia com uma sobreposição atrás do texto. Desativei o meta, mudei o texto para claro, mudei o estilo do botão para branco e reduzi a fonte do botão para 12 pontos. O texto do cabeçalho é amargo. A única animação que incluí é para passar o mouse sobre o botão. Isso daria um ótimo CTA ou links para páginas que descrevem seus serviços.

Exemplo - Montanhas Rochosas

Eu amo o visual das Montanhas Rochosas. Tem um belo efeito de sombra com animação flutuante que traz o texto e o botão ler mais. Eu poderia ter colocado uma sobreposição de texto, mas não queria cobrir a imagem. Em vez disso, mudei o texto para claro. Eu também mudei as cores do meta e do botão, e mudei o separador para um travessão.

É claro que uma sobreposição parece boa. Eu adicionei uma sobreposição preta e alterei a opacidade para que um pouco da imagem apareça. A data no canto superior esquerdo também usa a sobreposição. Mudei o botão para texto e movi-o para a direita. Gosto desses três pontos e linhas na parte inferior dos cartões. É um pequeno detalhe que adiciona um toque de brilho visual.

Exemplo - Extra

O conteúdo intenso funciona muito bem com o Extra. Eu só tive que fazer alguns pequenos ajustes onde usei Andes. No meu exemplo, coloquei um fundo branco para a área de texto. Como usei texto branco, simplesmente mudei para escuro. O exemplo acima é Rockies. A única diferença era a cor do texto para o link leia mais.

Estilos para download

As animações podem ser adicionadas por meio de CSS. O site do desenvolvedor mostra várias animações que eles criaram, como a acima, que move o texto ao passar o mouse. Este e outros estilos podem ser baixados deles em um arquivo JSON.

Licença e Documentação

Escolha entre duas licenças (nenhuma permite revenda):

• Licença padrão: para uso em um único site. Inclui 1 para o Projeto de Desenvolvimento e 1 para o Projeto Live.
• Licença ilimitada: pode ser usada em sites ilimitados para uso pessoal e do cliente.

As atualizações são automáticas. O conteúdo intenso está disponível no site do desenvolvedor.

A documentação é comprovada no site do desenvolvedor. Ele o conduz pelos ajustes e fornece demonstrações ao longo do caminho.

Pensamentos finais

Conteúdo intenso tem alguns recursos de layout interessantes e ainda mais layouts serão adicionados no futuro, então este é apenas o começo. Cada um dos layouts pode ser estilizado com os ajustes do módulo e personalizado ainda mais com CSS. É intuitivo de usar. Se você estiver interessado em dar uma aparência diferente ao seu blog, Content Intense pode ser o plug-in que você está procurando.

Nós queremos ouvir de você. Você já experimentou o conteúdo intenso? Conte-nos sobre sua experiência com ele nos comentários abaixo.

Imagem em destaque via LanKoga / shutterstock.com