Der Shortcode-Block ermöglicht es Ihnen, jeden WordPress-Shortcode direkt auf Ihren SeedProd-Seiten einzubetten. Shortcodes sind kleine Code-Schnipsel, die in eckige Klammern eingeschlossen sind – wie z. B. [contact-form-7] oder [woocommerce_cart] – und beim Rendern der Seite eine bestimmte Funktionalität auslösen. Dieser Block schlägt die Brü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 auf eine SeedProd-Seite eingefügt werden. Gängige Beispiele sind Kontaktformulare, Zahlungsbuttons, Mitgliedschaftsinhalte, Slider, Buchungskalender und benutzerdefinierte PHP-Snippets. Die optionale Live-Vorschau-Umschaltung ermöglicht es Ihnen, die gerenderte Ausgabe direkt im Editor anzuzeigen, sodass Sie überprüfen können, ob Ihr Shortcode vor der Veröffentlichung 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 in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Shortcode-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt ermöglicht der Abschnitt Einstellungen die Eingabe Ihres Shortcodes und optional die Vorschau seiner Ausgabe im Editor.
- Shortcode: Geben Sie Ihren WordPress-Shortcode in das Textfeld ein oder fügen Sie ihn dort ein. Geben Sie den vollständigen Shortcode einschließlich seiner eckigen Klammern und aller Attribute ein – zum Beispiel
[contact-form-7 id="1" title="Contact form"]. Der Shortcode wird auf der Live-Seite verarbeitet und gerendert. - Shortcode-Vorschau anzeigen: Schalten Sie diese Option ein, um eine Live-Vorschau der Shortcode-Ausgabe direkt im SeedProd-Editor anzuzeigen. So können Sie überprüfen, ob der Shortcode funktioniert und sein Aussehen überprüfen, ohne den Builder zu verlassen. Schalten Sie ihn aus, um die Vorschau auszublenden und den Editor beim Bearbeiten anderer Elemente reaktionsschnell zu halten.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie den Abstand um den Block steuern und seine Sichtbarkeit auf verschiedenen Geräten verwalten.
Abstand:
- Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Shortcode-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen der Shortcode-Ausgabe und den umliegenden Seitenelementen erscheint.
- Abstand (Innen): Passen Sie den inneren Abstand innerhalb Ihres Shortcode-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum 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 von SeedProd automatisch für benutzerdefinierte Stile oder die gezielte Ansprache per JavaScript erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS auf den Block-Wrapper anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-form|kontakt).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Shortcode-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Shortcode-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Shortcode-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Shortcode-Block in die Ansicht gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Sobald Sie die Konfiguration des Shortcode-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Shortcode-Block zu Ihrer Seite hinzugefügt! Dieser Block schaltet die volle Leistung des WordPress-Plugin-Ökosystems innerhalb Ihrer SeedProd-Layouts frei – von Kontaktformularen und Zahlungs-Widgets bis hin zu Mitgliedschaftstoren und benutzerdefinierter Funktionalität. Fügen Sie jeden Shortcode ein, den Ihre Plugins bereitstellen, und verwenden Sie den Live-Vorschau-Schalter, um zu bestätigen, dass alles genau wie gewünscht aussieht, bevor Ihre Seite live geht.