Point fort du produit Divi : Divi Den Pro – Bibliothèque de mise en page

Divi Den Pro - Layout Library est un plugin tiers avec une énorme bibliothèque d'éléments Divi prédéfinis pour vous aider à créer des sites Web plus rapidement. Il comprend une interface utilisateur unique qui peut être recherchée et triée, ce qui facilite la recherche des mises en page. Dans cet article, nous examinerons Divi Den Pro - Layout Library pour vous aider à décider si c'est le bon produit pour votre boîte à outils de conception Divi.

Installation de Divi Den Pro – Bibliothèque de mise en page

L'installation de Divi Den Pro - Layout Library était simple. Cela fonctionne de la même manière que le téléchargement de n'importe quel plugin, mais vous devez être connecté à votre compte Divi Marketplace pour qu'il soit disponible dans Divi. Tout d'abord, pour installer, allez à:

1. Plugins
2. Ajouter nouveau
3. Télécharger des plug-ins
4. Choisir le fichier
5. Installer maintenant

Ensuite, une fois le plugin installé, activez-le comme d'habitude, et vous verrez un nouveau menu ajouté à votre tableau de bord.

1. Activer le plugin

Contenu de la bibliothèque de mise en page

Divi Den Pro - Layout Library est livré avec 2615 éléments de bibliothèque. Cela comprend 1988 sections et modules, 631 mises en page, 39 menus et 18 conceptions complètes de sites Web. Tous les articles sont pré-stylés. Les mises en page sont étiquetées, testées et optimisées pour différentes tailles d'écran.

Il existe plusieurs manières de les utiliser dans vos layouts Divi. Vous trouverez les mises en page dans le menu Divi Den Pro DM et dans le Divi Theme Builder. Le menu Divi Den Pro DM est le moyen le plus simple de les utiliser. Vous pouvez les rechercher par mot-clé et par catégorie et les importer dans votre bibliothèque Divi.

Divi Den Pro DM Menu

Vous trouverez un nouvel élément de menu dans votre tableau de bord WordPress appelé Divi Den Pro DM. Le menu comprend de nombreux liens, que vous trouverez également sous forme d'onglets dans le menu lui-même.

Recherche de mise en page

Le premier onglet est le Layout Finder. Cela inclut un champ de recherche avec des filtres à gauche et les résultats à droite. Il comprend également des onglets vous permettant d'afficher toutes les mises en page, uniquement les mises en page gratuites ou uniquement les mises en page professionnelles. Les filtres affichent le nombre de mises en page dans ce type. Ils sont divisés en mises en page, sections, modules, catégories, collections, Divi Theme Builder et Plugin Theme Builder.

La zone de résultats affiche une vignette de la mise en page. La vignette défilera au survol si la mise en page est plus grande que le conteneur. Vous pouvez afficher la mise en page dans un autre onglet, enregistrer la mise en page dans votre bibliothèque Divi ou télécharger la mise en page sur votre ordinateur sous forme de fichier JSON.

La sélection d'un filtre l'ouvre pour afficher les options. J'ai ouvert Collections, qui affiche les noms des mises en page de Divi Den. En sélectionner une affiche les mises en page de cette collection dans la zone de droite.

J'ai cliqué pour afficher une mise en page et cela a ouvert la démo sur la page Divi Den dans un autre onglet. La page affiche plusieurs mises en page, sections, etc. Je survole l'image en haut au centre pour afficher ses effets de survol.

Dernier

L'onglet Dernier affiche les derniers articles du blog Divi Den. C'est un bon moyen d'apprendre les nouveautés de la bibliothèque de mises en page.

Tutoriels

L'onglet Tutoriels comprend tous les tutoriels qui enseignent comment utiliser Divi Den Pro - Layout Library. Ils incluent des vidéos intégrées qui s'affichent lorsque vous cliquez sur un didacticiel, afin que vous puissiez apprendre directement depuis le tableau de bord Divi Den sans quitter WordPress. Cela aide à la convivialité, donc si vous avez besoin d'aide pour quelque chose, vous le trouverez ici.

Générateur de thème

