Contexte

Le Champ d'arrière-plan remet à votre widget personnalisé le même panneau d'arrière-plan Les sections d'Elementor utilisent : un onglet classique pour les couleurs et les images unies, un onglet dégradé avec deux arrêts de couleur et un onglet vidéo pour les arrière-plans de mouvement à l'intérieur des modules complémentaires principaux Constructeur de widgets« , vous ajoutez le champ une fois, pointez-le sur un sélecteur CSS et chaque décision en arrière-plan passe dans le panneau Élémenteur ».

Comme chaque contrôle Widget Builder, Background prend en charge Conditions pour la visibilité du panneau, la sortie du jeton dans tout le constructeur s'étend sur le Moteur de modèles de syntaxe Twig. Les deux guides expliquent la configuration et les limites.

L'arrière-plan est un contrôle de groupe, la même famille que la typographie et la bordure Cela signifie que le modèle de connexion diffère des champs de texte ou de couleur : il n'y a pas de jeton à coller dans votre CSS Vous remplissez l'option Sélecteur et Elementor écrit les styles d'arrière-plan sur ce sélecteur lui-même.

Ce que fait le champ Arrière-plan #

• Contrôle du groupe de fond de Renders Elementor dans le panneau de votre widget, avec des onglets pour chaque type d'arrière-plan que vous autorisez.
• Onglet classique : une couleur unie ou une image avec les paramètres habituels de position, de taille et de répétition.
• Onglet dégradé : deux arrêts de couleur avec commandes d'emplacement, d'angle et de type.
• Onglet vidéo: un fond de mouvement derrière l'élément sélectionné.
• Écrit le CSS lui-même au sélecteur que vous fournissez, sans jeton de modèle impliqué.

Premier widget ? Commencez par le Aperçu du constructeur de widgets avant les commandes du groupe de câblage.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de héros dont <div class="hero-box"> conteneur devrait prendre un fond choisi par l'éditeur.

Comment ajouter un champ Arrière-plan #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Contexte field, répertorié avec les autres champs de groupe de style tels que Typographie et Box Shadow.

Faites-le glisser dans une section sous le Style tab, sa demeure naturelle Une fois qu'il atterrit, les options du champ s'ouvrent à gauche.

Options du champ d'arrière-plan expliquées #

• Étiquette: le texte affiché au-dessus du contrôle dans Elementor, par exemple “Hero Background”.
• Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement.
• Sélecteur: le sélecteur CSS auquel s'applique l'arrière-plan Il s'agit de la connexion elle-même, traitée dans la section suivante.
• Types : quels onglets le contrôle affiche, depuis le classique, le dégradé et la vidéo. Le découpage de la liste maintient le panneau focalisé ; un widget de carte a rarement besoin de l'onglet vidéo.
• Exclure: supprime les sous-contrôles individuels du groupe lorsque vous souhaitez une version réduite du panneau.
• La description, l'étiquette d'affichage, le séparateur et les conditions se comportent comme sur chaque champ.

Pointez le champ sur votre sélecteur #

Voici la partie qui fait trébucher les gens s'ils sont habitués aux champs de jetons : le champ Arrière-plan n'a pas {{shortcode}} pour votre CSS. Un arrière-plan est un ensemble de propriétés, il ne peut donc pas imprimer via un seul jeton ; un {{ token }} pour ce champ sort rien d'utile Au lieu de cela, vous remplissez le Sélecteur option et Elementor génère les styles.

Pour le conteneur de héros, le sélecteur est le suivant

{{WRAPPER}} .hero-box

• {{WRAPPER}} signifie le propre conteneur du widget, en parcourant l'arrière-plan de ce widget seul Les commandes de groupe utilisent le sélecteur exactement comme écrit, vous tapez donc {{WRAPPER}} vous-même ; rien n'est préparé pour vous.
• .hero-box est l'élément à l'intérieur de votre widget HTML qui reçoit l'arrière-plan.

Attention : partez {{WRAPPER}} désactivé et le sélecteur correspond à chaque fois .hero-box sur la page, donc l'arrière-plan d'un widget atterrit sur tous les contrôles de groupe prennent le sélecteur brut, ce qui en fait l'erreur la plus facile à expédier.

Gardez un arrière-plan de secours dans l'onglet CSS du widget C'est ce que le widget affiche sur une nouvelle goutte, et les valeurs du contrôle l'emportent une fois qu'un éditeur choisit quelque chose Une couleur de repli solide gagne sa garde deux fois, puisqu'elle couvre également le moment avant qu'une image d'arrière-plan lourde ne finisse de charger, qui autrement clignote en blanc sur les connexions lentes.

Utilisez le contrôle d'arrière-plan dans Elementor #

Ajouter le widget à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le contrôle apparaît sous votre étiquette avec un onglet par type autorisé.

Sur l'onglet classique, choisissez une couleur ou choisissez une image dans la médiathèque avec les paramètres de position, de taille et de répétition Passez à l'onglet dégradé pour deux arrêts de couleur avec angle et emplacement, ou à l'onglet vidéo pour un fond de mouvement L'aperçu se met à jour au fur et à mesure.

Cas d'utilisation courants #

• Widgets héros et bannières où chaque site veut sa propre image ou gradient derrière le titre.
• Arrière-plans de cartes dans les tableaux de prix, les grilles d'équipe et les listes de fonctionnalités.
• Bandes d'appel à l'action cela bascule entre une couleur de marque et une photo par campagne.
• En-têtes vidéo: avec l'onglet vidéo activé uniquement sur les widgets conçus pour cela.
• Panneaux superposés2, pointant le sélecteur vers une couche interne au-dessus du support.

Conseils pour travailler avec le champ Arrière-plan #

• L'option Selector est toute la connexion. Ne recherchez pas de jeton d'arrière-plan dans l'onglet CSS ; il n'y en a pas.
• Toujours démarrer le sélecteur avec {{WRAPPER}}. Les commandes de groupe l'utilisent brut, donc un sélecteur de classe nu fuit à chaque correspondance de la page.
• Coupez la liste Types. Offrir uniquement des widgets de cartes classiques et dégradés simplifie les widgets de cartes et empêche les éditeurs de publier des vidéos là où elles n'ont pas leur place.
• Conservez les styles de repli dans le widget CSS. Une couleur d'arrière-plan par défaut dans votre feuille de style rend le widget présentable avant que quiconque n'ouvre le contrôle.
• Contraste du texte mental. Lorsque les éditeurs contrôlent l'arrière-plan, associez le widget à des commandes de couleur pour le texte posé dessus.

Foire aux questions #

Envelopper #

Le champ Arrière-plan du constructeur de widgets apporte une modification d'arrière-plan de niveau section à n'importe quel élément d'un widget personnalisé : nommez le champ, définissez le sélecteur {{WRAPPER}} plus votre classe, et choisissez quels types l'éditeur voit Il suit le même modèle de sélecteur que le Champ typographie(en), donc une fois qu'un contrôle de groupe clique, le reste aussi Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.