Advertisement
  1. Web Design
  2. Elementor

Wie man Elementor Vorlagen verwendet: Eine Einführung

Scroll to top
Read Time: 9 min

German (Deutsch) translation by Ahmet Öztürk (you can also view the original English article)

Es gibt einen Grund, warum sich so viele Menschen den WordPress Page Builder-Plugins zugewandt haben: Sie machen die Erstellung selbst der komplexesten Seitenlayouts und Funktionen zu einem leichten Kinderspiel.

Es ist also kein Wunder, dass Elementor zum beliebtesten Page Builder auf dem Markt geworden ist. Es vereinfacht nicht nur die Erstellung von Inhalten, das Plugin bietet auch einige überzeugende Extras. Diese Funktionen sorgen für eine angenehmere und bessere Benutzererfahrung. 

In diesen Artikel lernen Sie unter anderem, wie Sie Elementor Vorlagen verwenden, wie man Footer mit Elementor erstellen kann und eine Elementor Farbpalette bedient, um schnell schöne Seiten für Ihre WordPress-Webseite zu gestalten.

Zu den größten Vorteilen gehört die Einbeziehung von Elementor Templates, vorgefertigten Seitenvorlagen, die Sie in Ihre Website importieren können. Von dort aus können Sie diese nach Ihren Wünschen bearbeiten. Ändern Sie Text, Farben, Bilder - und entfernen Sie sogar Elemente, die Sie nicht benötigen. Praktisch jeder Aspekt kann angepasst werden.

Heute zeigen wir Ihnen, wie Sie Elementor Templates für Ihre WordPress-Webseite verwenden können. Lassen Sie uns beginnen!

Was sind die Vorteile von Elementor Templates?

Selbst die besten WordPress Page Builder erfordern einen gewissen Aufwand, um alles richtig zu machen. Ein professionell aussehendes Layout mit attraktiven Designelementen zu erstellen ist möglich - aber es braucht Zeit.

Elementor-Vorlagen nehmen Ihnen die ganze zeitraubende Arbeit ab. Mit nur wenigen Klicks haben Sie alles, was Sie brauchen, um eine schöne Webseite zu erstellen.

Vorlagen gibt es in einer Vielzahl von Stilen und einige enthalten sogar integrierte Funktionen. Beachten Sie nur, dass für einige das Elementor Pro Plugin erforderlich ist, im Gegensatz zu der kostenlosen Version.

Zudem sind in letzter Zeit auch Elementor Vorlagen-Kits auf den Markt gekommen. Kits sind eine Sammlung ähnlich gestalteter Vorlagen, die alle für eine Website zusammen verwendet werden können. Das bedeutet, dass eine ganze Website schneller und einfacher erstellt werden kann.

Sie können Ihr Projekt auch gleich in Angriff nehmen, denn kostenlose Elementor-Vorlagen sind im Lieferumfang des Plugins enthalten (sie sind auch ohne das Plugin erhältlich). Darüber hinaus gibt es eine Reihe von kostenlosen und kommerziellen Vorlagen, die an anderer Stelle im Web verfügbar sind.

Finden Sie Elementor Vorlagen auf Envato Elements 

Envato Elements bietet Ihnen Zugang zu einer großen Auswahl an hochwertigen Elementor Template Kits. Der Einstieg ist ganz einfach! Finden Sie Ihre Lieblingsvorlagen, laden Sie sie herunter und importieren Sie sie mit Hilfe des kostenlosen Template Kit - Import Plugins.

Oder Sie installieren das kostenlose Envato Elements WordPress Plugin, um Vorlagen zu durchsuchen und zu importieren, ohne WordPress verlassen zu müssen.

Mit beiden Methoden können Sie in kürzester Zeit mit dem Aufbau Ihrer beeindruckenden Website beginnen.

Envato Elements WordPress PluginEnvato Elements WordPress PluginEnvato Elements WordPress Plugin

1. Elementor installieren und aktivieren

Elementor-Vorlagen klingen ziemlich toll, oder? Die einzige technische Voraussetzung, um loszulegen, ist die Installation und Aktivierung der kostenlosen Version des Elementor Page Builder Plugins. Außerdem benötigen Sie ein kostenloses persönliches Konto bei Elementor, zu dem wir später kommen.

Zunächst aber installieren wir das Plugin:

Elementor Page Builder installieren und aktivieren

Innerhalb von WordPress besuchen Sie Plugins > Neu hinzufügen.

Geben Sie in der Suchleiste Elementor Page Builder ein. Klicken Sie auf die Schaltfläche Jetzt installieren.

