Die Shortcode-Block ermöglicht es Ihnen, beliebige WordPress-Shortcodes direkt in Ihre SeedProd-Seiten einzubetten. Shortcodes sind kleine Code-Schnipsel, die in eckige Klammern gesetzt werden – wie beispielsweise [contact-form-7] oder [woocommerce_cart] — die beim Rendern der Seite bestimmte Funktionen auslösen. Dieser Block schließt die Lücke zwischen dem visuellen Editor von SeedProd und dem breiteren WordPress-Plugin-Ökosystem.
Jedes Plugin, das Inhalte über einen Shortcode ausgibt, kann mit diesem Block in eine SeedProd-Seite eingefügt werden. Häufige Beispiele sind Kontaktformulare, Zahlungsschaltflächen, Mitgliederinhalte, Schieberegler, Buchungskalender und benutzerdefinierte PHP-Snippets. Mit der optionalen Live-Vorschau können Sie die gerenderte Ausgabe direkt im Editor anzeigen, sodass Sie vor der Veröffentlichung überprüfen können, ob Ihr Shortcode funktioniert.
Hinzufügen des Shortcode-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Shortcode-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Shortcode-Block per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Sobald Sie den Shortcode hinzugefügt haben, klicken Sie auf den Shortcode-Block, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie im Abschnitt „Einstellungen“ Ihren Shortcode eingeben und optional eine Vorschau der Ausgabe im Editor anzeigen.
- Kurzcode: Geben Sie Ihren WordPress-Shortcode in den Textbereich ein oder fügen Sie ihn dort ein. Geben Sie den vollständigen Shortcode einschließlich der eckigen Klammern und aller Attribute ein, zum Beispiel:
[contact-form-7 id="1" title="Contact form"]Der Shortcode wird verarbeitet und auf der Live-Seite gerendert. - Vorschau des Shortcodes anzeigen: Aktivieren Sie diese Option, um eine Live-Vorschau der Shortcode-Ausgabe direkt im SeedProd-Editor anzuzeigen. So können Sie überprüfen, ob der Shortcode funktioniert, und sein Erscheinungsbild kontrollieren, ohne den Builder zu verlassen. Deaktivieren Sie diese Option, um die Vorschau auszublenden und den Editor während der Bearbeitung anderer Elemente reaktionsfähig zu halten.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie den Abstand um den Block herum steuern und dessen Sichtbarkeit auf verschiedenen Geräten verwalten.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Shortcode-Block herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen der Shortcode-Ausgabe und den umgebenden Seitenelementen angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Shortcode-Blocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen der Shortcode-Ausgabe und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Shortcode-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 benutzerdefiniertes CSS auf den Block-Wrapper 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-form|contact).
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Shortcode-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Shortcode-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Shortcode-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Shortcode-Block in den Blickbereich scrollt. Zu den Optionen gehören „Bounce“, „Fade In“, „Zoom In“, „Rotate In“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Shortcode-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Shortcode-Block zu Ihrer Seite hinzugefügt! Dieser Block erschließt Ihnen die volle Leistungsfähigkeit des WordPress-Plugin-Ökosystems innerhalb Ihrer SeedProd-Layouts – von Kontaktformularen und Zahlungs-Widgets bis hin zu Mitgliedschaftsportalen und benutzerdefinierten Funktionen. Fügen Sie einen beliebigen Shortcode Ihrer Plugins ein und überprüfen Sie mithilfe der Live-Vorschau, ob alles genau wie gewünscht aussieht, bevor Sie Ihre Seite online stellen.