Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


C’est ça ! Vous venez d’acheter votre licence Divi et avez hâte de vous battre. Mais par où commencer? Je vous propose de créer vos premières zones avec ce tutoriel qui est expliqué en détail Comment créer votre première page avec Divi.

De nombreux termes importants sont résumés dans ce tutoriel: section, ligne, colonne, module, paramètres d’un module, groupes de paramètres, style de texte, etc. C’est donc un excellent moyen de faire le tour du propriétaire avant de continuer.

Voici à quoi devrait ressembler votre page à la fin de ce tutoriel. Allons-y étape par étape.

Exemple de page tutoriel Divi

Étape 1: créer une nouvelle page

✔︎ Connectez-vous au tableau de bord WordPress
✔︎ Pages> Ajouter
✔︎ Entrez un titre et cliquez sur le bouton Publier à droite
✔︎ Cliquez sur «Utiliser Divi Generator»> Créer à partir de 0
✔︎ Enfin, cliquez sur « Créer au frontend » pour modifier visuellement votre page. C’est la principale force du thème Divi.

Par défaut, Divi crée automatiquement une section initiale. Une section est un conteneur dans lequel vous pouvez insérer des lignes et des modules. Une page est donc constituée de plusieurs sections contenant chacune une ou plusieurs lignes. Chaque ligne contient à son tour un ou plusieurs modules.

Étape 2: insérer un titre de page dans une section pleine page

Nous allons d’abord créer la section sur un fond bleu et ajouter le titre en premier.

✔︎ Ajoutez une ligne en cliquant sur le bouton [+] vert et sélectionnez une ligne dans une colonne

1- Insérer une ligne dans une section

✔︎ Ajouter un module de texte (la liste propose un grand nombre de modules. Le module de texte est à la fin de la liste).

2- Ajouter un module de texte
✔︎ Une fenêtre de paramètres apparaîtra automatiquement. Dans le champ Corps, ajoutez votre titre

3- Insérer un module de texte
✔︎ Changez le style du texte du titre (Titre 1) avec la sélection.

Conseil: un titre est une mise en forme qui vous permet de mettre du texte en surbrillance et de l’utiliser comme titre. Donc, si demain vous voulez changer l’apparence de tous vos titres sur l’ensemble de votre site Web en même temps, vous pouvez tout faire en même temps, c’est pratique! Le titre 1 est un titre de premier niveau (titre de page) et le titre 2 est un sous-titre de second niveau, etc.

4 Changer le style du texte du titre
✔︎ Ouvrez l’onglet « Style »
✔︎ Sélectionnez le groupe d’options « Texte des sous-titres »
✔︎ Changez le titre en majuscule, centrez-le et augmentez la taille de la police à 40 pixels
✔︎ Enregistrez en cliquant sur le bouton vert en bas à droite de la fenêtre des paramètres.5 Concevoir le titre

Étape 3: ajoutez une couleur de fond et un séparateur

✔︎ Paramètres de la section ouverte (engrenage dans la zone bleue en haut à gauche de l’écran)

6- Ouvrez la section Paramètres de Divi
✔︎ Développez le groupe Paramètres d’arrière-plan, cliquez sur le pot de peinture, puis sur [+] et choisissez une couleur de votre choixCouleur d'arrière-plan à 7 sections
✔︎ Ouvrez l’onglet «Style», développez les paramètres «Séparateur», cliquez sur l’onglet «Bas» et sélectionnez un séparateur de votre choix.

Un séparateur crée une transition esthétique entre deux sections. Il n’est pas obligatoire d’en ajouter un, c’est un outil purement graphique. Il faut avouer que le rendu est agréable à regarder. Alors pourquoi pas Ici, j’ai choisi un séparateur composé d’arbres. Il en existe différents types, Divi en propose de nombreux en standard. Il est possible de le positionner en haut de la section ou en bas de la section comme c’est le cas ici.

8- Ajouter un séparateur de section

✔︎ Ouvrez le menu Espacement, liez les marges internes du haut et du bas en cliquant sur le petit lien et appliquez une marge de 200 px. Cliquez sur la coche verte pour enregistrer.

Attention: il existe deux types de bordures: internes et externes. La marge intérieure ajoute de l’espace dans la section (ou la ligne ou le module). Si l’arrière-plan est bleu, comme ici, il sera agrandi et restera bleu. Le bord extérieur est à l’extérieur de l’élément (ici notre section), donc ce bord est blanc.

9- Ajouter une bordure interne

Étape 4: éditez le module de texte

✔︎ Ouvrez les paramètres du module de texte en cliquant sur l’engrenage gris

10- Ouvrez les paramètres du module de texte
✔︎ Ouvrez l’onglet Style et allez dans Texte des sous-titres
✔︎ Changez le style du titre en choisissant un titre en gras, une couleur blanche et une hauteur de ligne de 1,4 em. Vérifiez cela en cliquant sur le bouton vert en bas à droite

11- Changer le style du texte en blanc

Étape 5: ajouter une nouvelle section contenant une ligne avec 3 colonnes

✔︎ Cliquez sur [+] Bleu en bas de page pour ajouter une nouvelle section
✔︎ Insérez une ligne composée de 3 colonnes

12-3 colonnes Divi✔︎ Ajoutez un module « Résumé », ajoutez un titre et un texte
✔︎ Faites défiler les paramètres « Image et symbole », activez l’option « Utiliser les symboles » et sélectionnez un symbole en fonction de vos besoins

Comme vous le verrez, Divi n’a pas de traduction française de haute qualité. Certains modules ou options portent un nom étrange. Donc notre module s’appelle « Résumé » car il combine en fait plusieurs modules en un seul (une image, un titre et un texte) pour gagner du temps lors de la création de la page.

13 - Mettre un symbole dans un module de résumé de présentation
✔︎ Ouvrez l’onglet Style> Image et icône> Changer la couleur
✔︎ Allez dans Titre> Changer le style du titre

14 - texte de présentation
✔︎ Allez dans Texte> Changer le style du texte

15- Changer le corps du texte de présentation
✔︎ Enregistrer

Étape 6: dupliquez le module

✔︎ Faites un clic droit sur le module de résumé et sélectionnez « Copier le module ».
✔︎ Faites un clic droit sur [+] Le gris est à droite et insère le module une fois dans chaque colonne

16 - Copier et coller un module
✔︎ Répétez les étapes précédentes pour changer chaque module que vous copiez et collez actuellement

✔︎ Enregistrez votre travail et publiez-le sur le Web en cliquant sur les 3 petits points violets en bas de la page, puis en cliquant sur le bouton vert «Enregistrer»17- Enregistrer et publier la page

✔︎ Cliquez sur Quitter Visual Builder en haut de la page pour afficher votre création

Bravo, vous venez de créer votre première page avec Divi! Comme vous pouvez le voir, le processus est suffisamment flexible pour effectuer toutes sortes de changements. Divi regorge d’options plus ou moins complexes pour des rendus visuels d’une grande profondeur.

Je créerai prochainement un tutoriel avancé afin que vous puissiez aller encore plus loin avec cet outil qui repousse les limites de WordPress.



Source link

Recent Posts