Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

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]

Vous aimerez également...

  • Comment mettre à jour vos anciens articles avec Gutenberg
  • Corriger l’erreur HTTP de téléchargement d’image dans WordPress
  • Comment créer des menus parents non cliquable dans WordPress
  • [résolu] les champs personnalisés ne s’affichent pas dans WordPress
  • [Résolu] images ne s’affichent plus dans la bibliothèque médias de Wordpress
  • Comment ajouter un bouton de connexion/déconnexion au menu WordPress sans plugin?

Classé sous :Tutoriels

Accueil / Tutoriels / Ajouter des zones de contenu colorées sur votre site

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact