{"id":45220,"date":"2021-03-24T08:48:02","date_gmt":"2021-03-24T07:48:02","guid":{"rendered":"https:\/\/kinsta.com\/?p=90115"},"modified":"2023-11-03T03:06:01","modified_gmt":"2023-11-03T02:06:01","slug":"image-arriere-plan-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/","title":{"rendered":"Images d&rsquo;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser"},"content":{"rendered":"<p>Les images d&rsquo;arri\u00e8re-plan WordPress se pr\u00e9sentent sous toutes les formes. Vous pouvez t\u00e9l\u00e9verser une image d&rsquo;arri\u00e8re-plan pour l&rsquo;ensemble de votre site web, la placer derri\u00e8re des boutons ou d\u00e9finir un arri\u00e8re-plan de couleur unie pour votre page de connexion. Quel que soit l&rsquo;endroit o\u00f9 vous souhaitez les placer, il est essentiel de comprendre les bases du <a href=\"https:\/\/kinsta.com\/fr\/blog\/augmenter-taille-max-upload-wordpress\/\">t\u00e9l\u00e9versement d&rsquo;une image<\/a>, y compris une image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Cet article explique ce qu&rsquo;est une image d&rsquo;arri\u00e8re-plan et comment vous pouvez la modifier pour un meilleur r\u00e9sultat. Nous expliquerons \u00e9galement comment activer rapidement les images d&rsquo;arri\u00e8re-plan sur votre site et <a href=\"https:\/\/kinsta.com\/fr\/blog\/erreurs-wordpress\/\">r\u00e9soudre les probl\u00e8mes<\/a> pouvant survenir en cours de route.<\/p>\n<p>\u00c7a vous intrigue ? Commen\u00e7ons !<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p><strong>Consultez notre <a href=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\">guide vid\u00e9o<\/a> sur l&rsquo;ajout d&rsquo;images d&rsquo;arri\u00e8re-plan WordPress :<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\"><\/kinsta-video>\n<h2>Qu&rsquo;est-ce qu&rsquo;une image d&rsquo;arri\u00e8re-plan WordPress ?<\/h2>\n<p>Une image d&rsquo;arri\u00e8re-plan WordPress sert d&rsquo;arri\u00e8re-plan complet de votre site web. Cela s&rsquo;appelle \u00e9galement un arri\u00e8re-plan personnalis\u00e9.<\/p>\n<figure id=\"attachment_91170\" aria-describedby=\"caption-attachment-91170\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-91170 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WordPress-Background-Image-Example-e1614937251379.png\" alt=\"Un exemple d'image d'arri\u00e8re-plan WordPress.\" width=\"1100\" height=\"671\"><figcaption id=\"caption-attachment-91170\" class=\"wp-caption-text\">Un exemple d&rsquo;image d&rsquo;arri\u00e8re-plan WordPress.<\/figcaption><\/figure>\n<p>Quelle que soit l&rsquo;option choisie, le fichier <strong>functions.php<\/strong> g\u00e8re l&rsquo;image d&rsquo;arri\u00e8re-plan dans un th\u00e8me WordPress. Elle est \u00e9galement affich\u00e9e par le fichier <strong>header.php<\/strong> de WordPress.<\/p>\n<p>En cons\u00e9quence, les d\u00e9veloppeurs de th\u00e8mes ont un meilleur contr\u00f4le sur l&rsquo;activation ou non de la fonction d&rsquo;arri\u00e8re-plan personnalis\u00e9 pour votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">th\u00e8me WordPress<\/a>. Vous pouvez toujours tourner la fonctionnalit\u00e9 sur <strong>On<\/strong> ou <strong>Off<\/strong>, mais le th\u00e8me de votre site dicte g\u00e9n\u00e9ralement les r\u00e9glages par d\u00e9faut.<\/p>\n<p>Il existe plusieurs types d&rsquo;arri\u00e8re-plans que vous pouvez impl\u00e9menter sur WordPress. Vous pouvez choisir un arri\u00e8re-plan standard de site web complet ou un arri\u00e8re-plan qui se trouve derri\u00e8re des \u00e9l\u00e9ments sp\u00e9cifiques tels que des colonnes lat\u00e9rales et des articles.<\/p>\n<p>Des arri\u00e8re-plans personnalis\u00e9s sont \u00e9galement possibles pour des emplacements plus sp\u00e9cifiques sur le site WordPress:<\/p>\n<ul>\n<li>Derri\u00e8re une page ou un article WordPress<\/li>\n<li>Sur une page de cat\u00e9gorie WordPress<\/li>\n<li>\u00c0 l&rsquo;int\u00e9rieur d&rsquo;un bloc de contenu pour une page ou un article<\/li>\n<li>Sur la <a href=\"https:\/\/kinsta.com\/fr\/blog\/url-connexion-wordpress\/\">page de connexion<\/a><\/li>\n<li>Derri\u00e8re le menu de navigation<\/li>\n<li>Sur les pages Maintenance ou Prochainement<\/li>\n<\/ul>\n<p>Dans l&rsquo;ensemble, si la prise en charge de l&rsquo;arri\u00e8re-plan personnalis\u00e9 est activ\u00e9e dans un th\u00e8me, l&rsquo;utilisateur a la possibilit\u00e9 de t\u00e9l\u00e9verser une image ou de choisir une couleur pour remplir l&rsquo;int\u00e9gralit\u00e9 de l&rsquo;arri\u00e8re-plan du site.<\/p>\n<p>Les r\u00e9glages se trouvent dans le tableau de bord WordPress sous <strong>Apparence &gt; Personnaliser &gt; Image d&rsquo;arri\u00e8re-plan<\/strong>. Cependant, d&rsquo;autres types d&rsquo;arri\u00e8re-plans sont possibles gr\u00e2ce aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeurs de pages en glisser-d\u00e9poser<\/a>, aux extensions et \u00e0 diff\u00e9rentes options.<\/p>\n<p>T\u00e9l\u00e9verser une image d&rsquo;arri\u00e8re-plan sur le tableau de bord n&rsquo;est qu&rsquo;une partie du processus. Apr\u00e8s cela, vous devez configurer les r\u00e9glages de l&rsquo;image d&rsquo;arri\u00e8re-plan. Parfois, vous pouvez laisser les r\u00e9glages tels quels, tandis que d&rsquo;autres fois, il est important de reconfigurer les r\u00e9glages pour que l&rsquo;image soit excellente.<\/p>\n<p>Les r\u00e9glages d&rsquo;une image d&rsquo;arri\u00e8re-plan WordPress comprennent :<\/p>\n<ul>\n<li>Couleurs d&rsquo;arri\u00e8re-plan<\/li>\n<li>Dimensionnement<\/li>\n<li>Position de l&rsquo;image<\/li>\n<li>Si l&rsquo;image doit se r\u00e9p\u00e9ter ou non<\/li>\n<li>Options pour remplir l&rsquo;\u00e9cran ou \u00e9tirer l&rsquo;image<\/li>\n<\/ul>\n<p>Nous aborderons d&rsquo;abord les meilleures pratiques lors de l&rsquo;utilisation d&rsquo;images d&rsquo;arri\u00e8re-plan WordPress. Ensuite, nous verrons comment d\u00e9finir une image d&rsquo;arri\u00e8re-plan WordPress dans diverses situations.<\/p>\n\n<h2>Les nombreux styles d&rsquo;arri\u00e8re-plans<\/h2>\n<p>Un r\u00e9el avantage d&rsquo;un arri\u00e8re-plan WordPress est que ce ne sont pas tous des <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-fichier-image\/\">images<\/a> statiques. Vous pouvez rencontrer diff\u00e9rents types d&rsquo;arri\u00e8re-plans, allant des vid\u00e9os aux motifs photo en passant par les diaporamas.<\/p>\n<figure id=\"attachment_91256\" aria-describedby=\"caption-attachment-91256\" style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-91256 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Kinsta-Background-Example-e1615198933785.png\" alt=\"Un exemple d'image d\u2019arri\u00e8re-plan sur le site de Kinsta\" width=\"1100\" height=\"693\"><figcaption id=\"caption-attachment-91256\" class=\"wp-caption-text\">Un exemple d&rsquo;image d\u2019arri\u00e8re-plan sur le site de Kinsta<\/figcaption><\/figure>\n<p>Vous \u00eates souvent en mesure d&rsquo;impl\u00e9menter des arri\u00e8re-plans uniques \u00e0 l&rsquo;aide de CSS personnalis\u00e9s ou d\u2019extensions (ou les deux). Nous vous montrons les deux m\u00e9thodes dans cet article.<\/p>\n<p>Voici quelques styles d&rsquo;arri\u00e8re-plan \u00e0 envisager\u00a0:<\/p>\n<ul>\n<li><strong>Images d&rsquo;arri\u00e8re-plan standard :<\/strong> ce sont des images statiques (PNG, JPG et autres formats d&rsquo;image) qui s&rsquo;\u00e9tendent sur la plupart de l&rsquo;espace du site web et se trouvent derri\u00e8re le contenu principal. Leurs avantages incluent la simplicit\u00e9, les options pour les photos en haute d\u00e9finition et la prise en charge par d\u00e9faut par le c\u0153ur de WordPress. Les inconv\u00e9nients vont de leur tendance \u00e0 g\u00e2cher la visibilit\u00e9 des \u00e9l\u00e9ments de premier plan \u00e0 une grande image en haute d\u00e9finition ralentissant votre site.<\/li>\n<li><strong>Arri\u00e8re-plans de couleur unie :<\/strong> La <a href=\"https:\/\/kinsta.com\/fr\/blog\/palettes-couleurs-site\/\">couleur unie<\/a> d\u2019arri\u00e8re-plan est tr\u00e8s pratique lorsque vous voulez ajouter un peu d\u2019\u00e9clat \u00e0 votre site, mais ne pas avoir une image qui correspond \u00e0 votre marque ou qui semble bonne en arri\u00e8re-plan. La couleur d\u2019arri\u00e8re-plan pr\u00e9sente \u00e9galement une image plus nette et plus professionnelle, et sa mise en \u0153uvre ne prend pas longtemps. Elles sont parfaites pour faire correspondre votre image de marque sans avoir besoin de code personnalis\u00e9 ou d\u2019extension.<\/li>\n<li><strong>Arri\u00e8re-plans d\u00e9grad\u00e9s :<\/strong> Un arri\u00e8re-plan d\u00e9grad\u00e9 passe d&rsquo;une couleur \u00e0 une autre. C&rsquo;est plus attrayant visuellement qu&rsquo;une couleur unie, ne prend pas beaucoup de temps \u00e0 ajouter et vous pouvez en ajouter un avec de nombreuses extensions. Le principal inconv\u00e9nient est que le premier plan peut bien appara\u00eetre \u00e0 une extr\u00e9mit\u00e9 du d\u00e9grad\u00e9 mais pas \u00e0 l&rsquo;autre.<\/li>\n<li><strong>Arri\u00e8re-plans de motifs ou de textures :<\/strong> Tous les arri\u00e8re-plans de motifs et de textures sont des photos, mais ils se concentrent sur des \u00e9l\u00e9ments r\u00e9p\u00e9titifs de l&rsquo;image ou une texture en gros plan, comme un panneau de bois ou un morceau d&rsquo;herbe. L&rsquo;avantage d&rsquo;un motif ou d&rsquo;une texture est que cela fonctionne \u00e0 merveille comme arri\u00e8re-plan, en voyant comment vous pouvez l&rsquo;\u00e9tirer, et la plupart des gens ne remarqueront pas s&rsquo;il y a une rupture dans le motif lorsque l&rsquo;image n&rsquo;est pas assez grande.<\/li>\n<li><strong>Arri\u00e8re-plans de diaporama d&rsquo;images :<\/strong> un arri\u00e8re-plan de <a href=\"https:\/\/kinsta.com\/fr\/blog\/diaporama-wordpress\/\">diaporama d&rsquo;images<\/a> permet aux propri\u00e9taires de sites de partager plusieurs types de conceptions ou de photos en arri\u00e8re-plan, renfor\u00e7ant ainsi les efforts pour ajuster l&rsquo;ambiance lorsqu&rsquo;un client parcourt votre site. Cependant, les diaporamas peuvent sembler distrayants ou ralentir votre site.<\/li>\n<li><strong>Arri\u00e8re-plans vid\u00e9o :<\/strong> les arri\u00e8re-plans vid\u00e9o sont attrayants, amusants \u00e0 regarder et d\u00e9crivent facilement la nature de votre marque. Cependant, ils entra\u00eenent \u00e9galement des probl\u00e8mes de performances s&rsquo;ils ne sont pas effectu\u00e9s correctement et pourraient d\u00e9tourner l&rsquo;attention de votre tunnel de vente. De plus, les vid\u00e9os d&rsquo;arri\u00e8re-plan doivent avoir les dimensions parfaites et \u00eatre lues au bon moment. Elles peuvent \u00e9galement \u00eatre co\u00fbteuses \u00e0 r\u00e9aliser, sauf si vous optez pour des vid\u00e9os gratuites.<\/li>\n<\/ul>\n<h2>Meilleures pratiques pour l&rsquo;utilisation d\u2019images d&rsquo;arri\u00e8re-plan WordPress<\/h2>\n<p>D\u00e9finir une image d&rsquo;arri\u00e8re-plan personnalis\u00e9e semble \u00eatre une t\u00e2che facile. Il suffit de t\u00e9l\u00e9verser l&rsquo;image au bon endroit et de la regarder appara\u00eetre sur l\u2019interface publique, n&rsquo;est-ce pas\u00a0?<\/p>\n<p>La plupart du temps, c&rsquo;est le cas, mais d&rsquo;autres fois, vous constaterez que l&rsquo;image d&rsquo;arri\u00e8re-plan peut \u00eatre un peu g\u00eanante. C&rsquo;est pourquoi nous vous recommandons de suivre les <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\">meilleures pratiques WordPress<\/a>\u00a0pour les images d\u2019arri\u00e8re-plan afin d&rsquo;\u00e9liminer autant de probl\u00e8mes que possible.<\/p>\n<p><strong>Conseils pour l&rsquo;utilisation des images d&rsquo;arri\u00e8re-plan WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=RLR1vILiE98\"><\/kinsta-video>\n<h3>Restez fid\u00e8le aux images de haute qualit\u00e9<\/h3>\n<p>La r\u00e9solution de votre image d&rsquo;arri\u00e8re-plan fait ou d\u00e9fait souvent sa pr\u00e9sentation. Vous pouvez penser qu&rsquo;une image prise avec votre smartphone est parfaite pour une image d&rsquo;arri\u00e8re-plan, mais il est fort probable qu&rsquo;elle doive \u00eatre de bien meilleure qualit\u00e9.<\/p>\n<figure id=\"attachment_91186\" aria-describedby=\"caption-attachment-91186\" style=\"width: 1139px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-91186 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Unsplash-Free-Stock-Photos.png\" alt=\"Photos gratuites sur Unsplash\" width=\"1139\" height=\"729\"><figcaption id=\"caption-attachment-91186\" class=\"wp-caption-text\">Photos gratuites sur Unsplash<\/figcaption><\/figure>\n<p>Vous pouvez payer pour une image libre de droits \u00e0 partir d&rsquo;un site comme Shutterstock. Ces sites ont g\u00e9n\u00e9ralement des images de niveau professionnel qui sont pr\u00e9par\u00e9es et pr\u00eates \u00e0 \u00eatre t\u00e9l\u00e9vers\u00e9es sous la forme d&rsquo;une grande image d&rsquo;arri\u00e8re-plan. Vous pouvez \u00e9galement en trouver beaucoup sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/images-gratuites-pour-wordpress\/\">les sites d&rsquo;images libres de droits<\/a>.<\/p>\n<p>L&rsquo;image d&rsquo;arri\u00e8re-plan peut ne pas \u00eatre affich\u00e9e dans son int\u00e9gralit\u00e9 sur votre site web, car une grande partie est recouverte par le contenu. Pourtant, l&rsquo;image r\u00e9elle est affich\u00e9e sur tout l&rsquo;\u00e9cran.<\/p>\n<p>Si vous n&rsquo;utilisez pas une image de haute qualit\u00e9, vous courez le risque de voir un arri\u00e8re-plan \u00e9tir\u00e9.<\/p>\n<h3>Assurez-vous que les images d&rsquo;arri\u00e8re-plan sont correctement dimensionn\u00e9es<\/h3>\n<p>Outre la r\u00e9solution de l&rsquo;image, la taille physique de l&rsquo;image compte beaucoup.<\/p>\n<p>Tous les <a href=\"https:\/\/kinsta.com\/fr\/blog\/design-web-responsive\/\">\u00e9crans ont des proportions variables<\/a>. Et les appareils mobiles rendent les choses encore plus compliqu\u00e9es. Mais l&rsquo;objectif est d&rsquo;utiliser une image qui convient parfaitement au plus grand des \u00e9crans. Sinon, vous courez le risque d&rsquo;avoir \u00e0 nouveau l&rsquo;image \u00e9tir\u00e9e ou qu\u2019elle ne s&rsquo;affiche pas correctement.<\/p>\n<p>En g\u00e9n\u00e9ral, une bonne r\u00e8gle est de s&rsquo;en tenir \u00e0 une taille minimale d&rsquo;image d\u2019arri\u00e8re-plan WordPress de <strong>1024 x 768<\/strong> pixels. Cependant, d&rsquo;autres experts recommandent quelque chose de plus comme <strong>1920 x 1080<\/strong> pixels. Dans l&rsquo;ensemble, votre meilleur plan d&rsquo;action est de rester quelque part entre 1000 et 3000 pixels pour la largeur, en fonction de l&rsquo;endroit o\u00f9 elle est affich\u00e9e.<\/p>\n<figure id=\"attachment_89221\" aria-describedby=\"caption-attachment-89221\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89221 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/starting-large.png\" alt=\"Dimensions d'image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89221\" class=\"wp-caption-text\">Dimensions d&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Le facteur suivant \u00e0 prendre en compte est le rapport hauteur \/ largeur. L&rsquo;image d&rsquo;arri\u00e8re-plan recouvre-t-elle un site web entier ou s&rsquo;agit-il simplement du quart sup\u00e9rieur?<\/p>\n<p>Techniquement, un site web a un rapport d&rsquo;aspect portrait (plus haut que large). Vous pouvez donc examiner ces types d&rsquo;images. Cependant, les arri\u00e8re-plans de sections, comme ceux des en-t\u00eates ou des <a href=\"https:\/\/kinsta.com\/fr\/blog\/tailles-banniere-publicite\/\">banni\u00e8res publicitaires,<\/a> doivent rester au format paysage (plus large que haut).<\/p>\n<p>De plus, le rapport hauteur \/ largeur le plus courant pour les ordinateurs de bureau est de <strong>16:9<\/strong>. Rester autour de cet objectif aide. Un th\u00e8me ou une extension responsive peut ajuster l&rsquo;image d&rsquo;arri\u00e8re-plan automatiquement pour une visualisation sur mobile.<\/p>\n<p>En fin de compte, tester vos images d&rsquo;arri\u00e8re-plan sur un site r\u00e9el et sur plusieurs types d&rsquo;appareils devrait rendre la d\u00e9cision finale beaucoup plus facile.<\/p>\n<h3>Optimiser avant de cr\u00e9er une image d&rsquo;arri\u00e8re-plan WordPress<\/h3>\n<p>Comme pour toutes les images t\u00e9l\u00e9vers\u00e9es sur WordPress, vous ne vous rendez pas service si vous ne les <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\">optimisez pas avant de les publier sur Internet<\/a>. Ceci est particuli\u00e8rement important pour les images d&rsquo;arri\u00e8re-plan car elles apparaissent souvent sur plusieurs pages de votre site web. De plus, ce sont de grandes photos et recouvrent une quantit\u00e9 importante d&rsquo;espace sur l&rsquo;\u00e9cran.<\/p>\n<p>Les images plus grandes exercent une pression consid\u00e9rable sur votre serveur. Conservez la r\u00e9solution de votre image, mais optimisez sa taille pour que votre <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/accelerer-wordpress\/\">site web se charge rapidement<\/a>.<\/p>\n<p>Vous avez deux options pour optimiser les photos\u00a0:<\/p>\n<ol>\n<li>Optimisez les images d&rsquo;arri\u00e8re-plan (et toutes les images du site web) avant de les t\u00e9l\u00e9verser sur WordPress. Terminez ce processus manuel \u00e0 l&rsquo;aide d&rsquo;outils tels que Photoshop Express, GIMP et Pixlr.<\/li>\n<li>Automatisez le processus d&rsquo;optimisation en installant une extension WordPress qui redimensionne et r\u00e9duit les photos lors du t\u00e9l\u00e9chargement.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\">Lisez notre guide d\u00e9taill\u00e9 d&rsquo;optimisation d&rsquo;image<\/a> pour savoir comment optimiser les images pour am\u00e9liorer les performances web.<\/p>\n<h3>V\u00e9rifiez la prise en charge de l\u2019arri\u00e8re-plan avant d&rsquo;installer un th\u00e8me<\/h3>\n<p>Malheureusement, tous les th\u00e8mes ne prennent pas en charge les images d&rsquo;arri\u00e8re-plan personnalis\u00e9es. C&rsquo;est souvent parce que l&rsquo;arri\u00e8re-plan ne correspond pas \u00e0 la conception globale du th\u00e8me, le d\u00e9veloppeur a donc choisi de d\u00e9sactiver compl\u00e8tement ceci.<\/p>\n<p>Pourtant, si vous voulez vraiment un arri\u00e8re-plan sur votre site web, il est prudent de v\u00e9rifier la liste des fonctionnalit\u00e9s lors du t\u00e9l\u00e9chargement d&rsquo;un nouveau th\u00e8me, surtout si vous pr\u00e9voyez de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-qu-un-theme-wordpress\/\">payer pour un th\u00e8me premium<\/a>. De nombreux <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">sites web de vente de th\u00e8mes<\/a> offrent des informations sur la prise en charge ou non des arri\u00e8re-plans par un th\u00e8me.<\/p>\n<p>Par exemple, les th\u00e8mes r\u00e9pertori\u00e9s dans la <a href=\"https:\/\/wordpress.org\/themes\/\">biblioth\u00e8que de th\u00e8mes WordPress<\/a> indiquent la prise en charge des arri\u00e8re-plans personnalis\u00e9s avec des \u00e9tiquettes. Vous pouvez \u00e9galement trouver une r\u00e9f\u00e9rence \u00e0 un arri\u00e8re-plan personnalis\u00e9 dans la description du th\u00e8me.<\/p>\n<figure id=\"attachment_87952\" aria-describedby=\"caption-attachment-87952\" style=\"width: 1237px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-87952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/01\/the-feature-for-custom-background.png\" alt=\"Prise en charge d\u2019arri\u00e8re-plan personnalis\u00e9 pour les th\u00e8mes\" width=\"1237\" height=\"1321\"><figcaption id=\"caption-attachment-87952\" class=\"wp-caption-text\">Prise en charge d\u2019arri\u00e8re-plan personnalis\u00e9 pour les th\u00e8mes<\/figcaption><\/figure>\n<p>D&rsquo;autres sites de th\u00e8mes incluent g\u00e9n\u00e9ralement des informations similaires sur les images d&rsquo;arri\u00e8re-plan personnalis\u00e9es. Sinon, contactez le <a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">d\u00e9veloppeur<\/a> pour savoir si c&rsquo;est possible de quelque mani\u00e8re que ce soit et si le remplacement du bloc d&rsquo;image d&rsquo;arri\u00e8re-plan (couvert ci-dessous) causera des probl\u00e8mes avec le th\u00e8me.<\/p>\n<h3>Envisagez d&rsquo;utiliser un constructeur de page visuel pour simplifier les images d&rsquo;arri\u00e8re-plan<\/h3>\n<p>Les constructeurs de pages comme Gutenberg, WPBakery, <a href=\"https:\/\/kinsta.com\/fr\/blog\/divi-vs-elementor\/\">Divi et Elementor<\/a> proposent des listes impressionnantes de blocs et de modules pour ins\u00e9rer des \u00e9l\u00e9ments tels que des images et des zones de texte n&rsquo;importe o\u00f9 sur une page web.<\/p>\n<figure id=\"attachment_89080\" aria-describedby=\"caption-attachment-89080\" style=\"width: 1324px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89080 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Constructeur de site Elementor\" width=\"1324\" height=\"435\"><figcaption id=\"caption-attachment-89080\" class=\"wp-caption-text\">Constructeur de site Elementor<\/figcaption><\/figure>\n<p>Sans un <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeur en glisser-d\u00e9poser<\/a>, il devient un peu plus difficile de configurer une image d&rsquo;arri\u00e8re-plan. Il est particuli\u00e8rement difficile d&rsquo;essayer de r\u00e9soudre les probl\u00e8mes que vous pourriez rencontrer.<\/p>\n<p>Les constructeurs de pages ont \u00e9galement tendance \u00e0 remplacer la fonctionnalit\u00e9 d&rsquo;image d&rsquo;arri\u00e8re-plan par d\u00e9faut fournie par WordPress. Vous pouvez remplacer les restrictions de th\u00e8me ou tout \u00e9l\u00e9ment manquant qui aide \u00e0 afficher une image d&rsquo;arri\u00e8re-plan dans le code.<\/p>\n<h3>Assurez-vous que votre image d&rsquo;arri\u00e8re-plan est l\u00e9gale<\/h3>\n<p>La l\u00e9galit\u00e9 revient toujours quand on parle d&rsquo;images, en particulier celles publi\u00e9es sur Internet. Il y a une tendance croissante sur les <a href=\"https:\/\/kinsta.com\/fr\/blog\/medias-sociaux-wordpress\/\">r\u00e9seaux sociaux<\/a> o\u00f9 les gens semblent supposer que l&rsquo;ajout d&rsquo;un cr\u00e9dit \u00e0 une photo permet automatiquement d&rsquo;utiliser cette photo.<\/p>\n<p>C&rsquo;est faux.<\/p>\n<p>Celui qui prend la photo en est propri\u00e9taire. M\u00eame si cette image provient d&rsquo;un iPhone, ils b\u00e9n\u00e9ficient imm\u00e9diatement d&rsquo;une protection des droits d&rsquo;auteur pour cette photo aux \u00c9tats-Unis et dans de nombreux autres pays.<\/p>\n<p>Si vous voulez avoir les droits l\u00e9gaux d&rsquo;utiliser la photo de quelqu&rsquo;un d&rsquo;autre, il faudrait une d\u00e9claration \u00e9crite du d\u00e9tenteur des droits d&rsquo;auteur vous autorisant \u00e0 utiliser ses images &#8211; un simple e-mail fait l&rsquo;affaire. M\u00eame dans ce cas, vous devrez peut-\u00eatre cr\u00e9diter la photo si la personne vous le demande.<\/p>\n<p>Nous avons un <a href=\"https:\/\/kinsta.com\/fr\/blog\/proteger-images\/\">guide complet sur la protection des images sur votre site<\/a>, mais l&rsquo;article pr\u00e9sente \u00e9galement des informations pr\u00e9cieuses pour ceux qui souhaitent utiliser des photos provenant d&rsquo;autres sources.<\/p>\n<p>La partie la plus difficile \u00e0 propos des images d&rsquo;arri\u00e8re-plan est qu&rsquo;il n&rsquo;est g\u00e9n\u00e9ralement pas pratique d&rsquo;ajouter un cr\u00e9dit, car WordPress n&rsquo;a pas de place pour incorporer une l\u00e9gende visible pour les images d&rsquo;arri\u00e8re-plan. Et non, vous ne pouvez pas ajouter de cr\u00e9dit sur un article ou une page de blog al\u00e9atoire et vous attendre \u00e0 ce que cela serve de cr\u00e9dit pour une image d&rsquo;arri\u00e8re-plan complet du site.<\/p>\n<p>Pour vous prot\u00e9ger et respecter ceux qui prennent les photos, pensez \u00e0 l&rsquo;un des \u00e9l\u00e9ments suivants lors de la recherche d&rsquo;une image d&rsquo;arri\u00e8re-plan WordPress\u00a0:<\/p>\n<ul>\n<li>Prenez la photo vous-m\u00eame. C&rsquo;est le moyen le plus simple de vous assurer de ne pas enfreindre la propri\u00e9t\u00e9 prot\u00e9g\u00e9e par le droit d&rsquo;auteur de quelqu&rsquo;un d&rsquo;autre.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/photos-stock-wordpress\/#2-pixelrockstar-premium-yet-insanely-affordable\">Payez des photos<\/a> sur des sites web comme Shutterstock et iStockPhoto. Celles-ci sont parfois co\u00fbteuses, mais pour une image d&rsquo;arri\u00e8re-plan, cela peut tout simplement s&rsquo;inscrire dans votre budget.<\/li>\n<li>Envisagez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/images-gratuites-pour-wordpress\/\">site d&rsquo;images gratuit<\/a> es comme Unsplash ou Pexels. Cependant, assurez-vous que le cr\u00e9dit n&rsquo;est pas n\u00e9cessaire ! Vous pouvez parfois localiser des images sur ces sites o\u00f9 le cr\u00e9dit est sugg\u00e9r\u00e9 mais pas obligatoire.<\/li>\n<li>Contactez le photographe ou l&rsquo;artiste et demandez si vous pouvez l&rsquo;utiliser gratuitement. Cela peut \u00eatre tout ce dont vous avez besoin, surtout si vous offrez quelque chose en retour.<\/li>\n<li>Pensez \u00e0 ne pas utiliser d&rsquo;image d&rsquo;arri\u00e8re-plan, ou envisagez d&rsquo;opter pour un arri\u00e8re-plan color\u00e9 au lieu d&rsquo;une photo.<\/li>\n<\/ul>\n<h2>Comment d\u00e9finir une image d&rsquo;arri\u00e8re-plan dans WordPress?<\/h2>\n<p>Il existe diff\u00e9rentes fa\u00e7ons de d\u00e9finir une image d&rsquo;arri\u00e8re-plan dans WordPress. Ces m\u00e9thodes changent g\u00e9n\u00e9ralement en fonction de l&#8217;emplacement o\u00f9 vous souhaitez placer l&rsquo;image.<\/p>\n<p>Par exemple, vous pouvez d\u00e9cider que vous souhaitez qu&rsquo;une image d&rsquo;arri\u00e8re-plan reste la m\u00eame sur l&rsquo;ensemble de votre site web. D&rsquo;un autre c\u00f4t\u00e9, il est possible que vous pr\u00e9f\u00e9riez trouver un moyen d&rsquo;afficher des images d&rsquo;arri\u00e8re-plan uniques pour toutes vos pages.<\/p>\n<p>\u00c9tant donn\u00e9 qu&rsquo;il existe tant de possibilit\u00e9s, nous verrons comment ajouter une image ou une couleur d&rsquo;arri\u00e8re-plan dans les sections suivantes :<\/p>\n<ul>\n<li>Le site entier<\/li>\n<li>Une page WordPress<\/li>\n<li>Un article WordPress<\/li>\n<li>Un <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/\">bloc de contenu<\/a> individuel<\/li>\n<li>L&rsquo;en-t\u00eate WordPress<\/li>\n<li>Une page d&rsquo;archive de cat\u00e9gorie<\/li>\n<li>La page de connexion WordPress<\/li>\n<li>Le menu de navigation<\/li>\n<li>Une page de maintenance<\/li>\n<\/ul>\n<p><strong>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;en-t\u00eate et aux menus WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=5bSeC5NQjp0\"><\/kinsta-video>\n<h3>Avant de commencer : activez la prise en charge d&rsquo;arri\u00e8re-plan personnalis\u00e9 sur WordPress (si n\u00e9cessaire)<\/h3>\n<p>Les d\u00e9veloppeurs de th\u00e8mes d\u00e9cident du sort des capacit\u00e9s d&rsquo;arri\u00e8re-plan d&rsquo;un site. WordPress a la fonctionnalit\u00e9 int\u00e9gr\u00e9e dans son c\u0153ur, mais un d\u00e9veloppeur de th\u00e8me pourrait la d\u00e9sactiver, vous laissant sans r\u00e9glage de tableau de bord pour l&rsquo;activer.<\/p>\n<p>Si, \u00e0 un moment donn\u00e9 dans les tutoriels suivants, vous trouvez que <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-qu-un-theme-wordpress\/\">votre th\u00e8me est la raison<\/a> pour laquelle vous ne disposez pas d&rsquo;une option d&rsquo;<strong>arri\u00e8re-plan personnalis\u00e9<\/strong>, envisagez les \u00e9tapes suivantes pour y apporter une solution rapide.<\/p>\n<p>Le principal support d&rsquo;arri\u00e8re-plan personnalis\u00e9 pour WordPress est g\u00e9r\u00e9 par le fichier <strong>functions.php<\/strong>. Ouvrez ce fichier et ins\u00e9rez le code suivant s&rsquo;il est manquant :<\/p>\n<pre><code class=\"language-css\">$defaults = array(\n\u00a0\u00a0\u00a0\u00a0'default-color'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-image'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-repeat'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-position-x'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-attachment'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'wp-head-callback'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '_custom_background_cb',\n\u00a0\u00a0\u00a0\u00a0'admin-head-callback'\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'admin-preview-callback' =&gt; ''\n);\nadd_theme_support( 'custom-background', $defaults );<\/code><\/pre>\n<p>Gardez \u00e0 l&rsquo;esprit que l&rsquo;\u00e9l\u00e9ment activant r\u00e9ellement le support d&rsquo;arri\u00e8re-plan est la fonction <code>add_theme_support()<\/code> avec tout ce qu&rsquo;elle contient. Ce code active la fonction d&rsquo;arri\u00e8re-plan dans le <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord WordPress<\/a>, que vous pouvez utiliser dans la plupart des tutoriels suivants de cet article.<\/p>\n<p>Il est \u00e9galement possible d&rsquo;ajouter une image d&rsquo;arri\u00e8re-plan par d\u00e9faut pour l&rsquo;ensemble du th\u00e8me via le fichier <strong>functions.php<\/strong>. Acc\u00e9dez simplement \u00e0 la zone du code pr\u00e9c\u00e9dent avec la valeur <code>default-image<\/code> et ajoutez l&rsquo;URL de l&rsquo;image dans l&rsquo;espace vide entre le <code>' '<\/code> apr\u00e8s le <code>=&gt;<\/code>.<\/p>\n<p>C&rsquo;est un moyen rapide et facile d&rsquo;activer des arri\u00e8re-plans personnalis\u00e9s dans le tableau de bord WordPress.<\/p>\n<p>Cela dit, nous vous recommandons de <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-theme-wordpress\/\">changer le th\u00e8me<\/a> s&rsquo;il ne prend pas en charge l&rsquo;arri\u00e8re-plan. La suppression de la fonction d&rsquo;arri\u00e8re-plan personnalis\u00e9e pourrait avoir son propre objectif, ou peut-\u00eatre que le d\u00e9veloppeur du th\u00e8me a trouv\u00e9 qu&rsquo;elle causait trop de probl\u00e8mes avec le design.<\/p>\n<h3><strong>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;ensemble de votre site WordPress<\/strong><\/h3>\n<p>Si votre th\u00e8me offre la possibilit\u00e9 d&rsquo;ajouter une image d&rsquo;arri\u00e8re-plan personnalis\u00e9e (et beaucoup le font), cela vous facilite grandement la t\u00e2che.<\/p>\n<p>Pour commencer, acc\u00e9dez \u00e0 votre tableau de bord WordPress et cliquez sur <strong>Apparence &gt; Personnaliser<\/strong>.<\/p>\n<figure id=\"attachment_88032\" aria-describedby=\"caption-attachment-88032\" style=\"width: 1090px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88032 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-ize.png\" alt=\"Cliquez sur le lien \u00ab Personnaliser \u00bb dans le menu Apparence\" width=\"1090\" height=\"912\"><figcaption id=\"caption-attachment-88032\" class=\"wp-caption-text\">Cliquez sur le lien \u00ab Personnaliser \u00bb dans le menu Apparence<\/figcaption><\/figure>\n<p>Cela vous am\u00e8ne \u00e0 l\u2019outil <strong>WordPress de personnalisation de th\u00e8me<\/strong>, avec des r\u00e9glages de personnalisation \u00e0 gauche et un aper\u00e7u du site web \u00e0 droite.<\/p>\n<p>Ici, recherchez et cliquez sur l&rsquo;onglet <strong>Arri\u00e8re-plan<\/strong>.<\/p>\n<figure id=\"attachment_88031\" aria-describedby=\"caption-attachment-88031\" style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88031 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/background-tab.png\" alt=\"Image d'arri\u00e8re-plan WordPress dans l'\u00e9diteur\" width=\"1885\" height=\"940\"><figcaption id=\"caption-attachment-88031\" class=\"wp-caption-text\">Image d&rsquo;arri\u00e8re-plan WordPress dans l&rsquo;\u00e9diteur<\/figcaption><\/figure>\n<p>Comme alternative, si vous pouvez s\u00e9lectionner <strong>Apparence &gt; Arri\u00e8re-plan<\/strong>, vous pouvez l&rsquo;utiliser pour un itin\u00e9raire plus direct vers ce r\u00e9glage.<\/p>\n<figure id=\"attachment_88030\" aria-describedby=\"caption-attachment-88030\" style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88030 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-back.png\" alt=\"Cliquez sur le lien \u00ab Arri\u00e8re-plan \u00bb dans le menu Apparence\" width=\"1302\" height=\"905\"><figcaption id=\"caption-attachment-88030\" class=\"wp-caption-text\">Cliquez sur le lien \u00ab Arri\u00e8re-plan \u00bb dans le menu Apparence<\/figcaption><\/figure>\n<p>La zone de personnalisation de l&rsquo;<strong>arri\u00e8re-plan<\/strong> g\u00e8re les \u00e9l\u00e9ments d&rsquo;arri\u00e8re-plan de l&rsquo;ensemble de votre site web.<\/p>\n<p>Cliquez sur le bouton <strong>S\u00e9lectionner une image<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_88029\" aria-describedby=\"caption-attachment-88029\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88029 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-background.png\" alt=\"Cliquez sur le bouton \u00ab S\u00e9lectionner une image \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88029\" class=\"wp-caption-text\">Cliquez sur le bouton \u00ab S\u00e9lectionner une image \u00bb<\/figcaption><\/figure>\n<p>Dans la fen\u00eatre <strong>S\u00e9lectionner une image<\/strong>, choisissez une image qui conviendra parfaitement comme arri\u00e8re-plan pour votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/tendances-web-design\/\">marque et le style de votre site web<\/a>. En g\u00e9n\u00e9ral, un motif de couleur neutre avec une nuance noire, blanche ou grise permet g\u00e9n\u00e9ralement de garantir que la plupart de votre texte et de votre contenu sont toujours beaux avec l&rsquo;arri\u00e8re-plan.<\/p>\n<p>Une fois que vous avez s\u00e9lectionn\u00e9 votre image, cliquez sur le bouton <strong>Choisir une image<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_88028\" aria-describedby=\"caption-attachment-88028\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88028 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choose-the-im.png\" alt=\"Choisissez l'image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88028\" class=\"wp-caption-text\">Choisissez l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>L&rsquo;arri\u00e8re-plan que vous avez impl\u00e9ment\u00e9 appara\u00eet maintenant dans l&rsquo;aper\u00e7u du site web.<\/p>\n<p>Voyez si votre contenu se d\u00e9marque toujours et semble pr\u00e9sentable avec l&rsquo;image choisie. Parfois, vous constaterez peut-\u00eatre que vous devez compl\u00e8tement remplacer l&rsquo;arri\u00e8re-plan ou modifier des \u00e9l\u00e9ments tels que le texte ou les couleurs des liens.<\/p>\n<p>Une petite <a href=\"https:\/\/kinsta.com\/fr\/blog\/regenerer-miniatures\/\">miniature<\/a> de l&rsquo;arri\u00e8re-plan appara\u00eet \u00e9galement dans le panneau <strong>R\u00e9glages<\/strong>, vous indiquant que l&rsquo;image a \u00e9t\u00e9 impl\u00e9ment\u00e9e.<\/p>\n<figure id=\"attachment_88026\" aria-describedby=\"caption-attachment-88026\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88026 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/thats-where-it-is.png\" alt=\"Miniatures d'image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88026\" class=\"wp-caption-text\">Miniatures d&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Quelques r\u00e9glages suppl\u00e9mentaires sont disponibles pour les arri\u00e8re-plans WordPress, y compris le champ <strong>Pr\u00e9r\u00e9glage<\/strong>.<\/p>\n<p>Cliquez sur le champ <strong>Pr\u00e9r\u00e9glage<\/strong> pour modifier le formatage de l&rsquo;image \u00e0 l&rsquo;aide de designs et d&rsquo;alignements pr\u00e9d\u00e9finis.<\/p>\n<figure id=\"attachment_88025\" aria-describedby=\"caption-attachment-88025\" style=\"width: 1890px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88025 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/preset.png\" alt=\"L'option \u00ab Pr\u00e9r\u00e9glage \u00bb pour les images d'arri\u00e8re-plan WordPress\" width=\"1890\" height=\"940\"><figcaption id=\"caption-attachment-88025\" class=\"wp-caption-text\">L&rsquo;option \u00ab Pr\u00e9r\u00e9glage \u00bb pour les images d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Vous pouvez choisir parmi les pr\u00e9r\u00e9glages suivants :<\/p>\n<ul>\n<li><strong>Par d\u00e9faut :<\/strong> C&rsquo;est g\u00e9n\u00e9ralement la m\u00eame chose que <strong>R\u00e9p\u00e9ter<\/strong>, mais cela peut d\u00e9pendre de votre th\u00e8me. Le r\u00e9glage par d\u00e9faut fonctionne g\u00e9n\u00e9ralement mieux, mais cela d\u00e9pend de l&rsquo;image utilis\u00e9e.<\/li>\n<li><strong>Remplir l&rsquo;\u00e9cran :<\/strong> Ce r\u00e9glage \u00e9tire l&rsquo;image pour garantir que toutes les parties de l&rsquo;\u00e9cran sont couvertes, m\u00eame si cela signifie recadrer l&rsquo;image, de sorte qu&rsquo;elle d\u00e9borde de l&rsquo;\u00e9cran. Cela fonctionne bien pour de nombreuses images en haute d\u00e9finition, mais pourrait provoquer un flou avec des images en basse d\u00e9finition.<\/li>\n<li><strong>Ajuster \u00e0 l&rsquo;\u00e9cran :<\/strong> Ceci maintient le rapport hauteur \/ largeur de la photo d&rsquo;origine et tente d&rsquo;utiliser ce rapport pour s&rsquo;adapter \u00e0 l&rsquo;image d&rsquo;\u00e9cran actuelle. Il fait un bon travail pour garder l&rsquo;image pr\u00e8s de son \u00e9tat d&rsquo;origine mais peut ne pas couvrir toute la zone d&rsquo;arri\u00e8re-plan.<\/li>\n<li><strong>R\u00e9p\u00e9ter :<\/strong> Cela utilise des parties de la fonction <strong>Remplir l&rsquo;\u00e9cran<\/strong>, agrandissant et \u00e9tirant l&rsquo;image, mais cela r\u00e9p\u00e8te \u00e9galement l&rsquo;image lorsqu&rsquo;elle ne parvient pas \u00e0 couvrir tout l&rsquo;\u00e9cran. Pour les motifs, cela a g\u00e9n\u00e9ralement l&rsquo;air g\u00e9nial. Mais pour certaines images, cela peut produire une ligne dure entre les images r\u00e9p\u00e9t\u00e9es.<\/li>\n<li><strong>Personnalis\u00e9 :<\/strong> Ce r\u00e9glage vous donne le plus de contr\u00f4le sur l&rsquo;arri\u00e8re-plan, offrant plusieurs options pour personnaliser la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress, comme la fa\u00e7on dont elle se r\u00e9p\u00e8te sur la page, s&rsquo;\u00e9tire ou se d\u00e9place lorsque l&rsquo;utilisateur fait d\u00e9filer la page.<\/li>\n<\/ul>\n<p>Il n&rsquo;y a pas de r\u00e8gle pour d\u00e9terminer lequel des pr\u00e9r\u00e9glages fonctionne le mieux car les images sont de tailles, de r\u00e9solutions et de d\u00e9tails diff\u00e9rents. Par cons\u00e9quent, il est pr\u00e9f\u00e9rable de commencer par le pr\u00e9r\u00e9glage par <strong>d\u00e9faut<\/strong>, puis de tester chacun des autres pr\u00e9r\u00e9glages pour voir lequel convient le mieux \u00e0 votre image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Si tout le reste \u00e9choue, acc\u00e9dez au r\u00e9glage <strong>Personnalis\u00e9<\/strong> pour \u00eatre vraiment pr\u00e9cis dans vos choix.<\/p>\n<figure id=\"attachment_88024\" aria-describedby=\"caption-attachment-88024\" style=\"width: 1406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88024 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fill.png\" alt=\"Pr\u00e9r\u00e9glage \u00ab Remplir l'\u00e9cran pour les images d'arri\u00e8re-plan WordPress\" width=\"1406\" height=\"940\"><figcaption id=\"caption-attachment-88024\" class=\"wp-caption-text\">Pr\u00e9r\u00e9glage \u00ab Remplir l&rsquo;\u00e9cran pour les images d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Le pr\u00e9r\u00e9glage <strong>Ajuster \u00e0 l&rsquo;\u00e9cran<\/strong> ne le fait pas tout \u00e0 fait pour cette image, principalement parce que l&rsquo;image d&rsquo;origine est beaucoup plus longue que large, laissant un espace important vers la droite. Je pourrais changer la <strong>position de l&rsquo;image<\/strong> au <strong>centre<\/strong>, mais cela laisserait tr\u00e8s probablement un espace blanc sur les c\u00f4t\u00e9s.<\/p>\n<figure id=\"attachment_88023\" aria-describedby=\"caption-attachment-88023\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88023 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fit-to.png\" alt=\"Le pr\u00e9r\u00e9glage \u00ab Ajuster \u00e0 l'\u00e9cran \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88023\" class=\"wp-caption-text\">Le pr\u00e9r\u00e9glage \u00ab Ajuster \u00e0 l&rsquo;\u00e9cran \u00bb<\/figcaption><\/figure>\n<p>Le r\u00e9glage suivant \u00e0 prendre en compte est l&rsquo;outil de <strong>Position de l&rsquo;image<\/strong>. Cliquez sur les fl\u00e8ches pour d\u00e9placer votre image d&rsquo;arri\u00e8re-plan, en ajustant l&rsquo;orientation pour placer le focus de l&rsquo;image vers le centre ou pour remplir l&rsquo;\u00e9cran.<\/p>\n<p>Tout comme les <strong>Pr\u00e9r\u00e9glages<\/strong>, l\u2019outil <strong>Position de l&rsquo;image<\/strong> n\u00e9cessite un processus de tests et de v\u00e9rification de votre travail, car l&rsquo;image d&rsquo;origine et son contenu dictent son aspect.<\/p>\n<figure id=\"attachment_88022\" aria-describedby=\"caption-attachment-88022\" style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88022 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/moves-around.png\" alt=\"Position de l'image d'arri\u00e8re-plan WordPress\" width=\"1886\" height=\"940\"><figcaption id=\"caption-attachment-88022\" class=\"wp-caption-text\">Position de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Ensuite, il y a une case \u00e0 cocher pour faire d\u00e9filer l&rsquo;image d&rsquo;arri\u00e8re-plan <strong>avec la page<\/strong>.<\/p>\n<p>Lorsque cette case est coch\u00e9e, l&rsquo;image d&rsquo;arri\u00e8re-plan colle au contenu de premier plan et d\u00e9file avec l&rsquo;utilisateur \u00e0 mesure que cette personne se d\u00e9place vers le haut ou vers le bas sur la page.<\/p>\n<figure id=\"attachment_88021\" aria-describedby=\"caption-attachment-88021\" style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88021 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/scroll.png\" alt=\"Activer l'option \u00ab Faire d\u00e9filer avec la page \u00bb\" width=\"1885\" height=\"940\"><figcaption id=\"caption-attachment-88021\" class=\"wp-caption-text\">Activer l&rsquo;option \u00ab Faire d\u00e9filer avec la page \u00bb<\/figcaption><\/figure>\n<p>D\u00e9cocher cette case a tendance \u00e0 changer l&rsquo;orientation g\u00e9n\u00e9rale de l&rsquo;image d&rsquo;arri\u00e8re-plan, mais sa caract\u00e9ristique dominante est de dire \u00e0 l&rsquo;arri\u00e8re-plan de rester statique pendant que l&rsquo;utilisateur fait d\u00e9filer la page.<\/p>\n<p>Les \u00e9l\u00e9ments de contenu de premier plan (comme les <a href=\"https:\/\/kinsta.com\/fr\/blog\/conversions-pages-produits-woocommerce\/\">produits<\/a> dans ce cas) glissent sur l&rsquo;image d&rsquo;arri\u00e8re-plan, cr\u00e9ant un effet attrayant<\/p>\n<figure id=\"attachment_88020\" aria-describedby=\"caption-attachment-88020\" style=\"width: 1878px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88020 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-scroll.png\" alt=\"D\u00e9sactiver l'option \u00ab Faire d\u00e9filer avec la page \u00bb\" width=\"1878\" height=\"940\"><figcaption id=\"caption-attachment-88020\" class=\"wp-caption-text\">D\u00e9sactiver l&rsquo;option \u00ab Faire d\u00e9filer avec la page \u00bb<\/figcaption><\/figure>\n<h4><strong>Travailler avec un pr\u00e9r\u00e9glage personnalis\u00e9<\/strong><\/h4>\n<p>Lorsque vous optez pour quelque chose en plus du pr\u00e9r\u00e9glage <strong>personnalis\u00e9<\/strong>, vous n&rsquo;obtenez pas autant de r\u00e9glages suppl\u00e9mentaires \u00e0 configurer.<\/p>\n<p>Cependant, le choix du pr\u00e9r\u00e9glage personnalis\u00e9 ouvre plusieurs autres champs \u00e0 prendre en compte.<\/p>\n<p>Par exemple, vous pouvez choisir de <strong>Remplir l&rsquo;\u00e9cran<\/strong> ou d\u2019<strong>Ajuster \u00e0 l&rsquo;\u00e9cran<\/strong>, puis de le combiner avec une image d&rsquo;arri\u00e8re-plan r\u00e9p\u00e9t\u00e9e ou non r\u00e9p\u00e9t\u00e9e, en combinant les \u00e9l\u00e9ments des pr\u00e9r\u00e9glages d&rsquo;avant. Et vous obtenez toujours l&rsquo;option <strong>Faire d\u00e9filer avec la page<\/strong>.<\/p>\n<figure id=\"attachment_88019\" aria-describedby=\"caption-attachment-88019\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88019 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-one.png\" alt=\"Pr\u00e9r\u00e9glages et tailles d'image pour les images d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88019\" class=\"wp-caption-text\">Pr\u00e9r\u00e9glages et tailles d&rsquo;image pour les images d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>V\u00e9rifiez s&rsquo;il est possible d&rsquo;utiliser l&rsquo;image d&rsquo;origine sans aucune modification ni aucun r\u00e9glage. Parfois, la photo originale est une correspondance presque parfaite \u00e0 utiliser comme arri\u00e8re-plan, alors pourquoi jouer avec ce qui est d\u00e9j\u00e0 pr\u00eat \u00e0 \u00eatre utilis\u00e9 ?<\/p>\n<p>Cependant, sa taille peut \u00e9galement \u00eatre <a href=\"https:\/\/kinsta.com\/fr\/blog\/test-vitesse-site-web\/\">trop grande pour votre site web<\/a>, ou peut-\u00eatre que le rapport hauteur\/largeur ne convient pas. Quoi qu&rsquo;il en soit, nous vous sugg\u00e9rons d&rsquo;exp\u00e9rimenter ce r\u00e9glage pour d\u00e9terminer s&rsquo;il vous convient.<\/p>\n<figure id=\"attachment_88018\" aria-describedby=\"caption-attachment-88018\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88018 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-repeat-or.png\" alt=\"D\u00e9finition de la taille de l'image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88018\" class=\"wp-caption-text\">D\u00e9finition de la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Une fois que vous avez choisi vos r\u00e9glages d&rsquo;arri\u00e8re-plan parfaits (pour ce tutoriel, l&rsquo;option Par d\u00e9faut a l&rsquo;air bien), cliquez sur le bouton <strong>Publier<\/strong> pour afficher les modifications sur votre site web.<\/p>\n<figure id=\"attachment_88017\" aria-describedby=\"caption-attachment-88017\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88017 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/publish-to-page.png\" alt=\"Cliquer sur le bouton \u00ab Publier \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88017\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Publier \u00bb<\/figcaption><\/figure>\n<p>Acc\u00e9dez \u00e0 l\u2019interface publique de votre site pour voir l&rsquo;arri\u00e8re-plan en action.<\/p>\n<p>La <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-page-daccueil-wordpress\/\">page d&rsquo;accueil<\/a> est un excellent point de d\u00e9part. Vous remarquerez que la zone d&rsquo;en-t\u00eate et l&rsquo;image de bienvenue n&rsquo;ont pas d&rsquo;arri\u00e8re-plan. En effet, l&rsquo;image de bienvenue en haut du site recouvre d\u00e9j\u00e0 toute la partie horizontale de l&rsquo;\u00e9cran en tant qu&rsquo;image en plein \u00e9cran.<\/p>\n<p>En ce qui concerne l&rsquo;en-t\u00eate et le <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/\">menu<\/a>, vous apprendrez \u00e0 configurer ces arri\u00e8re-plans dans certains des tutoriels suivants.<\/p>\n<figure id=\"attachment_88027\" aria-describedby=\"caption-attachment-88027\" style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88027 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-back.png\" alt=\"Voir l'image d'arri\u00e8re-plan WordPress\" width=\"1548\" height=\"1885\"><figcaption id=\"caption-attachment-88027\" class=\"wp-caption-text\">Voir l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Gardez \u00e0 l&rsquo;esprit que l&rsquo;arri\u00e8re-plan g\u00e9n\u00e9ral personnalis\u00e9 de WordPress s&rsquo;active sur chaque page et article de votre site. C&rsquo;est une fonctionnalit\u00e9 globale pour ceux qui veulent un moyen rapide de faire correspondre leur site \u00e0 leur marque et d&rsquo;ajouter une touche de brillant.<\/p>\n<p>Par exemple, aller \u00e0 la page <strong>Shop<\/strong> sur ce site r\u00e9v\u00e8le l\u2019arri\u00e8re-plan derri\u00e8re la s\u00e9lection de produits.<\/p>\n<figure id=\"attachment_88016\" aria-describedby=\"caption-attachment-88016\" style=\"width: 1571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88016 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/every-page.png\" alt=\"L'image d'arri\u00e8re-plan WordPress sur une autre page\" width=\"1571\" height=\"1266\"><figcaption id=\"caption-attachment-88016\" class=\"wp-caption-text\">L&rsquo;image d&rsquo;arri\u00e8re-plan WordPress sur une autre page<\/figcaption><\/figure>\n<h4><strong>Comment d\u00e9finir une couleur d&rsquo;arri\u00e8re-plan au lieu d&rsquo;une image pour l&rsquo;ensemble de votre site web<\/strong><\/h4>\n<p>Le processus d&rsquo;activation d&rsquo;une couleur d&rsquo;arri\u00e8re-plan sur l&rsquo;ensemble de votre site web n&rsquo;est pas tr\u00e8s diff\u00e9rent de celui lorsque vous activez une image d&rsquo;arri\u00e8re-plan. Commencez par aller dans <strong>Apparence &gt; Arri\u00e8re-plan<\/strong> dans le tableau de bord, puis recherchez le champ <strong>Couleur d&rsquo;arri\u00e8re-plan<\/strong>.<\/p>\n<p>Cliquez sur le bouton <strong>S\u00e9lectionner une couleur<\/strong> pour ouvrir plus de r\u00e9glages afin de choisir et de changer diff\u00e9rentes couleurs pour votre arri\u00e8re-plan.<\/p>\n<p>\u00a0<\/p>\n<figure id=\"attachment_88314\" aria-describedby=\"caption-attachment-88314\" style=\"width: 1906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88314 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bacgkround-select.jpg\" alt=\"S\u00e9lection d'une couleur unie comme arri\u00e8re-plan\" width=\"1906\" height=\"940\"><figcaption id=\"caption-attachment-88314\" class=\"wp-caption-text\">S\u00e9lection d&rsquo;une couleur unie comme arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Le panneau de couleurs offre plusieurs options pour vous permettre de <a href=\"https:\/\/kinsta.com\/fr\/blog\/palettes-couleurs-site\/\">choisir une couleur<\/a>. La premi\u00e8re consiste \u00e0 saisir ou \u00e0 coller un code couleur. Toutes les couleurs ont des codes de couleur uniques, et vous pouvez trouver ces couleurs et leurs codes associ\u00e9s avec une recherche rapide sur Internet.<\/p>\n<p>L&rsquo;autre option consiste \u00e0 cliquer dans le panneau de couleurs pour trouver la couleur parfaite pour l&rsquo;arri\u00e8re-plan. Ils ont m\u00eame des nuances de couleurs communes vers le bas du panneau si vous pr\u00e9f\u00e9rez prendre l&rsquo;une des couleurs les plus simples.<\/p>\n<p>Pour activer une couleur d&rsquo;arri\u00e8re-plan, assurez-vous que la couleur est s\u00e9lectionn\u00e9e et affich\u00e9e dans l&rsquo;aper\u00e7u <strong>S\u00e9lectionner une couleur<\/strong>.<\/p>\n<figure id=\"attachment_88313\" aria-describedby=\"caption-attachment-88313\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88313 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bg-col.jpg\" alt=\"Choisir une \u00ab couleur d'arri\u00e8re-plan \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88313\" class=\"wp-caption-text\">Choisir une \u00ab couleur d&rsquo;arri\u00e8re-plan \u00bb<\/figcaption><\/figure>\n<p>Vous devriez voir la couleur d&rsquo;arri\u00e8re-plan dans l&rsquo;aper\u00e7u de l\u2019outil de <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\">personnalisation de WordPress<\/a>. Sinon, cela signifie probablement que vous avez install\u00e9 une image d\u2019arri\u00e8re-plan qui remplace la couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Tout ce que vous avez \u00e0 faire pour r\u00e9v\u00e9ler la couleur d&rsquo;arri\u00e8re-plan est de cliquer sur le bouton <strong>Supprimer<\/strong> sous l&rsquo;aper\u00e7u de <strong>l&rsquo;image d&rsquo;arri\u00e8re-plan<\/strong>.<\/p>\n<figure id=\"attachment_88312\" aria-describedby=\"caption-attachment-88312\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88312 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/remove-image.jpg\" alt=\"Supprimer l'image d\u2019arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88312\" class=\"wp-caption-text\">Supprimer l&rsquo;image d\u2019arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>D\u00e9sormais, la couleur appara\u00eet dans l&rsquo;int\u00e9gralit\u00e9 de votre site, derri\u00e8re le contenu. Tout comme vous le feriez avec une image d\u2019arri\u00e8re-plan, il est prudent de parcourir votre site web pour vous assurer que tous les textes, images et liens sont toujours visibles avec le nouvel arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88311\" aria-describedby=\"caption-attachment-88311\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88311 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/once-removed.jpg\" alt=\"Aper\u00e7u d'un arri\u00e8re-plan WordPress en orange uni\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88311\" class=\"wp-caption-text\">Aper\u00e7u d&rsquo;un arri\u00e8re-plan WordPress en orange uni<\/figcaption><\/figure>\n<h3><strong>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 une page WordPress<\/strong><\/h3>\n<p>Mais que faire si vous souhaitez ins\u00e9rer une image sur WordPress pour appara\u00eetre en arri\u00e8re-plan sur une seule page WordPress ? La section pr\u00e9c\u00e9dente d\u00e9crit les r\u00e9glages globaux d&rsquo;une image d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;\u00e9chelle du site.<\/p>\n<p><strong>Consultez notre <a href=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\">guide vid\u00e9o<\/a> sur l&rsquo;ajout d&rsquo;images d&rsquo;arri\u00e8re-plan aux pages uniques, aux articles et aux blocs de contenu de WordPress<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\"><\/kinsta-video>\n<p>De nombreuses personnes aiment ajouter des arri\u00e8re-plans \u00e0 leurs pages, car vous pouvez incorporer un certain th\u00e8me ou une certaine sensation \u00e0 une page qui s&rsquo;applique au contenu. Par exemple, une page <a href=\"https:\/\/kinsta.com\/fr\/a-propos-de-nous\/\">\u00c0 propos de nous<\/a> peut avoir un arri\u00e8re-plan \u00e0 Los Angeles si l&rsquo;entreprise est \u00e0 Los Angeles. Ou une introduction au livre d&rsquo;un auteur pourrait inclure un arri\u00e8re-plan qui correspond au th\u00e8me de l&rsquo;histoire.<\/p>\n<p>Dans cette section, nous expliquerons comment ajouter une image d&rsquo;arri\u00e8re-plan WordPress \u00e0 une page en utilisant une m\u00e9thode principale et quelques alternatives si cela ne vous d\u00e9range pas de d\u00e9penser de l&rsquo;argent sur une extension ou d&rsquo;opter pour un constructeur de page.<\/p>\n<p><strong>Note :<\/strong> peu importe que vous utilisiez l&rsquo;\u00e9diteur Gutenberg ou l\u2019\u00e9diteur WordPress classique.<\/p>\n<p>Pour les arri\u00e8re-plans sp\u00e9cifiques \u00e0 une page, ces m\u00e9thodes semblent le mieux fonctionner :<\/p>\n<ul>\n<li>Ajouter un arri\u00e8re-plan de page unique avec du <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">CSS personnalis\u00e9<\/a>.<\/li>\n<li>Utiliser une extension qui permet des arri\u00e8re-plans de page individuelles.<\/li>\n<li>Incorporer un arri\u00e8re-plan personnalis\u00e9 sur chaque page \u00e0 l&rsquo;aide d&rsquo;un constructeur de page.<\/li>\n<\/ul>\n<p>Ajouter votre propre CSS personnalis\u00e9 \u00e0 une page implique de trouver l&rsquo;ID de classe de cette page et d&rsquo;appeler une URL d&rsquo;arri\u00e8re-plan, dans le module CSS personnalis\u00e9, dans les r\u00e9glages de la page WordPress. Heureusement, il n&rsquo;est pas si difficile de d\u00e9terminer l&rsquo;ID de classe d&rsquo;une page, \u00e9tant donn\u00e9 que nous pouvons le rechercher, ou vous savez peut-\u00eatre d\u00e9j\u00e0 ce que c&rsquo;est.<\/p>\n<p>Acc\u00e9dez \u00e0 la page de votre site o\u00f9 vous souhaitez un arri\u00e8re-plan uniquement pour cette page.<\/p>\n<figure id=\"attachment_89232\" aria-describedby=\"caption-attachment-89232\" style=\"width: 1473px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89232 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/this-is-the-page.png\" alt=\"Ajout d'une image d'arri\u00e8re-plan WordPress sp\u00e9cifique \u00e0 une page\" width=\"1473\" height=\"835\"><figcaption id=\"caption-attachment-89232\" class=\"wp-caption-text\">Ajout d&rsquo;une image d&rsquo;arri\u00e8re-plan WordPress sp\u00e9cifique \u00e0 une page<\/figcaption><\/figure>\n<p>Cliquez avec le bouton droit n&rsquo;importe o\u00f9 sur la page pour afficher un menu d\u00e9roulant sur votre \u00e9cran. S\u00e9lectionnez l&rsquo;outil Inspecter au bas du menu d\u00e9roulant.<\/p>\n<p>Le module Inspecter affiche le code de la page elle-m\u00eame, ainsi que le CSS personnalis\u00e9 utilis\u00e9 globalement pour votre site web. C&rsquo;est une zone utile pour trouver des informations sur une page ou un article sur votre site.<\/p>\n<figure id=\"attachment_89231\" aria-describedby=\"caption-attachment-89231\" style=\"width: 1106px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89231 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inspect-the-page.png\" alt=\"Inspecter une page web\" width=\"1106\" height=\"825\"><figcaption id=\"caption-attachment-89231\" class=\"wp-caption-text\">Inspecter une page web<\/figcaption><\/figure>\n<p>La bo\u00eete Inspecter contient des lignes de code de la page, mais nous ne sommes int\u00e9ress\u00e9s que par la balise de classe attribu\u00e9e \u00e0 cette page en particulier. Pour clarifier, chaque page WordPress a une balise de classe comme code d&rsquo;identification.<\/p>\n<p>Utilisez la fonction de recherche et saisissez <code>body<\/code> ou <code>class<\/code> pour localiser la ligne de code avec la balise <code>page-id<\/code>.<\/p>\n<p>Dans ce cas, l&rsquo;ID est <code>page-id-352<\/code>, mais le v\u00f4tre sera diff\u00e9rent.<\/p>\n<p>Vous souhaitez copier toute la partie du code avec le mot-cl\u00e9 <code>page-id-#<\/code>, y compris les tirets.<\/p>\n<figure id=\"attachment_89230\" aria-describedby=\"caption-attachment-89230\" style=\"width: 1251px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89230 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/body-class.png\" alt=\"Trouver l'ID de page dans WordPress\" width=\"1251\" height=\"657\"><figcaption id=\"caption-attachment-89230\" class=\"wp-caption-text\">Trouver l&rsquo;ID de page dans WordPress<\/figcaption><\/figure>\n<p>Avec l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/obtenir-id-article-wordpress\/\">ID de page<\/a> enregistr\u00e9 quelque part pour une utilisation dans les prochaines \u00e9tapes, revenez \u00e0 votre tableau de bord WordPress et cliquez sur <strong>Apparence &gt; Personnaliser<\/strong>.<\/p>\n<figure id=\"attachment_89229\" aria-describedby=\"caption-attachment-89229\" style=\"width: 1348px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89229 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/custom-is-s-s.png\" alt=\"Acc\u00e9dez \u00e0 la personnalisation de th\u00e8me\" width=\"1348\" height=\"905\"><figcaption id=\"caption-attachment-89229\" class=\"wp-caption-text\">Acc\u00e9dez \u00e0 la personnalisation de th\u00e8me<\/figcaption><\/figure>\n<p>S\u00e9lectionnez l&rsquo;onglet <strong>CSS suppl\u00e9mentaire<\/strong> dans la personnalisation de WordPress.<\/p>\n<figure id=\"attachment_89228\" aria-describedby=\"caption-attachment-89228\" style=\"width: 1508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89228 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css.png\" alt=\"Section \u00ab CSS suppl\u00e9mentaire \u00bb dans la personnalisation\" width=\"1508\" height=\"916\"><figcaption id=\"caption-attachment-89228\" class=\"wp-caption-text\">Section \u00ab CSS suppl\u00e9mentaire \u00bb dans la personnalisation<\/figcaption><\/figure>\n<p>Cette section vous permet de saisir ou de coller tout CSS personnalis\u00e9 des \u00e9l\u00e9ments de votre site web que vous souhaitez manipuler. Dans ce cas, il est pratique pour remplacer l&rsquo;image d&rsquo;arri\u00e8re-plan par d\u00e9faut et activer une image d&rsquo;arri\u00e8re-plan pour une page et pas pour les autres.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Collez le code suivant dans le champ CSS suppl\u00e9mentaire, mais n&rsquo;oubliez pas de remplacer le \u00ab <strong>#<\/strong> \u00bb par le nombre r\u00e9el que vous avez r\u00e9cup\u00e9r\u00e9 comme ID de page dans les \u00e9tapes pr\u00e9c\u00e9dentes. De plus, vous devez mettre une URL d&rsquo;image r\u00e9elle \u00e0 la place du texte de remplissage que nous y avons (<\/span><code>http:\/\/YOURIMAGEURL.jpeg<\/code><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">).<\/span><\/p>\n<pre><code class=\"language-html\">body.page-id-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Pour cet exemple, l&rsquo;ID de page est renseign\u00e9 comme 352 et nous avons une URL d&rsquo;image d&rsquo;arri\u00e8re-plan coll\u00e9e depuis <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\">notre m\u00e9diath\u00e8que<\/a>.<\/p>\n<p>Si n\u00e9cessaire, modifiez les r\u00e9glages d&rsquo;arri\u00e8re-plan personnalis\u00e9s si vous ne parvenez pas \u00e0 ajuster l&rsquo;image d&rsquo;arri\u00e8re-plan. Par exemple, vous souhaiterez peut-\u00eatre modifier des \u00e9l\u00e9ments tels que la taille, le fichier joint ou la position de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress. Sinon, laissez-les tous tels qu&rsquo;ils sont dans l&rsquo;exemple de code.<\/p>\n<figure id=\"attachment_89227\" aria-describedby=\"caption-attachment-89227\" style=\"width: 1485px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89227 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insert-it.png\" alt=\"Ajouter du CSS personnalis\u00e9 \u00e0 un site WordPress\" width=\"1485\" height=\"923\"><figcaption id=\"caption-attachment-89227\" class=\"wp-caption-text\">Ajouter du CSS personnalis\u00e9 \u00e0 un site WordPress<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>Publier<\/strong> lorsque vous \u00eates satisfait du CSS personnalis\u00e9.<\/p>\n<figure id=\"attachment_89226\" aria-describedby=\"caption-attachment-89226\" style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89226 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-the-thing.png\" alt=\"Cliquez sur le bouton \u00ab Publier \u00bb\" width=\"1512\" height=\"827\"><figcaption id=\"caption-attachment-89226\" class=\"wp-caption-text\">Cliquez sur le bouton \u00ab Publier \u00bb<\/figcaption><\/figure>\n<p>Avec ce CSS personnalis\u00e9, la page sp\u00e9cifi\u00e9e comprend une image d&rsquo;arri\u00e8re-plan utilisant les r\u00e9glages de dimensionnement et de positionnement du code. Aucune autre page de votre site n&rsquo;affichera le m\u00eame arri\u00e8re-plan, sauf si vous r\u00e9p\u00e9tez le CSS pour diff\u00e9rents <a href=\"https:\/\/kinsta.com\/fr\/blog\/obtenir-id-article-wordpress\/\">ID de page<\/a>.<\/p>\n<figure id=\"attachment_89225\" aria-describedby=\"caption-attachment-89225\" style=\"width: 1335px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89225 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-just-for-page.png\" alt=\"L'image d'arri\u00e8re-plan s'affiche maintenant sur la page\" width=\"1335\" height=\"899\"><figcaption id=\"caption-attachment-89225\" class=\"wp-caption-text\">L&rsquo;image d&rsquo;arri\u00e8re-plan s&rsquo;affiche maintenant sur la page<\/figcaption><\/figure>\n<p>Comme mentionn\u00e9 pr\u00e9c\u00e9demment, vos autres options pour ajouter un arri\u00e8re-plan unique \u00e0 une page WordPress incluent l&rsquo;utilisation d&rsquo;un constructeur de page ou d&rsquo;une extension qui permet des images d&rsquo;arri\u00e8re-plan sur des pages individuelles.<\/p>\n<p>Cependant, le moyen le moins cher et le plus rapide de placer une image d&rsquo;arri\u00e8re-plan sur une page individuelle consiste \u00e0 utiliser la m\u00e9thode de code CSS indiqu\u00e9e ci-dessus.<\/p>\n<h3><strong>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 un article WordPress<\/strong><\/h3>\n<p>La plupart des images d&rsquo;arri\u00e8re-plan sont ins\u00e9r\u00e9es derri\u00e8re les pages WordPress ou chaque page d&rsquo;un site web.<\/p>\n<p>La fonctionnalit\u00e9 d&rsquo;arri\u00e8re-plan personnalis\u00e9 par d\u00e9faut de WordPress n&rsquo;a rien \u00e0 voir avec les articles individuels, outre le fait que cet arri\u00e8re-plan appara\u00eetra \u00e9galement pour les articles de blog. Ce n&rsquo;est pas id\u00e9al pour toutes les organisations, car diff\u00e9rents articles de blog peuvent avoir des sujets radicalement diff\u00e9rents.<\/p>\n<p>Ces blogs pourraient b\u00e9n\u00e9ficier de leurs propres images uniques d&rsquo;arri\u00e8re-plan. Cependant, les articles WordPress n&rsquo;ont pas leur propre r\u00e9glage d&rsquo;image d&rsquo;arri\u00e8re-plan, ce qui les rend un peu plus d\u00e9licats.<\/p>\n<p>Par cons\u00e9quent, nous avons quelques options \u00e0 prendre en compte lors de l&rsquo;ajout d&rsquo;une image d&rsquo;arri\u00e8re-plan \u00e0 un article (vous remarquerez qu&rsquo;elles sont les m\u00eames que lorsque vous travaillez avec des images d&rsquo;arri\u00e8re-plan sp\u00e9cifiques \u00e0 une page):<\/p>\n<ul>\n<li>Ins\u00e9rer une image d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;aide de CSS personnalis\u00e9.<\/li>\n<li>Utiliser une extension pour impl\u00e9menter un arri\u00e8re-plan sur des articles individuels.<\/li>\n<li>Installer un constructeur de page visuel pour les arri\u00e8re-plans d\u2019article.<\/li>\n<\/ul>\n<p>Comme la section pr\u00e9c\u00e9dente sur les arri\u00e8re-plans de page uniques, vous pouvez ajouter un arri\u00e8re-plan sp\u00e9cifique \u00e0 un article \u00e0 l&rsquo;aide d&rsquo;un constructeur de page ou d&rsquo;une extension.<\/p>\n<p>\u00c9tant donn\u00e9 que cr\u00e9er un arri\u00e8re-plan sp\u00e9cifique \u00e0 un article n&rsquo;est pas tr\u00e8s diff\u00e9rent d&rsquo;un arri\u00e8re-plan sp\u00e9cifique \u00e0 une page, nous n&rsquo;aborderons que bri\u00e8vement les \u00e9tapes \u00e0 suivre pour g\u00e9rer ce processus pour un article individuel.<\/p>\n<p>Lorsque vous utilisez un CSS personnalis\u00e9 pour impl\u00e9menter un arri\u00e8re-plan sp\u00e9cifique \u00e0 un article, vous utilisez le m\u00eame code que vous le feriez pour l&rsquo;arri\u00e8re-plan de page, \u00e0 une diff\u00e9rence pr\u00e8s : vous devez trouver l&rsquo;ID de l\u2019article au lieu de l&rsquo;ID de page.<\/p>\n<p>Par cons\u00e9quent, ouvrez l\u2019interface publique d&rsquo;un article WordPress dans lequel vous souhaitez ins\u00e9rer un arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89281\" aria-describedby=\"caption-attachment-89281\" style=\"width: 1294px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89281 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-actual-post.png\" alt=\"Image d'arri\u00e8re-plan WordPress pour les articles\" width=\"1294\" height=\"883\"><figcaption id=\"caption-attachment-89281\" class=\"wp-caption-text\">Image d&rsquo;arri\u00e8re-plan WordPress pour les articles<\/figcaption><\/figure>\n<p>Cliquez avec le bouton droit sur l\u2019article et choisissez l&rsquo;option Inspecter. Effectuez une recherche dans le code pour localiser la section de classe de corps dans le code. Recherchez la partie <code>postid-#<\/code>, c&rsquo;est l&rsquo;ID de l\u2019article que vous devez ins\u00e9rer dans le CSS personnalis\u00e9.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-91278 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/find-post-id-1.png\" alt=\"find post id\" width=\"735\" height=\"767\"><\/p>\n<p>Vous remarquerez que la mise en forme de l&rsquo;ID de l\u2019article est l\u00e9g\u00e8rement diff\u00e9rente dans cet exemple par rapport \u00e0 l&rsquo;ID de page, o\u00f9 la balise <code>postid-#<\/code> n&rsquo;a pas de tiret entre \u00ab\u00a0post\u00a0\u00bb et \u00ab\u00a0id\u00a0\u00bb comme c&rsquo;est le cas avec <code>page-id-#<\/code>. De plus, ce ne sont pas des r\u00e8gles strictes. Vous pouvez trouver des formats vari\u00e9s pour les balises.<\/p>\n<p>Maintenant, allez sur votre tableau de bord WordPress et cliquez sur <strong>Apparence &gt; Personnaliser<\/strong>. Acc\u00e9dez \u00e0 l&rsquo;onglet <strong>CSS suppl\u00e9mentaire<\/strong>.<\/p>\n<figure id=\"attachment_89279\" aria-describedby=\"caption-attachment-89279\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89279 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css-s.png\" alt=\"La section \u00ab CSS suppl\u00e9mentaire \u00bb\" width=\"1190\" height=\"842\"><figcaption id=\"caption-attachment-89279\" class=\"wp-caption-text\">La section \u00ab CSS suppl\u00e9mentaire \u00bb<\/figcaption><\/figure>\n<p>Collez le code suivant dans ce champ CSS personnalis\u00e9:<\/p>\n<pre><code class=\"language-html\">body.postid-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Apr\u00e8s cela, prenez le num\u00e9ro d&rsquo;ID de l\u2019article que vous avez trouv\u00e9 plus t\u00f4t dans l\u2019article souhait\u00e9. Remplacez le \u00ab # \u00bb dans le code CSS par le nombre. En outre, remplacez le texte <code>http:\/\/YOURIMAGEURL.jpeg<\/code> par l&rsquo;URL r\u00e9elle de l&rsquo;image d&rsquo;arri\u00e8re-plan que vous souhaitez afficher, en gardant les guillemets autour d&rsquo;elle.<\/p>\n<figure id=\"attachment_89278\" aria-describedby=\"caption-attachment-89278\" style=\"width: 1141px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89278 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-css-typed-in.png\" alt=\"Ajouter du CSS personnalis\u00e9 pour un ID d\u2019article sp\u00e9cifique\" width=\"1141\" height=\"820\"><figcaption id=\"caption-attachment-89278\" class=\"wp-caption-text\">Ajouter du CSS personnalis\u00e9 pour un ID d\u2019article sp\u00e9cifique<\/figcaption><\/figure>\n<p>Assurez-vous de cliquer sur le bouton <strong>Publier<\/strong> avant de quitter l&rsquo;onglet CSS suppl\u00e9mentaire, car cela enregistre vos modifications sur le site web et vous permet d&rsquo;afficher l&rsquo;arri\u00e8re-plan sur l\u2019interface publique.<\/p>\n<figure id=\"attachment_89277\" aria-describedby=\"caption-attachment-89277\" style=\"width: 1161px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89277 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-but.png\" alt=\"Cliquez sur le bouton \u00ab Publier \u00bb pour enregistrer les modifications\" width=\"1161\" height=\"816\"><figcaption id=\"caption-attachment-89277\" class=\"wp-caption-text\">Cliquez sur le bouton \u00ab Publier \u00bb pour enregistrer les modifications<\/figcaption><\/figure>\n<p>Une fois ces changements CSS en place, vous pouvez maintenant revenir \u00e0 l&rsquo;interface de cet article de blog WordPress pour voir le nouvel arri\u00e8re-plan. <a href=\"https:\/\/kinsta.com\/fr\/blog\/test-vitesse-site-web\/\">Testez<\/a> les autres articles et pages de blog de votre site pour voir qu&rsquo;aucun des autres n&rsquo;a d&rsquo;arri\u00e8re-plan, sauf si vous impl\u00e9mentez le m\u00eame code pour ces ID d\u2019article.<\/p>\n<figure id=\"attachment_89276\" aria-describedby=\"caption-attachment-89276\" style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89276 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-post-now-has-it.png\" alt=\"Voir l'image d\u2019arri\u00e8re-plan sur l\u2019article\" width=\"1316\" height=\"883\"><figcaption id=\"caption-attachment-89276\" class=\"wp-caption-text\">Voir l&rsquo;image d\u2019arri\u00e8re-plan sur l\u2019article<\/figcaption><\/figure>\n<h3><strong>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 un bloc individuel de contenu<\/strong><\/h3>\n<p>Les blocs individuels de contenu de l&rsquo;\u00e9diteur de blocs WordPress <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">Gutenberg<\/a> permettent un large \u00e9ventail d&rsquo;options d&rsquo;affichage de contenu, y compris des zones de texte, des images et des galeries.<\/p>\n<p>Ceux-ci divisent votre contenu en plusieurs sections distinctes. Ainsi, vous pouvez ajouter une couleur ou une image d&rsquo;arri\u00e8re-plan juste pour ce bloc.<\/p>\n<p>Par exemple, disons que vous \u00e9crivez un article de blog sur l\u2019\u00e9tat de l&rsquo;industrie du v\u00eatement au d\u00e9tail. Vous souhaitez terminer ou commencer l\u2019article par un appel \u00e0 l&rsquo;action pour que les gens s&rsquo;inscrivent \u00e0 <a href=\"https:\/\/kinsta.com\/webinars\/\">votre prochain webinaire<\/a>. Il serait logique que cette section se d\u00e9marque en utilisant une couleur ou une image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Malheureusement, l&rsquo;\u00e9diteur de blocs WordPress n&rsquo;offre pas de r\u00e9glage complet dans lequel vous pouvez ajouter un arri\u00e8re-plan \u00e0 n&rsquo;importe quel bloc. Cependant, certains blocs ont la possibilit\u00e9 d&rsquo;incorporer une couleur d\u2019arri\u00e8re-plan.<\/p>\n<p>Il existe \u00e9galement un bloc, appel\u00e9 bloc Couverture, qui est la chose la plus proche o\u00f9 nous pouvons ajouter une image d&rsquo;arri\u00e8re-plan pour un bloc dans un article ou une page. La couverture vous permet de superposer du texte et certains \u00e9l\u00e9ments multim\u00e9dias, ce qui le rend adapt\u00e9 \u00e0 notre objectif final.<\/p>\n<p>Vous trouverez ci-dessous les techniques \u00e0 utiliser pour d\u00e9finir une image ou une couleur d&rsquo;arri\u00e8re-plan pour un bloc WordPress individuel.<\/p>\n<h4><strong>D\u00e9finir une couleur d\u2019arri\u00e8re-plan pour un bloc<\/strong><\/h4>\n<p>Le moyen le plus simple d&rsquo;ajouter de la vivacit\u00e9 \u00e0 un seul bloc est d&rsquo;ajouter une couleur d\u2019arri\u00e8re-plan. Ce n&rsquo;est pas aussi sophistiqu\u00e9 qu&rsquo;une image d\u2019arri\u00e8re-plan, mais la couleur d\u2019arri\u00e8re-plan est en fait le seul type d&rsquo;arri\u00e8re-plan dans l&rsquo;\u00e9diteur de blocs WordPress disponible pour les blocs standard.<\/p>\n<p><strong>Note :<\/strong> certains blocs n&rsquo;ont aucun r\u00e9glage d&rsquo;arri\u00e8re-plan. Si tel est le cas, il est pr\u00e9f\u00e9rable d&rsquo;utiliser un bloc de couverture et de superposer d&rsquo;autres blocs par-dessus, comme indiqu\u00e9 plus bas dans cet article.<\/p>\n<p>Le bloc <strong>Paragraphe<\/strong>, par exemple, a un r\u00e9glage pour activer une couleur d\u2019arri\u00e8re-plan.<\/p>\n<p>Pour l&rsquo;activer, s\u00e9lectionnez le bloc, puis recherchez les <strong>r\u00e9glages de couleur<\/strong> sous l&rsquo;onglet <strong>Bloc<\/strong> sur le c\u00f4t\u00e9 droit.<\/p>\n<figure id=\"attachment_88049\" aria-describedby=\"caption-attachment-88049\" style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88049 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-block.png\" alt=\"Modification des r\u00e9glages de couleur de l'arri\u00e8re-plan\" width=\"1901\" height=\"885\"><figcaption id=\"caption-attachment-88049\" class=\"wp-caption-text\">Modification des r\u00e9glages de couleur de l&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Cette section r\u00e9v\u00e8le les champs <strong>Couleur du texte<\/strong> et <strong>Couleur d&rsquo;arri\u00e8re-plan<\/strong>.<\/p>\n<p>Acc\u00e9dez \u00e0 la zone <strong>Couleur d&rsquo;arri\u00e8re-plan<\/strong> et s\u00e9lectionnez une couleur dans la liste des options disponibles. Vous pouvez \u00e9galement choisir le lien <strong>Couleur personnalis\u00e9e<\/strong> pour ins\u00e9rer votre propre code couleur ou choisir une couleur unique.<\/p>\n<p>Comme vous pouvez le voir, une fois ce r\u00e9glage en place, l&rsquo;arri\u00e8re-plan du bloc Paragraphe prend une couleur diff\u00e9rente, dans ce cas, le bleu.<\/p>\n<figure id=\"attachment_88048\" aria-describedby=\"caption-attachment-88048\" style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88048 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-back.png\" alt=\"Choisir une couleur d'arri\u00e8re-plan\" width=\"1900\" height=\"896\"><figcaption id=\"caption-attachment-88048\" class=\"wp-caption-text\">Choisir une couleur d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<h4><strong>Ajouter une couleur d\u2019arri\u00e8re-plan \u00e0 n&rsquo;importe quel bloc WordPress<\/strong><\/h4>\n<p>Comme mentionn\u00e9 pr\u00e9c\u00e9demment, tous les blocs WordPress n&rsquo;ont pas cette fonction d&rsquo;arri\u00e8re-plan int\u00e9gr\u00e9e. Que devez-vous faire si vous souhaitez cr\u00e9er une galerie, ou un autre \u00e9l\u00e9ment de bloc, qui n&rsquo;offre pas l&rsquo;option d&rsquo;arri\u00e8re-plan ?<\/p>\n<p>La solution la plus rapide consiste \u00e0 utiliser la fonction de <strong>groupe<\/strong> de blocs dans WordPress.<\/p>\n<p>Pour ce faire, s\u00e9lectionnez plusieurs blocs d\u00e9j\u00e0 dans votre contenu. Pour cet exemple, je s\u00e9lectionnerai simultan\u00e9ment un bloc <strong>Paragraphe<\/strong> et un bloc <strong>Galerie<\/strong>.<\/p>\n<p>Cliquez sur l&rsquo;ic\u00f4ne carr\u00e9e empil\u00e9e dans le menu qui appara\u00eet.<\/p>\n<figure id=\"attachment_88047\" aria-describedby=\"caption-attachment-88047\" style=\"width: 1561px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88047 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-both.png\" alt=\"La section \u00ab Notre \u00e9quipe \u00bb sur une page\" width=\"1561\" height=\"940\"><figcaption id=\"caption-attachment-88047\" class=\"wp-caption-text\">La section \u00ab Notre \u00e9quipe \u00bb sur une page<\/figcaption><\/figure>\n<p>Choisissez l&rsquo;option <strong>Groupe<\/strong> dans le menu d\u00e9roulant.<\/p>\n<p>Cela prend tous les blocs que vous avez actuellement s\u00e9lectionn\u00e9s et les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-3\/#editing-experience\">combine dans un groupe<\/a>, vous permettant de les d\u00e9placer ou de les modifier tous ensemble plut\u00f4t que s\u00e9par\u00e9ment.<\/p>\n<figure id=\"attachment_88046\" aria-describedby=\"caption-attachment-88046\" style=\"width: 1575px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88046 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/group-theme.png\" alt=\"Regrouper les sections sous forme de bloc\" width=\"1575\" height=\"927\"><figcaption id=\"caption-attachment-88046\" class=\"wp-caption-text\">Regrouper les sections sous forme de bloc<\/figcaption><\/figure>\n<p>Cela d\u00e9finit le <strong>groupe<\/strong> comme son propre bloc. Cela signifie que vous pouvez acc\u00e9der \u00e0 l&rsquo;onglet des <strong>R\u00e9glages du bloc<\/strong> sur le c\u00f4t\u00e9 droit de la page pour trouver ses r\u00e9glages.<\/p>\n<p>Recherchez l&rsquo;onglet des <strong>R\u00e9glages de couleur<\/strong> et cliquez dessus.<\/p>\n<figure id=\"attachment_88045\" aria-describedby=\"caption-attachment-88045\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88045 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-sets.png\" alt=\"Modifier les \u00ab R\u00e9glages de couleur \u00bb pour le groupe de blocs\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88045\" class=\"wp-caption-text\">Modifier les \u00ab R\u00e9glages de couleur \u00bb pour le groupe de blocs<\/figcaption><\/figure>\n<p>Tout comme un bloc paragraphe standard, le bloc groupe dispose \u00e9galement d&rsquo;une fonction de couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Choisissez la couleur que vous aimez le plus pour cette situation pour voir que tout ce qui se trouve dans ce groupe devrait maintenant avoir cette couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Ce qui est g\u00e9nial avec le bloc Groupe, c&rsquo;est qu&rsquo;il prend un autre bloc qui n&rsquo;a pas de fonction d&rsquo;arri\u00e8re-plan (comme le bloc Galerie) et vous permet quand m\u00eame d&rsquo;activer un arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88044\" aria-describedby=\"caption-attachment-88044\" style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88044 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-color-in-group.png\" alt=\"D\u00e9finir la couleur d'arri\u00e8re-plan en bleu\" width=\"1454\" height=\"894\"><figcaption id=\"caption-attachment-88044\" class=\"wp-caption-text\">D\u00e9finir la couleur d&rsquo;arri\u00e8re-plan en bleu<\/figcaption><\/figure>\n<h4><strong>Ajouter &lsquo;une image d\u2019arri\u00e8re-plan \u00e0 un bloc WordPress<\/strong><\/h4>\n<p>Les blocs WordPress se trouvent \u00e0 la fois dans les pages et dans les articles. Par cons\u00e9quent, nous pouvons mettre en \u0153uvre cette tactique dans l&rsquo;un ou l&rsquo;autre. Vous pouvez ins\u00e9rer \u00e0 peu pr\u00e8s n&rsquo;importe quel contenu au-dessus de l&rsquo;arri\u00e8re-plan du groupe de blocs &#8211; ou uniquement dans un bloc WordPress.<\/p>\n<p>Pour commencer ce processus, cliquez sur le bouton <strong>Ajouter un bloc<\/strong> ou sur l&rsquo;ic\u00f4ne \u00ab\u00a0<strong>+\u00a0\u00bb<\/strong> et recherchez le bloc <strong>Couverture<\/strong>.<\/p>\n<p>Choisissez ce bloc pour l&rsquo;ins\u00e9rer dans votre article ou votre page.<\/p>\n<figure id=\"attachment_88043\" aria-describedby=\"caption-attachment-88043\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88043 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/go-for-cov.png\" alt=\"Ajouter un bloc d'image de couverture\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88043\" class=\"wp-caption-text\">Ajouter un bloc d&rsquo;image de couverture<\/figcaption><\/figure>\n<p>Vous devez ensuite cliquer sur le bouton <strong>T\u00e9l\u00e9verser ou S\u00e9lectionner un m\u00e9dia<\/strong>, qui vous permet de rechercher des images que vous pouvez utiliser comme arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88042\" aria-describedby=\"caption-attachment-88042\" style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88042 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-med.png\" alt=\"Cliquer sur le bouton \u00ab S\u00e9lectionner un m\u00e9dia \u00bb\" width=\"1865\" height=\"836\"><figcaption id=\"caption-attachment-88042\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab S\u00e9lectionner un m\u00e9dia \u00bb<\/figcaption><\/figure>\n<p>Choisissez l&rsquo;image souhait\u00e9e et cliquez sur le bouton <strong>S\u00e9lectionner<\/strong>.<\/p>\n<figure id=\"attachment_88041\" aria-describedby=\"caption-attachment-88041\" style=\"width: 1777px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88041 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/sel.png\" alt=\"Choisir l'image et cliquer sur le bouton \u00ab S\u00e9lectionner \u00bb\" width=\"1777\" height=\"834\"><figcaption id=\"caption-attachment-88041\" class=\"wp-caption-text\">Choisir l&rsquo;image et cliquer sur le bouton \u00ab S\u00e9lectionner \u00bb<\/figcaption><\/figure>\n<p>Vous pouvez maintenant voir cette image comme arri\u00e8re-plan du bloc Couverture.<\/p>\n<p>N&rsquo;h\u00e9sitez pas \u00e0 cliquer sur ce bloc pour commencer \u00e0 saisir le contenu du paragraphe, car la fonction principale est de superposer du texte.<\/p>\n<p>Ce qui est g\u00e9nial avec le bloc Couverture, c&rsquo;est qu&rsquo;il offre plusieurs options de <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">mise en forme<\/a><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">,<\/span><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">\u00a0vous permettant de passer d&rsquo;un en-t\u00eate \u00e0 un format de paragraphe en quelques secondes.<\/span><\/p>\n<figure id=\"attachment_88040\" aria-describedby=\"caption-attachment-88040\" style=\"width: 1902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88040 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-res-ult.png\" alt=\"Image d'arri\u00e8re-plan WordPress dans une section\" width=\"1902\" height=\"892\"><figcaption id=\"caption-attachment-88040\" class=\"wp-caption-text\">Image d&rsquo;arri\u00e8re-plan WordPress dans une section<\/figcaption><\/figure>\n<p>Pour ajouter d&rsquo;autres blocs au-dessus de cet arri\u00e8re-plan, cliquez sur l\u2019ic\u00f4ne \u00ab <strong>+<\/strong> \u00bb dans le bloc de couverture lui-m\u00eame. Vous devrez peut-\u00eatre appuyer une fois sur la touche Entr\u00e9e pour afficher le bouton.<\/p>\n<figure id=\"attachment_88039\" aria-describedby=\"caption-attachment-88039\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88039 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/blurring.png\" alt=\"Cliquer sur le signe plus dans la section de bloc\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88039\" class=\"wp-caption-text\">Cliquer sur le signe plus dans la section de bloc<\/figcaption><\/figure>\n<p>Tout comme l&rsquo;ajout d&rsquo;un bloc de contenu dans un article ordinaire, le bloc Couverture vous permet de faire d\u00e9filer tous les blocs de contenu potentiels dans WordPress.<\/p>\n<p>Cela signifie que vous pouvez placer une image, une <a href=\"https:\/\/kinsta.com\/fr\/blog\/extensions-wordpress-galerie-photo\/\">galerie<\/a>, des colonnes ou tout type de bloc WordPress dans le bloc Couverture, ce qui en fait la solution id\u00e9ale pour les images d\u2019arri\u00e8re-plans avec un bloc individuel.<\/p>\n<figure id=\"attachment_91286\" aria-describedby=\"caption-attachment-91286\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-91286 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/search-for-block-1.png\" alt=\"Rechercher un bloc\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-91286\" class=\"wp-caption-text\">Rechercher un bloc<\/figcaption><\/figure>\n<p>Pour cet exemple, j&rsquo;ai ins\u00e9r\u00e9 une image et l&rsquo;ai format\u00e9e un peu pour la rendre acceptable dans le bloc Couverture.<\/p>\n<p>Chaque bloc que vous placez devant l&rsquo;arri\u00e8re-plan a ses propres r\u00e9glages personnalis\u00e9s dans l&rsquo;onglet Bloc de droite, pensez donc \u00e0 les modifier lorsque vous les d\u00e9posez dans le bloc Couverture.<\/p>\n<figure id=\"attachment_88037\" aria-describedby=\"caption-attachment-88037\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88037 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-block-complete.png\" alt=\"Un exemple de bloc avec une image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"883\"><figcaption id=\"caption-attachment-88037\" class=\"wp-caption-text\">Un exemple de bloc avec une image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>\u00c0 un moment donn\u00e9, vous souhaiterez peut-\u00eatre modifier ou personnaliser l&rsquo;image d&rsquo;arri\u00e8re-plan elle-m\u00eame. Si tel est le cas, choisissez le bloc Couverture, puis acc\u00e9dez \u00e0 l&rsquo;onglet R\u00e9glages du bloc sur le c\u00f4t\u00e9 droit de la page.<\/p>\n<p>Cela r\u00e9v\u00e8le une myriade de r\u00e9glages \u00e0 ajuster pour l&rsquo;image d&rsquo;arri\u00e8re-plan, y compris les suivants :<\/p>\n<ul>\n<li>Arri\u00e8re-plan fixe<\/li>\n<li>Arri\u00e8re-plan r\u00e9p\u00e9t\u00e9<\/li>\n<li>S\u00e9lecteur de point focal<\/li>\n<li>Dimensions<\/li>\n<li>Recouvrir<\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/#responsive-menu\">Opacit\u00e9<\/a><\/li>\n<li>Avanc\u00e9<\/li>\n<\/ul>\n<figure id=\"attachment_88036\" aria-describedby=\"caption-attachment-88036\" style=\"width: 1680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88036 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-clock-sets.png\" alt=\"Modifier des r\u00e9glages de bloc\" width=\"1680\" height=\"940\"><figcaption id=\"caption-attachment-88036\" class=\"wp-caption-text\">Modifier des r\u00e9glages de bloc<\/figcaption><\/figure>\n<p>L&rsquo;un des r\u00e9glages les plus importants \u00e0 prendre en compte est vers le bas du panneau <strong>R\u00e9glages du bloc<\/strong>.<\/p>\n<p>Faites d\u00e9filer vers le bas pour trouver la section <strong>Superposition<\/strong>. Ouvrez la section pour afficher une liste de superpositions de couleurs et des options pour rendre ces couleurs unies ou d\u00e9grad\u00e9es.<\/p>\n<p>C&rsquo;est une excellente option pour modifier l\u00e9g\u00e8rement la couleur de votre arri\u00e8re-plan pour la faire correspondre \u00e0 votre marque ou mettre en \u00e9vidence votre contenu de premier plan. Vous pouvez \u00e9galement r\u00e9gler l&rsquo;<strong>opacit\u00e9<\/strong> pour vous assurer que la superposition de couleurs ne submerge pas compl\u00e8tement l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88035\" aria-describedby=\"caption-attachment-88035\" style=\"width: 1905px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88035 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/new-color.png\" alt=\"Changer la couleur d'arri\u00e8re-plan du bloc\" width=\"1905\" height=\"895\"><figcaption id=\"caption-attachment-88035\" class=\"wp-caption-text\">Changer la couleur d&rsquo;arri\u00e8re-plan du bloc<\/figcaption><\/figure>\n<p>Comme alternative, envisagez l\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">Stackable Page Builder Gutenberg Blocks<\/a> pour ouvrir des outils plus avanc\u00e9s pour les arri\u00e8re-plans sur des blocs individuels.<\/p>\n<h3>Comment mettre une image d&rsquo;arri\u00e8re-plan derri\u00e8re l&rsquo;en-t\u00eate de WordPress<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons expliqu\u00e9 comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;ensemble de votre site WordPress, ainsi que des m\u00e9thodes pour les arri\u00e8re-plans dans des domaines sp\u00e9cifiques tels que les blocs, les articles et les pages WordPress. Mais qu&rsquo;en est-il de la zone qui contient votre menu et votre logo ?<\/p>\n<p>Parfois, un arri\u00e8re-plan derri\u00e8re votre en-t\u00eate est tout ce dont vous avez besoin.<\/p>\n<p>La d\u00e9finition d&rsquo;une image d&rsquo;arri\u00e8re-plan pour l&rsquo;en-t\u00eate <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-theme-wordpress\/\">ajoute une nouvelle ambiance<\/a> \u00e0 votre site, surtout s&rsquo;il y a des vacances en cours ou une grande promotion que vous voulez mettre en \u00e9vidence.<\/p>\n<p>Pour commencer, allez dans <strong>Apparence &gt; En-t\u00eate<\/strong> dans le tableau de bord WordPress.<\/p>\n<p><strong>Note :<\/strong> vous pouvez \u00e9galement trouver les r\u00e9glages d&rsquo;en-t\u00eate en acc\u00e9dant \u00e0 la section <strong>Apparence&gt; Personnaliser &gt; En-t\u00eate<\/strong>.<\/p>\n<figure id=\"attachment_88059\" aria-describedby=\"caption-attachment-88059\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88059 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/head-here.png\" alt=\"Tableau de bord WordPress &gt; Apparence &gt; En-t\u00eate\" width=\"1920\" height=\"910\"><figcaption id=\"caption-attachment-88059\" class=\"wp-caption-text\">Tableau de bord WordPress &gt; Apparence &gt; En-t\u00eate<\/figcaption><\/figure>\n<p>Vous devriez maintenant voir un aper\u00e7u de votre page d&rsquo;accueil sur le c\u00f4t\u00e9 droit de l&rsquo;\u00e9cran, ainsi que les r\u00e9glages d&rsquo;en-t\u00eate sur le c\u00f4t\u00e9 gauche de celui-ci.<\/p>\n<p>Le module En-t\u00eate explique les dimensions pr\u00e9f\u00e9r\u00e9es pour toute image d&rsquo;arri\u00e8re-plan d&rsquo;en-t\u00eate, vous pouvez donc choisir de recadrer votre image avant de la t\u00e9l\u00e9verser ou d&rsquo;attendre que vous obteniez l&rsquo;image sur votre tableau de bord WordPress.<\/p>\n<p>Sous le titre de <strong>l&rsquo;en-t\u00eate actuel<\/strong>, cliquez sur le bouton <strong>Ajouter une nouvelle image<\/strong>.<\/p>\n<figure id=\"attachment_88058\" aria-describedby=\"caption-attachment-88058\" style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88058 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/add-news.png\" alt=\"Cliquer sur le bouton \u00ab Ajouter une nouvelle image \u00bb\" width=\"1886\" height=\"940\"><figcaption id=\"caption-attachment-88058\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Ajouter une nouvelle image \u00bb<\/figcaption><\/figure>\n<p>Les en-t\u00eates sont d\u00e9licats car vous voulez vous assurer que tous les <a href=\"https:\/\/kinsta.com\/fr\/blog\/liens-ancrage\/\">liens<\/a> et \u00e9l\u00e9ments de texte (sans parler de votre logo) sont parfaitement clairs au-dessus de l&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Par cons\u00e9quent, nous vous recommandons de tester les images d&rsquo;arri\u00e8re-plan et de consid\u00e9rer des images qui collent \u00e0 des couleurs et des motifs plus solides. Ils ne rendront pas aussi difficile de voir vos \u00e9l\u00e9ments de menu et votre logo.<\/p>\n<p>S\u00e9lectionnez une image qui vous semble id\u00e9ale, puis cliquez sur le bouton <strong>S\u00e9lectionner et recadrer<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_88057\" aria-describedby=\"caption-attachment-88057\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88057 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-func.png\" alt=\"Choisir une image\" width=\"1860\" height=\"880\"><figcaption id=\"caption-attachment-88057\" class=\"wp-caption-text\">Choisir une image<\/figcaption><\/figure>\n<p>Nous aimons l&rsquo;outil de recadrage int\u00e9gr\u00e9 car il fournit automatiquement les bonnes dimensions pour l&rsquo;image d&rsquo;arri\u00e8re-plan de l&rsquo;en-t\u00eate. Cela devrait acc\u00e9l\u00e9rer le processus par rapport \u00e0 la modification pr\u00e9alable d&rsquo;une photo dans un outil comme Photoshop.<\/p>\n<p>D\u00e9placez la zone de recadrage vers l&#8217;emplacement qui convient le mieux \u00e0 votre image d&rsquo;arri\u00e8re-plan. N&rsquo;h\u00e9sitez pas \u00e0 faire glisser l&rsquo;un des coins si vous avez besoin de r\u00e9duire encore plus l&rsquo;image.<\/p>\n<p>Une fois que vous avez le recadrage parfait, cliquez sur le bouton <strong>Recadrer l&rsquo;image<\/strong>.<\/p>\n<figure id=\"attachment_88056\" aria-describedby=\"caption-attachment-88056\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88056 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-im.png\" alt=\"Recadrer l'image\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88056\" class=\"wp-caption-text\">Recadrer l&rsquo;image<\/figcaption><\/figure>\n<p>L&rsquo;image d&rsquo;arri\u00e8re-plan de l&rsquo;en-t\u00eate est imm\u00e9diatement activ\u00e9e dans l&rsquo;aper\u00e7u de la personnalisation WordPress, vous aidant \u00e0 voir exactement ce que vos clients regarderont avec ce type d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Vous remarquerez que l&rsquo;image d&rsquo;arri\u00e8re-plan de l&rsquo;en-t\u00eate ne d\u00e9passe pas dans le reste du contenu de la page. Au lieu de cela, elle reste dans l&rsquo;en-t\u00eate, derri\u00e8re tout ce qui s&rsquo;y trouve actuellement, comme un logo, un slogan, un menu et une <a href=\"https:\/\/kinsta.com\/fr\/blog\/recherche-wordpress\/\">barre de recherche<\/a>.<\/p>\n<figure id=\"attachment_88055\" aria-describedby=\"caption-attachment-88055\" style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88055 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-actual-thing.png\" alt=\"S\u00e9lectionner l'image d'arri\u00e8re-plan de l'en-t\u00eate\" width=\"1901\" height=\"940\"><figcaption id=\"caption-attachment-88055\" class=\"wp-caption-text\">S\u00e9lectionner l&rsquo;image d&rsquo;arri\u00e8re-plan de l&rsquo;en-t\u00eate<\/figcaption><\/figure>\n<p>Une autre option pour l&rsquo;arri\u00e8re-plan de votre en-t\u00eate consiste \u00e0 t\u00e9l\u00e9verser plusieurs images et \u00e0 les faire s\u2019afficher de mani\u00e8re al\u00e9atoire, ce qui ajoute un peu d&rsquo;\u00e9clat et de surprise \u00e0 votre site chaque fois qu&rsquo;un utilisateur arrive sur la page d&rsquo;accueil.<\/p>\n<p>Pour que cela fonctionne, vous devez d&rsquo;abord avoir plusieurs images t\u00e9l\u00e9vers\u00e9es dans la bo\u00eete de r\u00e9glages d&rsquo;en-t\u00eate. Cliquez sur le bouton <strong>Ajouter une nouvelle image<\/strong> pour terminer ce processus.<\/p>\n<p>Une fois que vous avez plus d&rsquo;une image, cliquez sur le bouton <strong>En-t\u00eates t\u00e9l\u00e9vers\u00e9s al\u00e9atoires<\/strong> pour activer la fonctionnalit\u00e9 qui affiche un arri\u00e8re-plan d&rsquo;en-t\u00eate diff\u00e9rent \u00e0 chaque fois.<\/p>\n<figure id=\"attachment_88054\" aria-describedby=\"caption-attachment-88054\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88054 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/random.png\" alt=\"Ajouter plus d'en-t\u00eates\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88054\" class=\"wp-caption-text\">Ajouter plus d&rsquo;en-t\u00eates<\/figcaption><\/figure>\n<p>Vous remarquerez peut-\u00eatre que l&rsquo;ajout d&rsquo;une image d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;en-t\u00eate rend difficile l&rsquo;affichage de certains \u00e9l\u00e9ments de l&rsquo;en-t\u00eate, comme votre menu ou un panier.<\/p>\n<p>Si tel est le cas, nous vous sugg\u00e9rons de ne pas supprimer imm\u00e9diatement l&rsquo;image d&rsquo;en-t\u00eate. Au lieu de cela, acc\u00e9dez aux champs <strong>Couleur du texte<\/strong> et <strong>Couleur du lien<\/strong> pour voir si des ajustements peuvent vous aider.<\/p>\n<p>Le r\u00e9glage Couleur du texte contr\u00f4le tout texte de l&rsquo;en-t\u00eate qui n&rsquo;est pas un lien hypertexte vers une autre page interne ou externe. Souvent, cela n\u2019est que le slogan, si vous en avez un, mais parfois vous pouvez avoir d&rsquo;autres \u00e9l\u00e9ments comme un total de panier d&rsquo;achat ou des ic\u00f4nes de r\u00e9seaux sociaux qui changent \u00e9galement de couleur avec le texte.<\/p>\n<p>L&rsquo;autre case concerne la couleur du lien. Vous verrez probablement plus de changements lorsque vous ajustez cette couleur, car elle inclut tous les \u00e9l\u00e9ments de menu li\u00e9s \u00e0 d&rsquo;autres pages.<\/p>\n<figure id=\"attachment_88053\" aria-describedby=\"caption-attachment-88053\" style=\"width: 1921px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88053 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/lino-color.png\" alt=\"Couleur du texte sur l'image d'arri\u00e8re-plan WordPress\" width=\"1921\" height=\"941\"><figcaption id=\"caption-attachment-88053\" class=\"wp-caption-text\">Couleur du texte sur l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Voici un exemple de ce qui se passe lorsque vous choisissez une nouvelle couleur pour la <strong>couleur du texte<\/strong> et la <strong>couleur du lien<\/strong>. Vous pouvez voir que le slogan et le nom du site ont chang\u00e9, que le menu est devenu blanc, tout comme la plupart des autres \u00e9l\u00e9ments d&rsquo;en-t\u00eate comme l&rsquo;ic\u00f4ne du panier.<\/p>\n<figure id=\"attachment_88052\" aria-describedby=\"caption-attachment-88052\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88052 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/text-and-link.png\" alt=\"V\u00e9rifier les \u00e9l\u00e9ments de l'en-t\u00eate\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88052\" class=\"wp-caption-text\">V\u00e9rifier les \u00e9l\u00e9ments de l&rsquo;en-t\u00eate<\/figcaption><\/figure>\n<p>Pour ceux qui ne sont pas int\u00e9ress\u00e9s par l&rsquo;utilisation d&rsquo;une image d&rsquo;arri\u00e8re-plan pour votre en-t\u00eate, vous avez \u00e9galement la possibilit\u00e9 d&rsquo;utiliser une couleur d\u2019arri\u00e8re-plan.<\/p>\n<p>Pour cela, recherchez le champ Couleur d&rsquo;arri\u00e8re-plan sous la m\u00eame zone R\u00e9glages d&rsquo;en-t\u00eate.<\/p>\n<p>Cliquez sur le bouton <strong>S\u00e9lectionner une couleur<\/strong> et choisissez dans le panneau de couleurs pour voir les r\u00e9sultats dans l&rsquo;aper\u00e7u. Vous pouvez \u00e9galement modifier les couleurs du texte lors de l&rsquo;utilisation d&rsquo;une couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88051\" aria-describedby=\"caption-attachment-88051\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88051 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/do-the-back-color.png\" alt=\"D\u00e9finir une couleur d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88051\" class=\"wp-caption-text\">D\u00e9finir une couleur d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Apr\u00e8s avoir test\u00e9 ce qui fonctionne le mieux pour votre en-t\u00eate et d\u00e9cid\u00e9 de l&rsquo;image d&rsquo;arri\u00e8re-plan parfaite pour cet en-t\u00eate, cliquez sur le bouton <strong>Publier<\/strong> pour tous pour voir les modifications.<\/p>\n<p>Et si vous rencontrez des probl\u00e8mes pour voir les modifications sur l\u2019interface publique, pensez \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/vider-cache-wordpress\/\">vider votre cache WordPress<\/a>.<\/p>\n<figure id=\"attachment_88050\" aria-describedby=\"caption-attachment-88050\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88050 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/hit-pub.png\" alt=\"Cliquer sur le bouton \u00ab Publier \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88050\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Publier \u00bb<\/figcaption><\/figure>\n<p><strong>Comment ajouter des images d&rsquo;arri\u00e8re-plan aux pages de cat\u00e9gories et aux pages de connexion de WordPress\u00a0<\/strong><\/p>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=7z3l5tsU3nU\"><\/kinsta-video><\/p>\n<h3>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 une cat\u00e9gorie WordPress<\/h3>\n<p>Une page d&rsquo;archives de cat\u00e9gories WordPress compile tous les articles list\u00e9s dans une certaine cat\u00e9gorie. Par exemple, de nombreux sites proposent des cat\u00e9gories pour des types de publication personnalis\u00e9s tels que les Produits. Par d\u00e9faut, tous les sites web WordPress ont des cat\u00e9gories pour les articles. Ceux que vous ne cat\u00e9gorisez pas sont \u00e9tiquet\u00e9s avec la cat\u00e9gorie <strong>Non class\u00e9<\/strong>.<\/p>\n<p>\u00c9tant donn\u00e9 que les pages d&rsquo;archives de cat\u00e9gories regroupent un contenu similaire, il est logique d&rsquo;inclure une image d&rsquo;arri\u00e8re-plan pertinente sur ces pages pour mieux pr\u00e9senter la cat\u00e9gorie. Par exemple, vous pouvez avoir une formation ax\u00e9e sur la technologie pour une cat\u00e9gorie de conception web ou un arri\u00e8re-plan \u00e0 motif de coquillage ou de plage pour une cat\u00e9gorie de voyage.<\/p>\n<p>La m\u00e9thode CSS personnalis\u00e9e (d\u00e9crite ci-dessous) est l&rsquo;option la moins ch\u00e8re. Cependant, vous pouvez \u00e9galement consulter les diff\u00e9rents constructeurs de pages et les extensions pour voir lesquels d&rsquo;entre eux autorisent les arri\u00e8re-plans sur les pages de cat\u00e9gorie.<\/p>\n<p>Pour terminer cette t\u00e2che avec CSS, ouvrez votre tableau de bord WordPress et acc\u00e9dez \u00e0 <strong>Apparence &gt; Personnaliser<\/strong>.<\/p>\n<p>S\u00e9lectionnez l&rsquo;onglet <strong>CSS suppl\u00e9mentaire<\/strong> pour ouvrir le module qui permet de saisir votre propre CSS.<\/p>\n<figure id=\"attachment_89148\" aria-describedby=\"caption-attachment-89148\" style=\"width: 1538px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89148 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/additonal.png\" alt=\"Aller dans la section \u00ab CSS suppl\u00e9mentaire \u00bb\" width=\"1538\" height=\"940\"><figcaption id=\"caption-attachment-89148\" class=\"wp-caption-text\">Aller dans la section \u00ab CSS suppl\u00e9mentaire \u00bb<\/figcaption><\/figure>\n<p>Ouvrez l&rsquo;une de vos pages d&rsquo;archives de cat\u00e9gories sur votre site WordPress. Habituellement, ces pages ont des URL comme ceci: <code>http:\/\/yourwebsitedomain.com\/category\/travel<\/code>. Vous devez remplacer la partie <strong>travel<\/strong> par la cat\u00e9gorie que vous avez sur votre propre site et remplacer la partie <strong>yourwebsitedoman<\/strong> par votre nom de domaine r\u00e9el.<\/p>\n<p>Cliquez avec le bouton droit n&rsquo;importe o\u00f9 sur la page de cat\u00e9gorie et cliquez sur Inspecter. Cela affichera l&rsquo;outil Inspecter dans votre navigateur, avec le code de cette page pr\u00e9sent\u00e9 pour que vous puissiez le voir.<\/p>\n<figure id=\"attachment_89296\" aria-describedby=\"caption-attachment-89296\" style=\"width: 1433px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89296 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insepting.png\" alt=\"Faire un clic droit sur la page web et s\u00e9lectionnez \u00ab Inspecter \u00bb\" width=\"1433\" height=\"812\"><figcaption id=\"caption-attachment-89296\" class=\"wp-caption-text\">Faire un clic droit sur la page web et s\u00e9lectionnez \u00ab Inspecter \u00bb<\/figcaption><\/figure>\n<p>Recherchez \u00ab\u00a0body\u00a0\u00bb ou \u00ab\u00a0class\u00a0\u00bb pour localiser la classe CSS des pages de cat\u00e9gorie, ainsi que la classe de cette cat\u00e9gorie en particulier.<\/p>\n<p>Pour cette situation, notre classe CSS est \u00ab\u00a0category-travel\u00a0\u00bb, puisque j&rsquo;ai une cat\u00e9gorie nomm\u00e9e \u00ab\u00a0Travel\u00a0\u00bb sur le site.<\/p>\n<p>Enregistrez la balise CSS pour plus tard.<\/p>\n<figure id=\"attachment_89295\" aria-describedby=\"caption-attachment-89295\" style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89295 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/travel-cat.png\" alt=\"Notez la cat\u00e9gorie list\u00e9e\" width=\"986\" height=\"771\"><figcaption id=\"caption-attachment-89295\" class=\"wp-caption-text\">Notez la cat\u00e9gorie list\u00e9e<\/figcaption><\/figure>\n<p>Apr\u00e8s cela, revenez \u00e0 la section <strong>CSS suppl\u00e9mentaire<\/strong> de la personnalisation de WordPress.<\/p>\n<p>Collez le code suivant dans cette bo\u00eete, en rempla\u00e7ant la classe <code>category-travel<\/code> par la v\u00f4tre et en pla\u00e7ant une URL r\u00e9elle d&rsquo;image \u00e0 l&rsquo;endroit indiqu\u00e9 <code>http:\/\/YOURIMAGEURL.jpeg<\/code>.<\/p>\n<pre><code class=\"language-html\">body.category-travel {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<figure id=\"attachment_89147\" aria-describedby=\"caption-attachment-89147\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89147 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-it-is.png\" alt=\"Ajouter le code personnalis\u00e9 pour l'image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89147\" class=\"wp-caption-text\">Ajouter le code personnalis\u00e9 pour l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>Publier<\/strong> pour enregistrer les modifications.<\/p>\n<figure id=\"attachment_89146\" aria-describedby=\"caption-attachment-89146\" style=\"width: 1160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89146 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/go-and-pub.png\" alt=\"Ajouter du code \u00ab CSS personnalis\u00e9 \u00bb\" width=\"1160\" height=\"778\"><figcaption id=\"caption-attachment-89146\" class=\"wp-caption-text\">Ajouter du code \u00ab CSS personnalis\u00e9 \u00bb<\/figcaption><\/figure>\n<p>Enfin, revenez \u00e0 la page des archives des cat\u00e9gories sur l\u2019interface publique de votre site WordPress. Cela devrait maintenant afficher la m\u00eame page qu&rsquo;avant, mais avec l&rsquo;arri\u00e8re-plan sp\u00e9cifi\u00e9 dans le code CSS. Si vous rencontrez des probl\u00e8mes avec le formatage de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress, revenez au panneau CSS suppl\u00e9mentaire pour ajuster des \u00e9l\u00e9ments tels que la position, la taille et la fonction de r\u00e9p\u00e9tition de l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89145\" aria-describedby=\"caption-attachment-89145\" style=\"width: 1597px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89145 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-cat-page.png\" alt=\"Aller sur la page des cat\u00e9gories\" width=\"1597\" height=\"904\"><figcaption id=\"caption-attachment-89145\" class=\"wp-caption-text\">Aller sur la page des cat\u00e9gories et voir l&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<h3>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 votre page de connexion WordPress<\/h3>\n<p>La page de connexion WordPress a deux versions : une pour les utilisateurs r\u00e9guliers qui viennent sur votre site et souhaitent s&rsquo;inscrire et se connecter \u00e0 votre site web, et l&rsquo;autre pour les utilisateurs internes, comme les administrateurs et les auteurs.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/url-connexion-wordpress\/\">Ces pages de connexion<\/a> sont s\u00e9par\u00e9es du fonctionnement principal de votre site web (la plupart des fichiers se trouvant dans le fichier <strong>wp-login.php<\/strong>). Ainsi, l&rsquo;outil d&rsquo;image d&rsquo;arri\u00e8re-plan personnalis\u00e9 ne d\u00e9bordera pas dans les modules de connexion.<\/p>\n<p>Vous pouvez le faire en utilisant une extension appel\u00e9e <a href=\"https:\/\/wordpress.org\/plugins\/loginpress\/\">Custom Login Page Customizer<\/a>. Pour commencer, installez et activez l\u2019extension sur votre site WordPress.<\/p>\n<figure id=\"attachment_88317\" aria-describedby=\"caption-attachment-88317\" style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88317 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/Custom-Login-Page-Customizer.png\" alt=\"Extension LoginPress\" width=\"1329\" height=\"434\"><figcaption id=\"caption-attachment-88317\" class=\"wp-caption-text\">Extension LoginPress<\/figcaption><\/figure>\n<p>Sur la gauche, un nouvel onglet dans le menu du tableau de bord WordPress appara\u00eet pour LoginPress.<\/p>\n<p>Rendez-vous dans <strong>LoginPress &gt; R\u00e9glages<\/strong>.<\/p>\n<figure id=\"attachment_88332\" aria-describedby=\"caption-attachment-88332\" style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88332 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/loginpresss.png\" alt=\"Acc\u00e9der aux r\u00e9glages de LoginPress\" width=\"1900\" height=\"912\"><figcaption id=\"caption-attachment-88332\" class=\"wp-caption-text\">Acc\u00e9der aux r\u00e9glages de LoginPress<\/figcaption><\/figure>\n<p>Ici, vous pouvez ajuster les r\u00e9glages de l\u2019extension avant d&rsquo;ajouter votre arri\u00e8re-plan et de personnaliser toute autre partie de votre page de connexion.<\/p>\n<p>Par exemple, l\u2019extension propose des r\u00e9glages pour m\u00e9moriser automatiquement les utilisateurs, afficher les champs de mot de passe personnalis\u00e9s et expirer les sessions apr\u00e8s un certain laps de temps.<\/p>\n<figure id=\"attachment_88331\" aria-describedby=\"caption-attachment-88331\" style=\"width: 1413px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88331 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-sets.png\" alt=\"Modifier les r\u00e9glages de LoginPress\" width=\"1413\" height=\"940\"><figcaption id=\"caption-attachment-88331\" class=\"wp-caption-text\">Modifier les r\u00e9glages de LoginPress<\/figcaption><\/figure>\n<p>Pour activer un arri\u00e8re-plan d&rsquo;image personnalis\u00e9 pour la page de connexion, cliquez sur <strong>LoginPress &gt; Personnalisation<\/strong>.<\/p>\n<figure id=\"attachment_88330\" aria-describedby=\"caption-attachment-88330\" style=\"width: 1352px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88330 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/customizer-o.png\" alt=\"Aller dans \u00ab LoginPress &gt; Personnaliser \u00bb\" width=\"1352\" height=\"940\"><figcaption id=\"caption-attachment-88330\" class=\"wp-caption-text\">Aller dans \u00ab LoginPress &gt; Personnaliser \u00bb<\/figcaption><\/figure>\n<p>Cela vous renvoie dans l\u2019outil de personnalisation de WordPress, o\u00f9 une nouvelle page a \u00e9t\u00e9 ajout\u00e9e pour les outils LoginPress. Vous remarquerez des onglets pour les th\u00e8mes, le logo, l&rsquo;arri\u00e8re-plan, etc.<\/p>\n<p>Il est \u00e9galement possible de personnaliser la page de connexion en cliquant sur les boutons dans l&rsquo;aper\u00e7u visuel.<\/p>\n<figure id=\"attachment_88329\" aria-describedby=\"caption-attachment-88329\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88329 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/setting-to-go.png\" alt=\"D\u00e9finir un th\u00e8me LoginPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88329\" class=\"wp-caption-text\">D\u00e9finir un th\u00e8me LoginPress<\/figcaption><\/figure>\n<p>Nous ne couvrirons pas tous les autres r\u00e9glages car nous nous concentrons principalement sur l&rsquo;arri\u00e8re-plan pour le moment.<\/p>\n<p>Cliquez sur l&rsquo;onglet <strong>Arri\u00e8re-plan<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_88328\" aria-describedby=\"caption-attachment-88328\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88328 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-the-back.png\" alt=\"Acc\u00e9der \u00e0 l'onglet d'arri\u00e8re-plan de LoginPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88328\" class=\"wp-caption-text\">Acc\u00e9der \u00e0 l&rsquo;onglet d&rsquo;arri\u00e8re-plan de LoginPress<\/figcaption><\/figure>\n<p>La premi\u00e8re chose \u00e0 faire est de d\u00e9cider si vous souhaitez une couleur d\u2019arri\u00e8re-plan ou une image d\u2019arri\u00e8re-plan.<\/p>\n<p>Si vous pr\u00e9f\u00e9rez une couleur d\u2019arri\u00e8re-plan, localisez le champ <strong>Couleur d&rsquo;arri\u00e8re-plan<\/strong> et cliquez sur <strong>S\u00e9lectionner une couleur<\/strong>. Cela r\u00e9v\u00e8le un panneau de couleurs pour vous permettre de choisir exactement la couleur qui convient \u00e0 votre site.<\/p>\n<p>Comme vous pouvez le voir, le changement entre \u00e9galement en vigueur dans l&rsquo;aper\u00e7u de la personnalisation de WordPress.<\/p>\n<figure id=\"attachment_88327\" aria-describedby=\"caption-attachment-88327\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88327 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-color.png\" alt=\"S\u00e9lectionner la couleur d'arri\u00e8re-plan de LoginPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88327\" class=\"wp-caption-text\">S\u00e9lectionner la couleur d&rsquo;arri\u00e8re-plan de LoginPress<\/figcaption><\/figure>\n<p>Juste en dessous du r\u00e9glage <strong>Couleur d&rsquo;arri\u00e8re-plan<\/strong>, il y a une section <strong>Image d&rsquo;arri\u00e8re-plan<\/strong>.<\/p>\n<p>Activez le commutateur <strong>Activer l&rsquo;image d&rsquo;arri\u00e8re-plan<\/strong> pour afficher une collection d&rsquo;images d&rsquo;arri\u00e8re-plan pr\u00e9d\u00e9finies.<\/p>\n<figure id=\"attachment_88326\" aria-describedby=\"caption-attachment-88326\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88326 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enable-this.png\" alt=\"Activer l'image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88326\" class=\"wp-caption-text\">Activer l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Il n&rsquo;y a pas beaucoup de choix dans la version gratuite, mais l\u2019extension en ajoute plus si vous d\u00e9cidez de passer \u00e0 la version premium.<\/p>\n<p>Allez-y et testez ces arri\u00e8re-plans pr\u00e9-d\u00e9finis pour voir s&rsquo;ils peuvent fonctionner pour votre marque.<\/p>\n<figure id=\"attachment_88325\" aria-describedby=\"caption-attachment-88325\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88325 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/changing-the-back.png\" alt=\"D\u00e9finir une galerie d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88325\" class=\"wp-caption-text\">D\u00e9finir une galerie d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Le chemin le plus probable est de t\u00e9l\u00e9verser votre propre image comme arri\u00e8re-plan de la page de connexion.<\/p>\n<p>Recherchez Image d&rsquo;arri\u00e8re-plan et cliquez sur le bouton <strong>S\u00e9lectionner une image<\/strong>.<\/p>\n<figure id=\"attachment_88324\" aria-describedby=\"caption-attachment-88324\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88324 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-image-s-s-s.png\" alt=\"Choisir l'option \u00ab S\u00e9lectionner une image \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88324\" class=\"wp-caption-text\">Choisir l&rsquo;option \u00ab S\u00e9lectionner une image \u00bb<\/figcaption><\/figure>\n<p>Vous serez amen\u00e9 dans la m\u00e9diath\u00e8que WordPress pour t\u00e9l\u00e9verser une image depuis votre ordinateur ou en choisir une qui est d\u00e9j\u00e0 dans WordPress.<\/p>\n<p>S\u00e9lectionnez la photo souhait\u00e9e et cliquez sur le bouton <strong>Choisir l\u2019image<\/strong>.<\/p>\n<figure id=\"attachment_88323\" aria-describedby=\"caption-attachment-88323\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88323 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choosing-that.png\" alt=\"Choisir l'image d'arri\u00e8re-plan de connexion WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88323\" class=\"wp-caption-text\">Choisir l&rsquo;image d&rsquo;arri\u00e8re-plan de connexion WordPress<\/figcaption><\/figure>\n<p>L&rsquo;image d&rsquo;arri\u00e8re-plan activ\u00e9e appara\u00eet sous forme de miniature dans le panneau Personnalisation et l&rsquo;aper\u00e7u r\u00e9el de votre page de connexion.<\/p>\n<figure id=\"attachment_88322\" aria-describedby=\"caption-attachment-88322\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88322 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-result-s-s.png\" alt=\"D\u00e9finir les options de l'image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88322\" class=\"wp-caption-text\">D\u00e9finir les options de l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Vous avez maintenant la possibilit\u00e9 de cliquer sur le bouton <strong>Publier<\/strong> et de vous en tenir \u00e0 ce qui est \u00e0 l&rsquo;\u00e9cran. Vous pouvez \u00e9galement faire d\u00e9filer les r\u00e9glages suppl\u00e9mentaires pour vous assurer que la meilleure vue de l&rsquo;image t\u00e9l\u00e9vers\u00e9e est actuellement active.<\/p>\n<p>Cliquez sur le champ d\u00e9roulant <strong>R\u00e9p\u00e9tition d\u2019arri\u00e8re-plan<\/strong> et testez des options telles que <strong>R\u00e9p\u00e9tition<\/strong>, <strong>Aucune r\u00e9p\u00e9tition<\/strong> et <strong>R\u00e9p\u00e9tition-x<\/strong>.<\/p>\n<p>Selon la taille de votre photo, vous pouvez ou non voir l&rsquo;image bouger un peu.<\/p>\n<figure id=\"attachment_88321\" aria-describedby=\"caption-attachment-88321\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88321 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/repeating.png\" alt=\"Choisir les r\u00e9glages de \u00ab R\u00e9p\u00e9tition d'arri\u00e8re-plan \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88321\" class=\"wp-caption-text\">Choisir les r\u00e9glages de \u00ab R\u00e9p\u00e9tition d&rsquo;arri\u00e8re-plan \u00bb<\/figcaption><\/figure>\n<p>Ensuite, parcourez les options de s\u00e9lection de position pour d\u00e9placer encore plus l&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Par d\u00e9faut, ils placent l&rsquo;image au centre de l&rsquo;\u00e9cran, mais il est parfois pr\u00e9f\u00e9rable de la placer quelque part comme en bas \u00e0 droite ou en haut \u00e0 gauche. Essayez-les tous pour d\u00e9terminer celui qui convient le mieux \u00e0 votre image d&rsquo;arri\u00e8re-plan<\/p>\n<figure id=\"attachment_88320\" aria-describedby=\"caption-attachment-88320\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88320 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-pos.png\" alt=\"S\u00e9lectionner la position d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88320\" class=\"wp-caption-text\">S\u00e9lectionner la position d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>\u00c0 l&rsquo;avenir, la liste d\u00e9roulante Taille de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress a des r\u00e9glages pour la fa\u00e7on dont l&rsquo;image recouvre l&rsquo;\u00e9cran, en ajustant sa taille avec chaque option pr\u00e9d\u00e9finie.<\/p>\n<p>Encore une fois, testez-les pour d\u00e9cider de ce qui vous convient le mieux. Vous constaterez peut-\u00eatre que quelque chose comme le r\u00e9glage Contenir offre une vue am\u00e9lior\u00e9e au lieu des r\u00e9glages Auto ou Couverture.<\/p>\n<figure id=\"attachment_88319\" aria-describedby=\"caption-attachment-88319\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88319 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enabling.png\" alt=\"D\u00e9finir la taille de l'image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88319\" class=\"wp-caption-text\">D\u00e9finir la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Et c&rsquo;est tout ce qu&rsquo;il faut pour t\u00e9l\u00e9verser et activer une image d&rsquo;arri\u00e8re-plan pour votre page de connexion !<\/p>\n<p>Le r\u00e9glage final est l\u00e0 si vous souhaitez afficher une vid\u00e9o en arri\u00e8re-plan au lieu d&rsquo;une image. Activez ce r\u00e9glage si vous avez une vid\u00e9o int\u00e9ressante li\u00e9e \u00e0 votre entreprise et que cela n&rsquo;attire pas trop l&rsquo;attention des personnes qui se connectent sur le site.<\/p>\n<figure id=\"attachment_88318\" aria-describedby=\"caption-attachment-88318\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88318 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/video-on.png\" alt=\"Activer la \u00ab vid\u00e9o d'arri\u00e8re-plan \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88318\" class=\"wp-caption-text\">Activer la \u00ab vid\u00e9o d&rsquo;arri\u00e8re-plan \u00bb<\/figcaption><\/figure>\n<p>Une fois que tout est fait, cliquez sur le bouton <strong>Publier<\/strong> pour activer l&rsquo;arri\u00e8re-plan de votre page de connexion et le voir s&rsquo;afficher chaque fois qu&rsquo;un utilisateur tente de s&rsquo;inscrire ou de se connecter au site.<\/p>\n<h3>Comment ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 votre menu de navigation<\/h3>\n<p>Vous avez peut-\u00eatre remarqu\u00e9 certains sites web avec des menus sophistiqu\u00e9s qui incluent des images ou des ic\u00f4nes d&rsquo;arri\u00e8re-plan. C&rsquo;est une pratique courante dans le monde du eCommerce, o\u00f9 la marque peut avoir un m\u00e9ga menu avec des cat\u00e9gories et des images d&rsquo;arri\u00e8re-plan pour chaque bouton de cat\u00e9gorie.<\/p>\n<p>Si vous souhaitez ajouter des arri\u00e8re-plans \u00e0 votre menu, consultez <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/\">notre article sur les meilleures extensions WordPress de menu<\/a>. Beaucoup de ces extensions de menu offrent des options pour inclure des images et des couleurs d\u2019arri\u00e8re-plan dans votre menu.<\/p>\n<p>\u00c9tant donn\u00e9 qu&rsquo;il existe plusieurs extensions pour ajouter un certain arri\u00e8re-plan pour les menus de navigation, nous fournirons des tutoriels pour deux, dont l&rsquo;un permet des arri\u00e8re-plans derri\u00e8re votre sous-menu. En revanche, l&rsquo;autre ajoute un arri\u00e8re-plan \u00e0 votre menu mobile.<\/p>\n<p>Pour ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 diff\u00e9rents sous-menus, installez et activez l\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/wp-megamenu\/\">WP Mega Menu<\/a>. Cette extension vous permet d&rsquo;activer et de g\u00e9rer un m\u00e9ga-menu avec plusieurs niveaux de liste d\u00e9roulante. Elle est id\u00e9ale pour les grandes boutiques en ligne, mais elle fait \u00e9galement l&rsquo;affaire pour des menus plus petits, surtout si vous souhaitez ajouter une image d&rsquo;arri\u00e8re-plan ou des ic\u00f4nes.<\/p>\n<figure id=\"attachment_89697\" aria-describedby=\"caption-attachment-89697\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89697 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/wp-mega-menu.png\" alt=\"Extension WP Mega Menu\" width=\"1402\" height=\"374\"><figcaption id=\"caption-attachment-89697\" class=\"wp-caption-text\">Extension WP Mega Menu<\/figcaption><\/figure>\n<p>Commencez par trouver l&rsquo;onglet WP Mega Menu dans le tableau de bord WordPress.<\/p>\n<p>Cliquez sur l&rsquo;\u00e9l\u00e9ment de menu <strong>Th\u00e8mes<\/strong>.<\/p>\n<figure id=\"attachment_89695\" aria-describedby=\"caption-attachment-89695\" style=\"width: 1240px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89695 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themes-s-s.png\" alt=\"Acc\u00e9der au panneau \u00ab Th\u00e8mes \u00bb\" width=\"1240\" height=\"905\"><figcaption id=\"caption-attachment-89695\" class=\"wp-caption-text\">Acc\u00e9der au panneau \u00ab Th\u00e8mes \u00bb<\/figcaption><\/figure>\n<p>Ici, vous pouvez voir une liste de th\u00e8mes par d\u00e9faut cr\u00e9\u00e9s pour votre menu par l\u2019extension.<\/p>\n<p>Vous pouvez cliquer pour modifier l&rsquo;un des th\u00e8mes ou ajouter votre propre design \u00e0 partir de z\u00e9ro.<\/p>\n<figure id=\"attachment_89694\" aria-describedby=\"caption-attachment-89694\" style=\"width: 1867px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89694 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/see-themes.png\" alt=\"Les nombreux th\u00e8mes Mega Menu\" width=\"1867\" height=\"841\"><figcaption id=\"caption-attachment-89694\" class=\"wp-caption-text\">Les nombreux th\u00e8mes Mega Menu<\/figcaption><\/figure>\n<p>Chaque th\u00e8me a ses propres r\u00e9glages dans lesquels vous sp\u00e9cifiez des \u00e9l\u00e9ments tels que le titre du th\u00e8me, les options de la barre de menu et le logo de la marque. Presque toutes les parties de votre menu sont personnalisables, du menu d\u00e9roulant aux sous-menus.<\/p>\n<p>Cependant, pour l&rsquo;arri\u00e8re-plan du menu, il vous suffit de savoir quel th\u00e8me vous souhaitez choisir.<\/p>\n<figure id=\"attachment_89693\" aria-describedby=\"caption-attachment-89693\" style=\"width: 1757px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89693 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/main-sets.png\" alt=\"D\u00e9finir les r\u00e9glages du th\u00e8me Mega Menu\" width=\"1757\" height=\"843\"><figcaption id=\"caption-attachment-89693\" class=\"wp-caption-text\">D\u00e9finir les r\u00e9glages du th\u00e8me Mega Menu<\/figcaption><\/figure>\n<p>Acc\u00e9dez \u00e0 <strong>Apparence &gt; Menus<\/strong> dans le tableau de bord.<\/p>\n<figure id=\"attachment_89692\" aria-describedby=\"caption-attachment-89692\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89692 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/app-menu.png\" alt=\"Allez dans \u00ab Apparence &gt; Menus \u00bb\" width=\"1470\" height=\"737\"><figcaption id=\"caption-attachment-89692\" class=\"wp-caption-text\">Allez dans \u00ab Apparence &gt; Menus \u00bb<\/figcaption><\/figure>\n<p>Vous verrez un nouveau module qui renvoie aux <strong>r\u00e9glages de Mega Menu<\/strong>.<\/p>\n<p>Cliquez pour <strong>activer<\/strong> le m\u00e9ga menu, puis choisissez celui que vous pr\u00e9f\u00e9rez pour votre site.<\/p>\n<p>Enfin, cliquez sur le bouton <strong>Enregistrer<\/strong>.<\/p>\n<figure id=\"attachment_89691\" aria-describedby=\"caption-attachment-89691\" style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89691 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/enable-it-s.png\" alt=\"Cliquer sur le bouton \u00ab Activer \u00bb\" width=\"1471\" height=\"901\"><figcaption id=\"caption-attachment-89691\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Activer \u00bb<\/figcaption><\/figure>\n<p>Maintenant, portez votre attention sur la zone <strong>Structure du menu<\/strong>.<\/p>\n<p>Faire d\u00e9filer l&rsquo;un de vos \u00e9l\u00e9ments de menu actuels r\u00e9v\u00e8le un bouton <strong>WP Mega Menu<\/strong>. C&rsquo;est ici que vous personnalisez la mise en page et la conception de chaque section d\u00e9roulante.<\/p>\n<p>Cliquez sur le bouton <strong>WP Mega Menu<\/strong> pour tout \u00e9l\u00e9ment de menu souhait\u00e9. Dans ce cas, nous ajouterons un m\u00e9ga-menu d\u00e9roulant \u00e0 l&rsquo;onglet Boutique.<\/p>\n<p><strong>Note :<\/strong> Nous supposons que vous avez d\u00e9j\u00e0 un menu configur\u00e9 sur votre site WordPress. Lisez notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\">guide du menu d\u00e9roulant WordPress<\/a> si vous avez besoin d&rsquo;aide.<\/p>\n<figure id=\"attachment_89690\" aria-describedby=\"caption-attachment-89690\" style=\"width: 1455px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89690 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/selected-on.png\" alt=\"Ajouter le m\u00e9ga menu \u00e0 votre site\" width=\"1455\" height=\"857\"><figcaption id=\"caption-attachment-89690\" class=\"wp-caption-text\">Ajouter le m\u00e9ga menu \u00e0 votre site<\/figcaption><\/figure>\n<p>Dans la nouvelle fen\u00eatre contextuelle, actionnez le commutateur pour activer le Mega Menu pour cet \u00e9l\u00e9ment de menu particulier.<\/p>\n<p>Vous pouvez ensuite ajouter une ligne d\u00e9roulante et faire glisser certains des nombreux widgets du c\u00f4t\u00e9 gauche vers cette ligne. Par exemple, nous allons faire glisser une liste de produits afin qu&rsquo;ils apparaissent lorsque quelqu&rsquo;un fait d\u00e9filer l&rsquo;\u00e9l\u00e9ment de menu Boutique.<\/p>\n<figure id=\"attachment_89689\" aria-describedby=\"caption-attachment-89689\" style=\"width: 1855px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89689 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row.png\" alt=\"Cliquer sur le bouton \u00ab Ajouter maintenant \u00bb\" width=\"1855\" height=\"918\"><figcaption id=\"caption-attachment-89689\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Ajouter maintenant \u00bb<\/figcaption><\/figure>\n<p>Pour ajouter un arri\u00e8re-plan \u00e0 cette zone de liste d\u00e9roulante, cliquez sur le bouton <strong>Options<\/strong> dans le coin inf\u00e9rieur gauche.<\/p>\n<figure id=\"attachment_89688\" aria-describedby=\"caption-attachment-89688\" style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89688 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/options-s-s.png\" alt=\"Choisir le lien \u00ab Options \u00bb\" width=\"1701\" height=\"916\"><figcaption id=\"caption-attachment-89688\" class=\"wp-caption-text\">Choisir le lien \u00ab Options \u00bb<\/figcaption><\/figure>\n<p>Recherchez le champ <strong>T\u00e9l\u00e9verser une image d&rsquo;arri\u00e8re-plan<\/strong>.<\/p>\n<p>Cliquez sur le bouton <strong>T\u00e9l\u00e9verser<\/strong> pour trouver la bonne photo dans votre m\u00e9diath\u00e8que afin de l&rsquo;utiliser comme arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89687\" aria-describedby=\"caption-attachment-89687\" style=\"width: 1751px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89687 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-bg-up.png\" alt=\"S\u00e9lectionner le bouton \u00ab T\u00e9l\u00e9verser l'image \u00bb\" width=\"1751\" height=\"785\"><figcaption id=\"caption-attachment-89687\" class=\"wp-caption-text\">S\u00e9lectionner le bouton \u00ab T\u00e9l\u00e9verser l&rsquo;image \u00bb<\/figcaption><\/figure>\n<p>Une miniature d&rsquo;image appara\u00eet une fois que vous l&rsquo;avez s\u00e9lectionn\u00e9e dans la m\u00e9diath\u00e8que.<\/p>\n<p>Il y a d&rsquo;autres r\u00e9glages \u00e0 prendre en compte, alors n&rsquo;h\u00e9sitez pas \u00e0 les v\u00e9rifier si vous le souhaitez.<\/p>\n<figure id=\"attachment_89686\" aria-describedby=\"caption-attachment-89686\" style=\"width: 1768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89686 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-image-uploaded.png\" alt=\"V\u00e9rifier la miniature\" width=\"1768\" height=\"728\"><figcaption id=\"caption-attachment-89686\" class=\"wp-caption-text\">V\u00e9rifier la miniature<\/figcaption><\/figure>\n<p>Assurez-vous de cliquer sur le bouton <strong>Enregistrer les modifications<\/strong> en bas du panneau <strong>Options<\/strong>.<\/p>\n<figure id=\"attachment_89685\" aria-describedby=\"caption-attachment-89685\" style=\"width: 1767px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89685 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-them-s-s.png\" alt=\"Cliquer sur le bouton \u00ab Enregistrer les modifications \u00bb\" width=\"1767\" height=\"864\"><figcaption id=\"caption-attachment-89685\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Enregistrer les modifications \u00bb<\/figcaption><\/figure>\n<p>Vous devez \u00e9galement cliquer sur Enregistrer le menu dans la zone Structure du menu du tableau de bord WordPress.<\/p>\n<figure id=\"attachment_89684\" aria-describedby=\"caption-attachment-89684\" style=\"width: 1887px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89684 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-menu-s.png\" alt=\"Cliquer sur le bouton \u00ab Enregistrer le menu \u00bb\" width=\"1887\" height=\"877\"><figcaption id=\"caption-attachment-89684\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Enregistrer le menu \u00bb<\/figcaption><\/figure>\n<p>Maintenant, acc\u00e9dez \u00e0 l&rsquo;interface publique de votre site pour voir le menu. Si vous faites d\u00e9filer l&rsquo;\u00e9l\u00e9ment que nous venons de personnaliser, vous devriez voir une section d\u00e9roulante avec l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89683\" aria-describedby=\"caption-attachment-89683\" style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89683 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-shop-bg.png\" alt=\"Le menu a maintenant une image d'arri\u00e8re-plan\" width=\"1900\" height=\"867\"><figcaption id=\"caption-attachment-89683\" class=\"wp-caption-text\">Le menu a maintenant une image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Une autre fa\u00e7on d&rsquo;ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 un menu consiste \u00e0 utiliser un menu mobile et responsive qui s&rsquo;affiche lorsque quelqu&rsquo;un acc\u00e8de \u00e0 votre site via un appareil mobile.<\/p>\n<p>Vous pouvez placer un arri\u00e8re-plan derri\u00e8re le menu mobile \u00e0 l&rsquo;aide de l\u2019extension <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-wordpress-mobile\/#wp-mobile-menu\">WP Mobile Menu<\/a>.<\/p>\n<figure id=\"attachment_89682\" aria-describedby=\"caption-attachment-89682\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89682 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WP-Mobile-Menu.png\" alt=\"Extension WP Mobile Menu\" width=\"1640\" height=\"433\"><figcaption id=\"caption-attachment-89682\" class=\"wp-caption-text\">Extension WP Mobile Menu<\/figcaption><\/figure>\n<p>Apr\u00e8s avoir install\u00e9 et activ\u00e9 l\u2019extension WP Mobile Menu, acc\u00e9dez aux Options du menu mobile dans le tableau de bord WordPress.<\/p>\n<figure id=\"attachment_89681\" aria-describedby=\"caption-attachment-89681\" style=\"width: 1361px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89681 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/mobile-menu-options.png\" alt=\"Acc\u00e9der au lien \u00ab Options du menu mobile \u00bb\" width=\"1361\" height=\"906\"><figcaption id=\"caption-attachment-89681\" class=\"wp-caption-text\">Acc\u00e9der au lien \u00ab Options du menu mobile \u00bb<\/figcaption><\/figure>\n<p>L\u2019extension propose plusieurs fa\u00e7ons de configurer votre menu mobile. La condition g\u00e9n\u00e9rale est d&rsquo;activer l&rsquo;un des formats de menu et d&rsquo;indiquer le menu WordPress que vous souhaitez utiliser pour ce menu mobile.<\/p>\n<p>Par exemple, nous pouvons cliquer sur le commutateur <strong>Activer le menu de gauche<\/strong> (activer un menu mobile qui se trouve sur le c\u00f4t\u00e9 gauche de l&rsquo;\u00e9cran) et choisir l\u2019option <strong>Menu principal<\/strong> dans la liste d\u00e9roulante <strong>Menu de gauche<\/strong>. Cela relie notre menu principal actuel au menu mobile, de sorte que les visiteurs voient les m\u00eames onglets.<\/p>\n<figure id=\"attachment_89680\" aria-describedby=\"caption-attachment-89680\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89680 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/turn-on-a-menu.png\" alt=\"D\u00e9finir les options du menu mobile\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89680\" class=\"wp-caption-text\">D\u00e9finir les options du menu mobile<\/figcaption><\/figure>\n<p>Cela d\u00e9pend du type de menu mobile que vous cr\u00e9ez, mais puisque nous cr\u00e9ons un menu de gauche, nous pouvons cliquer sur l&rsquo;onglet Menu de gauche pour r\u00e9v\u00e9ler les r\u00e9glages appropri\u00e9s pour ajouter un arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89679\" aria-describedby=\"caption-attachment-89679\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89679 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/left-menu.png\" alt=\"Choisir les r\u00e9glages du menu de gauche\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89679\" class=\"wp-caption-text\">Choisir les r\u00e9glages du menu de gauche<\/figcaption><\/figure>\n<p>Faites d\u00e9filer jusqu&rsquo;au champ <strong>Image d&rsquo;arri\u00e8re-plan du panneau<\/strong> et cliquez sur le signe \u00ab <strong>+<\/strong> \u00bb pour ouvrir la m\u00e9diath\u00e8que.<\/p>\n<figure id=\"attachment_89678\" aria-describedby=\"caption-attachment-89678\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89678 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-panel.png\" alt=\"Ajouter une image d'arri\u00e8re-plan pour le menu mobile\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89678\" class=\"wp-caption-text\">Ajouter une image d&rsquo;arri\u00e8re-plan pour le menu mobile<\/figcaption><\/figure>\n<p>S\u00e9lectionnez une image dans votre m\u00e9diath\u00e8que et ajoutez-la dans le champ.<\/p>\n<p>Vous devriez voir une version miniature de l&rsquo;image d&rsquo;arri\u00e8re-plan comme confirmation.<\/p>\n<p>S\u00e9lectionnez le bouton <strong>Enregistrer les modifications<\/strong> pour activer l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89677\" aria-describedby=\"caption-attachment-89677\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89677 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-the-change.png\" alt=\"V\u00e9rifiez l'image d'arri\u00e8re-plan avec la miniature\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89677\" class=\"wp-caption-text\">V\u00e9rifiez l&rsquo;image d&rsquo;arri\u00e8re-plan avec la miniature<\/figcaption><\/figure>\n<p>Vu comment l\u2019extension g\u00e9n\u00e8re des menus mobiles, le menu peut n&rsquo;appara\u00eetre que lorsque votre navigateur est d\u00e9fini sur une largeur \u00e9troite ou lorsque vous acc\u00e9dez \u00e0 votre site sur un t\u00e9l\u00e9phone ou une tablette.<\/p>\n<p>Le nouveau menu est consolid\u00e9 sous une ic\u00f4ne de hamburger (trois lignes horizontales).<\/p>\n<p>Cliquez dessus pour tester le nouveau menu avec l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89676\" aria-describedby=\"caption-attachment-89676\" style=\"width: 1196px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89676 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/click-on-it-now.png\" alt=\"Cliquez sur l'ic\u00f4ne du menu hamburger\" width=\"1196\" height=\"844\"><figcaption id=\"caption-attachment-89676\" class=\"wp-caption-text\">Cliquez sur l&rsquo;ic\u00f4ne du menu hamburger<\/figcaption><\/figure>\n<p>Comme le montre la capture d&rsquo;\u00e9cran, l&rsquo;arri\u00e8re-plan est plac\u00e9 derri\u00e8re tout le menu mobile pour que tout le monde puisse le voir.<\/p>\n<figure id=\"attachment_89675\" aria-describedby=\"caption-attachment-89675\" style=\"width: 1195px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89675 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-finished-product-background.png\" alt=\"Menu mobile avec une image d\u2019arri\u00e8re-plan\" width=\"1195\" height=\"826\"><figcaption id=\"caption-attachment-89675\" class=\"wp-caption-text\">Menu mobile avec une image d\u2019arri\u00e8re-plan<\/figcaption><\/figure>\n<h3>Comment ajouter une image d&rsquo;arri\u00e8re-plan WordPress \u00e0 une page de maintenance<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/maintenance-wordpress\/\">Tous les sites web n\u00e9cessitent parfois une maintenance<\/a>, et parfois cette maintenance prend tellement de temps que l&rsquo;affichage d&rsquo;une page de maintenance aide.<\/p>\n<p>Les images d&rsquo;arri\u00e8re-plan jouent un r\u00f4le important lors de l&rsquo;utilisation <a href=\"https:\/\/kinsta.com\/fr\/blog\/mode-maintenance-wordpress\/\">des pages de maintenance<\/a>. La plupart des pages de maintenance se composent d&rsquo;une image d&rsquo;arri\u00e8re-plan en plein \u00e9cran et peut-\u00eatre de texte ou de liens avec plus de ressources.<\/p>\n<p>Si vous avez d\u00e9j\u00e0 une page de maintenance et qu&rsquo;elle n&rsquo;inclut pas d&rsquo;image d&rsquo;arri\u00e8re-plan, consid\u00e9rez les \u00e9tapes suivantes pour g\u00e9n\u00e9rer un bel environnement lorsque vous devrez peut-\u00eatre fermer votre site web du public pendant un certain temps.<\/p>\n<p>Vous pouvez ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 une page de maintenance \u00e0 l&rsquo;aide de l\u2019<a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">extension Maintenance<\/a>. Installez et activez l\u2019extension sur votre site web.<\/p>\n<figure id=\"attachment_88688\" aria-describedby=\"caption-attachment-88688\" style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88688 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance.png\" alt=\"Extension maintenance\" width=\"1328\" height=\"431\"><figcaption id=\"caption-attachment-88688\" class=\"wp-caption-text\">Extension maintenance<\/figcaption><\/figure>\n<p>Une fois qu&rsquo;elle est activ\u00e9e, recherchez le bouton <strong>Maintenance activ\u00e9e \/ d\u00e9sactiv\u00e9e<\/strong> en haut du tableau de bord.<\/p>\n<p>Cliquez sur le bouton pour acc\u00e9der \u00e0 la page des r\u00e9glages de l\u2019extension Maintenance.<\/p>\n<figure id=\"attachment_88687\" aria-describedby=\"caption-attachment-88687\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88687 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/off.png\" alt=\"Cliquez sur le lien \u00ab Maintenance d\u00e9sactiv\u00e9e \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88687\" class=\"wp-caption-text\">Cliquez sur le lien \u00ab Maintenance d\u00e9sactiv\u00e9e \u00bb<\/figcaption><\/figure>\n<p>Une autre fa\u00e7on d&rsquo;acc\u00e9der \u00e0 la page des r\u00e9glages consiste \u00e0 cliquer sur l&rsquo;\u00e9l\u00e9ment de menu <strong>Maintenance<\/strong> dans le menu lat\u00e9ral du tableau de bord.<\/p>\n<figure id=\"attachment_88686\" aria-describedby=\"caption-attachment-88686\" style=\"width: 1614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88686 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-on-bottom.png\" alt=\"Cliquer sur l'\u00e9l\u00e9ment de menu \u00ab Maintenance \u00bb\" width=\"1614\" height=\"909\"><figcaption id=\"caption-attachment-88686\" class=\"wp-caption-text\">Cliquer sur l&rsquo;\u00e9l\u00e9ment de menu \u00ab Maintenance \u00bb<\/figcaption><\/figure>\n<p>La page des r\u00e9glages de l\u2019extension Maintenance a une collection d\u00e9cente d&rsquo;options \u00e0 personnaliser, mais la zone principale \u00e0 consid\u00e9rer est le module des <strong>R\u00e9glages g\u00e9n\u00e9raux<\/strong>. Ici, vous pouvez \u00e9crire un titre et une description, qui servent tous deux de texte qui se superpose au-dessus de l&rsquo;arri\u00e8re-plan que nous sommes sur le point d&rsquo;ins\u00e9rer.<\/p>\n<p>Le titre de la page appara\u00eet dans l&rsquo;onglet du navigateur, vous devriez donc envisager de le personnaliser \u00e9galement.<\/p>\n<p>Vous pouvez utiliser l\u2019extension Maintenance pour tout, des pages de maintenance aux pages Prochainement, vous pouvez donc \u00e9crire quelque chose comme \u00ab\u00a0Notre site est en cours de maintenance\u00a0\u00bb, ou vous pouvez afficher un peu d&rsquo;informations sur votre entreprise et inclure un formulaire o\u00f9 les gens peuvent saisir leurs adresses e-mail.<\/p>\n<figure id=\"attachment_88685\" aria-describedby=\"caption-attachment-88685\" style=\"width: 1622px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88685 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-ss.png\" alt=\"Ajouter un titre pour la page de maintenance\" width=\"1622\" height=\"940\"><figcaption id=\"caption-attachment-88685\" class=\"wp-caption-text\">Ajouter un titre pour la page de maintenance<\/figcaption><\/figure>\n<p>En continuant, l\u2019extension offre une option pour t\u00e9l\u00e9verser votre logo, qui se superpose \u00e9galement au-dessus de l&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88684\" aria-describedby=\"caption-attachment-88684\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88684 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-up.png\" alt=\"Bouton \u00ab T\u00e9l\u00e9verser un logo \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88684\" class=\"wp-caption-text\">Bouton \u00ab T\u00e9l\u00e9verser un logo \u00bb<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>T\u00e9l\u00e9verser un logo<\/strong> et choisissez votre logo pour voir sa miniature dans le tableau de bord.<\/p>\n<figure id=\"attachment_88683\" aria-describedby=\"caption-attachment-88683\" style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88683 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-in.png\" alt=\"Logo de la page de maintenance\" width=\"1618\" height=\"940\"><figcaption id=\"caption-attachment-88683\" class=\"wp-caption-text\">Logo de la page de maintenance<\/figcaption><\/figure>\n<p>Enfin, le champ Image d&rsquo;arri\u00e8re-plan vous demande de cliquer sur T\u00e9l\u00e9verser une image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>T\u00e9l\u00e9versez une image depuis votre ordinateur ou parcourez votre m\u00e9diath\u00e8que pour trouver un arri\u00e8re-plan adapt\u00e9 \u00e0 la page de maintenance.<\/p>\n<p><strong>Note :<\/strong> Les meilleures images d&rsquo;arri\u00e8re-plan de maintenance sont grandes, en haute d\u00e9finition et en orientation paysage. Une alternative d&rsquo;arri\u00e8re-plan en \u00ab\u00a0Mode Portrait\u00a0\u00bb est disponible dans les r\u00e9glages ci-dessous.<\/p>\n<figure id=\"attachment_88682\" aria-describedby=\"caption-attachment-88682\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88682 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/upload-back.png\" alt=\"Cliquer sur le bouton \u00ab T\u00e9l\u00e9verser un arri\u00e8re-plan \u00bb\" width=\"1616\" height=\"940\"><figcaption id=\"caption-attachment-88682\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab T\u00e9l\u00e9verser un arri\u00e8re-plan \u00bb<\/figcaption><\/figure>\n<p>Une fois que vous avez choisi l&rsquo;arri\u00e8re-plan, il appara\u00eet sous la forme d&rsquo;un aper\u00e7u miniature plus petit dans le tableau de bord.<\/p>\n<figure id=\"attachment_88681\" aria-describedby=\"caption-attachment-88681\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88681 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-one.png\" alt=\"La miniature de l'image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88681\" class=\"wp-caption-text\">La miniature de l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Bien qu&rsquo;une image d&rsquo;arri\u00e8re-plan avec une orientation en paysage soit la plus logique pour les ordinateurs de bureau et les \u00e9crans plus larges, de nombreuses personnes se retrouvent sur votre site en utilisant des \u00e9crans avec une orientation portrait, comme avec un t\u00e9l\u00e9phone tenu verticalement.<\/p>\n<p>Par cons\u00e9quent, une image d&rsquo;arri\u00e8re-plan plus large ne sera pas aussi belle. C&rsquo;est pourquoi l\u2019extension propose une image d&rsquo;arri\u00e8re-plan en mode portrait qui sert d&rsquo;alternative, qui est permut\u00e9e de mani\u00e8re responsive chaque fois qu&rsquo;un utilisateur visite la page \u00e0 l&rsquo;aide d&rsquo;un \u00e9cran orient\u00e9 en portrait.<\/p>\n<p>Il est important d&rsquo;inclure une image dans ce champ, cliquez donc sur le bouton <strong>T\u00e9l\u00e9verser une image pour une orientation de l&rsquo;appareil en portrait<\/strong>.<\/p>\n<figure id=\"attachment_88680\" aria-describedby=\"caption-attachment-88680\" style=\"width: 1615px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88680 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port.png\" alt=\"T\u00e9l\u00e9verser une image d'arri\u00e8re-plan en orientation portrait\" width=\"1615\" height=\"912\"><figcaption id=\"caption-attachment-88680\" class=\"wp-caption-text\">T\u00e9l\u00e9verser une image d&rsquo;arri\u00e8re-plan en orientation portrait<\/figcaption><\/figure>\n<p>Cette fois, trouvez une image plus haute que large (mode portrait). Vous pouvez toujours recadrer l&rsquo;image d&rsquo;arri\u00e8re-plan d&rsquo;origine pour en faire un portrait, ou vous avez la possibilit\u00e9 de t\u00e9l\u00e9verser une image compl\u00e8tement diff\u00e9rente pour remplir l&rsquo;endroit.<\/p>\n<p>Mettez en \u00e9vidence l&rsquo;image souhait\u00e9e et cliquez sur le bouton <strong>S\u00e9lectionner l\u2019image<\/strong> pour l&rsquo;ins\u00e9rer dans le tableau de bord.<\/p>\n<figure id=\"attachment_88679\" aria-describedby=\"caption-attachment-88679\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88679 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port-mode.png\" alt=\"Choisir l'image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88679\" class=\"wp-caption-text\">Choisir l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Tous ces r\u00e9glages ne signifient rien \u00e0 moins que vous n&rsquo;activiez le mode maintenance.<\/p>\n<p>Pour ce faire, localisez le commutateur Marche \/ Arr\u00eat de Maintenance en haut de la page des R\u00e9glages.<\/p>\n<figure id=\"attachment_88678\" aria-describedby=\"caption-attachment-88678\" style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88678 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/offff.png\" alt=\"R\u00e9gler la page de maintenance sur \u00ab On \u00bb ou \u00ab Off \u00bb\" width=\"1620\" height=\"940\"><figcaption id=\"caption-attachment-88678\" class=\"wp-caption-text\">R\u00e9gler la page de maintenance sur \u00ab On \u00bb ou \u00ab Off \u00bb<\/figcaption><\/figure>\n<p>Basculez le commutateur pour qu&rsquo;il indique \u00ab On\u00a0\u00bb, puis s\u00e9lectionnez le bouton <strong>Enregistrer les modifications<\/strong>.<\/p>\n<figure id=\"attachment_88677\" aria-describedby=\"caption-attachment-88677\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88677 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-theme.png\" alt=\"Activer la page de maintenance\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-88677\" class=\"wp-caption-text\">Activer la page de maintenance<\/figcaption><\/figure>\n<p>Acc\u00e9dez \u00e0 l&rsquo;interface publique de votre site pour vous assurer que l&rsquo;image d&rsquo;arri\u00e8re-plan et la page de maintenance s&rsquo;affichent correctement.<\/p>\n<p>Il y a de fortes chances que ce ne soit pas le cas.<\/p>\n<p>Il y a deux raisons \u00e0 cela : Tout d&rsquo;abord, vous devez vous d\u00e9connecter de votre compte WordPress pour voir le site en mode maintenance. Deuxi\u00e8mement, vous devrez peut-\u00eatre <a href=\"https:\/\/kinsta.com\/fr\/blog\/vider-cache-wordpress\/\">vider le cache du site<\/a> pour mettre \u00e0 jour la modification du contenu.<\/p>\n<figure id=\"attachment_88676\" aria-describedby=\"caption-attachment-88676\" style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88676 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/nothing-show.png\" alt=\"Voir le site en \u00ab Mode maintenance \u00bb\" width=\"1270\" height=\"836\"><figcaption id=\"caption-attachment-88676\" class=\"wp-caption-text\">Voir le site en \u00ab Mode maintenance \u00bb<\/figcaption><\/figure>\n<p>Par exemple, lorsque je me d\u00e9connecte du compte administrateur, la page de maintenance s&rsquo;affiche maintenant lorsque je vais sur n&rsquo;importe quelle page.<\/p>\n<p>L&rsquo;image d&rsquo;arri\u00e8re-plan est l\u00e0, avec mes personnalisations comme le logo et le texte de description.<\/p>\n<figure id=\"attachment_88675\" aria-describedby=\"caption-attachment-88675\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88675 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-page.png\" alt=\"L'image d'arri\u00e8re-plan sur la page de maintenance\" width=\"1920\" height=\"1040\"><figcaption id=\"caption-attachment-88675\" class=\"wp-caption-text\">L&rsquo;image d&rsquo;arri\u00e8re-plan sur la page de maintenance<\/figcaption><\/figure>\n<p>En outre, changer la taille des fen\u00eatres du navigateur pour une orientation plus en portrait met en place l&rsquo;arri\u00e8re-plan du mode portrait.<\/p>\n<p>Vous devriez \u00e9galement voir le mode portrait lorsque vous visitez le site sur un t\u00e9l\u00e9phone ou une tablette.<\/p>\n<figure id=\"attachment_88674\" aria-describedby=\"caption-attachment-88674\" style=\"width: 889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88674 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/portrait-example.png\" alt=\"L'image d'arri\u00e8re-plan en mode portrait\" width=\"889\" height=\"1006\"><figcaption id=\"caption-attachment-88674\" class=\"wp-caption-text\">L&rsquo;image d&rsquo;arri\u00e8re-plan en mode portrait<\/figcaption><\/figure>\n<p>Un autre type d&rsquo;image d&rsquo;arri\u00e8re-plan avec l\u2019extension est appel\u00e9 une image de pr\u00e9chargement. Cela charge essentiellement une image rapide avec un effet anim\u00e9 avant de r\u00e9v\u00e9ler la page de maintenance, l&rsquo;arri\u00e8re-plan et le contenu.<\/p>\n<p>Comme l&rsquo;image d&rsquo;arri\u00e8re-plan normale, cliquez sur le bouton <strong>T\u00e9l\u00e9verser le pr\u00e9-chargeur<\/strong> pour trouver une image qui a l&rsquo;air jolie et l&rsquo;ajouter au tableau de bord.<\/p>\n<p>Encore une fois, cliquez sur le bouton <strong>Enregistrer les modifications<\/strong> et videz le cache.<\/p>\n<figure id=\"attachment_88700\" aria-describedby=\"caption-attachment-88700\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88700 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/preload.png\" alt=\"Cliquer sur le bouton \u00ab T\u00e9l\u00e9verser le pr\u00e9-chargeur \u00bb\" width=\"1616\" height=\"940\"><figcaption id=\"caption-attachment-88700\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab T\u00e9l\u00e9verser le pr\u00e9-chargeur \u00bb<\/figcaption><\/figure>\n<p>Par d\u00e9faut, l&rsquo;effet d\u2019<strong>image de pr\u00e9chargement<\/strong> tourne pendant un moment, puis dispara\u00eet pour pr\u00e9senter la page de maintenance et l&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>C&rsquo;est \u00e0 vous de d\u00e9cider si vous souhaitez ou non conserver ce type d&rsquo;effet.<\/p>\n<figure id=\"attachment_88689\" aria-describedby=\"caption-attachment-88689\" style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88689 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/2021-02-03_11-55-51.gif\" alt=\"Ajouter un effet d'introduction \u00e0 l'image d'arri\u00e8re-plan\" width=\"1280\" height=\"720\"><figcaption id=\"caption-attachment-88689\" class=\"wp-caption-text\">Ajouter un effet d&rsquo;introduction \u00e0 l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Plusieurs autres \u00e9l\u00e9ments d&rsquo;arri\u00e8re-plan sont disponibles pour que vous puissiez exp\u00e9rimenter dans le panneau des r\u00e9glages de l\u2019extension Maintenance.<\/p>\n<p>Par exemple, vous souhaiterez peut-\u00eatre ajouter une couleur d&rsquo;arri\u00e8re-plan au lieu d&rsquo;une image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Si tel est le cas, acc\u00e9dez au champ <strong>Couleur d&rsquo;arri\u00e8re-plan<\/strong> et s\u00e9lectionnez une couleur qui correspond \u00e0 votre marque.<\/p>\n<figure id=\"attachment_88699\" aria-describedby=\"caption-attachment-88699\" style=\"width: 1617px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88699 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-col.png\" alt=\"Ouvrir le champ de couleur d'arri\u00e8re-plan\" width=\"1617\" height=\"940\"><figcaption id=\"caption-attachment-88699\" class=\"wp-caption-text\">Ouvrir le champ de couleur d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>La couleur d&rsquo;arri\u00e8re-plan ne s&rsquo;affiche pas pour la page de maintenance, sauf si vous d\u00e9sactivez toutes les autres images d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Assurez-vous donc de supprimer l&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_88698\" aria-describedby=\"caption-attachment-88698\" style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88698 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-s.png\" alt=\"Supprimer l'image d'arri\u00e8re-plan\" width=\"1618\" height=\"940\"><figcaption id=\"caption-attachment-88698\" class=\"wp-caption-text\">Supprimer l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Vous devez \u00e9galement supprimer l&rsquo;image d&rsquo;arri\u00e8re-plan du mode Portrait.<\/p>\n<figure id=\"attachment_88697\" aria-describedby=\"caption-attachment-88697\" style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88697 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-both.png\" alt=\"D\u00e9finir l'image d'arri\u00e8re-plan du mode portrait\" width=\"1620\" height=\"940\"><figcaption id=\"caption-attachment-88697\" class=\"wp-caption-text\">D\u00e9finir l&rsquo;image d&rsquo;arri\u00e8re-plan du mode portrait<\/figcaption><\/figure>\n<p>Enregistrez les modifications et videz le cache. Rendez-vous ensuite sur l\u2019interface publique de votre site pour voir la couleur d&rsquo;arri\u00e8re-plan en place.<\/p>\n<figure id=\"attachment_88696\" aria-describedby=\"caption-attachment-88696\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88696 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-color.png\" alt=\"Aller sur l\u2019interface publique du site\" width=\"1920\" height=\"1040\"><figcaption id=\"caption-attachment-88696\" class=\"wp-caption-text\">Aller sur l\u2019interface publique du site<\/figcaption><\/figure>\n<p>Les r\u00e9glages \u00e0 prendre en compte incluent des \u00e9l\u00e9ments tels que la couleur de la police, la famille de polices et le flou d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Nous vous recommandons \u00e9galement de vous demander si vous avez besoin ou non d&rsquo;une connexion sur l\u2019interface publique. Cela permet aux utilisateurs de se connecter \u00e0 leurs comptes et d&rsquo;acc\u00e9der aux profils si n\u00e9cessaire.<\/p>\n<p>Une fois que tout est fait, cliquez sur le bouton <strong>Enregistrer les modifications<\/strong>.<\/p>\n<figure id=\"attachment_88695\" aria-describedby=\"caption-attachment-88695\" style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88695 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-setttings.png\" alt=\"D\u00e9finir la couleur de la police\" width=\"1366\" height=\"926\"><figcaption id=\"caption-attachment-88695\" class=\"wp-caption-text\">D\u00e9finir la couleur de la police<\/figcaption><\/figure>\n<p>L\u2019extension Maintenance propose \u00e9galement plusieurs th\u00e8mes pr\u00e9d\u00e9finis avec de belles images d&rsquo;arri\u00e8re-plan et des mises en page et du texte con\u00e7us par des professionnels.<\/p>\n<p>Vous pouvez trouver des th\u00e8mes pour les mises en page de page et de maintenance \u00e0 venir, ainsi que des pages pour collecter des adresses e-mail et d&rsquo;autres informations de contact.<\/p>\n<p>Vous devez acheter les th\u00e8mes pour les utiliser.<\/p>\n<figure id=\"attachment_88694\" aria-describedby=\"caption-attachment-88694\" style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88694 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themess.png\" alt=\"Acheter un th\u00e8me premium\" width=\"1471\" height=\"940\"><figcaption id=\"caption-attachment-88694\" class=\"wp-caption-text\">Acheter un th\u00e8me premium<\/figcaption><\/figure>\n<p>Selon votre budget, ils sont plut\u00f4t bon march\u00e9 et ont fi\u00e8re allure.<\/p>\n<figure id=\"attachment_88693\" aria-describedby=\"caption-attachment-88693\" style=\"width: 1775px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88693 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/example-3.png\" alt=\"Un exemple de mod\u00e8le\" width=\"1775\" height=\"924\"><figcaption id=\"caption-attachment-88693\" class=\"wp-caption-text\">Un exemple de mod\u00e8le<\/figcaption><\/figure>\n<p>Pour ceux qui ne sont pas int\u00e9ress\u00e9s par l&rsquo;achat d&rsquo;un th\u00e8me, tous les r\u00e9glages abord\u00e9s ci-dessus sont \u00e0 votre disposition. Vous pouvez \u00e9galement acc\u00e9der au module CSS personnalis\u00e9 pour configurer votre page de maintenance et votre image d&rsquo;arri\u00e8re-plan comme vous le souhaitez.<\/p>\n<figure id=\"attachment_88692\" aria-describedby=\"caption-attachment-88692\" style=\"width: 1391px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88692 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/other-setss.png\" alt=\"Aller dans le module \u00ab CSS personnalis\u00e9 \u00bb\" width=\"1391\" height=\"940\"><figcaption id=\"caption-attachment-88692\" class=\"wp-caption-text\">Aller dans le module \u00ab CSS personnalis\u00e9 \u00bb<\/figcaption><\/figure>\n<p>N&rsquo;oubliez pas que les r\u00e9glages de la page de maintenance entrent rarement en vigueur \u00e0 moins que vous ne vous d\u00e9connectiez du compte administrateur et que vous cliquiez sur le bouton <strong>Vider le cache<\/strong>.<\/p>\n<p>Vous pouvez trouver le bouton <strong>Vider le cache<\/strong> dans le coin sup\u00e9rieur droit du tableau de bord lorsque vous utilisez Kinsta. Si vous utilisez un h\u00e9bergeur diff\u00e9rent, envisagez l&rsquo;une des nombreuses <a href=\"https:\/\/kinsta.com\/fr\/blog\/vider-cache-wordpress\/\">extensions de mise en cache du march\u00e9<\/a>.<\/p>\n<figure id=\"attachment_88691\" aria-describedby=\"caption-attachment-88691\" style=\"width: 1830px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88691 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/clear-cache-sss.png\" alt=\"Cliquer sur le bouton \u00ab Vider le le cache \u00bb\" width=\"1830\" height=\"777\"><figcaption id=\"caption-attachment-88691\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Vider le le cache \u00bb<\/figcaption><\/figure>\n<p>Une fois que vous avez vid\u00e9 le cache et enregistr\u00e9 vos r\u00e9glages, vous devriez voir une belle image d&rsquo;arri\u00e8re-plan qui compl\u00e8te la page de maintenance !<\/p>\n<figure id=\"attachment_88690\" aria-describedby=\"caption-attachment-88690\" style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88690 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/regular-programing.png\" alt=\"V\u00e9rifier la page de maintenance\" width=\"1701\" height=\"888\"><figcaption id=\"caption-attachment-88690\" class=\"wp-caption-text\">V\u00e9rifier la page de maintenance<\/figcaption><\/figure>\n<h3>Comment ajouter un arri\u00e8re-plan WordPress avec un constructeur de page tiers<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">Notre article sur les meilleurs constructeurs de pages<\/a> propose une liste d&rsquo;options pour choisir un constructeur de pages avec des fonctionnalit\u00e9s en glisser-d\u00e9poser. WordPress inclut d\u00e9j\u00e0 un constructeur de pages \u00e0 Gutenberg, mais de nombreux propri\u00e9taires de sites pr\u00e9f\u00e8rent d&rsquo;autres solutions.<\/p>\n<p>La section suivante explique comment impl\u00e9menter un arri\u00e8re-plan \u00e0 l&rsquo;aide de certains constructeurs de pages populaires, notamment Elementor, Beaver Builder et Page Builder de SiteOrigin.<\/p>\n<h4>Ajouter un arri\u00e8re-plan WordPress avec Elementor<\/h4>\n<p>Elementor, le constructeur de pages populaire destin\u00e9 \u00e0 acc\u00e9l\u00e9rer consid\u00e9rablement la production de sites web, propose une extension gratuite avec plusieurs outils d&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<p>En outre, Elementor pr\u00e9sente une flexibilit\u00e9 d&rsquo;arri\u00e8re-plan visuel pour diverses parties de votre site web au lieu de restreindre les arri\u00e8re-plans \u00e0 l&rsquo;ensemble du site web. Par exemple, vous pouvez ajouter un arri\u00e8re-plan derri\u00e8re \u00e0 peu pr\u00e8s n&rsquo;importe quelle section de bloc de construction et afficher diff\u00e9rents arri\u00e8re-plans d&rsquo;une page \u00e0 l&rsquo;autre.<\/p>\n<p>Pour commencer, <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/#elementor\">installez et activez l\u2019extension Elementor<\/a>.<\/p>\n<figure id=\"attachment_89080\" aria-describedby=\"caption-attachment-89080\" style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89080 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Extension Elementor\" width=\"1324\" height=\"435\"><figcaption id=\"caption-attachment-89080\" class=\"wp-caption-text\">Extension Elementor<\/figcaption><\/figure>\n<p>Elementor disperse ses r\u00e9glages d&rsquo;arri\u00e8re-plan dans tout le constructeur, ce qui facilite la s\u00e9lection d&rsquo;un \u00e9l\u00e9ment et l&rsquo;impl\u00e9mentation d&rsquo;un arri\u00e8re-plan si n\u00e9cessaire. Par cons\u00e9quent, vous pouvez techniquement acc\u00e9der \u00e0 n&rsquo;importe quelle page ou article dans l&rsquo;espoir d&rsquo;avoir acc\u00e8s \u00e0 un bouton de t\u00e9l\u00e9versement d\u2019arri\u00e8re-plan.<\/p>\n<p>Dans ce cas, nous allons \u00e0 la page d&rsquo;accueil de notre site de test. Allez sur la page de votre choix en s\u00e9lectionnant dans la liste <strong>Pages &gt; Toutes les pages<\/strong>. Vous pouvez \u00e9galement faire de m\u00eame avec les <strong>Articles<\/strong>.<\/p>\n<p>Une fois sur l&rsquo;\u00e9diteur de page WordPress par d\u00e9faut, cliquez sur le bouton <strong>Modifier avec Elementor<\/strong>.<\/p>\n<figure id=\"attachment_89079\" aria-describedby=\"caption-attachment-89079\" style=\"width: 1889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89079 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-with.png\" alt=\"Cliquer sur \u00ab Modifier avec Elementor \u00bb\" width=\"1889\" height=\"880\"><figcaption id=\"caption-attachment-89079\" class=\"wp-caption-text\">Cliquer sur \u00ab Modifier avec Elementor \u00bb<\/figcaption><\/figure>\n<p>Cela d\u00e9place la vue de votre \u00e9cran vers l&rsquo;\u00e9diteur Elementor. Ici, le c\u00f4t\u00e9 gauche a un menu avec des modules en glisser-d\u00e9poser pour construire et modifier votre page.<\/p>\n<p>La fonctionnalit\u00e9 d&rsquo;arri\u00e8re-plan n&rsquo;est pas disponible dans une section ou un bloc, mais plut\u00f4t dans les <strong>r\u00e9glages<\/strong> principaux de cette page.<\/p>\n<p>Par cons\u00e9quent, cliquez sur la petite ic\u00f4ne des r\u00e9glages (elle ressemble \u00e0 un engrenage) dans le coin inf\u00e9rieur gauche de l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_89078\" aria-describedby=\"caption-attachment-89078\" style=\"width: 1526px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89078 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/settings-gear.png\" alt=\"Cliquer sur l'ic\u00f4ne des r\u00e9glages\" width=\"1526\" height=\"935\"><figcaption id=\"caption-attachment-89078\" class=\"wp-caption-text\">Cliquer sur l&rsquo;ic\u00f4ne des r\u00e9glages<\/figcaption><\/figure>\n<p>Cela affiche une section pour les r\u00e9glages g\u00e9n\u00e9raux de la page.<\/p>\n<p>Cliquez sur l&rsquo;onglet <strong>Style<\/strong> en haut de la section des <strong>R\u00e9glages de la page<\/strong>.<\/p>\n<figure id=\"attachment_89077\" aria-describedby=\"caption-attachment-89077\" style=\"width: 1861px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89077 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/style-of.png\" alt=\"Aller dans l'onglet \u00ab Style \u00bb\" width=\"1861\" height=\"910\"><figcaption id=\"caption-attachment-89077\" class=\"wp-caption-text\">Aller dans l&rsquo;onglet \u00ab Style \u00bb<\/figcaption><\/figure>\n<p>Sous Style, localisez le champ <strong>Type d&rsquo;arri\u00e8re-plan<\/strong> et cliquez sur l&rsquo;ic\u00f4ne <strong>Pinceau<\/strong> pour ajouter un arri\u00e8re-plan standard.<\/p>\n<figure id=\"attachment_89076\" aria-describedby=\"caption-attachment-89076\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89076 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/classic.png\" alt=\"D\u00e9finir le champ \u00ab Type d'arri\u00e8re-plan \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89076\" class=\"wp-caption-text\">D\u00e9finir le champ \u00ab Type d&rsquo;arri\u00e8re-plan \u00bb<\/figcaption><\/figure>\n<p>Ensuite, choisissez le type d&rsquo;arri\u00e8re-plan que vous souhaitez voir appara\u00eetre. Par exemple, le champ <strong>Couleur<\/strong> vous permet de changer l&rsquo;arri\u00e8re-plan en une couleur unie. Il existe \u00e9galement une option <strong>D\u00e9grad\u00e9<\/strong> dans le champ <strong>Type d&rsquo;arri\u00e8re-plan<\/strong> si c&rsquo;est plus votre style.<\/p>\n<figure id=\"attachment_89075\" aria-describedby=\"caption-attachment-89075\" style=\"width: 1826px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89075 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-color.png\" alt=\"D\u00e9finir le champ de couleur d'arri\u00e8re-plan\" width=\"1826\" height=\"940\"><figcaption id=\"caption-attachment-89075\" class=\"wp-caption-text\">D\u00e9finir le champ de couleur d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>Choisir une image<\/strong> sous le champ Image pour afficher votre <strong>m\u00e9diath\u00e8que<\/strong> et choisissez une image d&rsquo;arri\u00e8re-plan adapt\u00e9e \u00e0 cette page.<\/p>\n<figure id=\"attachment_89074\" aria-describedby=\"caption-attachment-89074\" style=\"width: 1560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89074 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-image-s-s.png\" alt=\"Cliquer sur le bouton \u00ab Choisir une image \u00bb\" width=\"1560\" height=\"857\"><figcaption id=\"caption-attachment-89074\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Choisir une image \u00bb<\/figcaption><\/figure>\n<p>Comme toujours, testez vos images d&rsquo;arri\u00e8re-plan et respectez les dimensions optimales et les meilleures pratiques (haute d\u00e9finition et orientation en portrait pour la plupart), puis s\u00e9lectionnez l&rsquo;image qui fonctionne bien et cliquez sur le bouton <strong>Ins\u00e9rer le m\u00e9dia<\/strong>.<\/p>\n<figure id=\"attachment_89073\" aria-describedby=\"caption-attachment-89073\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89073 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inserting.png\" alt=\"Cliquer sur le bouton \u00ab Ins\u00e9rer un m\u00e9dia \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89073\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Ins\u00e9rer un m\u00e9dia \u00bb<\/figcaption><\/figure>\n<p>L&rsquo;image d&rsquo;arri\u00e8re-plan s\u00e9lectionn\u00e9e appara\u00eet maintenant dans l&rsquo;aper\u00e7u du site d&rsquo;Elementor \u00e0 droite. Vous devrez peut-\u00eatre ajuster d&rsquo;autres parties de votre contenu pour vous assurer que les \u00e9l\u00e9ments tels que le texte et les images s&rsquo;affichent au-dessus de l&rsquo;arri\u00e8re-plan.<\/p>\n<p>Elementor fournit des r\u00e9glages d&rsquo;image d\u2019arri\u00e8re-plan tels que la position, la r\u00e9p\u00e9tition et la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress. Modifiez les r\u00e9glages pour d\u00e9terminer si votre arri\u00e8re-plan peut avoir une meilleure apparence en tant que fichier joint fixe, ou peut-\u00eatre avec une orientation en haut \u00e0 droite ou une autre taille.<\/p>\n<p>Cliquez sur le bouton <strong>Mettre \u00e0 jour<\/strong> pour enregistrer toutes les modifications apport\u00e9es \u00e0 la page et publier le nouvel arri\u00e8re-plan de votre site.<\/p>\n<figure id=\"attachment_89072\" aria-describedby=\"caption-attachment-89072\" style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89072 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/updateing.png\" alt=\"Ajouter un nouvel arri\u00e8re-plan\" width=\"1728\" height=\"890\"><figcaption id=\"caption-attachment-89072\" class=\"wp-caption-text\">Ajouter un nouvel arri\u00e8re-plan<\/figcaption><\/figure>\n<h5>Arri\u00e8re-plans de section avec Elementor<\/h5>\n<p>Elementor offre des fonctionnalit\u00e9s d&rsquo;arri\u00e8re-plan avanc\u00e9es pour la majorit\u00e9 des sections ajout\u00e9es \u00e0 vos pages.<\/p>\n<p>Tout ce que vous avez \u00e0 faire est de s\u00e9lectionner une section sur une page Elementor et de modifier les r\u00e9glages d&rsquo;arri\u00e8re-plan pour limiter l&rsquo;arri\u00e8re-plan uniquement \u00e0 cette zone.<\/p>\n<p>Par exemple, nous pouvons s\u00e9lectionner cette section de l&rsquo;<strong>\u00e9diteur de texte<\/strong> pour afficher les r\u00e9glages de la section de texte.<\/p>\n<figure id=\"attachment_89071\" aria-describedby=\"caption-attachment-89071\" style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89071 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-the-right-one.png\" alt=\"Choisir la section de texte avec Elementor\" width=\"1329\" height=\"940\"><figcaption id=\"caption-attachment-89071\" class=\"wp-caption-text\">Choisir la section de texte avec Elementor<\/figcaption><\/figure>\n<p>Choisissez l&rsquo;onglet <strong>Avanc\u00e9<\/strong> et recherchez la section <strong>Arri\u00e8re-plan<\/strong> dans cet onglet.<\/p>\n<figure id=\"attachment_89070\" aria-describedby=\"caption-attachment-89070\" style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89070 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-ad.png\" alt=\"Aller dans la section \u00ab Arri\u00e8re-plan \u00bb\" width=\"1440\" height=\"831\"><figcaption id=\"caption-attachment-89070\" class=\"wp-caption-text\">Aller dans la section \u00ab Arri\u00e8re-plan \u00bb<\/figcaption><\/figure>\n<p>Les r\u00e9glages d\u2019<strong>arri\u00e8re-plan<\/strong> incluent <strong>type d\u2019arri\u00e8re-plan<\/strong>, <strong>couleur<\/strong>, <strong>image<\/strong>, et plus encore, tout comme les r\u00e9glages que nous avons vu pour la page des r\u00e9glages g\u00e9n\u00e9raux d&rsquo;arri\u00e8re &#8211; plan. La seule diff\u00e9rence est qu&rsquo;elle contraint ces r\u00e9glages \u00e0 la section s\u00e9lectionn\u00e9e.<\/p>\n<p>Choisissez l&rsquo;ic\u00f4ne <strong>Pinceau<\/strong> pour le <strong>type d&rsquo;arri\u00e8re-plan<\/strong>, puis cliquez sur le bouton <strong>Choisir une image<\/strong> sous le champ <strong>Image<\/strong>.<\/p>\n<figure id=\"attachment_89069\" aria-describedby=\"caption-attachment-89069\" style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89069 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choosing-it.png\" alt=\"Cliquer sur le bouton \u00ab Choisir une image \u00bb\" width=\"1440\" height=\"811\"><figcaption id=\"caption-attachment-89069\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Choisir une image \u00bb<\/figcaption><\/figure>\n<p>Choisissez une image dans la <strong>m\u00e9diath\u00e8que<\/strong> et cliquez sur le bouton <strong>Ins\u00e9rer le m\u00e9dia<\/strong>.<\/p>\n<figure id=\"attachment_89068\" aria-describedby=\"caption-attachment-89068\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89068 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inset-media-3.png\" alt=\"Choisir l'image et cliquer sur le bouton \u00ab Ins\u00e9rer un m\u00e9dia \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89068\" class=\"wp-caption-text\">Choisir l&rsquo;image et cliquer sur le bouton \u00ab Ins\u00e9rer un m\u00e9dia \u00bb<\/figcaption><\/figure>\n<p>Comme vous pouvez le voir, l&rsquo;image d&rsquo;arri\u00e8re-plan reste dans les limites de cette section tout en \u00e9tant plac\u00e9e derri\u00e8re le contenu d\u00e9j\u00e0 cr\u00e9\u00e9 pour cette section.<\/p>\n<p>Utilisez les s\u00e9lecteurs <strong>Position<\/strong>, <strong>Fichier joint<\/strong>, <strong>R\u00e9p\u00e9tition<\/strong> et <strong>Taille<\/strong> pour modifier la pr\u00e9sentation de l&rsquo;image d&rsquo;arri\u00e8re-plan dans la section.<\/p>\n<p>Enfin, cliquez sur le bouton <strong>Mettre \u00e0 jour<\/strong> pour enregistrer vos modifications.<\/p>\n<figure id=\"attachment_89067\" aria-describedby=\"caption-attachment-89067\" style=\"width: 1752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89067 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-t-e.png\" alt=\"Cliquer sur \u00abMettre \u00e0 jour\u00bb pour voir les modifications\" width=\"1752\" height=\"940\"><figcaption id=\"caption-attachment-89067\" class=\"wp-caption-text\">Cliquer sur \u00ab Mettre \u00e0 jour \u00bb pour voir les modifications<\/figcaption><\/figure>\n<h4>Ajouter une image d&rsquo;arri\u00e8re-plan avec Beaver Builder<\/h4>\n<p>L\u2019extension Beaver Builder comprend une version Lite avec quelques outils basiques d&rsquo;arri\u00e8re-plan. C&rsquo;est l&rsquo;un des constructeurs de pages les plus populaires du march\u00e9, offrant de nombreux modules de contenu pour des \u00e9l\u00e9ments tels que des vid\u00e9os, des images, des paragraphes, etc.<\/p>\n<p>En plus de tout cela, il vous permet d&rsquo;impl\u00e9menter une image, une couleur ou une vid\u00e9o d&rsquo;arri\u00e8re-plan \u00e0 l&rsquo;aide d&rsquo;outils visuels et de CSS pour placer l&rsquo;\u00e9l\u00e9ment d&rsquo;arri\u00e8re-plan sur l&rsquo;ensemble de votre site web, une page ou une section individuelle sur une page.<\/p>\n<p>Tout d&rsquo;abord, <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/#beaver-builder\">installez l\u2019extension Beaver Builder<\/a> pour commencer.<\/p>\n<figure id=\"attachment_89105\" aria-describedby=\"caption-attachment-89105\" style=\"width: 1331px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89105 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bb-s.png\" alt=\"Extension Beaver Builder\" width=\"1331\" height=\"435\"><figcaption id=\"caption-attachment-89105\" class=\"wp-caption-text\">Extension Beaver Builder<\/figcaption><\/figure>\n<p>Allez sur n&rsquo;importe quelle page ou article pour les modifier avec Beaver Builder.<\/p>\n<p>Vous devez convertir les pages cr\u00e9\u00e9es pr\u00e9c\u00e9demment au format Beaver Builder. Comme alternative, vous avez la possibilit\u00e9 de cr\u00e9er une page \u00e0 partir de z\u00e9ro et de choisir de modifier la page dans Beaver Builder.<\/p>\n<p>Pour convertir une page actuelle en Beaver Builder, ouvrez cet \u00e9diteur de page et cliquez sur l&rsquo;ic\u00f4ne \u00e0 trois points pour ouvrir le menu Voir dans le coin sup\u00e9rieur droit.<\/p>\n<figure id=\"attachment_89104\" aria-describedby=\"caption-attachment-89104\" style=\"width: 1903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89104 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/three-dots.png\" alt=\"Aller au menu des r\u00e9glages de la page\" width=\"1903\" height=\"854\"><figcaption id=\"caption-attachment-89104\" class=\"wp-caption-text\">Aller au menu des r\u00e9glages de la page<\/figcaption><\/figure>\n<p>Faites d\u00e9filer vers le bas pour trouver et choisir le lien <strong>Convertir en Beaver Builder<\/strong>.<\/p>\n<p>Il tente de compiler tout le contenu que vous avez sur votre page et de d\u00e9placer ces \u00e9l\u00e9ments dans des modules Beaver Builder compatibles.<\/p>\n<figure id=\"attachment_89103\" aria-describedby=\"caption-attachment-89103\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89103 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/convert-to-beaver.png\" alt=\"Cliquer sur le lien \u00ab Convertir en Beaver Builder \u00bb\" width=\"1616\" height=\"821\"><figcaption id=\"caption-attachment-89103\" class=\"wp-caption-text\">Cliquer sur le lien \u00ab Convertir en Beaver Builder \u00bb<\/figcaption><\/figure>\n<p>Pour cr\u00e9er une page \u00e0 partir de z\u00e9ro, allez dans <strong>Pages &gt; Ajouter<\/strong>.<\/p>\n<p>Cliquez ensuite sur le bouton <strong>Lancer Beaver Builder<\/strong>.<\/p>\n<figure id=\"attachment_89102\" aria-describedby=\"caption-attachment-89102\" style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89102 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/launch-bb.png\" alt=\"Cliquer sur le bouton \u00ab Lancer Beaver Builder \u00bb\" width=\"1854\" height=\"884\"><figcaption id=\"caption-attachment-89102\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Lancer Beaver Builder \u00bb<\/figcaption><\/figure>\n<p>L\u2019extension <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/#beaver-builder\">Beaver Builder<\/a> vous am\u00e8ne \u00e0 une vue sur l\u2019interface publique de la page web. Elle occupe la majeure partie de l&rsquo;\u00e9cran en tant que v\u00e9ritable \u00e9diteur d\u2019interface publique, o\u00f9 vous cliquez sur les \u00e9l\u00e9ments et vous d\u00e9placez dans les cases avec votre souris.<\/p>\n<p>La premi\u00e8re fa\u00e7on d&rsquo;ajouter un arri\u00e8re-plan via Beaver Builder consiste \u00e0 t\u00e9l\u00e9verser un arri\u00e8re-plan dans un bloc de section. Cela peut occuper la majeure partie de la page ou une fraction de la page, selon la taille de votre bloc de section.<\/p>\n<p>Une fois s\u00e9lectionn\u00e9, recherchez le bouton <strong>R\u00e9glages de ligne<\/strong> (l&rsquo;ic\u00f4ne \u2699).<\/p>\n<p>Cliquez sur cette ic\u00f4ne pour afficher les r\u00e9glages de cette ligne. Vous pouvez \u00e9galement le faire avec des sections, des colonnes et d&rsquo;autres types de blocs.<\/p>\n<figure id=\"attachment_89101\" aria-describedby=\"caption-attachment-89101\" style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89101 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/row-sets.png\" alt=\"Modifier les r\u00e9glages de ligne\" width=\"1900\" height=\"813\"><figcaption id=\"caption-attachment-89101\" class=\"wp-caption-text\">Modifier les r\u00e9glages de ligne<\/figcaption><\/figure>\n<p>Un panneau de r\u00e9glages appara\u00eet en haut de l&rsquo;aper\u00e7u de votre site. Cliquez sur l&rsquo;onglet <strong>Style<\/strong>, puis recherchez la section Arri\u00e8re-plan.<\/p>\n<p>Sous <strong>Arri\u00e8re-plan<\/strong>, cliquez sur le menu d\u00e9roulant pour afficher tous les types d&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89100\" aria-describedby=\"caption-attachment-89100\" style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89100 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/finishing.png\" alt=\"Aller dans l'onglet \u00ab Style \u00bb\" width=\"1316\" height=\"775\"><figcaption id=\"caption-attachment-89100\" class=\"wp-caption-text\">Aller dans l&rsquo;onglet \u00ab Style \u00bb<\/figcaption><\/figure>\n<p>Vous avez plusieurs types d&rsquo;arri\u00e8re-plan \u00e0 prendre en compte, dont l&rsquo;un est pour une photo. Les autres comprennent :<\/p>\n<ul>\n<li>Couleur<\/li>\n<li>D\u00e9grad\u00e9<\/li>\n<li>Vid\u00e9o<\/li>\n<li>Code int\u00e9gr\u00e9<\/li>\n<\/ul>\n<figure id=\"attachment_89099\" aria-describedby=\"caption-attachment-89099\" style=\"width: 1315px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89099 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-type.png\" alt=\"D\u00e9finir le type de l'image d'arri\u00e8re-plan WordPress\" width=\"1315\" height=\"742\"><figcaption id=\"caption-attachment-89099\" class=\"wp-caption-text\">D\u00e9finir le type de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>N&rsquo;h\u00e9sitez pas \u00e0 tester les diff\u00e9rents types d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Par exemple, vous pouvez trouver qu&rsquo;un arri\u00e8re-plan d\u00e9grad\u00e9 est meilleur qu&rsquo;une image. Chacun des types d&rsquo;arri\u00e8re-plan comprend ses propres r\u00e9glages. Le type <strong>D\u00e9grad\u00e9<\/strong>, dans ce cas, demande deux couleurs pour que le d\u00e9grad\u00e9 passe de l&rsquo;une \u00e0 l&rsquo;autre.<\/p>\n<figure id=\"attachment_89098\" aria-describedby=\"caption-attachment-89098\" style=\"width: 1780px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89098 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-gradient.png\" alt=\"Section \u00ab \u00c0 propos de l'entreprise \u00bb\" width=\"1780\" height=\"837\"><figcaption id=\"caption-attachment-89098\" class=\"wp-caption-text\">Section \u00ab \u00c0 propos de l&rsquo;entreprise \u00bb<\/figcaption><\/figure>\n<p>Opter pour la photo d&rsquo;arri\u00e8re-plan pr\u00e9sente des champs \u00e0 choisir dans la m\u00e9diath\u00e8que ou \u00e0 coller une URL pour l&rsquo;image. Cliquez sur le lien <strong>S\u00e9lectionner une photo<\/strong> si vous utilisez la source de photos de la m\u00e9diath\u00e8que.<\/p>\n<figure id=\"attachment_89097\" aria-describedby=\"caption-attachment-89097\" style=\"width: 1811px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89097 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-photo.png\" alt=\"Cliquer sur le lien \u00ab S\u00e9lectionner une photo \u00bb\" width=\"1811\" height=\"795\"><figcaption id=\"caption-attachment-89097\" class=\"wp-caption-text\">Cliquer sur le lien \u00ab S\u00e9lectionner une photo \u00bb<\/figcaption><\/figure>\n<p>Trouvez votre photo d&rsquo;arri\u00e8re-plan pr\u00e9f\u00e9r\u00e9e et cliquez sur le bouton <strong>S\u00e9lectionner la photo<\/strong>.<\/p>\n<figure id=\"attachment_89096\" aria-describedby=\"caption-attachment-89096\" style=\"width: 1871px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89096 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-a-phot.png\" alt=\"Choisir le m\u00e9dia\" width=\"1871\" height=\"894\"><figcaption id=\"caption-attachment-89096\" class=\"wp-caption-text\">Choisir le m\u00e9dia<\/figcaption><\/figure>\n<p>Beaver Builder d\u00e9pose la photo dans l&rsquo;espace d&rsquo;arri\u00e8re-plan choisi auparavant. La section des R\u00e9glages de la photo vous demande comment vous souhaitez formater la photo. Choisissez parmi des options telles que <strong>Taille<\/strong>, <strong>R\u00e9p\u00e9tition<\/strong>,<strong> Position<\/strong> et <strong>Fichier joint<\/strong>.<\/p>\n<figure id=\"attachment_89095\" aria-describedby=\"caption-attachment-89095\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89095 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-sets.png\" alt=\"D\u00e9finir la taille de l'image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89095\" class=\"wp-caption-text\">D\u00e9finir la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<h5>Photos d&rsquo;arri\u00e8re-plan globales et en pleine page pour Beaver Builder<\/h5>\n<p>Beaver Builder fonctionne avec les outils de conception WordPress par d\u00e9faut pour tirer parti des fonctionnalit\u00e9s d&rsquo;arri\u00e8re-plan int\u00e9gr\u00e9es.<\/p>\n<p>Par cons\u00e9quent, vous pouvez acc\u00e9der \u00e0 l&rsquo;onglet <strong>Apparence &gt; Arri\u00e8re-plan<\/strong> pour activer un arri\u00e8re-plan photo pour l&rsquo;ensemble de votre site.<\/p>\n<p>Comme alternative, ouvrez n&rsquo;importe quelle page web dans Beaver Builder et cliquez sur le menu d\u00e9roulant <strong>Outils<\/strong> dans le coin sup\u00e9rieur gauche.<\/p>\n<p>Ici, cliquez sur l&rsquo;option des <strong>R\u00e9glages globaux<\/strong>.<\/p>\n<figure id=\"attachment_89094\" aria-describedby=\"caption-attachment-89094\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89094 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/global.png\" alt=\"\u00ab R\u00e9glages globaux \u00bb pour Beaver Builder\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89094\" class=\"wp-caption-text\">\u00ab R\u00e9glages globaux \u00bb pour Beaver Builder<\/figcaption><\/figure>\n<p>Le panneau des r\u00e9glages globaux offre la possibilit\u00e9 de modifier l&rsquo;int\u00e9gralit\u00e9 de votre site web, en rempla\u00e7ant ou en modifiant le code WordPress int\u00e9gr\u00e9. Par cons\u00e9quent, nous aimerions ins\u00e9rer un bloc de code CSS pour modifier l&rsquo;image d&rsquo;arri\u00e8re-plan du site web dans son ensemble (globalement).<\/p>\n<p>Cliquez sur l&rsquo;onglet CSS dans les r\u00e9glages g\u00e9n\u00e9raux et collez le segment de code suivant dans le champ:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Remplacez <strong>URL to image<\/strong> par l&rsquo;URL de la photo d&rsquo;arri\u00e8re-plan souhait\u00e9e. Vous pouvez \u00e9galement modifier des \u00e9l\u00e9ments tels que la fonction de r\u00e9p\u00e9tition, le fichier joint et la taille de l&rsquo;arri\u00e8re-plan avec le code CSS.<\/p>\n<\/div>\n<figure id=\"attachment_89092\" aria-describedby=\"caption-attachment-89092\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89092 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/css-to-bg.png\" alt=\"Aller dans l'onglet CSS\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89092\" class=\"wp-caption-text\">Aller dans l&rsquo;onglet CSS<\/figcaption><\/figure>\n<p>Il est plus logique d&rsquo;utiliser Beaver Builder pour les arri\u00e8re-plans de page personnalis\u00e9s, car chaque page a sa propre image en arri\u00e8re-plan.<\/p>\n<p>Dans votre \u00e9diteur de page, ouvrez \u00e0 nouveau le menu <strong>Outils<\/strong>.<\/p>\n<p>S\u00e9lectionnez l&rsquo;option <strong>Mise en page CSS et Javascript<\/strong>.<\/p>\n<figure id=\"attachment_89091\" aria-describedby=\"caption-attachment-89091\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89091 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/layout.png\" alt=\"Bouton de mise en page CSS et JavaScript\" width=\"1370\" height=\"881\"><figcaption id=\"caption-attachment-89091\" class=\"wp-caption-text\">Bouton de mise en page CSS et JavaScript<\/figcaption><\/figure>\n<p>Collez le m\u00eame code dans l&rsquo;onglet CSS, en rempla\u00e7ant <strong>URL to image<\/strong> par l&rsquo;URL r\u00e9elle et en ajustant les r\u00e9glages de votre choix:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Comme vous pouvez le voir, tout l&rsquo;arri\u00e8re-plan change l&rsquo;URL de l\u2019image que vous avez dans le code CSS. Gardez \u00e0 l&rsquo;esprit que le panneau <strong>Mise en page CSS \/ Javascript<\/strong> ne contr\u00f4le que la page actuelle. Vous ne verrez l&rsquo;arri\u00e8re-plan sur aucune page \u00e0 part celle-ci.<\/p>\n<\/div>\n<div><\/div>\n<figure id=\"attachment_89090\" aria-describedby=\"caption-attachment-89090\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89090 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/only-this-page.png\" alt=\"Ajouter du CSS personnalis\u00e9\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89090\" class=\"wp-caption-text\">Ajouter du CSS personnalis\u00e9<\/figcaption><\/figure>\n<h4>Ajouter une ligne simple ou un arri\u00e8re-plan de widget avec Page Builder By SiteOrigin<\/h4>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/#siteorigin\">Page Builder by SiteOrigin<\/a>\u00a0est un autre outil visuel de cr\u00e9ation de sites web en glisser-d\u00e9poser. Il est limit\u00e9 dans sa capacit\u00e9 \u00e0 ins\u00e9rer des arri\u00e8re-plans pour l&rsquo;ensemble du site web (vous recourriez \u00e0 l&rsquo;outil d&rsquo;arri\u00e8re-plan personnalis\u00e9 standard de WordPress). N\u00e9anmoins, il fournit des r\u00e9glages pour ajouter des images d&rsquo;arri\u00e8re-plan et des couleurs pour les lignes et les widgets utilis\u00e9s par SiteOrigin.<\/p>\n<p>Tout d&rsquo;abord, t\u00e9l\u00e9chargez et activez l\u2019extension Page Builder by SiteOrigin.<\/p>\n<figure id=\"attachment_89124\" aria-describedby=\"caption-attachment-89124\" style=\"width: 1520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89124 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/siteor.png\" alt=\"Extension Page Builder by SiteOrigin\" width=\"1520\" height=\"493\"><figcaption id=\"caption-attachment-89124\" class=\"wp-caption-text\">Extension Page Builder by SiteOrigin<\/figcaption><\/figure>\n<p>Acc\u00e9dez \u00e0 une nouvelle page ou envisagez d&rsquo;ajouter une ligne SiteOrigin \u00e0 une page en cours sur le site.<\/p>\n<p>Chaque section SiteOrigin vous demande d&rsquo;<strong>ajouter un widget<\/strong> ou d&rsquo;<strong>ajouter une ligne<\/strong>. Vous avez \u00e9galement la possibilit\u00e9 de parcourir les <strong>mises en page pr\u00e9d\u00e9finies<\/strong> si vous pr\u00e9f\u00e9rez ne pas commencer un design \u00e0 partir de z\u00e9ro.<\/p>\n<p>La bonne nouvelle est que les widgets et les lignes de SiteOrigin ont des r\u00e9glages pour inclure des images d&rsquo;arri\u00e8re-plan.<\/p>\n<p>Par cons\u00e9quent, cliquez sur le bouton <strong>Ajouter un widget<\/strong> ou <strong>Ajouter une ligne<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_89123\" aria-describedby=\"caption-attachment-89123\" style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89123 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row-or-widget.png\" alt=\"Ajouter un nouveau widget ou une nouvelle ligne\" width=\"1896\" height=\"822\"><figcaption id=\"caption-attachment-89123\" class=\"wp-caption-text\">Ajouter un nouveau widget ou une nouvelle ligne<\/figcaption><\/figure>\n<p>Dans cet exemple, nous examinerons la biblioth\u00e8que de <strong>widgets<\/strong>.<\/p>\n<p>Ici, vous pouvez choisir l&rsquo;un des nombreux widgets fournis par SiteOrigin, des menus et pages de navigation aux contenus et listes de produits.<\/p>\n<p>Nous choisirons le widget <strong>Produits<\/strong> pour cet exemple, mais vous pouvez utiliser l&rsquo;un des nombreux autres widgets en fonction <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\">des besoins de votre design<\/a>. En outre, vous pouvez grouper ces widgets avec une ligne, puis ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 cette ligne afin que l&rsquo;arri\u00e8re-plan apparaisse derri\u00e8re plusieurs widgets.<\/p>\n<figure id=\"attachment_89122\" aria-describedby=\"caption-attachment-89122\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89122 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-a-widg.png\" alt=\"Choisir \u00ab Produits \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89122\" class=\"wp-caption-text\">Choisir \u00ab Produits \u00bb<\/figcaption><\/figure>\n<p>Le nouveau <a href=\"https:\/\/kinsta.com\/fr\/blog\/widgets-wordpress\/\">widget<\/a> ou ligne se termine dans l&rsquo;\u00e9diteur de page SiteOrigin. La plupart de SiteOrigin reste dans le tableau de bord WordPress, il n&rsquo;y a donc pas autant d&rsquo;\u00e9diteur d\u2019interface publique qu&rsquo;avec d&rsquo;autres constructeurs de pages.<\/p>\n<p>Pour ajouter un arri\u00e8re-plan \u00e0 n&rsquo;importe quel \u00e9l\u00e9ment SiteOrigin, faites d\u00e9filer l&rsquo;\u00e9l\u00e9ment et cliquez sur le lien <strong>Modifier<\/strong>.<\/p>\n<figure id=\"attachment_89121\" aria-describedby=\"caption-attachment-89121\" style=\"width: 1516px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89121 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-the-row.png\" alt=\"Cliquer sur le lien \u00ab modifier \u00bb\" width=\"1516\" height=\"808\"><figcaption id=\"caption-attachment-89121\" class=\"wp-caption-text\">Cliquer sur le lien \u00ab modifier \u00bb<\/figcaption><\/figure>\n<p>J&rsquo;ai choisi le widget <strong>Produits<\/strong> pour cet exemple, mais chaque widget a ses propres r\u00e9glages pour configurer \u00e0 quoi il ressemble sur votre site web.<\/p>\n<p>Les outils d&rsquo;arri\u00e8re-plan se trouvent sous le menu d\u00e9roulant <strong>Design<\/strong>. Cliquez dessus pour avancer.<\/p>\n<figure id=\"attachment_89120\" aria-describedby=\"caption-attachment-89120\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89120 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/design-it.png\" alt=\"L'onglet \u00ab Design \u00bb pour l'image d'arri\u00e8re-plan WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89120\" class=\"wp-caption-text\">L&rsquo;onglet \u00ab Design \u00bb pour l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Trouvez le champ <strong>Image d&rsquo;arri\u00e8re-plan<\/strong> et cliquez sur le bouton <strong>S\u00e9lectionner une image<\/strong>.<\/p>\n<p>Vous avez \u00e9galement la possibilit\u00e9 de coller une <strong>URL externe<\/strong> pour l&rsquo;image d&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89119\" aria-describedby=\"caption-attachment-89119\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89119 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-bg-image.png\" alt=\"Choisir l'image et la couleur d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89119\" class=\"wp-caption-text\">Choisir l&rsquo;image et la couleur d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\">m\u00e9diath\u00e8que<\/a> vous affiche les images actuelles que vous avez t\u00e9l\u00e9vers\u00e9es sur WordPress. Cliquez sur l&rsquo;image qui fonctionne le mieux pour cet arri\u00e8re-plan et s\u00e9lectionnez le bouton <strong>Termin\u00e9<\/strong> pour la d\u00e9poser dans le module SiteOrigin.<\/p>\n<figure id=\"attachment_89118\" aria-describedby=\"caption-attachment-89118\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89118 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-it-o-o.png\" alt=\"Cliquer sur le bouton \u00ab Termin\u00e9 \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89118\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Termin\u00e9 \u00bb<\/figcaption><\/figure>\n<p>Le champ Image d&rsquo;arri\u00e8re-plan pr\u00e9sente maintenant une version miniature de cette photo.<\/p>\n<p>Faites d\u00e9filer les r\u00e9glages pour tout configurer, de l&rsquo;<strong>affichage de l&rsquo;image d&rsquo;arri\u00e8re-plan<\/strong> \u00e0 la <strong>couleur de police<\/strong> pour le texte de superposition.<\/p>\n<p>En g\u00e9n\u00e9ral, vous devriez pouvoir obtenir les r\u00e9sultats souhait\u00e9s en choisissant l&rsquo;affichage en couverture. Il semble que l\u2019extension SiteOrigin utilise par d\u00e9faut l&rsquo;affichage en mosa\u00efque, vous devrez peut-\u00eatre changer cela.<\/p>\n<p>Assurez-vous de cliquer sur le bouton <strong>Termin\u00e9<\/strong> lorsque vous avez termin\u00e9 vos r\u00e9glages personnalis\u00e9s pour l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89117\" aria-describedby=\"caption-attachment-89117\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89117 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/adding-in.png\" alt=\"Les r\u00e9glages de l'image d'arri\u00e8re-plan de WordPress\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89117\" class=\"wp-caption-text\">Les r\u00e9glages de l&rsquo;image d&rsquo;arri\u00e8re-plan de WordPress<\/figcaption><\/figure>\n<p>Le widget (dans ce cas, le widget des produits) va dans l\u2019<a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteur<\/a> WordPress de SiteOrigin pour cette page. Vous pouvez faire glisser cet \u00e9l\u00e9ment o\u00f9 vous le souhaitez sur la page et ajouter de nouveaux widgets et lignes au-dessus et en dessous.<\/p>\n<p>Vous devez cliquer sur le bouton <strong>Aper\u00e7u<\/strong> ou <strong>Mettre \u00e0 jour<\/strong>, puis parcourir l\u2019interface publique de la page pour voir les r\u00e9sultats.<\/p>\n<figure id=\"attachment_89116\" aria-describedby=\"caption-attachment-89116\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89116 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-or-prev.png\" alt=\"Aller dans la section \u00ab Produits \u00bb\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89116\" class=\"wp-caption-text\">Aller dans la section \u00ab Produits \u00bb<\/figcaption><\/figure>\n<p>L&rsquo;arri\u00e8re-plan actuel que j&rsquo;ai ajout\u00e9 appara\u00eet dans les restrictions du widget <strong>Produits<\/strong>. Cet arri\u00e8re-plan a \u00e9videmment besoin d&rsquo;\u00eatre modifi\u00e9 pour le rendre plus joli, mais c&rsquo;est un d\u00e9but de qualit\u00e9 pour l&rsquo;espace avec une image d&rsquo;arri\u00e8re-plan beaucoup plus cr\u00e9ative.<\/p>\n<figure id=\"attachment_89115\" aria-describedby=\"caption-attachment-89115\" style=\"width: 1390px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89115 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/not-the-pret.png\" alt=\"L\u2019arri\u00e8re-plan de la section\" width=\"1390\" height=\"711\"><figcaption id=\"caption-attachment-89115\" class=\"wp-caption-text\">L\u2019arri\u00e8re-plan de la section<\/figcaption><\/figure>\n<h4>Ajout d&rsquo;images d&rsquo;arri\u00e8re-plan uniques avec Brizy<\/h4>\n<p>Le dernier constructeur de page cette d\u00e9monstration, Brizy, propose des mod\u00e8les \u00e9l\u00e9gants et une interface publique sup\u00e9rieure pour ajouter des conceptions inhabituelles et des personnalisations rapides.<\/p>\n<p>Brizy Page Builder comprend un ensemble complet de modules en <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">glisser-d\u00e9poser<\/a> \u00e0 int\u00e9grer dans votre site web actuel. Il vous permet \u00e9galement de partir d&rsquo;un mod\u00e8le vierge et de construire l&rsquo;int\u00e9gralit\u00e9 de votre site web avec Brizy.<\/p>\n<p>En tant que tel, vous serez heureux d&rsquo;apprendre que Brizy dispose \u00e9galement d&rsquo;un outil d&rsquo;arri\u00e8re-plan pour \u00e0 peu pr\u00e8s tous les \u00e9l\u00e9ments que vous incluez via le constructeur de page. Sans oublier que Brizy propose plusieurs styles d&rsquo;arri\u00e8re-plan uniques, comme l&rsquo;ajout d&rsquo;une vid\u00e9o en boucle dans l&rsquo;arri\u00e8re-plan ou \u00e0 une carte compl\u00e8te.<\/p>\n<p>Pour profiter de ces r\u00e9glages d&rsquo;arri\u00e8re-plan, <a href=\"https:\/\/wordpress.org\/plugins\/brizy\/\">installez et activez l\u2019extension Brizy<\/a> pour commencer.<\/p>\n<figure id=\"attachment_89142\" aria-describedby=\"caption-attachment-89142\" style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89142 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brizy.png\" alt=\"L\u2019extension de construction de page Brizy\" width=\"1324\" height=\"434\"><figcaption id=\"caption-attachment-89142\" class=\"wp-caption-text\">L\u2019extension de construction de page Brizy<\/figcaption><\/figure>\n<p>Une grande partie du processus de conception de Brizy vous oblige \u00e0 commencer avec un <a href=\"https:\/\/kinsta.com\/fr\/blog\/hierarchie-des-modeles-wordpress\/\">mod\u00e8le<\/a> vierge . Brizy tentera de convertir vos anciennes conceptions en modules Brizy, mais nous trouvons qu&rsquo;il est pr\u00e9f\u00e9rable de recommencer.<\/p>\n<p>Acc\u00e9dez sur une <strong>page<\/strong> ou un <strong>article<\/strong> dans votre tableau de bord WordPress et commencez \u00e0 cr\u00e9er la page avec un titre et peut-\u00eatre du contenu.<\/p>\n<p>Vous devriez voir un bouton pour <strong>modifier avec Brizy<\/strong>. Cliquez dessus pour \u00eatre envoy\u00e9 au constructeur de page complet de Brizy.<\/p>\n<figure id=\"attachment_89140\" aria-describedby=\"caption-attachment-89140\" style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89140 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brixy-ed.png\" alt=\"Cliquer sur le bouton \u00ab Continuer \u00e0 modifier avec Brizy \u00bb\" width=\"1865\" height=\"815\"><figcaption id=\"caption-attachment-89140\" class=\"wp-caption-text\">Cliquer sur le bouton \u00ab Continuer \u00e0 modifier avec Brizy \u00bb<\/figcaption><\/figure>\n<p>Le constructeur de pages Brizy affiche un aper\u00e7u complet de votre site web avec des boutons, du texte et des images. Si la page est vide, cliquez sur le bouton <strong>Commencer \u00e0 construire votre page<\/strong>.<\/p>\n<figure id=\"attachment_89139\" aria-describedby=\"caption-attachment-89139\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89139 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/start-building.png\" alt=\"Cliquer sur l'ic\u00f4ne plus pour commencer \u00e0 construire votre page\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89139\" class=\"wp-caption-text\">Cliquer sur l&rsquo;ic\u00f4ne plus pour commencer \u00e0 construire votre page<\/figcaption><\/figure>\n<p>Recherchez les onglets <strong>Mises en page et Blocs<\/strong> dans la barre de menus sup\u00e9rieure.<\/p>\n<p>Les mises en page fournissent des pages web pr\u00e9d\u00e9finies, remplies de contenu de d\u00e9monstration et pr\u00eat \u00e0 l&#8217;emploi tant que vous personnalisez le contenu de votre propre entreprise. Les blocs sont de plus petits morceaux de pages web, mais ils sont toujours pr\u00e9-construits et souvent plus faciles \u00e0 utiliser et \u00e0 manipuler que si vous deviez cr\u00e9er un bloc vous-m\u00eame.<\/p>\n<p>Peu importe la direction dans laquelle vous allez. Parcourez les mises en page et les blocs et ajoutez-en autant que vous le souhaitez \u00e0 la page. Ce sont simplement les \u00e9l\u00e9ments que vous utiliserez pour former une page web compl\u00e8te.<\/p>\n<figure id=\"attachment_89138\" aria-describedby=\"caption-attachment-89138\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89138 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/blocks-and-layouts.png\" alt=\"Sections Mises en page et Blocks\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89138\" class=\"wp-caption-text\">Sections Mises en page et Blocks<\/figcaption><\/figure>\n<p>Une fois que vous avez quelques blocs ou mises en page sur la page web, revenez \u00e0 l&rsquo;\u00e9cran de l&rsquo;\u00e9diteur pour regarder votre travail.<\/p>\n<p>Vous verrez que chaque section de bloc a une ic\u00f4ne de R\u00e9glages sur le c\u00f4t\u00e9 sup\u00e9rieur droit du bloc, qui appara\u00eet g\u00e9n\u00e9ralement lorsque vous faites d\u00e9filer la section.<\/p>\n<p>Cliquez dessus pour le bloc de votre choix. Nous ajouterons un arri\u00e8re-plan \u00e0 ce bloc.<\/p>\n<figure id=\"attachment_89137\" aria-describedby=\"caption-attachment-89137\" style=\"width: 1583px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89137 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/every-one.png\" alt=\"Cliquer sur l'ic\u00f4ne \u00ab R\u00e9glages \u00bb\" width=\"1583\" height=\"815\"><figcaption id=\"caption-attachment-89137\" class=\"wp-caption-text\">Cliquer sur l&rsquo;ic\u00f4ne \u00ab R\u00e9glages \u00bb<\/figcaption><\/figure>\n<p>Le panneau des <strong>R\u00e9glages de bloc<\/strong> reste dans le coin sup\u00e9rieur droit. Faites d\u00e9filer les <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-icones-wordpress\/\">ic\u00f4nes<\/a> de menu pour voir ce qu&rsquo;elles font toutes.<\/p>\n<p>L&rsquo;une d&rsquo;elles concerne les <strong>couleurs<\/strong>, et signifient une couleur d\u2019arri\u00e8re-plan. Vous pouvez modifier cela et ajouter un d\u00e9grad\u00e9 si vous \u00eates plus enclin \u00e0 vous en tenir \u00e0 une vue d&rsquo;arri\u00e8re-plan de couleur unie ou d\u00e9grad\u00e9e.<\/p>\n<figure id=\"attachment_89136\" aria-describedby=\"caption-attachment-89136\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89136 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/colors-is-possible.png\" alt=\"Le bouton \u00ab Couleur \u00bb pour l'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89136\" class=\"wp-caption-text\">Le bouton \u00ab Couleur \u00bb pour l&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Le bouton d\u2019ic\u00f4ne \u00e0 gauche contient les r\u00e9glages d&rsquo;<strong>arri\u00e8re-plan<\/strong>.<\/p>\n<p>Cliquez sur ce bouton pour ouvrir les outils rapides de t\u00e9l\u00e9versement d&rsquo;une image d&rsquo;arri\u00e8re-plan dans ce bloc<\/p>\n<figure id=\"attachment_89135\" aria-describedby=\"caption-attachment-89135\" style=\"width: 1551px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89135 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/abck-gro.png\" alt=\"Bouton d'image d'arri\u00e8re-plan WordPress\" width=\"1551\" height=\"692\"><figcaption id=\"caption-attachment-89135\" class=\"wp-caption-text\">Bouton d&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Brizy propose trois \u00e9l\u00e9ments m\u00e9dias d\u2019arri\u00e8re-plan :<\/p>\n<ul>\n<li>Images<\/li>\n<li>Vid\u00e9os<\/li>\n<li>Cartes<\/li>\n<\/ul>\n<p>Tout d&rsquo;abord, essayez le type Image pour comprendre comment il fonctionne avec votre mise en page actuelle.<\/p>\n<p>Cliquez sur la zone de <strong>t\u00e9l\u00e9versement d&rsquo;image<\/strong> pour trouver une photo dans la m\u00e9diath\u00e8que et l&rsquo;ajouter \u00e0 l&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_89134\" aria-describedby=\"caption-attachment-89134\" style=\"width: 1572px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89134 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-add.png\" alt=\"Type d'image d'arri\u00e8re-plan WordPress\" width=\"1572\" height=\"725\"><figcaption id=\"caption-attachment-89134\" class=\"wp-caption-text\">Type d&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Nous avons trouv\u00e9 une photo de panneau de bois pour ce tutoriel et indiqu\u00e9 que nous ne souhaitons pas avoir d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#customizing-the-twenty-twenty-theme\">effet parallaxe<\/a>.<\/p>\n<p>Cela ajoute un effet agr\u00e9able puisque la couleur d\u2019arri\u00e8re-plan sert de superposition, mais nous voyons toujours la texture du bois derri\u00e8re elle.<\/p>\n<p>N&rsquo;oubliez pas que vous pouvez toujours ajuster le champ Parallaxe pour faire de l&rsquo;image d&rsquo;arri\u00e8re-plan un arri\u00e8re-plan fixe, anim\u00e9 ou d\u00e9filant.<\/p>\n<figure id=\"attachment_89133\" aria-describedby=\"caption-attachment-89133\" style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89133 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/in-place.png\" alt=\"Image d'arri\u00e8re-plan sans parallaxe\" width=\"1865\" height=\"940\"><figcaption id=\"caption-attachment-89133\" class=\"wp-caption-text\">Image d&rsquo;arri\u00e8re-plan sans parallaxe<\/figcaption><\/figure>\n<p>Et c&rsquo;est ainsi que vous ins\u00e9rez une image d\u2019arri\u00e8re-plan avec Brizy !<\/p>\n<p>La meilleure partie de Brizy est que vous pouvez continuer \u00e0 vous d\u00e9placer dans la conception et \u00e0 cliquer sur le bouton <strong>R\u00e9glages<\/strong> de chaque section.<\/p>\n<p>Une section plus bas, nous pouvons ins\u00e9rer une autre image d&rsquo;arri\u00e8re-plan sans y passer beaucoup de temps.<\/p>\n<figure id=\"attachment_89132\" aria-describedby=\"caption-attachment-89132\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89132 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/another-section.png\" alt=\"Ajout d'une autre image d'arri\u00e8re-plan\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-89132\" class=\"wp-caption-text\">Ajout d&rsquo;une autre image d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Et pour d\u00e9montrer la puissance des autres types d&rsquo;arri\u00e8re-plan, nous pouvons cliquer sur le type d&rsquo;arri\u00e8re-plan <strong>Carte<\/strong>, saisir une adresse et regarder une carte de cet emplacement appara\u00eetre juste derri\u00e8re le contenu de premier plan.<\/p>\n<p>La <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-wordpress-cartographie\/\">carte<\/a> se situe en arri\u00e8re-plan complet et dispose d&rsquo;une fonction de zoom si elle ne s\u2019affiche pas tout \u00e0 fait correctement avec les r\u00e9glages par d\u00e9faut.<\/p>\n<figure id=\"attachment_89131\" aria-describedby=\"caption-attachment-89131\" style=\"width: 1800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89131 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-map.png\" alt=\"Ajouter une carte en tant qu'image d'arri\u00e8re-plan WordPress\" width=\"1800\" height=\"797\"><figcaption id=\"caption-attachment-89131\" class=\"wp-caption-text\">Ajouter une carte en tant qu&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Enfin, nous vous recommandons de consulter l&rsquo;outil de vid\u00e9o d&rsquo;arri\u00e8re-plan Brizy, situ\u00e9 dans la m\u00eame section que l&rsquo;outil d&rsquo;image d\u2019arri\u00e8re-plan. Il fonctionne en ins\u00e9rant une URL vid\u00e9o (<a href=\"https:\/\/kinsta.com\/fr\/blog\/statistiques-youtube\/\">YouTube<\/a> ou Vimeo), rendant une vid\u00e9o compl\u00e8te juste derri\u00e8re le contenu de premier plan. Il fournit m\u00eame un r\u00e9glage pour mettre en boucle la vid\u00e9o et choisir quand elle doit commencer lorsque l&rsquo;utilisateur fait d\u00e9filer la section.<\/p>\n<figure id=\"attachment_89130\" aria-describedby=\"caption-attachment-89130\" style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89130 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/video-now.png\" alt=\"URL pour l'image d'arri\u00e8re-plan WordPress\" width=\"1548\" height=\"820\"><figcaption id=\"caption-attachment-89130\" class=\"wp-caption-text\">URL pour l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Le gif anim\u00e9 ci-dessous donne un bref exemple de la vid\u00e9o en action, m\u00eame si elle pourrait probablement n\u00e9cessiter un certain montage.<\/p>\n<figure id=\"attachment_89129\" aria-describedby=\"caption-attachment-89129\" style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89129 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-video.gif\" alt=\"Arri\u00e8re-plan vid\u00e9o\" width=\"1280\" height=\"720\"><figcaption id=\"caption-attachment-89129\" class=\"wp-caption-text\">Arri\u00e8re-plan vid\u00e9o<\/figcaption><\/figure>\n<h2>Dimensions, sources et modification basique de l&rsquo;image d&rsquo;arri\u00e8re-plan<\/h2>\n<p>Nous avons mentionn\u00e9 plus t\u00f4t dans l&rsquo;article que m\u00eame s&rsquo;il n&rsquo;y a pas de taille parfaite pour une image d&rsquo;arri\u00e8re-plan, nous vous recommandons de commencer \u00e0 une taille ne d\u00e9passant pas <strong>1024 x 768<\/strong> pixels et de s&rsquo;en tenir \u00e0 un rapport hauteur \/ largeur commun tel que <strong>16:9<\/strong>. Le rapport hauteur \/ largeur n&rsquo;a pas autant d&rsquo;importance que la taille et la r\u00e9solution r\u00e9elles de l&rsquo;image, car vous pouvez recadrer l&rsquo;image ou laisser WordPress le faire pour vous.<\/p>\n<p>Il est \u00e9galement essentiel de trouver les bons endroits pour acheter ou emprunter des images d&rsquo;arri\u00e8re-plan WordPress si vous ne pr\u00e9voyez pas de prendre vos propres photos.<\/p>\n<h3>O\u00f9 trouver des images d&rsquo;arri\u00e8re-plan appropri\u00e9es<\/h3>\n<p>Pour votre recherche d&rsquo;image d&rsquo;arri\u00e8re-plan, consultez notre guide sur la recherche et l&rsquo;ajout <a href=\"https:\/\/kinsta.com\/fr\/blog\/photos-stock-wordpress\/\">de stocks de photos sans quitter WordPress<\/a>. Nous avons \u00e9galement une <a href=\"https:\/\/kinsta.com\/fr\/blog\/images-gratuites-pour-wordpress\/\">liste de sources de places de march\u00e9 utiles<\/a> pour rechercher des photos de stock en haute d\u00e9finition, dont beaucoup sont gratuites.<\/p>\n<p>Dans l&rsquo;ensemble, nous vous recommandons d&rsquo;essayer de prendre vous-m\u00eame des images d&rsquo;arri\u00e8re-plan. Si ce n&rsquo;est pas possible ou si vous n&rsquo;avez pas d&rsquo;exp\u00e9rience en photographie ou en design graphique, pensez \u00e0 utiliser des ressources photographiques gratuites. Vous pouvez \u00e9galement choisir de payer pour une image d&rsquo;arri\u00e8re-plan \u00e0 partir de l&rsquo;un des nombreux sites web d&rsquo;images premium, dont certains facturent des frais mensuels pour t\u00e9l\u00e9charger un tas de photos.<\/p>\n<p>Certains liens mis en \u00e9vidence incluent :<\/p>\n<ul>\n<li><a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> &#8211; Gratuit et aucun cr\u00e9dit n\u00e9cessaire.<\/li>\n<li><a href=\"https:\/\/visualhunt.com\/\">Visual Hunt<\/a> &#8211; Photos gratuites. La plupart des images ne n\u00e9cessitent pas de cr\u00e9dit.<\/li>\n<li><a href=\"https:\/\/www.pexels.com\/\">Pexels<\/a> &#8211; Gratuit sans cr\u00e9dit n\u00e9cessaire.<\/li>\n<li><a href=\"https:\/\/pixabay.com\/\">Pixabay<\/a> &#8211; Gratuit avec la plupart des images ne n\u00e9cessitant pas de cr\u00e9dit.<\/li>\n<li><a href=\"https:\/\/www.istockphoto.com\/\">iStockphoto<\/a> &#8211; Un abonnement premium assez peu co\u00fbteux pour des images libres de droits.<\/li>\n<li><a href=\"https:\/\/www.shutterstock.com\/\">Shutterstock<\/a> &#8211; Images libres de droits moyennant des frais d&rsquo;abonnement raisonnables.<\/li>\n<\/ul>\n<h3>Comment changer l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress avec du CSS personnalis\u00e9<\/h3>\n<p>Comme nous l&rsquo;avons appris, vous pouvez ajouter une image d&rsquo;arri\u00e8re-plan WordPress avec des outils WordPress int\u00e9gr\u00e9s standard ou une extension. Peu importe l&rsquo;itin\u00e9raire que vous choisissez, tant que vous obtenez le r\u00e9sultat souhait\u00e9. Il existe \u00e9galement la possibilit\u00e9 d&rsquo;utiliser du CSS personnalis\u00e9 pour styliser l&rsquo;image d&rsquo;arri\u00e8re-plan ou l&rsquo;ajouter compl\u00e8tement \u00e0 votre site.<\/p>\n<p>Nous ne couvrirons pas les subtilit\u00e9s du CSS personnalis\u00e9, car nous verrons comment chaque image d&rsquo;arri\u00e8re-plan et chaque th\u00e8me auront un processus diff\u00e9rent. Cependant, nous vous recommandons de lire <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">notre guide sur la modification, l&rsquo;ajout et la personnalisation du CSS dans WordPress<\/a>. L&rsquo;article couvre des conseils utiles pour ajouter des images d&rsquo;arri\u00e8re-plan \u00e0 presque toutes les sections de site, des \u00e9l\u00e9ments de menu aux blocs de page sp\u00e9cifiques.<\/p>\n<h2>R\u00e9solution des probl\u00e8mes courants avec une image d&rsquo;arri\u00e8re-plan WordPress<\/h2>\n<p>Tous les sites WordPress ont la possibilit\u00e9 d&rsquo;ajouter un arri\u00e8re-plan. Cependant, cela ne signifie pas que la fonctionnalit\u00e9 principale fonctionne pour tous les sites. Par exemple, vous constaterez peut-\u00eatre que le th\u00e8me que vous utilisez ne prend pas en charge les arri\u00e8re-plans personnalis\u00e9s. Ou peut-\u00eatre que vous continuez \u00e0 t\u00e9l\u00e9verser un arri\u00e8re-plan, mais il ne semble pas tout \u00e0 fait correct (trop grand ou trop flou).<\/p>\n<p>Rencontrer un probl\u00e8me avec l\u2019arri\u00e8re-plan WordPress est frustrant et, malheureusement, assez courant. Nous avons compil\u00e9 ci-dessous certains des probl\u00e8mes les plus courants avec des images d&rsquo;arri\u00e8re-plan et avons trac\u00e9 chaque plan d&rsquo;action.<\/p>\n<p><strong>Comment r\u00e9soudre les 5 probl\u00e8mes les plus courants avec les images d&rsquo;arri\u00e8re-plan dans WordPress<\/strong><\/p>\n<p class=\"p1\"><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=kVmAoW9kBZg\"><\/kinsta-video><\/p>\n<h3>Mon th\u00e8me ne prend pas en charge une image d&rsquo;arri\u00e8re-plan WordPress<\/h3>\n<p>Les d\u00e9veloppeurs de th\u00e8mes contr\u00f4lent la fonctionnalit\u00e9 d&rsquo;arri\u00e8re-plans personnalis\u00e9s dans WordPress. Ils peuvent l&rsquo;activer ou la d\u00e9sactiver, selon qu&rsquo;ils souhaitent activer la prise en charge d&rsquo;arri\u00e8re-plan personnalis\u00e9. L&rsquo;arri\u00e8re-plan est d\u00e9sactiv\u00e9 lorsqu&rsquo;il n&rsquo;est pas n\u00e9cessaire ou qu&rsquo;il entre peut-\u00eatre en conflit avec la conception g\u00e9n\u00e9rale du th\u00e8me.<\/p>\n<p>Si vous constatez que votre th\u00e8me ne prend pas en charge un arri\u00e8re-plan personnalis\u00e9 ou qu&rsquo;il limite vos capacit\u00e9s lors de l&rsquo;ajout d&rsquo;un arri\u00e8re-plan, envisagez ces solutions :<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">Remplacez le th\u00e8me<\/a> par un autre qui prend en charge les arri\u00e8re-plans personnalis\u00e9s. Recherchez des arri\u00e8re-plans personnalis\u00e9s dans les listes de fonctionnalit\u00e9s lors de l&rsquo;achat ou du t\u00e9l\u00e9chargement de th\u00e8mes.<\/li>\n<li>Utilisez une extension d&rsquo;arri\u00e8re-plan pour remplacer la fonctionnalit\u00e9 manquante d&rsquo;arri\u00e8re-plan personnalis\u00e9.<\/li>\n<\/ul>\n<p>Bien qu&rsquo;il soit possible d&rsquo;inclure votre propre code personnalis\u00e9 ou d&rsquo;acc\u00e9der aux fichiers de th\u00e8me pour des arri\u00e8re-plans personnalis\u00e9s responsive, nous recommandons g\u00e9n\u00e9ralement les deux options. Votre meilleur plan d&rsquo;action est de localiser un th\u00e8me qui prend en charge les arri\u00e8re-plans ou d&rsquo;ajouter une extension qui permet les arri\u00e8re-plans mais ne g\u00e2che pas beaucoup les fonctionnalit\u00e9s du th\u00e8me.<\/p>\n<h3>Mon image d&rsquo;arri\u00e8re-plan WordPress est trop sombre ou a la mauvaise couleur<\/h3>\n<p>Une image d&rsquo;arri\u00e8re-plan sombre peut provenir de nombreux r\u00e9glages ex\u00e9cut\u00e9s \u00e0 c\u00f4t\u00e9 de l&rsquo;image d&rsquo;arri\u00e8re-plan elle-m\u00eame. La plupart du temps, il s&rsquo;agit d&rsquo;un filtre superpos\u00e9 ou d&rsquo;un arri\u00e8re-plan avec une mauvaise couleur.<\/p>\n<p>Pour la plupart des cas o\u00f9 l&rsquo;arri\u00e8re-plan est d\u00e9color\u00e9, vous devez v\u00e9rifier votre th\u00e8me ou extension qui contr\u00f4le l&rsquo;arri\u00e8re-plan lui-m\u00eame.<\/p>\n<p>Recherchez un r\u00e9glage pr\u00e8s du champ d&rsquo;arri\u00e8re-plan qui demande un filtre ou une superposition. Vous pouvez \u00e9galement trouver une fonction d&rsquo;opacit\u00e9 qui devrait \u00eatre retir\u00e9e pour que votre arri\u00e8re-plan s&rsquo;affiche correctement.<\/p>\n<p>Si tout le reste \u00e9choue, le th\u00e8me peut avoir un filtre d&rsquo;arri\u00e8re-plan cod\u00e9 en dur <a href=\"https:\/\/kinsta.com\/fr\/blog\/fichiers-wordpress\/\">dans les fichiers du th\u00e8me<\/a>. Dans ce cas, contactez le d\u00e9veloppeur du th\u00e8me pour avoir une id\u00e9e de ce qui est possible pour corriger la couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<h3>Mon image d&rsquo;arri\u00e8re-plan WordPress n&rsquo;est pas dans la bonne position<\/h3>\n<p>L&rsquo;image d&rsquo;arri\u00e8re-plan qui appara\u00eet dans la mauvaise position a tendance \u00e0 perturber la conception g\u00e9n\u00e9rale de votre site web. Vous constaterez peut-\u00eatre que l&rsquo;arri\u00e8re-plan est trop \u00e0 gauche ou \u00e0 droite, ou peut-\u00eatre que ce qui est cens\u00e9 \u00eatre le point central de l&rsquo;arri\u00e8re-plan n&rsquo;appara\u00eet pas du tout \u00e0 l&rsquo;\u00e9cran.<\/p>\n<p>Heureusement, d\u00e9placer un arri\u00e8re-plan se fait en quelques clics.<\/p>\n<p>Allez dans <strong>Apparence &gt; Arri\u00e8re-plan<\/strong> dans le tableau de bord WordPress. Recherchez l&rsquo;image que vous avez actuellement t\u00e9l\u00e9vers\u00e9e comme arri\u00e8re-plan et recherchez le champ <strong>Position<\/strong>. Ce champ vous permet de d\u00e9placer le positionnement de l&rsquo;arri\u00e8re-plan, avec des options pour le d\u00e9placer vers la gauche, la droite, le haut, le bas ou les coins.<\/p>\n<p>Nous vous recommandons de cliquer sur tous les boutons de positionnement pour voir les r\u00e9sultats qu&rsquo;ils produisent. Une fois que vous avez trouv\u00e9 la bonne position, enregistrez la page.<\/p>\n<h3>Mon image d&rsquo;arri\u00e8re-plan WordPress se r\u00e9p\u00e8te encore et encore<\/h3>\n<p>Les textures et les arri\u00e8re-plans unis ont souvent une meilleure apparence lorsqu&rsquo;ils sont r\u00e9p\u00e9t\u00e9s, car ils n\u00e9gligent les coupures d&rsquo;image. Cependant, de nombreuses images semblent horribles lorsqu&rsquo;elles sont r\u00e9p\u00e9t\u00e9es \u00e0 plusieurs reprises en arri\u00e8re-plan, en particulier celles avec beaucoup de d\u00e9tails et des degr\u00e9s de couleur variables.<\/p>\n<p>Une mise en page r\u00e9p\u00e9t\u00e9e de l&rsquo;image d&rsquo;arri\u00e8re-plan est pratique si votre image source n&rsquo;est pas assez grande pour couvrir tout l&rsquo;arri\u00e8re-plan sans avoir l&rsquo;air \u00e9tir\u00e9e. Par cons\u00e9quent, WordPress utilise parfois par d\u00e9faut une mise en page r\u00e9p\u00e9t\u00e9e pour maintenir la r\u00e9solution de l&rsquo;image.<\/p>\n<p>La principale solution \u00e0 ce probl\u00e8me se trouve dans la section Arri\u00e8re-plan via <strong>Apparence &gt; Arri\u00e8re-plan<\/strong> dans WordPress. Avec une photo t\u00e9l\u00e9vers\u00e9e en arri\u00e8re-plan, essayez des pr\u00e9r\u00e9glages tels que <strong>Remplir l&rsquo;\u00e9cran<\/strong>, <strong>Ajuster \u00e0 l&rsquo;\u00e9cran<\/strong> ou <strong>Personnalis\u00e9<\/strong>, au lieu de l&rsquo;option <strong>R\u00e9p\u00e9tition<\/strong>.<\/p>\n<p>Cependant, vous constaterez peut-\u00eatre qu&rsquo;essayer d&rsquo;obtenir une image plus petite pour couvrir l&rsquo;int\u00e9gralit\u00e9 d&rsquo;un \u00e9cran d&rsquo;arri\u00e8re-plan entra\u00eene <a href=\"https:\/\/kinsta.com\/fr\/blog\/hotlinking\/\">des r\u00e9sultats d\u00e9sagr\u00e9ables<\/a>. Dans ce cas, la meilleure solution consiste \u00e0 remplacer compl\u00e8tement l&rsquo;image source d&rsquo;arri\u00e8re-plan et \u00e0 en rechercher une grande, en haute d\u00e9finition et pr\u00eate \u00e0 \u00eatre publi\u00e9e sur le web.<\/p>\n<h3>Mon image d&rsquo;arri\u00e8re-plan WordPress est \u00e9tir\u00e9e<\/h3>\n<p>Une image d&rsquo;arri\u00e8re-plan \u00e9tir\u00e9e signifie que vos r\u00e9glages d&rsquo;arri\u00e8re-plan personnalis\u00e9s tentent de prendre une image plus petite et de couvrir tout l&rsquo;\u00e9cran avec l&rsquo;image.<\/p>\n<p>Vous pouvez \u00e9galement voir que cela se produit avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/marketing-facebook\/#add-highquality-images\">des images plus grandes<\/a> et en haute d\u00e9finition si elles ne correspondent pas au rapport hauteur \/ largeur n\u00e9cessaire. Pour les images d&rsquo;arri\u00e8re-plan \u00e9tir\u00e9es, pensez au fichier source. La meilleure option est de choisir une image diff\u00e9rente qui convient.<\/p>\n<p>Un autre probl\u00e8me est que les r\u00e9glages d&rsquo;arri\u00e8re-plan peuvent \u00eatre mal configur\u00e9s. V\u00e9rifiez des \u00e9l\u00e9ments tels que la position de l&rsquo;image d&rsquo;arri\u00e8re-plan et l&rsquo;\u00e9tirement sur le canevas en mode <strong>Remplir l&rsquo;\u00e9cran<\/strong>. Vous n&rsquo;aurez peut-\u00eatre besoin que de vous en tenir aux dimensions d&rsquo;origine ou d&rsquo;ajouter une fonction de <strong>r\u00e9p\u00e9tition<\/strong> pour que tout fonctionne.<\/p>\n<h3>Autres conseils de d\u00e9pannage d\u2019arri\u00e8re-plan<\/h3>\n<ul>\n<li>Les d\u00e9veloppeurs de th\u00e8mes ont tout pouvoir sur la fonction d&rsquo;arri\u00e8re-plan personnalis\u00e9 de WordPress. Si vous avez install\u00e9 un th\u00e8me et que vous ne parvenez pas \u00e0 faire fonctionner l&rsquo;arri\u00e8re-plan, le mieux est de contacter le d\u00e9veloppeur du th\u00e8me ou d&rsquo;installer un nouveau th\u00e8me pour voir si cela r\u00e9sout le probl\u00e8me.<\/li>\n<li>Les couleurs et les images d&rsquo;arri\u00e8re-plan personnalis\u00e9es remplacent souvent tout code CSS personnalis\u00e9 que vous impl\u00e9mentez pour contr\u00f4ler le dimensionnement, le placement ou la source de votre image d&rsquo;arri\u00e8re-plan. Vous devrez peut-\u00eatre vous en tenir aux r\u00e9glages d&rsquo;arri\u00e8re-plan du th\u00e8me au lieu d&rsquo;utiliser du CSS personnalis\u00e9.<\/li>\n<li>Un th\u00e8me peut \u00eatre vendu avec un arri\u00e8re-plan personnalis\u00e9 d\u00e9j\u00e0 activ\u00e9. Habituellement, tout ce que vous avez \u00e0 faire est de remplacer l&rsquo;image d&rsquo;arri\u00e8re-plan par une nouvelle. Parfois, il est n\u00e9cessaire de <a href=\"https:\/\/kinsta.com\/fr\/blog\/fichiers-wordpress\/\">puiser dans les fichiers de th\u00e8me<\/a> ou d&rsquo;utiliser <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">un CSS personnalis\u00e9<\/a> pour remplacer les r\u00e9glages du th\u00e8me.<\/li>\n<\/ul>\n<h2>Meilleures extensions WordPress d&rsquo;image d&rsquo;arri\u00e8re-plan<\/h2>\n<p>Si vous souhaitez disposer de capacit\u00e9s de modification suppl\u00e9mentaires pour une image d&rsquo;arri\u00e8re-plan, \u00eates int\u00e9ress\u00e9 par les arri\u00e8re-plans vid\u00e9o ou des outils qui permettent des arri\u00e8re-plans sp\u00e9cifiques \u00e0 une page, vous pouvez envisager les extensions WordPress d&rsquo;image d&rsquo;arri\u00e8re-plan suivantes :<\/p>\n<h3>Simple Full Screen Background Image<\/h3>\n<figure id=\"attachment_89220\" aria-describedby=\"caption-attachment-89220\" style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89220 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Simple-Full-Screen-Background-Image.png\" alt=\"Extension Simple Full Screen Background Image\" width=\"1324\" height=\"433\"><figcaption id=\"caption-attachment-89220\" class=\"wp-caption-text\">Extension Simple Full Screen Background Image<\/figcaption><\/figure>\n<p>L\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/simple-full-screen-background-image\/\">Simple Full Screen Background Image<\/a> n&rsquo;est pas tr\u00e8s diff\u00e9rente de l&rsquo;outil d&rsquo;image d&rsquo;arri\u00e8re-plan par d\u00e9faut de WordPress, sauf qu&rsquo;elle ajoute des fonctionnalit\u00e9s automatis\u00e9es pour des choses comme le redimensionnement et la mise \u00e0 l&rsquo;\u00e9chelle pour les navigateurs.<\/p>\n<p>Dans l&rsquo;ensemble, cette extension fonctionne mieux pour ceux qui trouvent que leur th\u00e8me bloque la possibilit\u00e9 d&rsquo;ajouter un arri\u00e8re-plan, ou peut-\u00eatre qu&rsquo;ils ont des probl\u00e8mes avec l&rsquo;outil int\u00e9gr\u00e9 d&rsquo;arri\u00e8re-plan WordPress. Elle remplace ce que vous avez sur WordPress et ajoute un bouton d&rsquo;arri\u00e8re-plan sp\u00e9cial dans votre \u00a0<a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord WordPress<\/a> pour t\u00e9l\u00e9verser instantan\u00e9ment une image depuis votre ordinateur.<\/p>\n<p>C&rsquo;est tout ce qu&rsquo;on peut en dire !<\/p>\n<p>L\u2019extension dispose \u00e9galement d&rsquo;une version Premium qui offre une mise \u00e0 l&rsquo;\u00e9chelle am\u00e9lior\u00e9e, la prise en charge d&rsquo;un nombre illimit\u00e9 d&rsquo;arri\u00e8re-plans, des effets uniques et bien plus encore.<\/p>\n<h3><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Advanced WordPress Backgrounds<\/span><\/h3>\n<figure id=\"attachment_89217\" aria-describedby=\"caption-attachment-89217\" style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89217 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Advanced-WordPress-Backgrounds.png\" alt=\"AWB \u2013 Extension WordPress Advanced WordPress Backgrounds\" width=\"1328\" height=\"430\"><figcaption id=\"caption-attachment-89217\" class=\"wp-caption-text\">AWB \u2013 Extension WordPress Advanced WordPress Backgrounds<\/figcaption><\/figure>\n<p>L\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\">Advanced WordPress Backgrounds<\/a> adopte une approche diff\u00e9rente des arri\u00e8re-plans WordPress, vous permettant de profiter d&rsquo;effets uniques qui pimentent votre arri\u00e8re-plan. Un exemple de ceci est l&rsquo;arri\u00e8re-plan parallaxe, qui peut se d\u00e9placer lentement avec l&rsquo;utilisateur lorsqu&rsquo;il fait d\u00e9filer votre site web.<\/p>\n<p>L\u2019extension offre \u00e9galement un support pour les vid\u00e9os. Les arri\u00e8re-plans vid\u00e9o sont extraits d&rsquo;endroits comme YouTube et Vimeo, ou vous pouvez m\u00eame les <a href=\"https:\/\/kinsta.com\/fr\/blog\/hebergement-video\/\">h\u00e9berger<\/a> vous-m\u00eame.<\/p>\n<p>Il est \u00e9galement possible d&rsquo;avoir une couleur unie ou un arri\u00e8re-plan textur\u00e9. Tous ces types d&rsquo;arri\u00e8re-plan incluent des fonctionnalit\u00e9s avanc\u00e9es que vous ne pouvez pas trouver avec l&rsquo;outil d&rsquo;arri\u00e8re-plan basique de WordPress. Certains d&rsquo;entre eux incluent des effets de d\u00e9filement et de mise \u00e0 l&rsquo;\u00e9chelle, des effets d&rsquo;opacit\u00e9 et des options de vitesse personnalis\u00e9es.<\/p>\n<p>Elle prend en charge Gutenberg et peut aller avec l&rsquo;\u00e9diteur WordPress standard et de nombreux autres constructeurs visuels de pages. Enfin, vous pouvez utiliser ses options de CSS personnalis\u00e9 pour ajouter encore plus de style \u00e0 vos arri\u00e8re-plans.<\/p>\n<h3><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Perfect Images + Retina<\/span><\/h3>\n<figure id=\"attachment_89216\" aria-describedby=\"caption-attachment-89216\" style=\"width: 1323px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89216 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Perfect-Images-Retina.png\" alt=\"Extension Perfect Images + Retina\" width=\"1323\" height=\"431\"><figcaption id=\"caption-attachment-89216\" class=\"wp-caption-text\">Extension Perfect Images + Retina<\/figcaption><\/figure>\n<p>L\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\">Perfect Images + Retina<\/a> est pratique en tant que solution deux-en-un. Elle vous permet de g\u00e9rer la taille et l&rsquo;apparence de l&rsquo;image d&rsquo;arri\u00e8re-plan WordPress tout en <a href=\"https:\/\/kinsta.com\/fr\/blog\/regenerer-miniatures\/\">r\u00e9g\u00e9n\u00e9rant les miniatures<\/a> et en rempla\u00e7ant les images. La gestion des images est plut\u00f4t impressionnante, et elle est particuli\u00e8rement cruciale pour les arri\u00e8re-plans en haute d\u00e9finition.<\/p>\n<p>L\u2019extension fournit \u00e9galement une fonction d&rsquo;arri\u00e8re-plan si vous optez pour sa version premium. Elle g\u00e9n\u00e8re un \u00e9quivalent Retina pour cette image d&rsquo;arri\u00e8re-plan afin que les images soient telles qu&rsquo;elles sont cens\u00e9es \u00eatre, m\u00eame sur des \u00e9crans en haute d\u00e9finition.<\/p>\n<h3><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Maintenance<\/span><\/h3>\n<figure id=\"attachment_89215\" aria-describedby=\"caption-attachment-89215\" style=\"width: 1325px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-89215 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance-s-s.png\" alt=\"Extension Maintenance avec image d'arri\u00e8re-plan WordPress\" width=\"1325\" height=\"434\"><figcaption id=\"caption-attachment-89215\" class=\"wp-caption-text\">Extension Maintenance avec image d&rsquo;arri\u00e8re-plan WordPress<\/figcaption><\/figure>\n<p>Maintenance est une extension simple et facile \u00e0 utiliser pour concevoir les pages Maintenance et Prochainement. L\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">Maintenance<\/a> a \u00e0 la fois des versions gratuites et premium, mais la version gratuite suffit pour activer une page de maintenance et ajouter une image d&rsquo;arri\u00e8re-plan avec du texte et des champs en superposition.<\/p>\n<p>Vous pouvez m\u00eame t\u00e9l\u00e9verser votre propre logo, personnaliser des \u00e9l\u00e9ments tels que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-wordpress\/\">polices<\/a> et les ic\u00f4nes et choisir divers mod\u00e8les avec leurs propres images d&rsquo;arri\u00e8re-plan. Vous pouvez \u00e9galement installer ses nombreux mod\u00e8les pr\u00e9d\u00e9finis, mais la plupart n\u00e9cessitent la licence premium de l\u2019extension.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Une image d&rsquo;arri\u00e8re-plan WordPress basique ne demande aucun effort \u00e0 ajouter et \u00e0 afficher sur l&rsquo;ensemble de votre site web. C&rsquo;est une fonctionnalit\u00e9 int\u00e9gr\u00e9e au <a href=\"https:\/\/kinsta.com\/fr\/docs\/support\/portee-support\/portee-support-wordpress-infogere\/#what-is-wordpress-core\">c\u0153ur de WordPress<\/a>, il est donc facile d&rsquo;\u00e9changer des arri\u00e8re-plans pour certains \u00e9v\u00e9nements ou vacances. Vous pouvez \u00e9galement vous en tenir \u00e0 un arri\u00e8re-plan pour la vie.<\/p>\n<p>Outre l&rsquo;arri\u00e8re-plan WordPress standard, vous pouvez utiliser du code CSS personnalis\u00e9, des extensions et des constructeurs de pages pour impl\u00e9menter toutes sortes d&rsquo;arri\u00e8re-plans sur votre site WordPress. Des images d\u2019arri\u00e8re-plan sur des pages sp\u00e9cifiques aux arri\u00e8re-plans de votre bouton de menu, les possibilit\u00e9s sont infinies.<\/p>\n<p>Il est maintenant temps d&rsquo;ajouter \u00e0 votre site WordPress cet arri\u00e8re-plan que vous avez toujours voulu.<\/p>\n<p><em>Avons-nous manqu\u00e9 quelque chose ? Veuillez laisser un commentaire si vous rencontrez des difficult\u00e9s pour ajouter ou g\u00e9rer des images d&rsquo;arri\u00e8re-plan WordPress.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les images d&rsquo;arri\u00e8re-plan WordPress se pr\u00e9sentent sous toutes les formes. Vous pouvez t\u00e9l\u00e9verser une image d&rsquo;arri\u00e8re-plan pour l&rsquo;ensemble de votre site web, la placer derri\u00e8re des &#8230;<\/p>\n","protected":false},"author":117,"featured_media":45238,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[47,205],"topic":[1041,1017,975],"class_list":["post-45220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wptips","topic-conception-site-web-wordpress","topic-conception-web","topic-optimisation-images"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Images d&#039;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser<\/title>\n<meta name=\"description\" content=\"Ajouter une image d&#039;arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Images d&#039;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser\" \/>\n<meta property=\"og:description\" content=\"Ajouter une image d&#039;arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-24T07:48:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-03T02:06:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ajouter une image d&#039;arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"119 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Images d&rsquo;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser\",\"datePublished\":\"2021-03-24T07:48:02+00:00\",\"dateModified\":\"2023-11-03T02:06:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\"},\"wordCount\":22415,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png\",\"keywords\":[\"webdev\",\"wptips\"],\"articleSection\":[\"Meilleurs Tutoriels WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\",\"name\":\"Images d'arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png\",\"datePublished\":\"2021-03-24T07:48:02+00:00\",\"dateModified\":\"2023-11-03T02:06:01+00:00\",\"description\":\"Ajouter une image d'arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png\",\"width\":1460,\"height\":730,\"caption\":\"Image Arriere plan Wordpress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conception de sites web WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conception-site-web-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Images d&rsquo;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Images d'arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser","description":"Ajouter une image d'arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Images d'arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser","og_description":"Ajouter une image d'arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.","og_url":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2021-03-24T07:48:02+00:00","article_modified_time":"2023-11-03T02:06:01+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Ajouter une image d'arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Salman Ravoof","Dur\u00e9e de lecture estim\u00e9e":"119 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Images d&rsquo;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser","datePublished":"2021-03-24T07:48:02+00:00","dateModified":"2023-11-03T02:06:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/"},"wordCount":22415,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png","keywords":["webdev","wptips"],"articleSection":["Meilleurs Tutoriels WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/","name":"Images d'arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png","datePublished":"2021-03-24T07:48:02+00:00","dateModified":"2023-11-03T02:06:01+00:00","description":"Ajouter une image d'arri\u00e8re-plan WordPress ne doit pas \u00eatre si difficile. Apprenez \u00e0 les activer, les modifier et les personnaliser dans ce guide approfondi.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/03\/image-arriere-plan-wordpress.png","width":1460,"height":730,"caption":"Image Arriere plan Wordpress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conception de sites web WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/conception-site-web-wordpress\/"},{"@type":"ListItem","position":3,"name":"Images d&rsquo;arri\u00e8re-plan WordPress: comment les ajouter, les modifier et les personnaliser"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/45220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=45220"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/45220\/revisions"}],"predecessor-version":[{"id":65816,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/45220\/revisions\/65816"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/translations\/jp"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/45220\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/45238"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=45220"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=45220"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=45220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}