Was sind Elementor Kits?
Elementor Kits sind in Elementor und Elementor Pro* integrierte Design-Vorlagen. Diese kannst du mit ein paar Klicks herunterladen und anschließend mit Inhalten befüllen.
Aktuell gibt es über 90 Design-Vorlagen für jedes erdenkliche Szenario. Von der Band über das Tanz-Studio bis zu Online-Shops wirst du sicher etwas finden, das deinen Geschmack trifft.
Die Elementor Kits werden von den Designern bei Elementor erstellt und sind im Elementor-Abo* enthalten.
Dabei ist wichtig zu wissen, dass du jeden Aspekt der Elementor Kits anpassen kannst:
- Farben können ganz einfach und global für das gesamte Kit geändert werden.
- Schriften sind ebenso global angelegt und können zentral geändert werden.
- einzelne Seiten sind super strukturiert aufgebaut, es ist also sehr einfach die Seitenstruktur zu ändern.
Die Design-Vorlagen sind nur mit Elementor umgesetzt, dh. es ist kein Elementor-Programmier notwendig, um deine Website zum Laufen zu bringen. Kein Child-Theme, kein eigener CSS-Code, einfach nur “raw Elementor”.
Woraus bestehen Elementor Kits?
Hier der Inhalt eines zufällig gewählten Elementor Kits:
Dieses Kit enthält:
- insgesamt vier unterschiedliche Seiten,
- Projekte für dein Portfolio,
- Blog-Beiträge und
- eine 404-Fehlerseite.
Weiters natürlich den Header sowie den Footer und ein Popup.
Die Kits enthalten auch Einstellungen für die Seite, wie globale Farben, globale Schriften usw.
Damit sind alle wichtigen Teile einer Website abgebildet und verfügbar. Weitere Inhaltsseiten erstellst du, indem du die bestehenden Seiten kopierst und mit Inhalten befüllst.
Elementor Pro um bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Elementor Pro unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
Die Vorteile von Elementor Kits
Der größte Vorteil ist der, dass du mithilfe der professionellen Website-Vorlagen sehr rasch deine eigene Website erstellen kannst. Die Designs sind von Grafikern erstellt und haben durchwegs eine hohe Qualität.
Als Benutzer von WordPress kannst du das komplette Kit mit ein paar Klicks importieren und sofort loslegen. Als Webdesigner hast du einen weiteren Vorteil, den ich in meinem Vortrag über Elementor erwähne.
Die Elementor Vorlagen sind 100% responsive, funktionieren also am großen Desktop-Monitor genauso wie auch auf modernen Smartphones.
Aber auch als Website-Entwickler haben Kits einen großen Vorteil: du kannst eigene Kits erstellen auch wieder exportieren. Startest du also mit dem nächsten Website-Projekt, dann startest du nicht von null, sondern kannst auf dem bestehenden Design aufbauen.
Lernen mithilfe von Elementor Kits
Die Elementor Kits sind sehr clean mit Elementor aufgebaut. Es wurden sogar die einzelnen Abschnitte im Navigator von Elementor benannt:
Das erlaubt es dir von den bestehenden und professionell angelegten Elementor Kits* zu lernen.
Sieh dir den Aufbau der einzelnen Seiten an, welche Module wurden verwendet, wie wurden sie angepasst?
Wie verwendest du Elementor Kits?
Stelle sicher, dass du die letzte und aktuelle Version von Elementor verwendest. Anschließend findest du die Elementor Kits im WordPress-Dashboard unter Templates > Kit Library.
Es öffnet sich die Übersicht mit allen Template Kits. Dort kannst du mithilfe der Suche und der Filter nach der von dir gewünschten Vorlage suchen.
Wählst du eine Vorlage aus, kommst du sofort zur Live-Demo. Dort kannst du dir die Vorlage in Ruhe ansehen – und zwar für Mobil, Tablet und Desktop. Die entsprechenden Schalter findest du am oberen Bildschirmrand.
Hast du dich für eine Vorlage entschieden klicke rechts oben auf “Apply Kit”:
Du kannst dann noch auswählen, was genau du importieren willst – vermutlich das gesamte Kit, also passen die Voreinstellungen:
Danach dauert es kurz, während Elementor das Kit inklusive der Einstellungen aber auch der Bilder in deine WordPress-Installation lädt. Und dann? Dann kannst du loslegen und die Seiten bearbeiten!
Fragen zu Elementor Kits
Kann ich mehrere Elementor-Kits auf meiner Website verwenden?
Aktuell ist das noch nicht möglich. Du kannst also nur ein Elementor Kit auf deiner Website einsetzen.
Was ist in den Elementor Kits enthalten?
Ein Elementor-Kit ist eine komplette Design-Vorlage einer Website. Es enthält alle Seitenvorlagen, alle Abschnitte und Templates wie Header sowie Footer, Popups, Einstellungen sowie den Demo-Inhalt, den du selbstverständlich verwenden darfst.
Wenn ich ein Elementor Kit installiere – wird das meine Website zerstören?
Leider ja. Ein Elementor-Kit enthält Inhaltsseiten, Einstellungen usw. Die Einstellungen können das Aussehen deiner Website verändern und die Seiten könnend die Funktionalität deiner Website beeinflussen. Erstelle daher vorab unbedingt ein Backup!
Kann ich auswählen, welche Teile des Elementor Kits ich installieren möchte?
Du kannst wählen, ob du die Vorlagen, den Inhalt oder die Einstellungen importieren möchtest. In Zukunft wird es die Möglichkeit geben noch feiner zu bestimmen, was genau du importieren willst.
Was ist die korrekte Vorgehensweise nach der Installation eines Elementor Kits?
Ein Elementor Kit ist eine vollständige Seite mit allen notwendigen Komponenten. Die Kits sind mit globalen Farben und Schriften erstellt – diese kannst du als Erste bearbeiten. Bearbeite anschließend die Inhalte der einzelnen Seiten.
Bei dem gerade heruntergeladenen Kit funktioniert das Popup nicht, was kann ich tun?
Aktuell werden Popups beim Import nicht automatisch mit den Buttons verbunden. Du musst also den Button bearbeiten und das Popup manuell auswählen.
Wo kann ich mehr über Elementor Kits erfahren?
Willst du mehr über Elementor Kits erfahren, dann liest du dir am besten diesen Blog-Beitrag von Elementor durch (Englisch): Introducing Our New Kits Library*. Oder schau dir das entsprechende Video an.
Erstelle jetzt deine Website mit einem Elementor Kit!
Die meisten der von mir erstellen Websites werden zwar von Grafikern direkt für den Kunden entworfen, aber ich bin von den Elementor Kits sehr angetan. Diese erlauben es rasch und unkompliziert eine Landingpage oder einfache Website zu erstellen.
Die Qualität der Elementor Kits ist durchwegs sehr hoch und ich habe auch den einen oder anderen Trick der Elementor-Entwickler gelernt, wie ich mir ein paar der Kits angesehen habe.
Die Kits eignen sich daher ideal um rasch und unkompliziert einen ersten Entwurf deiner Website online zu haben.
Worauf wartest du? Probiere die neuen Elementor Kits* aus und erstelle im Handumdrehen deine Website!
Hier findest du alle Details zu den Elementor Kits:
14 Antworten
Vielen Dank für die Informationen.
Kann ich bei den Kits auch Seiten hinzufügen, die dann im gleichen Layout des Kits sind? Ich versuche das gerade und finde keine Funktion dafür. Es ist ein free Kit mit 4 Seiten, ich brauche aber mehr Seiten.
Ich habe auch die Elementor Pro Version (falls das hilft)
Danke Dir.
Liebe Vanessa,
klar geht das. Entweder indem du eine bestehende Seite kopierst (z.B. mit diesem Plugin), oder indem du eine neue Seite anlegst, Elementor lädst und dann genau die Seite im Kit-Layout als Vorlage verwendest.
Liebe Grüße,
Michael
Vielen lieben Dank.
Sehr gerne.
Hallo Michael, darf ich die Fotos aus den Elementor Kits auch für Webistes, die im Auftrag eines Kunden erstellt werden, verwenden? Und wenn ja, (wie/wo) müssen die (Bild-) Credits angegeben werden?
Hallo Irene,
laut Elementor-Doku solltest du alle Assets ersetzen:
Please be advised that some of the kits contain third-party images, videos, media, files, audio and other visual components. While we have the right to use them in our Kits Library, we cannot ensure that you may use them in your own product. Therefore, please replace or remove all above assets from your copy of the Kits.
Hallo Michael
Ich verwende das Hello Theme und habe das „Local Services Wireframe 2“ installiert.
Du erwähnst ja „Farben können ganz einfach und global für das gesamte Kit geändert werden.“
Ich habe das Problem, dass wenn ich die globalen Farben einstelle, diese im Bearbeitungsfenster richtig dargestellt werden, aber wenn ich die Webseiten Vorschau öffne sind es wieder die alten Farben.
Danke für diesen Artikel und hoffentlich kannst du mir helfen!
Hallo Florian,
das ist interessant und hatte ich noch nie. Hast du eventuell ein Caching-Plugin, welches die alten Daten zwischenspeichert? Versuche auch einmal unter Elementor > Werkzeuge die CSS&Daten neu zu generieren.
lg Michael
Hallo Michael,
ich habe für eine Seite ein Design Library Kit verwendet bzw. eine Vorlage daraus und diese Seite dann entsprechend mit Inhalten befüllt. Bis dahin hat alles gepasst. Dann habe ich noch weitere Blöcke aus dem Design Library Patterns hinzugefügt und bearbeitet. Im Bearbeiten-Modus sieht alles gut aus, aber wenn ich mir dann die Vorschau der Seite ansehe, sind die ursprünglichen (Kit-Bereiche) irgendwie dunkel, als ob etwas darüber liegen würde. Kannst Du mir bitte weiterhelfen. Danke, LG, Claudia
Hallo liebe Claudia,
das lässt sich per Ferndiagnose leider nicht sagen, was das Problem ist. Eventuell haben einige der neuen Blöcke die globalen Farben überschrieben oder das Theme funkt dazwischen. Welches Theme verwendest du denn, ich empfehle immer Hello von Elementor.
Michael
Hallo lieber Michael,
also ich verwende auch das Hello Theme und habe als Anfängerin zunächst ohne Templates erstmalig meine Website gebaut. Sie ist nicht schlecht geworden, aber da ich sie eh umbauen möchte, da sich mein Dienstleistungs-Portfolio ändert, möchte ich nicht nochmal so viel Zeit mit der Änderung hins. Layout und Texte verbringen und bin auf die Templates von Elementor gestoßen bzw. habe mir das leere Wireframe, ich glaube Local Services (?) von Elementor mal heruntergeladen.
Meine Frage an dich. Muss ich dafür auch ein Child-Theme erstellen, wenn ich diese Wireframe Elementor nutze und teilweise ändere?
Ich freue mich über deine Nachricht.
Lieben Gruß aus Hamburg
Claudia
Hallo liebe Claudia,
nein, du benötigst nicht notwendigerweise ein Child Theme. Die Elementor Kits lassen sich auch ohne Child Theme nutzen und anpassen.
Liebe Grüße, Michael
Lieber Michael,
besten Dank für deine schnelle Info.
Super, also das gilt sogar für die Elementor Kits, die umfangreicher sind als die einzelnen Wireframe-Seiten, richtig?
Liebe Grüße
Claudia
Yes!