Images d’arrière-plan WordPress: comment les ajouter, les modifier et les personnaliser

Les images d’arrière-plan WordPress se présentent sous toutes les formes. Vous pouvez téléverser une image d’arrière-plan pour l’ensemble de votre site web, la placer derrière des boutons ou définir un arrière-plan de couleur unie pour votre page de connexion. Quel que soit l’endroit où vous souhaitez les placer, il est essentiel de comprendre les bases du téléversement d’une image, y compris une image d’arrière-plan.

Cet article explique ce qu’est une image d’arrière-plan et comment vous pouvez la modifier pour un meilleur résultat. Nous expliquerons également comment activer rapidement les images d’arrière-plan sur votre site et résoudre les problèmes pouvant survenir en cours de route.

Ça vous intrigue ? Commençons !

Consultez notre guide vidéo sur l’ajout d’images d’arrière-plan WordPress :

Qu’est-ce qu’une image d’arrière-plan WordPress ?

Une image d’arrière-plan WordPress sert d’arrière-plan complet de votre site web. Cela s’appelle également un arrière-plan personnalisé.

Quelle que soit l’option choisie, le fichier functions.php gère l’image d’arrière-plan dans un thème WordPress. Elle est également affichée par le fichier header.php de WordPress.

En conséquence, les développeurs de thèmes ont un meilleur contrôle sur l’activation ou non de la fonction d’arrière-plan personnalisé pour votre thème WordPress. Vous pouvez toujours tourner la fonctionnalité sur On ou Off, mais le thème de votre site dicte généralement les réglages par défaut.

Il existe plusieurs types d’arrière-plans que vous pouvez implémenter sur WordPress. Vous pouvez choisir un arrière-plan standard de site web complet ou un arrière-plan qui se trouve derrière des éléments spécifiques tels que des colonnes latérales et des articles.

Des arrière-plans personnalisés sont également possibles pour des emplacements plus spécifiques sur le site WordPress:

• Derrière une page ou un article WordPress
• Sur une page de catégorie WordPress
• À l’intérieur d’un bloc de contenu pour une page ou un article
• Sur la page de connexion
• Derrière le menu de navigation
• Sur les pages Maintenance ou Prochainement

Dans l’ensemble, si la prise en charge de l’arrière-plan personnalisé est activée dans un thème, l’utilisateur a la possibilité de téléverser une image ou de choisir une couleur pour remplir l’intégralité de l’arrière-plan du site.

Les réglages se trouvent dans le tableau de bord WordPress sous Apparence > Personnaliser > Image d’arrière-plan. Cependant, d’autres types d’arrière-plans sont possibles grâce aux constructeurs de pages en glisser-déposer, aux extensions et à différentes options.

Téléverser une image d’arrière-plan sur le tableau de bord n’est qu’une partie du processus. Après cela, vous devez configurer les réglages de l’image d’arrière-plan. Parfois, vous pouvez laisser les réglages tels quels, tandis que d’autres fois, il est important de reconfigurer les réglages pour que l’image soit excellente.

Les réglages d’une image d’arrière-plan WordPress comprennent :

• Couleurs d’arrière-plan
• Dimensionnement
• Position de l’image
• Si l’image doit se répéter ou non
• Options pour remplir l’écran ou étirer l’image

Nous aborderons d’abord les meilleures pratiques lors de l’utilisation d’images d’arrière-plan WordPress. Ensuite, nous verrons comment définir une image d’arrière-plan WordPress dans diverses situations.

Les nombreux styles d’arrière-plans

Un réel avantage d’un arrière-plan WordPress est que ce ne sont pas tous des images statiques. Vous pouvez rencontrer différents types d’arrière-plans, allant des vidéos aux motifs photo en passant par les diaporamas.

Vous êtes souvent en mesure d’implémenter des arrière-plans uniques à l’aide de CSS personnalisés ou d’extensions (ou les deux). Nous vous montrons les deux méthodes dans cet article.

Voici quelques styles d’arrière-plan à envisager :

• Images d’arrière-plan standard : ce sont des images statiques (PNG, JPG et autres formats d’image) qui s’étendent sur la plupart de l’espace du site web et se trouvent derrière le contenu principal. Leurs avantages incluent la simplicité, les options pour les photos en haute définition et la prise en charge par défaut par le cœur de WordPress. Les inconvénients vont de leur tendance à gâcher la visibilité des éléments de premier plan à une grande image en haute définition ralentissant votre site.
• Arrière-plans de couleur unie : La couleur unie d’arrière-plan est très pratique lorsque vous voulez ajouter un peu d’éclat à votre site, mais ne pas avoir une image qui correspond à votre marque ou qui semble bonne en arrière-plan. La couleur d’arrière-plan présente également une image plus nette et plus professionnelle, et sa mise en œuvre ne prend pas longtemps. Elles sont parfaites pour faire correspondre votre image de marque sans avoir besoin de code personnalisé ou d’extension.
• Arrière-plans dégradés : Un arrière-plan dégradé passe d’une couleur à une autre. C’est plus attrayant visuellement qu’une couleur unie, ne prend pas beaucoup de temps à ajouter et vous pouvez en ajouter un avec de nombreuses extensions. Le principal inconvénient est que le premier plan peut bien apparaître à une extrémité du dégradé mais pas à l’autre.
• Arrière-plans de motifs ou de textures : Tous les arrière-plans de motifs et de textures sont des photos, mais ils se concentrent sur des éléments répétitifs de l’image ou une texture en gros plan, comme un panneau de bois ou un morceau d’herbe. L’avantage d’un motif ou d’une texture est que cela fonctionne à merveille comme arrière-plan, en voyant comment vous pouvez l’étirer, et la plupart des gens ne remarqueront pas s’il y a une rupture dans le motif lorsque l’image n’est pas assez grande.
• Arrière-plans de diaporama d’images : un arrière-plan de diaporama d’images permet aux propriétaires de sites de partager plusieurs types de conceptions ou de photos en arrière-plan, renforçant ainsi les efforts pour ajuster l’ambiance lorsqu’un client parcourt votre site. Cependant, les diaporamas peuvent sembler distrayants ou ralentir votre site.
• Arrière-plans vidéo : les arrière-plans vidéo sont attrayants, amusants à regarder et décrivent facilement la nature de votre marque. Cependant, ils entraînent également des problèmes de performances s’ils ne sont pas effectués correctement et pourraient détourner l’attention de votre tunnel de vente. De plus, les vidéos d’arrière-plan doivent avoir les dimensions parfaites et être lues au bon moment. Elles peuvent également être coûteuses à réaliser, sauf si vous optez pour des vidéos gratuites.

Meilleures pratiques pour l’utilisation d’images d’arrière-plan WordPress

Définir une image d’arrière-plan personnalisée semble être une tâche facile. Il suffit de téléverser l’image au bon endroit et de la regarder apparaître sur l’interface publique, n’est-ce pas ?

La plupart du temps, c’est le cas, mais d’autres fois, vous constaterez que l’image d’arrière-plan peut être un peu gênante. C’est pourquoi nous vous recommandons de suivre les meilleures pratiques WordPress pour les images d’arrière-plan afin d’éliminer autant de problèmes que possible.

Conseils pour l’utilisation des images d’arrière-plan WordPress

Restez fidèle aux images de haute qualité

La résolution de votre image d’arrière-plan fait ou défait souvent sa présentation. Vous pouvez penser qu’une image prise avec votre smartphone est parfaite pour une image d’arrière-plan, mais il est fort probable qu’elle doive être de bien meilleure qualité.

Vous pouvez payer pour une image libre de droits à partir d’un site comme Shutterstock. Ces sites ont généralement des images de niveau professionnel qui sont préparées et prêtes à être téléversées sous la forme d’une grande image d’arrière-plan. Vous pouvez également en trouver beaucoup sur les sites d’images libres de droits.

L’image d’arrière-plan peut ne pas être affichée dans son intégralité sur votre site web, car une grande partie est recouverte par le contenu. Pourtant, l’image réelle est affichée sur tout l’écran.

Si vous n’utilisez pas une image de haute qualité, vous courez le risque de voir un arrière-plan étiré.

Assurez-vous que les images d’arrière-plan sont correctement dimensionnées

Outre la résolution de l’image, la taille physique de l’image compte beaucoup.

Tous les écrans ont des proportions variables. Et les appareils mobiles rendent les choses encore plus compliquées. Mais l’objectif est d’utiliser une image qui convient parfaitement au plus grand des écrans. Sinon, vous courez le risque d’avoir à nouveau l’image étirée ou qu’elle ne s’affiche pas correctement.

En général, une bonne règle est de s’en tenir à une taille minimale d’image d’arrière-plan WordPress de 1024 x 768 pixels. Cependant, d’autres experts recommandent quelque chose de plus comme 1920 x 1080 pixels. Dans l’ensemble, votre meilleur plan d’action est de rester quelque part entre 1000 et 3000 pixels pour la largeur, en fonction de l’endroit où elle est affichée.

Le facteur suivant à prendre en compte est le rapport hauteur / largeur. L’image d’arrière-plan recouvre-t-elle un site web entier ou s’agit-il simplement du quart supérieur?

Techniquement, un site web a un rapport d’aspect portrait (plus haut que large). Vous pouvez donc examiner ces types d’images. Cependant, les arrière-plans de sections, comme ceux des en-têtes ou des bannières publicitaires, doivent rester au format paysage (plus large que haut).

De plus, le rapport hauteur / largeur le plus courant pour les ordinateurs de bureau est de 16:9. Rester autour de cet objectif aide. Un thème ou une extension responsive peut ajuster l’image d’arrière-plan automatiquement pour une visualisation sur mobile.

En fin de compte, tester vos images d’arrière-plan sur un site réel et sur plusieurs types d’appareils devrait rendre la décision finale beaucoup plus facile.

Optimiser avant de créer une image d’arrière-plan WordPress

Comme pour toutes les images téléversées sur WordPress, vous ne vous rendez pas service si vous ne les optimisez pas avant de les publier sur Internet. Ceci est particulièrement important pour les images d’arrière-plan car elles apparaissent souvent sur plusieurs pages de votre site web. De plus, ce sont de grandes photos et recouvrent une quantité importante d’espace sur l’écran.

Les images plus grandes exercent une pression considérable sur votre serveur. Conservez la résolution de votre image, mais optimisez sa taille pour que votre site web se charge rapidement.

Vous avez deux options pour optimiser les photos :

1. Optimisez les images d’arrière-plan (et toutes les images du site web) avant de les téléverser sur WordPress. Terminez ce processus manuel à l’aide d’outils tels que Photoshop Express, GIMP et Pixlr.
2. Automatisez le processus d’optimisation en installant une extension WordPress qui redimensionne et réduit les photos lors du téléchargement.

Lisez notre guide détaillé d’optimisation d’image pour savoir comment optimiser les images pour améliorer les performances web.

Vérifiez la prise en charge de l’arrière-plan avant d’installer un thème

Malheureusement, tous les thèmes ne prennent pas en charge les images d’arrière-plan personnalisées. C’est souvent parce que l’arrière-plan ne correspond pas à la conception globale du thème, le développeur a donc choisi de désactiver complètement ceci.

Pourtant, si vous voulez vraiment un arrière-plan sur votre site web, il est prudent de vérifier la liste des fonctionnalités lors du téléchargement d’un nouveau thème, surtout si vous prévoyez de payer pour un thème premium. De nombreux sites web de vente de thèmes offrent des informations sur la prise en charge ou non des arrière-plans par un thème.

Par exemple, les thèmes répertoriés dans la bibliothèque de thèmes WordPress indiquent la prise en charge des arrière-plans personnalisés avec des étiquettes. Vous pouvez également trouver une référence à un arrière-plan personnalisé dans la description du thème.

D’autres sites de thèmes incluent généralement des informations similaires sur les images d’arrière-plan personnalisées. Sinon, contactez le développeur pour savoir si c’est possible de quelque manière que ce soit et si le remplacement du bloc d’image d’arrière-plan (couvert ci-dessous) causera des problèmes avec le thème.

Envisagez d’utiliser un constructeur de page visuel pour simplifier les images d’arrière-plan

Les constructeurs de pages comme Gutenberg, WPBakery, Divi et Elementor proposent des listes impressionnantes de blocs et de modules pour insérer des éléments tels que des images et des zones de texte n’importe où sur une page web.

Sans un constructeur en glisser-déposer, il devient un peu plus difficile de configurer une image d’arrière-plan. Il est particulièrement difficile d’essayer de résoudre les problèmes que vous pourriez rencontrer.

Les constructeurs de pages ont également tendance à remplacer la fonctionnalité d’image d’arrière-plan par défaut fournie par WordPress. Vous pouvez remplacer les restrictions de thème ou tout élément manquant qui aide à afficher une image d’arrière-plan dans le code.

Assurez-vous que votre image d’arrière-plan est légale

La légalité revient toujours quand on parle d’images, en particulier celles publiées sur Internet. Il y a une tendance croissante sur les réseaux sociaux où les gens semblent supposer que l’ajout d’un crédit à une photo permet automatiquement d’utiliser cette photo.

C’est faux.

