Elementor Shortcodes revolutionieren die Art und Weise, wie Sie Inhalte auf Ihrer WordPress-Website erstellen und wiederverwenden. Sind Sie es leid, immer wieder dieselben Abschnitte neu zu gestalten? Mit Shortcodes können Sie Vorlagen in Sekundenschnelle an beliebiger Stelle einfügen. Kein zusätzlicher Code. Keine Zeitverschwendung. Einfach ein klares, einheitliches Design auf jeder Seite.
einrichten Elementor Shortcodes richtig
Kurz gesagt: Einmal erstellen, überall wiederverwenden mit intelligenten Vorlagen
- Erstellen Sie wiederverwendbare Vorlagen und sparen Sie Zeit bei wiederkehrenden Designarbeiten über mehrere Seiten hinweg.
- Kopieren Sie einen einfachen Code-Schnipsel und fügen Sie ihn an beliebiger Stelle in Beiträgen, Seiten oder Widgets ein.
- Passen Sie die Ausgabe mithilfe von Parametern oder CSS an, um eine bessere Kontrolle und Gestaltung zu ermöglichen.
- Sorgen Sie für einheitliche und aktuelle Designs auf der gesamten Website, indem Sie eine einzige Vorlage bearbeiten.
Erste Schritte mit Elementor-Vorlagen und Shortcodes erklärt
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?
Beginnen wir mit einer einfachen Idee: WordPress Elementor-Vorlagen sind wie vorgefertigte Bausteine für Ihre Website.
Ob beeindruckende Homepage, elegante Über-uns-Seite oder übersichtliche Preistabelle – diese Vorlagen erstellen Sie einmal und können sie jederzeit wiederverwenden. Sie müssen nicht jedes Mal von Grund auf neu beginnen.
Um auf diese Vorlagen zuzugreifen, öffnen Sie den Elementor-Editor und klicken Sie auf das Ordnersymbol, das beim Bearbeiten eines Abschnitts angezeigt wird. Dadurch gelangen Sie direkt zur Elementor-Vorlagenbibliothek. Dort finden Sie eine riesige Sammlung vorgefertigter Vorlagen.
Sie können entweder ein Design auswählen, das zu Ihrem Stil passt, oder Ihr eigenes Meisterwerk von Grund auf neu erstellen. Nach dem Speichern können Sie es mit wenigen Klicks aufrufen und an jeder beliebigen Stelle Ihrer Website verwenden.
Es ist, als hättest du dein Lieblingsdesign jederzeit zur Verfügung und könntest es jederzeit einsetzen.
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
Kommen wir nun zu den Elementor-Template-Shortcodes, die das i-Tüpfelchen Ihrer Website-Erstellung darstellen. Mit Shortcodes können Sie diese Templates mit nur einer Codezeile an beliebiger Stelle auf Ihrer Website einfügen.
Angenommen, Sie haben einen ansprechenden Testimonial-Bereich gestaltet und als Vorlage gespeichert. Wenn Sie diesen auf mehreren Seiten verwenden möchten, beispielsweise auf Ihrer Startseite, Ihrer Serviceseite oder Ihrem Blog, müssen Sie ihn nicht jedes Mal manuell hinzufügen.
So funktioniert es: Nach dem Speichern Ihrer Vorlage generiert Elementor automatisch einen Shortcode dafür. Diese Elementor-Shortcodes für WordPress finden Sie im Bereich „Gespeicherte Vorlagen“ des Elementor-Dashboards.
Sobald Sie den Shortcode haben, kopieren Sie ihn einfach, gehen Sie zu einer beliebigen Seite oder einem Beitrag und fügen Sie ihn an der gewünschten Stelle ein. Der entsprechende Abschnitt wird sofort genau so angezeigt, wie Sie ihn gestaltet haben. Ganz einfach und unkompliziert.
Das macht Shortcodes unglaublich leistungsstark, insbesondere wenn man eine Website mit vielen Seiten verwaltet, die einheitlich gestaltet sein müssen.
Ob Call-to-Action-Banner oder Kontaktformular – mit Shortcodes können Sie diese Elemente an beliebiger Stelle platzieren und so für ein einheitliches Design auf Ihrer gesamten Website sorgen.
Es ist eine jener Funktionen, die klein erscheinen mögen, sich aber langfristig als absolut spielentscheidend erweisen
.Problem Elementor hängt im Ladebildschirm fest? So beheben Sie das
Schritt-für-Schritt-Anleitung zum Erstellen von Elementor-Shortcodes für Vorlagen
Elementor-Shortcodes sind eine einfache und effektive Möglichkeit, Ihre Lieblingsdesigns auf Ihrer Website wiederzuverwenden. Folgen Sie einfach diesen Schritten, um Shortcodes mühelos zu erstellen, zu generieren und einzufügen.
Schritt 1: Vorlage erstellen oder auswählen
Als Erstes benötigen Sie eine Vorlage für die Verwendung mit Shortcodes. Falls Sie noch keine haben, erstellen Sie einfach eine neue Vorlage in Elementor, indem Sie zu Vorlagen ⟶ Gespeicherte Vorlagen ⟶ Neu hinzufügen navigieren.
Hier können Sie Ihre Vorlage von Grund auf neu gestalten oder aus der umfangreichen Bibliothek vorgefertigter Designs von Elementor auswählen. Ob Kopfzeile, Fußzeile oder Call-to-Action-Bereich – dies ist das Kerndesign, das Sie auf Ihrer gesamten Website wiederverwenden können.
Wenn Sie mit Ihrem Design zufrieden sind, klicken Sie auf die „Speichern “, um die Vorlage zu speichern.
Finden: Die besten Elementor SaaS WordPress-Themes
Schritt 2: Generieren Sie den Shortcode für die Vorlage
Nachdem Sie Ihre Vorlage erstellt oder ausgewählt haben, generiert Elementor automatisch einen Shortcode für Sie. Sie finden ihn unter Vorlagen ⟶ Gespeicherte Vorlagen in Ihrem WordPress-Dashboard.
Hier sehen Sie eine Liste all Ihrer gespeicherten Vorlagen. Suchen Sie die gewünschte Vorlage. In der Spalte „Shortcode“ finden Sie neben der Vorlage einen kleinen Codeausschnitt.
Kopieren Sie diesen Elementor-Template-Shortcode; er ist der Schlüssel, um Ihr Template an beliebiger Stelle auf Ihrer Website einzufügen.
Weiterführende Informationen: Die besten Elementor-Landingpage-Vorlagen
Schritt 3: Shortcodes in Beiträge oder Seiten einfügen
Und jetzt kommt der spaßige Teil: Platzieren Sie Ihre Vorlage ganz einfach an der gewünschten Stelle! Gehen Sie zu einem beliebigen Beitrag, einer Seite oder einem Widget-Bereich, in dem Sie die Vorlage einfügen möchten. Fügen Sie im WordPress-Editor einfach den kopierten Shortcode ein. So einfach geht's!
Der Vorteil beim Einbetten von Elementor-Vorlagen mit Shortcodes liegt in der Flexibilität; sie funktionieren überall!
verwenden klassischen Editor, Gutenberg, der Shortcode zeigt Ihre Vorlage nahtlos und genau so an, wie Sie sie gestaltet haben.
Egal ob Sie sie in Blogbeiträge, Seitenleisten oder Landingpages einfügen, Ihr Design wird jedes Mal perfekt angezeigt.
Siehe auch: Wie man Figma in Elementor konvertiert
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
Bei der Verwendung von Elementor-Shortcodes können Sie Shortcode-Parameter hinzufügen, um deren Ausgabe anzupassen.
beispielsweiseein Kontaktformular eines Drittanbieters einbetten, können Sie den Shortcode anpassen, um die Formularfelder, das Layout oder sogar die Formularaktion zu ändern. So fügen Sie das Formular ganz einfach nahtlos in Ihr Design ein.
Um Elementor-Shortcodes weiter anzupassen, können Sie den Elementor-Shortcode auch direkt bearbeiten, indem Sie den Code selbst anpassen.
Dies ist besonders nützlich, wenn Sie komplexere dynamische Inhalte wie einen Produkt-Slider oder eine Videogalerie einbinden möchten. Sie können spezifische Attribute hinzufügen, um die Darstellung, den Stil oder das Verhalten der Inhalte zu steuern.
Finden Sie es heraus: Elementor vs. SeedProd
Erweiterte Anpassungsmöglichkeiten mit benutzerdefiniertem CSS
Für noch komplexere Funktionen können Sie benutzerdefiniertes CSS in Kombination mit Elementor Pro verwenden, um die Ausgabe Ihrer Shortcodes zu gestalten.
Egal ob Sie Abstände anpassen, Farben ändern oder das Layout eines eingebetteten Formulars individualisieren – mit CSS haben Sie die volle Kontrolle darüber, wie Ihr Elementor Page Builder Inhalte anzeigt.
beispielsweisean, Sie betten ein Video mithilfe eines Shortcode-Widgets ein. Durch die Anwendung von benutzerdefiniertem CSS können Sie die Größe des Videoplayers anpassen, Rahmen hinzufügen oder sogar Hover-Effekte festlegen, um ein interaktives Erlebnis zu schaffen.
Durch diese hohe Anpassungsstufe wird sichergestellt, dass Ihre Elementor-Vorlage genau so aussieht, wie Sie es wünschen.
Wichtig: Migration von WPBakery zu Elementor
So verwenden Sie das Shortcode-Widget in Elementor
Wenn Sie schnell Shortcodes in beliebige Bereiche Ihrer WordPress-Website einbinden möchten, ist das Shortcode-Widget in Elementor genau das Richtige für Sie. Es ist einfach zu bedienen und ermöglicht es Ihnen, Shortcodes an jeder beliebigen Stelle Ihres Designs zu platzieren, ohne den Code bearbeiten zu müssen.
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
Mit Elementor-Shortcodes können Sie benutzerdefinierte Vorlagen an beliebiger Stelle auf Ihrer Website einfügen, sodass Sie einheitliche Designs beibehalten und Ihren Arbeitsablauf optimieren können.
Einbetten von Vorlagen in Blogbeiträge
Eine der besten Anwendungsmöglichkeiten für Shortcodes ist das direkte Einbetten von Vorlagen in Ihre Blogbeiträge. Angenommen, Sie haben einen Call-to-Action-Bereich oder eine besondere Ankündigung, die Sie in mehreren Beiträgen anzeigen möchten.
Anstatt das Design jedes Mal neu zu erstellen, können Sie einfach den Elementor-Template-Shortcode in Ihre Beiträge einfügen. Das sorgt für ein einheitliches Erscheinungsbild und spart Zeit, da Sie die Designelemente nahtlos in mehreren Blogbeiträgen wiederverwenden können.
Lesen Sie: Benutzerdefinierte Theme-Entwicklung vs. Elementor
Hinzufügen von Vorlagen zu Widgets und Seitenleisten
Widgets und Seitenleisten eignen sich hervorragend, um wiederverwendbare Elemente wie Kontaktformulare, Social-Media-Icons und Werbebanner einzufügen. Mit Elementor-Shortcodes können Sie Ihre gespeicherten Vorlagen ganz einfach und problemlos in diesen Bereichen platzieren.
Kopieren Sie einfach den Shortcode und fügen Sie ihn in den Widget-Editor ein, und Ihr Design erscheint sofort in der Seitenleiste oder einem anderen Widget-Bereich, wobei das gleiche Erscheinungsbild auf Ihrer gesamten Website erhalten bleibt.
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.
Erfahren Sie mehr: Sicherheitslücken in Elementor
Tipps zum Verwalten mehrerer Shortcodes in Elementor
Wenn Sie Elementor-Shortcodes häufiger verwenden, kann die Verwaltung mehrerer Shortcodes etwas knifflig werden. Hier sind ein paar Tipps, damit alles übersichtlich bleibt und reibungslos funktioniert.
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.
Wissenswertes: Die besten Elementor-Alternativen
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.
Lesen Sie auch: So beheben Sie das Problem, dass Elementor-Symbole nicht angezeigt werden
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 zu optimieren die Website-Performance.
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.
Siehe auch: So beheben Sie das Problem, dass das Widget-Panel in Elementor nicht geladen wird
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: Ihres Themes das CSS die Stile von Elementor überschreibt, versuchen Sie, „Benutzerdefiniertes CSS“ , 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 im Elementor-Plugin?
Benutzerdefinierte Shortcodes sind kleine Code-Schnipsel in eckigen Klammern. Sie ermöglichen es Ihnen, mit dem Elementor-Builder Inhalte an beliebiger Stelle einzufügen. Diese Anleitung erklärt, wie Sie sie ohne zusätzlichen Aufwand für bestimmte Funktionen nutzen können.
Wie verwende ich einen Shortcode-Block in WordPress?
Öffnen Sie eine neue Seite, fügen Sie im Gutenberg- oder klassischen Editor einen Shortcode-Block hinzu und fügen Sie den Code ein. Alternativ können Sie in Elementor ein Texteditor-Widget verwenden, um Inhalte einzufügen und sofort eine Vorschau anzuzeigen.
Kann ich Shortcodes auch mit der kostenlosen Version von Elementor verwenden?
Ja, die kostenlose Version unterstützt Shortcodes. Sie können diese mit Elementor-Add-ons und globalen Widgets kombinieren, um leistungsstärkere Funktionen freizuschalten, ohne dass fortgeschrittene Tools erforderlich sind.
Wie erstellen Entwickler benutzerdefinierte Shortcodes mit PHP?
Entwickler schreiben eine PHP-Funktion, registrieren sie und aktivieren sie in WordPress. Dadurch werden dynamische Inhalte wie Suchformulare oder Suchfelder basierend auf bestimmten Kategorien oder Benutzeraktionen ermöglicht.
Warum funktioniert mein Shortcode nicht richtig?
Prüfen Sie, ob das Plugin installiert und aktiviert ist. Suchen Sie nach Fehlern im Code, defekten Links oder fehlenden Klammern. Sehen Sie sich Änderungen immer in der Vorschau an und vermeiden Sie es, Shortcodes in Kommentarbereichen einzufügen.
