Ajouter un bouton d'action

La plateforme offre la possibilité de placer des boutons d'actions dans n'importe quel éditeur de texte de la plateforme (page statique, texte d'introduction des étapes, sections de l'accueil, etc). Un bouton personnalisé ne peut être qu'un lien vers une autre page.

Dans cet article

Comment ajouter un bouton dans un éditeur de texte ?

C'est en allant dans la source d'un éditeur de texte que l'on va pouvoir créer des boutons en les insérant sous forme de code.

En HTML, un lien est composé d'une balise <p> et d'une balise <a>. L'attribut href permet de cibler le lien vers lequel diriger l'utilisateur.

<p><a href="http://exemple.cap-collectif.com/projects">Participer</a></p>

La page /projects est la page contenant la liste de tous les projets participatifs de votre plateforme.

Il est recommander de n'afficher que /projects plutôt que le lien en entier. En effet, cela permet d'obtenir des URLs relatives qui ignorent les redirections (dans le cas d'une URL personnalisée).

Il suffit d'ajouter l'attribut class suivi des classes btn et btn-primary pour transformer le simple lien en bouton.

Si l'on quitte l'affichage source, le bouton ne s'affiche pas dans l'éditeur de texte. 

Mais une fois les modifications enregistrées, le bouton s'affiche bien sur le front du site !

Vous pouvez ainsi faire des liens vers différentes étapes de participation du site.

Comment modifier l'apparence des bouton ?

Taille des boutons

Il existe quatre tailles de boutons. Dans l'exemple ci-dessus, la taille des boutons est celle par défaut : medium. Ajoutez l'une des classes suivantes pour modifier la taille du bouton :

  • btn-lg

    pour un bouton plus gros que medium

  • btn-sm

    pour un bouton plus petit que medium

  • btn-xs

    pour un bouton plus petit encore

Voici ce que l'on obtient si on souhaite un grand bouton :

<p><a class="btn btn-primary btn-lg" href="/projects">Participer</a></p>

Bouton transparent

Les boutons peuvent être transparents plutôt que pleins. Pour cela, ajoutez btn--outline après btn-primary :

<p><a class="btn btn-primary btn--outline" href="/projects">Participer</a></p>

Couleurs des boutons

Couleurs personnalisées via le code

Il va falloir ajouter un nouvel attribut "style" qui permet de modifier les trois couleurs qui composent le bouton :

  • color:#FFFFFF : permet de modifier la couleur du texte du bouton
  • background-color:#000000 : permet de modifier la couleur de l'arrière plan du bouton
  • border-color:#000000 : permet de modifier la couleur du contour du bouton

Les couleurs sont définies par un code hexadécimal composé de 6 caractères précédés d'un #. Chaque couleur dispose de son propre code. Ainsi #FFFFFF correspond au blanc et #000000 au noir.

<p><a class="btn btn-primary" href="/projects" style="color:#FFFFFF; background-color:#000000; border-color: #000000">Participer</a></p>

Couleurs par défaut via le menu Réglages > Apparence

Les couleurs par défaut des boutons de la plateforme (dont les couleurs n'ont pas été définies dans un éditeur de texte) se configurent dans le menu Réglages > Apparence.

  • Couleur primaire permet de modifier la couleur des boutons pleinsLa couleur primaire est cependant utilisée pour de nombreux autres éléments que les boutons de la plateforme.
  • Libéllé primaire permet de modifier la couleur du texte des boutons pleins.
  • Libellé du bouton transparent au survol permet de modifier la couleur du texte du bouton transparent lorsque le curseur de la souris le survol.
  • Bouton transparent permet de modifier la couleur du texte et du contour du bouton transparent ainsi que la couleur dont il est rempli lorsque le curseur le survol.

Pour modifier la couleur, cliquez sur le bouton Editer associé à l'élément que vous souhaitez changer. Remplissez le champ Valeur avec le code HTML de la couleur que vous souhaitez appliquer ou utilisez le sélecteur de couleur.

Décocher la case Publié aura pour effet d'appliquer la couleur par défaut.

Cliquez sur le bouton vert Mettre à jour pour enregistrer vos modifications.

Couleurs personnalisées de l'entête de la page d'accueil

Par défaut, un bouton est placé dans l'entête de la page d'accueil de la plateforme

Ce bouton dispose de ses propres réglages de libellés, liens et couleurs dans le menu Pages > Accueil. Il n'est cependant pas un bouton plein, mais nécessaire un bouton transparent.

Pour afficher un bouton plein, dépubliez l'un des champs Libellé du bouton principal ou Lien du bouton principal afin de masquer le bouton. Ensuite, ajoutez un bouton avec du code via le champ Contenu de l'entête du même menu.

Comment ajouter un bouton de partage sur Facebook et Twitter ?

Bouton Twitter

1. Dans la source de votre texte, ajoutez le code suivant. Il permet d'activer le bouton :

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));</script><br>

2. Puis, copiez le code suivant afin d'ajouter le bouton :

<a class="twitter-share-button" href="https://twitter.com/intent/tweet" id="twitter-wjs" target="_blank">Tweeter</a>

3. Configurez le bouton selon vos besoins. Vous pouvez par exemple afficher un texte automatiquement dans le tweet en ajoutant après le lien ?text=votre texte. Agrandissez le bouton en ajoutant data-size="large".

Exemple : 

<a class="twitter-share-button" data-size="large" href="https://aide.cap-collectif.com/article/104-ajouter-un-bouton-daction?text=Venez tous lire cet article incroyable sur les boutons de partage !" id="twitter-wjs" target="_blank">Tweeter</a>

Pour plus d'information :  https://dev.twitter.com/web/tweet-button

Bouton Facebook

Facebook propose sur son site dédié aux développeurs un configurateur de bouton Partager :  https://developers.facebook.com/docs/plugins/share-button?locale=fr_FR

Une fois l'url à partager ajoutée, le bouton souhaité sélectionné, et la taille du bouton choisie, cliquez sur Obtenir le code. Collez le code disponible dans l'onglet IFrame dans la source de votre éditeur de texte. Mettez à jour pour enregistrer le bouton sur votre plateforme.


Vous ne trouvez pas de réponses à votre question ? Contactez-nous Contactez-nous