WordPress Bildschirm Plugins hinzufügen - Elementor Page BuilderWordPress Bildschirm Plugins hinzufügen - Elementor Page BuilderWordPress Bildschirm Plugins hinzufügen - Elementor Page Builder

Wenn das Plugin installiert ist, klicken Sie auf Aktivieren.

Sie haben alles vorbereitet! Jetzt ist es an der Zeit, die Elementor-Vorlagen zum Einsatz zu bringen.

2. Fügen Sie eine Elementor-Vorlage zu Ihrer Seite hinzu

Für diesen Schritt müssen Sie eine WordPress-Seite auswählen oder erstellen, auf der Sie eine Elementor-Vorlage einfügen möchten. In unserem Beispiel erstellen wir eine neue Seite mit dem Namen "Über uns".

Finden Sie Ihre Seite

Navigieren Sie im WordPress Dashboard zu Ihrer Seite, indem Sie Seiten > Alle Seiten aufrufen. Klicken Sie dann auf die Seite, die Sie bearbeiten möchten.

Bearbeiten mit Elementor

Klicken Sie im Editor auf die Schaltfläche Bearbeiten mit Elementor oben links auf dem Bildschirm, um den Page Builder zu starten.

Mit Elementor bearbeiten SchaltflächeMit Elementor bearbeiten SchaltflächeMit Elementor bearbeiten Schaltfläche

Tipp: Wenn Sie den WordPress Classic Editor verwenden, erscheint die Schaltfläche Bearbeiten mit Elementor direkt unter dem Seitentitel.

Die Elementor Vorlagen Bibliothek öffnen

Sobald Sie sich im Elementor Page Builder befinden, werden Sie feststellen, dass es eine Menge Einstellungen gibt. Aber für unsere Zwecke konzentrieren wir uns ausschließlich auf die Box in der Mitte des Bildschirms.

Das Feld, das von einem gestrichelten Rahmen umgeben ist, enthält zwei Symbole: ein rosa Pluszeichen und einen grauen Ordner. Wenn Sie mit dem Mauszeiger über das graue Ordnersymbol fahren, sehen Sie einen Tooltip: Vorlage hinzufügen.

Elementor Schaltfläche Vorlage hinzufügenElementor Schaltfläche Vorlage hinzufügenElementor Schaltfläche Vorlage hinzufügen

Klicken Sie auf das Symbol, um die Elementor Vorlagen Bibliothek zu öffnen.

Elementor VorlagenbibliothekElementor VorlagenbibliothekElementor Vorlagenbibliothek

Nun haben wir eine Reihe von Gestaltungsmöglichkeiten geschaffen.

Importieren einer Elementor-Vorlage aus der Bibliothek

Es gibt eine Reihe von kostenlosen Elementor-Vorlagen, aus denen Sie wählen können. Darüber hinaus haben Nutzer der Pro-Version von Elementor auch Zugang zu einer Vielzahl exklusiver Vorlagen. Und vergessen Sie nicht, dass Sie sich das neueste Angebot der Elementor Template Kits auf Envato Elements ansehen können.

Hier zeige ich Ihnen, wie Sie eine kostenlose Elementor-Vorlage direkt aus der Bibliothek importieren und wie Sie eine heruntergeladene Vorlage als ZIP-Datei importieren können.

Die Elementor Vorlagenbibliothek bietet eine große Auswahl, also schränken wir sie ein wenig ein. Wenn Sie nach dem Begriff Über suchen, sehen Sie nur die Elementor-Vorlagen, die auf unsere Seite zutreffen.

Elementor Template Library SuchergebnisseElementor Template Library SuchergebnisseElementor Template Library Suchergebnisse

Scrollen wir durch die Ergebnisse, finden wir die perfekte kostenlose Elementor-Vorlage für unsere Bedürfnisse. Wenn Sie darauf klicken, können Sie es sich näher ansehen.

Elementor Template Preview ScreenElementor Template Preview ScreenElementor Template Preview Screen

Das sieht nach einer guten Lösung aus! Um es zu verwenden, klicken Sie auf die grüne Schaltfläche Einfügen oben rechts auf dem Bildschirm.

Ein kostenloses Elementor-Konto erstellen

An dieser Stelle werden Sie aufgefordert, sich für ein kostenloses persönliches Konto bei Elementor anzumelden. Folgen Sie dem Anmeldeprozess und sobald Sie Ihr Konto bestätigt haben, können Sie es mit Ihrer Website verbinden.