L'onglet Theme Builder divise les mises en page en Divi Theme Builder et Plugin Theme Builder. Il montre les collections, les types de pages, etc. Ceux-ci sont également ajoutés au Divi Theme Builder. Vous pouvez également lancer le générateur de thèmes à partir d'ici.

Le Plugin Theme Builder a un lien pour ouvrir le Theme Customizer.

Le personnalisateur de thème ajoute trois nouveaux onglets de personnalisation pour les paramètres de page, de blog et globaux. Cela inclut des fonctionnalités supplémentaires telles qu'un personnalisateur de popup, une barre collante, plus d'icônes, le bouton de retour en haut, une page à venir, des personnalisations de modèles et bien plus encore.

Fichiers CSS personnalisés

L'onglet Fichiers CSS personnalisés fournit le CSS personnalisé des mises en page Divi Den que vous pouvez copier et modifier. Cliquer sur l'un ouvre le CSS dans un autre onglet. Une vidéo intégrée montre comment utiliser le CSS personnalisé.

Avancé

L'onglet Avancé comprend l'onglet Marque blanche et l'onglet Plus d'options. White Label vous permet de renommer le plugin pour qu'il corresponde à votre marque.

L'onglet Plus d'options vous permet de déplacer l'onglet Divi Den Pro dans les éléments Divi Builder. C'est activé par défault.

Bibliothèque de mise en page Divi Den Pro dans Divi Builder

Un onglet pour Divi Den Pro - Bibliothèque de mise en page est ajouté au modal Modules.

La sélection de l'onglet ouvre le menu dans lequel vous pouvez choisir la mise en page souhaitée. Les mises en page sont téléchargées sous forme de fichiers JSON, vous devrez donc les télécharger sur des pages et des publications si vous souhaitez les utiliser.

Bibliothèque de mise en page Divi Den Pro dans Divi Theme Builder

L'interface Divi Den Pro - Layout Library est également ajoutée au bas de l'écran Divi Theme Builder. Cela fonctionne de la même manière que dans le tableau de bord WordPress.

Cela fonctionne de la même manière dans le générateur de thèmes que sur les pages et les publications.

Exemples de bibliothèque de mise en page Divi Den Pro

Maintenant que nous avons vu comment utiliser l'interface Divi Den Pro – Layout Library, regardons quelques exemples. Nous en examinerons quelques-uns de chaque type.

Dispositions

Ensuite, nous examinerons quelques mises en page. Je vais les charger dans le Divi Theme Builder. Une fois que vous avez enregistré les mises en page dans votre bibliothèque Divi, elles sont disponibles dans vos mises en page. Recherchez-les et sélectionnez les catégories sur la gauche.

Boutique Landing Page V3 Ragnar

Ceci est la partie supérieure de Shop Landing Page V3 Ragnar. Il comprend une section héros avec un CTA par e-mail. Une section boutique affiche les produits en vedette et comprend une superposition animée qui fait défiler un message en gros texte au survol.

Voici la partie inférieure de Shop Landing Page V3 Ragnar. Les images extra-larges créent des CTA de boutique et incluent des boutons animés. Une section de blog unique affiche l'image en vedette derrière le texte qui apparaît sur un côté.

Carrières Page V1 Tina

Ceci est la partie supérieure de la page Carrières V1 Tina. Il comprend une image de héros avec un titre qui se chevauche, une introduction avec une légende et deux colonnes de texte. Vous trouverez ensuite une section de postes ouverts affichés sous forme de cartes.

Ceci est la partie inférieure de la page Carrières V1 Tina. Les présentations avec des animations de survol fournissent des informations suivies d'un CTA pour envoyer un CV et une section des avantages de l'entreprise.

Page du blog de l'ancien temps

Cet exemple est la partie supérieure de la page du blog Old Times. Il comprend une section héros avec un message sur une image d'arrière-plan et un bouton avec une animation de survol. Une section de blog affiche un article de blog avec une grande image en vedette à gauche et des articles avec une image en vedette plus petite sous forme de barre latérale à droite. Une ligne jaune sépare la section blog de la section héros. Toutes les cartes de blog incluent des animations d'inclinaison.

Il s'agit de la partie inférieure de la page du blog Old Times. Il utilise également des lignes jaunes pour la séparation et comprend deux sections de blog à trois colonnes, un grand formulaire de courrier électronique et un pied de page.

