Mit dem benutzerdefinierten HTML-Block können Sie beliebige HTML-Markups direkt in Ihre SeedProd-Seiten einbetten. Ganz gleich, ob Sie ein Widget eines Drittanbieters, einen benutzerdefinierten Einbettungscode, eine reine HTML-Ausgabe oder einen beliebigen Snippet hinzufügen möchten, für den SeedProd keinen eigenen Block hat – mit diesem Block können Sie ihn direkt einfügen.
Dadurch eignet es sich ideal für die Integration externer Tools, benutzerdefinierter Skripte oder beliebiger HTML-basierter Inhalte, die Sie präzise in Ihr Seitenlayout einfügen möchten.
Hinzufügen des benutzerdefinierten HTML-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen benutzerdefinierten HTML-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Benutzerdefiniertes HTML“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Ziehen Sie den Block „Benutzerdefiniertes HTML“ aus dem Blockbereich und legen Sie ihn im gewünschten Seitenbereich ab.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Benutzerdefiniertes HTML“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie Ihren HTML-Code eingeben und auf den Vollbild-Editor zugreifen.
- Benutzerdefinierter Code: Fügen Sie Ihren HTML-Markup-Code direkt in den Textbereich ein oder geben Sie ihn dort ein. Dabei kann es sich um jeden gültigen HTML-Code handeln, einschließlich Einbettungscodes, Iframes, benutzerdefinierten Elementen oder Skript-Tags.
- Editor erweitern: Klicken Sie auf diese Schaltfläche, um einen größeren Vollbild-Code-Editor zu öffnen, der die Arbeit mit längeren oder komplexeren HTML-Schnipseln erleichtert.
Geben Sie Ihren HTML-Code in die Registerkarte „Inhalt“ ein. Verwenden Sie die Schaltfläche „Editor erweitern“, um einen größeren Bearbeitungsbereich zu erhalten.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Layout und die Sichtbarkeit Ihres benutzerdefinierten HTML-Blocks steuern.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren benutzerdefinierten HTML-Block herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Block und den umgebenden Elementen angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres benutzerdefinierten HTML-Blocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen Ihrem HTML-Inhalt und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren benutzerdefinierten HTML-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-section|html-embed)
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Den benutzerdefinierten HTML-Block auf Desktop-Bildschirmen ausblenden
- Auf Tablet ausblenden: Den benutzerdefinierten HTML-Block auf Tablet-Geräten ausblenden
- Auf Mobilgeräten ausblenden: Den benutzerdefinierten HTML-Block auf Mobilgeräten ausblenden
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der benutzerdefinierte HTML-Block in den Bildausschnitt scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr.
Verwenden Sie die Registerkarte „Erweitert“, um den Abstand, die Attribute, die Sichtbarkeit des Geräts und die Eintrittsanimationen für Ihren benutzerdefinierten HTML-Block zu steuern.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des benutzerdefinierten HTML-Blocks abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen benutzerdefinierten HTML-Block zu Ihrer Seite hinzugefügt! Ganz gleich, ob Sie ein Widget eines Drittanbieters, ein benutzerdefiniertes Formular oder einen beliebigen HTML-Schnipsel einbetten möchten, den Ihre Website benötigt – mit dem benutzerdefinierten HTML-Block können Sie Markups ganz flexibel genau dort platzieren, wo Sie sie auf Ihren SeedProd-Seiten haben möchten.