Voulez-vous ajouter un effet de changement de couleur d'arrière-plan à votre site WordPress? Vous avez peut-être vu sur certains sites Web populaires où la couleur d'arrière-plan d'une zone spécifique ou la page Web entière passe automatiquement d'une couleur à l'autre. Ce bel effet peut vous aider à attirer l'attention des utilisateurs et à améliorer l'engagement sur votre site Web. Dans cet article, nous vous montrerons comment ajouter facilement un effet de changement de couleur d'arrière-plan fluide dans WordPress.
<img title = "Ajouter un effet de changement de couleur d'arrière-plan fluide dans WordPress" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bgcolorchangewp.png" alt = "Ajouter un effet de changement de couleur d'arrière-plan fluide dans WordPress” width=”550″ height=”340″ class=”alignnone size-full wp-image-50813″>
Qu'est-ce que l'effet de changement de couleur de fond fluide?
L'effet de changement de couleur d'arrière-plan fluide vous permet de passer automatiquement d'une couleur d'arrière-plan à l'autre. Le changement se produit lentement en passant par différentes couleurs jusqu'à ce qu'il atteigne la couleur finale. Cela ressemble à ceci:
<img title = "Animation d'effet de changement de couleur" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bganimate.gif" alt = "Animation d'effet de changement de couleur” width=”550″ height=”231″ class=”alignnone size-full wp-image-50814″>
Cette technique est utilisée pour capter l'attention de l'utilisateur avec des effets doux et agréables à l'œil.
Cela dit, regardons comment ajouter cet effet de changement de couleur d'arrière-plan fluide à n'importe quel thème WordPress.
Ajoutez un effet de changement de couleur d'arrière-plan fluide dans WordPress
Ce tutoriel vous oblige à ajouter du code à vos fichiers WordPress. Si vous ne l'avez pas encore fait, consultez notre guide sur la façon de copier et coller du code dans WordPress.
Tout d'abord, vous devez trouver la classe CSS de la zone que vous souhaitez modifier. Pour ce faire, utilisez l'outil Inspecter de votre navigateur. Passez simplement la souris sur la zone que vous souhaitez modifier et cliquez avec le bouton droit pour sélectionner l'outil Inspecter.
<img title = "Trouver la classe CSS" src = "https://blogging-techies.com/wp-content/uploads/2020/03/findcssclass.png" alt = "Trouver la classe CSS” width=”550″ height=”303″ class=”alignnone size-full wp-image-50810″>
Ensuite, vous devez écrire la classe CSS que vous souhaitez cibler. Par exemple, dans la capture d'écran ci-dessus, nous voulons pointer vers la zone de widget en bas qui a la classe CSS "en-tête de page".
À l'étape suivante, vous devez ouvrir un éditeur de texte brut sur votre ordinateur et créer un nouveau fichier. Vous devez enregistrer ce fichier sous wpb-background-tutorial.js sur votre bureau.
Ensuite, vous devez ajouter le code suivant dans votre fichier JS:
jQuery(function($){
$('.page-header').each(function(){
var $this = $(this),
colors = ('#ec008c', '#00bcc3', '#5fb26a', '#fc7331');
setInterval(function(){
var color = colors.shift();
colors.push(color);
$this.animate({backgroundColor: color}, 2000);
},4000);
});
});
Si vous étudiez ce code, vous remarquerez que nous avons utilisé la classe CSS que nous voulons pointer dans le code. Nous avons également ajouté quatre couleurs. Notre effet de fond doux commencera à partir de la première couleur, puis passera à la couleur suivante et continuera à travers ces couleurs.
N'oubliez pas d'enregistrer vos modifications dans le fichier.
Ensuite, vous devez télécharger le fichier wpb-bg-tutorial.js dans le dossier / js / de votre thème WordPress via FTP. Si votre thème ne contient pas de dossier js, vous devez en créer un.
<img title = 'uploadjs "src =" https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png "alt =" Chargez votre fichier javascript' width =”550″ height=”278″ class=”alignnone size-full wp-image-50811″>
Après avoir téléchargé votre fichier JavaScript, il est temps de le télécharger sur WordPress.
Vous devez ajouter le code suivant au fichier functions.php de votre thème.
function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );
Ce code charge correctement le fichier JavaScript et le script jQuery dépendant dont vous avez besoin pour que ce code fonctionne.
Voilà, vous pouvez maintenant visiter leur site Web pour le voir en action. Vous remarquerez l'effet de changement de couleur d'arrière-plan fluide dans la zone ciblée.
Il existe de nombreuses autres façons d'utiliser les couleurs d'arrière-plan WordPress pour attirer l'attention des utilisateurs ou faire ressortir votre contenu. Par exemple, vous pouvez essayer:
- Ajouter des images d'arrière-plan en plein écran
- Ajouter des arrière-plans vidéo en plein écran
- Couleurs d'arrière-plan aléatoires à chaque chargement de page
- Ajoutez des effets de parallaxe à n'importe quel thème WordPress
- Concevez des articles individuels avec différents horizons
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement un effet de changement de couleur d'arrière-plan fluide dans WordPress. Vous pouvez également consulter notre liste des meilleurs plugins de création de pages WordPress que vous pouvez essayer.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter y Facebook.