Celui qui prend la photo en est propriétaire. Même si cette image provient d’un iPhone, ils bénéficient immédiatement d’une protection des droits d’auteur pour cette photo aux États-Unis et dans de nombreux autres pays.

Si vous voulez avoir les droits légaux d’utiliser la photo de quelqu’un d’autre, il faudrait une déclaration écrite du détenteur des droits d’auteur vous autorisant à utiliser ses images – un simple e-mail fait l’affaire. Même dans ce cas, vous devrez peut-être créditer la photo si la personne vous le demande.

Nous avons un guide complet sur la protection des images sur votre site, mais l’article présente également des informations précieuses pour ceux qui souhaitent utiliser des photos provenant d’autres sources.

La partie la plus difficile à propos des images d’arrière-plan est qu’il n’est généralement pas pratique d’ajouter un crédit, car WordPress n’a pas de place pour incorporer une légende visible pour les images d’arrière-plan. Et non, vous ne pouvez pas ajouter de crédit sur un article ou une page de blog aléatoire et vous attendre à ce que cela serve de crédit pour une image d’arrière-plan complet du site.

Pour vous protéger et respecter ceux qui prennent les photos, pensez à l’un des éléments suivants lors de la recherche d’une image d’arrière-plan WordPress :

• Prenez la photo vous-même. C’est le moyen le plus simple de vous assurer de ne pas enfreindre la propriété protégée par le droit d’auteur de quelqu’un d’autre.
• Payez des photos sur des sites web comme Shutterstock et iStockPhoto. Celles-ci sont parfois coûteuses, mais pour une image d’arrière-plan, cela peut tout simplement s’inscrire dans votre budget.
• Envisagez un site d’images gratuit es comme Unsplash ou Pexels. Cependant, assurez-vous que le crédit n’est pas nécessaire ! Vous pouvez parfois localiser des images sur ces sites où le crédit est suggéré mais pas obligatoire.
• Contactez le photographe ou l’artiste et demandez si vous pouvez l’utiliser gratuitement. Cela peut être tout ce dont vous avez besoin, surtout si vous offrez quelque chose en retour.
• Pensez à ne pas utiliser d’image d’arrière-plan, ou envisagez d’opter pour un arrière-plan coloré au lieu d’une photo.

Comment définir une image d’arrière-plan dans WordPress?

Il existe différentes façons de définir une image d’arrière-plan dans WordPress. Ces méthodes changent généralement en fonction de l’emplacement où vous souhaitez placer l’image.

Par exemple, vous pouvez décider que vous souhaitez qu’une image d’arrière-plan reste la même sur l’ensemble de votre site web. D’un autre côté, il est possible que vous préfériez trouver un moyen d’afficher des images d’arrière-plan uniques pour toutes vos pages.

Étant donné qu’il existe tant de possibilités, nous verrons comment ajouter une image ou une couleur d’arrière-plan dans les sections suivantes :

• Le site entier
• Une page WordPress
• Un article WordPress
• Un bloc de contenu individuel
• L’en-tête WordPress
• Une page d’archive de catégorie
• La page de connexion WordPress
• Le menu de navigation
• Une page de maintenance

Comment ajouter une image d’arrière-plan à l’en-tête et aux menus WordPress

Avant de commencer : activez la prise en charge d’arrière-plan personnalisé sur WordPress (si nécessaire)

Les développeurs de thèmes décident du sort des capacités d’arrière-plan d’un site. WordPress a la fonctionnalité intégrée dans son cœur, mais un développeur de thème pourrait la désactiver, vous laissant sans réglage de tableau de bord pour l’activer.

Si, à un moment donné dans les tutoriels suivants, vous trouvez que votre thème est la raison pour laquelle vous ne disposez pas d’une option d’arrière-plan personnalisé, envisagez les étapes suivantes pour y apporter une solution rapide.

Le principal support d’arrière-plan personnalisé pour WordPress est géré par le fichier functions.php. Ouvrez ce fichier et insérez le code suivant s’il est manquant :

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Gardez à l’esprit que l’élément activant réellement le support d’arrière-plan est la fonction add_theme_support() avec tout ce qu’elle contient. Ce code active la fonction d’arrière-plan dans le tableau de bord WordPress, que vous pouvez utiliser dans la plupart des tutoriels suivants de cet article.

Il est également possible d’ajouter une image d’arrière-plan par défaut pour l’ensemble du thème via le fichier functions.php. Accédez simplement à la zone du code précédent avec la valeur default-image et ajoutez l’URL de l’image dans l’espace vide entre le ' ' après le =>.

C’est un moyen rapide et facile d’activer des arrière-plans personnalisés dans le tableau de bord WordPress.

Cela dit, nous vous recommandons de changer le thème s’il ne prend pas en charge l’arrière-plan. La suppression de la fonction d’arrière-plan personnalisée pourrait avoir son propre objectif, ou peut-être que le développeur du thème a trouvé qu’elle causait trop de problèmes avec le design.

Comment ajouter une image d’arrière-plan à l’ensemble de votre site WordPress

Si votre thème offre la possibilité d’ajouter une image d’arrière-plan personnalisée (et beaucoup le font), cela vous facilite grandement la tâche.

Pour commencer, accédez à votre tableau de bord WordPress et cliquez sur Apparence > Personnaliser.

Cela vous amène à l’outil WordPress de personnalisation de thème, avec des réglages de personnalisation à gauche et un aperçu du site web à droite.

Ici, recherchez et cliquez sur l’onglet Arrière-plan.

Comme alternative, si vous pouvez sélectionner Apparence > Arrière-plan, vous pouvez l’utiliser pour un itinéraire plus direct vers ce réglage.

La zone de personnalisation de l’arrière-plan gère les éléments d’arrière-plan de l’ensemble de votre site web.

Cliquez sur le bouton Sélectionner une image pour continuer.

Dans la fenêtre Sélectionner une image, choisissez une image qui conviendra parfaitement comme arrière-plan pour votre marque et le style de votre site web. En général, un motif de couleur neutre avec une nuance noire, blanche ou grise permet généralement de garantir que la plupart de votre texte et de votre contenu sont toujours beaux avec l’arrière-plan.

Une fois que vous avez sélectionné votre image, cliquez sur le bouton Choisir une image pour continuer.

L’arrière-plan que vous avez implémenté apparaît maintenant dans l’aperçu du site web.

Voyez si votre contenu se démarque toujours et semble présentable avec l’image choisie. Parfois, vous constaterez peut-être que vous devez complètement remplacer l’arrière-plan ou modifier des éléments tels que le texte ou les couleurs des liens.

Une petite miniature de l’arrière-plan apparaît également dans le panneau Réglages, vous indiquant que l’image a été implémentée.

Quelques réglages supplémentaires sont disponibles pour les arrière-plans WordPress, y compris le champ Préréglage.

Cliquez sur le champ Préréglage pour modifier le formatage de l’image à l’aide de designs et d’alignements prédéfinis.

Vous pouvez choisir parmi les préréglages suivants :

• Par défaut : C’est généralement la même chose que Répéter, mais cela peut dépendre de votre thème. Le réglage par défaut fonctionne généralement mieux, mais cela dépend de l’image utilisée.
• Remplir l’écran : Ce réglage étire l’image pour garantir que toutes les parties de l’écran sont couvertes, même si cela signifie recadrer l’image, de sorte qu’elle déborde de l’écran. Cela fonctionne bien pour de nombreuses images en haute définition, mais pourrait provoquer un flou avec des images en basse définition.
• Ajuster à l’écran : Ceci maintient le rapport hauteur / largeur de la photo d’origine et tente d’utiliser ce rapport pour s’adapter à l’image d’écran actuelle. Il fait un bon travail pour garder l’image près de son état d’origine mais peut ne pas couvrir toute la zone d’arrière-plan.
• Répéter : Cela utilise des parties de la fonction Remplir l’écran, agrandissant et étirant l’image, mais cela répète également l’image lorsqu’elle ne parvient pas à couvrir tout l’écran. Pour les motifs, cela a généralement l’air génial. Mais pour certaines images, cela peut produire une ligne dure entre les images répétées.
• Personnalisé : Ce réglage vous donne le plus de contrôle sur l’arrière-plan, offrant plusieurs options pour personnaliser la taille de l’image d’arrière-plan WordPress, comme la façon dont elle se répète sur la page, s’étire ou se déplace lorsque l’utilisateur fait défiler la page.

Il n’y a pas de règle pour déterminer lequel des préréglages fonctionne le mieux car les images sont de tailles, de résolutions et de détails différents. Par conséquent, il est préférable de commencer par le préréglage par défaut, puis de tester chacun des autres préréglages pour voir lequel convient le mieux à votre image d’arrière-plan.

Si tout le reste échoue, accédez au réglage Personnalisé pour être vraiment précis dans vos choix.

Le préréglage Ajuster à l’écran ne le fait pas tout à fait pour cette image, principalement parce que l’image d’origine est beaucoup plus longue que large, laissant un espace important vers la droite. Je pourrais changer la position de l’image au centre, mais cela laisserait très probablement un espace blanc sur les côtés.

Le réglage suivant à prendre en compte est l’outil de Position de l’image. Cliquez sur les flèches pour déplacer votre image d’arrière-plan, en ajustant l’orientation pour placer le focus de l’image vers le centre ou pour remplir l’écran.

Tout comme les Préréglages, l’outil Position de l’image nécessite un processus de tests et de vérification de votre travail, car l’image d’origine et son contenu dictent son aspect.

Ensuite, il y a une case à cocher pour faire défiler l’image d’arrière-plan avec la page.

Lorsque cette case est cochée, l’image d’arrière-plan colle au contenu de premier plan et défile avec l’utilisateur à mesure que cette personne se déplace vers le haut ou vers le bas sur la page.

Décocher cette case a tendance à changer l’orientation générale de l’image d’arrière-plan, mais sa caractéristique dominante est de dire à l’arrière-plan de rester statique pendant que l’utilisateur fait défiler la page.

Les éléments de contenu de premier plan (comme les produits dans ce cas) glissent sur l’image d’arrière-plan, créant un effet attrayant

Travailler avec un préréglage personnalisé

Lorsque vous optez pour quelque chose en plus du préréglage personnalisé, vous n’obtenez pas autant de réglages supplémentaires à configurer.

Cependant, le choix du préréglage personnalisé ouvre plusieurs autres champs à prendre en compte.

Par exemple, vous pouvez choisir de Remplir l’écran ou d’Ajuster à l’écran, puis de le combiner avec une image d’arrière-plan répétée ou non répétée, en combinant les éléments des préréglages d’avant. Et vous obtenez toujours l’option Faire défiler avec la page.

Vérifiez s’il est possible d’utiliser l’image d’origine sans aucune modification ni aucun réglage. Parfois, la photo originale est une correspondance presque parfaite à utiliser comme arrière-plan, alors pourquoi jouer avec ce qui est déjà prêt à être utilisé ?

Cependant, sa taille peut également être trop grande pour votre site web, ou peut-être que le rapport hauteur/largeur ne convient pas. Quoi qu’il en soit, nous vous suggérons d’expérimenter ce réglage pour déterminer s’il vous convient.

Une fois que vous avez choisi vos réglages d’arrière-plan parfaits (pour ce tutoriel, l’option Par défaut a l’air bien), cliquez sur le bouton Publier pour afficher les modifications sur votre site web.

Accédez à l’interface publique de votre site pour voir l’arrière-plan en action.

La page d’accueil est un excellent point de départ. Vous remarquerez que la zone d’en-tête et l’image de bienvenue n’ont pas d’arrière-plan. En effet, l’image de bienvenue en haut du site recouvre déjà toute la partie horizontale de l’écran en tant qu’image en plein écran.

En ce qui concerne l’en-tête et le menu, vous apprendrez à configurer ces arrière-plans dans certains des tutoriels suivants.

Gardez à l’esprit que l’arrière-plan général personnalisé de WordPress s’active sur chaque page et article de votre site. C’est une fonctionnalité globale pour ceux qui veulent un moyen rapide de faire correspondre leur site à leur marque et d’ajouter une touche de brillant.

Par exemple, aller à la page Shop sur ce site révèle l’arrière-plan derrière la sélection de produits.

Comment définir une couleur d’arrière-plan au lieu d’une image pour l’ensemble de votre site web

Le processus d’activation d’une couleur d’arrière-plan sur l’ensemble de votre site web n’est pas très différent de celui lorsque vous activez une image d’arrière-plan. Commencez par aller dans Apparence > Arrière-plan dans le tableau de bord, puis recherchez le champ Couleur d’arrière-plan.

Cliquez sur le bouton Sélectionner une couleur pour ouvrir plus de réglages afin de choisir et de changer différentes couleurs pour votre arrière-plan.

 

Le panneau de couleurs offre plusieurs options pour vous permettre de choisir une couleur. La première consiste à saisir ou à coller un code couleur. Toutes les couleurs ont des codes de couleur uniques, et vous pouvez trouver ces couleurs et leurs codes associés avec une recherche rapide sur Internet.

L’autre option consiste à cliquer dans le panneau de couleurs pour trouver la couleur parfaite pour l’arrière-plan. Ils ont même des nuances de couleurs communes vers le bas du panneau si vous préférez prendre l’une des couleurs les plus simples.

