So erstellen Sie eine Landing Page mit Elementor und PowerPack

WordPress hat es jedem leicht gemacht, seine Online-Präsenz aufzubauen, sei es ein Blog, eine Unternehmenswebsite oder ein komplexes ERP. WordPress-Themes und -Plugins machen es Benutzern sogar einfach, ihre Websites zu erstellen, ohne sich um die Einstellung eines Experten kümmern zu müssen. Page Builder-Plugins haben eine entscheidende Rolle bei der Transformation der Art und Weise gespielt, wie Websites mit WordPress erstellt werden. Elementor ist ein solches beliebtes Page Builder-Plugin.

Wenn Sie ein Webdesigner sind und Ihre Designs zum Leben erwecken möchten, ohne sich um den Code kümmern zu müssen, können Sie Elementor verwenden. Aber was ist, wenn Sie Entwickler sind? Nun, wenn Sie ein Entwickler sind, können Sie Elementor aufgrund seiner entwicklungsfreundlichen Funktionalität und der einfach zu erweiternden API ebenfalls verwenden.

In diesem Beitrag erfahren Sie mehr über Elementor und wie Sie es mit Elementor-Addons verwenden können, um schnell Websites, Landing Pages und Popups zu erstellen.

Was ist Elementor?

Elementor ist ein beliebtes Page Builder-Plugin für WordPress. Elementor bietet gebrauchsfertige Inhaltsblöcke, sogenannte Widgets, zusammen mit grundlegenden Strukturelementen wie Abschnitten und Spalten.

Sie können diese Widgets per Drag & Drop auf jede Seite Ihrer WordPress-Website ziehen und ein benutzerdefiniertes Layout nach Ihren Bedürfnissen erstellen.

Elementor Pro wird mit mehr als 60 Widgets und vielen vorgefertigten Vorlagen geliefert, mit denen Sie jede Seite gestalten können.

Funktionen von Elementor

Elementor bietet viele Funktionen und Funktionen, die die Entwicklung Ihrer Website komfortabler und schneller machen können. Lassen Sie uns all die beeindruckenden Funktionen von Elementor sehen, die es wert sind, es zu haben.

Schnell und einfach zu bedienen

Elementor ist auf Leistung optimiert. Selbst wenn Sie ein Anfänger sind, werden Sie es sehr einfach finden und mühelos in Elementor navigieren. Sie werden nie das Gefühl haben, dass Elementor Sie in Ihrem Designprozess zurückzieht und die Dinge für Sie nur schnell und einfach macht.

Während Elementor rasend schnell ist, können Sie mehr aus Elementor herausholen, wenn Sie Cloudways Elementor-Hosting verwenden. Bei CW dreht sich alles um Leistung und bietet eine hervorragende Kontrolle darüber, wie Ihr Server funktioniert. Wenn es um Sicherheit geht, bietet Cloudways wirklich zuverlässige und sichere Server, die ihren proaktiven Sicherheitspraktiken unterliegen, um Ihre Server sicher und geschützt zu halten. Die Anzahl der Funktionen, die Cloudways bietet, ist heutzutage in der Branche schwer zu finden.

Vorgefertigte Seitenvorlagen

Mit Elementor erhalten Sie viele vorgefertigte Vorlagen, mit denen Sie mit einem einzigen Klick eine Webseite erstellen können. Es gibt Vorlagen für fast jede Webseitenkategorie wie Landing Page, About Page usw. und können den Website-Designprozess viel schneller machen.

Wenn Sie in der Elementor-Bibliothek keine gute Vorlage finden, können Sie Elementor-Vorlagen von Drittanbietern ausprobieren. Mit einer florierenden Community von Designern und Entwicklern ist es ganz einfach, Elementor auf die nächste Stufe zu heben.

Geladen mit Widgets

