Ajouter un bouton d'action

Les boutons d'action peuvent être ajoutés dans :

• l'en-tête de la page d'accueil (Pages > Accueil / Entête > Contenu de l'entête)
• les sections de la page d'accueil (Pages > Accueil / Sections) 
• les pages personnalisées (Contenus > Pages personnalisées)
• les étapes des projets participatifs (Projets participatifs > Tous les projets)

Un bouton personnalisé ne peut être qu'un lien vers une autre page.

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.

Nouvel éditeur (étapes d'un projet, articles, événements...) : 

Ancien éditeur (pages personnalisées, sections et en-tête de la page d'accueil...) :

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>

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 boutons ?

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 l'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 pleins. La 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 survole.
• 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 survole.

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 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'informations :  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.