09. Créer une mise en page sur votre site internet avec Divi

Dans cette nouvelle formation WordPress Divi, nous allons construire un joli gabarit de page avec le Divi Thème Builder. Ce gabarit au design sympa vous permettra de gagner du temps et épousera automatiquement cette mise en page au webdesign avancé. 

Rendez-vous sur la page de connexion de votre site WordPress.
Connectez-vous en utilisant vos identifiants (nom d’utilisateur et mot de passe).

Créer une page avec Divi Builder

Créer une page et utiliser le Divi Builder

Trois choix sont possible :

Construire à partir de zéro : Cette option charge le Divi Builder avec un design de page vierge. Choisissez cette option si vous souhaitez recommencer la conception de votre page à partir de zéro.

Choisissez une mise en page prédéfinie : Si vous souhaitez commencer votre conception avec l’une de vos mises en page enregistrées ou un pack de mise en page prédéfini de Divi, choisissez cette option. Il chargera la bibliothèque Divi dans laquelle vous pourrez parcourir les packs de mise en page prédéfinis, vos conceptions précédemment enregistrées et les pages existantes de votre site Web.

Cloner une page existante : Vous pouvez également commencer votre conception en clonant une page existante sur votre site Web. Sélectionnez cette option si vous souhaitez charger une conception de page à partir d’une page existante de votre site Web comme point de départ.

Dans cet article : Sélectionnez, Construire à partir de zéro.

Une fois dans le constructeur Divi, vous verrez une interface visuelle qui vous permet de créer votre page en faisant glisser et déposer des éléments.

Architecture hiérarchique

Divi Builder offre une structure de conception organisée par sections, lignes et colonnes. Cette architecture hiérarchique permet de créer des mises en page flexibles et esthétiques pour votre site WordPress.

• Les sections agissent comme des conteneurs globaux, délimitant les zones distinctes de votre page.
• À l’intérieur de chaque section, vous avez la flexibilité d’ajouter des lignes. Les lignes divisent l’espace de manière horizontale et sont la base de votre structure. Au sein de chaque ligne, vous pouvez intégrer des colonnes, déterminant ainsi la disposition et la répartition de votre contenu.
• Les colonnes peuvent être personnalisées en fonction de vos besoins, que ce soit avec une seule colonne pour une présentation linéaire ou plusieurs colonnes pour une mise en page plus complexe.
• Enfin, les modules, qu’ils soient textuels, graphiques ou interactifs, sont les éléments concrets que vous ajoutez à vos colonnes pour constituer le contenu de votre page. Chaque module est placé stratégiquement dans une colonne pour créer une composition harmonieuse.

Avec Divi Builder, vous avez la liberté de façonner votre mise en page selon vos préférences, en choisissant le nombre de colonnes et en disposant les sections, lignes et modules de manière intuitive. Cette approche modulaire facilite la création de sites Web esthétiques et fonctionnels, tout en offrant une personnalisation totale de votre expérience de conception.

Ici par exemple, vous pouvez choisir le nombre de colonne de votre ligne (rangée) dans lequel sera votre contenu ou image

Exemple d’une mise en page

Dans l’exemple donné, nous allons établir une rangée comportant deux colonnes. Pour chaque colonne, nous intégrerons un module texte, attribuant à l’une un titre et à l’autre du texte. Nous explorerons également la manière de personnaliser le style du module texte.

On place un module texte dans la première colonne afin d’y intégrer du contenu.

En sélectionnant l’option « Paragraph » dans le menu déroulant, vous pouvez choisir si votre texte sera un titre ou un paragraphe et on clique sur le bouton vert « enregistrer »

En appuyant sur le bouton « + » de notre deuxième colonne, nous ajoutons un module à cet emplacement.

On choisi le module texte

En accédant à l’onglet « Style » du module texte en question, vous avez la possibilité de personnaliser le style de votre contenu. L’onglet « Style » vous permet d’apporter des modifications telles que la taille du texte, la couleur, les marges, les contours, les arrondis, etc.

En sélectionnant l’onglet « style » et ensuite « Texte », vous avez la possibilité de modifier la couleur. Par exemple en la changeant en bleu.

Il est également possible de modifier ou d’ajouter des marges autour du module, de définir une largeur, d’ajouter une bordure, etc.

Divi propose une variété de modules qui peuvent être utilisés pour construire des pages de manière flexible et personnalisée. Voici une description rapide de quelques modules Divi couramment utilisés :

• Module Texte : Permet d’ajouter des blocs de texte à votre page avec des options de mise en forme avancées.
• Module Image : Permet d’insérer des images statiques sur votre page avec des options de personnalisation.
• Module Vidéo : Permet d’intégrer des vidéos à partir de différentes sources telles que YouTube ou Vimeo.
• Séparateur : Ajoute des séparateurs visuels pour délimiter et structurer le contenu de la page.
• Formulaire de contact : Facilite l’intégration de formulaires de contact pour la collecte d’informations.
• Module Galerie d’images : Permet de créer des galeries d’images interactives avec différentes options d’affichage.
• Module Témoignages : Idéal pour afficher des témoignages de clients de manière attrayante.
• Module Compteur : Idéal pour afficher des compteurs dynamiques, comme le nombre de clients satisfaits, le nombre de projets réalisés, etc.
• Bouton : Permet d’ajouter des boutons interactifs avec des liens personnalisés.

Mode d’affichage filaire

Il existe plusieurs façons de construire avec Divi. Vous pouvez librement basculer entre les différents modes d’affichage, en choisissant celui qui vous convient le mieux ou qui convient le mieux à votre projet en cours. Effectuez un zoom avant et arrière, parcourez les vues des appareils mobiles, basculez entre des modes d’interaction uniques ou créez rapidement vos structures de pages en mode filaire. C’est à vous.

Questions fréquentes