Pour activer une couleur d’arrière-plan, assurez-vous que la couleur est sélectionnée et affichée dans l’aperçu Sélectionner une couleur.

Vous devriez voir la couleur d’arrière-plan dans l’aperçu de l’outil de personnalisation de WordPress. Sinon, cela signifie probablement que vous avez installé une image d’arrière-plan qui remplace la couleur d’arrière-plan.

Tout ce que vous avez à faire pour révéler la couleur d’arrière-plan est de cliquer sur le bouton Supprimer sous l’aperçu de l’image d’arrière-plan.

Désormais, la couleur apparaît dans l’intégralité de votre site, derrière le contenu. Tout comme vous le feriez avec une image d’arrière-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ère-plan.

Comment ajouter une image d’arrière-plan à une page WordPress

Mais que faire si vous souhaitez insérer une image sur WordPress pour apparaître en arrière-plan sur une seule page WordPress ? La section précédente décrit les réglages globaux d’une image d’arrière-plan à l’échelle du site.

Consultez notre guide vidéo sur l’ajout d’images d’arrière-plan aux pages uniques, aux articles et aux blocs de contenu de WordPress

De nombreuses personnes aiment ajouter des arrière-plans à leurs pages, car vous pouvez incorporer un certain thème ou une certaine sensation à une page qui s’applique au contenu. Par exemple, une page À propos de nous peut avoir un arrière-plan à Los Angeles si l’entreprise est à Los Angeles. Ou une introduction au livre d’un auteur pourrait inclure un arrière-plan qui correspond au thème de l’histoire.

Dans cette section, nous expliquerons comment ajouter une image d’arrière-plan WordPress à une page en utilisant une méthode principale et quelques alternatives si cela ne vous dérange pas de dépenser de l’argent sur une extension ou d’opter pour un constructeur de page.

Note : peu importe que vous utilisiez l’éditeur Gutenberg ou l’éditeur WordPress classique.

Pour les arrière-plans spécifiques à une page, ces méthodes semblent le mieux fonctionner :

• Ajouter un arrière-plan de page unique avec du CSS personnalisé.
• Utiliser une extension qui permet des arrière-plans de page individuelles.
• Incorporer un arrière-plan personnalisé sur chaque page à l’aide d’un constructeur de page.

Ajouter votre propre CSS personnalisé à une page implique de trouver l’ID de classe de cette page et d’appeler une URL d’arrière-plan, dans le module CSS personnalisé, dans les réglages de la page WordPress. Heureusement, il n’est pas si difficile de déterminer l’ID de classe d’une page, étant donné que nous pouvons le rechercher, ou vous savez peut-être déjà ce que c’est.

Accédez à la page de votre site où vous souhaitez un arrière-plan uniquement pour cette page.

Cliquez avec le bouton droit n’importe où sur la page pour afficher un menu déroulant sur votre écran. Sélectionnez l’outil Inspecter au bas du menu déroulant.

Le module Inspecter affiche le code de la page elle-même, ainsi que le CSS personnalisé utilisé globalement pour votre site web. C’est une zone utile pour trouver des informations sur une page ou un article sur votre site.

La boîte Inspecter contient des lignes de code de la page, mais nous ne sommes intéressés que par la balise de classe attribuée à cette page en particulier. Pour clarifier, chaque page WordPress a une balise de classe comme code d’identification.

Utilisez la fonction de recherche et saisissez body ou class pour localiser la ligne de code avec la balise page-id.

Dans ce cas, l’ID est page-id-352, mais le vôtre sera différent.

Vous souhaitez copier toute la partie du code avec le mot-clé page-id-#, y compris les tirets.

Avec l’ID de page enregistré quelque part pour une utilisation dans les prochaines étapes, revenez à votre tableau de bord WordPress et cliquez sur Apparence > Personnaliser.

Sélectionnez l’onglet CSS supplémentaire dans la personnalisation de WordPress.

Cette section vous permet de saisir ou de coller tout CSS personnalisé des éléments de votre site web que vous souhaitez manipuler. Dans ce cas, il est pratique pour remplacer l’image d’arrière-plan par défaut et activer une image d’arrière-plan pour une page et pas pour les autres.

Collez le code suivant dans le champ CSS supplémentaire, mais n’oubliez pas de remplacer le « # » par le nombre réel que vous avez récupéré comme ID de page dans les étapes précédentes. De plus, vous devez mettre une URL d’image réelle à la place du texte de remplissage que nous y avons (http://YOURIMAGEURL.jpeg).

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Pour cet exemple, l’ID de page est renseigné comme 352 et nous avons une URL d’image d’arrière-plan collée depuis notre médiathèque.

Si nécessaire, modifiez les réglages d’arrière-plan personnalisés si vous ne parvenez pas à ajuster l’image d’arrière-plan. Par exemple, vous souhaiterez peut-être modifier des éléments tels que la taille, le fichier joint ou la position de l’image d’arrière-plan WordPress. Sinon, laissez-les tous tels qu’ils sont dans l’exemple de code.

Cliquez sur le bouton Publier lorsque vous êtes satisfait du CSS personnalisé.

Avec ce CSS personnalisé, la page spécifiée comprend une image d’arrière-plan utilisant les réglages de dimensionnement et de positionnement du code. Aucune autre page de votre site n’affichera le même arrière-plan, sauf si vous répétez le CSS pour différents ID de page.

Comme mentionné précédemment, vos autres options pour ajouter un arrière-plan unique à une page WordPress incluent l’utilisation d’un constructeur de page ou d’une extension qui permet des images d’arrière-plan sur des pages individuelles.

Cependant, le moyen le moins cher et le plus rapide de placer une image d’arrière-plan sur une page individuelle consiste à utiliser la méthode de code CSS indiquée ci-dessus.

Comment ajouter une image d’arrière-plan à un article WordPress

La plupart des images d’arrière-plan sont insérées derrière les pages WordPress ou chaque page d’un site web.

La fonctionnalité d’arrière-plan personnalisé par défaut de WordPress n’a rien à voir avec les articles individuels, outre le fait que cet arrière-plan apparaîtra également pour les articles de blog. Ce n’est pas idéal pour toutes les organisations, car différents articles de blog peuvent avoir des sujets radicalement différents.

Ces blogs pourraient bénéficier de leurs propres images uniques d’arrière-plan. Cependant, les articles WordPress n’ont pas leur propre réglage d’image d’arrière-plan, ce qui les rend un peu plus délicats.

Par conséquent, nous avons quelques options à prendre en compte lors de l’ajout d’une image d’arrière-plan à un article (vous remarquerez qu’elles sont les mêmes que lorsque vous travaillez avec des images d’arrière-plan spécifiques à une page):

• Insérer une image d’arrière-plan à l’aide de CSS personnalisé.
• Utiliser une extension pour implémenter un arrière-plan sur des articles individuels.
• Installer un constructeur de page visuel pour les arrière-plans d’article.

Comme la section précédente sur les arrière-plans de page uniques, vous pouvez ajouter un arrière-plan spécifique à un article à l’aide d’un constructeur de page ou d’une extension.

Étant donné que créer un arrière-plan spécifique à un article n’est pas très différent d’un arrière-plan spécifique à une page, nous n’aborderons que brièvement les étapes à suivre pour gérer ce processus pour un article individuel.

Lorsque vous utilisez un CSS personnalisé pour implémenter un arrière-plan spécifique à un article, vous utilisez le même code que vous le feriez pour l’arrière-plan de page, à une différence près : vous devez trouver l’ID de l’article au lieu de l’ID de page.

Par conséquent, ouvrez l’interface publique d’un article WordPress dans lequel vous souhaitez insérer un arrière-plan.

Cliquez avec le bouton droit sur l’article et choisissez l’option Inspecter. Effectuez une recherche dans le code pour localiser la section de classe de corps dans le code. Recherchez la partie postid-#, c’est l’ID de l’article que vous devez insérer dans le CSS personnalisé.

Vous remarquerez que la mise en forme de l’ID de l’article est légèrement différente dans cet exemple par rapport à l’ID de page, où la balise postid-# n’a pas de tiret entre « post » et « id » comme c’est le cas avec page-id-#. De plus, ce ne sont pas des règles strictes. Vous pouvez trouver des formats variés pour les balises.

Maintenant, allez sur votre tableau de bord WordPress et cliquez sur Apparence > Personnaliser. Accédez à l’onglet CSS supplémentaire.

Collez le code suivant dans ce champ CSS personnalisé:

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Après cela, prenez le numéro d’ID de l’article que vous avez trouvé plus tôt dans l’article souhaité. Remplacez le « # » dans le code CSS par le nombre. En outre, remplacez le texte http://YOURIMAGEURL.jpeg par l’URL réelle de l’image d’arrière-plan que vous souhaitez afficher, en gardant les guillemets autour d’elle.

Assurez-vous de cliquer sur le bouton Publier avant de quitter l’onglet CSS supplémentaire, car cela enregistre vos modifications sur le site web et vous permet d’afficher l’arrière-plan sur l’interface publique.

Une fois ces changements CSS en place, vous pouvez maintenant revenir à l’interface de cet article de blog WordPress pour voir le nouvel arrière-plan. Testez les autres articles et pages de blog de votre site pour voir qu’aucun des autres n’a d’arrière-plan, sauf si vous implémentez le même code pour ces ID d’article.

Comment ajouter une image d’arrière-plan à un bloc individuel de contenu

Les blocs individuels de contenu de l’éditeur de blocs WordPress Gutenberg permettent un large éventail d’options d’affichage de contenu, y compris des zones de texte, des images et des galeries.

Ceux-ci divisent votre contenu en plusieurs sections distinctes. Ainsi, vous pouvez ajouter une couleur ou une image d’arrière-plan juste pour ce bloc.

Par exemple, disons que vous écrivez un article de blog sur l’état de l’industrie du vêtement au détail. Vous souhaitez terminer ou commencer l’article par un appel à l’action pour que les gens s’inscrivent à votre prochain webinaire. Il serait logique que cette section se démarque en utilisant une couleur ou une image d’arrière-plan.

Malheureusement, l’éditeur de blocs WordPress n’offre pas de réglage complet dans lequel vous pouvez ajouter un arrière-plan à n’importe quel bloc. Cependant, certains blocs ont la possibilité d’incorporer une couleur d’arrière-plan.

Il existe également un bloc, appelé bloc Couverture, qui est la chose la plus proche où nous pouvons ajouter une image d’arrière-plan pour un bloc dans un article ou une page. La couverture vous permet de superposer du texte et certains éléments multimédias, ce qui le rend adapté à notre objectif final.

Vous trouverez ci-dessous les techniques à utiliser pour définir une image ou une couleur d’arrière-plan pour un bloc WordPress individuel.

Définir une couleur d’arrière-plan pour un bloc

Le moyen le plus simple d’ajouter de la vivacité à un seul bloc est d’ajouter une couleur d’arrière-plan. Ce n’est pas aussi sophistiqué qu’une image d’arrière-plan, mais la couleur d’arrière-plan est en fait le seul type d’arrière-plan dans l’éditeur de blocs WordPress disponible pour les blocs standard.

Note : certains blocs n’ont aucun réglage d’arrière-plan. Si tel est le cas, il est préférable d’utiliser un bloc de couverture et de superposer d’autres blocs par-dessus, comme indiqué plus bas dans cet article.

Le bloc Paragraphe, par exemple, a un réglage pour activer une couleur d’arrière-plan.

Pour l’activer, sélectionnez le bloc, puis recherchez les réglages de couleur sous l’onglet Bloc sur le côté droit.

Cette section révèle les champs Couleur du texte et Couleur d’arrière-plan.

Accédez à la zone Couleur d’arrière-plan et sélectionnez une couleur dans la liste des options disponibles. Vous pouvez également choisir le lien Couleur personnalisée pour insérer votre propre code couleur ou choisir une couleur unique.

Comme vous pouvez le voir, une fois ce réglage en place, l’arrière-plan du bloc Paragraphe prend une couleur différente, dans ce cas, le bleu.

Ajouter une couleur d’arrière-plan à n’importe quel bloc WordPress

Comme mentionné précédemment, tous les blocs WordPress n’ont pas cette fonction d’arrière-plan intégrée. Que devez-vous faire si vous souhaitez créer une galerie, ou un autre élément de bloc, qui n’offre pas l’option d’arrière-plan ?

La solution la plus rapide consiste à utiliser la fonction de groupe de blocs dans WordPress.

Pour ce faire, sélectionnez plusieurs blocs déjà dans votre contenu. Pour cet exemple, je sélectionnerai simultanément un bloc Paragraphe et un bloc Galerie.

Cliquez sur l’icône carrée empilée dans le menu qui apparaît.

Choisissez l’option Groupe dans le menu déroulant.

Cela prend tous les blocs que vous avez actuellement sélectionnés et les combine dans un groupe, vous permettant de les déplacer ou de les modifier tous ensemble plutôt que séparément.

Cela définit le groupe comme son propre bloc. Cela signifie que vous pouvez accéder à l’onglet des Réglages du bloc sur le côté droit de la page pour trouver ses réglages.

Recherchez l’onglet des Réglages de couleur et cliquez dessus.

Tout comme un bloc paragraphe standard, le bloc groupe dispose également d’une fonction de couleur d’arrière-plan.

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’arrière-plan.

Ce qui est génial avec le bloc Groupe, c’est qu’il prend un autre bloc qui n’a pas de fonction d’arrière-plan (comme le bloc Galerie) et vous permet quand même d’activer un arrière-plan.

Ajouter ‘une image d’arrière-plan à un bloc WordPress

Les blocs WordPress se trouvent à la fois dans les pages et dans les articles. Par conséquent, nous pouvons mettre en œuvre cette tactique dans l’un ou l’autre. Vous pouvez insérer à peu près n’importe quel contenu au-dessus de l’arrière-plan du groupe de blocs – ou uniquement dans un bloc WordPress.

Pour commencer ce processus, cliquez sur le bouton Ajouter un bloc ou sur l’icône « + » et recherchez le bloc Couverture.

Choisissez ce bloc pour l’insérer dans votre article ou votre page.

Vous devez ensuite cliquer sur le bouton Téléverser ou Sélectionner un média, qui vous permet de rechercher des images que vous pouvez utiliser comme arrière-plan.

Choisissez l’image souhaitée et cliquez sur le bouton Sélectionner.

Vous pouvez maintenant voir cette image comme arrière-plan du bloc Couverture.

N’hésitez pas à cliquer sur ce bloc pour commencer à saisir le contenu du paragraphe, car la fonction principale est de superposer du texte.

Ce qui est génial avec le bloc Couverture, c’est qu’il offre plusieurs options de mise en forme, vous permettant de passer d’un en-tête à un format de paragraphe en quelques secondes.

Pour ajouter d’autres blocs au-dessus de cet arrière-plan, cliquez sur l’icône « + » dans le bloc de couverture lui-même. Vous devrez peut-être appuyer une fois sur la touche Entrée pour afficher le bouton.

Tout comme l’ajout d’un bloc de contenu dans un article ordinaire, le bloc Couverture vous permet de faire défiler tous les blocs de contenu potentiels dans WordPress.

Cela signifie que vous pouvez placer une image, une galerie, des colonnes ou tout type de bloc WordPress dans le bloc Couverture, ce qui en fait la solution idéale pour les images d’arrière-plans avec un bloc individuel.

Pour cet exemple, j’ai inséré une image et l’ai formatée un peu pour la rendre acceptable dans le bloc Couverture.

Chaque bloc que vous placez devant l’arrière-plan a ses propres réglages personnalisés dans l’onglet Bloc de droite, pensez donc à les modifier lorsque vous les déposez dans le bloc Couverture.

À un moment donné, vous souhaiterez peut-être modifier ou personnaliser l’image d’arrière-plan elle-même. Si tel est le cas, choisissez le bloc Couverture, puis accédez à l’onglet Réglages du bloc sur le côté droit de la page.

Cela révèle une myriade de réglages à ajuster pour l’image d’arrière-plan, y compris les suivants :

• Arrière-plan fixe
• Arrière-plan répété
• Sélecteur de point focal
• Dimensions
• Recouvrir
• Opacité
• Avancé

L’un des réglages les plus importants à prendre en compte est vers le bas du panneau Réglages du bloc.

Faites défiler vers le bas pour trouver la section Superposition. Ouvrez la section pour afficher une liste de superpositions de couleurs et des options pour rendre ces couleurs unies ou dégradées.

C’est une excellente option pour modifier légèrement la couleur de votre arrière-plan pour la faire correspondre à votre marque ou mettre en évidence votre contenu de premier plan. Vous pouvez également régler l’opacité pour vous assurer que la superposition de couleurs ne submerge pas complètement l’arrière-plan.

Comme alternative, envisagez l’extension Stackable Page Builder Gutenberg Blocks pour ouvrir des outils plus avancés pour les arrière-plans sur des blocs individuels.

Comment mettre une image d’arrière-plan derrière l’en-tête de WordPress

Jusqu’à présent, nous avons expliqué comment ajouter une image d’arrière-plan à l’ensemble de votre site WordPress, ainsi que des méthodes pour les arrière-plans dans des domaines spécifiques tels que les blocs, les articles et les pages WordPress. Mais qu’en est-il de la zone qui contient votre menu et votre logo ?

Parfois, un arrière-plan derrière votre en-tête est tout ce dont vous avez besoin.

La définition d’une image d’arrière-plan pour l’en-tête ajoute une nouvelle ambiance à votre site, surtout s’il y a des vacances en cours ou une grande promotion que vous voulez mettre en évidence.

Pour commencer, allez dans Apparence > En-tête dans le tableau de bord WordPress.

Note : vous pouvez également trouver les réglages d’en-tête en accédant à la section Apparence> Personnaliser > En-tête.

Vous devriez maintenant voir un aperçu de votre page d’accueil sur le côté droit de l’écran, ainsi que les réglages d’en-tête sur le côté gauche de celui-ci.

Le module En-tête explique les dimensions préférées pour toute image d’arrière-plan d’en-tête, vous pouvez donc choisir de recadrer votre image avant de la téléverser ou d’attendre que vous obteniez l’image sur votre tableau de bord WordPress.

Sous le titre de l’en-tête actuel, cliquez sur le bouton Ajouter une nouvelle image.

Les en-têtes sont délicats car vous voulez vous assurer que tous les liens et éléments de texte (sans parler de votre logo) sont parfaitement clairs au-dessus de l’image d’arrière-plan.

Par conséquent, nous vous recommandons de tester les images d’arrière-plan et de considérer des images qui collent à des couleurs et des motifs plus solides. Ils ne rendront pas aussi difficile de voir vos éléments de menu et votre logo.

Sélectionnez une image qui vous semble idéale, puis cliquez sur le bouton Sélectionner et recadrer pour continuer.

Nous aimons l’outil de recadrage intégré car il fournit automatiquement les bonnes dimensions pour l’image d’arrière-plan de l’en-tête. Cela devrait accélérer le processus par rapport à la modification préalable d’une photo dans un outil comme Photoshop.

Déplacez la zone de recadrage vers l’emplacement qui convient le mieux à votre image d’arrière-plan. N’hésitez pas à faire glisser l’un des coins si vous avez besoin de réduire encore plus l’image.

Une fois que vous avez le recadrage parfait, cliquez sur le bouton Recadrer l’image.

L’image d’arrière-plan de l’en-tête est immédiatement activée dans l’aperçu de la personnalisation WordPress, vous aidant à voir exactement ce que vos clients regarderont avec ce type d’arrière-plan.

Vous remarquerez que l’image d’arrière-plan de l’en-tête ne dépasse pas dans le reste du contenu de la page. Au lieu de cela, elle reste dans l’en-tête, derrière tout ce qui s’y trouve actuellement, comme un logo, un slogan, un menu et une barre de recherche.

Une autre option pour l’arrière-plan de votre en-tête consiste à téléverser plusieurs images et à les faire s’afficher de manière aléatoire, ce qui ajoute un peu d’éclat et de surprise à votre site chaque fois qu’un utilisateur arrive sur la page d’accueil.

Pour que cela fonctionne, vous devez d’abord avoir plusieurs images téléversées dans la boîte de réglages d’en-tête. Cliquez sur le bouton Ajouter une nouvelle image pour terminer ce processus.

Une fois que vous avez plus d’une image, cliquez sur le bouton En-têtes téléversés aléatoires pour activer la fonctionnalité qui affiche un arrière-plan d’en-tête différent à chaque fois.

Vous remarquerez peut-être que l’ajout d’une image d’arrière-plan à l’en-tête rend difficile l’affichage de certains éléments de l’en-tête, comme votre menu ou un panier.

Si tel est le cas, nous vous suggérons de ne pas supprimer immédiatement l’image d’en-tête. Au lieu de cela, accédez aux champs Couleur du texte et Couleur du lien pour voir si des ajustements peuvent vous aider.

Le réglage Couleur du texte contrôle tout texte de l’en-tête qui n’est pas un lien hypertexte vers une autre page interne ou externe. Souvent, cela n’est que le slogan, si vous en avez un, mais parfois vous pouvez avoir d’autres éléments comme un total de panier d’achat ou des icônes de réseaux sociaux qui changent également de couleur avec le texte.

L’autre case concerne la couleur du lien. Vous verrez probablement plus de changements lorsque vous ajustez cette couleur, car elle inclut tous les éléments de menu liés à d’autres pages.

Voici un exemple de ce qui se passe lorsque vous choisissez une nouvelle couleur pour la couleur du texte et la couleur du lien. Vous pouvez voir que le slogan et le nom du site ont changé, que le menu est devenu blanc, tout comme la plupart des autres éléments d’en-tête comme l’icône du panier.

Pour ceux qui ne sont pas intéressés par l’utilisation d’une image d’arrière-plan pour votre en-tête, vous avez également la possibilité d’utiliser une couleur d’arrière-plan.

Pour cela, recherchez le champ Couleur d’arrière-plan sous la même zone Réglages d’en-tête.

Cliquez sur le bouton Sélectionner une couleur et choisissez dans le panneau de couleurs pour voir les résultats dans l’aperçu. Vous pouvez également modifier les couleurs du texte lors de l’utilisation d’une couleur d’arrière-plan.

Après avoir testé ce qui fonctionne le mieux pour votre en-tête et décidé de l’image d’arrière-plan parfaite pour cet en-tête, cliquez sur le bouton Publier pour tous pour voir les modifications.

Et si vous rencontrez des problèmes pour voir les modifications sur l’interface publique, pensez à vider votre cache WordPress.

Comment ajouter des images d’arrière-plan aux pages de catégories et aux pages de connexion de WordPress 

Comment ajouter une image d’arrière-plan à une catégorie WordPress

Une page d’archives de catégories WordPress compile tous les articles listés dans une certaine catégorie. Par exemple, de nombreux sites proposent des catégories pour des types de publication personnalisés tels que les Produits. Par défaut, tous les sites web WordPress ont des catégories pour les articles. Ceux que vous ne catégorisez pas sont étiquetés avec la catégorie Non classé.

Étant donné que les pages d’archives de catégories regroupent un contenu similaire, il est logique d’inclure une image d’arrière-plan pertinente sur ces pages pour mieux présenter la catégorie. Par exemple, vous pouvez avoir une formation axée sur la technologie pour une catégorie de conception web ou un arrière-plan à motif de coquillage ou de plage pour une catégorie de voyage.

La méthode CSS personnalisée (décrite ci-dessous) est l’option la moins chère. Cependant, vous pouvez également consulter les différents constructeurs de pages et les extensions pour voir lesquels d’entre eux autorisent les arrière-plans sur les pages de catégorie.

Pour terminer cette tâche avec CSS, ouvrez votre tableau de bord WordPress et accédez à Apparence > Personnaliser.

Sélectionnez l’onglet CSS supplémentaire pour ouvrir le module qui permet de saisir votre propre CSS.

Ouvrez l’une de vos pages d’archives de catégories sur votre site WordPress. Habituellement, ces pages ont des URL comme ceci: http://yourwebsitedomain.com/category/travel. Vous devez remplacer la partie travel par la catégorie que vous avez sur votre propre site et remplacer la partie yourwebsitedoman par votre nom de domaine réel.

Cliquez avec le bouton droit n’importe où sur la page de catégorie et cliquez sur Inspecter. Cela affichera l’outil Inspecter dans votre navigateur, avec le code de cette page présenté pour que vous puissiez le voir.

Recherchez « body » ou « class » pour localiser la classe CSS des pages de catégorie, ainsi que la classe de cette catégorie en particulier.

Pour cette situation, notre classe CSS est « category-travel », puisque j’ai une catégorie nommée « Travel » sur le site.

Enregistrez la balise CSS pour plus tard.

Après cela, revenez à la section CSS supplémentaire de la personnalisation de WordPress.

Collez le code suivant dans cette boîte, en remplaçant la classe category-travel par la vôtre et en plaçant une URL réelle d’image à l’endroit indiqué http://YOURIMAGEURL.jpeg.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Cliquez sur le bouton Publier pour enregistrer les modifications.

Enfin, revenez à la page des archives des catégories sur l’interface publique de votre site WordPress. Cela devrait maintenant afficher la même page qu’avant, mais avec l’arrière-plan spécifié dans le code CSS. Si vous rencontrez des problèmes avec le formatage de l’image d’arrière-plan WordPress, revenez au panneau CSS supplémentaire pour ajuster des éléments tels que la position, la taille et la fonction de répétition de l’arrière-plan.

Comment ajouter une image d’arrière-plan à votre page de connexion WordPress

La page de connexion WordPress a deux versions : une pour les utilisateurs réguliers qui viennent sur votre site et souhaitent s’inscrire et se connecter à votre site web, et l’autre pour les utilisateurs internes, comme les administrateurs et les auteurs.

Ces pages de connexion sont séparées du fonctionnement principal de votre site web (la plupart des fichiers se trouvant dans le fichier wp-login.php). Ainsi, l’outil d’image d’arrière-plan personnalisé ne débordera pas dans les modules de connexion.

