Sélectionner une page

Les basiques

18, Mar 2019

Introduction

Si vous vouliez apprendre les fonctionnement du langage HTML et CSS, qui sont les langages basiques de présentation d’un site internet sans pour autant prendre des cours et bien vous avez frappé à la bonne porte. Vous me direz quel est le rapport avec Divi ? Tout simple, si vous voulez comprendre le fonctionnement des deux langages ci-dessus, vous pouvez passer par comprendre la bases de Divi.

En effet, les basiques de Divi sont les sections, les lignes et ensuite les modules. Oui, dans les articles configuration je vous ai déjà parlé des modules, et bien là nous y reviendrons. Mais avant de voir ces bases, interessons nous d’abord à ce qui se passe quand vous créer une page ou un article et que vous activer le Visual Builder.

Si vous ne voulez pas lire, je vous conseille alors de regarder le tutoriel vidéo que j’ai consacré aux basiques de Divi.

 

Création d’une page / article

Quand vous allez vouloir créer un article ou une page et que vous activez le Visual Builder de Divi, vous allez immanquablement tomber sur l’image ci-contre. En effet, Divi vous laisse le choix entre 3 possibilités :

  • commencer de zéro (Build from Scratch) ;
  • choisir un modèle Divi (Choose a premade Layout) ;
  • choisir un modèle de page (Clone existing page).

La première option, vous permet de construire une page seule de A à Z. Vous pourrez bien sûr toujours y intégrer des modèles que vous avez prédéfinis.

Les deux options suivantes vont vous permettre d’accéder à un nouveau menu. Vous aurez le choix entre utiliser un modèle que vous propose Divi ou une page / article que vous avez déjà construit. Nous reverrons cela dans un prochain article.

Copie d'écran pour montrer comment se présenter la personnalisation du thème

Cliquez sur l’image pour l’agrandir

Les sections

Donc si vous créer une page ou un article de zéro vous allez donc devoir créer une section puis une ou plusieurs lignes contenant un ou plusieurs modules comme vous pouvez le voir dans l’image ci-contre.

La première section que j’ai crée contient une ligne qui contient un module texte. Dans la seconde section, j’ai crée une ligne comportant 2 modules.

Pour ajouter des sections, des lignes ou des modules, il vous suffit de cliquer sur les petits plus qui sont bleus pour une section, verte pour une ligne et noire pour un module (peu importe le module).

Copie d'écran pour montrer comment se présenter la personnalisation du thème

Cliquez sur l’image pour l’agrandir

Pour chaque section, vous allez avoir une fenêtre avec le menu ci-dessous :

 Avec les croix, vous allez pouvoir déplacer la section sur une page. Vous pourrez par exemple mettre une section au dessus d’une autre ou inversément.

 Avec la molette, vous allez pouvoir faire tous les réglages que vous souhaitez (cf réglages de la section).

 Grâce ce bouton vous pourrez dupliquer votre section qui se collera sous la section copiée.

 C’est l’une de mes fonctions favorites. En effet, vous pouvez sauvegarder la section dans la bibliothèque Divi pour la réutiliser par exemple dans une autre page.

 Bon, cette fonction est assez explicite sans que j’ai besoin de vous l’expliquer non ?

 

Retrouvez ce tutoriel en vidéo sur la chaine YouTube de Hellø Divi ou en cliquant ici.

Réglages de la section

 

Ce menu paramètres est peu ou prou le même menu que vous allez trouver pour les paramètres des lignes mais aussi des modules. Je vais vous faire un tour rapide pour que vous puissiez l’utiliser.

Menu Contenu

  • Lien : vous pouvez lier votre section à une autre page. Pas très utile et je vous avoue ne pas en voir l’intérêt…
  • Fond : vous pouvez changer le fond de la section. C’est très utile si vous voulez changer de couleur, créer un dégradé de couleur, ajouter une photo en fond ou encore une vidéo.
  • Étiquettes Admin : pas assez utilisé mais très utile si vous utilisez le mode bloc dans l’affichage de votre page ou article.

Menu Style

  • Modèle : jamais utilisé
  • Dimension : vous permets de réduire la taille de la section en %. Attention à ne pas confondre avec la fonction espacement.
  • Dividers : très utile si vous voulez ajouter en haut de section et en bas de section des motifs. Vous pouvez faire des réglages assez fins.
  • Espacement : c’est la fonction très utile qui vous permet non seulement de créer des marges dans la section, mais aussi de positionner la section.
  • Bordure & Box Shadow : vous pouvez ajouter une bordure, arrondir les angles ou encore ajouter des ombres comme je les fais pour chaque section ici.
  • Filters : vous pouvez modifier avec plusieurs filtres le rendu de la section.
  • Animation : elle vous permets de faire une animation pour l’apparition de la section comme pour les fameuses animation Powerpoint;

Menu Avancé

  • ID et classes CSS : vous permets de nommer les id ou les classes. Très utile pour créer des ancres.
  • Visibilité : extrêmement utile si vous voulez faire une section très sophistiquée pour ordinateurs et une autre pour mobile et tablette.
  • Transition : vous permets de gérer les transitions.
