TutorielsAjouter un bouton cliquable au design sympa dans WARC

Le bouton par défaut dans WebAcappella Responsive est assez limité en ce qui concerne la personnalisation, et surtout, l’animation du bouton n’est pas franchement moderne. Alors, en attendant une mise à jour d’Intuisphere (peut être),

je vous propose de voir ensemble comment Ajouter un bouton cliquable au design sympa dans WARC.

Pour ce tutoriel, vous allez avoir besoin d’utiliser un client FTP, et d’utiliser un élément HTML dans WARC. Mais pas de panique, on a essayé de faire au plus simple !
Pour commencer, voici à quoi cela peut ressembler :

Démo

Voyons comment procéder.

Étape 1 :

Copiez le code html suivant et collez le dans un élément HTML dans WARC

Bouton 1

<center>
<a href="https://www.tontonduweb.com" target="_blank"><boutton class="button"><span>CLIQUEZ ICI</span></boutton></a>
</center>

Bouton 2

<center>
<a href="https://www.tontonduweb.com" target="_blank"><boutton class="button2"><span>CLIQUEZ ICI</span></boutton></a>
</center>

Bouton 3

<center>
<a href="https://www.tontonduweb.com" target="_blank"><boutton class="button3" id="grad"><span>CLIQUEZ ICI</span></boutton></a>
</center>

Dans ce code HTML, vous n’avez que deux choses à modifier

  • L’url de la page de destination (https://www.tontonduweb.com)
  • Le texte du bouton (CLIQUEZ ICI)

Si vous ne voulez pas qu’au clic du bouton cela ouvre une nouvelle fenêtre du navigateur, alors retirez simplement:  target=”_blank”

 

Étape 2 :

Copiez le code suivant et collez le dans les propriétés de la page

<link href="pluginBouton/style.css" rel="stylesheet" type="text/css" media="all" />

Si vous avez l’intention d’utiliser des boutons sur plusieurs pages, alors collez le code dans les paramètres du site. Cela vous évitera d’avoir à placer le code plusieurs fois.

 

Étape 3 :

Télécharger le dossier du plugin avec le fichier style.css

Dossier pluginBouton

Une fois le fichier .zip téléchargé, décompressez le. Vous obtiendrez alors un dossier à déposer à la racine de votre serveur.

 

Étape 4 :

Voyons comment personnaliser le style.css

Dans le fichier style.css (qui se trouve dans le dossier pluginBouton) vous verrez trois marqueurs indiquant le style pour chaque bouton. Les marqueurs ressemblent à ça : /* Bouton style 1 */

Nous allons prendre le style du bouton 1 comme exemple, il vous suffira de faire la même chose pour les autres styles.

  • Ligne 9 : les coins du bouton
  • Ligne 10 : la couleur du bouton par défaut (sur le style 1, le bouton est transparent. Sur le style deux indiquez une couleur comme par exemple #000000. Su le style 3, nous y reviendrons plus bas.)
  • Ligne 11 : la couleur de la  bordure puis l’épaisseur
  • Ligne 12 : la couleur du texte
  • Ligne 13 : l’alignement du texte (left, right ou center)
  • Ligne 14 : la taille du texte
  • Ligne 15 : ON NE TOUCHE À RIEN RÉGIS !
  • Ligne 16 : la taille du bouton
  • Ligne 31 : la couleur du bouton au survole
  • Ligne 32 : la couleur du texte au survole

Si vous ne souhaitez pas avoir l’animation avec la petite flèche qui apparait sur la droite, alors supprimez le code de la ligne à 35 à 51.

Pour le style 3, il y a une petite nuance, comme nous utilisons une couleur dégradée, nous ne nous servons pas de l’attribut “background-color”. Nous ajoutons un peu de code spécifique comme celui ci :

#grad {
    background: -webkit-linear-gradient(#3c546b, #2d5c88, #3a80b2); /* Pour Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#3c546b, #2d5c88, #3a80b2); /* Pour Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#3c546b, #2d5c88, #3a80b2); /* Pour Firefox 3.6 to 15 */
    background: linear-gradient(#3c546b, #2d5c88, #3a80b2); /* Standard syntax (must be last) */
}

Vous remarquerez qu’il y a quatre ligne, c’est pour que les quatre navigateurs internet prennent bien en compte cet attribut. Il faudra donc écrire les mêmes codes couleur sur chaque ligne.
Explication : sur la première ligne par exemple, vous avez 3 codes couleur. Cela sert à créer le dégradé de haut en bas. La première couleur est donc celle du haut, la deuxième celle du milieu et la troisième celle du bas.
Il vous faudra ensuite modifier les couleurs pour le bouton au survol (hover). Sur notre démo nous avons simplement inversé les couleurs mais libre à vous de faire autrement.

Et voilà, cela peut faire un peur vu comme ça, surtout pour les novices, mais vous verrez qu’il est assez simple d’ajouter ce bouton dans une page WebAcappella Responsive.
Cela fait parti des choses que nous abordons dans nos cours en ligne sur les bases du HTML.

Bisous les neveux !

 

Merci de noter que ce plugin vous est offert dans un tutoriel et qu’aucun support par email ne sera traité. Si vous avez des questions posez les en commentaires.

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Poster commentaire