Mise en page du menu Jamie

Voici la partie supérieure de la mise en page du menu Jamie. Il comprend une section héros avec des icônes qui renvoient aux différentes catégories de menus alimentaires. Ils incluent des animations de survol. Un menu alimentaire à deux colonnes suit celui-ci avec une image à gauche et une description à droite. La nourriture est divisée en catégories.

Mise en page du menu Jamie

Il s'agit de la moitié inférieure de la mise en page du menu Jamie. Il continue le menu des aliments et comprend des informations de contact avec une carte pleine largeur.

Disposition de la page d'accueil Showreel

Il s'agit de la partie supérieure de la mise en page de la page d'accueil Showreel. La section héros comprend un bouton qui lit une vidéo intégrée et plusieurs présentations sur une image d'arrière-plan en plein écran. Ensuite, un ensemble d'onglets affiche des informations. De grandes images avec des superpositions animées sont liées aux services.

Il s'agit de la partie inférieure de la présentation de la page d'accueil Showreel. Il continue les grandes images et inclut une autre section d'images pour les services avec des animations de superposition inclinées. Il comprend également des compteurs de nombres stylisés, un formulaire de courrier électronique et un pied de page.

Page de barre de progression visuelle Freddie

Celui-ci est la page de barre de progression visuelle Freddie. Il a une mise en page élégante, mais l'élément principal que je veux montrer est la barre de progression. C'est la section héros de la mise en page. Un menu se trouve au bas de l'écran. Lorsque vous faites défiler, le menu s'attache en haut de l'écran et affiche la progression dans la mise en page.

La section dans cet exemple est des études de cas. La barre de progression s'affiche en jaune pour chaque section que j'ai parcourue. Les images de cette section incluent des effets d'inclinaison.

Sections

Si vous avez des sections Divi Den Pro – Layout Library enregistrées dans votre bibliothèque Divi, un onglet Divi Den Pro DM est ajouté à votre section modale.

Module de musique Greatest Hits Freddie

Greatest Hits Music Module Freddie fournit une section de lecteur audio stylisée avec un fond noir et des effets de survol jaunes.

Démo de la galerie de styles

Styling Gallery Demo fournit une galerie d'images intéressante avec différentes formes de bordure et un bloc de couleur pour séparer les images.

Lintang Process Grace

Styling Gallery Demo fournit une liste d'étapes. Ils sont placés horizontalement et incluent des images ou des couleurs en forme et des effets de survol.

Produit Thunderbolt Freddie

Thunderbolt Product Freddie est une section de produits qui affiche un curseur de produit d'un côté et des informations stylisées de l'autre.

Alula Chronologie Grace

Alula Timeline Grace crée une chronologie verticale alternative avec des images d'un côté et des informations de l'autre.

Modules

L'option Modules du tableau de bord affiche des boutons. En voici quelques-uns que j'ai téléchargés.

J'ai ajouté tous les boutons que j'ai téléchargés sur une seule page. Chacun des boutons comprend des animations de survol captivantes.

Où acheter la bibliothèque de mise en page Divi Den Pro

Divi Den Pro - Layout Library est disponible sur Divi Marketplace pour 189 $. Il comprend une utilisation illimitée du site Web, un an d'assistance et de mises à jour et une garantie de remboursement de 30 jours.

Fin des réflexions sur la bibliothèque de mise en page Divi Den Pro

C'est notre regard sur Divi Den Pro - Bibliothèque de mise en page. Il y a beaucoup de mises en page dans cette bibliothèque. L'interface utilisateur est simple. La recherche, le tri, l'importation et le téléchargement des mises en page sont intuitifs. J'ai trouvé que le lien sur les sections et les modules était plus limité que le tableau de bord, une fois que les mises en page sont dans la bibliothèque, elles sont disponibles en sélectionnant les options Ajouter à partir de la bibliothèque. Si vous souhaitez ajouter plusieurs milliers de mises en page conçues par des professionnels à votre bibliothèque Divi, Divi Den Pro - Layout Library vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Den Pro – Layout Library ? Faites-nous savoir ce que vous en pensez dans les commentaires.