1 Fév, 2022

Éditer une page sous Divi

Accéder à la modification des pages

Si vous voulez effectuer une modification ou créer une quelconque page avec le constructeur de page Divi vous allez devoir vous connecter au back office de votre site internet. Si vous vous êtes bien connecté :

Dans ce menu nous allons cliquer sur l’onglet « Pages » afin d’accéder à la liste des pages du site qu’elles soient publiées ou en brouillon. Si vous êtes sur le menu ci-dessous vous êtes arrivés au bon endroit :

Une fois sur cette page vous pouvez soit cliquer sur « ajouter » afin de créer une nouvelle page soit passer votre souris sur la page que vous souhaitez modifier et cliquer sur le bouton « éditer avec Divi ». Faites bien attention à cliquer sur ce bouton car plusieurs modifications différentes peuvent être appliquées mais uniquement celle de Divi nous intéresse pour le moment.

Les blocs de modifications

Une fois que vous avez cliqué sur l’édition vous devez arriver sur ce genre de page :

Une fois arrivée ici cela devient un peu plus complexe mais rien d’insurmontable, les pages sont composées de gros blocs que vous pouvez tous paramétrer de la même manière. Quand vous cliquez sur un élément de la page vous aurez toujours un bloc qui apparaitra.

Vous pouvez voir que les blocs ont différentes couleurs sur la capture d’écran. Le grand bloc bleu est le body et comme son nom l’indique en anglais c’est le corps de la page, le contenant entier du contenu de la page. A l’intérieur de ce bloc s’y trouve un autre mais de couleur verte. Ce bloc est une section, il définit la structuration interne du body et permet de découper les contenus en plusieurs parties et à gérer l’allure globale de votre page. Pour terminer, le troisième bloc, noir, représente tous les types de contenus que vous pouvez intégrer dans votre page (titres, images, textes, etc).

Nous allons maintenant détailler à quoi servent les différents boutons qui apparaissent lorsque le bloc est sélectionné :

Le premier bouton permet de déplacer le bloc dans la page en le dirigeant avec sa souris
Le second permet de rentrer dans les réglages de paramètres plus avancés et parfois propres au type de bloc
Le troisième vous permet de dupliquer en 1 clic le bloc sélectionné
Le quatrième vous permet d’enregistrer le bloc que vous avez sélectionné en tant que modèle dans la bibliothèque du site et donc de le recréer en un clic sur une autre page ou à un autre endroit.
Le cinquième est évident, il permet de supprimer le bloc entier.
Le sixième ferme le menu
Le dernier est un raccourci vers certaines modifications et propose d’autres options comme celle de copie de module qui permet de facilement appliquer un style similaire au bloc sélectionné en collant le style du module sur un autre bloc.

Quand vous souhaitez ajouter un bloc il suffit de cliquer sur le petit plus situé au centre en bas de chaque bloc et de choisir la nature du bloc à ajouter.

Les paramètres d’un bloc

Le bouton des paramètres du bloc doit vous ouvrir ce menu :

Dans ce menu les deux premiers onglets nous intéresseront. Dans l’onglet contenu vous pourrez :

Modifier le contenu du texte (vous pouvez intégrer un contenu dynamique via le petit bouton situé à droite dans la zone de texte si vous le souhaitez)
Attribuer un lien au bloc et gérer son comportement (ouverture dans un nouvel onglet, etc)
Définir un fond de couleur, dégradé ou autre pour l’arrière-plan
L’Etiquette Admin ne nous sera pas utile

Dans le second onglet vous pouvez administrer le style des éléments du bloc :

Dans le premier volet vous pouvez changer la couleur, la graisse, la taille, etc
Dans le second volet c’est exactement la même chose pour le sous-titre
Pour le troisième vous pouvez définir la taille du contenu, son alignement, etc
Le quatrième permet de définir l’écart avec les autres blocs de la page
Le cinquième modifie la bordure du bloc
Le sixième peut créer une ombre autour de votre bloc parmi de styles définis
Le septième (très peu utile) permet d’appliquer des filtres de couleurs aux blocs.
Le huitième permet d’appliquer des transformations basiques au contenu (transformation de la taille, du placement du contenu, etc)
Le dernier permet d’appliquer une animation prédéfinie.

Les principaux modules Divi

Une fois que vous avez cliqué sur le petit + noir afin d’ajouter du contenu dans votre grand bloc vous avez un large choix, je vais donc vous parler des plus courants.

Le module texte Divi

Le premier et le plus utilisé est pour moi celui du texte. Vous pouvez retrouver les modifications assez basiques disponibles dans les outils de bureautiques traditionnels (alignement, gras, sous-lignage, surlignage, etc). Le deuxième onglet de ce menu vous permet d’assigner un lien à votre texte afin de le rendre cliquable. Vous pouvez choisir d’appliquer un fond à la zone de votre texte dans le troisième onglet.

Si jamais vous désirez modifier la taille, la typographie ou encore même la couleur de votre texte veuillez vous rendre dans la seconde partie du menu « Style ». Dans ce même menu vous pouvez aussi régler des paramètres comme l’espacement du bloc, ses dimensions, sa bordure, mettre une ombre, etc.