»Personnalisation

Cliquez sur l’image pour l’agrandir

Réglages de la section

 

»Personnalisation

Cliquez sur l’image pour l’agrandir

Quand vous souhaitez créer une nouvelle section, vous avez le choix entre 4 types de section :

  • la section normale qui est la plus souvent utilisée,
  • la section spécialité que vous allez utiliser essentiellement pour créer des pages
  • la section plein écran que vous utiliserez souvent pour créer des Landing Page notamment.

 

»Personnalisation

Cliquez sur l’image pour l’agrandir

»Personnalisation

Cliquez sur l’image pour l’agrandir

Pour le type de  section dite « Normal », comme vous pouvez le voir sur l’image ci-contre, vous avez un large choix de lignes qui comportent de une à 6 colonnes qui peuvent être de même taille ou de tailles différentes en fonction de vos besoins. 

Concernant les différentes tailles vous avez surtout un choix pour les lignes comportant 2 et 3 colonnes même si vous avez également le choix de taille sur les 5 colonnes.

Avec ce type de section vous allez pouvoir intégrer n’importe quels modules.

 

Si vous optez pour le type de section dite « Spécialités », vous pourrez intégrer plusieurs colonnes sur plusieurs modules comme vous pouvez le voir ci-contre. C’est très utile quand vous décidez de construire des pages un peu plus structurées.

Avec ce type de section, vous pourrez également intégrer n’importe quels modules que proposent Divi

 

»Personnalisation

Cliquez sur l’image pour l’agrandir

Avec le module plein écran par contre, vous n’allez pas pouvoir intégrer tous les modules que vous souhaitez. En effet, il s’agit d’occuper toute la page ou si vous préférez la largeur de la page. Tous les modules ne se prêtent pas à cela.

Vous pourrez donc uniquement utilisez les modules suivants : Carte, Code, Curseur de défilement post, Curseur de défilement pleine page, En-tête plein écran, Image, Menu, Portefeuille d’articles, Titre de la page ou de l’article.

Rangées & modules

Comme vous avez pu le voir déjà plus haut dans l’article chaque section doit comporter au moins une ligne. C’est pour cela que chaque section crée, Divi vous ouvre directement le menu rangée ci-contre. Sachez que dans chaque section, vous pouvez créer autant de rangée que vous voulez et en plus de formes très variées.

Comme pour la section, vous avez également un menu en haut à gauche de la fênetre qui va vous permettre notamment de modifier les réglages, de déplacer la rangée ou encore de la sauvegarder.

Comme vous pouvez le voir sur l’image ci-dessus, il y a un icone supplémentaire. 

 Cette grille va en effet vous permettre de revenir sur le menu ci-contre une fois que vous avez crée votre rangée afin d’en modifier le nombre de colonnes ou encore leur taille.

Une fois que vous avez créer votre rangée, Divi, très intelligemment vous proposera de passer automatique à la phase suivante en ouvrant le menu module pour vous proposer les modules à intégrer. Vous pouvez donc ensuite insérer autant de modules que vous voulez. 

Copie d'écran pour montrer comment se présenter la personnalisation du thème

Cliquez sur l’image pour l’agrandir

Oups j’ai oublié la sauvegarde

Quand vous travaillé à créer des sections, des rangées puis des modules, il ne faut pas oublier de faire une action régulièrement… Il faut sauvegarder. En effet, Divi le fait automatiquement, mais je ne sais pas pourquoi mais cela ne marche pas à tous les coups. Donc dès que vous avez crée un module (pour les plus méticuleux) ou une rangée (pour les plus détendus), je vous conseille de cliquer sur ce fameux bouton vert sauvegarder. 

Peutite subtilité, si comme moi vous créez un article et que vous programmiez sa publication ou que vous travaillez en mode brouillons, vous allez voir apparaitre le bouton Enregistrer le brouillon Publier. Si vous avez déjà planifié la date de parution, pour sauvegarder vous devez cliquer sur Publier. Par contre, si vous êtes en mode Brouillon, je ne serais trop vous conseiller de cliquer sur le bouton Enregistrer le brouillon. Si vous cliquez sur le bouton Publier, vous allez alors publier automatique votre article. C’est pour cela que je préfère planifier mon article à la création.

Copie d'écran pour montrer comment se présenter la personnalisation du thème
Copie d'écran pour montrer comment se présenter la personnalisation du thème

Conclusion

Voilà, çà y est vous savez comment créer une section, une rangée mais également comment insérer des modules. Vous êtes fin prêt pour pouvoir déjà créer votre page. Testez et testez encore car vous ne pouvez rien faire de grave au pire, vous n’aurez qu’à ne pas enregistrer votre travail. Vous pouvez également, si vous vous êtes trompé utiliser la flèche de retour pour annuler une modification que vous avez fait dans le menu.

Retrouvez ce tutoriel en vidéo sur la chaine YouTube de Hellø Divi ou en cliquant ici.