Elementor-Sektionsvorlagen

Vorlagen-Bibliothek in Elementor WordPress
Vorlagenverwaltung in der Elementor-Bibliothek. Fügen Sie Ihre gespeicherten Designs ein oder zeigen Sie eine Vorschau an.

Inhaltsverzeichnis

Elementor ermöglicht es uns, jede Sektion als Vorlage zu speichern, die wir später in anderen Dokumenten unserer Website so oft wie gewünscht verwenden oder exportieren können, um sie in anderen Dokumenten zu nutzen. Wir können diese Vorlagen unabhängig oder global verwenden. Bei einer unabhängigen Verwendung wirkt sich eine Änderung nicht auf die übrigen Instanzen derselben Vorlage aus. Bei einer globalen Verwendung (unter Nutzung des Widgets Template) werden bei einer Änderung der Vorlage auch alle ihre Instanzen angepasst.

Sektionen als Vorlagen speichern

  1. Wählen Sie die Sektion aus, die Sie speichern möchten, und machen Sie einen Rechtsklick auf Elementor-Sektions-Handle
  2. Klicken Sie im Kontextmenü auf Als Vorlage speichern.
  3. Geben Sie ihr einen Namen und klicken Sie auf Speichern.
Sektion als Vorlage speichern

So fügen Sie eine gespeicherte Sektionsvorlage in ein Dokument ein

Sie können die Vorlagen, die Sie gespeichert haben, in jedem Dokument Ihrer Website verwenden, sogar in Beiträgen mittels des Shortcodes der Vorlage. Wir schauen uns an, wie das geht.

Unabhängige Vorlage aus der Bibliothek einfügen

Wenn wir die Vorlage auf diese Weise einfügen, ist sie unabhängig von der globalen Vorlage, und Änderungen, die wir an ihr vornehmen, wirken sich nicht auf die übrigen Instanzen aus.

  1. Klicken Sie auf das Icon Template hinzufügen Template hinzufügen im Elementor-Editor.
  2. Klicken Sie im Pop-up-Fenster auf den Tab Meine Templates.
  3. Sie sehen eine Liste mit allen Vorlagen, die Sie gespeichert haben; klicken Sie auf die Schaltfläche Einfügen der Vorlage, die Sie verwenden möchten. Wenn Sie nicht sicher sind, ob es die richtige Vorlage ist, können Sie vor dem Einfügen auf Vorschau Vorschau klicken.
  4. Es erscheint ein kleines Pop-up-Fenster Dokumenteinstellungen importieren. Da es sich um eine Sektionsvorlage handelt, klicken Sie in diesem Fall am besten auf Nein.

Sektionsvorlage als globale Vorlage einfügen

Um eine Sektionsvorlage, die wir zuvor gespeichert haben, als globale Vorlage einzufügen, müssen wir dies über das Widget Template tun. Bitte beachten Sie, dass bei einer Sektionsvorlage, die über das Widget Template in eine andere Sektion eingefügt wird, beide Sektionen all ihre Konfigurationen beibehalten.

  1. Suchen Sie im Elementor-Editor nach dem Widget Template und ziehen Sie es in eine Sektion oder in das Feld Widget hierher ziehen.
  2. Klicken Sie auf den Selektor Choose Template und geben Sie den Namen oder einen Teil des Namens der Vorlage ein, die Sie einfügen möchten; sobald Sie diese im Selektor sehen, klicken Sie darauf.

Vorlage in einen Blogbeitrag einfügen

Wir können eine Sektionsvorlage in einen Blogbeitrag mit dem WordPress-Block-Editor Gutenberg einfügen, obwohl meine Empfehlung lautet, Elementor nicht in Blogbeiträgen zu verwenden. Warum? Weil Elementor heute für Sie der beste Page Builder sein mag, man aber nicht weiß, was die Zukunft bringt. Früher habe ich WPBakery (Visual Composer) benutzt, was ich damals fantastisch fand, aber im Vergleich zu Elementor kommt es mir heute wie eine „Gurke“ vor.

Stellen Sie sich vor, in Zukunft erscheint ein neuer Page Builder, der Elementor übertrifft, zum Beispiel Gutenberg, und Sie möchten Ihre Website mit diesem neuen Builder erneuern. Die Seiten Ihrer Website zu erneuern, wäre eine relativ überschaubare Arbeit, aber hunderte von Blog-Posts zu erneuern, wäre undurchführbar oder viel zu mühsam. Diese Posts sind bereits gut positioniert, und es geht nicht darum, sie zu verlieren. Daher ist meine Empfehlung, für Blogbeiträge nur Gutenberg zu verwenden.

  1. Wählen Sie im WordPress-Backend Templates > Gespeicherte Templates.
  2. Klicken Sie auf den Shortcode der Vorlage, die Sie verwenden möchten, und kopieren Sie diesen Code dann mit STRG + C (Windows) | CMD + C (Mac) oder per Rechtsklick > Kopieren (Windows) | CMD + Klick > Kopieren (Mac).
  3. Öffnen Sie nun den Beitrag, in den Sie die Vorlage einfügen möchten.
  4. Verwenden Sie den Gutenberg-Block Shortcode und fügen Sie den zuvor kopierten Code dort ein.

