Springe zum Hauptinhalt

So erstellen Sie ein Layout mit Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie mit Elementor ein Layout erstellen? Möchten Sie einfach eine professionell aussehende WordPress-Website erstellen? Dann müssen Sie Laden Sie das WordPress Elementor-Plugin hier herunter.

 Elementor ist ein visueller Seitenersteller mit der Funktion "Drag and Drop", mit der Sie ohne Programmierkenntnisse auf einfache Weise benutzerdefinierte Layouts in WordPress erstellen können.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit Elementor mit nur wenigen Klicks auf einfache Weise benutzerdefinierte WordPress-Layouts erstellen können. Wir bieten Ihnen auch Schauen Sie sich die anderen Alternativen dieses wunderschönen WordPress-Plugins an.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Erstellen Sie mit Elementor ein Layout

Warum und wann werden benutzerdefinierte Layouts in WordPress erstellt?

Bevor Sie anfangen, können Sie dieses WordPress-Plugin anhand der Artikel entdecken Präsentation einer WordPress Builder Seite: Elementor oder entdecken Sie die Elementor-Tutorial: Einführung in die Benutzeroberfläche 

Viele kostenlose und Premium-WordPress-Themes bieten verschiedene Layoutoptionen für verschiedene Seitentypen. Manchmal entspricht jedoch keine dieser Layoutvorlagen Ihren Anforderungen.

Wenn Sie jedoch ein Fan von PHP, HTML und CSS sind, haben Sie die Möglichkeit, eigene Seitenvorlagen zu erstellen oder sogar ein untergeordnetes Thema für Ihre Website zu erstellen. Die Mehrheit der WordPress-Benutzer sind jedoch keine Entwickler, daher funktioniert diese Option für sie nicht.

Entdecken Sie auch diese 8 WordPress Plugins zur einfachen Erstellung Ihrer Layouts

Wäre es nicht toll, Layouts mit einer einfachen Oberfläche (Drag and Drop) zu erstellen?

Genau das macht Elementor. Dies ist ein Plugin für den WordPress-Seitenersteller, mit dem Sie ganz einfach Ihre eigenen WordPress-Layouts ohne Programmierkenntnisse erstellen können.

Es verfügt über eine intuitive Benutzeroberfläche, mit der Sie benutzerdefinierte Layouts mit Echtzeitvorschau erstellen können. Es enthält viele vorgefertigte Module für alle Arten von Webdesign-Elementen.

Es bietet mehrere professionell gestaltete Seitenvorlagen, die Sie sofort laden und als Ausgangspunkt verwenden können. Schauen wir uns an, wie Sie mit dem WordPress Elementor-Plugin benutzerdefinierte WordPress-Layouts erstellen.

Erste Schritte mit Elementor

Zuerst müssen Sie das Plugin kaufen " Elementor Pro ". Dies ist die kostenpflichtige Version des Plugins " Elementor Kostenlos, mit dem Sie auf zusätzliche Funktionen und den Kundensupport von 1 zugreifen können.

Dann müssen Sie das Elementor-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung unter Weg, um ein WordPress-Plugin zu installieren.

Besuchen Sie nach der Aktivierung die " Elementor> Einstellungen So konfigurieren Sie den Betrieb dieses Plugins.

Elementoreinstellungen

Hier können Sie "Elementor" für verschiedene Beitragstypen aktivieren. Standardmäßig ist es für Ihre WordPress-Beiträge und -Seiten aktiviert. Wenn Sie benutzerdefinierte Postformate auf Ihrer Website haben, werden diese auch hier angezeigt und können auch aktiviert werden.

Sie können Benutzerrollen ausschließen oder einschließen, die Elementor beim Schreiben von Posts oder Seiten verwenden können. Standardmäßig ist es nur für Administratoren aktiviert.

Unsere Umsetzung 8 WordPress-Plugins zum Verwalten von Rollen und Benutzern

Vergessen Sie nicht, auf den Button «zu klicken. Änderungen speichern Speichern Sie Ihre Einstellungen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Erstellen eines benutzerdefinierten Layouts mit Elementor

Zuerst müssen Sie eine neue Seite (oder einen neuen Beitrag) auf Ihrer WordPress-Website erstellen. Auf der Seite nach der Bearbeitung sehen Sie die neue Schaltfläche "Mit Elementor bearbeiten".

Mit elementor bearbeiten