Vous pouvez le faire en utilisant une extension appelée Custom Login Page Customizer. Pour commencer, installez et activez l’extension sur votre site WordPress.

Sur la gauche, un nouvel onglet dans le menu du tableau de bord WordPress apparaît pour LoginPress.

Rendez-vous dans LoginPress > Réglages.

Ici, vous pouvez ajuster les réglages de l’extension avant d’ajouter votre arrière-plan et de personnaliser toute autre partie de votre page de connexion.

Par exemple, l’extension propose des réglages pour mémoriser automatiquement les utilisateurs, afficher les champs de mot de passe personnalisés et expirer les sessions après un certain laps de temps.

Pour activer un arrière-plan d’image personnalisé pour la page de connexion, cliquez sur LoginPress > Personnalisation.

Cela vous renvoie dans l’outil de personnalisation de WordPress, où une nouvelle page a été ajoutée pour les outils LoginPress. Vous remarquerez des onglets pour les thèmes, le logo, l’arrière-plan, etc.

Il est également possible de personnaliser la page de connexion en cliquant sur les boutons dans l’aperçu visuel.

Nous ne couvrirons pas tous les autres réglages car nous nous concentrons principalement sur l’arrière-plan pour le moment.

Cliquez sur l’onglet Arrière-plan pour continuer.

La première chose à faire est de décider si vous souhaitez une couleur d’arrière-plan ou une image d’arrière-plan.

Si vous préférez une couleur d’arrière-plan, localisez le champ Couleur d’arrière-plan et cliquez sur Sélectionner une couleur. Cela révèle un panneau de couleurs pour vous permettre de choisir exactement la couleur qui convient à votre site.

Comme vous pouvez le voir, le changement entre également en vigueur dans l’aperçu de la personnalisation de WordPress.

Juste en dessous du réglage Couleur d’arrière-plan, il y a une section Image d’arrière-plan.

Activez le commutateur Activer l’image d’arrière-plan pour afficher une collection d’images d’arrière-plan prédéfinies.

Il n’y a pas beaucoup de choix dans la version gratuite, mais l’extension en ajoute plus si vous décidez de passer à la version premium.

Allez-y et testez ces arrière-plans pré-définis pour voir s’ils peuvent fonctionner pour votre marque.

Le chemin le plus probable est de téléverser votre propre image comme arrière-plan de la page de connexion.

Recherchez Image d’arrière-plan et cliquez sur le bouton Sélectionner une image.

Vous serez amené dans la médiathèque WordPress pour téléverser une image depuis votre ordinateur ou en choisir une qui est déjà dans WordPress.

Sélectionnez la photo souhaitée et cliquez sur le bouton Choisir l’image.

L’image d’arrière-plan activée apparaît sous forme de miniature dans le panneau Personnalisation et l’aperçu réel de votre page de connexion.

Vous avez maintenant la possibilité de cliquer sur le bouton Publier et de vous en tenir à ce qui est à l’écran. Vous pouvez également faire défiler les réglages supplémentaires pour vous assurer que la meilleure vue de l’image téléversée est actuellement active.

Cliquez sur le champ déroulant Répétition d’arrière-plan et testez des options telles que Répétition, Aucune répétition et Répétition-x.

Selon la taille de votre photo, vous pouvez ou non voir l’image bouger un peu.

Ensuite, parcourez les options de sélection de position pour déplacer encore plus l’image d’arrière-plan.

Par défaut, ils placent l’image au centre de l’écran, mais il est parfois préférable de la placer quelque part comme en bas à droite ou en haut à gauche. Essayez-les tous pour déterminer celui qui convient le mieux à votre image d’arrière-plan

À l’avenir, la liste déroulante Taille de l’image d’arrière-plan WordPress a des réglages pour la façon dont l’image recouvre l’écran, en ajustant sa taille avec chaque option prédéfinie.

Encore une fois, testez-les pour décider de ce qui vous convient le mieux. Vous constaterez peut-être que quelque chose comme le réglage Contenir offre une vue améliorée au lieu des réglages Auto ou Couverture.

Et c’est tout ce qu’il faut pour téléverser et activer une image d’arrière-plan pour votre page de connexion !

Le réglage final est là si vous souhaitez afficher une vidéo en arrière-plan au lieu d’une image. Activez ce réglage si vous avez une vidéo intéressante liée à votre entreprise et que cela n’attire pas trop l’attention des personnes qui se connectent sur le site.

Une fois que tout est fait, cliquez sur le bouton Publier pour activer l’arrière-plan de votre page de connexion et le voir s’afficher chaque fois qu’un utilisateur tente de s’inscrire ou de se connecter au site.

Comment ajouter une image d’arrière-plan à votre menu de navigation

Vous avez peut-être remarqué certains sites web avec des menus sophistiqués qui incluent des images ou des icônes d’arrière-plan. C’est une pratique courante dans le monde du eCommerce, où la marque peut avoir un méga menu avec des catégories et des images d’arrière-plan pour chaque bouton de catégorie.

Si vous souhaitez ajouter des arrière-plans à votre menu, consultez notre article sur les meilleures extensions WordPress de menu. Beaucoup de ces extensions de menu offrent des options pour inclure des images et des couleurs d’arrière-plan dans votre menu.

Étant donné qu’il existe plusieurs extensions pour ajouter un certain arrière-plan pour les menus de navigation, nous fournirons des tutoriels pour deux, dont l’un permet des arrière-plans derrière votre sous-menu. En revanche, l’autre ajoute un arrière-plan à votre menu mobile.

Pour ajouter une image d’arrière-plan à différents sous-menus, installez et activez l’extension WP Mega Menu. Cette extension vous permet d’activer et de gérer un méga-menu avec plusieurs niveaux de liste déroulante. Elle est idéale pour les grandes boutiques en ligne, mais elle fait également l’affaire pour des menus plus petits, surtout si vous souhaitez ajouter une image d’arrière-plan ou des icônes.

Commencez par trouver l’onglet WP Mega Menu dans le tableau de bord WordPress.

Cliquez sur l’élément de menu Thèmes.

Ici, vous pouvez voir une liste de thèmes par défaut créés pour votre menu par l’extension.

Vous pouvez cliquer pour modifier l’un des thèmes ou ajouter votre propre design à partir de zéro.

Chaque thème a ses propres réglages dans lesquels vous spécifiez des éléments tels que le titre du thème, 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éroulant aux sous-menus.

Cependant, pour l’arrière-plan du menu, il vous suffit de savoir quel thème vous souhaitez choisir.

Accédez à Apparence > Menus dans le tableau de bord.

Vous verrez un nouveau module qui renvoie aux réglages de Mega Menu.

Cliquez pour activer le méga menu, puis choisissez celui que vous préférez pour votre site.

Enfin, cliquez sur le bouton Enregistrer.

Maintenant, portez votre attention sur la zone Structure du menu.

Faire défiler l’un de vos éléments de menu actuels révèle un bouton WP Mega Menu. C’est ici que vous personnalisez la mise en page et la conception de chaque section déroulante.

Cliquez sur le bouton WP Mega Menu pour tout élément de menu souhaité. Dans ce cas, nous ajouterons un méga-menu déroulant à l’onglet Boutique.

Note : Nous supposons que vous avez déjà un menu configuré sur votre site WordPress. Lisez notre guide du menu déroulant WordPress si vous avez besoin d’aide.

Dans la nouvelle fenêtre contextuelle, actionnez le commutateur pour activer le Mega Menu pour cet élément de menu particulier.

Vous pouvez ensuite ajouter une ligne déroulante et faire glisser certains des nombreux widgets du côté gauche vers cette ligne. Par exemple, nous allons faire glisser une liste de produits afin qu’ils apparaissent lorsque quelqu’un fait défiler l’élément de menu Boutique.

Pour ajouter un arrière-plan à cette zone de liste déroulante, cliquez sur le bouton Options dans le coin inférieur gauche.

Recherchez le champ Téléverser une image d’arrière-plan.

Cliquez sur le bouton Téléverser pour trouver la bonne photo dans votre médiathèque afin de l’utiliser comme arrière-plan.

Une miniature d’image apparaît une fois que vous l’avez sélectionnée dans la médiathèque.

Il y a d’autres réglages à prendre en compte, alors n’hésitez pas à les vérifier si vous le souhaitez.

Assurez-vous de cliquer sur le bouton Enregistrer les modifications en bas du panneau Options.

Vous devez également cliquer sur Enregistrer le menu dans la zone Structure du menu du tableau de bord WordPress.

Maintenant, accédez à l’interface publique de votre site pour voir le menu. Si vous faites défiler l’élément que nous venons de personnaliser, vous devriez voir une section déroulante avec l’arrière-plan.

Une autre façon d’ajouter une image d’arrière-plan à un menu consiste à utiliser un menu mobile et responsive qui s’affiche lorsque quelqu’un accède à votre site via un appareil mobile.

Vous pouvez placer un arrière-plan derrière le menu mobile à l’aide de l’extension WP Mobile Menu.

Après avoir installé et activé l’extension WP Mobile Menu, accédez aux Options du menu mobile dans le tableau de bord WordPress.

L’extension propose plusieurs façons de configurer votre menu mobile. La condition générale est d’activer l’un des formats de menu et d’indiquer le menu WordPress que vous souhaitez utiliser pour ce menu mobile.

Par exemple, nous pouvons cliquer sur le commutateur Activer le menu de gauche (activer un menu mobile qui se trouve sur le côté gauche de l’écran) et choisir l’option Menu principal dans la liste déroulante Menu de gauche. Cela relie notre menu principal actuel au menu mobile, de sorte que les visiteurs voient les mêmes onglets.

Cela dépend du type de menu mobile que vous créez, mais puisque nous créons un menu de gauche, nous pouvons cliquer sur l’onglet Menu de gauche pour révéler les réglages appropriés pour ajouter un arrière-plan.

Faites défiler jusqu’au champ Image d’arrière-plan du panneau et cliquez sur le signe « + » pour ouvrir la médiathèque.

Sélectionnez une image dans votre médiathèque et ajoutez-la dans le champ.

Vous devriez voir une version miniature de l’image d’arrière-plan comme confirmation.

Sélectionnez le bouton Enregistrer les modifications pour activer l’arrière-plan.

Vu comment l’extension génère des menus mobiles, le menu peut n’apparaître que lorsque votre navigateur est défini sur une largeur étroite ou lorsque vous accédez à votre site sur un téléphone ou une tablette.

Le nouveau menu est consolidé sous une icône de hamburger (trois lignes horizontales).

Cliquez dessus pour tester le nouveau menu avec l’arrière-plan.

Comme le montre la capture d’écran, l’arrière-plan est placé derrière tout le menu mobile pour que tout le monde puisse le voir.

Comment ajouter une image d’arrière-plan WordPress à une page de maintenance

Tous les sites web nécessitent parfois une maintenance, et parfois cette maintenance prend tellement de temps que l’affichage d’une page de maintenance aide.

Les images d’arrière-plan jouent un rôle important lors de l’utilisation des pages de maintenance. La plupart des pages de maintenance se composent d’une image d’arrière-plan en plein écran et peut-être de texte ou de liens avec plus de ressources.

Si vous avez déjà une page de maintenance et qu’elle n’inclut pas d’image d’arrière-plan, considérez les étapes suivantes pour générer un bel environnement lorsque vous devrez peut-être fermer votre site web du public pendant un certain temps.

Vous pouvez ajouter une image d’arrière-plan à une page de maintenance à l’aide de l’extension Maintenance. Installez et activez l’extension sur votre site web.

Une fois qu’elle est activée, recherchez le bouton Maintenance activée / désactivée en haut du tableau de bord.

Cliquez sur le bouton pour accéder à la page des réglages de l’extension Maintenance.

Une autre façon d’accéder à la page des réglages consiste à cliquer sur l’élément de menu Maintenance dans le menu latéral du tableau de bord.

La page des réglages de l’extension Maintenance a une collection décente d’options à personnaliser, mais la zone principale à considérer est le module des Réglages généraux. Ici, vous pouvez écrire un titre et une description, qui servent tous deux de texte qui se superpose au-dessus de l’arrière-plan que nous sommes sur le point d’insérer.

Le titre de la page apparaît dans l’onglet du navigateur, vous devriez donc envisager de le personnaliser également.

Vous pouvez utiliser l’extension Maintenance pour tout, des pages de maintenance aux pages Prochainement, vous pouvez donc écrire quelque chose comme « Notre site est en cours de maintenance », ou vous pouvez afficher un peu d’informations sur votre entreprise et inclure un formulaire où les gens peuvent saisir leurs adresses e-mail.

En continuant, l’extension offre une option pour téléverser votre logo, qui se superpose également au-dessus de l’image d’arrière-plan.

Cliquez sur le bouton Téléverser un logo et choisissez votre logo pour voir sa miniature dans le tableau de bord.

Enfin, le champ Image d’arrière-plan vous demande de cliquer sur Téléverser une image d’arrière-plan.

Téléversez une image depuis votre ordinateur ou parcourez votre médiathèque pour trouver un arrière-plan adapté à la page de maintenance.

Note : Les meilleures images d’arrière-plan de maintenance sont grandes, en haute définition et en orientation paysage. Une alternative d’arrière-plan en « Mode Portrait » est disponible dans les réglages ci-dessous.

Une fois que vous avez choisi l’arrière-plan, il apparaît sous la forme d’un aperçu miniature plus petit dans le tableau de bord.

Bien qu’une image d’arrière-plan avec une orientation en paysage soit la plus logique pour les ordinateurs de bureau et les écrans plus larges, de nombreuses personnes se retrouvent sur votre site en utilisant des écrans avec une orientation portrait, comme avec un téléphone tenu verticalement.

Par conséquent, une image d’arrière-plan plus large ne sera pas aussi belle. C’est pourquoi l’extension propose une image d’arrière-plan en mode portrait qui sert d’alternative, qui est permutée de manière responsive chaque fois qu’un utilisateur visite la page à l’aide d’un écran orienté en portrait.

Il est important d’inclure une image dans ce champ, cliquez donc sur le bouton Téléverser une image pour une orientation de l’appareil en portrait.

Cette fois, trouvez une image plus haute que large (mode portrait). Vous pouvez toujours recadrer l’image d’arrière-plan d’origine pour en faire un portrait, ou vous avez la possibilité de téléverser une image complètement différente pour remplir l’endroit.

Mettez en évidence l’image souhaitée et cliquez sur le bouton Sélectionner l’image pour l’insérer dans le tableau de bord.

Tous ces réglages ne signifient rien à moins que vous n’activiez le mode maintenance.

Pour ce faire, localisez le commutateur Marche / Arrêt de Maintenance en haut de la page des Réglages.

Basculez le commutateur pour qu’il indique « On », puis sélectionnez le bouton Enregistrer les modifications.

Accédez à l’interface publique de votre site pour vous assurer que l’image d’arrière-plan et la page de maintenance s’affichent correctement.

Il y a de fortes chances que ce ne soit pas le cas.

Il y a deux raisons à cela : Tout d’abord, vous devez vous déconnecter de votre compte WordPress pour voir le site en mode maintenance. Deuxièmement, vous devrez peut-être vider le cache du site pour mettre à jour la modification du contenu.

Par exemple, lorsque je me déconnecte du compte administrateur, la page de maintenance s’affiche maintenant lorsque je vais sur n’importe quelle page.

L’image d’arrière-plan est là, avec mes personnalisations comme le logo et le texte de description.

En outre, changer la taille des fenêtres du navigateur pour une orientation plus en portrait met en place l’arrière-plan du mode portrait.

Vous devriez également voir le mode portrait lorsque vous visitez le site sur un téléphone ou une tablette.

Un autre type d’image d’arrière-plan avec l’extension est appelé une image de préchargement. Cela charge essentiellement une image rapide avec un effet animé avant de révéler la page de maintenance, l’arrière-plan et le contenu.

Comme l’image d’arrière-plan normale, cliquez sur le bouton Téléverser le pré-chargeur pour trouver une image qui a l’air jolie et l’ajouter au tableau de bord.

Encore une fois, cliquez sur le bouton Enregistrer les modifications et videz le cache.

Par défaut, l’effet d’image de préchargement tourne pendant un moment, puis disparaît pour présenter la page de maintenance et l’image d’arrière-plan.

C’est à vous de décider si vous souhaitez ou non conserver ce type d’effet.

Plusieurs autres éléments d’arrière-plan sont disponibles pour que vous puissiez expérimenter dans le panneau des réglages de l’extension Maintenance.

Par exemple, vous souhaiterez peut-être ajouter une couleur d’arrière-plan au lieu d’une image d’arrière-plan.

Si tel est le cas, accédez au champ Couleur d’arrière-plan et sélectionnez une couleur qui correspond à votre marque.

La couleur d’arrière-plan ne s’affiche pas pour la page de maintenance, sauf si vous désactivez toutes les autres images d’arrière-plan.

Assurez-vous donc de supprimer l’image d’arrière-plan.

Vous devez également supprimer l’image d’arrière-plan du mode Portrait.

Enregistrez les modifications et videz le cache. Rendez-vous ensuite sur l’interface publique de votre site pour voir la couleur d’arrière-plan en place.

Les réglages à prendre en compte incluent des éléments tels que la couleur de la police, la famille de polices et le flou d’arrière-plan.

Nous vous recommandons également de vous demander si vous avez besoin ou non d’une connexion sur l’interface publique. Cela permet aux utilisateurs de se connecter à leurs comptes et d’accéder aux profils si nécessaire.

Une fois que tout est fait, cliquez sur le bouton Enregistrer les modifications.

L’extension Maintenance propose également plusieurs thèmes prédéfinis avec de belles images d’arrière-plan et des mises en page et du texte conçus par des professionnels.

Vous pouvez trouver des thèmes pour les mises en page de page et de maintenance à venir, ainsi que des pages pour collecter des adresses e-mail et d’autres informations de contact.

Vous devez acheter les thèmes pour les utiliser.

Selon votre budget, ils sont plutôt bon marché et ont fière allure.

Pour ceux qui ne sont pas intéressés par l’achat d’un thème, tous les réglages abordés ci-dessus sont à votre disposition. Vous pouvez également accéder au module CSS personnalisé pour configurer votre page de maintenance et votre image d’arrière-plan comme vous le souhaitez.

N’oubliez pas que les réglages de la page de maintenance entrent rarement en vigueur à moins que vous ne vous déconnectiez du compte administrateur et que vous cliquiez sur le bouton Vider le cache.

Vous pouvez trouver le bouton Vider le cache dans le coin supérieur droit du tableau de bord lorsque vous utilisez Kinsta. Si vous utilisez un hébergeur différent, envisagez l’une des nombreuses extensions de mise en cache du marché.

Une fois que vous avez vidé le cache et enregistré vos réglages, vous devriez voir une belle image d’arrière-plan qui complète la page de maintenance !

Comment ajouter un arrière-plan WordPress avec un constructeur de page tiers

Notre article sur les meilleurs constructeurs de pages propose une liste d’options pour choisir un constructeur de pages avec des fonctionnalités en glisser-déposer. WordPress inclut déjà un constructeur de pages à Gutenberg, mais de nombreux propriétaires de sites préfèrent d’autres solutions.

La section suivante explique comment implémenter un arrière-plan à l’aide de certains constructeurs de pages populaires, notamment Elementor, Beaver Builder et Page Builder de SiteOrigin.

Ajouter un arrière-plan WordPress avec Elementor

Elementor, le constructeur de pages populaire destiné à accélérer considérablement la production de sites web, propose une extension gratuite avec plusieurs outils d’image d’arrière-plan.

En outre, Elementor présente une flexibilité d’arrière-plan visuel pour diverses parties de votre site web au lieu de restreindre les arrière-plans à l’ensemble du site web. Par exemple, vous pouvez ajouter un arrière-plan derrière à peu près n’importe quelle section de bloc de construction et afficher différents arrière-plans d’une page à l’autre.

Pour commencer, installez et activez l’extension Elementor.

Elementor disperse ses réglages d’arrière-plan dans tout le constructeur, ce qui facilite la sélection d’un élément et l’implémentation d’un arrière-plan si nécessaire. Par conséquent, vous pouvez techniquement accéder à n’importe quelle page ou article dans l’espoir d’avoir accès à un bouton de téléversement d’arrière-plan.

Dans ce cas, nous allons à la page d’accueil de notre site de test. Allez sur la page de votre choix en sélectionnant dans la liste Pages > Toutes les pages. Vous pouvez également faire de même avec les Articles.

Une fois sur l’éditeur de page WordPress par défaut, cliquez sur le bouton Modifier avec Elementor.

Cela déplace la vue de votre écran vers l’éditeur Elementor. Ici, le côté gauche a un menu avec des modules en glisser-déposer pour construire et modifier votre page.

La fonctionnalité d’arrière-plan n’est pas disponible dans une section ou un bloc, mais plutôt dans les réglages principaux de cette page.

Par conséquent, cliquez sur la petite icône des réglages (elle ressemble à un engrenage) dans le coin inférieur gauche de l’éditeur.

Cela affiche une section pour les réglages généraux de la page.

Cliquez sur l’onglet Style en haut de la section des Réglages de la page.

Sous Style, localisez le champ Type d’arrière-plan et cliquez sur l’icône Pinceau pour ajouter un arrière-plan standard.

Ensuite, choisissez le type d’arrière-plan que vous souhaitez voir apparaître. Par exemple, le champ Couleur vous permet de changer l’arrière-plan en une couleur unie. Il existe également une option Dégradé dans le champ Type d’arrière-plan si c’est plus votre style.

Cliquez sur le bouton Choisir une image sous le champ Image pour afficher votre médiathèque et choisissez une image d’arrière-plan adaptée à cette page.

Comme toujours, testez vos images d’arrière-plan et respectez les dimensions optimales et les meilleures pratiques (haute définition et orientation en portrait pour la plupart), puis sélectionnez l’image qui fonctionne bien et cliquez sur le bouton Insérer le média.

L’image d’arrière-plan sélectionnée apparaît maintenant dans l’aperçu du site d’Elementor à droite. Vous devrez peut-être ajuster d’autres parties de votre contenu pour vous assurer que les éléments tels que le texte et les images s’affichent au-dessus de l’arrière-plan.

Elementor fournit des réglages d’image d’arrière-plan tels que la position, la répétition et la taille de l’image d’arrière-plan WordPress. Modifiez les réglages pour déterminer si votre arrière-plan peut avoir une meilleure apparence en tant que fichier joint fixe, ou peut-être avec une orientation en haut à droite ou une autre taille.

Cliquez sur le bouton Mettre à jour pour enregistrer toutes les modifications apportées à la page et publier le nouvel arrière-plan de votre site.

Arrière-plans de section avec Elementor

Elementor offre des fonctionnalités d’arrière-plan avancées pour la majorité des sections ajoutées à vos pages.

Tout ce que vous avez à faire est de sélectionner une section sur une page Elementor et de modifier les réglages d’arrière-plan pour limiter l’arrière-plan uniquement à cette zone.

Par exemple, nous pouvons sélectionner cette section de l’éditeur de texte pour afficher les réglages de la section de texte.

Choisissez l’onglet Avancé et recherchez la section Arrière-plan dans cet onglet.

Les réglages d’arrière-plan incluent type d’arrière-plan, couleur, image, et plus encore, tout comme les réglages que nous avons vu pour la page des réglages généraux d’arrière – plan. La seule différence est qu’elle contraint ces réglages à la section sélectionnée.

Choisissez l’icône Pinceau pour le type d’arrière-plan, puis cliquez sur le bouton Choisir une image sous le champ Image.

Choisissez une image dans la médiathèque et cliquez sur le bouton Insérer le média.

Comme vous pouvez le voir, l’image d’arrière-plan reste dans les limites de cette section tout en étant placée derrière le contenu déjà créé pour cette section.

Utilisez les sélecteurs Position, Fichier joint, Répétition et Taille pour modifier la présentation de l’image d’arrière-plan dans la section.

Enfin, cliquez sur le bouton Mettre à jour pour enregistrer vos modifications.

Ajouter une image d’arrière-plan avec Beaver Builder

L’extension Beaver Builder comprend une version Lite avec quelques outils basiques d’arrière-plan. C’est l’un des constructeurs de pages les plus populaires du marché, offrant de nombreux modules de contenu pour des éléments tels que des vidéos, des images, des paragraphes, etc.

En plus de tout cela, il vous permet d’implémenter une image, une couleur ou une vidéo d’arrière-plan à l’aide d’outils visuels et de CSS pour placer l’élément d’arrière-plan sur l’ensemble de votre site web, une page ou une section individuelle sur une page.

Tout d’abord, installez l’extension Beaver Builder pour commencer.

Allez sur n’importe quelle page ou article pour les modifier avec Beaver Builder.

Vous devez convertir les pages créées précédemment au format Beaver Builder. Comme alternative, vous avez la possibilité de créer une page à partir de zéro et de choisir de modifier la page dans Beaver Builder.

Pour convertir une page actuelle en Beaver Builder, ouvrez cet éditeur de page et cliquez sur l’icône à trois points pour ouvrir le menu Voir dans le coin supérieur droit.

Faites défiler vers le bas pour trouver et choisir le lien Convertir en Beaver Builder.

Il tente de compiler tout le contenu que vous avez sur votre page et de déplacer ces éléments dans des modules Beaver Builder compatibles.

Pour créer une page à partir de zéro, allez dans Pages > Ajouter.

Cliquez ensuite sur le bouton Lancer Beaver Builder.

L’extension Beaver Builder vous amène à une vue sur l’interface publique de la page web. Elle occupe la majeure partie de l’écran en tant que véritable éditeur d’interface publique, où vous cliquez sur les éléments et vous déplacez dans les cases avec votre souris.

La première façon d’ajouter un arrière-plan via Beaver Builder consiste à téléverser un arrière-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.

Une fois sélectionné, recherchez le bouton Réglages de ligne (l’icône ⚙).

Cliquez sur cette icône pour afficher les réglages de cette ligne. Vous pouvez également le faire avec des sections, des colonnes et d’autres types de blocs.

Un panneau de réglages apparaît en haut de l’aperçu de votre site. Cliquez sur l’onglet Style, puis recherchez la section Arrière-plan.