Mit der Verbindung Ihres neuen Elementor-Kontos mit Ihrer Website ist der Importvorgang abgeschlossen. Jetzt wird Ihre Elementor-Vorlage auf Ihrer Seite angezeigt.

Elementor-Vorlage als ZIP-Datei hochladen

Alternativ, wenn Sie eine Vorlage von Envato Elements heruntergeladen haben, erfordert der Import einige zusätzliche Schritte.

Zunächst müssen Sie das kostenlose Template Kit - Import Plugin von Envato installieren und aktivieren. Gehen Sie in WordPress auf Plugins > Neu hinzufügen.

Geben Sie in der Suchleiste Template Kit - Import ein. Klicken Sie auf die Schaltfläche Jetzt installieren 

WordPress Add Plugins Screen - Template Kit EditorWordPress Add Plugins Screen - Template Kit EditorWordPress Add Plugins Screen - Template Kit Editor

Wenn das Plugin installiert ist, klicken Sie auf Aktivieren.

Als nächstes müssen Sie Ihre Vorlage über das Plugin Template Kit - Import auf Ihre Website hochladen.

Navigieren Sie innerhalb von WordPress zu Werkzeuge > Template Kit. Klicken Sie auf den Bildschirmbereich Template Kit ZIP-Datei hochladen.

Envato Installed Template Kits ScreenEnvato Installed Template Kits ScreenEnvato Installed Template Kits Screen

Finden Sie die ZIP-Datei des Elementor-Vorlagenkits auf Ihrem Gerät und laden Sie sie auf Ihre Website hoch.

Nach der erfolgreichen Installation Ihres Elementor-Vorlagenkits sehen Sie eine Liste der neuen Vorlagen, die Sie verwenden können.

Envato Template Kit nach der InstallationEnvato Template Kit nach der InstallationEnvato Template Kit nach der Installation

Mit Ihrem neuen Elementor Template Kit können Sie nun damit beginnen, Vorlagen zu Ihrer Seite hinzuzufügen!

Besuchen Sie die Seite, die Sie bearbeiten möchten, und folgen Sie demselben Prozess, den wir zuvor für die Bearbeitung mit Elementor beschrieben haben.

Sie werden feststellen, dass sich der Bearbeitungsbildschirm von Elementor leicht verändert hat. Das Envato - Template Kit Import Plugin hat jetzt ein grünes Blattsymbol hinzugefügt. Bewegen Sie den Mauszeiger über das Symbol und Sie sehen einen Tooltip: Envato Elements.

Editor Envato Elements ButtonEditor Envato Elements ButtonEditor Envato Elements Button

Klicken Sie auf das Symbol, um Ihre installierten Template Kits zu öffnen.

Darin sehen Sie eine Auflistung der Elementor Template Kits, die Sie auf Ihrer Website installiert haben. Klicken Sie auf das Kit, das Sie verwenden möchten.

Installierte Template Kits BildschirmInstallierte Template Kits BildschirmInstallierte Template Kits Bildschirm

Zum Schluss fügen Sie die gewünschte Vorlage in Ihre Seite ein.

Template Kit Listing ScreenTemplate Kit Listing ScreenTemplate Kit Listing Screen

Nun haben Sie eine schöne neue Seite, die Sie anpassen können!

Ein Elementor Vorlagenkit in eine Seite importiertEin Elementor Vorlagenkit in eine Seite importiertEin Elementor Vorlagenkit in eine Seite importiert

3. Elementor Vorlage anpassen

Jetzt ist es an der Zeit, diese Vorlage nach Ihren Wünschen zu gestalten. Das Tolle an Elementor-Vorlagen ist, dass Sie jedes Element nach Belieben anpassen können.

Um loszulegen, klicken Sie auf ein Element, das Sie bearbeiten möchten. Von dort aus können Sie den Inhalt direkt im Element selbst bearbeiten. Oder verwenden Sie die Symbolleiste auf der linken Seite des Bildschirms, um Stil- und Layoutänderungen vorzunehmen.

Ändern Sie das Layout

Wir verwenden das Standard-Theme Twenty Twenty von WordPress. Und beim Importieren unserer Vorlage ist mir aufgefallen, dass die Breite des Inhalts nicht so ist, wie wir sie gerne hätten. Zum Glück lässt sich das mit Elementor leicht ändern.

Mit einem Klick auf das gepunktete Symbol Bereich bearbeiten oben in der Vorlage können wir ein Layout mit voller Breite aktivieren. Beachten Sie, dass dieser Vorgang für jeden importierten Abschnitt der Seite wiederholt werden muss.

