Sélectionner une page

Module Texte

21, Mar 2019

Introduction

On a vu les semaines précédentes comment configurer Divi (1ère, 2ème et 3ème partie) et la semaine dernière nous avons vu les basiques de Divi. Il est temps maintenant de rentrer dans le vif du sujet : l’utilisation des modules et spécifiquement le module texte de Divi.

On me pose souvent la question est ma réponse est invariablement la même : le module texte. Eh oui, le module texte est à la base de la création d’un site Internet avec le module image que vous verrez la semaine prochaine. Avec ce module, vous allez pouvoir transmettre toute l’information que vous souhaitez transmettre en la mettant en page. Je vous assure, les combinaisons sont énormes et je ne sais même pas si j’aurais assez d’un article pour tout vous dire.

Comment ajouter du texte avec le module texte de divi ?

Comme vous le savez puisqu’on l’a vu dans l’article de la semaine dernière sur les basiques, avant de pouvoir intégrer n’importe quel module à une page, il est nécessaire d’abord de créer une section et à l’intérieur de cette dernière une rangée. Une fois que vous avez créée la rangée, vous pourrez donc insérer votre module texte.
Comme les modules dans le menu module sont classés par ordre alphabétique, il va falloir scroller avec votre souris (utiliser votre vis ou cliquer sur la flèche vers le bas) pour trouver le module.
Astuce : Si comme moi vous êtes un peu fainéant, non on va dire efficace, je vous conseille de taper sur la barre de recherche texte, ou pour les plus efficaces tex pour que le module apparaisse. Vous aurez plus qu’à cliquer.

Dès que vous avez cliqué sur le module texte, le menu de paramétrage du contenu apparaît. Vous avez en fait 3 onglets. Ils correspondent aux 3 menus pour gérer votre module texte de divi.

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

Cliquez sur l’image pour l’agrandir

La mise en forme du texte du module texte de divi

Texte

C’est là que vous allez pouvoir insérer votre texte. Pour insérer du texte vous avez 2 modes : le mode expert organisé et le mode touche à tout.
Le mode expert organisé, c’est en fait la personne qui, avant d’avoir installer WordPress et Divi a fait des maquettes ultra précises et réalistes avec le texte et les images. Dans ce cas vous n’aurez qu’à faire un copié collé de votre texte dans le menu Texte. Vous pourrez y faire les mises en forme si vous le souhaitez. Je vous conseille plutôt de le faire dans le menu suivant.
J’utilise ce mode quand je travaille avec des agences qui ont déjà fait un gros travail en amont ou quand le client demande des maquettes de rendus.

Dans le menu Illustration, vous allez surtout utiliser le menu Paragraph. En effet, comme dans l’éditeur WordPress, vous allez pouvoir transformer une partie de votre texte en titre 1 (H1), titre 2 (H2) etc… 

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

 

Dans le menu Illustration, vous allez surtout utiliser le menu Paragraph. En effet, comme dans l’éditeur WordPress, vous allez pouvoir transformer une partie de votre texte en titre 1 (H1), titre 2 (H2) etc… 

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

 

Comme vous pouvez le voir dans l’image ci-dessus, j’ai sélectionné le texte et en cliquant sur la petite flèche vers le bas à côté du B, j’ai ouvert un menu déroulant et sélectionner Heading 1. Cela va vous permettre ensuite de mettre en forme votre Heading 1 ou Titre 1.

Lien

Avec le sous menu lien, vous pouvez ajouter un lien à votre module texte de Divi. Attention, ce n’est pas un lien que vous pouvez insérer pour une partie du texte. Non, il s’agit d’un lien que vous insérer pour que vous puissiez cliquer dessus dès que vous survolez le texte avec votre souris ; peu importe où vous cliquez.

Fond

Pour modifier le fond 4 options s’offrent à vous.

La première est la plus simple, vous remplissez le fond avec une seule couleur. Pour cela cliquez sur le plus et vous pourrez ensuite choisir la couleur que vous voulez dans la palette de couleurs ou dans les couleurs que vous avez présélectionner dans les réglages.
La seconde, vous pouvez créer un fond avec un dégradé de 2 couleurs. Là encore vous pourrez sélectionner la première couleur, puis la seconde et ensuite vous pourrez régler le dégradé.
La troisième, vous pouvez intégrer une image en fonds et la quatrième, vous pouvez même intégrer une vidéo. Top non ? Il faut tout de même noter que dans le cas d’une image ou d’une vidéo, la taille de celle-ci dépendra de la taille du texte. Donc si vous insérez une vidéo avec une ligne de texte, vous risquez de ne pas voir la vidéo…
Je vous ferez bientôt une vidéo pour vous faire une démo. Mais voici quelques exemple de fonds de module de texte.

