Qu’est-ce qu’un layout ? C’est une sorte de « calque », de modèle de page web prédéfini, que vous pourrez modifier à votre guise afin d’avoir un site au design pro & original.

C’est la manière la plus simple, rapide & efficace de réaliser un beau site web à son image sans code. Plus de 900 layouts gratuits, créés par des graphistes/designers professionnels, sont inclus dans le thème Divi, & la liste ne cesse de grandir 😱

Nous allons voir ici leur intérêt, pourquoi & comment utiliser un layout dans Divi et comment le customiser.

Où trouver les layouts dans Divi ?

Quand vous créez une nouvelle page, vous avez le choix entre 3 options :

Vous aurez alors accès à la bibliothèque de layouts, des centaines de modèles pour tous les types de sites. Les packs de layouts sont classés par thème (health & fitness, restaurant, services …). Chaque pack possède ensuite plusieurs layouts : landing page, contact, blog, services, galerie etc. Il ne vous reste qu’à piocher pour vous servir 😉 

Vous pouvez avoir un aperçu du contenu de layout choisi en scrollant son aperçu. 

Cliquez sur « Use this Layout », et en 1 minute il est chargé sur votre page. Il ne vous reste plus qu’à utiliser le Visual Builder afin de modifier les typographies, couleurs, images & texte selon votre charte graphique.

Comment choisir son/ses layout(s) ?

Le choix est si vaste que l’on peut si perdre. Déjà, leur classement par thème peut vous orienter. Posez-vous aussi la question de l’identité visuelle de votre site : voulez-vous une image pro & efficace ? Une ambiance zen & épurée ? Que souhaitez-vous mettre en valeur (des personnes, des objets, des services …) ? Selon chaque page, définissez les modules dont vous avez besoin et allez piocher dans les packs qui vous conviennent.

Bien sûr, vous pouvez combiner les layouts, c’est là que tout le process prend sens car vous n’aurez pas un site « bateau » importé de la bibliothèque, mais un mélange de plusieurs pages, de modules adaptés, positionnés selon vos besoins … Le résultat : un site à votre image, sans code, d’utilisation intuitive & rapide 😍

Par exemple :

Site de kinésithérapie : On peut mixer les layout « Physical Therapy » et « Chiropractor »

Site pour votre mariage :  Mélangez « Wedding Engagement », « Wedding Planner » et « Wedding »

Site d’un restaurant : Mélangez « Food Catering » + « Food Recipes »

Vous pouvez même prendre des layouts qui n’ont rien à voir avec le thème de votre business. J’ai par exemple utilisé le layout « pricing » du pack « Babysitter » pour un site de Pilates car c’était ce design là qui me plaisait.

Pour combiner les layouts, n’oubliez pas de décocher la case « Replace existing content » lors de l’importation de vos layouts pour ne pas supprimer votre travail !

Harmoniser ses layouts

Une fois que vous avez choisi vos layouts, que vous les avez importés dans votre page, vous avez les mains libres et des milliers de possibilités pour créer votre site design et pro. Mais il va falloir créer une cohérence et uniformiser vos différents layouts. Voici comment je procède :

Ne choisir que l’essentiel

N’hésitez pas à supprimer des sections, des lignes ou des modules, à déplacer les entités des layouts pour les organiser selon VOTRE architecture et VOTRE expérience utilisateur (réfléchie au préalable). Ne vous encombrez pas de plein de petits modules « parce que c’est joli », vous risquez de perdre l’attention de l’internaute (qui est une espèce très volatile ^^). Chaque section doit avoir une utilité pour vous et apporter quelque chose au visiteur.

Définir sa palette de couleurs :

Utiliser Adobe Color pour choisir des couleurs qui vont bien ensemble. Cette palette doit être pensée pour refléter l’ambiance de votre site. Vous pouvez choisir des couleurs monochromes pour un effet neutre, une triade ou des couleurs complémentaires pour plus de pep’s. Pour plus de facilité par la suite, enregistrez bien cette palette dans le Tableau de Bord WordPress : Divi -> Options du Thème -> Palette par défaut du sélectionneur de couleurs

 