Sous Arrière-plan, cliquez sur le menu déroulant pour afficher tous les types d’arrière-plan.

Vous avez plusieurs types d’arrière-plan à prendre en compte, dont l’un est pour une photo. Les autres comprennent :

• Couleur
• Dégradé
• Vidéo
• Code intégré

N’hésitez pas à tester les différents types d’arrière-plan.

Par exemple, vous pouvez trouver qu’un arrière-plan dégradé est meilleur qu’une image. Chacun des types d’arrière-plan comprend ses propres réglages. Le type Dégradé, dans ce cas, demande deux couleurs pour que le dégradé passe de l’une à l’autre.

Opter pour la photo d’arrière-plan présente des champs à choisir dans la médiathèque ou à coller une URL pour l’image. Cliquez sur le lien Sélectionner une photo si vous utilisez la source de photos de la médiathèque.

Trouvez votre photo d’arrière-plan préférée et cliquez sur le bouton Sélectionner la photo.

Beaver Builder dépose la photo dans l’espace d’arrière-plan choisi auparavant. La section des Réglages de la photo vous demande comment vous souhaitez formater la photo. Choisissez parmi des options telles que Taille, Répétition, Position et Fichier joint.

Photos d’arrière-plan globales et en pleine page pour Beaver Builder

Beaver Builder fonctionne avec les outils de conception WordPress par défaut pour tirer parti des fonctionnalités d’arrière-plan intégrées.

Par conséquent, vous pouvez accéder à l’onglet Apparence > Arrière-plan pour activer un arrière-plan photo pour l’ensemble de votre site.

Comme alternative, ouvrez n’importe quelle page web dans Beaver Builder et cliquez sur le menu déroulant Outils dans le coin supérieur gauche.

Ici, cliquez sur l’option des Réglages globaux.

Le panneau des réglages globaux offre la possibilité de modifier l’intégralité de votre site web, en remplaçant ou en modifiant le code WordPress intégré. Par conséquent, nous aimerions insérer un bloc de code CSS pour modifier l’image d’arrière-plan du site web dans son ensemble (globalement).

Cliquez sur l’onglet CSS dans les réglages généraux et collez le segment de code suivant dans le champ:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Il est plus logique d’utiliser Beaver Builder pour les arrière-plans de page personnalisés, car chaque page a sa propre image en arrière-plan.

Dans votre éditeur de page, ouvrez à nouveau le menu Outils.

Sélectionnez l’option Mise en page CSS et Javascript.

Collez le même code dans l’onglet CSS, en remplaçant URL to image par l’URL réelle et en ajustant les réglages de votre choix:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Ajouter une ligne simple ou un arrière-plan de widget avec Page Builder By SiteOrigin

Page Builder by SiteOrigin est un autre outil visuel de création de sites web en glisser-déposer. Il est limité dans sa capacité à insérer des arrière-plans pour l’ensemble du site web (vous recourriez à l’outil d’arrière-plan personnalisé standard de WordPress). Néanmoins, il fournit des réglages pour ajouter des images d’arrière-plan et des couleurs pour les lignes et les widgets utilisés par SiteOrigin.

Tout d’abord, téléchargez et activez l’extension Page Builder by SiteOrigin.

Accédez à une nouvelle page ou envisagez d’ajouter une ligne SiteOrigin à une page en cours sur le site.

Chaque section SiteOrigin vous demande d’ajouter un widget ou d’ajouter une ligne. Vous avez également la possibilité de parcourir les mises en page prédéfinies si vous préférez ne pas commencer un design à partir de zéro.

La bonne nouvelle est que les widgets et les lignes de SiteOrigin ont des réglages pour inclure des images d’arrière-plan.

Par conséquent, cliquez sur le bouton Ajouter un widget ou Ajouter une ligne pour continuer.

Dans cet exemple, nous examinerons la bibliothèque de widgets.

Ici, vous pouvez choisir l’un des nombreux widgets fournis par SiteOrigin, des menus et pages de navigation aux contenus et listes de produits.

Nous choisirons le widget Produits pour cet exemple, mais vous pouvez utiliser l’un des nombreux autres widgets en fonction des besoins de votre design. En outre, vous pouvez grouper ces widgets avec une ligne, puis ajouter une image d’arrière-plan à cette ligne afin que l’arrière-plan apparaisse derrière plusieurs widgets.

Le nouveau widget ou ligne se termine dans l’éditeur de page SiteOrigin. La plupart de SiteOrigin reste dans le tableau de bord WordPress, il n’y a donc pas autant d’éditeur d’interface publique qu’avec d’autres constructeurs de pages.

Pour ajouter un arrière-plan à n’importe quel élément SiteOrigin, faites défiler l’élément et cliquez sur le lien Modifier.

J’ai choisi le widget Produits pour cet exemple, mais chaque widget a ses propres réglages pour configurer à quoi il ressemble sur votre site web.

Les outils d’arrière-plan se trouvent sous le menu déroulant Design. Cliquez dessus pour avancer.

Trouvez le champ Image d’arrière-plan et cliquez sur le bouton Sélectionner une image.

Vous avez également la possibilité de coller une URL externe pour l’image d’arrière-plan.

La médiathèque vous affiche les images actuelles que vous avez téléversées sur WordPress. Cliquez sur l’image qui fonctionne le mieux pour cet arrière-plan et sélectionnez le bouton Terminé pour la déposer dans le module SiteOrigin.

Le champ Image d’arrière-plan présente maintenant une version miniature de cette photo.

Faites défiler les réglages pour tout configurer, de l’affichage de l’image d’arrière-plan à la couleur de police pour le texte de superposition.

En général, vous devriez pouvoir obtenir les résultats souhaités en choisissant l’affichage en couverture. Il semble que l’extension SiteOrigin utilise par défaut l’affichage en mosaïque, vous devrez peut-être changer cela.

Assurez-vous de cliquer sur le bouton Terminé lorsque vous avez terminé vos réglages personnalisés pour l’arrière-plan.

Le widget (dans ce cas, le widget des produits) va dans l’éditeur WordPress de SiteOrigin pour cette page. Vous pouvez faire glisser cet élément où vous le souhaitez sur la page et ajouter de nouveaux widgets et lignes au-dessus et en dessous.

Vous devez cliquer sur le bouton Aperçu ou Mettre à jour, puis parcourir l’interface publique de la page pour voir les résultats.

L’arrière-plan actuel que j’ai ajouté apparaît dans les restrictions du widget Produits. Cet arrière-plan a évidemment besoin d’être modifié pour le rendre plus joli, mais c’est un début de qualité pour l’espace avec une image d’arrière-plan beaucoup plus créative.

Ajout d’images d’arrière-plan uniques avec Brizy

Le dernier constructeur de page cette démonstration, Brizy, propose des modèles élégants et une interface publique supérieure pour ajouter des conceptions inhabituelles et des personnalisations rapides.

Brizy Page Builder comprend un ensemble complet de modules en glisser-déposer à intégrer dans votre site web actuel. Il vous permet également de partir d’un modèle vierge et de construire l’intégralité de votre site web avec Brizy.

En tant que tel, vous serez heureux d’apprendre que Brizy dispose également d’un outil d’arrière-plan pour à peu près tous les éléments que vous incluez via le constructeur de page. Sans oublier que Brizy propose plusieurs styles d’arrière-plan uniques, comme l’ajout d’une vidéo en boucle dans l’arrière-plan ou à une carte complète.

Pour profiter de ces réglages d’arrière-plan, installez et activez l’extension Brizy pour commencer.

Une grande partie du processus de conception de Brizy vous oblige à commencer avec un modèle vierge . Brizy tentera de convertir vos anciennes conceptions en modules Brizy, mais nous trouvons qu’il est préférable de recommencer.

Accédez sur une page ou un article dans votre tableau de bord WordPress et commencez à créer la page avec un titre et peut-être du contenu.

Vous devriez voir un bouton pour modifier avec Brizy. Cliquez dessus pour être envoyé au constructeur de page complet de Brizy.

Le constructeur de pages Brizy affiche un aperçu complet de votre site web avec des boutons, du texte et des images. Si la page est vide, cliquez sur le bouton Commencer à construire votre page.

Recherchez les onglets Mises en page et Blocs dans la barre de menus supérieure.

Les mises en page fournissent des pages web prédéfinies, remplies de contenu de démonstration et prêt à l’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é-construits et souvent plus faciles à utiliser et à manipuler que si vous deviez créer un bloc vous-même.

Peu importe la direction dans laquelle vous allez. Parcourez les mises en page et les blocs et ajoutez-en autant que vous le souhaitez à la page. Ce sont simplement les éléments que vous utiliserez pour former une page web complète.

Une fois que vous avez quelques blocs ou mises en page sur la page web, revenez à l’écran de l’éditeur pour regarder votre travail.

Vous verrez que chaque section de bloc a une icône de Réglages sur le côté supérieur droit du bloc, qui apparaît généralement lorsque vous faites défiler la section.

Cliquez dessus pour le bloc de votre choix. Nous ajouterons un arrière-plan à ce bloc.

Le panneau des Réglages de bloc reste dans le coin supérieur droit. Faites défiler les icônes de menu pour voir ce qu’elles font toutes.

L’une d’elles concerne les couleurs, et signifient une couleur d’arrière-plan. Vous pouvez modifier cela et ajouter un dégradé si vous êtes plus enclin à vous en tenir à une vue d’arrière-plan de couleur unie ou dégradée.

Le bouton d’icône à gauche contient les réglages d’arrière-plan.

Cliquez sur ce bouton pour ouvrir les outils rapides de téléversement d’une image d’arrière-plan dans ce bloc

Brizy propose trois éléments médias d’arrière-plan :

• Images
• Vidéos
• Cartes

Tout d’abord, essayez le type Image pour comprendre comment il fonctionne avec votre mise en page actuelle.

Cliquez sur la zone de téléversement d’image pour trouver une photo dans la médiathèque et l’ajouter à l’arrière-plan.

Nous avons trouvé une photo de panneau de bois pour ce tutoriel et indiqué que nous ne souhaitons pas avoir d’effet parallaxe.

Cela ajoute un effet agréable puisque la couleur d’arrière-plan sert de superposition, mais nous voyons toujours la texture du bois derrière elle.

N’oubliez pas que vous pouvez toujours ajuster le champ Parallaxe pour faire de l’image d’arrière-plan un arrière-plan fixe, animé ou défilant.

Et c’est ainsi que vous insérez une image d’arrière-plan avec Brizy !

La meilleure partie de Brizy est que vous pouvez continuer à vous déplacer dans la conception et à cliquer sur le bouton Réglages de chaque section.

Une section plus bas, nous pouvons insérer une autre image d’arrière-plan sans y passer beaucoup de temps.

Et pour démontrer la puissance des autres types d’arrière-plan, nous pouvons cliquer sur le type d’arrière-plan Carte, saisir une adresse et regarder une carte de cet emplacement apparaître juste derrière le contenu de premier plan.

La carte se situe en arrière-plan complet et dispose d’une fonction de zoom si elle ne s’affiche pas tout à fait correctement avec les réglages par défaut.

Enfin, nous vous recommandons de consulter l’outil de vidéo d’arrière-plan Brizy, situé dans la même section que l’outil d’image d’arrière-plan. Il fonctionne en insérant une URL vidéo (YouTube ou Vimeo), rendant une vidéo complète juste derrière le contenu de premier plan. Il fournit même un réglage pour mettre en boucle la vidéo et choisir quand elle doit commencer lorsque l’utilisateur fait défiler la section.

Le gif animé ci-dessous donne un bref exemple de la vidéo en action, même si elle pourrait probablement nécessiter un certain montage.

Dimensions, sources et modification basique de l’image d’arrière-plan

Nous avons mentionné plus tôt dans l’article que même s’il n’y a pas de taille parfaite pour une image d’arrière-plan, nous vous recommandons de commencer à une taille ne dépassant pas 1024 x 768 pixels et de s’en tenir à un rapport hauteur / largeur commun tel que 16:9. Le rapport hauteur / largeur n’a pas autant d’importance que la taille et la résolution réelles de l’image, car vous pouvez recadrer l’image ou laisser WordPress le faire pour vous.

Il est également essentiel de trouver les bons endroits pour acheter ou emprunter des images d’arrière-plan WordPress si vous ne prévoyez pas de prendre vos propres photos.

Où trouver des images d’arrière-plan appropriées

Pour votre recherche d’image d’arrière-plan, consultez notre guide sur la recherche et l’ajout de stocks de photos sans quitter WordPress. Nous avons également une liste de sources de places de marché utiles pour rechercher des photos de stock en haute définition, dont beaucoup sont gratuites.

Dans l’ensemble, nous vous recommandons d’essayer de prendre vous-même des images d’arrière-plan. Si ce n’est pas possible ou si vous n’avez pas d’expérience en photographie ou en design graphique, pensez à utiliser des ressources photographiques gratuites. Vous pouvez également choisir de payer pour une image d’arrière-plan à partir de l’un des nombreux sites web d’images premium, dont certains facturent des frais mensuels pour télécharger un tas de photos.

Certains liens mis en évidence incluent :

