Tuto | ABC Divi : éditer une page
Tutoriel web-design : comprendre comment est construite une page Divi, apprendre à éditer son contenu et sa mise en forme.
Ce tuto s’adresse aux novices et ne montre qu’un bref aperçu de Divi, des ses options et possibilités. Il s’agit ici de comprendre la base de l’édition d’une page Divi afin de pouvoir éditer le contenu des pages de son site web.
Sommaire
1. Structure d’une page Divi
2. Configuration des blocs
3. Edition du contenu
Tuto | ABC Divi : éditer une page
Tutoriel web-design : comprendre comment est construite une page Divi, et apprendre à éditer son contenu et sa mise en forme.
Ce tutoriel s’adresse aux novices et ne montre qu’un bref aperçu de Divi, des ses options et possibilités. Il s’agit ici de comprendre la base de l’édition d’une page Divi afin de pouvoir éditer le contenu des pages de son site web.
Sommaire
1. Structure d’une page Divi
2. Configuration des blocs
3. Edition du contenu
1.
Structure d’une page Divi
1.1 | Les outils
Une page construite avec Divi est coposée de trois types d’éléments qui s’imbriquent :
1 – Les sections
2 – Les lignes (ou rangées)
3 – Les modules
1.2 | Définition des outils
• Une section est un conteneur dans lequel nous pouvons mettre des lignes.
Il est possible de le diviser en colonnes dans certains cas spécials.
• Une ligne (ou rangée) est un conteneur, pouvant être divisé en colonnes, et dans lequel nous pouvons mettre des modules.
• Un module est un élément de contenu, par exemple : un texte, une image, un diaporama, un système de réservation, un formulaire de contact…
1.3 | Ajouter un bloc.
Pour ajouter une section, une ligne, ou un module, cliquez simplement sur le + de la couleur correspondante.
Nottez qu’un module est toujours dans un ligne qui est elle même toujours dans une section. ( section > ligne > module).
2.
Configuration des blocs
Configurer les blocs (c’est à dire les sections, les lignes) s’est organisé les différents espaces de sa page web.
Les options de configuration des éléments de votre page s’affichent au passage de la souris sur le bloc en question, qu’il s’agisse d’une section, d’une ligne ou d’un module.
• Déplacer le bloc.
• Réglages (paramêtres) du bloc
C’est ce menu que vous utiliserez le plus.
• Dupliquer le bloc.
• Définir le nombre de colonnes (disponible ici pour les lignes uniquement)
• Sauvegarder le modèle du bloc dans la bibliothèque, pour le réutiliser ailleur ultérieurement.
• Supprimer le bloc.
(copier/coller le bloc ou ses styles…)
3.
Edition du contenu
Si vous avez bien suivis, vous avez compris que les sections et les lignes servent principalement à segmenter votre page.
Se sont les modules qui vous permettent d’éditer le contenu de vos pages Divi.
3.1 | Accès au panneau de configuration d’un module
C’est grâce à ce panneau que vous pouvez modifier vos contenus :
textes, images (ect.), mais également leur style, taille, couleur, allignements…
Vous accédez au panneau de configuration d’un module de contenu en cliquant sur l’icone de la roue dentée du module que vous souhaitez configurer.
vous souhaitez modifier quelque-chose : Double-cliquez dessus !
3.2 | Configuration d’un module de contenu Divi
Elle se présente en 3 onglets :
• L’onglet “Contenu“
• L’onglet “Style“
• L’onglet “Avancé“
L’onglet Contenu
Vous rédigerez ici votre texte, choisirez vos images, configurerez votre arrière plan, entre autre.
L’onglet Style
Place au design, avec l’onglet Style! Vous définissez les tailles, les couleurs, les espaces et dimensions et plus encore.
L’onglet Avancé
L’onglet avancé est réservé aux utilisateurs plus aguéris. Vous pouvez notemment intégrer le CSS personnalisé du bloc ici, très pratique pour s’y retrouver plus tard.
La section “Visibilité” permet d’afficher ou cacher complètement le bloc selon que l’utilisateur consulte votre site sur PC, tablette ou mobile, c’est un bon atoût pour proposer une expérience mobile optimisée.
Vous voilà libre d’éditer le contenu de votre site web en autonomie.
Divi est un éditeur complet, plein de possibilité, soyez curieux, fouillez !
Suivez-moi sur les réseaux pour être informer des prochains tutoriels Divi, photoshop ou web-design !
Ce tutoriel Divi est un support de formation destiné aux clients qui souhaitent éditer le contenu de leur site internet.
Il peut être accompagner d’une formation orale, en réel ou visio-conférence.