Unser Beaver Builder-Plugin hilft Ihnen, komplette Websites mit Vorlagen und Modulen zu erstellen. Es kann jedoch vorkommen, dass Sie Ihre Website noch weiter anpassen möchten. Mit den Shortcodes von Beaver Builder können Sie zusätzliche Inhalte in Modulen, Kopfzeilen, Fußzeilen und Seitenleisten hinzufügen.

In diesem Beitrag stellen wir Beaver Builder-Shortcodes vor und zeigen Ihnen, wie Sie sie in Ihre Inhalte einfügen. Wir werden auch einige Beispiele untersuchen, die das Design Ihrer Website verbessern könnten. Springen wir rein!

Eine Einführung in Beaver Builder Shortcodes

Wenn Sie bereits mit WordPress-Websites gearbeitet haben, sind Sie möglicherweise bereits mit Shortcodes vertraut. Dies sind kleine Codeschnipsel, die Ihrer Website Funktionen hinzufügen.

Anstatt alles mit dem Code-Editor in HTML zu schreiben, können Sie einfach einen Shortcode in Ihre Seite einfügen. Dies hat einen Slug oder eine ID, die einem Beaver Builder-Element entspricht, wie einem Modul, einer Zeile oder einer Spalte. Sie können Shortcodes auch für Beiträge, Seiten oder Layoutvorlagen verwenden.

In diesem Beispiel fügen wir einem HTML-Modul eine gespeicherte Zeile hinzu:

Wenn wir auf Speichern klicken, konvertiert Beaver Builder den Shortcode automatisch in die gespeicherte Zeile, der er entspricht:

Später in diesem Beitrag zeigen wir Ihnen, wie Sie Shortcodes im Editor hinzufügen. Lassen Sie uns zunächst die Vorteile der Verwendung von Beaver Builder-Shortcodes besprechen.

Shortcodes können praktisch sein, um textbasierten Bereichen visuelle Elemente hinzuzufügen. Sie könnten beispielsweise ein Preismodul erstellen und einen Shortcode verwenden, um ein Produktfoto hinzuzufügen. Auf diese Weise müssen Sie nicht mit zwei einzelnen Modulen (Preisgestaltung und Foto) arbeiten, da diese kombiniert werden:

Shortcodes ermöglichen es Ihnen auch, Beaver Builder-Elemente in Ihre Inhalte einzufügen, während Sie mit dem WordPress Block Editor arbeiten. Das bedeutet, dass Sie nicht zum Beaver Builder-Editor wechseln müssen, um ein Modul, eine Zeile oder eine Spalte hinzuzufügen.

Sie können Shortcodes zu jedem Beaver Builder-Modul mit einem Textfeld hinzufügen, einschließlich:

• HTML
• Text
• Header
• Aufbieten, ausrufen, zurufen
• Symbol
• Registerkarten

Es ist jedoch möglicherweise nicht ratsam, zu viele Shortcodes hinzuzufügen. Dies könnte die Ladezeiten erhöhen, da der Server die CSS- und Javascript-Dateien für jeden Shortcode anfordern muss. Wir empfehlen, höchstens zwei pro Seite zu verwenden.

5 Beispiele für hilfreiche Beaver Builder Shortcodes

Es gibt viele Anwendungsfälle für Beaver Builder-Shortcodes. Schauen wir uns ein paar hilfreiche Beispiele an.

1. Call-to-Action-Buttons in einer Preistabelle

Angenommen, Sie haben eine Preistabelle mit mehreren Produktoptionen auf einer Zielseite oder Verkaufsseite. Sie könnten einfach die Preise auflisten und Kunden dann mit einer Schaltfläche unten auf der Seite zur Kasse leiten. Benutzer müssen jedoch weiter nach unten scrollen, was möglicherweise die Benutzererfahrung (UX) beeinträchtigen könnte.

Stattdessen könnten Sie einen Call-to-Action-Button (CTA) erstellen, der Kunden zum Kauf des Produkts auffordert. Diese wird direkt mit der Checkout-Seite verlinkt, sodass Kunden nicht weiter navigieren müssen. Dann können Sie diese Schaltfläche mit einem Shortcode zu Ihrer Preistabelle hinzufügen:

Denken Sie daran, die CTA-Schaltfläche an Ihre visuelle Marke anzupassen.

2. Ein Kontaktformular in einem Tab

Wenn Sie eine Unternehmenswebsite haben, können Sie Ihrem Info-Bereich einige Registerkarten hinzufügen. Auf diese Weise können Benutzer mehr über Ihr Unternehmen erfahren, ohne auf der Seite nach unten scrollen zu müssen.

