Point culminant du plugin Divi : Divi Next Blurb

Divi Next Blurb est un module de présentation tiers qui ajoute plusieurs fonctionnalités pour créer des conceptions de présentation uniques. Le module affiche des icônes et des images en même temps, vous permet de personnaliser pratiquement chaque élément indépendamment et ajoute même de nombreux effets de survol à la plupart des éléments. Dans cet article, nous allons jeter un œil à Divi Next Blurb et voir ce qu'il peut faire.

Module Divi Next Blurb

Une fois que vous avez téléchargé et activé Divi Next Blurb, un nouveau module est ajouté au Divi Builder appelé Next Blurb. Vous n'aurez rien à configurer. Il est prêt à l'emploi.

Onglet Contenu Divi Next Blurb

L'onglet Contenu comprend des paramètres pour le texte, vous permettant d'activer un texte de pré-titre, de saisir le texte, de choisir la balise de titre et d'activer le texte de titre de publication. Vous pouvez également ajouter du contenu.

Le pré-titre place le texte au-dessus du titre tandis que le titre de la publication place le texte sous le titre. Vous pouvez modifier la balise de titre pour chacun.

Ajoutez une image et une icône en même temps ou indépendamment. Le module de présentation Divi standard n'affiche que l'un ou l'autre. Divi Next Blurb ouvre de nombreuses possibilités de conception en vous permettant d'afficher les deux en même temps.

Incluez un bouton avec le style de bouton standard.

Il comprend également de nombreuses options de couleur d'arrière-plan pour le titre, la description, l'image, l'icône et le bouton. Vous pouvez les activer et les régler indépendamment. Choisissez une couleur ou un dégradé pour chacun.

Onglet Divi Next Blurb Design

L'onglet Conception comprend des paramètres pour l'image, l'icône, les effets de survol, le texte du titre et de la description, ainsi que le texte du bouton, l'icône et les effets de survol. La plupart des éléments ont également des sections séparées pour l'espacement, les bordures et les ombres de la boîte. Il y a beaucoup d'ajustements pour concevoir votre présentation.

Image de présentation suivante

Les paramètres de l'image vous permettent de sélectionner le placement de l'image et d'ajuster la bordure. Cet exemple place l'image en bas à gauche.

Celui-ci place l'image au centre droit. J'ai ajouté une bordure et changé sa couleur. J'ai également ajouté une ombre de boîte.

Pour cet exemple, j'ai placé l'image en bas au centre. J'ai enlevé la bordure et arrondi les coins. Celui-ci a une ombre de boîte différente.

L'icône comprend également des options de placement. Vous pouvez également ajuster la taille, la couleur, la bordure, etc. Pour cet exemple, j'ai placé l'icône en bas à droite.

Icône de présentation suivante

Cet exemple montre l'icône au centre gauche. J'ai augmenté la taille, ajouté une bordure et changé la couleur de la bordure.

Cet exemple montre l'icône en haut au centre. J'ai réduit la taille, ajouté une ombre de boîte et arrondi aux coins pour créer un cercle.

Effets de survol Blurb suivants

L'effet de survol comprend une option 2D et inclinaison. L'option 2D propose 16 effets au choix.

Cet exemple montre l'effet de survol d'impulsion.

L'effet d'inclinaison comprend des options d'éblouissement, une option d'inversion, une perspective, une vitesse, des points de départ et d'arrivée, etc. Cet exemple montre l'option d'inclinaison standard avec l'éblouissement activé. J'ai laissé les paramètres par défaut.

Cet exemple ajoute plus d'éblouissement et de perspective. Il existe de nombreuses façons de personnaliser l'inclinaison.

Texte de présentation suivant

Le texte du titre a des paramètres pour le pré, l'en-tête et le post-texte. Ils incluent tous les paramètres que vous attendez pour le texte. J'ai ajusté les trois ensembles de texte dans cet exemple.

Le texte de description comprend tous les paramètres de texte standard, y compris les ajustements pour le texte, les liens, les puces, les citations, etc. Dans cet exemple, j'ai augmenté la taille de la police, l'ai changée en rouge et ajouté un effet d'ombre.

Boutons de présentation suivants

Tous les réglages standard du texte et des icônes des boutons sont inclus. J'ai augmenté la taille de la police et changé la couleur. Cet exemple montre les paramètres de l'icône du bouton.

Le survol du bouton comprend de nombreux ajustements, notamment la 2D, l'arrière-plan, le trait et l'icône. Les paramètres 2D incluent de nombreux effets de survol.

Le survol du bouton comprend de nombreux ajustements, notamment la 2D, l'arrière-plan, le trait et l'icône. Les paramètres 2D ont beaucoup d'effets de survol. L'effet d'arrière-plan comprend un autre ensemble d'effets. Cela montre le bouton en survol.

Stroke ajoute des ajustements d'arrière-plan et de bordure ainsi que plusieurs effets de survol. Cet exemple ajoute une bordure autour de l'intérieur et modifie les couleurs.

L'icône ajoute également de nombreux effets de survol qui n'affecteront que l'icône au survol.

