Voulez-vous ajouter un effet de changement de couleur d'arri\u00e8re-plan \u00e0 votre site WordPress? Vous avez peut-\u00eatre vu sur certains sites Web populaires o\u00f9 la couleur d'arri\u00e8re-plan d'une zone sp\u00e9cifique ou la page Web enti\u00e8re passe automatiquement d'une couleur \u00e0 l'autre. Ce bel effet peut vous aider \u00e0 attirer l'attention des utilisateurs et \u00e0 am\u00e9liorer l'engagement sur votre site Web. Dans cet article, nous vous montrerons comment ajouter facilement un effet de changement de couleur d'arri\u00e8re-plan fluide dans WordPress. <\/p>\n
<img title = "Ajouter un effet de changement de couleur d'arri\u00e8re-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\u00e8re-plan fluide dans WordPress” width=”550″ height=”340″ class=”alignnone size-full wp-image-50813″><\/p>\n
L'effet de changement de couleur d'arri\u00e8re-plan fluide vous permet de passer automatiquement d'une couleur d'arri\u00e8re-plan \u00e0 l'autre. Le changement se produit lentement en passant par diff\u00e9rentes couleurs jusqu'\u00e0 ce qu'il atteigne la couleur finale. Cela ressemble \u00e0 ceci:<\/p>\n
<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″><\/p>\n
Cette technique est utilis\u00e9e pour capter l'attention de l'utilisateur avec des effets doux et agr\u00e9ables \u00e0 l'\u0153il. <\/p>\n
Cela dit, regardons comment ajouter cet effet de changement de couleur d'arri\u00e8re-plan fluide \u00e0 n'importe quel th\u00e8me WordPress. <\/p>\n
Ce tutoriel vous oblige \u00e0 ajouter du code \u00e0 vos fichiers WordPress. Si vous ne l'avez pas encore fait, consultez notre guide sur la fa\u00e7on de copier et coller du code dans WordPress. <\/p>\n
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\u00e9lectionner l'outil Inspecter. <\/p>\n
<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″><\/p>\n
Ensuite, vous devez \u00e9crire la classe CSS que vous souhaitez cibler. Par exemple, dans la capture d'\u00e9cran ci-dessus, nous voulons pointer vers la zone de widget en bas qui a la classe CSS "en-t\u00eate de page". <\/p>\n
\u00c0 l'\u00e9tape suivante, vous devez ouvrir un \u00e9diteur de texte brut sur votre ordinateur et cr\u00e9er un nouveau fichier. Vous devez enregistrer ce fichier sous wpb-background-tutorial.js sur votre bureau. <\/p>\n
Ensuite, vous devez ajouter le code suivant dans votre fichier JS: <\/p>\n
\r\njQuery(function($){\r\n $('.page-header').each(function(){\r\n var $this = $(this),\r\n\t\t\tcolors = ('#ec008c', '#00bcc3', '#5fb26a', '#fc7331');\r\n\r\n setInterval(function(){\r\n var color = colors.shift();\r\n colors.push(color);\r\n $this.animate({backgroundColor: color}, 2000);\r\n },4000);\r\n });\r\n }); \r\n<\/pre>\nSi vous \u00e9tudiez ce code, vous remarquerez que nous avons utilis\u00e9 la classe CSS que nous voulons pointer dans le code. Nous avons \u00e9galement ajout\u00e9 quatre couleurs. Notre effet de fond doux commencera \u00e0 partir de la premi\u00e8re couleur, puis passera \u00e0 la couleur suivante et continuera \u00e0 travers ces couleurs. <\/p>\n
N'oubliez pas d'enregistrer vos modifications dans le fichier. <\/p>\n
Ensuite, vous devez t\u00e9l\u00e9charger le fichier wpb-bg-tutorial.js dans le dossier \/ js \/ de votre th\u00e8me WordPress via FTP. Si votre th\u00e8me ne contient pas de dossier js, vous devez en cr\u00e9er un. <\/p>\n
<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″><\/p>\n
Apr\u00e8s avoir t\u00e9l\u00e9charg\u00e9 votre fichier JavaScript, il est temps de le t\u00e9l\u00e9charger sur WordPress. <\/p>\n
Vous devez ajouter le code suivant au fichier functions.php de votre th\u00e8me. <\/p>\n
\r\nfunction wpb_bg_color_scripts() { \r\nwp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '\/js\/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); \r\n } \r\nadd_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); \r\n<\/pre>\nCe code charge correctement le fichier JavaScript et le script jQuery d\u00e9pendant dont vous avez besoin pour que ce code fonctionne. <\/p>\n
Voil\u00e0, vous pouvez maintenant visiter leur site Web pour le voir en action. Vous remarquerez l'effet de changement de couleur d'arri\u00e8re-plan fluide dans la zone cibl\u00e9e. <\/p>\n
Il existe de nombreuses autres fa\u00e7ons d'utiliser les couleurs d'arri\u00e8re-plan WordPress pour attirer l'attention des utilisateurs ou faire ressortir votre contenu. Par exemple, vous pouvez essayer: <\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 apprendre comment ajouter facilement un effet de changement de couleur d'arri\u00e8re-plan fluide dans WordPress. Vous pouvez \u00e9galement consulter notre liste des meilleurs plugins de cr\u00e9ation de pages WordPress que vous pouvez essayer. <\/p>\n
Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour regarder des vid\u00e9os de didacticiel WordPress. Vous pouvez \u00e9galement nous trouver sur Twitter y Facebook.<\/p>\n