Utilisation du composant contenu riche

I - Fonctionnalités simples

    1. Fonctionnement global

Voici ci-dessous un exemple du composant contenu riche :

À la manière d'un éditeur de texte, saisissez votre contenu textuel au sein de la fenêtre. Il est possible d'inclure des liens, de personnaliser les styles, la police, l'alignement ainsi que la couleur de votre texte à l'aide des différents boutons du composant.

Remarque : pour ajouter du code HTML, utilisez le bouton "Source" qui affiche le code source (HTML) du contenu. Vous pourrez par exemple copier/coller le code d'intégration (code embeded) d'une vidéo YouTube par exemple.

    2. Utilisation de paragraphes

Les paragraphes sont réalisés au moyen de sauts de ligne "standards" (touche Entrée). Si vous souhaitez effectuer un saut de ligne au sein d'un même paragraphe, utilisez la combinaison de touches Shift (ou Maj) + Entrée de votre clavier simultanément.

Retrouvez l’aide en ligne pour créer tout le contenu que vous voulez dans vos articles :

• Ajouter une photo dans un article
• Ajouter une vidéo dans un article
• Ajouter un lien dans un article
• Ajouter un bouton d'action dans un article
• Ajouter un document dans un article
• Ajouter un son dans un article
• Ajouter un tableau dans un article

II - Fonctionnalités avancées

    1. Adaptabilité aux différentes tailles d'écran

Pour rendre vos messages dans un format responsive (redimensionnables), utilisez les classes Bootstrap adaptées au sein de vos balises HTML :

• col-xs-* : largeur des éléments pour les très petits écrans (<576 px)
• col-sm-* : largeur des éléments pour les petits écrans (>575 px)
• col-md-* : largeur des éléments pour les écrans moyens (>767 px)
• col-lg-* : largeur des éléments pour les grands écrans (>991 px)

* Remplacez l'étoile par une largeur comprise entre 1 et 12. Notez que la largeur totale des éléments d'une même ligne doit être égale à 12.

Par exemple, voici 3 éléments d'une même ligne avec la classe col-sm-4 :

    2. Masquer ou afficher du contenu sur mobile (hidden-xs / visible-xs)

Afin d'optimiser la lisibilité de vos articles sur smartphone, vous pouvez choisir de masquer ou d'afficher certains éléments uniquement sur les très petits écrans (<576 px) :

• hidden-xs : masque l'élément sur mobile (il restera visible sur tablette et ordinateur).
• visible-xs (ou visible-xs-block / visible-xs-inline) : affiche l'élément uniquement sur mobile (il sera masqué sur les écrans plus grands).

Exemple 1 : Masquer une image volumineuse sur mobile (hidden-xs)

Sur ordinateur, une bannière s'affiche. Sur smartphone, elle disparaît pour gagner de l'espace.

• 💻 Sur ordinateur : [ Image de la bannière ] + Texte de bienvenue.
• 📱 Sur smartphone (<576px) : Texte de bienvenue uniquement.

Code HTML à insérer :

<!-- L'image sera masquée uniquement sur mobile -->
<img src="ma-banniere.jpg" class="img-responsive hidden-xs" alt="Bannière" />

<p>Bienvenue sur notre page ! Retrouvez toutes nos informations ci-dessous.</p>

Exemple 2 : Afficher un bouton d'appel uniquement sur mobile (visible-xs)

Le bouton d'appel direct s'affiche uniquement pour les utilisateurs sur smartphone.

• 💻 Sur ordinateur : "Pour toute question, contactez-nous à l'adresse contact@exemple.fr."
• 📱 Sur smartphone (<576px) : "Pour toute question, contactez-nous à l'adresse contact@exemple.fr." + [ 📞 Appeler le club ]

Code HTML à insérer :

<p>Pour toute question, vous pouvez nous contacter à l'adresse contact@exemple.fr.</p>

<!-- Ce bouton n'apparaîtra que sur smartphone -->
<a href="tel:0123456789" class="btn btn-success visible-xs-block">📞 Appeler le club (01 23 45 67 89)</a>