Springe zum Hauptinhalt

Wie ein benutzerdefiniertes Layout mit Elementor erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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 Ihre eigenen Layouts in WordPress erstellen? Möchten Sie einfach eine Website mit professionellem Erscheinungsbild erstellen? Also musst du 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 auf einfache Weise mit wenigen Klicks benutzerdefinierte WordPress-Layouts erstellen. Wir bieten 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.

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 zur Erstellung von WordPress-Seiten, mit dem Sie ganz einfach und ohne Programmierkenntnisse Ihre eigenen WordPress-Layouts 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 einsatzbereite 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

Zunächst 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 Wie installiere ich ein WordPress-Plugin?.

Nach der Aktivierung besuchen Sie die Seite " Element oder> Einstellungen So konfigurieren Sie den Betrieb dieses Plugins.

Hier können Sie "Elementor" für verschiedene Publikationsarten aktivieren. Standardmäßig ist es für Ihre Artikel und WordPress-Seiten aktiviert. Wenn Ihre Website benutzerdefinierte Veröffentlichungsformate enthält, werden diese ebenfalls hier angezeigt und können auch aktiviert werden.

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

Entdecken Sie unsere 8 WordPress-Plugins zum Verwalten von Rollen und Benutzern

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

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Erstellen eines benutzerdefinierten Layouts mit Elementor

Zunächst müssen Sie eine neue Seite (oder einen neuen Beitrag) auf Ihrer WordPress-Website erstellen. Auf der Publikationsseite sehen Sie die neue Schaltfläche "Mit Element bearbeiten".

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

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.

Aktivieren Sie nun das gewünschte Modell und klicken Sie auf die Schaltfläche einfügen Um es zu Ihrer Seite hinzuzufügen.

Elementor lädt die Vorlage für Sie.

Sie können nun mit der Bearbeitung der Vorlage beginnen, um sie Ihren Bedürfnissen 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.

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.

Sie können Ihren Spalten und Abschnitten Elemente hinzufügen, indem Sie die von Elementor bereitgestellten Widgets verwenden.

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

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

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]

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

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

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

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

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

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

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

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 weitere 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 von großem Nutzen sind. Leistungsstarke Elemente wurden speziell entwickelt, um in die Funktionen von Elementor integriert zu werden und Ihnen schließlich vielseitige Lösungen und elegante Elemente zu bieten.

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 integrieren 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.

Seine Hauptmerkmale sind: Es sind keine Kenntnisse in der Codierung erforderlich, ab reiche Funktionen, die sich perfekt mit Einfachheit und Klarheit verbinden, 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

3. JetWooBuilder

JetWooBuilder ist ein unverzichtbares Addon, mit dem Sie mit Elementor vollwertige WooCommerce-Produktseiten erstellen 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]

Als Features finden Sie unter anderem: Mehrere einzigartige Produktvorlagen, viele visuelle Elemente Produktseiten erstellen WooCommerce, Viele einprägsame Inhalts-Widgets, wie "In den Einkaufswagen", "Vorschau", "Bild", "Notation", "Verwandte" und viele andere, bieten die Möglichkeit zum Anzeigen Produkt Taxonomien und mehr.

Download | Demo | Web-Hosting

Einige nützliche Ressourcen:

Fazit:

Das ist alles für dieses Tutorial. Ich hoffe, dass Sie damit moderne und professionelle Layouts mit dem Plugin erstellen können 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 23
  1. Hallo Thierry
    Herzlichen Dank für den Artikel. Jetzt habe ich ein Problem, das mich einen Tag lang gestört hat: Ich habe mit WordPress angefangen und ich verwende Ocean WP als Thema und dann habe ich Elementor in der kostenlosen Version installiert, sodass ich mit dieser kostenlosen Version meine Seiten erstelle und das ist gut so, aber das problem, das mir aufgetaucht ist, ist, dass es notwendig ist, wenn ich meine seite oder den artikel mit den großbuchstaben nach einem punkt oder am anfang meines satzes veröffentliche Die von mir gewählten Einstellungen für Typografie oder Schriftfamilie helfen mir, besser zu verstehen, wo es sich bei der kostenlosen Version um eine Version handelt, bei der nach einem Punkt kein Kapital mehr vorhanden ist. Vielen Dank 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.

  2. Guten Tag
    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

  3. Guten Tag,
    Ich habe ein Problem In den letzten Monaten habe ich meine Website, auf der ich dieses Element verwende, nicht aktualisiert. heute habe ich es versucht, aber ich habe ein Problem, die meisten Abschnitte zeigen mir eine Box mit dem Wort OFF SECTION und ich kann nichts tun. Ich kann nur einen Abschnitt der Seite bearbeiten, in dem ich den Text selbst habe.
    Wissen Sie, was es kann?

  4. Guten Tag,
    Ich lerne, eine Website mit WordPress zu bauen, Elementor ist ein großartiges Plugin, es lässt viel zu, 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 Kopfzeilen sind beide starr und ich kann die Schriftart, Farbe, Dicke usw. nicht ändern. Trotz der Änderungen in den Einstellungen ändert sich nichts. Dies ist kein Musterproblem, da sich Schriftart und Farbschema von Elementor unterscheiden.
    Ich weiß nicht, wie ich diesen Template-Parameter geändert habe, der mir mit dem 1-Header passiert ist, aber ich habe ihn geändert, indem ich den HTML-Code in den Header eingegeben habe und geholfen habe, jetzt funktioniert es nicht.

    Wie wird sich das ändern? - Bitte helfen.

    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.

  5. Bonsoir.
    Ich habe ein Foto auf der Seite (Landing Page) hinzugefügt und ich habe versucht, es zu ändern. Ich konnte nicht ... mehrmals löschen und das neue Foto einfügen, aber es lädt nicht ... das alte Foto bleibt ...
    Könntest du mir helfen?

  6. Hallo und vielen Dank für diesen Artikel, der mich bei der Wahl von Elementor als Page Builder unterstützt. ^^

    Auf der anderen Seite, was denkst du über die Erstellung einer Child-Site vor Änderungen? Ist es notwendig mit Elementor?

    Meine Befürchtung ist, dass alle vorgenommenen Änderungen beim Aktualisieren des Themas überschrieben werden? Gibt es kein Risiko?

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

  7. Hallo und vielen Dank für diesen sehr interessanten Artikel.
    Ich begann Elementor zu verwenden und fragte mich, ob es nicht notwendig war, bevor ich fortfuhr, ein Kind-Thema von dem zu erstellen, das ich benutze. Wenn nicht, besteht nicht das Risiko, dass das Design oder Plug-in-Elemente das integrierte Layout mit Elementor überschreiben?
    Ich danke dir für deine Rückkehr,

  8. Guten Tag,

    Ich würde gerne wissen, wie man den PHP-Code der Erweiterung ELEMENTOR hat, um ihn auf meiner Homepage zu integrieren?

    Ich danke Ihnen für Ihre Aufmerksamkeit auf meine Anfrage.

  9. Guten Tag,

    sehr interessanter Artikel.
    Ich habe eine Frage für das Pro-Element oder das du bist.
    Kann in den generierten Formularen eine Methode = "POST" hinzugefügt werden?

    Jeanson

  10. sehr guter Artikel, gan möchte fragen, als ich begann, zum Elementor gehen, oder warum es scheint, dass es eine Kopfzeile und Footernya, wie man leer aussieht

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
23 Aktien
Aktie18
tweet
Registrieren5