Medien

Das Medienfeld fügt einem benutzerdefinierten Widget, das mit den Master-Add-ons erstellt wurde, einen Bildauswahlgerät hinzu Widget-builder. Editoren wählen ein Bild aus der Mediathek oder laden ein neues in Elementor hoch, und Ihre Vorlage druckt ihre URL, ID oder Alt-Text Verwenden Sie es für Profilfotos, Logos, Heldenbilder, Produktaufnahmen und jeden anderen einzelnen Bildsteckplatz.

Medien sind eines der Felder, die Sie im Widget Builder der kostenlosen Version verwenden können. Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was der Medienbereich tut #

• Es fügt die Bildbox von Elementor mit einer Schaltfläche Bild auswählen zum Panel Ihres Widgets hinzu.
• Wählen Sie Bild öffnet das WordPress-Medienfenster, in dem Redakteure eine Datei hochladen, eine aus der Mediathek auswählen oder eine aus einer URL einfügen.
• Das Feld speichert die Bilder url, id und alt Text, und Ihre Vorlage druckt, was immer sie braucht.
• Es funktioniert im HTML-Tab und im CSS-Tab, zum Beispiel als Hintergrundbild.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget öffnet sich im Widget Builder Das Beispiel in diesem Handbuch ist ein “Profile Card” - Widget mit einem Medienfeld namens profile_photo und ein Textfeld für den Namen.

So fügen Sie ein Medienfeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Auf der Inhalt Tab, fügen Sie einen Abschnitt hinzu, zum Beispiel “Profil”.
3. Typ media Im Feldsuchfeld links.
4. Ziehen Medien In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Medienfeldoptionen erklärt #

• Etikett Ist der Text über der Bildbox in Elementor, zum Beispiel “Profilfoto”.
• Name Ist die eindeutige ID des Feldes und der Anfang seiner Token, so profile_photo gibt {{ profile_photo.url }}. Nur Buchstaben, Zahlen und Unterstriche.
• Beschreibung Unter dem Bildfeld in Elementor erscheint.
• Medientypen Listen Bild (die Voreinstellung), Video, Audio, PDF, SVG, Tabellenkalkulation, Dokument, Präsentation und Archiv In unseren Tests erreichte diese Einstellung Elementor nicht Ein auf Video gesetztes Feld wurde trotzdem als normaler Bildsammler angezeigt, also behandeln Sie das Feld Medien als Bildfeld.

Es gibt keine Standardbildeinstellung, daher beginnt eine neue Kopie des Widgets ohne Bild, bis ein Editor eines auswählt. Die allgemeinen Einstellungen weiter unten funktionieren wie auf anderen Feldern.

Drucken Sie das Bild in Ihrer Vorlage aus #

Das Feld enthält mehrere Werte und Sie drucken jeden mit einem Punkt:

• {{ profile_photo.url }} Bilddatei URL ist. {{ profile_photo }} Druckt für sich genommen dieselbe URL.
• {{ profile_photo.id }} Mediathek-ID des Bildes ist.
• {{ profile_photo.alt }} Ist der Alt-Text, den das Bild in der Mediathek hatte, als der Herausgeber es ausgewählt hat.

Wickeln Sie die <img> Markieren Sie einen Scheck, sodass nichts ausgegeben wird, solange das Feld leer ist:

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

Der Token funktioniert auch im CSS-Tab, zum Beispiel für ein Hintergrundbild:

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

Wenn Ihre Bildstile nicht zutreffen, machen Sie die Auswahl spezifischer. Elementor hat seine eigenen Regeln für Bilder in Widgets und in unseren Tests .profile-photo Allein gegen sie nicht gewonnen, während .profile-card .profile-photo Tätigte.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie die Mediensteuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite schon geöffnet war Das Bildfeld zeigt das aktuelle Bild Bewegen Sie den Mauszeiger darüber und klicken Sie Bild wählen Um es zu ändern, oder verwenden Sie das Papierkorbsymbol, um es zu löschen.

Das Fenster Medien einfügen öffnet sich Laden Sie eine Datei unter hoch Dateien hochladenWählen Sie einen unter Mediathekoder verwenden Aus URL einfügen. Das Details-Panel rechts zeigt den Alt-Text des Bildes, was auch {{ profile_photo.alt }} Druckt. Füllen Sie es dort aus, bevor Sie klicken Wählen.

Häufige Anwendungsfälle #

• Profilfotos und Teammitgliedskarten.
• Logos in Kopfzeilen, Fußzeilen und Clientlisten.
• Helden - und Bannerbilder, als <img> Tag oder einen CSS-Hintergrund.
• Produkt- oder Featurebilder in Karten.

Tipps für die Arbeit mit dem Bereich Medien #

• Bewachen Sie immer die <img> Tag mit {% if profile_photo.url %} Ein leeres Feld hinterlässt also kein gebrochenes Bild.
• Drucken {{ profile_photo.alt }} Im Alt-Attribut und hinzufügen Sie Alt-Text in der Mediathek, bevor Sie das Bild auswählen.
• Verwenden object-fit: cover Mit einer festen Breite und Höhe, wenn Bilder unterschiedlicher Form aneinandergereiht werden müssen.
• Geben Sie Bildregeln zwei Klassen, wie z .profile-card .profile-photo„Die eigenen Bildstile von Elementor setzen sie also nicht außer Kraft.
• Für mehrere Bilder verwenden Sie die Galeriefeld. Für Symbole oder SVG-Symbole verwenden Sie die Symbolfeld.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Feld Medien hinzu, drucken Sie {{ field_name.url }} und {{ field_name.alt }} Inside ein {% if %} Überprüfen Sie, und geben Sie Ihren Bildstilen eine bestimmte Auswahl Editoren wählen Sie dann Bilder direkt aus Elementor aus oder laden Sie sie hoch, damit ein Link zum Bild passt, fügen Sie einen hinzu URL-feldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.