• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Ajouter des zones de contenu colorées sur votre site

Ajouter des zones de contenu colorées sur votre site

Màj le 20 janvier 2022

Ce tutoriel décrit les étapes à suivre pour créer des zones de contenu colorées à utiliser sur notre site. Vous pouvez l’utiliser sur n’importe quel thème WordPress ou modèle HTML, car nous allons utiliser la méthode simple HTML et CSS.

Voici le résultat final :

Ajouter des zones de contenu colorées sur votre site

Ajouter des zones de contenu simple en couleur sur votre site

Ajoutez le CSS suivant dans style.css de votre thème enfant.

 
 
/* Content Boxes
------------------------------------------------------------ */
 
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
}
 
.content-box-blue {
    background-color: #d8ecf7;
    border: 1px solid #afcde3;
}
 
.content-box-gray {
    background-color: #e2e2e2;
    border: 1px solid #bdbdbd;
}
 
.content-box-green {
    background-color: #d9edc2;
    border: 1px solid #b2ce96;
}
 
.content-box-purple {
    background-color: #e2e2f9;
    border: 1px solid #bebde9;
}
 
.content-box-red {
    background-color: #f9dbdb;
    border: 1px solid #e9b3b3;
}
 
.content-box-yellow {
    background-color: #fef5c4;
    border: 1px solid #fadf98;
}

Usage du code :

<div class="content-box-COLOR">votre contenu texte ici</div>
Nous pouvons utiliser le CSS basé sur la classe de couleur suivante mentionné ci-dessus. : bleu, gris, vert, violet rouge et jaune .

Exemple :

<div class="content-box-blue">Il s'agit d'un exemple de zone de contenu, facile à mettre en œuvre et pouvant être utilisée pour mettre l'accent sur une pensée ou un sentiment particulier.</div>

Ici, remplacez la classe content-box-blue par la vôtre.

Petit code:

La plupart du temps, nous ne voulons pas basculer le mode éditeur vers HTML, nous pouvons donc simplement créer un shortcode et l’utiliser. Ajoutez ce qui suit dans functions.php de votre thème enfant.

// Add content box Shortcode
add_shortcode( 'content-box', 'content_box_shortcode' );

function content_box_shortcode( $atts = [], $content = null ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'color' => 'blue',
		),
		$atts
	);
	//return
	return '<div class="content-box-' . $atts['color'] . '">' . $content . '</div>';
}

Usage:

Ajouter simplement le code ci-dessous pour entourer votre texte, ensuite changer « COLOR » par la couleur de votre choix :

red pour le rouge
yellow pour le jaune
purple pour le violet
green pour le vert
gray pour le gris
blue pour le blue

[content-box color="COLOR"]Text Content[/content-box]

Plus de cours et exercices corrigés :

  • Boutons de partage Jumbo avec compteur pour wordpress sans plugin
  • Comment diviser un article en plusieurs pages sur Blogger
  • Ajouter une barre de recherche au menu principal de votre site sans plugin
  • La diffusion d’annonces AdSense a été limitée : que faire ?
  • Sécuriser votre site en modifiant les clés de sécurité secrètes SALT dans Wordpress

Interactions du lecteur

Laisser un commentaire

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

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact