Créer des « Call to Action » ou des « boutons CSS » dans l'éditeur WYSIWYG TinyMCE

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Créer des « Call to Action » ou des « boutons CSS » dans l'éditeur WYSIWYG TinyMCE

Cette petite astuce toute simple permettra à vos clients(1) de styler certains liens différemment des autres (Call to action, bouton, etc.) depuis TinyMCE, l’éditeur WYSIWYG de WordPress. Il suffit de créer un lien et de le mettre en «gras» avec l’icône B. Cette combinaison toute simple vous donnera le composé HTML suivant :

<strong>
    <a href="http://wp4design.com/basics-theme-wordpress-minimaliste-base-sur-html5-boilerplate-et-le-codex/">
        lien de téléchargement
    </a>
</strong>
Pour les styles CSS :
strong a {
    font-weight: normal;
    padding: 0.25em 0.5em;
    background: #F29F05;
    color: #000;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
On peut aller plus loin en isolant ce marquage HTML dans son propre paragraphe pour augmenter les possibilités. Comme dit le proverbe bien connu : «Plus il y a  de marquage HTML et plus il y a de marrage sous les bretelles», comme le centrage, des backgrounds différents, etc.

Dans le même esprit, on peut également envisager de combiner un  lien avec  «l’italique» (I) pour styler ensuite le sélecteur em a.

D’un point de vue sémantique, l’importance des textes véhiculée par strong ou em devrait s’accorder avec une mise en évidence plus ou moins forte des contenus associés.

(1) Si c’est pour pour vos clients, ça devrait être bon pour vous aussi !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



2 commentaires pour “Créer des « Call to Action » ou des « boutons CSS » dans l'éditeur WYSIWYG TinyMCE”

  1. Jérôme dit :

    Pas mal l’astuce, je n’y avais jamais pensé. Merci

  2. […] etc. Grosso modo, tous ce qui peut affecter la grille verticale, ou tout autre élément comme les boutons CSS, comme on peut le voir sur la capture d’écran ci-dessous. Styler votre éditeur WordPress […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site