Le Divi Builder embarque des mises en pages pré-faites

Layouts Divi : +1500 mises en page prêtes à utiliser sur votre site !

Mis à jour le 17/03/2021 | Publié le 01/02/2018 | 31 commentaires

1,363 mots

5

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 « mise 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 :

Des packs de layouts Divi

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

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 :

  1. Rendez-vous dans votre administration puis ajoutez une nouvelle page (par exemple)
  2. Ajoutez un titre, comme à votre habitude puis activez le Divi Builder
  3. Cliquez simplement sur « Charger à partir de la bibliothèque »
Charger les packs de layouts Divi
Charger les packs de layouts Divi en cliquant sur « charger à partir de la bibliothèque »

Comme par magie, une liste de packs de layouts apparait !

Les packs de layouts Divi
Pour l’instant, le Divi builder embarque 19 packs de layouts Divi

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 1500 layouts Divi disponibles !

Le Divi Builder propose actuellement +200 packs de layouts Divi, ce qui représente au total +1500 mises en pages pré-faites.

Ces packs sont classés par thématique :

La catégorie Art & Design

36 packs sont disponibles dans la catégorie Art & Design, soit 277 layouts au total.

layout art & design

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 80 packs contenant 589 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.

layout business

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

8 packs se classent dans cette catégorie avec au total 59 layouts préconçus.

layout non-profit

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 Education

9 packs contenant 67 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.

layout education

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 74 layouts répartis dans 10 packs.

layout event

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 79 mises en page réparties sur 11 packs.

layout beauty

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 une site web Restaurant, la catégorie Food & Drink propose 145 layouts répartis en 20 packs ! Il y a de quoi faire…

layout food

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, 164 layouts répartis en 23 packs.

layout health

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 107 layouts répartis en 15 packs.

layout lifestyle

Découvrez tous les layouts de la catégorie Lifestyle

La catégorie Online Store

121 layouts répartis en 17 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.

layout shop

Découvrez tous les layouts de la catégorie Online Store

La catégorie Services

623 mises en pages disponibles dans 85 packs. On retrouve ici beaucoup de layouts qui sont classés dans d’autre catégories.

layout services

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.

layout simple

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, 19 packs et 144 mises en page.

layout technology

Découvrez tous les layouts de la catégorie Technology

4 – Utilisation individuelle de chaque mise en page Divi

Les layouts sont indépendant 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.

Mises en page Divi
Découvrir ou utiliser les mises en page proposées par Divi

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 !

Layouts embarqués dans Divi
Des layouts embarqués dans Divi : dites-le sur Pinterest !
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Ça devrait vous plaire aussi :

La nouvelle interface de Divi 5

La nouvelle interface de Divi 5

Découvrez la nouvelle interface de Divi 5 : les comparaisons avec Divi 4 et les similitudes avec Gutenberg (article + vidéo). Alerte spoiler : ça déchire 💣 !

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

31 Commentaires

  1. Fabien

    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 ?

  2. Lycia

    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…

  3. Claire

    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 ?

  4. Lycia

    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…

  5. Claire

    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…

  6. Lycia

    Bonjour Claire, avez-vous la licence Divi et est-ce que votre thème est à jour ? Ça pourrait venir de là ?

  7. André

    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…

  8. Lycia

    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é.

  9. dub

    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

  10. William - Ecrire un bon article de blog

    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 !

  11. Maya

    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 ?

  12. Lycia Diaz

    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 😉

  13. Lycia Diaz

    Oui, merci William. Divi est bien pratique 😉

  14. Alik

    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!

  15. Lycia Diaz

    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.

  16. SCHMITT Jean-Luc

    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

  17. Lycia Diaz

    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.
    😉

  18. SCHMITT Jean-Luc

    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 ….

  19. Lycia Diaz

    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 ?

  20. Jluc

    Je suis chez o2switch

    Merci pour ta reponse

  21. Lycia Diaz

    Moi aussi c’est sur o2switch justement…

  22. CECILE MABLOUKE

    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 !

  23. Lycia Diaz

    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.

  24. Michele

    Bonjour Lycia
    si on fait un site avec plusieurs pages on peut changer de layout par page ?
    merci

  25. Lycia Diaz

    Bonjour Michèle ! Oui bien sûr. Tu choisis n’importe quel layout à chaque page.

  26. Michele

    une question bête
    les layouts c’est payant ? à acheter sur le site ?

  27. Lycia Diaz

    Salut Michelle. Pas du tout, ils sont inclus avec la licence Divi et tu les télécharges directement depuis le Visual Builder

  28. Michele

    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

  29. Christophe

    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.

  30. Lycia Diaz

    Bonjour Christophe, je crois que ce n’est pas possible.

Trackbacks/Pingbacks

  1. 10 bonnes raisons de choisir le thème Divi ! - […] => MISE À JOUR DU 31 JANVIER 2018 = à présent, vous pouvez télécharger une mise en page pré……

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.