Comment personnaliser les styles du rich text dans Webflow ?

Le composant Rich Text dans Webflow

Rich Text est un outil puissant pour gérer du contenu textuel avec des options de style intégrées. En lui attribuant une classe CSS, par exemple "text-rich-text" selon le framework Client First et une fois les styles appliqués à chaque élément (titres, paragraphe, texte, bullet point, liste, image etc.) vous pourrez homogénéiser le style de vos textes. Cependant, il présente certaines limitations en termes de personnalisation de style.

Personnalisation limitée des éléments spécifiques

Vous ne pouvez pas styliser individuellement les éléments à l'intérieur d'un Rich Text, comme des mots ou des phrases spécifiques, sans appliquer un style global qui affecte tout le même type d'élément (comme tous les liens ou tous les paragraphes).

‍

Options limités pour les titres

Pour styliser un titre en lui attribuant deux couleurs différentes par exemple, il faut utiliser du code HTML et CSS.

1. On a déjà défini une couleur aux titres H2 du rich text. Cette couleur définit donc tous les titres H2 à l'intérieur d'une balise rich text.
2. Pour donner une autre couleur à un titre H2 spécifique, il faut alors créer une nouvelle classe CSS : "custom-H2" par exemple à laquelle on attribuera une nouvelle couleur.
3. On définit ensuite une seconde couleur en créant une nouvelle classe CSS pour obtenir un titre H2 avec deux couleurs.

<style>
 /* on définit la couleur principale du titre custom H2 */
.custom-h2 {
  color: #000000;
}
 /* on définit la seconde couleur du titre H2 */
.couleur-secondaire {
  color: #FFFFFF;
}
</style>

‍

Dans l'article d'une collection CMS, on crée un embed code dans lequel on segmente son titre par couleur avec une balise <span>

<h2>
class="custom-h2">
  La partie du titre couleur "custom-H2" 
  
<span>class="highlight-gold">la partie du titre couleur "couleur-secondaire"</span>
.
</h2>

Cette méthode peut s'étendre à tous les éléments d'un rich text. On peut attribuer toutes les propriétés CSS souhaitées : couleur, graisse, taille, etc.

‍

Options limitées pour les listes

Les listes à puces ou numérotées dans un Rich Text ne peuvent pas être personnalisées de manière approfondie.

Par exemple, vous ne pouvez pas changer facilement le type de puce ou le style de numérotation, ni ajuster l'espacement de manière détaillée. Seul du custom code permettra de créer des listes personnalisées.

Voici deux exemples avec des notes pour chaque ligne :

<style>
.text-rich-text ol {
    counter-reset: list-counter;  
  }

  .text-rich-text ol li {
    list-style: none; /* Supprime les puces numérotées par défaut */
    counter-increment: list-counter;
    position: relative;
  }

  .text-rich-text ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: -0.5em; /* Ajustez cette valeur en fonction de votre design */
    color: #A28C4E; /* Exemple de couleur */
    font-size: 2.5em; /* Exemple de taille de police */
    opacity: 0.2; /* Exemple d'opacité */
  }
</style>

‍

<style>
  .text-rich-text ul {
    list-style: none; /* Supprime les puces par défaut */
    padding-left: 1em; /* Espace de marge à gauche */
  }

  .text-rich-text ul li {
    position: relative;
    margin-bottom: 0.5em; /* Espacement entre les éléments de la liste */
    padding-left: 1.5em; /* Espace pour la puce personnalisée */
  }

  .text-rich-text ul li::before {
    content: '•'; /* Caractère pour la puce */
    position: absolute;
    left: 0; /* Positionnement de la puce */
    color: #A28C4E; /* Exemple de couleur */
    font-size: 2.5em; /* Exemple de taille de police */
    opacity: 0.8; /* Exemple d'opacité */
    line-height: 0.5em; /* Alignement vertical de la puce */
  }
</style>

‍