Wenn Sie darauf klicken, wird die Elementor-Benutzeroberfläche geöffnet, in der Sie Ihre Seite mit dem visuellen Seitenersteller mit Drag & Drop-Funktion bearbeiten können.

Element per Drag & Drop

Sie können jetzt Abschnitte hinzufügen und Ihre Seite von Grund auf neu erstellen oder eine der standardmäßig gelieferten Vorlagen laden.

Modelle sind ein schnellerer Weg, um schnell loszulegen. Daher bietet Elementor mehrere professionell gestaltete Vorlagen, die Sie beliebig anpassen können.

Beginnen wir mit einer Vorlage, indem wir auf den Button " Fügen Sie eine Vorlage hinzu ".

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie die verschiedenen verfügbaren Modelle sehen können. Sie sollten nach einem Modell suchen, das Ihren Vorstellungen entspricht. 

Layout elemntor Plugin

Aktivieren Sie nun das gewünschte Modell und klicken Sie auf die Schaltfläche einfügen So fügen Sie es Ihrer Seite hinzu

Elementor lädt die Vorlage für Sie.

Sie können jetzt damit beginnen, die Vorlage an Ihre Anforderungen anzupassen. Zeigen Sie einfach auf ein Element und klicken Sie darauf, um es auszuwählen. Elementor zeigt Ihnen die Einstellungen in der linken Spalte an.

Beginn der Seitenbearbeitung auf elementor

Lassen Sie uns nun darüber sprechen, wie die Layouts von Elementor funktionieren.

Die vom Elementor-Plugin angebotenen Modelle basieren auf Abschnitten, Spalten und Widgets. Abschnitte sind wie Linien oder Blöcke, die Sie auf Ihrer Seite platzieren.

Jeder Abschnitt kann mehrere Spalten haben und jeder Abschnitt und jede Spalte kann ihre eigenen Stile, Farben, Inhalte usw. haben.

Bearbeiten einer Seite mit elementor

Sie haben die Möglichkeit, Elemente mithilfe der von Elementor angebotenen Widgets zu Ihren Spalten und Abschnitten hinzuzufügen.

Diese Widgets sind Arten von Inhaltsblöcken, die Sie in Abschnitten Ihrer Seiten platzieren können.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Wählen Sie einfach ein Widget aus und legen Sie es in Ihrem Abschnitt oder Ihrer Spalte ab. Es gibt eine Vielzahl von Widgets, die alle gängigen Webdesign-Elemente abdecken, die Sie sich vorstellen können.

Element e Design mit Elementor

Sie können Bilder, Texte, Themen, Bildergalerien, Videos, Karten, Symbole, Testimonials, Schieberegler, Karussells und vieles mehr hinzufügen.

Siehe auch unsere 15 Elementor-Designs und -Vorlagen zum Erstellen einer Website

Sie können Ihrer Website auch Standard-WordPress-Widgets und sogar Widgets hinzufügen, die von anderen WordPress-Plugins erstellt wurden.

Wenn Sie fertig sind, können Sie auf die Schaltfläche " Registrieren Um Ihre Änderungen beizubehalten.

Passen Sie das Layout mit elementor an

Remarque: Durch das Speichern eines Layouts wird die Seite nicht auf Ihrer WordPress-Website veröffentlicht. Es wird einfach Ihr Layout gespeichert.

Zu diesem Zeitpunkt haben Sie die Möglichkeit, eine Vorschau Ihrer Seite anzuzeigen oder zum WordPress-Dashboard zu wechseln. Damit kehren Sie zum Standard-WordPress-Post-Editor zurück. Sie können Ihre WordPress-Seite jetzt speichern oder auf Ihrer Website veröffentlichen.

Layoutveröffentlichung mit Elementor

Das war's, also fertig mit dem Erstellen einer Seite mit dem WordPress Elementor Plugin.

Aber wie viele Seitenersteller bietet es auch Erweiterungen Auf diese Weise können Sie einfach und schnell neue Layouts erstellen, indem Sie dem Standard-Plugin mehr Designelemente hinzufügen.

Laden Sie Elementor herunter

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. JetElements 

Dieses Plugin erweitert Ihr Elementor-Bundle um eine Vielzahl von Modulen, die beim Erstellen Ihrer Website äußerst nützlich sind. Leistungsstarke Elemente wurden speziell für die Integration in die Funktionalität von Elementor entwickelt, um Ihnen vielseitige Lösungen und stilvolle Elemente zu bieten.

Elementor WordPress Plugin Jetelement

