Iframe ist hauptsächlich ein Teil der gleichen HTML-Struktur, die eine Website betreibt. Damit können Sie Inhalte von anderen Websites in Ihre Website einfügen oder einbetten.
Es gibt viele Gründe, warum Sie ein Iframe-Widget auf Ihrer Webseite erstellen müssen. Dazu gehören Bilder, Videos, eine andere Webseite, usw.
Im Allgemeinen geht es darum, das Laden des Zielobjekts von einer externen Quelle zu beschleunigen und die Belastung Ihrer Website zu verringern.
Für die Einbettung gibt es zwei Möglichkeiten, ein Iframe-Widget in Elementor zu erstellen:
- Rohkurzcode verwenden
- Verwenden Sie ein Elelemntor Iframe Plugin
In diesem Blog werden wir Ihnen genau erklären, wie Sie ein Iframe-Widget in Elementor erstellen können.
Methode 1: Elementor iframe Widget mit Shortcode erstellen
Als Teil der Open-Source-Software WordPress verfügt Elementor über eine Vielzahl von Integrationen. Eine davon ist Shortcode. Sogar für Operationen wie einen iframe sind Shortcodes verfügbar.
Um es einfach auszudrücken, können Sie jede Seite mit dem WordPress Gutenberg-Editor oder dem Elementor-Editor öffnen, Shortcodes einfügen und einen Iframe aufrufen. Kinderleicht!
Fügen Sie einfach einen HTML-Editor-Block auf Ihrer Seite ein und fügen Sie den obigen Code hinzu. Dies wird einfach den gewünschten Inhalt/Website in einer Box mit 400px Höhe aufzurufen.
Die Erstellung eines Iframe-Widgets verfügt über einige Attribute, mit denen Sie das Aussehen des Inhalts anpassen können.
- Src - Link zur Quelle. (https://) kann notwendig sein, um eine Sperrung durch das Sicherheitsprotokoll der Website zu vermeiden.
- Breite/Höhe - Pixelwerte, die den Bereich der Inhaltsgröße definieren.
- Ausrichten - Bestimmt die Ausrichtung des iframe innerhalb der Seite.
- Frameborder - Fügt einen Rahmen um den iframe hinzu, wenn der Wert größer/gleich 1 ist. Beim Wert 0 wird kein Rahmen angezeigt.
- Bildlauf - Erlauben Sie die Option zum Scrollen des Inhalts im iframe, indem Sie "ja", "nein" und "auto" festlegen.
Außer dem HTML-Code unterstützt iframe auch CSS-Attribute. Sie können ihm also weitere Funktionen hinzufügen.
Eine Sache, die Sie beachten müssen, ist, dass nicht jede Website Iframe unterstützt. Das bedeutet, dass Ihre Website einen iframe ablehnen könnte oder umgekehrt.
Methode 2: Iframe-Widget in Elementor mit Plugins erstellen
Wenn Sie nach einem iFrame-Widget zum Erstellen von iframe suchen, dann ist die beste Option Elementor-Zusatz-Elementpaket. Dieses Plugin kommt mit speziellen Widget für Elementor iframe.
Die Iframe-Widget von Element Pack ermöglicht es Ihnen, jede externe Website, Google Maps, Krypto-Statistik oder App direkt in Ihr Elementor-Design einzubetten. Folgen Sie diesen einfachen Schritten, um es einzurichten.
Schritt 1: Einfügen des Iframe-Widgets in Elementor
- Öffnen Sie Ihre Seite in Elementor Herausgeber.
- Geben Sie in der Suchleiste des Widgets "Iframe".
- Wählen Sie das Widget mit der Taste Element Pack Pro-Logo.
- Ziehen Sie sie in Ihren Seitenabschnitt.
- Standardmäßig sehen Sie einen Platzhalter, bis Sie eine URL hinzufügen.
Schritt 2: Hinzufügen einer URL und Konfigurieren des iframe-Layouts
- Gehe zu Inhalt → Layout.
- In der URL der Inhaltsquelle fügen Sie den Link ein, den Sie einbetten möchten.
- Beispiel:
- Google Maps-Link → Zeigt den Standort an.
- Krypto-Statistiken URL → Zeigt Live-Kryptodaten an.
- Website-URL → Zeigt die gesamte Website an.
- Beispiel:
- Layout-Optionen anpassen:
- Auto Höhe → Passt die Höhe des iframe automatisch an.
- Iframe Höhe → Legen Sie eine benutzerdefinierte feste Höhe fest.
- Iframe Container Breite → Stellen Sie die Breite des Behälters ein.
- Ansprechendes Verhältnis → Die Proportionen von Breite und Höhe müssen eingehalten werden.
- Ausrichtung → Positionieren Sie den iframe (Links, Mitte, Rechts).
Anmerkung: Wenn die Das Iframe-Widget nimmt den gesamten Bildschirm in Elementor einliegt das Problem in der Regel an den Einstellungen für die Höhe/Breite oder das Reaktionsverhältnis. Um dies zu beheben, deaktivieren Sie Auto Höhe und setzen Sie eine benutzerdefinierte Iframe Höhe (z.B. 400-600px) und passen Sie die Iframe Container Breite anstatt es bei 100% zu belassen. Prüfen Sie auch, ob Ansprechendes Verhältnis aktiviert ist, da es den iframe zum Strecken zwingen kann. Deaktivieren Sie es also oder stellen Sie ein geeignetes Verhältnis wie 16:9 ein.
4. Konfigurieren Sie Lazyload-Einstellungen und Zusätzliche Einstellungen für bessere Leistung und Vollbild-/Scrollbar-Optionen. Und, muss aktivieren Faule Last bei Verwendung mehrerer iframes für schnelleres Laden.
Schritt 3: Iframe in Geräte-Mockups anzeigen
- Gehe zu Inhalt → Iframe-Geräte.
- Aktivieren Sie Iframe-Gerät anzeigen.
- Wählen Sie aus vorgefertigten Geräterahmen: Chrome, Firefox, Safari, Edge, Tablet, Mobile oder Benutzerdefiniert.
- Wenn Sie wählen Benutzerdefiniertkönnen Sie eine benutzerdefinierte Breite × Höheanwenden, eine Kerbe, hinzufügen Buttonsoder stellen Sie die Lünette.
Schritt 4: Anpassen und Gestalten des iframe
- Gehe zu Stil → Gerät.
- Passen Sie das Erscheinungsbild des iframe an:
- Farbe der Blende (Farbe1) → Passen Sie die Farbe des äußeren Rahmens an.
- Farbe der Kerbe (Farbe2) → Ändern Sie die Farbe der Kerbe.
- Schaltfläche Styling → Sie können die Farben, die Breite und den Versatz der Schaltflächen anpassen.
- Bringen Sie abgerundete Kanten an oder passen Sie die Rahmendicke an, um ein glänzendes Aussehen zu erzielen.
Schritt 5: Vorschau und Veröffentlichung
- Elementor's verwenden Reaktionsfähiger Modus um das Erscheinungsbild von iframe auf verschiedenen Geräten zu überprüfen.
- Passen Sie Höhe, Breite oder faule Last an die Leistung an.
- Wenn alles perfekt aussieht, klicken Sie auf Aktualisieren/Veröffentlichen.
Tipp: Einige Websites blockieren die Einbettung von iframe. Verwenden Sie in diesem Fall den offiziellen Einbettungscode oder den Freigabelink.
Mit diesem Widget können Sie verschiedene Arten von Inhalten hinzufügen, sei es Video, Audio, Text, Bild oder Webseiten.
Sehen Sie sich dieses Video an, um zu erfahren, wie Sie das iframe-Widget in Elementor richtig verwenden.
Beachten Sie, dass das Iframe-Widget von Element Pack eine integrierte Lazyload-Funktion bietet. Sie werden also die Leistung Ihrer Website mit diesem Tool verbessern. Prüfen Sie dies Elementpaket-Demoseite für Beispiele.
Schlussfolgerung
IFrame ist eine weit verbreitete Funktion, die in ein Widget umgewandelt wurde, um sie dynamischer und benutzerfreundlicher zu machen.
Websites mit strengen Sicherheitsrichtlinien lassen die Einbettung von Inhalten in einen iframe möglicherweise nicht zu. Aber die Zahl der unterstützenden Websites ist größer. Es ist also eine schnelle Lösung für das Hinzufügen von mehrschichtigen Inhalten zu Ihrer Website. Ich hoffe, Sie haben heute die Methode zur Erstellung eines Iframe-Widgets kennengelernt.
Danke fürs Dranbleiben!