Définir ses typographies

Utiliser FontPair pour avoir 2 typos assorties. On utilise une typo pour les titres (h1,h2 etc) et une pour les paragraphes. A enregistrer dans le Tableau de Bord WordPress : Apparence -> Personnaliser -> Paramètres Généraux -> Typographies

Définir votre style de bouton

Un bouton, qu’est-ce que c’est ? C’est ce sur quoi on vous fait cliquer pour prendre une action sur votre site : changer de page, réserver un cours, demander un devis, s’abonner à la newsletter … Vous devez définir un style de bouton et vous y tenir sur tout votre site pour votre cohérence graphique. 

Voici les boutons du site MyDailyPilates (cours de Pilates à Bordeaux) : vous pouvez voir que le style graphique est uniforme. La couleur du fond ou de la typo peut varier suivant les pages & les modules (toujours suivant la palette de couleurs), tout comme la taille, mais la forme du bouton et la typographie du texte restent la même

Vous pouvez « enregistrer » cette forme de boutons dans vos réglages WordPress sur le tableau de bord : Apparence -> Personnaliser -> Bouton, ainsi quand vous créerez un nouveau bouton sur le Visual Builder il sera directement uniforme 🙂

Personnaliser texte & images

Utilisez vos photos (c’est le mieux) ou des images libres de droit. Pixabay, Unsplash, Fotomelia … Vous proposent des belles photos gratuites. Rajoutez votre texte. Tout cela se fait très facilement grâce au Visual Builder de Divi qui vous permet de tout modifier en temps réel sur votre page, vous visualisez directement le résultat.

Pour optimiser son texte et ses images pour le référencement, j’ai fait un article sur comment améliorer son référencement naturel sur Google 😀

J’espère que cet article vous a plu et vous a permis d’en apprendre un peu plus sur les layouts de Divi 🙂 Pour moi, l’arrivée de ces layouts sur Divi est vraiment une manière quasi « magique » pour les novices d’obtenir des sites designs & pros sans gros efforts. Attention à ne pas tomber dans le piège du « tout fait » mais de jouer le jeu de la personnalisation afin de ne pas avoir le même site que le voisin 😉 De nouveaux packs sortent toutes les semaines !

Si vous voulez en apprendre beaucoup plus sur la création d’un site web grâce aux layouts, leur utilisation et plein d’astuces pour les personnaliser, je vous offre 3h de vidéos. On apprendra ensemble comment créer son site de A à Z (partie technique & design), comment gérer l’architecture Divi, utiliser le Visual Builder, modifier les modules … Pour sortir avec un site à votre image accessible au monde entier 👍🏻

Télécharger des Layouts Divi gratuits:

J’ai un article complet qui détaille certains des meilleurs layouts à télécharger gratuitement ici. Vous y retrouverez un visuel de leur image et des liens directs qui vous permettront de les voir en live.

Aussi, ce qui est génial avec l’équipe Divi, c’est qu’ils sortent chaque semaine un nouveau layout ! Ils sont tous fait par des professionnels de la création du site et ont un graphisme très pro. Vous pouvez les découvrir ci-dessous

Layout Officiels sur le site ElegantThemes : Chaque semaine un nouveau Layout à découvrir ici !

Vidéo gratuite

Créer un site avec un Layout Divi

Pour avoir les explications vidéos sur la mise en place & la modification de layouts, j’ai réalisé une vidéo complète sur la mise en place d’un site de A à Z avec un layout : 

TOUS LES MODÈLES DE PAGES (LAYOUTS) 

De nombreux modèles de page à télécharger pour votre site !

Inspirez-vous de layouts professionnels, installez les en 1 minute chrono, et booster votre site et son design !

Soyez tenu au courant de la réouverture avant tout le monde!

Inscrivez-vous à notre PREMS ALERTE. Vous recevrez un email 24H avant tout le monde pour vous prévenir de la réouverture des inscriptions avec une réduction de 25% sur le prix de la formation !

Vous êtes bien inscrits à la PREM's Alerte ! =)

Share This