Eine Einf\u00fchrung in WordPress Elementor<\/h2>\n
In den Anf\u00e4ngen des Internets erforderte die Erstellung einer Webseite fortgeschrittene Kenntnisse in der Webentwicklung und im Design<\/a> oder den Zugang zu einem spezialisierten Team. Das bedeutete, dass die Erstellung einer Webseite zeitaufw\u00e4ndig, oft frustrierend und potenziell teuer war.<\/p>\n Dank der modernen Page Builder<\/a> kannst du heute auch ohne Fachkenntnisse eine professionell gestaltete<\/a>, leistungsstarke Webseite<\/a> erstellen<\/a>. Wenn deine Webseite einmal steht, kannst du jederzeit schnell und einfach Inhalte hinzuf\u00fcgen oder das Layout \u00e4ndern, auch wenn du kein Programmierer<\/a> bist.<\/p>\n Es gibt verschiedene WordPress-Seitenerstellungsprogramme, aber mit \u00fcber f\u00fcnf Millionen aktiven Installationen<\/a> ist das Elementor-Plugin<\/a> eines der beliebtesten. Elementor<\/a> erm\u00f6glicht es dir, mit einem intuitiven Drag-and-Drop-Editor alles zu erstellen, von ganzen Webseiten bis hin zu einzelnen Landing Pages<\/a>.<\/p>\n Mit Elementor kannst du alle Aspekte des Designs deiner Webseite \u00fcber eine einzige Plattform steuern. Auf diese Weise kann deine Webseite dein Branding perfekt widerspiegeln<\/a>.<\/p>\n Der intuitive, codefreie Editor von Elementor ist besonders bei Webseiten-Betreibern beliebt, die keine Erfahrung mit Design und Entwicklung haben. Er eignet sich auch hervorragend f\u00fcr Unternehmer\/innen und kleine Unternehmen<\/a>, die eine Idee f\u00fcr ein Online-Projekt haben, aber nicht unbedingt die Mittel, um ein eigenes Design- oder Entwicklungsteam einzustellen.<\/p>\n Auch wenn du ein erfahrener Profi bist, gibt es viele Gr\u00fcnde, Elementor zu nutzen. Nur weil du \u00fcber Programmierkenntnisse verf\u00fcgst, hei\u00dft das nicht, dass du immer alles von Grund auf neu erstellen solltest.<\/p>\n Elementor hat viele Funktionen, mit denen du in k\u00fcrzester Zeit preisgekr\u00f6nte Webseiten erstellen kannst. Dazu geh\u00f6ren \u00fcber 90 vorgefertigte Widgets<\/a> und professionell gestaltete Webvorlagen<\/a>.<\/p>\n Auf diese Weise kann Elementor deine Produktivit\u00e4t und deinen Gewinn steigern. Diese zeitsparenden Funktionen k\u00f6nnen sich als besonders lukrativ erweisen, wenn du regelm\u00e4\u00dfig WordPress-Webseiten erstellst (z. B. f\u00fcr freiberufliche Entwickler\/innen<\/a> und WordPress-Agenturen<\/a>).<\/p>\n\n Elementor ist eine „Freemium“-Software. Du kannst das Elementor-Plugin kostenlos herunterladen<\/a> oder eine Elementor-Pro-Lizenz<\/a> erwerben.<\/p>\n Das kostenlose WordPress-Plugin enth\u00e4lt alles, was du brauchst, um visuell ansprechende Verkaufsseiten, Produktlisten<\/a>, Unternehmenswebseiten<\/a> und vieles mehr zu erstellen. Es enth\u00e4lt \u00fcber 40 Widgets, 100 Vorlagen und mehr als 300 Bl\u00f6cke. Bl\u00f6cke sind vorgefertigte Abschnittsvorlagen, die du mischen und anpassen kannst, um einzigartige Designs zu erstellen.<\/p>\n Wenn du mehr Funktionen haben m\u00f6chtest, kannst du Elementor Pro kaufen. Damit bekommst du einige zus\u00e4tzliche Widgets und den Theme Builder<\/a> von Elementor freigeschaltet.<\/p>\n Mit dem Theme Builder kannst du fast alle Elemente deiner Webseite bearbeiten, einschlie\u00dflich der Kopf- und Fu\u00dfzeile. Du kannst auch eigene Designs f\u00fcr Beitr\u00e4ge und Archivseiten erstellen.<\/p>\n Wenn du einen Online-Shop entwickelst, enth\u00e4lt Elementor Pro auch einen WooCommerce Builder<\/a>. Mit diesem kannst du den WooCommerce-Inhalt deiner Webseite anpassen, einschlie\u00dflich der Produktseite, des Produktarchivs und der Checkoutseite. Au\u00dferdem erh\u00e4ltst du Zugang zu Widgets, die speziell zur Steigerung der Konversionsrate entwickelt wurden, wie z. B. Custom Add To Cart<\/a>, Upsells<\/a> und Product Related<\/a>.<\/p>\n Elementor Pro kommt auch mit einem Popup Builder<\/a> und einem Form Builder<\/a>. Es gibt zwar separate Plugins, mit denen du Formulare und Popups erstellen<\/a> kannst, aber wenn du dich f\u00fcr Elementor entscheidest, kannst du die Anzahl der Plugins, die du installieren und warten musst, minimieren.<\/p>\n Wenn du zu viele Plugins verwendest, kann deine Webseite anf\u00e4lliger f\u00fcr Hacker<\/a> werden. Sie k\u00f6nnen sogar die Leistung deiner Webseite<\/a> beeintr\u00e4chtigen. Daher ist es ratsam, die Anzahl der installierten Plugins gering zu halten. Da du alle Elemente deiner Webseite auf derselben Plattform entwirfst, ist es au\u00dferdem einfacher, ein einheitliches Erscheinungsbild zu erreichen.<\/p>\n Die Elementor Pro-Lizenzen beinhalten den Zugang zu \u00fcber 60 Pro-Website-Kits. Das sind Pakete mit Vorlagen, Seiten, Popups und anderen Komponenten, mit denen du eine komplette Webseite erstellen kannst. Wenn du eine Expert-Lizenz oder h\u00f6her erwirbst, erh\u00e4ltst du au\u00dferdem Zugang zu 20 Expert-Website-Kits.<\/p>\n Au\u00dferdem beinhaltet jede Pro-Lizenz Premium-Support. Normalerweise erh\u00e4ltst du innerhalb eines Tages eine Antwort vom Elementor-Supportteam. Wenn du dich jedoch f\u00fcr Elementor Pro Studio oder h\u00f6her entscheidest, erh\u00e4ltst du ein Upgrade auf den VIP-Support. Damit kannst du an Live-Chats mit dem VIP-Support-Team von Elementor teilnehmen. Au\u00dferdem erh\u00e4ltst du vorrangige Antworten auf deine Tickets, die in der Regel in weniger als 30 Minuten eingehen.<\/p>\n Wenn du eine Agentur, ein Entwickler oder ein Designer bist, bist du vielleicht an einem Expertennetzwerk-Profil<\/a> interessiert. Dort kannst du deine Arbeit pr\u00e4sentieren und die Aufmerksamkeit potenzieller Kunden auf dich ziehen.<\/p>\n Wenn du daran interessiert bist, \u00fcber das Experts Network zu werben, k\u00f6nnte dich auch die Expert-, Studio- oder Agency-Lizenz von Elementor Pro interessieren. Diese Lizenzen berechtigen dich dazu, ein Profil auf diesem beliebten Marktplatz zu erstellen.<\/p>\n Die Elementor Pro-Pl\u00e4ne reichen von 49 bis 999 US-Dollar pro Jahr<\/a>. Das Unternehmen bietet au\u00dferdem eine 30-t\u00e4gige Geld-zur\u00fcck-Garantie an, damit du es vor dem Kauf ausprobieren kannst.<\/p>\n Da es sich um ein WordPress-Plugin handelt, ist die Installation von Elementor<\/a> schnell und einfach. Du kannst das kostenlose Plugin<\/a> direkt von deinem WordPress-Dashboard herunterladen.<\/p>\n Um die kostenlose Version herunterzuladen, navigiere zu Plugins > Neu hinzuf\u00fcgen<\/strong>. Gib im Suchfeld “ Elementor<\/strong>“ ein. Wenn das Plugin angezeigt wird, klicke auf Jetzt installieren<\/strong>.<\/p>\n Wenn du dazu aufgefordert wirst, klicke auf Aktivieren<\/strong>. Das Plugin f\u00fcgt eine Elementor-Option <\/strong>zu deiner WordPress-Seitenleiste hinzu.<\/p>\n Jetzt bist du bereit, Elementor zu benutzen! Um loszulegen, klicke einfach auf die Elementor-Option in der Seitenleiste.<\/p>\n Alternativ kannst du das Elementor-Plugin auch direkt aus dem WordPress-Repository herunterladen. Melde dich dann in deinem WordPress-Dashboard an und navigiere zu Plugins > Neu hinzuf\u00fcgen > Plugin hochladen<\/strong>. Dann klickst du auf Datei ausw\u00e4hlen<\/strong> und w\u00e4hlst die Elementor- .zip-Datei<\/em> aus, die du gerade heruntergeladen hast.<\/p>\n Es gibt zwei M\u00f6glichkeiten, Elementor Pro mit WordPress zu verbinden. Wenn du noch keine Elementor Pro-Lizenz erworben hast, musst du auf die offizielle Website gehen und “ Get Started“<\/strong> ausw\u00e4hlen.<\/p>\n Dann kannst du den Anweisungen auf dem Bildschirm folgen, um ein Elementor-Konto zu erstellen. Wenn du dazu aufgefordert wirst, gibst du einige Informationen \u00fcber die Art der Webseite ein, die du erstellen m\u00f6chtest.<\/p>\n Als n\u00e4chstes w\u00e4hlst du den Plan aus, den du kaufen m\u00f6chtest. Da Elementor eine aktive WordPress-Webseite ben\u00f6tigt, musst du die Domain deiner Webseite eingeben. Elementor \u00fcberpr\u00fcft dann, ob deine Webseite die WordPress-Plattform nutzt.<\/p>\n Wenn du eine aktive WordPress-Webseite hast, klickst du im n\u00e4chsten Schritt auf Elementor installieren<\/strong>. Du wirst automatisch zur Elementor-Plugin-Seite weitergeleitet, wenn du gerade auf deiner Webseite angemeldet bist.<\/p>\n Wenn du dazu aufgefordert wirst, klicke auf Jetzt installieren > Aktivieren<\/strong>. Elementor f\u00fcgt dann das Page Builder-Plugin zu deiner Webseite hinzu.<\/p>\n Wenn du bereits eine Elementor Pro-Lizenz erworben hast, kannst du dich auch auf der offiziellen Webseite mit den Daten anmelden, die du in deiner Best\u00e4tigungs-E-Mail erhalten hast.<\/p>\n In deinem Elementor-Konto w\u00e4hlst du im linken Men\u00fc den Punkt Abonnements <\/strong>aus. Dann kannst du auf Zip herunterladen <\/strong>klicken.<\/p>\n Als n\u00e4chstes loggst du dich in dein WordPress-Dashboard ein und navigierst zu Plugins > Neu hinzuf\u00fcgen<\/strong>. Dann kannst du die Elementor Pro .zip-Datei<\/em>\u00a0 hochladen, die du gerade heruntergeladen hast.<\/p>\n Nachdem du Elementor Pro installiert und aktiviert hast, sollte WordPress dich auffordern, deinen Lizenzschl\u00fcssel einzugeben. Alternativ kannst du auch zu Elementor > Lizenz > Verbinden & Aktivieren<\/strong> navigieren.<\/p>\n WordPress sollte deine Lizenz automatisch \u00fcberpr\u00fcfen, wenn du gerade in deinem Elementor-Konto angemeldet bist. Wenn das nicht der Fall ist, gibst du deinen Elementor-Benutzernamen und dein Passwort ein, wenn du zur Aktivierung deiner Lizenz aufgefordert wirst.<\/p>\n Mit Elementor kannst du auch ohne besondere Design- oder Entwicklungskenntnisse einzigartige Webseiten gestalten. Es ist jedoch hilfreich, sich mit den Grundlagen vertraut zu machen, bevor du eine komplette Webseite erstellst. Im Folgenden findest du eine kurze Einf\u00fchrung in den Elementor-Workflow.<\/p>\n Um eine neue Seite oder einen Beitrag im Elementor Page Builder zu erstellen, navigiere zu Seiten\/Beitr\u00e4ge > Neu hinzuf\u00fcgen<\/strong>. Du kannst den Elementor-Editor starten, indem du auf Mit Elementor bearbeiten <\/strong>klickst .<\/strong><\/p>\n Vielleicht hast du aber auch eine bestehende Seite, die von einer \u00dcberarbeitung profitieren k\u00f6nnte. In diesem Fall navigierst du einfach zu der betreffenden Seite und \u00f6ffnest sie zur Bearbeitung. Dann kannst du auf die Schaltfl\u00e4che Mit Elementor bearbeiten<\/strong> klicken.<\/p>\n Auf der linken Seite des Bildschirms siehst du die Elementor-Seitenleiste. Hier findest du alle Elemente, die du zu deinen Designs hinzuf\u00fcgen kannst, z. B. Schaltfl\u00e4chen und \u00dcberschriften.<\/p>\n Die Elementor-Seitenleiste enth\u00e4lt auch einen Bereich f\u00fcr globale Widgets<\/strong>. Wenn du dasselbe Widget in mehreren Designs wiederverwenden willst, solltest du es als globales Widget speichern. So ist dein benutzerdefiniertes Element jederzeit leicht zug\u00e4nglich. Au\u00dferdem hast du so einen zentralen Ort, an dem du dein Widget einmal bearbeiten kannst, um universelle \u00c4nderungen vorzunehmen. Elementor \u00fcbertr\u00e4gt diese \u00c4nderungen dann auf deine gesamte Webseite.<\/p>\n Auf der rechten Seite ist die Live-Vorschau, in der du dein Design erstellen kannst. Elementor wird automatisch aktualisiert und zeigt deine \u00c4nderungen in Echtzeit an, w\u00e4hrend du sie vornimmst.<\/p>\n Der Elementor-Editor bietet Zugang zu drei Hauptbausteinen: Abschnitte, Spalten und Widgets. Wir haben uns bereits mit den vorgefertigten Widgets von Elementor besch\u00e4ftigt, also schauen wir uns an, wie du sie zu deinen Designs hinzuf\u00fcgen kannst.<\/p>\n Normalerweise f\u00e4ngst du damit an, einen Abschnitt zu erstellen, indem du auf das +<\/strong> Symbol im Hauptfenster klickst. Elementor fordert dich dann auf, deine Struktur auszuw\u00e4hlen.<\/strong><\/p>\n Die Strukturoptionen bestehen aus einer oder mehreren Spalten. Letztendlich platzierst du dein Widget in diesen Spalten. Sie spielen eine wichtige Rolle bei der Erstellung von \u00fcbersichtlichen Layouts.<\/p>\n Nachdem du deine Entscheidung getroffen hast, f\u00fcgt Elementor diesen Abschnitt zu deinem Layout hinzu. Um den Abschnitt an eine andere Stelle zu verschieben, klickst du ihn an und greifst dann die gepunkteten blauen Fl\u00e4che, die erscheint.<\/p>\n Um einen Abschnitt zu bearbeiten, klickst du bei gedr\u00fcckter Ctrl-Taste auf die gepunktete blaue Fl\u00e4che. Dadurch wird ein Kontextmen\u00fc ge\u00f6ffnet, in dem du einfache \u00c4nderungen wie das Kopieren oder L\u00f6schen des ausgew\u00e4hlten Abschnitts vornehmen kannst.<\/p>\n Angenommen, du m\u00f6chtest komplexere \u00c4nderungen vornehmen, dann klicke bei gedr\u00fcckter Ctrl-Taste auf die blaue Fl\u00e4che und w\u00e4hle Abschnitt bearbeiten<\/strong>. Die Elementor-Seitenleiste wird nun aktualisiert und zeigt alle zus\u00e4tzlichen \u00c4nderungen an, die du an diesem Abschnitt vornehmen kannst.<\/p>\n Du kannst auch Widgets zu diesem Abschnitt hinzuf\u00fcgen. Suche in der Elementor-Seitenleiste das gew\u00fcnschte Widget und ziehe es auf die Hauptfl\u00e4che.<\/p>\n W\u00e4hrend du das Widget ziehst, hebt Elementor alle verschiedenen Abschnitte und Spalten hervor, in denen du das Element ablegen kannst. Wenn du fertig bist, lass einfach die Maus los. Elementor f\u00fcgt das Widget nun zu dem von dir gew\u00e4hlten Abschnitt hinzu.<\/p>\n Mit Elementor kannst du deine seitenweiten Einstellungen bearbeiten. Dazu geh\u00f6rt das \u00c4ndern der Standardschriftart<\/a> und der HTML-Farben<\/a>. Du kannst auch die Rahmen und Schatten \u00e4ndern, die WordPress Elementen wie den Bildern deiner Webseite hinzuf\u00fcgt.<\/p>\n Indem du diese Einstellungen auf der Webseite-Ebene anpasst, kannst du ein einheitliches Erscheinungsbild deiner gesamten WordPress-Webseite sicherstellen. Dieser Prozess ist au\u00dferdem wesentlich schneller und einfacher, als wenn du diese \u00c4nderungen Seite f\u00fcr Seite vornimmst. Um die verf\u00fcgbaren Webseite-Einstellungen zu sehen, klicke auf das Hamburger-Men\u00fc in der Elementor-Seitenleiste.<\/p>\n Du kannst nun deine Optionen erkunden und alle notwendigen \u00c4nderungen vornehmen. Wenn du bereit bist, deine neuen Webseiten-Einstellungen zu ver\u00f6ffentlichen, klicke auf die Schaltfl\u00e4che Aktualisieren<\/strong> ganz unten in der Elementor-Seitenleiste.<\/p>\n W\u00e4hrend du deine Entw\u00fcrfe bearbeitest, zeichnet Elementor deine \u00c4nderungen leise auf. Du kannst deine \u00c4nderungen ganz einfach r\u00fcckg\u00e4ngig machen, was dir das Leben retten kann, wenn du merkst, dass du einen Fehler gemacht hast.<\/p>\n Das Verlaufsprotokoll von Elementor gibt dir auch die Freiheit zu experimentieren. Du kannst verschiedene \u00c4nderungen ausprobieren und sie dann schnell wieder entfernen. Indem Elementor dich zum Experimentieren ermutigt, kann es die Qualit\u00e4t deiner fertigen Designs<\/a> verbessern.<\/p>\n Um das Elementor-Protokoll einzusehen, klickst du auf das Symbol Historie<\/strong> unten in der Seitenleiste. Die Registerkarte Aktionen<\/strong> zeichnet jede einzelne \u00c4nderung auf, die du in Elementor vornimmst. Das kann alles sein, vom Erstellen eines neuen Abschnitts bis zum Bearbeiten von bestehendem Text:<\/p>\n Jedes Mal, wenn du auf Speichern<\/strong> dr\u00fcckst, zeichnet Elementor die aktuelle Version deiner Seite als neue Revision auf. Du kannst alle diese Schnappsch\u00fcsse auf der Registerkarte Revisionen<\/strong> sehen. Wenn du zu einem fr\u00fcheren Speicherstand zur\u00fcckkehren m\u00f6chtest, suche ihn einfach in der Liste der Revisionen<\/strong> und klicke darauf.<\/p>\n Jetzt, wo du mit dem grundlegenden Elementor-Workflow vertraut bist, wollen wir sehen, wie du dieses Wissen nutzen kannst, um neue Seiten zu gestalten. Zuerst werden wir uns ansehen, wie du eine WordPress-Standardseite mit dem kostenlosen Elementor-Plugin erstellst. Dann schauen wir uns an, wie du mit WooCommerce und Elementor Pro eine Produktseite mit hoher Konversionsrate entwickeln kannst.<\/p>\n Jede Webseite ist anders. Es gibt jedoch einige gemeinsame Elemente, die du auf verschiedenen Seiten findest. Dazu geh\u00f6ren \u00dcberschriften, Flie\u00dftext und Medien wie Bilder<\/a>. Sehen wir uns an, wie du eine Seite mit diesen wichtigen Elementen erstellen kannst.<\/p>\n Um zu beginnen, erstelle eine neue Seite, indem du zu Seiten > Neu hinzuf\u00fcgen > Mit Elementor bearbeiten<\/strong> navigierst. F\u00fcge dann einen Abschnitt zu deinem Design hinzu, indem du auf das +<\/strong> Symbol klickst. Wir beginnen mit unserer \u00dcberschrift und entscheiden uns f\u00fcr ein einspaltiges Layout.<\/p>\n In der Elementor-Seitenleiste findest du das \u00dcberschriften-Widget. Ziehe dieses Widget per Drag & Drop in deinen neuen Abschnitt. Dann kannst du deinen \u00dcberschriftentext in der Elementor-Seitenleiste eingeben und verschiedene Einstellungen verwenden, um deinen Titel zu gestalten.<\/p>\n Dann klickst du auf das +<\/strong> Symbol, um einen zweiten Abschnitt hinzuzuf\u00fcgen. Wir werden ein Bild einbetten und dann etwas Text hinzuf\u00fcgen, also entscheiden wir uns f\u00fcr ein mehrspaltiges Layout.<\/p>\n Als N\u00e4chstes ziehst du das Texteditor-Widget aus der Elementor-Seitenleiste und legst es in diesem neuen Abschnitt ab. Dann kannst du deinen Text mit den Einstellungen in der Seitenleiste hinzuf\u00fcgen und gestalten.<\/p>\n Wenn du mit deinem Text zufrieden bist, suche das Bild-Widget. Auch dieses Widget f\u00fcgst du per Drag & Drop zu deinem Abschnitt hinzu.<\/p>\n Klicke in der Seitenleiste auf die Vorschau-Miniaturansicht. Du kannst nun die WordPress-Mediathek nutzen, um ein neues Bild hochzuladen oder eine bereits hochgeladene Grafik auszuw\u00e4hlen.<\/p>\n Um dein Design in Aktion zu sehen, klicke auf das Augensymbol unten in der Elementor-Seitenleiste. Dadurch wird eine Vorschau deines Seitenlayouts in einem neuen Tab angezeigt.<\/p>\n Wenn du mit deinem Design zufrieden bist, klicke auf die Schaltfl\u00e4che Ver\u00f6ffentlichen<\/strong>. Wenn deine Seite bereits live ist, wirst du stattdessen aufgefordert, sie zu aktualisieren<\/strong>.<\/p>\n Wenn du einen WooCommerce-Shop<\/a> betreibst, kannst du mit Elementor Pro eine eigene Produktseite erstellen. Dabei kann es sich um eine \u00c4nderung der Standard-WooCommerce-Seite handeln, die das Branding deiner Webseite besser widerspiegelt. Oder du versuchst, deine Seite zu optimieren, um mehr Konversionen zu erzielen.<\/p>\n Um eine benutzerdefinierte WooCommerce-Produktseite zu erstellen, w\u00e4hlst du im WordPress-Dashboard die Option Vorlagen<\/strong> aus. Dann klickst du auf die Schaltfl\u00e4che Neu hinzuf\u00fcgen<\/strong>. Im n\u00e4chsten Fenster \u00f6ffnest du das erste Dropdown-Men\u00fc und w\u00e4hlst Einzelprodukt<\/strong>.<\/p>\n Gib deiner neuen Vorlage einen beschreibenden Namen und klicke auf Vorlage erstellen<\/strong>. Daraufhin wird die Elementor-Bibliothek mit allen verf\u00fcgbaren Einzelproduktdesigns ge\u00f6ffnet.<\/p>\n Um dir eine Vorlage genauer anzusehen, fahre mit dem Mauszeiger dar\u00fcber und klicke dann auf das Lupensymbol, wenn es erscheint. Wenn du dieses Design auf deinen Laden anwenden m\u00f6chtest, klicke auf Einf\u00fcgen<\/strong>.<\/p>\n Die Vorlagen von Elementor enthalten eine Reihe von vorgefertigten Komponenten. Um eines dieser Elemente zu bearbeiten, klicke es einfach an. Die Elementor-Seitenleiste wird dann aktualisiert und zeigt alle Einstellungen f\u00fcr das jeweilige Element an.<\/p>\n Elementor Pro bietet eine Reihe von WooCommerce-Widgets<\/a>, die du zu deinen Designs hinzuf\u00fcgen kannst. Um zu sehen, was verf\u00fcgbar ist, scrolle zu den Abschnitten WooCommerce<\/strong> oder Produkt<\/strong> in der Elementor-Seitenleiste.<\/p>\n Diese Abschnitte enthalten Widgets mit erweiterten integrierten Funktionen, wie WooCommerce Breadcrumbs<\/a>, Warenkorb und Checkout. Um diese Elemente zu deinem Design hinzuzuf\u00fcgen, ziehst du sie einfach in den Elementor Canvas und l\u00e4sst sie los. Dann kannst du das Widget in den Bereich ziehen, in dem du den Inhalt anzeigen m\u00f6chtest.<\/p>\n Wenn du mit deinem Entwurf zufrieden bist, klicke auf Ver\u00f6ffentlichen<\/strong>. Dann w\u00e4hlst du Bedingung hinzuf\u00fcgen<\/strong> und gibst die Bereiche an, in denen du das Design verwenden willst. Du kannst die Vorlage zum Beispiel auf eine bestimmte Produktkategorie anwenden oder sie in deinem gesamten Shop verwenden.<\/p>\n Elementor-Vorlagen sind vorgefertigte Seiten und Bl\u00f6cke, die den Prozess der Website-Erstellung vereinfachen. Seiten sind vollst\u00e4ndige Inhaltslayouts, w\u00e4hrend Bl\u00f6cke Abschnitte sind, die vorgefertigte Widgets enthalten. Beliebte Beispiele f\u00fcr Bl\u00f6cke sind Kopf- und Fu\u00dfzeilen, Bewertungen und Erfahrungsberichte<\/a> sowie h\u00e4ufig gestellte Fragen (FAQs)<\/a>.<\/p>\n Das kostenlose Elementor-Plugin enth\u00e4lt \u00fcber 100 ganzseitige Vorlagen und mehr als 300 Bl\u00f6cke. Wenn du auf Elementor Pro upgradest, erh\u00e4ltst du Zugang zu einigen zus\u00e4tzlichen Optionen.<\/p>\n Klicke auf das Symbol Vorlage hinzuf\u00fcgen, um eine Vorlage auf dein aktuelles Design anzuwenden. Diese Schaltfl\u00e4che sollte als Teil jedes Abschnittsblocks erscheinen und wird durch einen wei\u00dfen Ordner dargestellt. Dadurch wird die Elementor-Bibliothek ge\u00f6ffnet.<\/p>\n Hier findest du alle Block- und Seitenvorlagen, die du auf deine Seite anwenden kannst. Du kannst dir eine Vorschau jeder Vorlage ansehen, indem du mit dem Mauszeiger \u00fcber die Vorlage f\u00e4hrst und auf das Lupensymbol klickst.<\/p>\n Wenn du eine Vorlage gefunden hast, die du verwenden m\u00f6chtest, klicke auf Einf\u00fcgen<\/strong>. Wenn du dich noch nicht mit der Vorlagenbibliothek von Elementor verbunden hast, wirst du in einem Popup aufgefordert, diesen Schritt auszuf\u00fchren.<\/p>\n Nachdem du die Verbindung hergestellt hast, f\u00fcgt Elementor deine ausgew\u00e4hlte Vorlage ein. Du kannst sie nun anpassen. Du kannst zum Beispiel weitere Widgets hinzuf\u00fcgen oder Platzhalterinhalte l\u00f6schen.<\/p>\n Elementor kommt mit einer gro\u00dfen Auswahl an vorgefertigten Vorlagen. Manchmal hast du jedoch einen bestimmten Look im Kopf. In diesem Fall m\u00f6chtest du deine Vorlagen vielleicht lieber selbst gestalten.<\/p>\n Wenn du deine Designs selbst erstellst, kannst du die Konsistenz deiner gesamten Webseite sicherstellen. Wenn du eine WordPress-Agentur bist, kannst du Vorlagen sogar nutzen, um Design und Entwicklung zu beschleunigen. Du k\u00f6nntest zum Beispiel eine Bibliothek mit Vorlagen erstellen, die alle Inhalte und Einstellungen enthalten, die du normalerweise auf deinen Kundenseiten verwendest. Diese Vorlagen kannst du dann als Ausgangspunkt f\u00fcr alle zuk\u00fcnftigen Projekte verwenden.<\/p>\n Um loszulegen, w\u00e4hle im WordPress-Dashboard den Punkt Vorlagen<\/strong> aus. Dann klickst du auf Neu hinzuf\u00fcgen<\/strong>.<\/p>\n Im folgenden Popup \u00f6ffnest du das erste Dropdown-Men\u00fc und w\u00e4hlst die Art der Vorlage, die du erstellen m\u00f6chtest. Deine Optionen sind Seite<\/strong>, Abschnitt<\/strong> oder Landing Page<\/strong>.<\/p>\n Als N\u00e4chstes gibst du dem Design einen beschreibenden Namen und klickst auf Vorlage erstellen<\/strong>. Dadurch wird der Standard-Elementor-Page-Builder gestartet. Du kannst deine Vorlage nun genauso erstellen wie eine normale Seite. F\u00fcge einfach Abschnitte, Spalten und Widgets hinzu, bis du mit deinem Layout zufrieden bist.<\/p>\n Um dieses Design als Vorlage zu speichern, klicke auf den Pfeil neben der Schaltfl\u00e4che Aktualisieren\/Ver\u00f6ffentlichen<\/strong>. Du kannst dann Als Vorlage speichern<\/strong> ausw\u00e4hlen.<\/p>\n![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-wordpress-plugin.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-web-templates.png\")
Elementor Free vs Elementor Pro<\/h2>\n
![\"Preisoptionen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-pro-homepage.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-block-templates.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-theme-builder.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/woocommerce-builder-homepage.png\")
![\"Elementors](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-experts-network.png\")
So installierst du Elementor<\/h2>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-wordpress-sidebar.png\")
So verbindest du Elementor Pro mit WordPress<\/h3>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-pro-setup.png\")
![\"Download](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-download-zip.png\")
Elementor verwenden: 4 wesentliche Aufgaben, die du meistern musst<\/h2>\n
1. Starte den Elementor Page Builder<\/h3>\n
![\"Mit](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-with-elementor-1.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-page-builder.png\")
2. Abschnitte, Spalten und Widgets hinzuf\u00fcgen<\/h3>\n
![\"Struktur](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-section-structure.png\")
![\"W\u00e4hle](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-column-structure.png\")
![\"Jederzeit](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-elementor-section.png\")
![\"Zus\u00e4tzliche,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-edit-section.png\")
3. Bearbeiten deiner Webseiten-Einstellungen<\/h3>\n
![\"Seitenweite](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-site-settings.png\")
4. \u00dcberpr\u00fcfe deinen \u00c4nderungsverlauf<\/h3>\n
![\"Anzeige](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-revision-history.png\")
Wie du eine Seite in Elementor erstellst (2 Methoden)<\/h2>\n
1. Wie man eine WordPress-Standardseite erstellt<\/h3>\n
![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-single-column.png\")
![\"Gestalte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-heading-widget.png\")
![\"Einen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-two-column.png\")
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-image-widget-.png\")
![\"Vorschau](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-design-preview.png\")
2. So erstellst du eine WooCommerce-Produktseite<\/h3>\n
![\"WooCommerce](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-single-product-.png\")
![\"Verf\u00fcgbare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/single-product-templates.png\")
![\"Fahre](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/insert-page-template.png\")
![\"Vorgefertigte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-edit-woocommerce.png\")
![\"Verf\u00fcgbare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/woocommerce-elementor-widgets.png\")
![\"Drag-and-Drop](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/woocommerce-cart-widget.png\")
Wie du vorgefertigte Elementor-Vorlagen findest und installierst<\/h2>\n
![\"Elementor-Bibliothek\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/faq-elementor-blocks.png\")
![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-template-library.png\")
![\"Fahre](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-404-block.png\")
![\"Mit](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/connect-template-library-.png\")
Wie du Vorlagen mit Elementor erstellst<\/h2>\n
![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-templates-new.png\")
![\"W\u00e4hle](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/landing-page-template.png\")
![\"Als](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/save-as-template.png\")
![\"Finde](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/my-templates-library.png\")
![\"Einen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/block-template-save-.png\")
![\"Anzeigeoptionen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-navigator-menu.png\")
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/keyboard-shortcuts-hotkeys.png\")