• 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 » Thèmes » Comment ajouter un ruban à votre blog Wordpress

Comment ajouter un ruban à votre blog Wordpress

Màj le 2 juin 2014

Il y a différentes façons pour ajouter des rubans à votre blog WordPress. L’endroit le plus fréquent pour y insérer ce ruban est l’entête de votre site. Pour ce faire, vous pouvez utiliser une image de ruban ou une feuille de style CSS. Or, une image serai plus fiable, pour cela on va utiliser CSS3D pour générer notre ruban .

Maintenant , je vais vous montrer comment créer un ruban en utilisant un générateur de rubans et l’insérer à n’importe quel endroit dans votre thème .

Concevoir votre ruban

La première étape est de générer le code CSS et HTML. La meilleure façon de le faire est d’utiliser l’un des exemples suivants:

ajouter-ruban-a-votre-blog

Configurez votre ruban

Configurez les éléments du ruban:

Vous pouvez ajouter un sélecteur « parent selector » et un « Wrapper », mais vous n’avez pas besoin.

inserer-un ruban-dans-votre-site

Configurez les couleurs de votre ruban

Ici vous pouvez choisir la couleur principale de votre ruban, et une couleur pour les bordures qui doit être un peu plus foncée que la couleur principale.

coleurs-rubanConfigurez la taille de votre ruban

Maintenant, il faut choisir la taille de votre ruban en précisant sa hauteur et sa largeur. Cette options est sous Appearance > Header.

ajouter-ruban-size

Générez le code de votre ruban

Une fois que vous êtes satisfait de votre conception, il est temps de générer le code du ruban. Vous aurez un bloc de code CSS 3 , copiez le et collez-le dans le dossier de votre thème enfant.

ajouter-rubanPour ajouter le ruban à votre thème, coller le code dans le fichier header.php ou dans le fichier single.php .

Ajoutez le ruban à votre thème en utilisant « hook »

Si vous utilisez un thème pro, comme Genesis ou Thesis , vous pouvez facilement coller le code HTML de votre ruban à l’emplacement que vous souhaitez l’afficher.

inserer-ruban-dans-votre-siteAjouter un texte, une image ou tout ce que vous voulez afficher dans votre ruban.


Plus de cours et exercices corrigés :

  • 7 meilleurs thèmes WordPress gratuits 2022 (choisis par des experts)
  • Télécharger Genesis sample [3.4.1]: thème enfant dernière version 2021
  • Choisir un thème gratuit ou pro?
  • Télécharger le thème Genesis Framework 3.3.5 gratuitement (dernière version)
  • Ajouter 728×90 Bannière Adsense En tête de thèmes StudioPress

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