Ihr interaktives Bild auf jeder Website

WordPress

1. 1Öffnen Sie die Seite oder den Beitrag im WordPress-Editor.
2. 2Klicken Sie auf + und fügen Sie dort, wo das Bild erscheinen soll, einen Block Individuelles HTML ein.
3. 3Fügen Sie den Code in den Block ein. In neueren WordPress-Versionen klicken Sie zuerst auf HTML bearbeiten, fügen den Code ein und klicken auf Aktualisieren.
4. 4Klicken Sie auf Speichern (oder Veröffentlichen) und öffnen Sie die Seite oder die Vorschau, um das interaktive Bild zu sehen.

Sie brauchen ein Konto als Administrator oder Redakteur, sonst entfernt WordPress das Skript. Klassischer Editor: Fügen Sie den Code im Tab Code ein (in älteren Versionen Text). Auf WordPress.com laufen Skripte nur in einem kostenpflichtigen Tarif mit aktivierten Hosting-Funktionen.

Elementor

1. 1Bearbeiten Sie die Seite mit Elementor.
2. 2Ziehen Sie das Widget HTML an die Stelle, an der das Bild erscheinen soll.
3. 3Fügen Sie den Code in das Feld HTML-Code ein.
4. 4Klicken Sie auf Veröffentlichen (oder Aktualisieren).

Standardmäßig dürfen nur Administratoren das HTML-Widget verwenden; andere Rollen lassen sich im Role Manager von Elementor freischalten.

Shopify

1. 1Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop und klicken Sie beim Theme auf Theme bearbeiten (in manchen Adminbereichen: Anpassen).
2. 2Öffnen Sie die Seite oder Vorlage, auf der das Bild erscheinen soll, zum Beispiel die Startseite oder eine Produktvorlage.
3. 3Klicken Sie auf Abschnitt hinzufügen und wählen Sie Benutzerdefiniertes Liquid.
4. 4Fügen Sie den Code in das Feld Liquid-Code ein und klicken Sie auf Speichern.

Benutzerdefiniertes Liquid gibt es in den kostenlosen Shopify-Themes wie Dawn und in den meisten Online Store 2.0-Themes.

Wix

1. 1Öffnen Sie Ihre Website im Wix Editor.
2. 2Klicken Sie auf Elemente hinzufügen (+) → Code einbetten → Beliebte Einbettungen → HTML einbetten.
3. 3Klicken Sie auf HTML-Code eingeben, fügen Sie den Code ein und klicken Sie auf Anwenden.
4. 4Ziehen Sie die Ecken des Rahmens, bis das ganze Bild hineinpasst, und klicken Sie auf Veröffentlichen.

Wix zeigt eingebetteten Code in einem Rahmen mit fester Größe: Ist das Bild abgeschnitten, machen Sie den Rahmen höher. Im neuen Wix Harmony Editor: + Hinzufügen → Elemente → Einbetten → Code einbetten, dann das Einstellungssymbol und HTML-Einbettungscode eingeben.

Squarespace

1. 1Bearbeiten Sie die Seite und klicken Sie dort, wo das Bild erscheinen soll, auf Block hinzufügen.
2. 2Wählen Sie Code und klicken Sie dann auf das Bleistiftsymbol des neuen Blocks.
3. 3Fügen Sie den Code ein, lassen Sie den Modus auf HTML und Quellcode anzeigen ausgeschaltet.
4. 4Klicken Sie neben den Block und speichern Sie die Seite.

Squarespace führt Skripte in Code-Blöcken nur im Core-, Plus- oder Advanced-Abonnement aus. Solange Sie eingeloggt sind, erscheint das Bild eventuell nicht; prüfen Sie die Live-Seite oder ein privates Fenster.

Webflow

1. 1Öffnen Sie die Seite im Webflow Designer.
2. 2Öffnen Sie das Panel Add und ziehen Sie ein Element Code Embed auf die Seite.
3. 3Fügen Sie den Code ein und klicken Sie auf Save & Close.
4. 4Veröffentlichen Sie die Website. Das Bild erscheint auf der veröffentlichten Seite; im Designer sehen Sie einen Platzhalter.

Code Embed setzt einen kostenpflichtigen Site-Tarif oder einen kostenpflichtigen Workspace (Core, Growth, Agency oder Freelancer) voraus.

Framer

1. 1Öffnen Sie die Seite in Framer.
2. 2Klicken Sie auf Insert und fügen Sie eine Komponente Embed ein.
3. 3Öffnen Sie den Tab HTML der Komponente und fügen Sie den Code ein.
4. 4Passen Sie die Größe an, bis das ganze Bild hineinpasst, und klicken Sie auf Publish. Skripte laufen nur auf der veröffentlichten Website, nicht im Editor.

Google Sites

1. 1Öffnen Sie Ihre Website in Google Sites.
2. 2Klicken Sie auf Einfügen → Einbetten und wechseln Sie zum Tab Code einbetten.
3. 3Fügen Sie den Code ein, klicken Sie auf Weiter und dann auf Einfügen.
4. 4Passen Sie die Größe des Rahmens an, bis das ganze Bild hineinpasst, und klicken Sie auf Veröffentlichen.

HTML

1. 1Öffnen Sie die HTML-Datei oder Vorlage Ihrer Seite.
2. 2Fügen Sie den Code innerhalb von <body> dort ein, wo das Bild erscheinen soll.
3. 3Speichern Sie die Seite und laden Sie sie hoch.

Mehrere Bilder auf einer Seite: Fügen Sie pro Bild ein <div class="iactiveImg" data-ii="…"></div> ein. Die Zeile <script> brauchen Sie nur einmal.