• Unsplash – Gratuit et aucun crédit nécessaire.
• Visual Hunt – Photos gratuites. La plupart des images ne nécessitent pas de crédit.
• Pexels – Gratuit sans crédit nécessaire.
• Pixabay – Gratuit avec la plupart des images ne nécessitant pas de crédit.
• iStockphoto – Un abonnement premium assez peu coûteux pour des images libres de droits.
• Shutterstock – Images libres de droits moyennant des frais d’abonnement raisonnables.

Comment changer l’image d’arrière-plan WordPress avec du CSS personnalisé

Comme nous l’avons appris, vous pouvez ajouter une image d’arrière-plan WordPress avec des outils WordPress intégrés standard ou une extension. Peu importe l’itinéraire que vous choisissez, tant que vous obtenez le résultat souhaité. Il existe également la possibilité d’utiliser du CSS personnalisé pour styliser l’image d’arrière-plan ou l’ajouter complètement à votre site.

Nous ne couvrirons pas les subtilités du CSS personnalisé, car nous verrons comment chaque image d’arrière-plan et chaque thème auront un processus différent. Cependant, nous vous recommandons de lire notre guide sur la modification, l’ajout et la personnalisation du CSS dans WordPress. L’article couvre des conseils utiles pour ajouter des images d’arrière-plan à presque toutes les sections de site, des éléments de menu aux blocs de page spécifiques.

Résolution des problèmes courants avec une image d’arrière-plan WordPress

Tous les sites WordPress ont la possibilité d’ajouter un arrière-plan. Cependant, cela ne signifie pas que la fonctionnalité principale fonctionne pour tous les sites. Par exemple, vous constaterez peut-être que le thème que vous utilisez ne prend pas en charge les arrière-plans personnalisés. Ou peut-être que vous continuez à téléverser un arrière-plan, mais il ne semble pas tout à fait correct (trop grand ou trop flou).

Rencontrer un problème avec l’arrière-plan WordPress est frustrant et, malheureusement, assez courant. Nous avons compilé ci-dessous certains des problèmes les plus courants avec des images d’arrière-plan et avons tracé chaque plan d’action.

Comment résoudre les 5 problèmes les plus courants avec les images d’arrière-plan dans WordPress

Mon thème ne prend pas en charge une image d’arrière-plan WordPress

Les développeurs de thèmes contrôlent la fonctionnalité d’arrière-plans personnalisés dans WordPress. Ils peuvent l’activer ou la désactiver, selon qu’ils souhaitent activer la prise en charge d’arrière-plan personnalisé. L’arrière-plan est désactivé lorsqu’il n’est pas nécessaire ou qu’il entre peut-être en conflit avec la conception générale du thème.

Si vous constatez que votre thème ne prend pas en charge un arrière-plan personnalisé ou qu’il limite vos capacités lors de l’ajout d’un arrière-plan, envisagez ces solutions :

• Remplacez le thème par un autre qui prend en charge les arrière-plans personnalisés. Recherchez des arrière-plans personnalisés dans les listes de fonctionnalités lors de l’achat ou du téléchargement de thèmes.
• Utilisez une extension d’arrière-plan pour remplacer la fonctionnalité manquante d’arrière-plan personnalisé.

Bien qu’il soit possible d’inclure votre propre code personnalisé ou d’accéder aux fichiers de thème pour des arrière-plans personnalisés responsive, nous recommandons généralement les deux options. Votre meilleur plan d’action est de localiser un thème qui prend en charge les arrière-plans ou d’ajouter une extension qui permet les arrière-plans mais ne gâche pas beaucoup les fonctionnalités du thème.

Mon image d’arrière-plan WordPress est trop sombre ou a la mauvaise couleur

Une image d’arrière-plan sombre peut provenir de nombreux réglages exécutés à côté de l’image d’arrière-plan elle-même. La plupart du temps, il s’agit d’un filtre superposé ou d’un arrière-plan avec une mauvaise couleur.

Pour la plupart des cas où l’arrière-plan est décoloré, vous devez vérifier votre thème ou extension qui contrôle l’arrière-plan lui-même.

Recherchez un réglage près du champ d’arrière-plan qui demande un filtre ou une superposition. Vous pouvez également trouver une fonction d’opacité qui devrait être retirée pour que votre arrière-plan s’affiche correctement.

Si tout le reste échoue, le thème peut avoir un filtre d’arrière-plan codé en dur dans les fichiers du thème. Dans ce cas, contactez le développeur du thème pour avoir une idée de ce qui est possible pour corriger la couleur d’arrière-plan.

Mon image d’arrière-plan WordPress n’est pas dans la bonne position

L’image d’arrière-plan qui apparaît dans la mauvaise position a tendance à perturber la conception générale de votre site web. Vous constaterez peut-être que l’arrière-plan est trop à gauche ou à droite, ou peut-être que ce qui est censé être le point central de l’arrière-plan n’apparaît pas du tout à l’écran.

Heureusement, déplacer un arrière-plan se fait en quelques clics.

Allez dans Apparence > Arrière-plan dans le tableau de bord WordPress. Recherchez l’image que vous avez actuellement téléversée comme arrière-plan et recherchez le champ Position. Ce champ vous permet de déplacer le positionnement de l’arrière-plan, avec des options pour le déplacer vers la gauche, la droite, le haut, le bas ou les coins.

Nous vous recommandons de cliquer sur tous les boutons de positionnement pour voir les résultats qu’ils produisent. Une fois que vous avez trouvé la bonne position, enregistrez la page.

Mon image d’arrière-plan WordPress se répète encore et encore

Les textures et les arrière-plans unis ont souvent une meilleure apparence lorsqu’ils sont répétés, car ils négligent les coupures d’image. Cependant, de nombreuses images semblent horribles lorsqu’elles sont répétées à plusieurs reprises en arrière-plan, en particulier celles avec beaucoup de détails et des degrés de couleur variables.

Une mise en page répétée de l’image d’arrière-plan est pratique si votre image source n’est pas assez grande pour couvrir tout l’arrière-plan sans avoir l’air étirée. Par conséquent, WordPress utilise parfois par défaut une mise en page répétée pour maintenir la résolution de l’image.

La principale solution à ce problème se trouve dans la section Arrière-plan via Apparence > Arrière-plan dans WordPress. Avec une photo téléversée en arrière-plan, essayez des préréglages tels que Remplir l’écran, Ajuster à l’écran ou Personnalisé, au lieu de l’option Répétition.

Cependant, vous constaterez peut-être qu’essayer d’obtenir une image plus petite pour couvrir l’intégralité d’un écran d’arrière-plan entraîne des résultats désagréables. Dans ce cas, la meilleure solution consiste à remplacer complètement l’image source d’arrière-plan et à en rechercher une grande, en haute définition et prête à être publiée sur le web.

Mon image d’arrière-plan WordPress est étirée

Une image d’arrière-plan étirée signifie que vos réglages d’arrière-plan personnalisés tentent de prendre une image plus petite et de couvrir tout l’écran avec l’image.

Vous pouvez également voir que cela se produit avec des images plus grandes et en haute définition si elles ne correspondent pas au rapport hauteur / largeur nécessaire. Pour les images d’arrière-plan étirées, pensez au fichier source. La meilleure option est de choisir une image différente qui convient.

Un autre problème est que les réglages d’arrière-plan peuvent être mal configurés. Vérifiez des éléments tels que la position de l’image d’arrière-plan et l’étirement sur le canevas en mode Remplir l’écran. Vous n’aurez peut-être besoin que de vous en tenir aux dimensions d’origine ou d’ajouter une fonction de répétition pour que tout fonctionne.

Autres conseils de dépannage d’arrière-plan

• Les développeurs de thèmes ont tout pouvoir sur la fonction d’arrière-plan personnalisé de WordPress. Si vous avez installé un thème et que vous ne parvenez pas à faire fonctionner l’arrière-plan, le mieux est de contacter le développeur du thème ou d’installer un nouveau thème pour voir si cela résout le problème.
• Les couleurs et les images d’arrière-plan personnalisées remplacent souvent tout code CSS personnalisé que vous implémentez pour contrôler le dimensionnement, le placement ou la source de votre image d’arrière-plan. Vous devrez peut-être vous en tenir aux réglages d’arrière-plan du thème au lieu d’utiliser du CSS personnalisé.
• Un thème peut être vendu avec un arrière-plan personnalisé déjà activé. Habituellement, tout ce que vous avez à faire est de remplacer l’image d’arrière-plan par une nouvelle. Parfois, il est nécessaire de puiser dans les fichiers de thème ou d’utiliser un CSS personnalisé pour remplacer les réglages du thème.

Meilleures extensions WordPress d’image d’arrière-plan

Si vous souhaitez disposer de capacités de modification supplémentaires pour une image d’arrière-plan, êtes intéressé par les arrière-plans vidéo ou des outils qui permettent des arrière-plans spécifiques à une page, vous pouvez envisager les extensions WordPress d’image d’arrière-plan suivantes :

Simple Full Screen Background Image

L’extension Simple Full Screen Background Image n’est pas très différente de l’outil d’image d’arrière-plan par défaut de WordPress, sauf qu’elle ajoute des fonctionnalités automatisées pour des choses comme le redimensionnement et la mise à l’échelle pour les navigateurs.

Dans l’ensemble, cette extension fonctionne mieux pour ceux qui trouvent que leur thème bloque la possibilité d’ajouter un arrière-plan, ou peut-être qu’ils ont des problèmes avec l’outil intégré d’arrière-plan WordPress. Elle remplace ce que vous avez sur WordPress et ajoute un bouton d’arrière-plan spécial dans votre  tableau de bord WordPress pour téléverser instantanément une image depuis votre ordinateur.

C’est tout ce qu’on peut en dire !

L’extension dispose également d’une version Premium qui offre une mise à l’échelle améliorée, la prise en charge d’un nombre illimité d’arrière-plans, des effets uniques et bien plus encore.

Advanced WordPress Backgrounds

L’extension Advanced WordPress Backgrounds adopte une approche différente des arrière-plans WordPress, vous permettant de profiter d’effets uniques qui pimentent votre arrière-plan. Un exemple de ceci est l’arrière-plan parallaxe, qui peut se déplacer lentement avec l’utilisateur lorsqu’il fait défiler votre site web.

L’extension offre également un support pour les vidéos. Les arrière-plans vidéo sont extraits d’endroits comme YouTube et Vimeo, ou vous pouvez même les héberger vous-même.

Il est également possible d’avoir une couleur unie ou un arrière-plan texturé. Tous ces types d’arrière-plan incluent des fonctionnalités avancées que vous ne pouvez pas trouver avec l’outil d’arrière-plan basique de WordPress. Certains d’entre eux incluent des effets de défilement et de mise à l’échelle, des effets d’opacité et des options de vitesse personnalisées.

Elle prend en charge Gutenberg et peut aller avec l’éditeur WordPress standard et de nombreux autres constructeurs visuels de pages. Enfin, vous pouvez utiliser ses options de CSS personnalisé pour ajouter encore plus de style à vos arrière-plans.

Perfect Images + Retina

L’extension Perfect Images + Retina est pratique en tant que solution deux-en-un. Elle vous permet de gérer la taille et l’apparence de l’image d’arrière-plan WordPress tout en régénérant les miniatures et en remplaçant les images. La gestion des images est plutôt impressionnante, et elle est particulièrement cruciale pour les arrière-plans en haute définition.

L’extension fournit également une fonction d’arrière-plan si vous optez pour sa version premium. Elle génère un équivalent Retina pour cette image d’arrière-plan afin que les images soient telles qu’elles sont censées être, même sur des écrans en haute définition.

Maintenance

Maintenance est une extension simple et facile à utiliser pour concevoir les pages Maintenance et Prochainement. L’extension Maintenance a à la fois des versions gratuites et premium, mais la version gratuite suffit pour activer une page de maintenance et ajouter une image d’arrière-plan avec du texte et des champs en superposition.

Vous pouvez même téléverser votre propre logo, personnaliser des éléments tels que les polices et les icônes et choisir divers modèles avec leurs propres images d’arrière-plan. Vous pouvez également installer ses nombreux modèles prédéfinis, mais la plupart nécessitent la licence premium de l’extension.

Résumé

Une image d’arrière-plan WordPress basique ne demande aucun effort à ajouter et à afficher sur l’ensemble de votre site web. C’est une fonctionnalité intégrée au cœur de WordPress, il est donc facile d’échanger des arrière-plans pour certains événements ou vacances. Vous pouvez également vous en tenir à un arrière-plan pour la vie.

Outre l’arrière-plan WordPress standard, vous pouvez utiliser du code CSS personnalisé, des extensions et des constructeurs de pages pour implémenter toutes sortes d’arrière-plans sur votre site WordPress. Des images d’arrière-plan sur des pages spécifiques aux arrière-plans de votre bouton de menu, les possibilités sont infinies.

Il est maintenant temps d’ajouter à votre site WordPress cet arrière-plan que vous avez toujours voulu.

Avons-nous manqué quelque chose ? Veuillez laisser un commentaire si vous rencontrez des difficultés pour ajouter ou gérer des images d’arrière-plan WordPress.