Le champ Arrière-plan ajoute le contrôle d'arrière-plan d'Elementor à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs choisissent une couleur unie, une image ou un dégradé dans le panneau Élémenteur, et les styles vont à l'élément vers lequel pointe votre sélecteur CSS. Cela convient aux bannières, aux cartes et à toute boîte dont l'arrière-plan doit changer d'une page à l'autre.
L'arrière-plan est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.
Ce que fait le champ Arrière-plan #
- Il ajoute le contrôle de type d'arrière-plan d'Elementor à l'onglet Style de votre widget, avec une icône par type d'arrière-plan que vous autorisez.
- Classic donne une couleur et une image, avec des paramètres de position, de fixation, de répétition et de taille une fois qu'une image est choisie.
- Le dégradé donne deux couleurs avec leurs emplacements, un type linéaire ou radial et un angle ou une position.
- Elementor écrit le CSS lui-même dans l'élément de l'option Selector Vous n'avez pas besoin de jeton dans votre HTML ou CSS.
Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord.
Avant de commencer #
- WordPress avec Elementor installé et actif.
- Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
- Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Promo Banner” dont la boîte extérieure a la classe
promo-banner.
Comment ajouter un champ Arrière-plan #
- Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
- Cliquez sur le Style tab et ajouter une section, par exemple“Banner Background”.
- Type
backgrounddans le champ champ rechercher box à gauche. - Glisser Contexte dans la section Ses paramètres s'ouvrent dans la barre latérale gauche, et l'aperçu de la section affiche les icônes de type.
Options du champ d'arrière-plan expliquées #
- Étiquette nomme le champ dans le constructeur, par exemple “Banner Background” Dans Elementor, les éditeurs voient le titre de la section et un contrôle appelé Background Type.
- Nom est l'ID unique du champ Lettres, chiffres et soulignements seulement.
- Description est une note pour vous à l'intérieur du constructeur.
- Types définit les types d'arrière-plan que les éditeurs peuvent choisir : Classique, Gradient, Vidéo et Diaporama Un nouveau champ affiche Classique et Gradient.
- Comprend et Exclut sont destinés à ajouter ou à masquer des paramètres uniques à l'intérieur du contrôle Dans nos tests ni modifié le panneau Élémenteur Exclut les affichages Image par défaut, pourtant le paramètre Image apparaissait toujours, donc laissez les deux tels quels.
Gardez les types en classique et en dégradé. La vidéo et le diaporama ajoutent leurs paramètres au panneau, mais lorsque nous les avons testés sur un widget personnalisé, un lien vidéo et une galerie de diaporamas n'ont rien dessiné derrière la bannière. Elementor crée uniquement le balisage supplémentaire dont ces deux types ont besoin pour leurs propres sections et conteneurs.
Faites défiler vers le bas de la barre latérale pour le sélecteur Les paramètres courants au-dessus (Afficher Étiquette, Séparateur, Conditions et le reste (les autres) travaillent comme ils le font sur d'autres domaines.
Définissez le sélecteur #
Le Sélecteur indique à Elementor quel élément obtient l'arrière-plan Pour la bannière, c'est la classe sur la boîte extérieure :
.promo-bannerVous n'avez pas à taper {{WRAPPER}} pour ce champ Le constructeur l'ajoute devant votre sélecteur, donc .promo-banner devient {{WRAPPER}} .promo-banner et n'affecte que ce widget Avec une liste séparée par des virgules, chaque partie obtient la sienne {{WRAPPER}}. Si le Sélecteur est vide, l'arrière-plan va sur l'emballage extérieur du widget au lieu de votre élément.
Donnez à l'élément un arrière-plan de secours dans l'onglet CSS Il s'affiche jusqu'à ce qu'un éditeur choisisse quelque chose, et que les styles du contrôle le remplacent après cela :
.promo-banner {
background-color: #1f1147;
color: #ffffff;
}
Cliquez Enregistrer Paramètres quand t'auras fini.
Utilisez le contrôle d'arrière-plan dans Elementor #
Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Sélectionnez le widget et ouvrez le Style onglet. Votre section affiche le type d'arrière-plan avec une icône pour chaque type que vous avez autorisé. La bannière conserve sa couleur de secours jusqu'à ce que vous en choisissiez une.
Cliquez sur l'icône de pinceau pour Classique et choisissez un Couleur. La bannière se met à jour immédiatement.
Sous la couleur, cliquez sur le Image boîte pour choisir une image dans la Médiathèque Plus de paramètres apparaissent une fois qu'une image est définie : Résolution de l'image, Position, Pièce jointe, Répéter et Taille d'affichage Centre, Non-répéter et Couverture fonctionnent bien pour la plupart des bannières.
Cliquez sur la deuxième icône pour Dégradé. Définissez le premier Couleur et son Emplacement, le Deuxième Couleur et son emplacement, puis choisissez Linéaire avec un Angle ou Radial avec une position.
Cas d'utilisation courants #
- Bannières de héros et promo qui obtiennent une nouvelle image ou un nouveau dégradé pour chaque campagne.
- Cartes dans les tableaux de prix, les grilles d'équipe et les listes de fonctionnalités.
- Bandes d'appel à l'action qui basculent entre une couleur de marque et une photo.
- Un panneau intérieur ou une couche de recouvrement, en pointant le sélecteur vers cet élément au lieu de la boîte extérieure.
Conseils pour travailler avec le champ Arrière-plan #
- Gardez toujours un repli
background-colordans l'onglet CSS. Il couvre les nouveaux widgets et le moment précédant le chargement d'une image. - Gardez le texte lisible sur les photos La bannière d'exemple ajoute une couche sombre avec
.promo-banner::beforeetisolation: isolatesur la boîte, le texte blanc reste donc lisible sur les images lumineuses. - Pointez le sélecteur sur un élément Plusieurs champs d'arrière-plan sur différents sélecteurs sont plus faciles pour les éditeurs qu'un champ partagé par plusieurs parties.
- S'en tenir à Classique et Gradient dans Types pour les widgets personnalisés.
- Pour une seule couleur plate sans image ni dégradé, le Champ de couleur est plus simple pour les éditeurs.
Foire aux questions #
Le champ Arrière-plan est-il gratuit ?
No. Background est l'un des champs Pro du Widget Builder, Master Addons Pro doit donc être actif avant de pouvoir l'ajouter à un widget.
Dois-je ajouter {{WRAPPER}} au sélecteur d'arrière-plan ?
Non, ajoute le constructeur {{WRAPPER}} devant le sélecteur du champ Arrière-plan pour vous, donc .promo-banner suffit. Le taper soi-même fonctionne aussi.
Où est le jeton d'arrière-plan pour mon CSS ?
Il n'y en a pas un à utiliser L'arrière-plan couvre de nombreuses propriétés CSS à la fois, alors Elementor écrit les règles au Sélecteur pour vous.
Pourquoi le fond de Vidéo ou Diaporama ne s'affiche pas ?
Ces types nécessitent un balisage supplémentaire qu'Elementor ajoute uniquement à ses propres sections et conteneurs. Sur un widget personnalisé, leurs paramètres apparaissent, mais rien n'est dessiné. Utilisez Classic ou Gradient.
Pourquoi ma couleur de secours a-t-elle disparu après avoir choisi un dégradé ?
Un dégradé définit la couleur d'arrière-plan sur transparent et peint le dégradé sur le dessus Votre repli revient si l'éditeur désactive le type d'arrière-plan.
Envelopper #
Ajoutez le champ Arrière-plan à une section Style, conservez Types to Classic et Gradient, et définissez le sélecteur sur l'élément qui devrait changer Mettez une couleur de secours dans l'onglet CSS et les éditeurs peuvent la prendre à partir de là Pour le reste du style de l'élément, voir le Frontière et Ombre de boîte champs, et vérifiez tarification pour ce que chaque plan comprend.