Die Hauptmerkmale sind: viele nützliche Module, die viele Stiloptionen, Funktionsparameter und absolut anpassbare Elemente enthalten, unglaubliche Elemente, um Ihren Online-Shop schnell zu starten, Unterstützung für RTL-Sprachen, WPML-Plugin-Unterstützung und ein Modul Kontaktformular 7 Erstaunlich, mit dem Sie Ihre Kontaktformulare hinzufügen und in Ihre Website einbetten können.

Download | Demo | Web-Hosting

2. JetMenu 

JetMenu ist eine Erweiterung sehr funktional Plugin Elementor, mit dem Sie erstellen können megamenus mit benutzerfreundlichen Bildlaufelementen. Dieses Plugin schränkt Ihre Vorstellungskraft nicht ein und hat das Potenzial, fantastische Menüs zu erstellen und sie entsprechend Ihrer Vision und Ihren Bedürfnissen zu überarbeiten.

Jetmenu WordPress Elementor Plugin

Die Hauptmerkmale sind: Es sind keine Programmierkenntnisse erforderlich. reichhaltige Funktionen, die sich perfekt mit Einfachheit und Klarheit verbinden lassen, Eine große Auswahl an Inhaltsmodulen, die speziell für die Erstellung Ihrer Menüs entwickelt wurden, ein ansprechendes Layout und vieles mehr.

Wenn Sie die Menüs oder Megamenüs Ihrer Website aufpeppen möchten, ist dieses WordPress-Plugin zu konsultieren.

Download | Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

3. JetWooBuilder 

JetWooBuilder ist ein unverzichtbares Addon, mit dem Sie mit Elementor vollwertige WooCommerce-Produktseiten erstellen können.

Jetwoobuilder WordPress Elementor Plugin

Als Features finden Sie unter anderem: Mehrere einzigartige Produktseitenvorlagen, viele Grafiken Produktseiten erstellen WooCommerceViele auffällige Inhalts-Widgets wie In den Warenkorb, Vorschau, Bild, Bewertung, Verwandte und viele mehr bieten die Möglichkeit zur Anzeige Produkt Taxonomien und mehr.

Download | Demo | Web-Hosting

Einige nützliche Ressourcen:

Fazit:

Hier ist ! Das war's für dieses Tutorial. Ich hoffe, Sie können damit moderne und professionelle Layouts mit dem Plugin erstellen Elementor.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Teilen Sie diesen Artikel besonders in Ihren verschiedenen sozialen Netzwerken.

...

