Les layouts Divi sont disponibles directement depuis le Visual Builder, et ce, depuis la version 3.0.99 de Divi. Ces layouts – appelés aussi « mises en page » – ont été créés par des graphistes/webdesigners expérimentés qui travaillent au sein de l’équipe d’ElegantThemes.
Dans cet article, je vous propose de découvrir les layouts Divi qui sont disponibles en 1 clic depuis le Visual Builder et qui vont vous faire gagner beaucoup de temps lors de vos créations de sites avec Divi.
Voici le programme :
- 1 – Comment faisait-on avant les layouts Divi ?
- 2 – Comment insérer un layout Divi maintenant ?
-
3 – Plus de 2600 layouts Divi disponibles !
- La catégorie Art & Design
- La catégorie Business
- La catégorie Community & Non-Profit
- La catégorie Éducation
- La catégorie Events
- La catégorie Fashion & Beauty
- La catégorie Food & Drink
- La catégorie Health & Fitness
- La catégorie Lifestyle
- La catégorie Online Store
- La catégorie Services
- La catégorie Simple
- La catégorie Technology
- 4 – Utilisation individuelle de chaque mise en page Divi
- 5 – Les mises en page de Divi, en conclusion…
1 – Comment faisait-on avant les layouts Divi ?
Avant que le Divi Builder embarque des layouts pré-conçus, ElegantThemes distribuait au compte-goûte des packs de mises en page pré-faites que l’on pouvait télécharger depuis le site officiel.
S’ensuivait alors une série de tutoriels pour apprendre comment s’en servir et comment les customiser. C’était déjà bien sympathique !
Toutefois, certains novices pouvaient être perdus quant à l’installation de ces fameux packs : il fallait télécharger le dossier.zip, extraire les fichiers .json puis les importer depuis la bibliothèque de Divi.
Pas compliqué mais bien plus chronophage que la fonctionnalité du Divi Builder…
Pour plus d’explications, lire : comment importer ou exporter un layout Divi.
2 – Comment insérer un layout Divi maintenant ?
À présent, la manipulation devient plus simple et plus intuitive.
En effet, deux clics suffisent pour installer un nouveau pack de layouts Divi !
Voici comment faire :
- Rendez-vous dans votre administration puis ajoutez une nouvelle page (par exemple)
- Ajoutez un titre, comme à votre habitude, puis activez le Divi Builder
- Cliquez simplement sur « Charger à partir de la bibliothèque »
Comme par magie, une liste de packs de layouts apparait !
Cliquez sur votre préféré pour en connaitre son contenu…
Pour des explications plus précises, découvrez comment importer un layout depuis le visual builder.
3 – Plus de 2600 layouts Divi disponibles !
Le Divi Builder propose actuellement +365 packs de layouts Divi, ce qui représente au total 2662 mises en pages pré-faites.
Ces packs sont classés par thématique :
- Art & Design
- Business
- Community & Non-Profit
- Education
- Events
- Fashion & Beauty
- Food & Drink
- Health & Fitness
- Lifestyle
- Online Store
- Services
- Simple
- Technology
La catégorie Art & Design
53 packs sont disponibles dans la catégorie Art & Design, soit 411 layouts au total.
Vous trouverez certainement de l’inspiration si vous devez créer un site dans la thématique de la mode, du design d’intérieur, du graphisme, du maquillage, etc.
Découvrez tous les layouts de la catégorie Art & Design
La catégorie Business
C’est la catégorie la plus riche avec 89 packs contenant 653 mises en page au total.
Si vous devez créer un site d’entreprise, c’est ici que vous pourrez feuilleter le catalogue pour trouver le design le plus adéquat à votre projet.
Tous les corps de métier sont représentés : du fleuriste au restaurateur en passant par le fournisseur d’hébergement Web, le Wedding Planner ou encore le peintre !
Découvrez tous les layouts de la catégorie Business
La catégorie Community & Non-Profit
13 packs se classent dans cette catégorie avec au total 96 layouts préconçus.
Vous trouverez des mises en page pour vos sites de MeetUp, de donation, de recueil d’animaux ou de candidat politique.
Découvrez tous les layouts de la catégorie Community & Non-Profit
La catégorie Éducation
18 packs contenant 134 mises en page individuelles pour créer des sites pour les écoles, les écoles de danse ou de Yoga, les sites d’e-learning, etc.
Découvrez tous les layouts de la catégorie Education
La catégorie Events
Idéal si vous devez créer un site pour un évènement spécial comme un mariage, une web conférence ou même un marathon. Vous trouverez 141 layouts répartis dans 19 packs.
Découvrez tous les layouts de la catégorie Events
La catégorie Fashion & Beauty
Tout ce qui a attrait aux bijoux, au maquillage, au Spa, etc. Si vous devez créer un blog sur ces thématiques, vous pourrez choisir parmi les 184 mises en page réparties sur 26 packs.
Découvrez tous les layouts de la catégorie Fashion & Beauty
La catégorie Food & Drink
Si vous souhaitez trouver de l’inspiration pour créer un site web Restaurant, la catégorie Food & Drink propose 333 layouts répartis en 48 packs ! Il y a de quoi faire…
Découvrez tous les layouts de la catégorie Food & Drinks
La catégorie Health & Fitness
Sites pour coach, Yoga, thérapie, dentiste, nutritionniste, etc. Ces mises en page sont idéales si vous devez créer un site pour un praticien de santé. Au total, 304 layouts répartis en 42 packs.
Découvrez tous les layouts de la catégorie Health & Fitness
La catégorie Lifestyle
Comme son nom l’indique, ici vous trouverez des mises en page pour vos sites et blogs lifestyle : voyage, jardin, golf, etc. Au total 212 layouts répartis en 30 packs.
Découvrez tous les layouts de la catégorie Lifestyle
La catégorie Online Store
205 layouts répartis en 29 packs pour créer vos sites e-commerce. La plupart des boutiques sont représentées comme la vente de jus de fruits, de bijoux, de thé, etc.
Découvrez tous les layouts de la catégorie Online Store
La catégorie Services
961 mises en pages disponibles dans 132 packs. On retrouve ici beaucoup de layouts qui sont classés dans d’autres catégories.
Découvrez tous les layouts de la catégorie Services
La catégorie Simple
Un seul pack est disponible ici avec 15 mises en page.
Découvrez tous les layouts de la catégorie Simple
La catégorie Technology
Dans cette catégorie, vous trouverez des mises en page inspirantes pour vos sites de jeux vidéo, de produits digitaux, de podcast ou de web développeur. Au total, 24 packs et 250 mises en page.
Découvrez tous les layouts de la catégorie Technology
4 – Utilisation individuelle de chaque mise en page Divi
Les layouts sont indépendants les uns des autres. Lorsque l’une de ces mises en page vous tape dans l’œil, vous pouvez la sélectionner et voir plus en détail ce qui la compose.
En moyenne, chaque pack contient 8 mises en page et se compose d’une Home (page d’accueil), d’une page About (à propos), d’une page Contact, d’une page de Blog, d’une Landing Page, d’une page pour les Portfolios ou pour les Services etc.
Chaque pack propose des mises en pages en harmonie, mais vous êtes tout à fait libre de piocher les mises en page indépendamment des packs. Vous aurez juste un peu plus de travail pour harmoniser le tout après.
Pour chaque mise en page, si vous cliquez dessus, vous aurez le choix entre « Voir la Démo » (view live demo) ou « Utiliser » (use this layout), ce qui signifie que vous n’êtes pas obligé d’importer le pack entier.
Je trouve cela très intéressant, contrairement à certains thèmes premiums qui proposent des installations de « démo en 1 clic » et qui importent tout un tas de pages et d’images inutiles.
Si vous cliquez sur « Utiliser », la mise en page s’installe et vous n’avez plus qu’à ouvrir chaque module pour le modifier. C’est tellement simple !
En savoir plus sur les Modules du Divi Builder
5 – Les mises en page de Divi, en conclusion…
Le Divi Builder est certainement le constructeur de page qui propose autant de layouts tout prêts. Aucun autre constructeur n’a une bibliothèque aussi riche en choix.
Même si je ne suis pas une grande fan des mises en pages pré-faites, je pense réellement que cela peut aider beaucoup de monde. Surtout si vous n’avez pas la fibre « WebDesign ».
Et même si vous ne les utilisez pas dans leur intégralité, vous pouvez toujours en installer quelques-unes histoire de vous donner un peu d’inspiration et de vous mettre le pied à l’étrier pour apprivoiser la conception d’une page avec le Divi Builder.
Enfin, n’hésitez pas à vous approprier ces layouts et à les modifier afin qu’ils correspondent à vos attentes et à vos projets…
Voilà encore une bonne raison pour choisir le thème Divi !
Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos ! Ou apprenez à vous servir efficacement de ce thème grâce à ma formation Divi !
Bonjour,
Merci pour cette article. Je ne comprends pas le premade layouts ne se charge pas et j’ai à la place des propositions de pages (Page Barres latérales des deux côtés, Portefeuille Grille, etc.). Comment je peux trouver cette galerie de thème prés construit ?
Salut Fabien , quand tu actives le Divi Builder en violet en haut de ta page, tu as une option « importer de la bibliothèque » je ne sais pas si c’est le terme exact car je ne suis pas sur mon ordinateur à l’heure actuelle. Dis moi si tu trouves…
Bonjour,
Je cherche à télécharger un nouveau layout Divi à partir donc d’une nouvelle page, mais lorsque je clique sur « charger à partir de la bibliothèque », j’ai la même chose que Fabien, des propositions selon les types de page, en deux onglets : « mise en pages prédéfinies » et « ajouté de la bibliothèque ». Dans ce dernier, j’ai seulement les pages que j’ai importées de mon premier layout téléchargé à l’ancienne.
On ne peut prendre qu’un layout à la fois ? Mais comment pouvoir tester les démos avec les layouts téléchargeables pour être sûr de celui que l’on prend ?
Et quid lorsqu’on ne peut charger que les fichiers des layouts téléchargés en zip ?
Bonjour Claire, je crains de ne pas comprendre votre/vos questions. Ce que je peux vous dire, c’est que en effet, on peut charger soit des layouts proposés par Divi soit des layouts que l’on a sauvegarder en amont, sur une autre page donc…
Lorsque je veux charger à partir de la bibliothèque, cela ne me propose pas de catalogue, simplement les modèles de pages du layout précédemment téléchargé.
Je ne peux pas faire plus clair…
Bonjour Claire, avez-vous la licence Divi et est-ce que votre thème est à jour ? Ça pourrait venir de là ?
Bonjour,
C’est fou comme les choses sont faciles quand on est déjà un expert de la chose… 😉 Ben non, pas pour moi. Je n’ai pas « télécharger à partir de la bibliothèque » (je ne sais pas encore ce que c’est que ça du reste) mais « télécharger le modèle ». Et là, j’ai l’affichage de 43 layout packs. L’ennui c’est que ce sont des modèles de sites complet, ce qui fait que pour rajouter quelques pages à mon site ça devient un peu lourd… Sans compter que DIVI pour un néophyte comme moi, n’est pas si facile à manier. Apparemment le jour n’est pas encore venu où l’on pourra bâtir son site comme avec un traitement de texte ou un logiciel type Publisher… Je prédis la fortune à celui ou celle qui sortirait ça un jour…
Bonjour André. Oui ils proposent des packs mais si vous choisissez le layout qui vous convient sur la droite, lorsque vous êtes dans un pack, vous avez certainement des pages qui s’appellent « about » « home » etc. Si vous sélectionnez celui qui vous intéresse, il va s’afficher sur la gauche et là, vous pourrez cliquer sur « use this layout ». Vous ne téléchargerez donc seulement ce layout et non le pack complet. Vous voyez ? Attention, avant de cliquer sur « use this layout » vous avez en dessous une option à cocher ou à décocher qui vous permet de remplacer le contenu de votre page existante par le layout ou bien d’ajouter le layout à la suite du contenu déjà présent sur votre site. Si vous oubliez de décocher l’option, c’est irréversible. J’espère vous avoir aider… mais je crois que je vais faire un tuto car vous n’êtes pas le seul à poser des questions sur cette fonctionnalité.
bonjour
je n’arrive pas a telecharger un layout quand je fais telecharger un modele, je clic sur le layout et sur use this layout mais rien ne se passe je reviens sur la page de creation de page mais je n’ai pas le layout. apparement il ne se telecharge pas…. auriez vous une idée du pourquoi de ce qu’il se passe ? ou du comment faire ?
merci
Bonjour, ce bug me parait bizarre. Est-ce que tout est à jour ? Avez-vous un plugin de cache ? Avez-vous bien enregictré votre clé API dans l’onglet « update » des réglages de Divi ? cf https://astucesdivi.com/options-divi-onglets-integration-updates/
Bonjour merci pour cet article, a mon sens divi est vraiment le meilleur thème surtout avec son builder en temps réel, c’est un vrai plaisir de travailler dessus désormais !
Bonjour, j’ai le projet de créer mon site. Je pense opter pour Divi mais j’ai cru comprendre que la dernière version fin 2018 apportait de grosses modifications au niveau du builder.
Du coup, je me demande si tout ce que vous indiquez dans cet article est toujours possible avec cette nouvelle version ?
Bonsoir Maya !
Bien sûr et heureusement qu’on peut continuer à utiliser des packs de layouts (mise en page) tout prêts. La nouvelle version de WordPress a contraint Divi à être utilisé en « front-office », même si tu peux quand même continuer à construire tes pages depuis le back-office puisque Divi a prévu une option pour ça. Tu peux utiliser Divi sans problème 😉
Oui, merci William. Divi est bien pratique 😉
Bonsoir
Je compte créer mon site avec divi, mais pour le moment je travail en locale j’ai testé divi sa marche plutôt bien, le problème est que j’aimerais travailler avec les layouts télécharger au préalable, et que l’importation s’est faite avec succès, cela ne s’affiche pas quand il s’agit de charger à partir de la bibliothèque. Cela me bloque d’avancer avec les layouts d’ici!
Salut Alik,
Si vous voulez importer des layouts Divi tout prêts (ceux disponibles depuis la bibliothèque), vous devez être en possession de votre licence Divi (clé API) et renseigner vos identifiants dans l’onglet UPDATE. Sans cela, ça ne marchera pas.
Bonsoir,
Pour un client je cherche un layout : boutique vente matériels informatique .. il a un magasin physique mais souhaite mettre un site en place
une idée Merci
Merci
Salut Jean Luc,
Il te suffit de créer le design de ton site ou tout simplement d’importer un Layout « tout prêt » disponible dans Divi. Si tu ne trouves pas le layout idéal pour le domaine de l’informatique, il te suffit d’utiliser un layout qui te plait : le reste est une histoire de couleur et d’images. En fait, les layouts sont proposés dans une thématique mais tu peux très bien les « détourner » pour que ça colle à ton projet, c’est le but d’ailleurs.
😉
Bonsoir Lycia
J’ai une question, sur divi, à chaque mise du thème divi ! j’ai le message qui suis :
Votre site rencontre un problème …
J’ai bien entendu acheté chez elegantthemes et j’ai la clé API
A la suite de cela je rafraîchi la page et c’est reparti …
Tu aurai une piste ….
Salut Jean Luc. Cela ne vient pas de Divi. J’ai le même problème à chaque mise à jour, surtout pour les plugins. Ça a commencé depuis la MAJ de WordPress 5.2 je crois et cela n’arrive que sur l’un de mes sites alors que tous mes sites tournent sous Divi. Donc, par élimination ce n’est pas Divi. La seule chose qui change dans mes sites, c’est l’hébergement. Donc, par curiosité, tu es chez quel hébergeur ?
Je suis chez o2switch
Merci pour ta reponse
Moi aussi c’est sur o2switch justement…
Bonjour,
Je ne parviens pas à charger des laout depuis mon interface. Quand je clique sur « ajouter » dans « Page » je n’ai pour seule option que « Utiliser le générateur Divi »… Avez-vous une idée de quel peut être le problème ?
Merci d’avance !
Bonsoir Cécile.
Oui, il faut activer le « générateur Divi » pour pouvoir télécharger des layouts au sein de la Page. Sans cela, c’est impossible car c’est Divi qui gère les layouts et non WordPress.
Bonjour Lycia
si on fait un site avec plusieurs pages on peut changer de layout par page ?
merci
Bonjour Michèle ! Oui bien sûr. Tu choisis n’importe quel layout à chaque page.
une question bête
les layouts c’est payant ? à acheter sur le site ?
Salut Michelle. Pas du tout, ils sont inclus avec la licence Divi et tu les télécharges directement depuis le Visual Builder
ok je viens de comprendre et j’ai trouvé
mais par contre là j’avais un layout qui me plaisait bien et je ne trouve pas comment remplacer leur image de fond par une à moi.
Du coup avec mon mari on fabrique nos propres modeles mais c’est long
et souvent je bloque parce que dans le module image ca ne met pas forcément le format que je veux et je n’ai pas encore trouvé comment l’agrandir alors que pour le texte on peut faire plein de changements
Bonjour Lycia,
Merci pour toutes ces astuces. Cependant, en tant que designer, je souhaiterai télécharger les templates DIVI/Layout comme PSD. Comment fait-on ?
Merci de ton retour.
Bonjour Christophe, je crois que ce n’est pas possible.