Drag-and-drop page builders are powerful tools.
They gave regular WordPress users the opportunity to create pages and layouts, ähnlich dem, was nur erfahrene Webdesigner konnten vor einem Jahrzehnt tun.
The process of web designing is becoming more user-friendly every year and WordPress is the best platform for non-tech-savvy users.
Was Sie in diesem Artikel:
- Warum eine Seite Builder-Plugin mit notwendig
- Der Unterschied zwischen den Schnittstellen-Plugins
- Der eigentliche Prozess einen Abschnitt mit einer Seite Erbauer des Entwerfens
- Die zur Verfügung stehenden Elemente für beide Plugins
Das Web verändert sich schnell und Webmaster wollen eine flexible Umgebung ihre Websites mit einer ähnlichen Phase zu ändern.
Having a website is no longer a “set it and forget it” thing, another contact channel just to fill in the info on your business card.
Heute sind die meisten der Themen auf den Markt kommen mit irgendeiner Art von visuellen Seite Builder. Dies gibt dem Besitzer die Möglichkeit, auf einfache Weise das Aussehen ihrer Websites und aktualisieren die Dinge schnell zu verwalten, wenn nötig, ohne die Einstellung einer professionellen.
Warum benötigen Sie einen Page Builder?
Lassen Sie uns in einem der beliebtesten Themen auf dem Markt einen Blick – Die Genesis Rahmenthemen.
Der Genesis-Framework ist für seinen sauberen Code bewertet, Geschwindigkeit, Sicherheit und SEO Freundlichkeit.
Die Themen sind stilvoll, clean, and completely inflexible.
Wenn Sie einen Blick auf jeden Genesis Rahmen Kind Thema nehmen, you’ll see the same issues with all of the themes – Sie sindvordefinierten!
Zum Beispiel, Sie können die LiebeEssence Pro wenn Sie zum ersten Mal das Thema Demo sehen. Let’s say you decide that this is your theme and you buy it.
What you’ll probably find out later, except for the complicated setup to make it look like the demo, ist, dass Sie absolut keine Kontrolle über Ihre Layouts. Sie sind ein paar Widgets gegeben und das ist es!
Für Genesis Rahmen, selbst einfache Aufgaben wie eine Suche nach Ihrem Header hinzugefügt, or changing the colors of your site are made so complicated and frustrating even for experienced users.
Wenn Sie einen neuen Abschnitt auf Ihrer Homepage verfügen, list new services, or anything else, werden Sie stecken.
And that’s the reality with most of the predefined “section ready” Themen.
Elementor hat ein Freie Version. Sie können den Helden Abschnitt und einige weitere grundlegende Designs erstellen, aber Sie haben keinen Zugriff auf den Premium-Widgets haben und Elemente.
Lassen Sie uns in sie jetzt bekommen. Ich werde eines des am häufigsten verwendeten Abschnitt macht, dass fast jede Website oder Zielseite– der Held Abschnitt, sowohl mit Grund- und WPBakery Page Builder.
Held Abschnitt mit WPBakery Page Builder
Dies ist, was Ihre Besucher sehen zuerst, so dass Sie besser greifen ihre Aufmerksamkeit mit klaren Botschaften und Design.
Wie ein Held Abschnitt mit WPBakery Page Builder erstellen?
- Stellen Sie sicher, dass Sie alle Sidebars deaktiviert haben und vorzugsweise wählen Sie ein voller Breite Layout, wenn Sie die Möglichkeit, auf Ihrer Seite / Thema Einstellungen haben.
- Switch to “Backend editor” (dies wird die Seite Builder anstelle des klassischen Texteditor ermöglichen) then click the “Add Element” Taste. Choose “Row”.
Hinweis: Sie können auch das Frontend Editor von WPBakery Page Builder verwenden, aber ich finde es einfacher, im Backend arbeiten.
Fügen Sie zuerst eine leere Zeile
- The row columns’ layout
- Row-Einstellungen – Von hier aus legen Sie den Hintergrund, Breite, setting margins and padding, und mehr.
- Dies ist der Stil der Säule
- Von hier fügen Sie Ihre Elemente (Inhalt)
Der Held Abschnitt muss ein Hintergrundbild. Kopf an die Zeileneinstellungen (2). Auf der ‚Allgemeine’ Register gesetzt die Zeile durch Dehnung ‚Stretch row‘, dies wird Ihre Reihe voller Breite machen.
Dann gehen Sie auf die ‚Gestaltungsmöglichkeiten’ Tab.
Hier können Sie Ihren Helden Bild auswählen und die Zeile Polsterungen gesetzt, Dies ist notwendig, um genügend Platz um Ihre Elemente zu erhalten.
Im Drop-Down-Menü, unter dem Vorschaubild, die Option auf ‘Abdeckung'.
Hinweis: Sie können mit den Polsterungen spielen die gewünschte Höhe Ihrer Reihe zu bekommen. Ich wähle Prozent, Sie können jedoch verwenden px, em, or rem Werte.
Klicken Sie auf Änderungen speichern.
Hinweis: Später, als ich die Überschriften hinzugefügt änderte ich die Top-Polsterung 10%.
[Warnhinweis]Die Standard-Hintergrundoptionen von WPBakery Page Builder sind sehr begrenzt. Sie können Overlays hinzufügen, Parallaxeneffekte, Gradienten und mehr mit irgendwelchenzusätzliche Add-ons.[/Warnhinweis]What you should get is an excellent full-width section ready for some extra elements.
Adding text and a Call-to-Action button
WPBakery Page Builder kommt mit seiner eigenen Gewohnheit Heading Element.
Für dieses Beispiel, wir werden zwei benutzerdefinierte Überschrift Elemente verwenden, die zweite wird die Rolle eines Hierher spielen.
Wählen Sie Ihre gewünschte Schriftart, Größe, color and align them in the element’s settings screen.
Clone the element for the subheading and just change the text and the size to a smaller one.
Klicken Sie auf das kleine Pluszeichen unter Ihrem Element ein CTA hinzufügen.
Wählen Sie den ‚Button’ element and select your preferred settings (Größe, Farbe, URL etc.). Remember to add some padding to give your CTA space to breathe – gehen Sie zu den ‚Design-Optionen’ Registerkarte Ihres Knopf und addieren 15px Top-Polsterung!
…und voila!
Unser Held Abschnitt ist bereit, einige Klicks zu bekommen.
Held Abschnitt mit Elementor Pro
Lassen Sie uns das gleiche Beispiel versuchen, aber dieses Mal mit Elementor Pro.
Der wesentliche Unterschied besteht darin, dass Elementor ein Frontend-Seite Builder ist nur, sobald Sie klicken Sie auf den ‚Bearbeiten mit Elementor’ Button Sie werden von Ihrem Backend weitergeleitet.
Both page builders have very different interfaces and approaches to design.
Das wichtigste zuerst, Sie wollen loswerden jede Sidebar erhalten Sie den Seitentitel haben könnte und verstecken.
Dann klicken Sie auf das Plus-Symbol lila einen neuen Abschnitt hinzufügen. Bevor wir das Bild und die Überschrift hinzufügen, gibt es einige Arbeit in den Zeileneinstellungen vorgenommen werden.
Wenn Sie den Abschnitt schweben über, drei kleine Symbole erscheinen in der linken oberen Ecke. Klicken Sie auf die mittlere (das 6 dots) und das Einstellungsfenster auf der linken Seite erscheinen.
Um eine schöne volle Breite Abschnitt wiederum auf die bekommen Stretch Abschnitt Option und aus dem Inhaltsbreite Drop-down-Auswahl Gesamtbreite.
In dem Stil Tab, Sie können Ihre Schriftfarbe einstellen, Ausrichtung und.
Bewegen Sie die Maus wieder und ein weiteres kleines Symbol in der linken oberen Ecke erscheinen, das ist, wo wir unser Bild platzieren und die Polsterungen gesetzt.
Beachten Sie, dass Ihr Hintergrund wird nicht angezeigt, bis Sie Ihr ein Element hinzufügen.
Klicken Sie auf das Plus-Symbol und ziehen Sie die Überschrift Widget auf Ihren Abschnitt. Ziehen Sie dann wieder eine andere Position für die Tarifstelle und ziehen schließlich eine Taste unterhalb der beiden.
Klicken aktualisierenund dein Held Abschnitt ist fertig.
Hier ist das Endergebnis.
Elementor oder WP Bakery Page Builder?
Wenn Sie einen Front-End Drag-and-Drop-Seite Builder – Elementor ist die bessere Wahl. Es hat auch eine kostenlose Version, die möglicherweise für einige Nutzer völlig ausreichen. Es ist auch intuitiver und einfacher zu gewöhnen. Wenn Sie möchten, kreativ erhalten, Ich denke, WP Bakery ist, die Sie erhalten sollten. In Kombination mit einigen der Premium-Add-Ons auf dem Markt wird es ein mächtiges Werkzeug zu schaffen fast alles.
Offenlegung: Einige der Links auf der Seite können einen Referenzcode enthalten (Affiliate-Links), das sagt der anderen Seite, dass wir dich geschickt haben. Wenn Ihnen unser Vorschlag gefallen hat und Sie einen Kauf tätigen, wir können eine Provision erhalten.