Ein Layout in Elementor bearbeitenEin Layout in Elementor bearbeitenEin Layout in Elementor bearbeiten

Farben bearbeiten

Die pinke Hintergrundüberlagerung in dem Abschnitt ist nicht die beste Lösung für unser Theme. Aber mit ein paar Klicks lässt sich das in ein angenehmeres Format ändern.

Farben bearbeiten in ElementorFarben bearbeiten in ElementorFarben bearbeiten in Elementor

Alle Dinge anpassen

Es gibt wirklich keine Grenzen, was die Anpassung von Elementor-Vorlagen anbelangt. Wenn Sie auf ein Element klicken, können Sie den Inhalt, das Aussehen und das Layout bearbeiten. Sie können auch neue Elemente auf Ihre Seite ziehen.

Inhalt bearbeiten in ElementorInhalt bearbeiten in ElementorInhalt bearbeiten in Elementor

Speichern Sie Ihre Änderungen

Wenn Sie mit dem Ergebnis Ihrer Arbeit zufrieden sind, klicken Sie auf die grüne Schaltfläche Aktualisieren im unteren linken Teil des Bildschirms. Dadurch wird Ihre individuell erstellte Seite gespeichert.

Tipps zur Verwendung von Elementor-Vorlagen

1. Templates können an Ihre Website angepasst werden

Bei der Suche nach Elementor-Vorlagen werden Sie vielleicht von einem bestimmten Designelement oder sogar der Farbgebung abgeschreckt. Kein Grund zur Sorge! Diese Elemente können im Elementor Page Builder leicht geändert werden, damit sie besser zu Ihrer Website passen.

2. Sie müssen eine ganze Website entwerfen? Verwenden Sie Vorlagen-Kits

Konsistenz ist einer der Schlüssel zu einem großartigen Design. Die Elementor Vorlagen-Kits bieten einen passenden Satz von Vorlagen - perfekt für die Verwendung auf Ihrer gesamten Website. Verwenden Sie sie, um Ihrer Website sofort ein einheitliches Aussehen zu verleihen. Schauen Sie sich das neueste Angebot der Elementor Template Kits auf Envato Elements an und laden Sie mit Ihrem Abonnement so viele herunter, wie Sie möchten.

Envato Elements Template KitsEnvato Elements Template KitsEnvato Elements Template Kits
Envato Elements Vorlagen-Kits

3. Verbessern Sie Ihre bestehende Website

Elementor Vorlagen sind nicht nur für neue Webseitenprojekte geeignet. Tatsächlich können sie auch ein effektives Mittel sein, um bestehende Websites aufzupeppen. Verwenden Sie Vorlagen, um bei Bedarf ein ansprechendes Aussehen und neue Funktionen hinzuzufügen. Das ist eine großartige Möglichkeit, einer älteren Website neues Leben einzuhauchen.

4. Verwenden Sie Elementor-Blöcke für kleinere Aufgaben

Manchmal ist eine ganzseitige Vorlage vielleicht mehr, als Sie brauchen. Elementor Blöcke sind eine großartige Alternative. Das sind kleinere, individuelle Abschnitte, mit denen Sie Ihre Seite aufpeppen können. Und sie sind direkt in die Elementor Vorlagenbibliothek integriert.

5. Mischen und kombinieren Sie Blöcke, um Ihre eigenen Seiten zu erstellen

Um Ihren Seiten eine einzigartige Note zu verleihen, verwenden Sie mehrere Elementor-Blöcke. Sie eignen sich hervorragend für Seitenabschnitte, mit denen Sie eine natürliche Trennung der Inhalte schaffen können. Sie können die Blöcke mischen, anpassen und auf Ihre Bedürfnisse abstimmen.

Benutzerdefinierte Seiten mit minimalem Aufwand erstellen

Wenn Sie das nächste Mal eine ganz individuelle Seiten für Ihre WordPress-Website erstellen möchten, sollten Sie die Elementor-Vorlagen ausprobieren. Sie bieten eine einfache Möglichkeit, mit nur wenigen Klicks sowohl Schönheit als auch Funktionalität hinzuzufügen.

Und Dank der Möglichkeit, jedes einzelne Element zu bearbeiten, können Sie eine Elementor-Vorlage so anpassen, dass sie Ihrem Stil entspricht. Das Endergebnis wird eine Seite sein, die so aussieht, als wäre sie nur für Sie erstellt worden.

Weitere Elementor Tutorials und Ressourcen

Wir haben eine wachsende Sammlung von Elementor-Ressourcen bei Tuts+ und auf dem Envato-Blog; schauen Sie mal rein!

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.