Sektionsvorlage ändern

Über den Elementor-Editor

Alle Änderungen, die Sie an einer Vorlage vornehmen, werden in allen ihren Instanzen übernommen.

  1. Klicken Sie auf den Vorlagenblock, den Sie bearbeiten möchten.
  2. Klicken Sie nun im Tab Inhalt der Konfigurationsspalte auf die Schaltfläche Vorlage bearbeiten

Über das Menü Vorlagen

  1. Wählen Sie im WordPress-Backend Templates > Gespeicherte Templates.
  2. Bewegen Sie den Cursor über die Vorlage, die Sie bearbeiten möchten, und klicken Sie auf Mit Elementor bearbeiten.

So exportieren Sie eine Vorlage

Wir können Vorlagen (zur Verwendung in einem anderen Webprojekt) im Format .json mit allen enthaltenen Elementen exportieren, sogar mit Bildern und anderen Elementen aus der Mediathek. Beachten Sie jedoch, dass diese Medien nicht in der .json-Datei (einer leichten Datei, die nur aus XML-ähnlichem Code besteht) eingebettet sind, sondern im Code nur über eine URL referenziert werden. Erst beim Importieren der Vorlage wird diese Datei (Bild, Video usw.) in unserer Mediathek gespeichert. Das bedeutet: Wenn das exportierte Medium an der Quelle gelöscht wird, kann es nicht importiert werden.

Vorlage aus Gespeicherten Vorlagen exportieren

  1. Wählen Sie im WordPress-Backend Templates > Gespeicherte Templates.
  2. Bewegen Sie den Cursor über die Vorlage, die Sie exportieren möchten, und klicken Sie auf Vorlage exportieren.
  3. Wählen Sie im Pop-up-Fenster Speichern unter den Speicherort aus und drücken Sie die Schaltfläche Speichern.

Vorlagen aus dem Elementor-Editor exportieren

  1. Klicken Sie auf das Icon Template hinzufügen Template hinzufügen im Elementor-Editor.
  2. Klicken Sie im Pop-up-Fenster auf den Tab Meine Templates.
  3. Sie sehen eine Liste mit allen Vorlagen, die Sie gespeichert haben; klicken Sie auf die Schaltfläche Einfügen der Vorlage, die Sie verwenden möchten. Wenn Sie nicht sicher sind, ob es die richtige Vorlage ist, können Sie vor dem Einfügen auf Vorschau Vorschau klicken.

So importieren Sie eine Vorlage

Wir können Vorlagen in unser Projekt importieren; diese müssen im Format .json vorliegen. Wenn wir eine Vorlage importieren, die Mediendateien wie Bilder, Videos, PDF-Dateien usw. enthält, werden diese Dateien in unsere eigene WordPress-Mediathek hochgeladen. Nachfolgend sehen Sie ein Beispiel für den Code einer echten .json-Datei; es ist sehr einfach: eine Sektion mit einer Spalte und einem Widget mit einem Bild. Ich habe die URL oder den Link zum Bild fett hervorgehoben.

{"content":[{"id":"63358d39","settings":[],"elements":[{"id":"78eb379f","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"13d2289b","settings":{"image":{"url":"https://elementor.lacolmenatecnologica.com/wp-content/uploads/2021/07/la-colmena-tecnologica-logo.png","id":974,"alt":"","source":"library"}},"elements":[],"isInner":false,"widgetType":"image","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"}],"page_settings":[],"version":"0.4","title":"Plantilla la Colmena","type":"section"}

Wie Sie sehen, werden in der .json-Datei keine Medien (Bilder, Videos, …) gespeichert, sondern Links zu ihrem Speicherort im Ursprungsprojekt, von dem sie exportiert wurden. Wenn dieses Bild aus dem Ursprungsprojekt gelöscht wird, wird das Bild beim Importieren dieser Vorlage in ein anderes Projekt nicht mit importiert.

Eine Vorlage aus Gespeicherten Vorlagen importieren

  1. Wählen Sie im WordPress-Backend Templates > Gespeicherte Templates.
  2. Klicken Sie im oberen Bereich auf die Schaltfläche Templates importieren.
  3. Klicken Sie auf die Schaltfläche Datei auswählen und wählen Sie im Pop-up-Fenster Öffnen die .json-Datei aus, die Sie importieren möchten, und klicken Sie auf die Schaltfläche Öffnen.
  4. Klicken Sie nun auf die Schaltfläche Jetzt importieren.

Vorlage aus dem Elementor-Editor importieren

  1. Klicken Sie auf das Icon Template hinzufügen Template hinzufügen im Elementor-Editor.
  2. Klicken Sie im Pop-up-Fenster auf den Tab Meine Templates.
  3. Klicken Sie im oberen Bereich auf das Icon Template importieren Template importieren.
  4. Klicken Sie auf die Schaltfläche DATEI AUSWÄHLEN und wählen Sie im Pop-up-Fenster Öffnen die .json-Datei aus, die Sie importieren möchten, und klicken Sie auf die Schaltfläche Öffnen.
  5. Nun sollten Sie diese neue Vorlage in der Liste zusammen mit allen anderen Vorlagen sehen; klicken Sie auf die Schaltfläche Einfügen der Vorlage, um sie einzufügen.