Étiquette Admin

Ce menu vous permet de nommer le blog de texte. En effet quand vous êtes en mode d’affichage bloc, vous ne voyez pas le contenu. Il est donc plus facile de le gérer en le nommant. C’est un peu fastidieux, mais c’est souvent très utile si vous utilisez le mode d’affichage bloc dans l’utilisation du module texte de Divi.

La mise en forme du style du module texte de divi

Texte

Dans ce menu, vous avez 5 sous menus que vous pouvez utiliser pour mettre en forme dans votre module texte de Divi.
Le premier en partant de la gauche vous permet de mettre en forme le texte que vous avez insérer dans le menu Texte du Réglages du contenu. Vous pouvez changer la taille de la police, la police elle-même, la couleur, l’interligne etc…

Le second vous permet de mettre en forme les liens de vos textes. Il s’agit des mots ou des phrases auxquels vous avez attaché un lien. Vous pouvez vous contentez de la mise en forme que vous avez mise en place dans le Personnalisateur de thème ou personnaliser à votre goût.

Le troisième vous permet de mettre en forme vos puces. J’utilise surtout Unordered List Item Ident qui vous permet de créer un retrait de vos puces (enfin !).

Le quatrième vous permet de mettre en forme vos puces numérotées. Ce sont les mêmes options que le menu précédent.
Le cinquième, que j’utilise que trop rarement car je mets rarement des citations, vous permet, vous l’avez compris de mettre en forme vos citations. Une condition tout de même, il est important que le texte cité soit noté dans le contenu en cliquant sur le bouton “.

Attention, vous mettez en forme le texte que vous avez inséré avec la mise en forme paragraphe. Les titres seront mises en forme dans le menu suivant.

Heading Text

C’est souvent l’un des menus les plus utilisés. En effet, mettre en forme les titres est souvent un casse tête surtout si vous respectez les règles du référencement… Si vous avez cliqué vous verrez que Divi vous autorise la mise en forme de 6 types de titres. Pour ma part, je configure que jusqu’à H4, au delà c’est plus lisible. 4 types de titres c’est déjà pas mal, non ?

Là encore, vous allez retrouver les mêmes options que pour le texte. Vous allez pouvoir changer la taille, la police, l’interligne, la couleur, etc…

Dimensionnement

Ce menu, je l’utilise assez peu, je l’avoue, vous permet de modifier la taille du module et non du texte en lui même. Cela permet de réduire la largeur du module texte qui par défaut prend toute la largeur de la rangée et de la section si vous n’avez rien modifié. Une image vaut mieux qu’un long discours :

Sur cette image j’ai deux modules texte identique. Le premier a une dimension de 100% par défaut, alors que le second a une dimension de 80 % et est centré.

Espacement

Comme vous pouvez le voir sur l’image ci-contre, vous pouvez paramétrer l’espacement de votre module texte de Divi. Vous allez me demander et vous auriez raison, quelle est la différence entre la marge et la marge interne ? C’est en fait assez simple, si vous ajoutez une marge, votre module texte va se décaler avec la bordure et le fond. Par contre, si vous ajoutez une marge interne, vous allez ajouter un espacement entre votre texte et la bordure ou le bord.

Par défaut, Divi utilise le px ce qui veut dire pixel. Vous pouvez aussi changer l’unité de mesure en ajoutant un %. J’utilise quasiment exclusivement cet unité, car cela permet dans le cas d’un site mobile de conserver l’espacement en proportion de la taille de l’écran.

Une dernière chose très utile, vous pouvez voir qu’entre de cases il y a un espace d’anneau barré. Cela signifie que les deux cases ne sont pas lié. Par contre, si vous cliquez dessus, l’anneau se joint et devient bleu et vous pourrez augmenter l’une des deux valeurs sans devoir augmenter l’autre. Pratique…

Cliquez sur l’image pour l’agrandir

Bordure

