Comment Ajouter une Image d'Arrière-Plan en Utilisant le Personnalisateur de Thème WordPress
Le Personnalisateur de Thème WordPress est une fonctionnalité intégrée qui vous permet d'ajouter une image d'arrière-plan personnalisée, de créer des menus et de changer les schémas de couleur. Cependant, cette fonctionnalité n'est disponible que pour les thèmes WordPress classiques gratuits tels que Twenty Twenty, Twenty Fifteen et Twenty Seventeen.
Pour ce tutoriel, nous allons passer en revue les étapes pour ajouter une image d'arrière-plan via cette fonctionnalité WordPress en utilisant le thème Twenty Fifteen, car il prend en charge les arrière-plans personnalisés :
- Connectez-vous à votre page d'administration WordPress et accédez à Apparence → Personnaliser.
- Dans l'écran du Personnalisateur de Thème, accédez à l'option Image d'Arrière-Plan.
- Cliquez sur le bouton Sélectionner une image pour ouvrir la Bibliothèque de Médias.
- Dans l'écran de la Bibliothèque de Médias, choisissez une image ou ajoutez une nouvelle image, puis cliquez sur Sélectionner une image.
- Utilisez les options de personnalisation d'image pour ajuster la position, les pré-réglages et la taille de l'arrière-plan.
- Enregistrez les modifications.
Comment Ajouter des Images d'Arrière-Plan Avec l'Éditeur WordPress
Vous pouvez également ajouter une image d'arrière-plan via l'éditeur WordPress par défaut, également connu sous le nom de Gutenberg. Comme il offre des outils pour créer un site web en utilisant une approche basée sur les blocs, c'est une méthode relativement simple.
Pour ce tutoriel, nous utiliserons le thème Twenty Twenty-Two. Suivez les étapes ci-dessous pour insérer une image d'arrière-plan en utilisant l'éditeur par blocs :
- À partir du tableau de bord WordPress, accédez à Pages → Toutes les Pages. Ouvrez une page en cliquant sur le titre.
- Ouvrez le bouton d'insertion de blocs et ajoutez le bloc de Couverture (Cover block).
- Pour obtenir une image d'arrière-plan pleine largeur, sélectionnez le bloc de Couverture et choisissez Aligner → Pleine largeur (Align → Full Width).
- Insérez les éléments que vous souhaitez sur votre page. Par exemple, nous avons ajouté plusieurs motifs de blocs WordPress.
- Regroupez les motifs de blocs avec le bloc de Couverture. Cela devrait ressembler à ceci :
- Sélectionnez le bloc de Couverture et cliquez sur Ajouter un média (Add Media). Ensuite, choisissez Ouvrir la Bibliothèque de Médias (Open Media Library).
- Dans l'écran de la Bibliothèque de Médias WordPress, choisissez votre image préférée. Nous vous recommandons d'ajouter un texte alternatif (alt text) à votre image pour une meilleure accessibilité. Ensuite, cliquez sur Sélectionner (Select).
- Ouvrez le panneau de paramètres du bloc pour personnaliser le bloc de Couverture. Par exemple, nous avons défini la position de l'arrière-plan sur fixe et ajusté l'opacité du recouvrement à 50.
- Enregistrez les modifications.
Comment Ajouter une Image d'Arrière-Plan Personnalisée en Utilisant un Constructeur de Pages
Une autre façon simple d'ajouter des arrière-plans personnalisés consiste à utiliser un constructeur de pages WordPress. Elementor est l'un des constructeurs de pages WordPress les plus populaires qui offre des fonctionnalités puissantes mais conviviales, telles qu'un éditeur de glisser-déposer et des options avancées de personnalisation des éléments.
Dans cette section, nous allons couvrir les étapes pour définir une image d'arrière-plan avec le constructeur de pages Elementor :
- Créez un modèle vierge et ajoutez des éléments à l'éditeur. Par exemple, nous avons ajouté un éditeur de texte, un bouton et un carrousel d'images.
- Allez dans la barre latérale gauche de l'éditeur et sélectionnez l'icône du menu hamburger. Ensuite, cliquez sur Paramètres du site (Site settings).
- Accédez à la section Paramètres → Paramètres d'arrière-plan (Background settings).
- Allez dans la section Type d'Arrière-Plan (Background Type) et cliquez sur l'option Classique (Classic).
- Cliquez sur la zone sous la section Image ou sélectionnez Choisir une image (Choose Image).
- Choisissez une image dans la Bibliothèque de Médias et cliquez sur Insérer une Média (Insert Media).
- Personnalisez l'image d'arrière-plan selon vos préférences. Par exemple, vous pouvez changer la taille, la position et l'attachement de l'arrière-plan.
- Enregistrez les modifications.
Comment Ajouter une Image d'Arrière-Plan WordPress avec CSS
Voyons maintenant comment ajouter une image d'arrière-plan en utilisant CSS additionnel, l'une des fonctionnalités du Personnalisateur de Thème WordPress :
- À partir du tableau de bord WordPress, accédez à Apparence → Personnaliser.
- Dans l'écran du Personnalisateur de Thème, cliquez sur CSS Additionnel (Additional CSS).
- Tapez le code CSS suivant dans l'éditeur de texte :
body {
background-image: url(example.com/wordpress-background-image/);
}
Remplacez l'URL entre les parenthèses par l'URL de l'image d'arrière-plan que vous préférez.
- Si l'image ne convient pas à vos préférences, ajoutez le code CSS suivant :
body {
background-attachment: fixed;
background-size: cover;
}
- Enregistrez les modifications.