barre

WIKI : INFOS ESSENTIELLES

Sommaire

  1. À propos du thème
    • Ressources utiles
    • Constructeur de page
  2. Construction par blocs
    • Fonctionnement en poupées russes
    • Fonctions des blocs
    • Rendu des blocs
    • Basculement entre les modes
  3. Réglages des blocs
    • Paramètres essentiels
    • Modules essentiels
    • Vérification des vues

À PROPOS DU THÈME

Informations et ressources utiles

Nom du thème :
DIVI (par Elegant Themes)

Documentation :
https://www.elegantthemes.com/documentation/divi/

Tutoriels officiels (en anglais) : https://www.youtube.com/channel/UCuasRuWliU48RwnKXf9GesA

Une particularité du thème: le constructeur de page

Le thème DIVI a la particularité de proposer un constructeur de page. Un constructeur de page est une application qui permet de mettre en page du contenu en évitant de passer par le code. Autrement dit, c’est une interface de création.

Le constructeur de page de DIVI porte plusieurs noms dans le site. Vous le trouverez sous ces deux noms: « Générateur DIVI » ou « Visual Builder ». Dans ce wiki, le terme « éditeur visuel » sera utilisé pour désigné l’un ou l’autre, à moins qu’une précision soit nécessaire.

En plus de ce constructeur de page, le thème permet l’utilisation de l’éditeur classique de WordPress, aussi appelé « éditeur standard ». Cependant, l’ensemble du site a été mis en page avec l’éditeur visuel. C’est donc l’outil à utiliser!

Éditeur classique ou éditeur standard

Éditeur visuel ou Générateur Divi

main

alerteATTENTION! Les deux éditeurs (classique et visuel) sont proposés à chaque ajout ou modification de page et article. Si vous choisissez d’utiliser l’éditeur classique, la mise en page construite avec l’éditeur visuel sera perdue.
Rassurez-vous! Si vous cliquez au mauvais endroit, une fenêtre d’alerte va s’ouvrir. Il suffira de cliquer sur la croix pour revenir en arrière.

UNE CONSTRUCTION PAR BLOCS

Des blocs en poupées russes

poupées russes

Les pages et articles sont bâtis à partir de blocs qui agissent comme des poupées russes. Un bloc est dans un bloc qui est lui-même dans un  bloc. Il y a toujours trois niveaux avec l’éditeur visuel :

  • Le bloc SECTION (qui apparait en bleu)
  • Le bloc LIGNE (qui apparait en vert)
  • Le bloc MODULE (qui apparait en noir)

Ainsi, un bloc MODULE est dans un bloc LIGNE qui est dans un bloc SECTION. Ces empilements de blocs permettent de structurer les contenus, en évitant de passer par du code.

Les fonctions des blocs

Les blocs servent uniquement à structurer les informations. Un bloc SECTION peut contenir plusieurs blocs LIGNE et un bloc LIGNE peut contenir plusieurs blocs MODULES. Chaque bloc SECTION sert donc de boîte au(x) bloc(s) LIGNE qu’il contient. Et chaque bloc LIGNE sert aussi de boîte au(x) bloc(s) MODULES qu’il contient.

  • Un bloc MODULE permet de préciser le type de contenu.
    Par exemple : du texte, une image, une vidéo, etc.
  • Un bloc LIGNE permet d’organiser le contenu sur une ou plusieurs colonnes.
    Par exemple : un texte dans la colonne 1 et une image dans la colonne 2
  • Un bloc SECTION permet de régler la présentation de l’ensemble
    Par exemple : ajouter un fond de couleur en arrière-plan

Le rendu des blocs

Si l’empilement des blocs n’est pas encore clair, ça viendra avec la pratique et surtout avec la visualisation du rendu. En effet, l’éditeur visuel a deux modes: un mode back-end et un mode front-end.

  • Le mode back-end permet de voir la structure des blocs
  • Le mode front-end permet de voir le rendu des blocs

Mode BACK-END (structure)

Mode FRONT-END (rendu)

blocs front end

Le basculement entre les modes

Pour basculer d’un mode à l’autre, voici comment faire :

Aller du BACK-END au FRONT-END

Depuis le back-end, cliquer sur Construire sur le front end

Aller du FRONT-END au BACK-END

Depuis le front-end, cliquer sur Modifier la page

LE RÉGLAGE DES BLOCS

Les paramètres essentiels

Chaque bloc propose les mêmes paramètres de base. Seules les couleurs varient selon le type de bloc. Les paramètres des modules sont noirs, ceux des lignes sont verts et ceux des sections sont bleus.

Voici à quoi servent les plus utiles :

Déplacer un bloc

Modifier un bloc

Dupliquer un bloc

Supprimer un bloc

Ajouter un bloc

main

ASTUCE : Avant de modifier un bloc, le dupliquer vous permettra de retrouver ses paramètres d’origine, au besoin.

Les modules essentiels

Permet l’ajout des titres, sous-titres, paragraphes et listes à puce. Bref, de tout type de texte!

Permet l’ajout de tout contenu provenant de la bibliothèque média (sauf les vidéos). Pour les vidéos, utiliser le module « Vidéo »

Permet l’ajout d’une citation selon un format personnalisé

Permet l’ajout de boutons et de listes dont la puce est une icône. Bien que le module « Bouton » existe, il n’est pas utilisé car il ne permet pas l’utilisation des icônes Oxfam.

Les vues à vérifier

Vous travaillez depuis votre ordinateur. Mais, avant toute publication, il faut aussi vérifier l’affichage sur téléphone et tablette.

Pour cela, depuis le FRONT-END :

  1. Aller tout en bas de votre page puis cliquer sur le bouton avec les 3 points options du front end
  2. Des options vont apparaître à gauche, cliquer sur l’un des trois appareils pour vérifier l’affichage vues appareil
  3. Selon la vue choisie, la page active va changer d’apparence
Share This