Additions maîtres
Tarification
Voir les catégories

Médias

Roy Jemee
Mis à jour le 17 septembre 2026

4 min de lecture

Le champ Médias ajoute un sélecteur d'image à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs choisissent une image de la Médiathèque ou en téléchargent une nouvelle dans Elementor, et votre modèle imprime son URL, son ID ou son texte alternatif Utilisez-le pour les photos de profil, les logos, les images de héros, les photos de produits et tout autre emplacement d'image unique.

Media est l'un des champs que vous pouvez utiliser dans le Widget Builder de la version gratuite Le plugin gratuit comprend un Widget Builder limité, et l'ensemble complet des champs est livré avec Maître Addons Pro.

Carte de profil construite avec le champ Widget Builder Media montrant une photo ronde et un nom

Ce que fait le domaine Médias #

  • Il ajoute la boîte image d'Elementor au panneau de votre widget, avec un bouton Choisir l'image.
  • Choisir une image ouvre la fenêtre multimédia WordPress, où les éditeurs téléchargent un fichier, en choisissent un dans la bibliothèque multimédia ou en insèrent un dans une URL.
  • Le champ stocke celui de l'image url, id et alt texte, et votre modèle imprime selon ce dont il a besoin.
  • Il fonctionne dans l'onglet HTML et l'onglet CSS, par exemple comme image d'arrière-plan.

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.
  • Modules complémentaires principaux pour Elementor installés et actifs. Le guide d'installation couverture configuration.
  • Un widget ouvert dans le Widget Builder L'exemple de ce guide est un widget “Profile Card” avec un champ Media nommé profile_photo et un champ Texte pour le nom.

Comment ajouter un champ Médias #

  1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
  2. Sur le Contenu tab, ajouter une section, par exemple“Profile”.
  3. Type media dans le champ champ rechercher box à gauche.
  4. Glisser Médias dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.
Champ média trouvé par recherche de média dans le Master Addons Widget Builder avec les champs Photo de profil et Nom dans une section Contenu

Options du champ multimédia expliquées #

Options de champ multimédia avec étiquette, nom, description et la liste Types de médias ouverte
  • Étiquette est le texte au-dessus de la boîte d'image dans Elementor, par exemple “Profile Photo”.
  • Nom est l'ID unique du champ et le début de ses jetons, donc profile_photo donne {{ profile_photo.url }}. Lettres, chiffres et soulignements uniquement.
  • Description apparaît sous la zone image dans Elementor.
  • Types de médias listes Image (la valeur par défaut), Vidéo, Audio, PDF, SVG, Feuille de calcul, Document, Présentation et Archive Dans nos tests ce paramètre n'a pas atteint Elementor Un champ défini sur Video apparaissait toujours comme un sélecteur d'image normal, alors traitez le champ Média comme un champ d'image.

Il n'y a pas de paramètre d'image par défaut, donc une nouvelle copie du widget commence sans image jusqu'à ce qu'un éditeur en choisisse un. Les paramètres courants fonctionnent plus bas que sur d'autres champs.

Imprimez l'image dans votre modèle #

Le champ contient plusieurs valeurs et vous imprimez chacune d'elles avec un point :

  • {{ profile_photo.url }} est l'URL du fichier image. {{ profile_photo }} à lui seul, il imprime la même URL.
  • {{ profile_photo.id }} est l'ID de la Médiathèque de l'image.
  • {{ profile_photo.alt }} est le texte alternatif que l'image contenait dans la Médiathèque lorsque l'éditeur l'a choisi.

Enveloppez le <img> marquer dans un chèque, donc rien n'imprime pendant que le champ est vide :

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}
Widget HTML impression profile_photo.url et profile_photo.alt à l'intérieur d'un si check

Le jeton fonctionne dans l'onglet CSS aussi, par exemple pour une image d'arrière-plan :

.profile-card {
  background-image: url('{{ profile_photo }}');
}

