Projekte auf Ihrer Website einbetten
Projekte auf Ihrer Website einbetten
Mit der Einbettungsfunktion können Sie Ihre Webmag-Projekte direkt auf Ihrer eigenen Website anzeigen. Besucher können so Ihre digitalen Publikationen direkt auf Ihrer Seite erleben, ohne diese verlassen zu müssen.
Inhalt
- Einbettungseinstellungen öffnen
- Einfache Iframe-Einbettung
- Interaktives Embed-Script erstellen
- Darstellungsoptionen konfigurieren
- Vorschaumodus wählen
- Vorschau prüfen und Code kopieren
- Code in WordPress einfügen
- Code in Webflow einfügen
1. Einbettungseinstellungen öffnen
Öffnen Sie Ihr Projekt und navigieren Sie zu den Projekteinstellungen. Wählen Sie den Tab "Einbettung" (Embedding). Hier finden Sie alle Optionen zur Konfiguration Ihres Embed-Codes.
2. Einfache Iframe-Einbettung
Für eine schnelle Einbettung ohne zusätzliche Funktionen können Sie den Iframe-Link verwenden. Dieser eignet sich, wenn Sie das Projekt ohne Klick-Interaktion direkt anzeigen möchten.
Kopieren Sie den Iframe-Link über das Kopier-Symbol rechts neben dem Textfeld.
Beispiel:
<iframe src="https://v2.webmag.io/embed/iframe/embed.html?id=123456789"></iframe>
3. Interaktives Embed-Script erstellen
Das Embed-Script zeigt zunächst eine attraktive Vorschau Ihres Projekts an. Besucher klicken auf diese Vorschau, um das vollständige Projekt zu öffnen – entweder in einem eleganten Modal-Fenster oder in einem neuen Tab.
Im Bereich "Create your embed script" konfigurieren Sie das Aussehen und Verhalten:
Option | Beschreibung | Beispiel |
|---|---|---|
Link Text | Text, der über der Vorschau angezeigt wird | "Click to read" |
Link Animation | Animation des Link-Textes | Bounce Animation |
Link Color | Farbe des Links und der Akzente | Rot (#7f0f0f) |
Display Mode | Wie das Projekt geöffnet wird | Modal-Fenster oder neuer Tab |
Hover Animation | Effekt beim Überfahren mit der Maus | Zoom oder Card-Effekt |
4. Darstellungsoptionen konfigurieren
Passen Sie die Größe des Embed-Bereichs an Ihre Website an:
Embed Width
Legt die Breite des Vorschaubereichs fest. Geben Sie einen Pixelwert ein (z.B. "500px") oder verwenden Sie "100%", damit sich das Embed automatisch an die Breite des umgebenden Containers anpasst.
Max Modal Width / Max Modal Height
Diese Werte begrenzen die maximale Größe des Modal-Fensters. Lassen Sie die Felder leer, wenn Sie keine Begrenzung wünschen.
Embed Height
Die Höhe des Vorschaubereichs in Pixeln (z.B. "500px"). Diese Option erscheint nur, wenn Sie den automatischen Vorschaumodus verwenden.
5. Vorschaumodus wählen
Sie haben zwei Möglichkeiten, wie die Vorschau Ihres Projekts dargestellt wird:
Option A: Automatische Vorschau (Standard)
Wenn die Option "Eigenen Screenshot verwenden?" deaktiviert ist, wird automatisch eine interaktive Vorschau aus den Projektdaten und Bildern erstellt. Diese Vorschau zeigt eine Live-Ansicht Ihres Projekts.
Option B: Eigenes Vorschaubild
Aktivieren Sie "Eigenen Screenshot verwenden?", um ein eigenes Vorschaubild hochzuladen. Dies ist empfehlenswert wenn:
- Sie ein speziell gestaltetes Teaser-Bild verwenden möchten
- Die Ladezeit der Seite minimiert werden soll
- Das Design der Vorschau exakt zu Ihrer Website passen soll
Nach der Aktivierung können Sie über den Upload-Bereich ein eigenes Bild hochladen. Alternativ wird das automatisch generierte Cover-Bild Ihres Projekts verwendet.
6. Vorschau prüfen und Code kopieren
Im Bereich "Preview" sehen Sie eine Live-Vorschau, wie das Embed auf Ihrer Website aussehen wird. Prüfen Sie hier, ob alle Einstellungen Ihren Vorstellungen entsprechen.
Der fertige Code wird im Feld "Dynamic Code" angezeigt. Klicken Sie auf das Kopier-Symbol rechts neben dem Textfeld, um den Code in Ihre Zwischenablage zu kopieren.
<script>-Tags am Ende. Das Script ist erforderlich, damit das Embed funktioniert.7. Code in WordPress einfügen
Mit dem Block-Editor (Gutenberg):
- Öffnen Sie die Seite oder den Beitrag, auf der das Projekt erscheinen soll
- Klicken Sie auf das + Symbol, um einen neuen Block hinzuzufügen
- Suchen Sie nach "Custom HTML" oder "Individuelles HTML" und wählen Sie diesen Block aus
- Fügen Sie den kopierten Embed-Code in das Textfeld ein
- Klicken Sie auf "Vorschau" im Block, um das Embed zu prüfen
- Speichern oder veröffentlichen Sie die Seite
Mit dem Classic Editor:
- Wechseln Sie in den "Text"-Modus (nicht "Visuell")
- Fügen Sie den Embed-Code an der gewünschten Stelle ein
- Speichern oder veröffentlichen Sie die Seite
8. Code in Webflow einfügen
Embed auf einer Seite einfügen:
- Öffnen Sie Ihr Webflow-Projekt im Designer
- Navigieren Sie zur gewünschten Seite
- Ziehen Sie ein "Embed"-Element aus dem Add Panel (Tastenkürzel: A) an die gewünschte Stelle
- Doppelklicken Sie auf das Embed-Element
- Fügen Sie den kopierten Code in das Code-Feld ein
- Klicken Sie auf "Save & Close"
- Veröffentlichen Sie die Website
Embed in einer Collection-Seite verwenden:
Falls Sie das Embed in einem CMS-Template verwenden möchten, fügen Sie das Embed-Element innerhalb der Collection-Struktur ein und passen Sie es entsprechend an.
Häufige Fragen:
Kann ich mehrere Projekte auf einer Seite einbetten?
Ja, fügen Sie einfach mehrere Embed-Codes untereinander ein. Das <script>-Tag muss dabei nur einmal am Ende der Seite vorhanden sein.
Das Embed wird nicht angezeigt – was kann ich tun?
Prüfen Sie, ob externe Scripts auf Ihrer Website erlaubt sind. Bei Content-Security-Policy-Einschränkungen muss v2.webmag.io als erlaubte Quelle hinzugefügt werden.
Kann ich das Aussehen des Embeds mit CSS anpassen?
Die grundlegenden Optionen können Sie über die Einstellungen festlegen. Für weitergehende Anpassungen können Sie das umgebende Element mit eigenem CSS stylen.
Aktualisiert am: 21/01/2026
Danke!