Comment créer un texte encadré pour mettre en valeur ses idées ?


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.

Personnaliser son blog

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
    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
    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 ».

Ajouter du CSS personnalisé sur Blogger
Ajouter du CSS personnalisé sur Blogger

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 :

Editeur visuel et éditeur HTML

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 ;)

Thèmes : Design 

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

52 commentaires sur “Comment créer un texte encadré pour mettre en valeur ses idées ?

  • olivier

    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 !

    Répondre à olivier
    • Marlène

      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.

      Répondre à Marlène
  • Delphine

    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 :-)

    Répondre à Delphine
    • Marlène

      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.

      Répondre à Marlène
    • Delphine

      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 !

      Répondre à Delphine
    • Marlène

      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 :)

      Répondre à Marlène
    • Delphine

      Oui, c’est doute le thème qui réagit de cette manière, en effet !
      Bonne journée !

      Répondre à Delphine
  • Amandine

    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

    Répondre à Amandine
    • Marlène

      Bonjour, le principe de l’encadré peut-être utilisé à n’importe quel endroit d’un blog une fois qu’on a compris le principe.

      Répondre à Marlène
    • Amandine

      Merci, effectivement, j’ai essayé. Cela marche très bien mais je n’arrive pas à insérer le lien correctement. Peux-tu m’éclairer ?

      Répondre à Amandine
    • Marlène

      A quel lien fais-tu référence ?

      Répondre à Marlène
    • Amandine

      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).

      Répondre à Amandine
    • Marlène

      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.

      Répondre à Marlène
  • Christian

    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 :(

    Répondre à Christian
    • Marlène

      Il doit y avoir une erreur dans votre code, quelque part. Sur quel bloc de texte avez-vous essayé d’inclure un encart ?

      Répondre à Marlène
    • Christian

      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é.

      Répondre à Christian
    • Christian

      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é.« 

      Répondre à Christian
    • Marlène

      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 !

      Répondre à Marlène
    • Christian

      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.

      Répondre à Christian
  • bartoli

    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 :)

    Répondre à bartoli
    • Marlène

      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.

      Répondre à Marlène
    • bartoli

      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é.

      Répondre à bartoli
  • Pierre

    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 !

    Répondre à Pierre
    • Marlène

      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…

      <div class="nomdelencart"><p>Mon premier paragraphe</p>
      <p>Mon deuxième paragraphe</p></div>
      Répondre à Marlène
    • Pierre

      Super, ça marche ! Merci beaucoup :)

      Répondre à Pierre
  • Lauriane

    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!

    Répondre à Lauriane
    • Marlène

      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 !

      Répondre à Marlène
  • Adrien

    Hello Marlène,

    Je cherchais justement à faire des encadrés comme tu fais et Google m’a amené ici. Top !!

    Répondre à Adrien
  • Alain

    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.

    Répondre à Alain
    • Marlène

      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.

      Répondre à Marlène
  • André

    Merci beaucoup ! Super explication, facile à comprendre ;-)

    Répondre à André
  • Barthélémy

    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) ;=)

    Répondre à Barthélémy
    • Marlène

      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 !

      Répondre à Marlène
  • Barthélémy

    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!

    Répondre à Barthélémy
  • Betty Griffe

    Hello Marlène,

    Merci pour ce tuto bien clair et intéressant. Il me servira certainement !

    Répondre à Betty
  • Ju_vqal

    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.

    Répondre à Ju_vqal
    • Marlène

      J’espère que tu obtiendras le résultat escompté ! Bonne journée :)

      Répondre à Marlène
  • Sandra

    Merciiii je rêvais d’en faire… Tu viens de m’apprendre pas mal de choses…

    Répondre à Sandra
  • Aline - Graphiste illustratrice

    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!

    Répondre à Aline
    • Marlène

      On peut faire plein de choses :) Bon, certes, parfois il faut se creuser un peu la tête.

      Répondre à Marlène
  • Cécile

    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.

    Répondre à Cécile
    • Marlène

      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).

      Répondre à Marlène
    • Cécile

      Merci de ta réponse :)

      Répondre à Cécile
  • Milla - La Galerie, Blog de Voyages

    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)

    Répondre à Milla
    • Marlène

      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 !

      Répondre à Marlène
    • Milla - La Galerie, Blog de Voyages

      Ah oui d’accord, cette explication me parait plus plausible que mon hypothèse…lol

      Répondre à Milla
  • Charlie

    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

    Répondre à Charlie
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.