Mit Elementor-Shortcodes können Sie gespeicherte Vorlagen an beliebiger Stelle auf Ihrer WordPress-Website einfügen, ohne sie von Grund auf neu erstellen zu müssen. Sobald Sie eine Vorlage erstellt und deren Shortcode kopiert haben, können Sie ihn in Sekundenschnelle in jeden Beitrag, jede Seite oder jedes Widget einfügen.
In diesem Leitfaden erfahren Sie, wie Sie Elementor Shortcodes richtig einrichten und Ihren Workflow wie ein Profi optimieren
Website-Sicherheit schützt Unternehmenswebsites vor Malware, Hackerangriffen, Datenlecks, Ausfallzeiten und unberechtigtem Zugriff. Gleichzeitig verbessert sie das Kundenvertrauen, die SEO-Performance, die Verfügbarkeit und die langfristige Stabilität Ihres Unternehmens. Im Jahr 2026 legt eine kompromittierte Website nicht nur sensible Kundendaten offen. Sie zerstört das über Jahre aufgebaute Vertrauen in Ihr Unternehmen, führt zu Abstrafungen durch Suchmaschinen und kann erhebliche rechtliche Konsequenzen nach sich ziehen, insbesondere im Hinblick auf Datenschutzbestimmungen.
Was sind Elementor-Vorlagen und Shortcodes?
Bevor wir uns mit Shortcodes beschäftigen, ist es wichtig zu verstehen, wie Elementor-Vorlagen funktionieren. Diese Vorlagen sind Ihre wichtigsten Designelemente, die Sie problemlos auf Ihrer gesamten Website wiederverwenden können und die den Designprozess dadurch reibungsloser und effizienter gestalten.
Was sind Elementor-Vorlagen?
Elementor-Vorlagen sind vorgefertigte Designabschnitte, die Sie einmal erstellen und überall auf Ihrer WordPress-Website wiederverwenden können. Eine Vorlage kann ein komplettes Seitenlayout, eine Preistabelle, ein Hero-Bereich oder ein beliebiger Designblock sein, den Sie mehrfach verwenden möchten.
Um auf Vorlagen zuzugreifen, öffnen Sie den Elementor-Editor und klicken Sie beim Bearbeiten eines Abschnitts auf das Ordnersymbol. Dadurch öffnet sich die Vorlagenbibliothek, in der Sie vorgefertigte Designs durchsuchen oder eine bereits gespeicherte Vorlage laden können. Sobald Sie eine Vorlage gespeichert haben, können Sie sie mit wenigen Klicks an beliebiger Stelle auf Ihrer Website wiederverwenden.
Probleme mit Elementor-Shortcodes?
Optimieren Sie Ihren Workflow und verwenden Sie Inhalte mühelos wieder – mit unseren Elementor-Services, die auf Leistung und Flexibilität ausgelegt sind.
Die Rolle von Shortcodes in Elementor
Mit Elementor-Shortcodes können Sie jede gespeicherte Vorlage mit nur einer Codezeile an beliebiger Stelle auf Ihrer Website einfügen. Anstatt die Vorlage jedes Mal manuell hinzuzufügen, kopieren Sie einfach den zugehörigen Shortcode und fügen ihn in einen Beitrag, eine Seite oder einen Widget-Bereich ein.
Nach dem Speichern einer Vorlage generiert Elementor automatisch einen Shortcode. Sie finden ihn in Ihrem WordPress-Dashboard unter „Vorlagen“ → „Gespeicherte Vorlagen“. Kopieren Sie den Shortcode und fügen Sie ihn an der gewünschten Stelle ein. Der Abschnitt wird dann genau wie gewünscht dargestellt.
Dies ist besonders nützlich bei der Verwaltung von Websites mit vielen Seiten, die gemeinsame Designelemente verwenden, wie z. B. Call-to-Action-Banner, Kontaktformulare oder Ankündigungsabschnitte.
So erstellen und verwenden Sie Elementor-Shortcodes für Vorlagen: Schritt für Schritt
Befolgen Sie diese drei Schritte, um Elementor-Shortcodes auf Ihrer WordPress-Website einzurichten und zu verwenden.
Schritt 1: Vorlage erstellen oder auswählen
Gehen Sie in Ihrem WordPress-Dashboard zu „Vorlagen“ → „Gespeicherte Vorlagen“ → „Neu hinzufügen“. Gestalten Sie Ihre Vorlage von Grund auf neu oder wählen Sie eine aus der Elementor-Vorlagenbibliothek. Klicken Sie anschließend auf „Speichern“, um die Vorlage zu speichern. Dieses Design können Sie dann mithilfe eines Shortcodes auf Ihrer gesamten Website einfügen.
Schritt 2: Generieren Sie den Shortcode für die Vorlage
Elementor erstellt automatisch einen Shortcode für jede gespeicherte Vorlage. Diesen finden Sie unter Vorlagen → Gespeicherte Vorlagen. Suchen Sie Ihre Vorlage und kopieren Sie den Code in der Spalte „Shortcode“. Diesen Code fügen Sie dann an der gewünschten Stelle ein.
Schritt 3: Shortcodes in Beiträge oder Seiten einfügen
Öffnen Sie einen beliebigen Beitrag, eine Seite oder einen Widget-Bereich und fügen Sie den Shortcode in den WordPress-Editor ein. Der Shortcode funktioniert im klassischen Editor, im Gutenberg-Blockeditor und in Widget-Bereichen. Ihre Vorlage wird überall genau wie gewünscht dargestellt.
Wie kann ich Shortcodes in WordPress anpassen?
Das Anpassen von Elementor-Shortcodes ist eine hervorragende Möglichkeit, Ihre WordPress-Website an Ihre spezifischen Bedürfnisse anzupassen. So geht's:
Anpassen von Elementor-Shortcodes
Elementor-Shortcodes unterstützen Parameter, mit denen Sie deren Ausgabe anpassen können. Wenn Sie beispielsweise ein Kontaktformular mithilfe eines Shortcodes einbetten, können Sie Attribute hinzufügen, um das Formularlayout, die Feldreihenfolge oder die Formularaktion zu ändern – alles ohne die Vorlage selbst bearbeiten zu müssen.
Bei komplexeren Inhalten wie Produkt-Slidern oder Videogalerien können Sie Attribute direkt zum Shortcode hinzufügen, um zu steuern, wie dieser auf der Seite angezeigt wird oder sich verhält.
Erweiterte Anpassungsmöglichkeiten mit benutzerdefiniertem CSS
Mit Elementor Pro können Sie benutzerdefiniertes CSS anwenden, um das Aussehen von Shortcodes auf der Seite zu steuern. So können Sie Abstände, Farben und Layout anpassen oder Hover-Effekte für Elemente wie eingebettete Videoplayer oder Galerien hinzufügen.
Um benutzerdefiniertes CSS hinzuzufügen, öffnen Sie die Website-Einstellungen von Elementor oder verwenden Sie den Tab „Erweitert → Benutzerdefiniertes CSS“ in einem beliebigen Abschnitt. Änderungen gelten nur für das jeweilige Element und haben keine Auswirkungen auf Ihr Theme insgesamt.
So verwenden Sie das Shortcode-Widget in Elementor
Mit dem Elementor-Shortcode-Widget können Sie beliebige Shortcodes direkt in Ihr Seitenlayout einbetten, ohne den HTML-Code bearbeiten zu müssen. So verwenden Sie es.
Hier ist eine Kurzanleitung zur Verwendung des Shortcode-Widgets:
- Erstelle deine Seite mit dem Elementor Page Builder.
- Ziehen Sie das Shortcode-Widget aus dem Elementor-Panel.
- Fügen Sie Ihren Shortcode (z. B. für Formulare, Videoeinbettungen oder dynamische Inhalte) in das Inhaltsfeld des Widgets ein.
- Passen Sie das Erscheinungsbild des Widgets bei Bedarf mithilfe der Elementor Pro-Einstellungen an.
Dieser Ansatz ermöglicht es, dynamische Inhalte von Drittanbietern oder benutzerdefinierten Codes einfach innerhalb des Elementor-Editors zu verwalten und anzuzeigen.
Sie müssen den Shortcode nicht manuell in die HTML-Abschnitte einfügen; verwenden Sie einfach das Widget, um ihn an beliebiger Stelle auf Ihrer Seite anzuzeigen.
Entdecken Sie: Die besten Methoden zum Hinzufügen der Elementor-Sprachauswahl
Beliebte Anwendungsfälle für Elementor-Shortcodes
Elementor-Shortcodes sind in vielen gängigen WordPress-Designszenarien nützlich. Hier sind die praktischsten.
Einbetten von Vorlagen in Blogbeiträge
Wenn Sie einen Call-to-Action-Block oder ein Ankündigungsbanner in mehreren Blogbeiträgen anzeigen möchten, können Sie den Shortcode in jeden Beitrag einfügen, anstatt das Design neu zu erstellen. Jede Aktualisierung der Originalvorlage wird automatisch in allen Beiträgen, die diesen Shortcode verwenden, übernommen.
Hinzufügen von Vorlagen zu Widgets und Seitenleisten
Um eine gespeicherte Vorlage zu einer Seitenleiste oder einem Widget-Bereich hinzuzufügen, gehen Sie zu Design → Widgets, fügen Sie ein Text- oder benutzerdefiniertes HTML-Widget hinzu und fügen Sie Ihren Elementor-Shortcode ein. Die Vorlage wird im Widget-Bereich mit demselben Styling wie das Originaldesign dargestellt.
Dynamische Inhaltsblöcke mithilfe von Shortcodes
Elementor-Shortcodes eignen sich perfekt zum Erstellen dynamischer Inhaltsblöcke, die regelmäßig aktualisiert werden müssen.
Wenn Sie beispielsweise eine Tabelle mit wiederkehrenden Preisen, ein hervorgehobenes Kundenfeedback oder eine Veranstaltungsliste haben, können Sie diese einmal gestalten und den Shortcode an der gewünschten Stelle einfügen.
Wenn Sie die Vorlage aktualisieren, werden die Änderungen automatisch auf allen Seiten, die diesen Shortcode verwenden, übernommen. Dadurch eignet er sich ideal für Elemente, die stets aktuell und relevant bleiben müssen.
Tipps zum Verwalten mehrerer Shortcodes in Elementor
Die Verwaltung vieler Shortcodes auf einer großen Website kann schnell unübersichtlich werden. Diese Tipps helfen Ihnen, den Überblick zu behalten und häufige Probleme zu vermeiden.
Tipp 1: Halten Sie Ihre Shortcodes übersichtlich
Es ist leicht, den Überblick zu verlieren, welcher Shortcode zu welcher Vorlage gehört, wenn man nicht aufpasst. Um die Übersicht zu behalten, sollten Sie Ihre Vorlagen beim Speichern in Elementor eindeutig benennen.
Verwenden Sie aussagekräftige Namen wie „Kontaktformular – Homepage“ oder „Preistabelle – Serviceseite“, damit Sie bei Bedarf schnell den richtigen Shortcode finden und verwenden können.
Tipp 2: Erstellen Sie eine Shortcode-Referenzliste
Wenn Sie viele Shortcodes auf verschiedenen Seiten verwenden, kann es hilfreich sein, ein einfaches Dokument oder eine Tabelle zu erstellen, in der alle Ihre gespeicherten Vorlagen und die dazugehörigen Shortcodes aufgelistet sind.
Auf diese Weise können Sie es leicht nachschlagen, ohne jedes Mal das Elementor-Dashboard durchsuchen zu müssen.
Tipp 3: Vermeiden Sie es, Seiten mit Shortcodes zu überladen
Elementor-Shortcodes sind zwar äußerst nützlich, man sollte es aber nicht übertreiben. Zu viele Shortcodes auf einer Seite können die Ladezeiten verlängern, insbesondere wenn die Templates viele Designelemente oder Bilder enthalten.
Konzentrieren Sie sich auf die wesentlichen Elemente und ziehen Sie den Einsatz von Caching-Plugins in Betracht, um die Website-Performance zu optimieren .
Tipp 4: Testen Sie Kurzcodes auf verschiedenen Geräten
Testen Sie Ihre Elementor-Shortcode-Vorlagen unbedingt auf verschiedenen Geräten, um sicherzustellen, dass sie responsiv sind und korrekt angezeigt werden.
Da Shortcodes vorgefertigte Vorlagen verwenden, ist es unerlässlich, genau zu prüfen, ob die Designs auf Mobilgeräten, Tablets und Desktop-Computern gleichermaßen gut dargestellt werden.
Schnelle Fehlerbehebung bei häufigen Elementor-Shortcode-Problemen
Elementor-Shortcodes sind zwar in der Regel eine einfache und effiziente Möglichkeit, Vorlagen wiederzuverwenden, doch manchmal läuft nicht alles wie geplant. Hier finden Sie einige häufige Probleme und schnelle Lösungen zur Fehlerbehebung.
Shortcode wird nicht korrekt angezeigt
Eines der häufigsten Probleme, mit denen Benutzer konfrontiert werden, ist, dass ein Shortcode die Vorlage nicht wie erwartet anzeigt. Falls Ihr Vorlagen-Shortcode im Frontend nicht korrekt dargestellt wird, sollten Sie die folgenden Schritte überprüfen:
- Cache leeren: Caching- Plugins oder der Browser-Cache können verhindern, dass der Shortcode aktualisiert wird. Leeren Sie daher bitte sowohl den WordPress-Cache als auch den Browser-Cache, um zu prüfen, ob das Problem dadurch behoben wird.
- Vorlagenstatus prüfen: Stellen Sie sicher, dass die Vorlage, die Sie anzeigen möchten, gespeichert und veröffentlicht ist. Befindet sie sich im Entwurfsmodus, wird sie im Frontend nicht angezeigt.
- Deaktivieren Sie in Konflikt stehende Plugins: Manchmal können andere Plugins die Funktionalität von Elementor beeinträchtigen. Deaktivieren Sie Ihre anderen Plugins nacheinander, um mögliche Konflikte zu identifizieren, die die Darstellung des Shortcodes verhindern könnten.
Siehe auch: Problembehebung bei animierten Überschriften in Elementor
Vorlagenstilkonflikte
Gelegentlich kann es zu Stilkonflikten zwischen Ihrer Elementor-Vorlage und Ihrem WordPress-Theme kommen, wodurch Elemente fehlerhaft aussehen oder sich unvorhersehbar verhalten. So beheben Sie diese:
- Wechseln Sie zu Elementor-kompatiblen Themes: Stellen Sie sicher, dass Sie ein Theme verwenden, das vollständig mit Elementor kompatibel ist, wie zum Beispiel das Hello Theme, das für die nahtlose Zusammenarbeit mit Elementor entwickelt wurde.
- Theme-Einstellungen überschreiben: Falls das CSS Ihres Themes die Stile von Elementor überschreibt, versuchen Sie, die Funktion „ Benutzerdefiniertes CSS “ von Elementor zu verwenden , um die Stile manuell anzupassen oder Ihr eigenes benutzerdefiniertes CSS hinzuzufügen, um den Konflikt zu beheben.
- Globale Farben & Schriftarten: Elementor verfügt über eigene globale Schriftart- und Farbeinstellungen . Stellen Sie sicher, dass diese in den Website-Einstellungen , damit sie nicht mit den Einstellungen Ihres Themes in Konflikt geraten.
Indem Sie diese häufig auftretenden Probleme direkt angehen, können Sie sicherstellen, dass Ihre Elementor-Shortcodes auf Ihrer gesamten Website einwandfrei funktionieren und Ihr Design konsistent und funktional bleibt!
Fazit: Elementor-Shortcodes meistern für müheloses Design
Elementor-Shortcodes sind ein leistungsstarkes Werkzeug, das Ihren Webdesign-Prozess vereinfachen und optimieren kann. Sobald Sie sich mit der Erstellung und Verwaltung von Shortcodes vertraut gemacht haben, können Sie Ihre besten Vorlagen schnell und einfach auf Ihrer gesamten Website wiederverwenden.
Ob es um das Einbetten von Designs in Beiträge, die Verbesserung von Widgets oder die Verwaltung dynamischer Inhalte geht – Shortcodes bieten unglaubliche Flexibilität und Effizienz. Durch die Beherrschung ihrer Anwendung sparen Sie Zeit, gewährleisten ein einheitliches Design und einen reibungslosen und organisierten Workflow.
Jetzt ist es an der Zeit, loszulegen und mit Elementor-Shortcodes Ihr Website-Design auf die nächste Stufe zu heben!
Häufig gestellte Fragen zur Einrichtung von Elementor-Shortcodes
Was sind benutzerdefinierte Shortcodes in Elementor?
Benutzerdefinierte Shortcodes in Elementor sind kleine Code-Schnipsel in eckigen Klammern, die Sie in jeden Beitrag, jede Seite oder jedes Widget einfügen können, um eine gespeicherte Vorlage oder dynamische Inhalte anzuzeigen. Sie können diese im Bereich „Gespeicherte Vorlagen“ von Elementor erstellen oder einen benutzerdefinierten Shortcode in PHP registrieren.
Wie verwende ich einen Shortcode-Block in WordPress?
Klicken Sie in Gutenberg auf die Schaltfläche „+“, um einen neuen Block hinzuzufügen, suchen Sie nach „Shortcode“ und fügen Sie Ihren Code in den Block ein. Im klassischen Editor wechseln Sie in den Textmodus und fügen den Shortcode an der gewünschten Stelle ein. In Elementor verwenden Sie das Shortcode-Widget aus dem Bedienfeld und fügen den Code in das Inhaltsfeld ein.
Kann ich Shortcodes auch mit der kostenlosen Version von Elementor verwenden?
Ja. Die kostenlose Version von Elementor unterstützt Shortcodes vollständig. Sie können gespeicherte Vorlagen erstellen und Shortcodes dafür generieren, ohne auf Elementor Pro upgraden zu müssen. Pro ist nur erforderlich, wenn Sie dynamische Inhalte, benutzerdefinierte CSS-Steuerelemente oder erweiterte globale Widget-Funktionen nutzen möchten.
Wie erstellen Entwickler benutzerdefinierte Shortcodes mit PHP?
Entwickler erstellen benutzerdefinierte Shortcodes, indem sie eine PHP-Funktion schreiben und diese mit der Funktion `add_shortcode()` in WordPress registrieren. Beispiel: `add_shortcode( 'my_shortcode', 'my_shortcode_function' );` Dadurch wird `[my_shortcode]` als verwendbarer Shortcode auf der gesamten Website registriert . Die Funktion gibt den anzuzeigenden HTML-Code zurück.
Warum funktioniert mein Shortcode nicht richtig?
Die häufigsten Ursachen sind eine fehlende schließende Klammer, eine Vorlage im Entwurfsmodus, ein Caching-Plugin, das eine alte Version der Seite ausliefert, oder ein Plugin-Konflikt mit Elementor. Leeren Sie zunächst Ihren Cache und prüfen Sie anschließend, ob die Vorlage veröffentlicht ist. Falls der Shortcode weiterhin nicht funktioniert, deaktivieren Sie die anderen Plugins nacheinander, um das in Konflikt stehende Plugin zu identifizieren.