Si vos styles d'image ne s'appliquent pas, rendez le sélecteur plus spécifique Elementor a ses propres règles pour les images à l'intérieur des widgets, et dans nos tests .profile-photo seul n'a pas gagné contre eux, alors que .profile-card .profile-photo a fait.

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le contrôle Média dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte La boîte image affiche l'image actuelle Passez dessus et cliquez dessus Choisissez Image pour le modifier, ou utilisez l'icône de corbeille pour le vider.

Contrôle multimédia dans le panneau Élémenteur avec une photo sélectionnée et le bouton Choisir une image

La fenêtre Insertion Média s'ouvre Télécharger un fichier sous Télécharger des fichiers, choisis-en un en dessous Médiathèque(ou utiliser) Insérer à partir de l'URL. Le panneau de détails à droite montre le texte Alt de l'image, qui est ce que {{ profile_photo.alt }} impressions. Remplissez-le avant de cliquer Sélectionner.

Fenêtre Elementor Insert Media avec une photo sélectionnée dans la Médiathèque et son champ Alt Text

Cas d'utilisation courants #

  • Photos de profil et cartes de membre de l'équipe.
  • Logos dans les en-têtes, pieds de page et listes de clients.
  • Images de héros et de bannières, en tant que <img> balise ou un arrière-plan CSS.
  • Images de produits ou de fonctionnalités à l'intérieur des cartes.

Conseils pour travailler avec le domaine Médias #

  • Gardez toujours le <img> tag avec {% if profile_photo.url %} donc un champ vide ne laisse pas une image brisée.
  • Imprimer {{ profile_photo.alt }} dans l'attribut alt, et ajoutez du texte alt dans la Médiathèque avant de choisir l'image.
  • Utilisation object-fit: cover avec une largeur et une hauteur fixes lorsque des images de différentes formes doivent s'aligner.
  • Donnez aux règles d'image deux classes, telles que .profile-card .profile-photo(traduction), donc les propres styles d'image d'Elementor ne les remplacent pas.
  • Pour plusieurs images, utilisez le Champ de galerie. Pour les icônes ou les symboles SVG, utilisez le Champ d'icônes.

Foire aux questions #

Le champ Médias est-il disponible en version gratuite ?

Oui. Media est l'un des champs que vous pouvez utiliser dans le Widget Builder de la version gratuite L'ensemble complet des champs Widget Builder est livré avec Master Addons Pro.

Qu'est-ce que {{profile_photo }} imprime ?

L'URL de l'image C'est la même chose que {{ profile_photo.url }}. Utilisation .id pour l'ID de pièce jointe et .alt pour le texte alt.

Pourquoi mon texte alt est vide ?

Le champ copie le texte alternatif que l'image a dans la Médiathèque lorsqu'elle est choisie Ajouter un texte alternatif dans la fenêtre Insérer un média, puis sélectionner à nouveau l'image.

Puis-je utiliser le champ Médias pour des vidéos ou des PDF ?

Pas de manière fiable Dans nos tests le paramètre Types de médias n'a pas modifié le contrôle Elementor, qui est resté un sélecteur d'images Utilisez un champ URL pour les liens vers d'autres fichiers.

Pourquoi mon CSS ne change pas la taille de l'image ?

Elementor applique ses propres styles aux images à l'intérieur des widgets Utilisez un sélecteur plus spécifique, tel que .profile-card .profile-photo: pour votre largeur, votre hauteur et votre rayon de bordure.

Envelopper #

Ajouter le champ Médias, imprimer {{ field_name.url }} et {{ field_name.alt }} à l'intérieur d'un {% if %} vérifiez et donnez à vos styles d'image un sélecteur spécifique. Les éditeurs choisissent ou téléchargent ensuite des images directement depuis Elementor. Pour qu'un lien accompagne l'image, ajoutez un Champ URLet vérifiez tarification pour ce que chaque plan comprend.

Quels sont vos Sentiments