Angenommen, Sie möchten auch, dass potenzielle Kunden Sie bezüglich Ihrer Dienstleistungen kontaktieren, sobald sie mit dem Lesen fertig sind. Benutzer verbringen bereits Zeit damit, zwischen Ihren Tabs zu wechseln. Wenn Sie sie an einen anderen Ort verweisen, könnten sie ein paar zusätzliche Sekunden gewinnen, um ihre Entscheidung, sich zu melden, zu überdenken.

Stattdessen können Sie mit einem Shortcode ein Kontaktformular zu einem Ihrer Tabs hinzufügen:

So einfach ist das! Jetzt können Kunden Sie kontaktieren, ohne die Seite verlassen zu müssen.

3. Bilder in einem Textfeld

Beim Erstellen Ihrer Seiten ziehen Sie es möglicherweise vor, Bilder und Text zu einem einzigen Modul hinzuzufügen. Obwohl Sie zwei separate Module verwenden könnten, würde der Inhalt aufgeteilt und Sie könnten das Bild nicht in die Mitte des Textes einfügen.

Die Kombination von Text und Bildern ist eine effektive Möglichkeit, Produkte in Ihrem Online-Shop zu präsentieren. Beispielsweise könnten Sie Bilder zu Ihrem Pricing Box-Modul hinzufügen, um verschiedene Produktfunktionen zu präsentieren:

Theoretisch könnte man dasselbe Layout mit verschiedenen Modulen übereinander stapeln. Die Verwendung eines Bild-Shortcodes kann jedoch den Designprozess beschleunigen.

4. Beliebiges Modul im Blockeditor

Sie können auch Beaver Builder-Shortcodes verwenden, wenn Sie mit dem Blockeditor arbeiten. Dies könnte besonders praktisch sein, wenn Sie einen Blogbeitrag schreiben und Ihrem Artikel interaktive Elemente hinzufügen möchten.

Sie können ein Beaver Builder-Modul einfach auf der Seite ablegen, ohne den Blockeditor zu verlassen. Fügen Sie einfach einen Shortcode- Block ein und fügen Sie Ihren Code darin ein:

Sobald Sie den Beitrag veröffentlichen, zeigt der Shortcode den Inhalt im Frontend an:

Sie könnten beispielsweise ein Kontaktformular-Modul einfügen. Sie können auch einen Call-to-Action hinzufügen, der Kunden zu Ihrem Geschäft leitet, oder eine eingebettete Karte Ihres Geschäftsstandorts.

5. Das Datum (nur Beaver Builder-Design)

Unser Beaver Builder Theme wird mit einem benutzerdefinierten Date-Shortcode geliefert. Dadurch wird das aktuelle Datum in jedem Teil Ihrer Seite angezeigt, einschließlich Kopfzeilen, Fußzeilen und Seitenleisten:

Dieser Shortcode könnte praktisch sein, wenn Sie eine Nachrichten-Website betreiben. Sie können das Datum mit einem der folgenden Shortcodes hinzufügen:

Sie können diesen Shortcode auch neben Ihrer Copyright-Nachricht in der Fußzeile verwenden. Auf diese Weise können Sie sicherstellen, dass es immer auf dem neuesten Stand ist.

So fügen Sie Shortcodes mit Beaver Builder hinzu (in 2 Schritten)

Wir haben gerade mehrere Szenarien behandelt, in denen Beaver Builder-Shortcodes Ihren Designprozess beschleunigen und vereinfachen können. Sehen wir uns nun an, wie Sie sie zu Ihrer Website hinzufügen:

Schritt 1: Erstellen Sie Ihren Shortcode

Shortcodes sind auf Ihrer Website nicht ohne Weiteres verfügbar. Sie müssen zuerst Beaver Builder-Elemente speichern, bevor Sie sie als Shortcodes einfügen können. Diese Elemente können Folgendes umfassen:

• Module
• Reihen
• Säulen
• Vorlagen

Angenommen, Sie möchten ein benutzerdefiniertes Kontaktformular-Modul entwerfen. Sie können dies tun, indem Sie zu Beaver Builder > Saved Modules > Add New navigieren:

Sie werden dann aufgefordert, Ihr Modul zu benennen und seinen Typ auszuwählen:

Klicken Sie auf Gespeichertes Modul hinzufügen . Wählen Sie auf der nächsten Seite Beaver Builder starten aus, um auf den Editor zuzugreifen. Hier können Sie das Kontaktformular nach Ihren Wünschen anpassen:

Wenn Sie bereit sind, stellen Sie sicher, dass Sie Ihr Modul veröffentlichen. Es wird nun auf Ihrer Seite „ Gespeicherte Module “ angezeigt. Wenn Sie die neueste Version von Beaver Builder verwenden, können Sie automatisch generierte Shortcodes sehen:

Wenn Sie die ShortCode- Spalte nicht sehen können, müssen Sie den Code manuell erstellen. Dazu benötigen Sie den Slug des Moduls.

Wenn Sie unter Ihrem Modul auf die Schaltfläche Bearbeiten klicken, sollten Sie in der Lage sein, seinen Slug anzuzeigen. Wenn Sie es nicht sehen können, öffnen Sie das Menü Bildschirmoptionen und aktivieren Sie das Kontrollkästchen neben Slug :

Jetzt können Sie den folgenden Code verwenden, um einen Shortcode für dieses Modul zu erstellen:

 [fl_builder_insert_layout slug="my-post-slug"]

Denken Sie daran, „my-post-slug“ durch den Slug Ihres Beaver Builder-Moduls zu ersetzen. In unserem Beispiel sieht das so aus:

 [fl_builder_insert_layout slug="contact-form"]

Das war’s – Sie wissen jetzt, wie Sie Shortcodes für Beaver Builder-Module erstellen.

Schritt 2: Fügen Sie den Shortcode in Ihre Seite ein

Der letzte Schritt besteht darin, den Shortcode zu Ihrer Seite hinzuzufügen. In den meisten Fällen beinhaltet dieser Vorgang das Einfügen des Snippets in das Textfeld eines Moduls.

Hier ist unser Preistabellenbeispiel von früher. Wie Sie sehen können, haben wir den Shortcode für die CTA-Schaltfläche im Textfeld Feature 5 hinzugefügt:

Da Beaver Builder einen Frontend-Editor verwendet, können Sie Ihr gespeichertes Modul sofort sehen. In einigen Fällen (z. B. bei Verwendung eines HTML-Moduls) müssen Sie Ihre Änderungen möglicherweise speichern, bevor der Shortcode in das visuelle Element umgewandelt wird.

Fazit

Mit den Shortcodes von Beaver Builder können Sie schnell gespeicherte Module, Zeilen, Spalten oder Layouts in verschiedene Teile Ihrer Seiten einfügen. Sie können sie verwenden, um den Designprozess zu beschleunigen und schöne WordPress-Seiten zu erstellen.

Um es noch einmal zusammenzufassen: Sie können Beaver Builder-Shortcodes verwenden, indem Sie diesen einfachen Schritten folgen:

1. Speichern Sie ein Element (Modul, Zeile, Spalte oder Layout) und suchen Sie nach seinem Shortcode oder Slug.
2. Fügen Sie den Shortcode in ein Textfeld innerhalb eines Beaver Builder-Moduls oder den Shortcode-Block im Block-Editor ein.

Sind Sie bereit, beeindruckende Seiten für Ihre Website zu erstellen? Schauen Sie sich die vollständige Liste der benutzerfreundlichen Funktionen von Beaver Builder an!

VERWANDTE FRAGEN

Verwendet Beaver Builder Shortcodes?

Beaver Builder bietet Shortcodes für gespeicherte Elemente wie Module, Zeilen, Spalten und Vorlagen. Sie können diese Snippets dann zu textbasierten Feldern und Modulen hinzufügen. Dies ist sowohl im Frontend-Editor von Beaver Builder als auch im WordPress-Blockeditor möglich. Darüber hinaus ermöglichen Ihnen Shortcodes, Ihre anderen bevorzugten Plugins zusammen mit Beaver Builder zu verwenden.

Benötigen Sie das Beaver Builder-Design, um Shortcodes zu verwenden?

Sie benötigen nicht das offizielle Beaver Builder-Design, um Shortcodes zu verwenden. Mit dem Page Builder-Plugin können Sie Seiten erstellen und Shortcodes mit den meisten Themen hinzufügen. Einige Shortcodes, wie der Date-Shortcode, funktionieren jedoch nur mit dem Beaver Builder-Design.

Was ist der Unterschied zwischen Beaver Builder und Beaver Themer?

Beaver Builder ist ein Seitenerstellungstool, mit dem Sie den Inhaltsbereich von Seiten und Beiträgen mithilfe von Modulen und Vorlagen bearbeiten können. Im Gegensatz dazu ist Beaver Themer ein Add-On-Plugin, mit dem Sie Bereiche Ihrer Website bearbeiten können, die normalerweise von Ihrem Design gesteuert werden, wie z. B. Kopfzeilen, Fußzeilen und Seitenleisten. Dieser Inhalt umfasst Themenvorlagen, Vorlagenteile und Beitragsraster.