Divi Next Blurb Exemple Un

À titre d'exemple, je souhaite remplacer le texte Vente sur le côté droit de la mise en page Leather Company par un module Next Blurb et ajouter quelques fonctionnalités.

Il est normalement composé d'un module de texte et d'un bouton, comme vous pouvez le voir ici dans la vue filaire. Le fond noir est ajouté à la colonne.

Voici l'appel à l'action de vente recréé en utilisant uniquement le module Next Blurb. J'utilise toujours le fond noir pour la colonne dans cet exemple.

Voici un aperçu de la vue filaire. Le module fonctionne bien avec les sections spécialisées.

Je peux maintenant ajouter des effets et des fonctionnalités que je ne pouvais pas obtenir avec l'image et le bouton dans la mise en page d'origine. Par exemple, j'ai ajouté un effet de survol Grow Rotate 2D. Depuis que j'ai placé le texte d'en-tête et le bouton sur le fond noir pour cet espace de colonne, la carte semble rester en place pendant que le contenu s'incline.

Celui-ci inclut l'effet d'inclinaison. J'ai ajouté un reflet pour que la carte soit visible en arrière-plan en survol.

Pour cet exemple, j'ai ajouté une image au texte de présentation. Je l'ai laissé en haut de la carte de présentation.

Pour celui-ci, j'ai ajouté l'effet de survol pop, juste pour montrer l'animation. C'est un bon moyen d'attirer l'attention des visiteurs lorsqu'ils survolent le texte de présentation.

Celui-ci inclut l'effet d'inclinaison sans éblouissement activé. La carte s'incline dans la colonne, mais les bords de la carte ne sont pas aussi perçus.

J'ai supprimé l'arrière-plan de la colonne et l'ai ajouté au module. Cela permet de conserver le fond noir derrière le texte. J'ai également ajouté une ombre de boîte juste à l'image. J'ai supprimé la bordure, donc lorsque j'utilise un effet d'inclinaison, la bordure ne s'affiche pas.

Voici à quoi cela ressemble avec l'effet d'inclinaison. Il fait un excellent travail d'ajout de perspective à l'image. J'aime le look de l'ombre de la boîte.

Divi Next Blurb Exemple 2

Pour cet exemple, je souhaite remplacer les textes de présentation de la mise en page de la page d'accueil de démarrage par les modules Next Blurb et les rendre un peu plus complexes dans leur conception.

Il était facile de recréer le texte de présentation avec ses paramètres actuels. Tout ce que j'ai fait ici est d'ajouter l'image, le titre et le contenu. Maintenant, je vais faire quelques ajustements.

J'ai déplacé l'image en haut à gauche et ajouté une ombre de boîte à la fois à l'image et au corps du texte. Les coins de la bordure sont arrondis et le corps du texte a maintenant 5 pixels de remplissage pour le haut et le bas.

Pour celui-ci, j'ai placé l'icône au centre à droite et j'ai ajusté l'espacement des images pour l'aligner avec le texte du titre. J'ai rendu le texte blanc et donné à l'arrière-plan du corps la couleur d'origine du texte. Pour le texte de l'en-tête, j'ai fait un dégradé pour l'arrière-plan.

Voici les résultats. J'ai ajouté un rembourrage en haut du texte de l'en-tête, centré tout le texte et ajouté un bouton avec une bordure inférieure. J'ai ajouté les images en bas au centre et augmenté leur taille. Les images incluent une touche de rembourrage en haut pour ajouter un peu d'espace entre elles et la zone de contenu. Les boutons ont une ombre de boîte qui est juste perceptible. J'ai masqué les bordures supérieure et latérale afin que seule la bordure inférieure s'affiche. Pour l'effet de survol, j'ai ajouté une inclinaison 3D.

Voici à quoi ressemblent les prochains Blurbs dans la mise en page.

Divi Next Blurb Prix et où acheter

Divi Next Blurb propose trois licences :

• Licence unique – 25,00 $
• Licence illimitée – 49,00 $
• Licence à vie – 99,00 $

Vous pouvez l'acheter sur le site Web du développeur.

Mettre fin aux pensées

Divi Next Blurb est un module intéressant pour Divi. Je n'ai fait qu'effleurer la surface de ce qu'il peut faire et de ce qui peut être conçu avec. Il a beaucoup plus de réglages et d'ajustements que ce à quoi je m'attendais. Presque chaque élément a ses propres paramètres de bordure, d'espacement et d'ombre de boîte.

Il y a quelques fonctionnalités qui semblent pouvoir être placées dans des zones plus standard. Par exemple, le sélecteur de balise de titre se trouve dans l'onglet Contenu plutôt que dans l'onglet Conception. Il est toujours facile de comprendre où se trouvent les choses et je n'ai eu aucun mal à comprendre à quoi servent les paramètres.

J'aime beaucoup Divi Next Blurb. Si vous êtes intéressé par un module de présentation facile à utiliser qui fait beaucoup plus que le module Divi standard, Divi Next Blurb vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Next Blurb ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via Leonid Zarubin / shutterstock.com