Le module image Divi

Le second et très répandu est le contenu image. Il vous permet évidemment d’ajouter une image à la page, et ce, de différentes manières.

Dans ce menu vous pouvez choisir d’intégrer une image à partir de la médiathèque de médias du site ou bien depuis votre bureau. Si jamais elle ne vous plait pas vous pouvez l’effacer avec la petite poubelle ou bien cliquer sur la flèche retour pour revenir sur l’image précédente. Tout comme les contenus précédents vous pouvez changer le fond et attribuer un lien à l’image.

Dans la partie « Style » vous ne serez pas perdu car nous retrouvons les mêmes options encore une fois : espacement, dimensions, bordures, ombres, etc.

Le module vidéo Divi

Le troisième, la vidéo, est un copié collé du contenu précédent à la différence près que la vidéo peut être intégrée directement via une URL et non forcément un fichier. Il est possible de déterminer une image fixe de superposition quand la vidéo n’est pas encore lancée.

Le module bouton Divi

Pour finir le contenu bouton, comme vous avez pu le constater les menus d’édition se ressemblent tous. Dans celui-ci il vous suffit de changer le texte du bouton dans la première partie du menu et le style dans le second.

Le menu principal de votre page

Les options ne s’arrêtent pas à la modification des blocs. Si vous cliquez sur les 3 petits points situés en bas en plein milieu de la page vous allez ouvrir le menu principal :

Dans ce menu il y a 6 boutons en dehors de celui qui permet de le refermer une fois ouvert.

Le premier vous permet de choisir une mise en page déjà réalisée, que ce soit par un inconnu parmi les recommandations de Divi, les votres dans l’onglet « vos pages existantes » ou alors de charger un modèle que vous avez récupéré ailleurs dans l’onglet « télécharger le modèle » :

Le second vous permet d’enregistrer votre page comme modèle dans votre bibliothèque (ce sont ces modèles que vous retrouverez dans l’onglet « vos pages existantes » dans le menu du bouton précédent) :

Le troisième bouton sert à supprimer l’entièreté du travail effectué sur la page faites donc attention avant de cliquer sur le « oui » !

Le quatrième bouton vous permet d’accèder à des options d’une manière similaire à celle des blocs mais en l’occurrence les paramètres s’appliquent à la page entière :

Le cinquième bouton permet d’afficher l’historique des modifications que vous avez effectuées durant la session (attention si vous sortez du menu d’édition et y retournez, vous ne trouverez pas forcément l’historique complet, faites donc bien attention lorsque vous quittez cette page).

Le dernier bouton vous permet d’exporter ou importer une mise en page via un fichier au format json. Vous pouvez donc utiliser ce fichier via ce bouton et il vous suffira de le glisser dans ce même menu (section import) sur un autre site et tout devra se transférer à l’identique.

Les options supplémentaires de page

Lorsque vous avez ouvert votre menu vous avez remarqué qu’il y a d’autres boutons que ceux en violet qui sont apparus.

Nous allons donc nous intéresser au petit menu de gauche :

Le premier bouton permet de changer des options générales mais nous allons l’éviter pour ce tutoriel car c’est nous qui nous chargerons de ces paramétrages-là.
Le second vous permet d’afficher un aperçu dézoomé de votre page en affichant la structure des blocs uniquement afin de visualiser si elle tient la route.
Le troisième est similaire au précédent et permet d’afficher une vue dézoomée de votre page mais cette fois-ci avec son contenu et permet de se faire un avis sur le look de la page actuel.
Les trois derniers boutons permettent de changer le mode d’affichage de la page (web, tablette ou mobile) selon le bouton sur lequel on appuie.

Afin de terminer nous allons parler des petits boutons situés à gauche de votre écran :

Le premier vous ouvre une barre de recherche, elle vous permet de trouver une réponse à n’importe laquelle de vos questions.
Le second vous ouvre un petit menu qui vous affiche toutes les différentes couches qui composent votre page :

Le troisième recense toutes les aides dont vous pouvez avoir besoin vis-à-vis de fonctions basiques dont vous ignorez le fonctionnement, les réponses sont écrites et en vidéo pour certaines

L’enregistrement de votre page

Ce dernier bouton qui compose notre menu situé à gauche est celui qui permet d’enregistrer toutes les modifications que vous avez effectuées. Faites attention à ce que l’animation de chargement qui apparait lorsque vous cliquez dessus soit bien terminée et que le petit ricochet soit bien apparus avant de quitter la page sinon vous pourriez perdre une partie de votre travail.

Vous avez un site construits avec WordPress et Divi que vous souhaitez faire évoluer ? Vous avez besoin d’aide pour maintenir à jour votre site, que ce soit techniquement ou en matière de contenus ? Utilisez le formulaire ci-dessous pour contacter notre pôle WordPress. Nous serons ravis de pouvoir vous accompagner dans votre projet WordPress et Divi.