Rounded Corners
Cela vous permet d’arrondir les angles de votre module texte de Divi. Plus vous augmenter, plus vos angles seront arrondis. Par défaut, les cases sont liées, ce qui permet d’arrondir tous les coins avec le même rayon (même valeur). Si vous cliquez sur le lien au milieu vous désolidariser les coins comme pour l’espacement (insérer le lien)

Border Styles
Vous allez pouvoir définir quels bords de votre module seront munis de bordure. Si vous voulez faire une bordure complète cliquez sur le carré. Sinon sélectionner l’un des autres bords. Attention, si vous sélectionner qu’un seul bord, il va falloir ensuite sélectionner individuellement l’épaisseur et la couleur.

Si le bord n’apparaît pas sur votre module, c’est normal vous n’avez pas encore défini l’épaisseur de votre bordure qui par défaut est à 0.

Largeur de la bordure
Vous allez pouvoir définir l’épaisseur de votre bordure. Dès que vous sélectionnerez 1 px, vous allez voir votre bordure apparaître.

Couleur de la bordure
Vous pouvez changer la couleur comme vous le souhaitez.

Style de la bordure
Dans le menu déroulant, vous aurez le choix entre différentes formes de bordure comme les pointillés, la double bordure, etc… Testez vous verrez.

Cliquez sur l’image pour l’agrandir

Box Shadow

Cette option vous permet de créer des ombres pour votre module Texte de Divi. Cela permet de mettre en relief votre module. Si vous créez des ombres, n’oubliez pas non plus de travailler votre bordure auparavant ou après.

Une fois que vous avez sélectionné l’une ou l’autre type d’ombres, vous avez différentes options qui vous permettront de changer la couleur de l’ombre par exemple de changer la position verticale et horizontale etc…

Filters

Les filtres vous permet de modifier l’apparence entière de votre module texte de Divi. J’avoue que je l’utilise jamais, mais je vais m’y plonger dans les prochains temps spécialement pour vous.

Animation

Ce menu vous permet d’animer votre module pour le faire apparaître uniquement. Cela doit vous rappeler des séances de Powerpoint. Le principe est exactement le même. Attention tout de même à le manier avec précaution car trop d’animations nuit à la présentation.

Les réglages avancés du module texte de divi

Les réglages avancés, cela veut dire qu’il faut une certaine pratique pour les utiliser.

ID et classes CSS

Il permet de nommer un id ou une classe pour ensuite y insérer du code CSS. Cela peut vous paraitre barbare, mais c’est très utile. Si vous débutez cela peut être très utile si vous souhaitez lier 2 blocs ensemble. Par exemple, vous pouvez voulez créer un lien vers un bloc de la même page. Pour cela, vous allez renseigner la partie ID en insérant #nom. Puis dans le lien vous n’aurez plus qu’à y faire référence en tapant à nouveau #nom.

Cliquez sur l’image pour l’agrandir

Personnaliser CSS

Vous pouvez personnaliser l’affichage de votre page CSS en y entrant du code. C’est ici que cela se passe.

Visibilité

C’est l’autre menu que j’utilise régulièrement. En effet, vous pouvez masquer en fonction du type d’appareils qui consulte votre page le module. Vous avez le choix entre le téléphone, tablette et le bureau.

Transition

Vous pouvez retarder ou avancer l’affichage de votre module avec ce menu.

Les réglages HOVER du module texte de divi

Depuis peu, Divi a ajouté une nouvelle fonctionnalité très pratique pour personnaliser la plus part des menu avec la fonction HOVER.

Cette fonction vous permet de modifier le réglage au moment du survol de la souris. Sur l’image ci dessus je peux modifier le fond de mon module quand je survole avec ma souris. Cela peut être très pratique pour mettre en avant un module avec la souris. Attention, peu importe que vous ayez ou non un lien, ce n’est pas lié..

Conclusion

J’espère que vous avez pu découvrir le module texte de Divi. Bien sûr, je n’ai pas vu tous les réglages, car j’aurais pu y passer des heures. Je vous laisse volontairement jouer et tester les choses. Cela va vous permettre d’apprendre.

Si vous voulez avoir plus de précisions sur les mises en forme du module texte de Divi, je vais entamer dans les semaines qui viennent une série d’articles pour détailler les différentes mises en forme possible sur le module.