Personnaliser le contenu d'un Rich Text Webflow sans limite

Webflow offre de multiples fonctionnalités pour personnaliser son CMS. En créant différentes collections et en y personnalisant chaque champ, on peut créer un site web qui sera facilement scalable. Le CMS de Webflow permet d'ajouter facilement du contenu sur son site web en créant des pages ou en ajoutant du contenu à certaines sections en quelques minutes.

L'un des champs les plus populaires et sûrement le plus flexible est le Rich Text. Un rich text est un format de texte qui permet d'ajouter des fonctionnalités supplémentaires telles que la mise en forme, les liens hypertexte et les images, pour rendre le contenu plus visuellement attractif et interactif.

Cependant, à l'heure actuelle, le Rich Text de Webflow comporte quelques limites d'édition. Dans cet article, nous allons voir comment contrer ces limites grâce à une extension Webflow no-code (ou presque).

Personnaliser son Rich Text Webflow avec Sneaps

Sneaps est l'extension pour Webflow qui révolutionne la personnalisation du Rich Text.

Avec Sneaps, vous pouvez libérer votre créativité en ajoutant facilement du contenu riche à vos pages web :

• Personnalisez le style de vos textes
• Insérez des tableaux
• Créez des listes à plusieurs niveaux
• etc.

Sneaps vous offre une expérience de conception enrichie, vous permettant de créer des designs captivants et d'améliorer l'aspect visuel de votre contenu dans Webflow.

Comment utiliser Sneaps dans Webflow ?

1. Téléchargez l'extension Webflow

Dans un premier temps, il vous faudra télécharger / installer l'extension Sneaps sur votre navigateur web.

2. Ouvrez votre projet dans le Designer Webflow

Une fois que l'extension est installée, vous pouvez vous rendre dans votre projet Webflow.

Il est important de noter que l'extension ne fonctionne que dans le Designer de Webflow et pas dans le mode éditeur.

3. Créer vos styles supplémentaires via l'extension dans le CMS

Une fois que vous êtes dans votre projet, vous pouvez vous rendre dans votre CMS, dans une de vos collections et plus précisément dans l'item dans lequel vous souhaitez avoir plus d'options pour la mise en forme du Rich Text.

Quand vous êtes au niveau de votre champ Rich Text, vous verrez qu'au-dessus un nouveau bouton est apparu. Lorsque vous cliquez sur ce bouton "Add rich content", vous avez un nouvel éditeur de contenu riche qui apparaît.

Dans ce nouvel éditeur, vous avez beaucoup plus de fonctionnalités (comme vu précédemment) que celui de Webflow. Vous n'avez qu'à personnaliser votre contenu comme bon vous semble (par exemple en ajoutant un tableau, en changeant la couleur des textes, leurs tailles, etc.).

4. Copier le code source et coller le dans un embed Rich Text

Quand vous avez fini de personnaliser votre contenu, celui-ci n'apparaîtra pas ensuite directement dans votre champ Webflow. Il faudra réaliser une petite manipulation pour l'insérer dans votre champ.

Vous devrez ouvrir l'onglet "Tools", puis à l'intérieur cliquer sur "Source code". Il vous faudra ensuite copier tout le contenu (ctrl ou cmd + a pour tout sélectionner puis ctrl ou cmd + c pour copier).

Ensuite, il faut :

1. Retourner dans votre champ natif rich text.
2. Ajouter un élément embed.
3. Coller le code (ctrl ou cmd + v).
4. Cliquer sur "Save and close".
5. Publier votre item pour voir le contenu apparaître sur votre page.

Certes, les modifications ensuite seront plus compliquées, mais avec cette méthode, vous pouvez "facilement" personnaliser de façon plus poussée votre contenu.

5. Dépasser la limite des 10 000 caractères Embed Webflow

Malheureusement avec Webflow, une nouvelle limite peut poser problème. Et oui, nous ne pouvons pas dans un élément embed dépasser les 10 000 caractères.

Option 1 : Scinder en plusieurs embed

Nous vous recommandons, pour être sûr de ne jamais dépasser les 10 000 caractères, de ne pas rédiger tout votre contenu dans Sneaps, mais d'utiliser un mix entre Webflow et Sneaps. Nous vous conseillons également de diviser le contenu que vous ajoutez dans Sneaps en plusieurs parties dans cette même optique.

En suivant cette approche, vous pourrez optimiser la gestion de votre contenu et éviter les éventuelles limitations de caractères imposées par Sneaps. En utilisant Webflow et Sneaps de manière complémentaire, vous pourrez exploiter au mieux les fonctionnalités de personnalisation tout en garantissant une expérience fluide pour vos utilisateurs.

Option 2 : Solution plus "technique"

La seconde option est un peu plus technique et sa facilité d'édition est très faible. Si le code dépasse les 10 000 caractères, vous pouvez :

• Coller le texte dans un éditeur de texte
• Enregistrer le fichier en format .txt
• Uploader le fichier .txt dans les assets de votre projet
• Copier la source du fichier .txt
• Ajouter un élément embed avec le code suivant dans votre rich text

<div id="rich-text-container"></div>

<script>
// Fonction pour charger le contenu du fichier
function loadHTMLContent(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        callback(xhr.responseText);
      } else {
        console.error('Error : ' + xhr.status);
      }
    }
  };
  xhr.open('GET', url, true);
  xhr.send();
}

// Charger le contenu du fichier et l'injecter dans la page
loadHTMLContent('src.txt', function(htmlContent) {
  document.getElementById('rich-text-container').innerHTML = htmlContent;
});
</script>

• Remplacer la source du fichier .txt par celle que vous avez copier
• Publier l'item

Le problème de cette méthode est que la modification nécessite de répéter les étapes depuis le début.

Voilà comment vous pouvez personnaliser votre rich text dans webflow en ajoutant notamment des tableaux facilement. Pour aller plus loin, vous pouvez apprendre à ajouter des composants dans un rich text Webflow !