Dieser Artikel enthält Kommentare 24

  1. Thierry Hallo!

    Vielen Dank für diesen tollen Beitrag.
    Ich benutze ELEMENTOR PRO und habe eine Seite erstellt, auf der ich über ELEMENTOR ein bereits erstelltes Layout heruntergeladen habe. Ich verstehe jedoch nicht, dass dieses in ALLEN meiner Websites zu finden ist ... in meiner gesamten Webarchitektur hat sich geändert und es ist dieses Layout, das ich auf allen Seiten meiner Website finde. Andererseits wurde das alte Layout nicht gelöscht, sondern befindet sich am Ende der Seite. Wenn ich auf "MIT ELEMENTOR BEARBEITEN" klicke, kann ich es nicht löschen. Irgendeine Idee, woher es kommt?
    Ein großes Dankeschön!

  2. Hallo Thierry
    Aus tiefstem Herzen vielen Dank für den Artikel. Jetzt habe ich ein Problem, das mich seit einigen Tagen beschäftigt. Ich bin neu in WordPress und verwende Ocean WP als Thema. Dann habe ich elementor als kostenlose Version installiert. Mit dieser kostenlosen Version habe ich zunächst meine Seiten erstellt und das ist gut, aber das Problem, das mir aufgefallen ist, ist, dass wenn ich meine Seite oder den Artikel veröffentliche, sobald ich ihn habe, die Großbuchstaben nicht nach einem Punkt oder am Anfang meines Satzes erscheinen, ist es notwendig Einstellungen für die Typografie oder die Schriftfamilie, die kurz ausgewählt wurden, damit ich besser verstehen kann, wo sich die kostenlose Version befindet, die nach einem Punkt keine Großbuchstaben enthält. Danke für Ihr Verständnis.

    1. Guten Tag,

      Ich empfehle, dass Sie sich auf der WordPress.org-Seite an den Elementor-Plugin-Support wenden. Sie werden sicherlich eine Antwort von den Autoren finden.

  3. Hallo
    Ich habe meine Homepage über die benutzerdefinierte Registerkarte meiner WordPress-Oberfläche erstellt. Warum finde ich das nicht auch in elementor? Auf elementor befindet sich meine Menüleiste nicht am selben Ort und ich habe kein Logo! Ich bevorzuge WordPress, aber wenn ich meine Seite visualisiere, erscheint die Homepage von elementor! Können Sie mir sagen, wie es geht?
    Vielen Dank p

  4. Guten Tag,
    Ich habe ein Problem Seit einigen Monaten habe ich meine Website, auf der ich dieses Element verwende, nicht aktualisiert. Heute habe ich versucht, es zu tun, aber ich habe ein Problem. Die meisten Abschnitte zeigen mir ein durchgestrichenes Kästchen mit dem Wort AUS ABSCHNITT und ich kann nichts tun. Ich kann nur einen Abschnitt der Seite bearbeiten, den, in dem ich den Text selbst habe.
    Wissen Sie, was es kann?

  5. Guten Tag,
    Ich lerne, wie man eine Website mit WordPress erstellt. Elementor ist ein großartiges Plugin. Es hilft sehr. Ich entdecke etwas Neues.
    Auch Probleme;) Ich gehe normalerweise mit Lösungen um. Nicht jetzt.

    Ich habe ein Problem mit der Textbearbeitung. Der Absatz und die Überschriften sind beide starr und ich kann Schriftart, Farbe, Gewicht usw. nicht ändern. Trotz der Änderungen in den Einstellungen ändert sich nichts. Es ist kein Musterproblem, da es eine andere Schriftart und ein anderes Farbschema hat als das, was Elementor mir gibt.
    Ich weiß nicht, wie ich diesen Vorlagenparameter ändern soll, der mir selbst mit Header 1 passiert ist, aber ich habe ihn durch Eingabe von HTML-Code in den Header geändert und geholfen, jetzt funktioniert es nicht mehr.

    Wie wird sich das ändern? - Bitte helfen Sie.

    1. Guten Tag,

      Versuche alle WordPress Plugins zu deaktivieren und versuche es erneut. Wenn Ihr Problem gelöst ist, wenn alle deaktiviert sind, aktivieren Sie sie nacheinander, und überprüfen Sie jedes Mal.

      Wenn es sich um ein Kompatibilitätsproblem mit einem anderen Plugin handelt, wissen Sie, welches.

  6. Bonsoir.
    Ich habe ein Foto auf der Website (Landing Page) hinzugefügt und versucht, zu einem anderen zu wechseln, das ich nicht… mehrmals löschen konnte, und ich habe das neue Foto eingefügt, aber es wird nicht geladen… das alte Foto bleibt…
    Könntest du mir helfen?

  7. Hallo und vielen Dank für diesen Artikel, der meine Wahl von Elementor als meinen Seitenersteller bestätigt. ^^

    Was halten Sie andererseits von der Erstellung einer untergeordneten Site vor Änderungen? Ist das bei Elementor notwendig?

    Ich befürchte, dass alle vorgenommenen Änderungen beim Aktualisieren des Themas überschrieben werden. Gibt es kein Risiko?

    Ich danke dir für deine Antwort,
    Bien à vous,
    Nicolas

  8. Hallo und vielen Dank für diesen sehr interessanten Artikel.
    Ich habe angefangen, Elementor zu verwenden, und habe mich gefragt, ob es notwendig ist, bevor ich ein untergeordnetes Thema für das von mir verwendete erstellt habe. Besteht andernfalls nicht das Risiko, dass die Aktualisierungen des Themas oder der Plugins das mit Elementor erstellte Layout überschreiben?
    Ich danke dir für deine Rückkehr,

  9. Guten Tag,

    Ich möchte wissen, wie ich den PHP-Code der ELEMENTOR-Erweiterung erhalten kann, um ihn in meine Homepage zu integrieren.

    Vielen Dank für Ihre Aufmerksamkeit auf meine Anfrage.

  10. Guten Tag,

    sehr interessanter Artikel.
    Ich habe eine Frage an den Pro-Elementor, den Sie sind.
    Ist es möglich, in den generierten Formularen eine Methode = "POST" hinzuzufügen?

    Jeanson

  11. Sehr guter Artikel, möchte Gan fragen, wann ich angefangen habe, zu Elementor zu gehen, oder warum es so aussieht, als gäbe es einen Header und eine Footernya, wie man leer aussieht

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Zurück nach oben