Point culminant du plugin Divi : contenu intense

Le Divi Builder comprend un module de blog pour afficher les articles en fonction des catégories en pleine largeur ou en grille. Avez-vous déjà voulu plus de contrôle sur la mise en page de votre blog ? Vous pourriez être intéressé par un plugin tiers appelé Content Intense.

Content Intense est un plugin de BeSuperfly qui ajoute de nouvelles mises en page et fonctionnalités de style pour donner un nouveau look à votre module de blog. Il est basé sur le module de blog standard, il inclut donc toutes les fonctionnalités familières.

(Le plugin est disponible sur le site Web du développeur.)

Dans ce point culminant du plugin, nous examinerons les fonctionnalités et verrons à quoi cela ressemble sur la page. Je vais aussi le charger dans Extra (mais bien sûr c'est aussi compatible avec Divi).

Installation de contenu intense

Téléchargez et activez le contenu intense comme n'importe quel plugin. Une fois le plugin activé, vous verrez un nouvel élément de menu dans les paramètres du tableau de bord appelé Content Intense Plugin Activation. Cliquez dessus, entrez votre clé API et votre e-mail, puis enregistrez les modifications.

Module de contenu intense

Un nouveau module est ajouté au Divi Builder appelé Content Intense.

L'onglet Contenu vous permet d'afficher uniquement les publications, les pages uniquement ou les pages et les publications, le numéro à afficher, les catégories et le numéro de décalage. Affichez l'image en vedette, la méta (qui vous permet de choisir un séparateur), l'extrait, la navigation et l'arrière-plan. Comme vous le verrez, je simplifie sérieusement le nombre d'options dans les paramètres.

L'une des caractéristiques les plus uniques est que les catégories WordPress sont ajoutées aux pages. Si vous choisissez d'afficher des pages, elles sont sélectionnées lorsque vous choisissez leurs catégories.

L'onglet Conception vous permet de sélectionner l'une des 5 mises en page, d'activer la superposition, d'ajuster le texte de l'en-tête, le corps du texte et le méta-texte. Ajustez également la bordure, le bouton, l'espacement et l'animation.

L'Avancé inclut des fonctionnalités de relation de bouton afin que vous puissiez spécifier la valeur de l'attribut rel du lien. C'est idéal pour créer des signets, définir un lien pour nofollow, etc.

Paramètres par défaut du contenu intense

Les paramètres par défaut affichent l'image sélectionnée avec le Gravatar de l'auteur chevauchant le bas de l'image. Ceci est suivi de la méta de la publication, du titre, d'une ligne, de l'extrait de la publication et du bouton Lire la suite avec animation de survol. J'ai ajouté un arrière-plan dans la section pour l'aider à se démarquer.

Dans cet exemple, j'ai ajouté un astérisque pour le méta-séparateur, changé le nombre d'extraits de 270 à 100 et remplacé le bouton Lire la suite par du texte centré. Au lieu de la date, il indique depuis combien de temps le message a été publié. J'ai désactivé le décompte des commentaires.

Celui-ci ajoute de la couleur à l'arrière-plan derrière le texte. J'ai également déplacé le bouton vers la droite et défini l'extrait à 150.

Il existe cinq configurations différentes. Les exemples que nous avons vus jusqu'à présent utilisent Atlas - 3 colonnes, disposition verticale, avec avatar. Regardons chaque mise en page. J'utilise les paramètres par défaut.

Celui-ci est les Alpes. Il s'agit d'une disposition alternée horizontale à une colonne. L'arrière-plan du texte correspond à la couleur d'arrière-plan que j'ai choisie dans la section. Ce sont des cartes plates avec des effets de survol pour le bouton.

Il s'agit d'Himalaya, une mise en page verticale à 3 colonnes qui utilise l'image vedette du message comme arrière-plan. Il utilise également une animation de bouton. Ce texte est plus difficile à voir sans ajustements. Nous corrigerons cela plus tard avec une superposition.

C'est Rockies - une disposition verticale à 3 colonnes avec des effets de survol. Il place également l'image en vedette comme arrière-plan. Les effets de survol révèlent l'extrait complet et le bouton Lire la suite. Nous allons faire quelques ajustements pour rendre le texte plus lisible.

Celui-ci est Andes - une disposition verticale à 1 colonne avec avatar. Il utilise une version recadrée de l'image en vedette et utilise de petites lignes pour séparer les méta et des lignes plus grandes pour séparer les messages.

Au bas de la page, vous verrez des boutons de navigation. Vous pouvez les désactiver ou ajouter votre propre texte. Ils reprennent le style des autres boutons, donc lorsque vous avez stylisé les boutons en savoir plus, vous les avez également stylisés. Vous pouvez également utiliser du texte au lieu d'un bouton.

Exemple – Alpes avec Atlas

J'ai créé cette mise en page de blog à l'aide de 2 modules Content Intense. Le premier utilise le tracé des Alpes sans navigation. Le deuxième module utilise Atlas. J'ai défini son décalage sur 1 afin qu'il n'affiche pas la même image que le premier module. J'ai ajusté la couleur de la police à Arimo (un de mes préférés). Les boutons utilisent un dégradé. Au survol, ils passent à une couleur unie et augmentent l'espacement des lettres. Le bouton de navigation correspond.

Exemple – Alpes

Je suis une ventouse pour les mises en page alternées. J'aime le look des Alpes sans aucun changement, alors j'ai juste fait quelques petits ajustements. J'ai ajouté une bordure rouge, une superposition rouge et j'ai modifié les couleurs des boutons et des en-têtes. J'ai également changé la police en Dosis et l'ai mise en gras. Cela montre la superposition au survol.

En fait, je l'aime mieux sans la frontière. Celui-ci montre le bouton en survol.

Exemple – Andes

Cet exemple utilise 6 modules Content Intense différents - tous utilisant Andes et chacun est décalé de 1 de plus que le module précédent. J'ai ajouté un arrière-plan à la section avec une superposition. La police d'en-tête est Comfortaa. Le dernier module utilise la navigation. J'ai changé les boutons en texte.

Voici un aperçu de la conception normale à une seule colonne. J'ai également ajouté une superposition de survol. Tout le reste est par défaut.

Exemple – Himalaya

Celui-ci utilise Himalaya avec une superposition derrière le texte. J'ai désactivé la méta, changé le texte en clair, changé le style du bouton en blanc et réduit la police du bouton à 12 points. Le texte de l'en-tête est Bitter. La seule animation que j'ai incluse est pour le survol du bouton. Cela ferait un excellent CTA ou des liens vers des pages décrivant vos services.

Exemple – Rocheuses

J'adore le look des Rocheuses. Il a un bel effet d'ombre avec une animation de survol qui fait apparaître le texte et le bouton Lire la suite. J'aurais pu placer une superposition de texte mais je ne voulais pas couvrir l'image. Au lieu de cela, j'ai changé le texte en clair. J'ai également changé les couleurs de la méta et du bouton, et changé le séparateur en tiret.

Bien sûr, une superposition a l'air bien. J'ai ajouté une superposition noire et modifié l'opacité pour qu'une petite partie de l'image soit visible. La date dans le coin supérieur gauche utilise également la superposition. J'ai changé le bouton en texte et je l'ai déplacé vers la droite. J'aime ces trois points et cette ligne au bas des cartes. C'est un petit détail qui ajoute une touche d'éclat visuel.

Exemple – Supplément

Content Intense fonctionne très bien avec Extra. Je n'ai eu qu'à faire quelques ajustements mineurs là où j'ai utilisé Andes. Dans mon exemple, j'avais placé un fond blanc pour la zone de texte. Depuis que j'ai utilisé du texte blanc, je l'ai simplement changé en sombre. L'exemple ci-dessus est celui des Rocheuses. La seule différence était la couleur du texte du lien Lire la suite.

Styles téléchargeables

Des animations peuvent être ajoutées via CSS. Le site Web du développeur montre plusieurs animations qu'ils ont créées, comme celle ci-dessus qui déplace le texte en survol. Ce style et d'autres peuvent être téléchargés à partir d'eux dans un fichier JSON.

Licence et documentation

Choisissez parmi deux licences (aucune ne permet la revente) :

• Licence standard : pour une utilisation sur un seul site Web. Il comprend 1 pour le projet de développement et 1 pour le projet en direct.
• Licence illimitée : peut être utilisée dans des sites Web illimités pour un usage personnel et client.

Les mises à jour sont automatiques. Content Intense est disponible sur le site Web du développeur.

La documentation est prouvée sur le site Web du développeur. Il vous guide à travers les ajustements et fournit des démonstrations en cours de route.

Dernières pensées

Content Intense a quelques fonctionnalités de mise en page intéressantes, et encore plus de mises en page seront ajoutées à l'avenir, ce n'est donc que le début. Chacune des mises en page peut être stylisée avec les ajustements du module et personnalisée encore plus avec CSS. C'est intuitif à utiliser. Si vous souhaitez donner à votre blog un aspect différent, Content Intense pourrait être le plugin que vous recherchez.

Nous voulons de vos nouvelles. Avez-vous essayé Content Intense ? Faites-nous part de votre expérience dans les commentaires ci-dessous.

Image en vedette via LanKoga / shutterstock.com