Rien n'est plus ennuyeux à lire qu'un gros pavé de texte sans mise à forme… alors aujourd'hui, je vais vous expliquer comment créer un texte encadré, sous forme d'encart, en utilisant les langages HTML et CSS.
Un encart de texte permet de mettre en valeur vos idées fortes pour mieux les faire ressortir !
Je vais vous apprendre le principe général et ensuite, libre à vous de personnaliser le résultat en accord avec l'univers visuel de votre blog !
Créer un encadrement autour d'un texte
Si vous observez mon texte encadré, vous remarquez...
- Qu'il y a un fond coloré ;
- Avec une bordure en bas et une bordure en haut ;
- Et avec une icône sur un côté.
Pour arriver à ce résultat, on utilise deux langages informatiques qui se donnent mutuellement des consignes ! Le HTML permet d'indiquer l'emplacement de l'encart (quel texte exact on va encadrer) tandis que le CSS définit des règles de mise en forme (à quoi va ressembler notre encadrement de texte).
Mettre en forme du texte
Commençons par le "look" de notre encart. Ce que vous allez mettre en avant en général, c'est un paragraphe de texte, qui correspond à la balise "p" (pour "paragraphe", facile !). Ce paragraphe, nous voulons lui donner des caractéristiques... et pour ce faire, on écrit ce genre de code :
p.donaldtrump {
color:orange;
}Bon, l'exemple est un peu moqueur mais j'espère qu'il va vous aider à comprendre comment ça fonctionne. Je considère que mon paragraphe "p" doit adopter les caractéristiques de Donald Trump (.donaldtrump, en langage CSS, ça s'appelle une "classe"). J'ouvre ensuite une accolade... et je commence à lister la ou les caractéristique(s) de Donald Trump. Par exemple, la couleur orange. Ces caractéristiques s'appellent des "propriétés" en CSS. On ferme ensuite l'accolade.
Prenons un autre exemple.
p.titanic {
float:none;
}Ici, je veux que mon paragraphe devienne le Titanic. J'appelle donc ma classe .titanic, je l'applique au paragraphe (p.titanic). Et le Titanic, que fait-il ? Il ne flotte pas. Je lui attribue donc la propriété "float" (= flotter) avec la valeur "none" (pas de flottement).
Vous allez me dire : ai-je le droit d'utiliser n'importe quelle propriété ? Non, en réalité, même si on peut faire de l'humour le CSS reste un langage codifié. Il existe plein de types de propriétés et chacune peut prendre des valeurs précises. Par exemple, la propriété "font-size" permet de définir la taille du texte ; la propriété "margin" permet de créer des marges autour d'un élément... Vous pouvez consulter une liste des principales propriétés CSS sur Open Classrooms.
Créer un texte encadré
Choisissons nos outils ! Pour créer un texte encadré, nous avons besoin...
- D'un fond (avec ou sans icône) : c'est la propriété "background".
- D'une bordure : c'est la propriété "border".
- D'un espace entre le texte et la bordure, histoire que tout ne soit pas collé : c'est la propriété "padding".
Imaginons que mon encart s'appelle "titanic". Je pourrais écrire par exemple :
p.titanic {
background:#dbe0ef;
border-top:2px solid #aeb8de;
border-bottom:2px solid #aeb8de;
padding:1em 1em 1em 5em;
}Ce code signifie que pour tout paragraphe que l'on souhaite transformer en encart Titanic, on lui donne :
- Une couleur bleu-gris : la couleur est toujours exprimée en notation hexadécimale, vous pouvez utiliser ce site pour trouver l'équivalence entre une couleur et le code hexadécimal qui lui correspond ;
- Une bordure en haut ("border-top") de 2 pixels de large, continue ("solid", par opposition à une bordure en pointillés pour laquelle on écrirait "2px dotted #aeb8de") et de couleur un peu plus foncée ;
- Une bordure identique en bas ("border-bottom") ;
- Un espace autour du texte : 1em en haut, à droite et en bas... et 5em à gauche pour que le texte soit en retrait (1em signifie que l'espace fera la même taille que la police d'écriture).
Voilà le travail à ce stade !
Vous pouvez bien sûr ajouter/modifier ensuite les propriétés de votre choix. Par exemple, au lieu d'avoir une "border-top" et une "border-bottom", vous pouvez décider d'utiliser simplement la propriété "border" à la place pour avoir une bordure qui fera tout le tour de votre texte.
Comment ajouter une icône dans l'encadrement de texte ?
Si vous voulez ajouter une icône, il faut commencer par mettre en ligne cette icône sur votre blog. Je vous conseille de la choisir en petit format (30 pixels de côté par exemple) histoire de ne pas alourdir le rendu visuel et la page elle-même (le temps de chargement est important !).
Une fois votre icône choisie, mettez-la en ligne sur votre blog :
- Sur WordPress, en allant dans le menu Médias > Ajouter. Cliquez sur "Choisir le fichier" et une fois votre icône uploadée, cliquez sur "Modifier". Rédigez un texte alternatif pour décrire l'icône et copiez l'URL fournie sur la droite de la page (sous la ligne "Adresse web du fichier"). C'est l'adresse de votre icône.
Mettre en ligne une image sur WordPress - Sur Blogger, en créant un nouvel article - que vous ne publierez pas - et en important une image. Cliquez ensuite sur "Ajouter les images sélectionnées". Basculez vers l'éditeur HTML en cliquant sur le bouton "HTML" et récupérez le lien de l'image, qui s'affiche juste après la partie "a href=".
Mettre en ligne une image sur Blogger
Nous avons l'icône. Nous avons le lien. Reste à intégrer tout ça au code de notre encart. Pour ma part, j'intègre mon icône comme arrière-plan... donc je la place dans le "background", comme ceci :
p.titanic {
background:url('https://www.notuxedo.com/wp-content/uploads/2017/03/titanic.png') 3% 50% no-repeat #dbe0ef;
border-top:2px solid #aeb8de;
border-bottom:2px solid #aeb8de;
padding:1em 1em 1em 5em;
}Seule la ligne "background" a bougé et elle comporte désormais beaucoup d'informations : l'URL de l'icône à utiliser ; sa position horizontale (on la décale de 3% de la largeur de la page vers la droite) et sa position verticale (à 50% de la hauteur de l'encart, c'est-à-dire centrée verticalement) ; son utilisation (ici, on écrit "no-repeat" car on ne veut pas que l'icône se répète, elle ne doit apparaître qu'une fois) et enfin la couleur du fond.
Notre encart Titanic ressemble à quelque chose !
Où copier ce code CSS ?
Une fois que vous avez créé votre bout de code en fonction de vos besoins, il faut le copier dans le thème de votre blog.
Sur WordPress.com en version gratuite, vous n'avez malheureusement pas la possibilité de créer des règles en CSS à l'échelle de votre blog entier.
Sur WordPress hébergé chez un hébergeur, vous pouvez généralement ajouter toute personnalisation du style dans le fichier style.css de votre thème (ou de votre thème enfant si vous en avez créé un), à la fin du fichier en question. Ce fichier style étant chargé sur toutes les pages du blog, vous pouvez ensuite utiliser votre encart à tout moment sans avoir besoin de recopier les détails de mise en forme du texte.
Sur Blogger, enfin, les informations de style sont accessibles via le menu Thème > Personnaliser. Allez dans le menu Avancé puis le sous-menu Ajouter le fichier CSS et entrez votre code personnalisé. Cliquez ensuite sur "Appliquer au blog".
Comment encadrer un texte avec le code ainsi créé ?
Notre mise en forme de texte est prête... mais comment l'utiliser quand on en a besoin ?
En utilisant l'éditeur HTML
Lors de la rédaction d'un article, vous pouvez basculer vers l'éditeur HTML.
Sur WordPress :
Sur Blogger :
A l'endroit où vous voulez utiliser un encart, écrivez ceci :
<p class="titanic">Votre texte encadré ici</p>En créant un shortcode WordPress
Si vous êtes à l'aise avec le code, vous pouvez créer ce qu'on appelle un shortcode, un raccourci pour utiliser plus facilement votre système d'encart de texte.
Copiez le code ci-dessous dans le fichier functions.php de votre thème (pour savoir comment modifier le fichier functions.php, n'hésitez pas à consulter mon tutoriel).
function super_shortcode_titanic($param, $content) {
return '<p class="titanic">' . $content . '</p>';
}
add_shortcode('titanic', 'super_shortcode_titanic');Cette fonction définit un shortcode "titanic" que vous pourrez utiliser à tout moment, y compris dans l'éditeur visuel de WordPress, pour encadrer un texte.
Il suffira d'écrire ceci sur WordPress :
[titanic]Ceci est un texte encadré.[/titanic]Bien sûr, vous pouvez utiliser un autre mot que "titanic" ;)
On m'a souvent demandé comment je faisais pour créer ces encarts sur le blog, j'espère que cet article répondra à la question ! A vous de jouer ;)
Bonjour Marlène,
Merci pour cet article que j’ai lu avec attention mais je n’arrive pas à encadrer un texte en entier lorsqu’il y a des sauts de page ou des puces.
Mon code css (que je mets au début de mon texte) ne fonctionne que si je ne vais pas à la ligne!
Le voici :
J’ai forcément dû omettre quelque chose ou alors je ne mets pas mon texte au bon endroit!
Tu saurais me dire d’où vient le problème?
Merci d’avance de ton aide
Claudia
Bonjour Claudia, le code ne passe pas dans les commentaires car je ne suis pas en mesure d’apporter une aide individuelle à ce sujet. Si une instruction n’est pas prise en compte pour TOUT un bloc de contenu (incluant les sauts de ligne, les puces, etc), c’est probablement parce qu’il faut encadrer par une balise HTML type « div » tout le bloc auquel on souhaite appliquer la mise en forme.
Bonjour Marlène,
Merci pour ton retour!
Je vais essayer ça alors :)
Bonne journée
Bonjour Marlène. Ton site est une véritable mine d’or pour les débutant/nuls comme moi. Cet article est très intéressant, je m’en vais tester la création de texte encadré de ce pas. En revanche, je n’ai trouvé aucun article sur ton site qui expliquerait comment créer des listes à puces comme tu le fais si bien, avec des tirets entre chaque point énoncé. Pourrais-tu m’aider ? Merci.
Rebonjour, zut ça ne fonctionne pas. Mais je crois que cela vient de mon thème. J’ai Colormag en version gratuite et je crois que je ne peux tout simplement pas modifier le CSS avec cette version gratuite. Moi qui était contente du choix de mon thème, je suis maintenant déçue. Merci quand même en tout cas.
Bonjour Laure, normalement Colormag est bien modifiable en version gratuite, tu passes par le FTP pour le modifier ? Tu as bien créé un thème enfant avant ? Quel est le problème exact ?
Concernant ton autre question sur les listes à puces « personnalisées », je n’ai effectivement pas fait d’article sur le sujet car on ne me l’a pas encore demandé et que je fais rarement des tutos de code :) Je me le note pour un futur article !
Et bien le problème, c’est que malgré le fait que le bout de code a été enregistré dans « CSS personnalisé », et que j’ajoute dans mon article ce qu’il faut pour encadrer le texte, rien ne se passe. J’avais pourtant réussi il y a quelques mois sur un autre site avec lequel j’utilisais un thème payé. C’est pour cela que j’ai supposé que ça venait peut être de Colormag gratuit. Pour répondre à ta question. Non je n’utilise pas de thème enfant et je ne passe par par le FTP. Mon Mac est trop vieux pour utiliser Filezilla… Et j’avoue ne pas avoir trop compris comment faire. Non, j’ai téléchargé et activer mon thème directement via WordPress. J’en déduis que ce n’est pas bien de faire ainsi… Merci en tout cas.
Bonjour Laure, alors…
1/ Si le Mac est trop vieux pour FileZilla, il y a peut-être un autre moyen d’utiliser le FTP (l’hébergeur, par exemple, propose souvent un FTP en ligne). C’est mieux de modifier les fichiers d’un thème par ce biais car il y a souvent des erreurs à l’enregistrement quand on passe par l’administration de WordPress. Mais ce n’est pas obligatoire.
2/ La création d’un thème enfant est utile car si Colormag est mis à jour par son créateur (que ce soit pour ajouter des fonctionnalités ou pour corriger une faille de sécurité), cette mise à jour risque d’effacer les personnalisations que tu effectues à l’heure actuelle, alors qu’en les faisant sur un thème enfant on évite ce problème.
3/ Il est possible que le code ait besoin d’être adapté à certaines particularités de ton site mais malheureusement, je ne peux pas deviner lesquelles. Si « rien ne se passe », ça peut être lié à plein de choses : une erreur d’utilisation du code (élément manquant ou « mal utilisé »), un problème de cache (où les instructions CSS ne sont pas encore prises en compte car l’ancienne version est encore en mémoire), un besoin d’adapter le code (en raison de la façon dont le thème est codé)…
Merci Marlène. J’ai appliqué tous les conseils. WordPress sur FTP + thème sur FTP également, la création d’un thème enfant. J’ai fini par acheter un thème (Publisher) et je vais pouvoir être plus libre de faire ce que je veux. Bonne journée.
Oui, avec un thème sur mesure et un WordPress chez un hébergeur, c’est la perspective d’une liberté maximale :)
n importe quoi ! ca ne marche pas du tout vos encadres ! foutaises!
Eh bien il faut se détendre ^^ Ce n’est pas que « ça ne marche pas », c’est plutôt que vous n’avez pas réussi à le mettre en place.
Si vous aviez été aimable, j’aurais pu vous aider.
Bonjour,
Je cherche à créer une page dédiée à nos partenaires (les marques que nous vendons) pour cela j’ai besoin d’ajouter des photos mais elles doivent toutes faire la même taille sinon il y a des décalages et ce n’est pas esthétique… Comment puis-je faire pour avoir des photos de la même taille sachant que modifier les dimensions sur WordPress ne marche pas ! Y a t-il une astuce ?
Merci d’avance pour votre réponse !
Eloïse
Bonjour Eloïse, je ne comprends pas le rapport entre la question et l’article ? Les photos doivent être dans un encart ? Il faut simplement les redimensionner avant de les mettre en ligne sur WordPress avec Photoshop ou autre logiciel photo.
bonjour je voudrais creer des encarts ou des bulles dans lesquelles je pourrais écrire du texte ou des numéros par je n’ai aucune connaissance ccs est il possible d’avoir cela en code html?
Bonjour, et qu’est-ce que vous n’arrivez pas à suivre dans le tutoriel de l’article ? Ce n’est pas conseillé de faire ce genre de chose en HTML pur si ça a vocation à être utilisé à plusieurs endroits du site.
Salut,
Merci Beaucoup pour ce tuto ! ça fonctionne à merveille ;)
Après plusieurs mois d’utilisation, j’ai cependant une petite question, j’aimerai que les paramètres de l’encadré soit « responsive », pour être plus précis je voudrais que l’image et l’alinéa disparaisse dès que je suis sur un écran d’une certaine taille ou moins. Car je remarque que sur un téléphone les encadrés réduisent considérablement l’espace pour le texte.
Sais-tu comment faire celà ? pourrais tu m’aider ?
Erwan
Hello Erwan, si tu souhaites définir des paramètres différents selon la résolution d’écran, c’est possible avec les media queries CSS, c’est une sorte de condition qui indique « si l’écran fait telle taille, alors on applique telle règle de mise en forme ». Tu trouveras un tutoriel sur OpenClassrooms pour progresser sur le sujet !
Super merci !! je suis en cours de modification mais les premiers résultats sont déjà concluant !
Merci encore ;)
Bonjour Delphine,
Merci pour ce tuto fort instructif.
A t’on la possibilité de titrer cet encart? un h3 par exemple dans l’encadré juste avant la balise .
Merci !
Bonjour Olivier, moi c’est Marlène ;) On peut utiliser le système d’encart sur ce qu’on veut : par exemple, si on applique l’encart à une « div » (au lieu de l’appliquer à un paragraphe « p » comme dans mon exemple), on peut avoir un « h3 » à l’intérieur de cette div.
Bonjour Marlène,
Merci pour ce tutoriel.
Je rencontre un soucis à 2 étapes :
– Pour intégrer mon image d’arrière-plan, si je pars de ton exemple :
background:url(‘//i2.wp.com/www.notuxedo.com/wp-content/uploads/2017/03/titanic.png’),
mon éditeur n’accepte ni l’adresse web de mon image, et ni cette même adresse si je la fais précéder de ‘//i2.wp.com. L’adresse de l’image apparaît en rouge dans le ficher CSS. Quelle est la fonction de cet élément de début d’adresse ?
– Pour copier le code CSS. Je vais dans Apparence, Editeur, Code CSS, tout en bas, je copie-colle, j’enregistre.
Une fois dans l’éditeur HTML, j’entre Votre texte encadré ici (avec mes infos persos pour titanic et mon texte encadré), mais rien ne se passe quand je reviens dans l’éditeur visuel, rien ne se passe, mon texte n’est pas encadré. « Votre texte encadré » apparaît sans bordure, comme si le style n’avait pas été enregistré du tout.
L’étape de la copie du code CSS n’est pas expliquée dans ton tutoriel, je suppose que c’est là que je fais une erreur. A l’occasion d’une mise à jour de cet article, pourrais-tu détailler cette étape, s’il-te-plait ?
Merci :-)
Bonjour Delphine, il faut mettre l’adresse de ta propre image, pas de la mienne ;) La mienne commence par cette partie là mais peut-être que ton image aura une adresse différente.
Sinon, il n’y a rien de particulier à faire lors de la copie du code. En revanche, c’est normal que le passage de l’éditeur HTML à l’éditeur visuel ne permette pas de visualiser l’encart, il faut se servir plutôt de l’aperçu de l’article pour visualiser des choses.
Merci Marlène.
J’ai fini par trouver la solution : le code ne fonctionne chez moi que si je l’entre non pas dans : apparence -> éditeur -> fichiers du thème -> style.css
mais dans apparence -> personnaliser -> css additionnel.
Sans le placer à cet endroit, rien ne se passe ;-)
Bonne journée !
Hello Delphine, ça doit venir de la manière dont ton thème est conçu. Le principal, c’est que tu aies trouvé la solution :)
Oui, c’est doute le thème qui réagit de cette manière, en effet !
Bonne journée !
Bonjour,
Je souhaiterai faire un encadré comme ça mais dans ma barre latérale afin de mettre un article en avant avec un texte + lien.
Avez vous fait un tuto qui concerne ce que je veux faire ou faut il que je fasse la même méthode mais avec une ou deux lignes en plus ?
Merci d’avance
Bonjour, le principe de l’encadré peut-être utilisé à n’importe quel endroit d’un blog une fois qu’on a compris le principe.
Merci, effectivement, j’ai essayé. Cela marche très bien mais je n’arrive pas à insérer le lien correctement. Peux-tu m’éclairer ?
A quel lien fais-tu référence ?
Par exemple, j’aimerai mettre un article en avant sur ma barre latérale avec un encadré qui entoure le titre. Quand on clique sur le titre cela redirigerai vers l’article en question. (Je ne sais pas si je m’exprime bien).
Bonjour Amandine, il faut adapter le code à ton thème mais pour ma part, je n’ai pas le temps d’aider sur des problématiques de code individuelles, il faudrait te tourner vers un forum dédié au code. Si tu ne sais pas faire un lien, cherche sur Google quelque chose comme « faire un lien en HTML », je suis sûre qu’il y a plein de tutos dédiés.
Bonjour,
Merci pour ce cours !
Cependant malgré avoir suivi toutes les manipulations, cela ne fonctionne pas chez moi !
J’ai testé dans un article, dans une page…rien !
Je suis déçu :(
Il doit y avoir une erreur dans votre code, quelque part. Sur quel bloc de texte avez-vous essayé d’inclure un encart ?
Bonne année !
Sinon une autre solution :
Il n’a pas fait que survivre cinq siècles, mais s’est aussi adapté à la bureautique informatique, sans que son contenu n’en soit modifié.
Oups il y a eu comme une erreur !
Voilà plutôt : « Il n’a pas fait que survivre cinq siècles, mais s’est aussi adapté à la bureautique informatique, sans que son contenu n’en soit modifié.«
Bonjour Christian, on ne peut pas mettre de code dans les commentaires, je fais ça pour éviter les tentatives de piratage. Je n’arrive pas du tout à accéder au site, ça charge mais n’affiche rien.
Bonne année tout de même !
Bonjour,
C’est normal de ne pas accéder au site car en cours de construction mais je peux le rendre dispo quelques minutes le temps de constater mon travail.
Sinon j’ai réussi à intégrer un code en HTML pour encadrer un texte.
Bonjour,
Merci pour ce tuto bien réalisé. Je démarre seulement et je me demandais comment intégrer un titre à ce texte encadré. Dés que je le fais, l’encadré disparait. Merci :)
Hello, tout dépend de la balise qui encadre le titre. Quand on encadre un paragraphe, on mentionne la balise « p » comme dans mon exemple de l’article. S’il faut encadrer autre chose, on doit mentionner la balise de cette autre chose. Si c’est un titre « h2 », on mentionnera « h2 » à la place de « p » dans notre classe CSS.
Pardon Marlène, je viens de reposter la même question, n’ayant pas été avertie de votre réponse. Mes excuses, je vais donc essayer cela. Merci pour votre réactivité.
Merci chère Marlène pour cette aide précieuse ! Ca marche du feu de dieu sur mon site. Juste une petite question, peut-on faire, avec cette technique, un encadré qui englobe plusieurs paragraphes ?
Merci beaucoup d’avance !
On peut tout à fait l’envisager, par exemple en appliquant une classe à une balise div qui encadrera les paragraphes en question. Par exemple, on pourrait imaginer…
Super, ça marche ! Merci beaucoup :)
Salut!
Merci beaucoup pour tes lumières! Je débute mon blog et je voulais utiliser ton système d’encart pour un bout d’un article. Malheureusement, les mots à droite sont « tronqués » d’1-2- lettres. Peux-tu éclairer mes lumières ?
Voici mon code CSS:
p.encart {
background: #d2ffe1;
width: 755px;
height: 130px;
padding-left:1em;
padding-right:5em;
padding-bottom:1em;
padding-top:1em;
text-align: left;
}
Merci d’avance!
Hello, je ne connais pas ton blog mais déjà, si tu mets une largeur et une hauteur fixes, ça va poser un problème car si tu changes de taille d’écran (passage d’un PC à un smartphone par exemple), l’encart ne va plus du tout « fonctionner » puisque ses dimensions imposées dépasseront de très loin celles de l’écran. Peut-être une piste à creuser !
Hello Marlène,
Je cherchais justement à faire des encadrés comme tu fais et Google m’a amené ici. Top !!
J’espère que ça t’aidera ! Bonne journée :)
Bonjour
excellent, je vient de tester, c’est super comme idée :)
merci pour ce partage.
une question, est il possible de faire un mu-plugin
et de tout intégrer dans un seul fichier ?
juste pour etre plus rapide.
Bonjour Alain, j’ai moi-même créé un plugin (qui n’est pas un mu-plugin mais c’est le même principe) pour insérer sur chaque article un bouton « J’aime »… donc je pense qu’il serait tout à fait envisageable de transformer ce type de code en plugin pour ensuite l’exploiter avec des shortcodes par exemple.
Merci beaucoup ! Super explication, facile à comprendre ;-)
Merci André !
Resalut Marlène,
Ahah, tu vois, je t’aime bien alors je t’envoie deux messages… c’est moi qui délirait, mon problème est réglé et ça fonctionne parfaitement MAIS… tu n’as pas par hasard un petit article sur « comment placer des jolies images à dans les listes à puces »?
Rien trouvé de concluant sur google, que des trucs pas clairs (contrairement à ton blog, qu’en enfant de 8 ans pourrait comprendre) ;=)
Hello, mettre des images dans les listes à puces n’est pas très conseillé, ce qui explique sans doute pourquoi tu ne trouves rien sur le sujet. Ça se redimensionne mal (ce qui ne pardonne pas à l’ère du mobile), ça alourdit le poids de la page… Aujourd’hui, on utilise plutôt des polices d’icônes pour personnaliser les listes à puces. J’ai présenté ici Font Awesome mais il y en a bien d’autres !
Salut Marlène,
Je suis un fervent lecteur de ton blog… J’ai moi aussi un blog, sur lequel j’ai essayé ton bout de code CSS, en reproduisant tout à la lettre, et en relisant tout 3 fois, et ça n’a pas fonctionné. Le texte s’affiche comme d’habitude, brut de décoffrage.
Mon thème est payant (MH Magazine), et je me demande si ce n’est pas à cause de cela que ça ne marche pas…
Tu penses que c’est possible que ce soit la raison?
Have a nice day!
Hello Marlène,
Merci pour ce tuto bien clair et intéressant. Il me servira certainement !
J’espère que ça t’aidera à faire ce que tu souhaites :)
Formidable!
Je te remercie beaucoup, c’est ce que je voulais faire depuis un petit moment!
Toujours des astuces très intéressantes sur ton blog ;-)
Merci.
J’espère que tu obtiendras le résultat escompté ! Bonne journée :)
Merciiii je rêvais d’en faire… Tu viens de m’apprendre pas mal de choses…
J’espère que le résultat sera en accord avec tes attentes !
Ah super, ce tuto, merci!
Je savais pas qu’on pouvait faire des trucs comme ça. *0*
C’est si simple avec tes tutos en plus!
On peut faire plein de choses :) Bon, certes, parfois il faut se creuser un peu la tête.
C’est marrant j’ai justement eu la question sur mon blog il y a quelques jours. Je vais pouvoir ajouter un lien vers cet article à ma réponse.
Moi j’ai fait ça sous forme de formats supplémentaires pour mes articles (encadré, texte plus petit ou plus gros etc.). Je me demandais s’il y avait un plugin qui faisait ça sous WordPress pour celles qui ne veulent pas mettre les doigts dans le code.
Hello, il y a en gratuit des plugins comme Shortcode Ultimate ; et en payant et en plus complet, l’incontournable Visual Composer (il va plus loin car c’est vraiment un outil de mise en forme complet des articles qui permet de créer plusieurs dizaines de types de blocs de contenu, de les organiser par simple drag & drop, de concevoir des modèles de mise en forme, etc).
Merci de ta réponse :)
C’est un truc de dingue : hier seulement j’ai posé la question de savoir comment créer ces encadrés dans un forum, et pouf! comme par magie ton blog m’apporte la réponse à point nommé!!! en plus tu détaille également la méthode avec les short-code, celle que je souhaitais privilégier ! Un graaaaaannd merci!!!! :D (mais là je commence à croire que tu lis dans nos esprits…lol)
Eh bien… pas tout à fait mais presque ;) J’ai fait un sondage l’été dernier auprès des lecteurs du blog pour savoir quels sujets ils auraient envie que je traite. J’ai recueilli une foule de suggestions que j’essaie de concrétiser par des articles au fil du temps, celle-ci en faisait partie !
Ah oui d’accord, cette explication me parait plus plausible que mon hypothèse…lol
L’orange Donald Trump, mdr
C’est la première fois que je me tape un fou rire en lisant un de tes articles
Sinon article très bien détaillé comme d’hab
XoXo
On peut faire beaucoup d’humour avec du CSS ^^