Besoin d'aide ?

Changer la couleur de fond d'un bloc de texte

Voilà un exemple de ce que nous allons apprendre à réaliser dans ce tutoriel :

Le faux-texte (également appelé lorem ipsum, lipsum) est, en imprimerie, un texte sans valeur sémantique, permettant de remplir des pages lors d'une mise en forme afin d'en calibrer le contenu en l'absence du texte définitif. Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

Choisir vos couleurs

Pour débuter, choisissez deux couleurs : une pour le fond du bloc de texte et une pour la police d'écriture. Pour choisir ces couleurs, utilisez l'excellent service proposé par Adobe : Couleur CC. Il vous permettra d'accord cette couleur à d'autres couleurs présentes sur votre site par exemple. Vous devez utilisez ce service, car il vous permettra de récupérer le code Hexadécimal de votre couleur.

Voilà comment procéder afin de récupérer ce code Hexadécimal : supposons que la couleur que vous désirez soit le rouge visible au milieu sur la capture ci-dessous. Sous l'aperçu de la couleur (c'est à dire le carré uni du rouge en question), vous trouverez la mention "HEX". Le code correspondant à cette mention "HEX" est le code hexadecimal de votre couleur. Pour le rouge que nous prenons en exemple, il s'agit du code FF0000.

Couleur de police
Si votre couleur de fond est foncée, nous vous recommandons de choisir le blanc (code hexadécimal FFFFFF) comme couleur de police, si elle est claire, choisissez le noir (code hexadécimal 000000).

Modifiez le code de votre élément texte

Créez un nouvel élément texte sur votre page, là où vous souhaitez insérer votre bloc de texte sur un fond de couleur. Avant d'entrer votre texte dans votre nouvel élément, cliquez sur le bouton "modifier le HTML". Vous le trouverez en cliquant sur le bouton "..." qui affiche les options avancées de l'élément. Plus d'infos sur notre page d'aide consacrée à l'élément texte.

Une fenêtre d'édition s'ouvre, collez y le code suivant :

<p style="padding: 20px; background: #code couleur; ">
Votre texte
</p>

Voilà ce que devrait contenir votre fenêtre "modifier le HTML" :

Remplacez alors les mots "code couleur" par le code hexadécimal de la couleur que vous aviez choisi. Attention, le dièse # doit bien rester en place ! Cliquez ensuite sur "OK".

Entrez votre texte

En cliquant sur "OK" vous revenez au menu de votre élément texte, entrez alors votre texte normalement, avec notre éditeur. Une fois votre texte entré, notre menu vous permettra d'en changer la couleur, vous pourrez alors entrer le code hexadécimal de votre couleur grace à notre sélecteur de couleur !

Enfin, n'oubliez pas d'enregistrer, et le tour est joué !

Pour aller plus loin :