Sowohl die kostenlose als auch die Pro-Version Elementor wird mit funktionsgeladenen Widgets geliefert. Von einfachen Inhalts-Widgets wie Überschriften, Texteditor, Schaltflächen bis hin zu erweiterten Widgets wie Beitragsraster, Anmeldeformular, WooCommerce, Social Sharing erhalten Sie mit Elementor viele Funktionen.

Wenn Sie mehr Leistung in Bezug auf Widgets haben möchten, können Sie Elementor-Addons von Drittanbietern ausprobieren. Wir empfehlen, PowerPack für Elementor zu verwenden. Es ist ein führendes Add-On für Elementor und wurde vom gleichen Team wie das beliebte PowerPack Beaver Builder-Add-On entwickelt.

Elementor Popup-Builder

Der Popups-Builder ist eine der neuesten Ergänzungen des Elementor-Builders. Die Popup-Builder-Funktion macht die Verwendung eines Popup-Builder-Plugins eines Drittanbieters auf Ihrer Website überflüssig. Sie können Elementor verwenden, um beeindruckende Pop-ups mit erweiterten Targeting-Regeln und -Funktionen zu erstellen.

Mit der Popup-Builder-Funktion können Sie Anmeldeformulare, Vollbild-Matten, Rabatt-Popups und was nicht erstellen.

Globale Einstellungen

Wenn Sie eine Website erstellen, ist es wichtig, konsistente Farbeinstellungen, Typografie usw. zu verwenden. Sie können die Farben, Schriftarten und sogar die Farbauswahl im Voraus anpassen, um Ihren Designprozess mit globalen Einstellungen in Elementor zu vereinfachen.

Erstellen Sie Thementeile wie Kopfzeile, Fußzeile, Archive usw.

Mit Elementor ist Ihr Design nicht nur auf den Inhaltsbereich einer Seite beschränkt . Sie können eine benutzerdefinierte Kopfzeile, Fußzeile, Seitenleiste und fast jeden Teil der Website erstellen, ohne sich um das Schreiben von Code kümmern zu müssen. All dies kann ganz einfach mit der Theme Builder-Funktion in Elementor Pro erstellt werden.

Dynamischer Inhalt

Mit der Dynamic Content-Funktion in Elementor Pro können Sie dynamische Daten/Inhalte aus benutzerdefinierten WordPress-Feldern, ACF, Toolset, Pods, MetaBox oder jedem anderen benutzerdefinierten Feld-Plugin anzeigen. Sie können die Daten aus benutzerdefinierten Feldern verwenden und sie mit Elementor-Widgets in jedem Teil Ihrer Site anzeigen. Weitere Informationen zu dynamischen Inhalten finden Sie hier.

Lite- und Pro-Version

Elementor hat zwar viel zu bieten, aber es ist nicht notwendig, dass die Benutzer einen großen Betrag bezahlen müssen, um darauf zugreifen zu können. Tatsächlich hat Elementor zwei Versionen, Lite und Pro. Sie können in der Lite-Version selbst auf viele Funktionen von Elementor zugreifen. Beide Versionen haben ihre eigenen Funktionen zu bieten. Hier ist ein detaillierter Vergleich von Elementor Lite und Pro, der Ihnen bei der Entscheidungsfindung helfen kann.

PowerPack für Elementor

Elementor ist definitiv das Gesamtpaket. Das einzige Tool, das Sie benötigen, um mit einem minimalen Lernwinkel mit der Gestaltung von Webseiten zu beginnen.

Es kann vorkommen, dass Sie sich bei der Verwendung von Elementor etwas eingeschränkt fühlen. Dafür kommen gut codierte Add-Ons von Drittanbietern wie das PowerPack Elementor-Add-On zur Rettung. Dieses Add-On ist eines der besten seiner Kategorie und bietet hervorragende und beeindruckende Widgets mit vielen Anpassungsoptionen für Benutzer.

Derzeit gibt es mehr als 50 Widgets in der Pro-Version von PowerPack, und das Team fügt ständig neue Widgets hinzu, was es zu einer guten Wahl unter den Elementor-Addons macht.

