Springe zum Hauptinhalt

Wie ein benutzerdefiniertes Layout mit Elementor erstellen

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 554.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 benutzerdefinierten Layouts in WordPress erstellen? Möchten Sie Ihre Website einfach und professionell gestalten? Also musst du Laden Sie Elementor hier herunter.

Elementor ist ein WordPress-Seitengenerator mit "Drag and Drop", mit dem Sie ganz einfach benutzerdefinierte Layouts auf WordPress ohne Programmierkenntnisse erstellen können. In diesem tutorielWir zeigen Ihnen, wie Sie einfach benutzerdefinierte WordPress-Layouts mit erstellen können Elementor mit ein paar Klicks.

Warum und wann benötigen Sie benutzerdefinierte Layouts auf WordPress?

Viele kostenlose und Premium-WordPress-Themes bieten mehrere Layout-Optionen für verschiedene Arten von Seiten. Manchmal jedoch erfüllt keine dieser Bestimmungen Ihre Bedürfnisse.

Wenn Sie PHP, HTML und CSS programmieren können, können Sie eigene Seitenvorlagen erstellen oder sogar ein untergeordnetes Thema für Ihre Website erstellen. Die meisten WordPress-Benutzer sind jedoch keine Entwickler, daher funktioniert diese Option nicht für sie.

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

Genau das tut Elementor. Dies ist ein Drag-and-Drop WordPress-Seitenerstellungs-Plugin, 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 Live-Vorschau erstellen können. Es enthält viele fertige Module für alle Arten von Webdesign-Elementen.

Es gibt mehrere professionell gestaltete Vorlagen, die Sie sofort laden und als Ausgangspunkt verwenden können. Es funktioniert mit allen standardkompatiblen WordPress Themes und ist mit allen gängigen WordPress Plugins kompatibel.

Lassen Sie uns nun sehen, wie Sie mit Elementor benutzerdefinierte WordPress-Layouts erstellen können.

Erste Schritte mit Elementor

Zuerst müssen Sie das Plugin kaufen " Elementor Pro “. Dies ist die kostenpflichtige Version des Plugins Elementor Kostenlos und bietet Ihnen Zugriff auf zusätzliche Funktionen und 1-Unterstützung.

Dann müssen Sie das Elementor Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-AnleitungInstallieren Sie ein Plugin WordPress.

Bei der Aktivierung müssen Sie die Seite besuchen " Elementor> Einstellungen Um die Plugin-Einstellungen zu konfigurieren.

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

Erstellen Sie ganz einfach Ihr Blog mit SiteGround

Mit SiteGround können Sie Ihr WordPress-Blog mit nur wenigen Klicks erstellen. Kostenloser Domainname, sicheres Hosting, SSL, Transfer und vieles mehr ... [Empfohlen]

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.

Vergessen Sie nicht, auf die Schaltfläche "Änderungen speichern" zu klicken, um Ihre Einstellungen zu speichern.

Erstellen des benutzerdefinierten Layouts mit Elementor

Zuerst müssen Sie eine neue Seite (oder Post) auf Ihrer WordPress-Website erstellen. Auf dem Bearbeitungsbildschirm für Veröffentlichungen sehen Sie die neue Schaltfläche "Mit Elementor bearbeiten".

Wenn Sie darauf klicken, wird die Elementor-Benutzeroberfläche aufgerufen, auf der Sie Ihre Seite mit dem Builder für Element- oder Drag & Drop-Seiten bearbeiten können.

Sie können nun Abschnitte hinzufügen und Ihre Seite von Grund auf neu erstellen oder eine Vorlage hinzufügen.

Modelle sind ein schneller Weg, um schnell zu beginnen. Elementor kommt mit mehreren professionell gestalteten Vorlagen, die Sie beliebig anpassen können.

Beginnen wir mit einer Vorlage, indem wir auf die Schaltfläche klicken Fügen Sie eine Vorlage hinzu ».

Dadurch wird ein Popup-Fenster angezeigt, in dem Sie verschiedene Vorlagen sehen können. Sie sollten nach einer Vorlage suchen, die aussieht wie das, was Sie in Ihrem Layout hinzugefügt haben.

Klicken Sie nun auf die gewünschte Vorlage und anschließend auf die Schaltfläche "Einfügen", um sie zu Ihrer Seite hinzuzufügen.

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. [FREE]

Elementor lädt nun die Vorlage für Sie.

Sie können nun mit der Bearbeitung der Vorlage beginnen, um sie Ihren Anforderungen anzupassen. Zeigen Sie einfach auf ein Element, um es auszuwählen, und Elementor zeigt Ihnen seine Einstellungen in der linken Spalte an.

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

Elementor-Konfigurationen werden mit Abschnitten erstellt, Spalten und Widgets. Die Abschnitte sind als Linien oder Blöcke, die Sie auf Ihrer Seite platzieren.

Jeder Abschnitt kann mehrere Spalten hat, und jede Spalte Abschnitt und kann seinen eigene Arten, Farben, Inhalt, usw.

Sie können Ihren Spalten und Abschnitten etwas hinzufügen, indem Sie die Widgets Elementor-Angebote verwenden.

Diese Widgets sind verschiedene Arten von Inhaltsblöcken, die Sie in Ihren Elementor-Abschnitten platzieren können.

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

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

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

Wenn Sie mit der Bearbeitung fertig sind, können Sie auf die Schaltfläche "Speichern" klicken, um Ihre Änderungen zu speichern.

Remarque: Wenn Sie ein Layout speichern, wird die Seite nicht auf Ihrer WordPress-Website veröffentlicht. Es speichert einfach Ihr Layout.

Sie können jetzt eine Vorschau Ihrer Seite anzeigen oder auf das WordPress-Dashboard zugreifen.

Dies bringt Sie zurück zum WordPress Publishing Editor. Sie können Ihre WordPress-Seite jetzt speichern oder auf Ihrer Website veröffentlichen.

Das ist alles für dieses Tutorial, ich hoffe, dass Sie damit Layouts mit dem Plugin erstellen können Elementor.

Einige nützliche Ressourcen:

Dieser Artikel enthält Kommentare 16
  1. 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?

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

  3. 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?

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

  5. 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,

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

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

  8. 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
25 Aktien
Aktie18
tweet2
Registrieren5
WhatsApp