PowerPack wird von einem Team erfahrener WordPress-Entwickler und -Designer mit Blick auf Leistung entwickelt. Das Plugin ist gut codiert und wird regelmäßig aktualisiert, um die Kompatibilität mit den neuesten Versionen von Elementor und WordPress zu gewährleisten

Sehen wir uns an, wie Sie Elementor und das PowerPack-Add-on zusammen verwenden können, um fantastische Webseiten zu erstellen.

Erstellen einer Landingpage

In diesem Tutorial erfahren Sie, wie Sie mit Elementor und dem PowerPack Elementor Add-On eine schnelle Landingpage erstellen können. Der Einstieg in Elementor ist dank der benutzerfreundlichen Oberfläche ganz einfach.

Bitte stellen Sie sicher, dass sowohl Elementor als auch PowerPack auf Ihrer Site installiert sind. Sie können die kostenlosen Versionen über die folgenden Links herunterladen:

1. Elementor
2. PowerPack Lite für Elementor

Erstellen einer Seite mit Elementor

Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und klicken Sie unter Seiten auf die Option Neu hinzufügen . Geben Sie Ihrer Seite nun einen Titel/Namen und klicken Sie auf die Schaltfläche Mit Elementor bearbeiten .

In diesem Tutorial erstellen wir eine Landingpage für eine Pizzeria, also benennen wir unsere Seite entsprechend. So sollte unser Endergebnis aussehen:

Beginnen Sie mit dem ersten Abschnitt . Bevor wir dies tun, ändern Sie das Layout in Elementor Canvas, indem Sie auf das kleine Einstellungssymbol in der unteren linken Ecke des Editors klicken.

Schritt 1: Heldenabschnitt

Der Heldenbereich besteht aus einem Hintergrundbild, zwei Überschriften-Widgets und einer CTA-Schaltfläche.

Klicken Sie zunächst auf das Plus-Symbol und fügen Sie aus den Optionen eine einzelne Spaltenstruktur hinzu. Gehen Sie nun zu den Abschnittseinstellungen und aktivieren Sie die Option Abschnitt strecken und setzen Sie die untere und obere Polsterung auf der Registerkarte Erweitert auf 250 .

Jetzt können Sie das gewünschte Bild für den Hintergrund aus der Registerkarte Stil> Hintergrundtyp> Klassisch auswählen und das Bild aus der Medienanzeige auswählen.

Wir haben den Hintergrund bereit. Jetzt fügen wir die Titel und die Schaltfläche zu unserem Heldenbereich hinzu.

Ziehen Sie das Doppelüberschrift-Widget auf die Seite und legen Sie es dort ab und ändern Sie den Text entsprechend. Stellen Sie nun sicher, dass Sie die erste und zweite Überschrift entsprechend aufteilen , um den Preis stärker hervorzuheben, wie wir es im Bild unten getan haben. Ändern Sie die Typografie für beide Teile der Überschrift.

Es gibt viele andere Änderungen, die Sie vornehmen können, um Ihren Heldentitel so zu gestalten, wie Sie es möchten.

Nachdem Sie die Änderungen vorgenommen haben, ziehen Sie ein weiteres Überschriften-Widget unter die Doppelüberschrift und legen Sie es ab und ändern Sie die Text- und Typografieeinstellungen nach Bedarf. Hier habe ich die Textgröße auf 90 , die Schriftart auf Elsie und die Schriftstärke auf 600 geändert.

Jetzt fügen wir die CTA-Schaltfläche hinzu .

Ziehen Sie das Elementor Button-Widget per Drag & Drop in den Abschnitt direkt unter dem Überschriften-Widget. Jetzt beginnen wir, die Einstellungen für die Schaltfläche zu ändern.

Hier sind die Änderungen, die ich an der Schaltfläche vorgenommen habe:

• Geänderter Text, um jetzt zu bestellen!
• Zentriert die Schaltfläche.
• CTA-Link hinzugefügt
• Typografie in Elise geändert ; 24;600 für Schriftart, Größe und Gewichtung.
• Die Hintergrundfarbe wurde in Rot ( #ff0000 ) und die Schriftfarbe in Weiß ( #ff0000 ) geändert .
• Polsterung 18, 40, 18, 40 für oben, rechts, unten bzw. links hinzugefügt.

Nachdem Sie die Änderungen vorgenommen haben, sieht der Heldenbereich so aus.

Schritt 2: Der About-Bereich

Jetzt arbeiten wir am Abschnitt About. Fahren Sie fort und fügen Sie der Seite eine zweispaltige Struktur hinzu, indem Sie auf das Symbol "+" klicken.

Jetzt möchten wir ein ähnliches Layout wie dieses erstellen, also fügen wir ein Überschriften-Widget, ein Texteditor-Widget und das Testimonials-Widget zur linken Spalte hinzu. In der rechten Spalte fügen wir ein Überschriften-Widget, ein Text-Widget und das Schaltflächen-Widget hinzu.

Beginnen Sie einfach mit dem Ziehen und Ablegen der Widgets in den Abschnitt und ändern Sie sie so, dass sie wie im obigen Bild aussehen. Fügen Sie den Titel hinzu und ändern Sie die Typografie dafür.

So wird es aussehen:

Fügen Sie nun den Texteditor unterhalb des Titels in der linken Spalte hinzu und ändern Sie die Typografie in die unten angezeigte.

Jetzt fügen wir das Testimonial-Karussell-Widget unter dem Texteditor-Widget hinzu. Fügen Sie die "Artikel" oder Testimonials hinzu, die auf Ihrer Website angezeigt werden sollen. Sie können auch das Testimonials-Widget von PowerPack verwenden, das viel mehr Anpassungsmöglichkeiten bietet.

Sobald Sie mit den Änderungen fertig sind, sollte die linke Spalte Ihres About-Bereichs so aussehen.

Fügen Sie nun für die rechte Spalte den Hintergrund hinzu, um dem Abschnitt einen kleinen Kontrast hinzuzufügen.

Erstellen Sie nun ein Duplikat der Überschrift, die wir in der linken Spalte erstellt haben, und ziehen Sie es per Drag & Drop in die rechte Spalte. Machen Sie dasselbe für den Texteditor, da dies Ihnen unnötige Redundanz erspart und auch Zeit spart. Jetzt für die Schaltfläche duplizieren Sie einfach die Schaltfläche aus dem Hero-Bereich und ziehen Sie sie in die rechte Spalte des About-Bereichs.

Richten Sie die rechte Spalte vertikal aus der Bearbeitungsspalte> Layout>Vertikal ausrichten auf die Mitte aus und Sie haben Ihren About-Abschnitt bereit!

Dies ist das Endergebnis des Abschnitts About:

Schritt 3: CTA-Bereich „Mehr wissen“

Wir werden einen weiteren Abschnitt hinzufügen, in dem es um Pizzeria geht. Dieser Abschnitt wird dem zuvor erstellten ähnlich sein, aber die Struktur wird etwas anders sein.

Unser Endergebnis soll also so aussehen:

Ist Ihnen hier Ähnliches aufgefallen?

Jawohl! Die Überschrift und der Texteditor ähneln denen, die wir bereits zuvor erstellt haben. Anstatt also alle Widgets neu zu gestalten, duplizieren wir sie einfach und ziehen sie an ihren Platz.

Lass es uns tun!

Fügen Sie zunächst eine neue zweispaltige Struktur hinzu und gehen Sie zu den Abschnittseinstellungen und fügen Sie das Hintergrundbild aus dem Medienfenster hinzu und fügen Sie die obere Auffüllung von 100 hinzu , um das Panel geräumiger erscheinen zu lassen. Aktivieren Sie außerdem die Option Abschnitt Strecken in den Einstellungen.

Gehen Sie nun zum vorherigen Abschnitt und duplizieren Sie die Überschrift, den Texteditor und das Schaltflächen-Widget . Sie können dies einfach tun, indem Sie mit der rechten Maustaste auf das Widget klicken und die Option Duplizieren auswählen . Nach dem Duplizieren ziehen Sie die duplizierten Widgets per Drag & Drop an ihre neuen Positionen.

So sieht der Abschnitt aus:

Ziehen Sie nun für die rechte Spalte das Bild-Widget per Drag & Drop und wählen Sie das Bild aus der Mediengalerie aus. Passen Sie das Bild in Bezug auf Bildgröße usw. an und wenn Sie fertig sind, sieht der Abschnitt so aus.

Schritt 4: Der Bereich Kontakt/Bestellung

Dies ist der CTA-Bereich, der dem Benutzer bei der Bestellung hilft. Nun, was sollte dieser Abschnitt alles enthalten? Mal sehen, was wir hier erreichen wollen.

Wir müssen zwei Überschriften- und Texteditor-Widgets erstellen, ein Kontaktformular und das Preislistenmenü-Widget von PowerPack.

Zunächst einmal wissen wir, dass wir das Design und das Aussehen der Überschrift und des Texteditors gleich halten müssen. Sie können fortfahren und sie aus dem vorherigen Abschnitt duplizieren und hier platzieren. Ändern Sie nun dort den Text mit dem gewünschten.

Sie können das Formular-Widget in Elementor Pro verwenden, um ein Kontaktformular durch einfachen Drag-and-Drop-Prozess zu erstellen. Sobald Sie dies getan haben, wird das Kontaktformular auf der Seite angezeigt. Jetzt können Sie die Formulare weiter anpassen. Hier sind die Änderungen, die ich vorgenommen habe:

• Formularfelder hinzugefügt und die Feldgröße geändert.
• Text, Größe und Ausrichtung der Schaltfläche wurden geändert .
• Die E-Mail wurde als Aktion für die Schaltfläche zum Senden hinzugefügt und die E-Mail-Details hinzugefügt.
• Spaltenabstände angepasst und Typografie und Farben des Textes und der Felder überarbeitet
• Weitere notwendige Änderungen, um das Kontaktformular ansprechender zu gestalten .

Wenn Sie ein Kontaktformular-Plugin wie Gravity Forms, WPForms, Ninja Forms usw. verwenden, können Sie das Formular-Styler-Widget von PowerPack verwenden, um das Formular mit Elementor zu gestalten.

Jetzt werden wir in der rechten Spalte die Preisliste für die Produkte hinzufügen. Dazu verwenden wir das Preismenü-Widget von PowerPack. Ziehen Sie es einfach per Drag & Drop, fügen Sie die Details hinzu und ändern Sie das Design und Layout dafür. So würde der gesamte Abschnitt aussehen:

Nehmen Sie jetzt am Gewinnspiel teil!

PowerPack-Werbegeschenk gehostet von Cloudways

Aufziehen!

Nachdem Sie alle Änderungen vorgenommen haben, sieht unser gesamtes Layout so aus.

Jetzt können Sie mit Elementor und PowerPack für Elementor auch ein gut aussehendes Layout für sich selbst erstellen. Während Elementor viele Funktionen bietet, erweitert PowerPack es mit kreativen, funktionsorientierten Widgets. Mit über 50 äußerst nützlichen Widgets in Ihrem Toolkit können Sie Websites schneller erstellen.

Elementor und PowerPack können Ihnen Zeit und Mühe sparen und Ihnen helfen, Ihr Webdesign-Geschäft zu skalieren. Darüber hinaus werden beide Produkte von einem großartigen Team von WordPress-Experten unterstützt, sodass Sie sich vollkommen beruhigt fühlen können.