Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Andreas Hecht 26. Februar 2015

Visueller Seitenbau: WordPress-Themes erstellen per Drag und Drop

Kein Beitragsbild

Visuelle Seitengestaltung für WordPress ist das „nächste große Ding“. Bereits seit längerem geht alles in die Richtung der Seitengestaltung per Drag und Drop. Ohne die sogenannten Page Builder lässt sich fast kein WordPress-Premium-Theme mehr verkaufen. Es ist ja auch sehr praktisch: Vorlagen können importiert werden und Seiten lassen sich ohne Code-Kenntnisse in Minuten einzigartig gestalten. Jedermann kann zu seinem eigenen Designer werden und sein individuelles WordPress-Theme ganz einfach „zusammenklicken“. In diesem Beitrag geben wir Ihnen einen Überblick über die verschiedenen Möglichkeiten der Drag-und-Drop-Seitengestaltung.

visuellerseitenbau-teaser

Drag-and-Drop-Seitengestaltung – die verschiedenen Ansätze

Grundsätzlich gibt es verschiedene Ansätze diser Form der Theme-Gestaltung. Ein Ansatz ist die mögliche komplette Gestaltung eines Themes mit einem WordPress-Plugin, ein anderer Ansatz ist der Erwerb eines Premium-Themes mit einem Page-Builder. Sicherlich gibt es auch kostenlose WordPress-Plugins für diesen Job, doch die Frage ist natürlich, wie die ausgegebene Code-Qualität ist. Schliesslich sind Theme und Plugin nicht aufeinander abgestimmt, sondern das Plugin muss mit der überwiegenden Anzahl an Themes funktionieren. Grundsätzlich zählt nur das, was am Ende dabei herauskommt und das sollte eine individuell gestaltete WordPress-Website mit anständiger Code-Qualität sein, denn auch Google muss die gestaltete Seite für gut genug befinden, um sie einigermaßen ranken zu lassen.

Auf der weltweit bekannten Plattform Themeforest verkauft sich fast kein WordPress-Theme mehr ohne Drag and Drop Page Builder. Die meistverkauften Themes auf dieser Plattform sind deshalb so erfolgreich, weil sie einen hervorragenden Page Builder mit einer fast unendlichen Anzahl an Design-Möglichkeiten integriert haben. Jeder Besitzer eines solchen Themes kann sich seine individuelle Webseite ohne Code-Kenntnisse ganz einfach zusammenklicken.

Drag und Drop kostenlos – zum „Reinschnuppern“

Im folgenden stelle ich Ihnen ein kostenfreies Plugin vor, mit dem Sie die neuen Möglichkeiten zur Seitengestaltung mittels Drag und Drop ausprobieren können. Die mit diesem Plugin verbundenen Möglichkeiten sind bereits recht gut, kommen jedoch nicht im Ansatz an professionelle Lösungen heran, die ich Ihnen weiter unten im Beitrag vorstellen werde.

Massive Visual Page Builder Plugin

Das Massive Visual Page Builder Plugin für WordPress

Dies Plugin zur visuellen Seitengestaltung stellt leider nicht wirklich eine Möglichkeit dar, direkt in das Design der damit verbundenen WordPress-Website einzugreifen. Dafür bietet es indes einen hervorragenden Einblick in die neuen Möglichkeiten des Drag and Drop Systems. Massive Visual Page Builder stellt zum einen eine Möglichkeit dar, Inhalte in Spalten zu präsentieren und zum anderen eine große Menge an Widgets bereit. Unter anderem erhältlich sind Slider, farbige Boxen, Tabellen, Google Maps, Buttons und auch Social-Media-Elemente.

Screenshots der Oberfläche und Möglichkeiten:

Spalten mit Widget-Belegung

Spalten mit Widget-Belegung

 

Einige der zur Verfügung stehenden Widgets

Einige der zur Verfügung stehenden Widgets

 

Einstellungsmöglichkeiten der Spalten

Einstellungsmöglichkeiten der Spalten

 Visual Page Building: Professionelle Drag und Drop Lösungen

Professionelle Lösungen lassen einem Anwender die Freiheit, absolut alles zu beeinflussen, besonders auch das Design der Website an sich. Mit einer kurzen Einarbeitungszeit gelingen hier tolle und individuelle Ergebnisse mit benutzerdefinierter Struktur, Farben, Inhalts-Elementen und Media-Elementen. Die Möglichkeiten zur Gestaltung einer individuellen Website sind vielfältig und die im professionellen Bereich angebotenen Themes und Plugins sind ihr Geld wert, denn es steckt in einem Drag and Drop Page Builder extrem viel Entwicklungsarbeit. Ich stelle Ihnen in diesem Bereich die besten Lösungen entweder als Plugin oder aber als WordPress-Theme vor.

Natürlich gilt – und das will ich hier deutlich vorweg schicken – ohne kreative Ideen nutzt das beste Werkzeug nichts. Da kann der visuelle Pagebuilder noch so ein Knüller sein.

Premium Drag and Drop WordPress-Themes

WordPress-Themes mit integriertem Visual Page Builder haben den Vorteil, dass die visuellen Editoren für das Theme entwickelt worden sind. Auf diese Art und Weise kann eine optimale Funktionalität und Zusammenarbeit mit dem Theme sichergestellt werden. Es gibt daher keinerlei Probleme mit der Ausgabe der visuellen Elemente im Theme, auch nicht im Bereich der Anzeige, denn jedes Element ist im Stylesheet bereits berücksichtigt worden.

Avada | Responsive Multi-Purpose Theme

Avada | Responsive Multi-Purpose Theme

Avada ist das WordPress-Theme, welches sich auf Themeforest bisher mit 113.330 Einheiten am besten verkauft hat. Die Möglichkeiten der Design-Anpassung sind extrem hoch, wer wissen will, was heutzutage mit einem Premium-Theme alles geht, der sollte sich die Demo dieses Themes genauer ansehen. Avada kostet in der Regular Licence 58 USD. Avada kann vollständig angepasst werden über die Theme-Options-Seite und über den eingebauten Visual Page Builder.

Ein kurzer Auszug dessen, was angepasst werden kann:

  • Hintergrund
  • Farben
  • Boxed oder vollflächiges Layout
  • Spalten
  • Abschnitte (Sektionen)
  • Inhalts-Elemente
  • Medien-Elemente
  • Strukturelle Elemente
  • Kopf-, Fuß-, Seitenleisten-Bereiche
  • Menüs
  • Eigenes Logo
  • Mehrere Slider
  • Und vieles mehr…

Screenshot des Visuellen Page Builders:

Avadas Page Builder

Avada für 58.- USD kaufen | Avada Demo ansehen

Enfold – Responsive Multi-Purpose Theme

Enfold - Responsive Multi-Purpose Theme

Enfold ist nicht ohne Grund eines der beliebtesten und meistverkauften Themes auf Themeforest. Es kann in jeder Hinsicht auf persönliche Bedürfnisse angepasst werden, besitzt einen Template-Import und einen der besten Drag und Drop Layout-Editoren auf dem Markt. Ein weiterer Vorteil ist die Ausgabe von klarem, semantisch korrektem und validem Quellcode. Auch alle Vorgaben für die Suchmaschinenoptimierung (SEO) wurden eingehalten. Schema.org und Google Rich Snippets Support ist ebenfalls vorhanden.

Ein kurzer Auszug dessen, was angepasst werden kann:

  • Hintergrund
  • Farben
  • Boxed oder vollflächiges Layout
  • Spalten
  • Abschnitte (Sektionen)
  • Inhalts-Elemente
  • Medien-Elemente
  • Strukturelle Elemente
  • Kopf-, Fuß-, Seitenleisten-Bereiche
  • Menüs
  • Eigenes Logo
  • Mehrere Slider
  • Responsiv
  • Retina Ready
  • Child-Theme-Support
  • Woo Commerce Ready
  • Und vieles mehr…

Ein Einblick in eine vollständig mit dem Drag and Drop Editor gestylte Seite, ein Klick öffnet den kompletten Screenshot

illustration

Video: Eine Einführung in den visuellen Editor von Enfold

Enfold für 58.- USD kaufen | Enfold-Theme-Demos ansehen | Alle Videos zu Enfold ansehen

Headway Drag and Drop WordPress Website Builder

Headway Drag and Drop WordPress Website Builder

Das Headway Theme geht noch einen Schritt weiter und offeriert einen visuellen Editor für das gesamte Theme. Jedes einzelne Element lässt sich per Drag and Drop beeinflussen und individuell designen. Die komplette Struktur der WordPress-Seite wird mit sogenannten „Blocks“ erschaffen und kann im Anschluss mit eigenem Layout belegt werden. Praktisch jedes einzelne Element der Website kann gestylt werden, ohne eine einzige Zeile Code schreiben zu müssen. Ein Klick auf ein Element öffnet die Eigenschaften, in denen man dann Farbe, Hintergründe und vieles mehr einstellen kann.

Ein Auszug der Headway Design und Layout Features

Headway Theme für WordPress

Wenn Sie sich Headway vor dem Kauf einmal genauer ansehen und testen möchten, so können Sie eine Demo anfordern, die speziell für Sie aufgesetzt wird. Headway ist ein kostenpflichtiges Theme. Die einzelnen Lizenzen beginnen ab 59.- USD (Personal) bis hin zu 199.- USD für die Entwickler-Lizenz.

Headway für 59.- USD kaufen | Eine Einführung in Headway herunterladen (PDF) | Eine Demo anfordern

Premium Drag and Drop WordPress-Plugins

Plugins gehen einen anderen Weg als die integrierte Theme-Lösung. Sie sollen mit einer sehr großen Anzahl von WordPress-Themes reibungslos zusammen arbeiten und trotzdem alle beeinflussten Elemente korrekt anzeigen. Dafür haben sie den Vorteil, dass man nicht an ein bestimmtes Theme gebunden ist, sondern auch das bisher eingesetzte, liebgewonnene Theme weiter verwenden kann.

Ein weiterer, großer Vorteil der Plugin-Lösung ist, dass der generierte Inhalt sich auf jedes neue Theme überträgt. Bei WordPress-Themes mit Page Buildern ist die große Gefahr, dass der generierte Inhalt keinem anderen Theme zur Verfügung stehen kann.

Beaver Builder Plugin

Das Beaver Builder Plugin für WordPress

Beaver Builder ist eines der umfassendsten Visual Page Builder Plugins für WordPress. Dank einer hervorragenden Demo-Funktion kann man selbst testen, wie gut man mit dem Plugin zurecht kommt und welche Ergebnisse sich damit erreichen lassen. Optional offeriert Beaver Builder auch ein kostenloses Theme, dass auf das Plugin optimiert wurde. Auch bei Nutzung des optionalen Themes verbleibt der Inhalt im Plugin, so dass er mit jedem weiteren Theme genutzt werden kann. Der Design-Prozess ist denkbar einfach:

Ein Template auswählen.

illustration

Überschriften und Texte festlegen.

sektionen-mit-eigenem-inhalt-fuellen

illustration

Sektionen mit eigenen Inhalten füllen.

illustration

Im Anschluss mit „Done“ abspeichern. Die soeben getätigte Änderung ist nun sofort sichtbar.

beaver-builder-ergebnis

Das ist eine für meinen Geschmack sehr funktionelle, einfache und sofort verständliche Bedienung mit gutem Ergebnis. Vor dem Kauf des Plugins haben Sie die Möglichkeit, Beaver Builder eingehend auf der Demo-Seite des Plugins zu testen. Sie müssen daher nicht die Katze im Sack kaufen, sondern wissen ganz genau, was Sie erworben haben. Die Lizenzen beginnen bei 99.- USD und gehen bis hin zu 399.- USD.

Die einzelnen Lizenzmodelle:

beaver-builder-lizenzen

Das Video zum Plugin

Beaver Builder kaufen für 99.- USD | Beaver Builder ausprobieren

Visual Composer – #1 Drag and Drop Page Builder Plugin for WordPress

visual-composer-plugin-wordpress

Das nach eigenen Angaben meistverkaufte Page Building Plugin für WordPress hört auf den Namen Visual Composer. Die Bedienung erschien mir persönlich nicht ganz so intuitiv, doch dafür ist das Plugin auch deutlich günstiger als der Beaver Builder. Visual Composer kann auf CodeCanyon mit der Regular Licence für nur 28.- USD erworben werden. Die Ergebnisse unterscheiden sich bei den verschiedenen Lizenzen nicht. Wie beim Beaver Builder gibt es auch hier ein Template-System, welches jedoch nicht sofort startet, sondern erst manuell angewählt werden muss. Einige Screenshots:

Überschriften und Texte ändern.

illustration

Erweierte Design-Optionen auch für Überschriften

illustration

Ein Element hinzufügen.

illustration

Die Template-Auswahl.

illustration

Auch hier gibt es ein schnelles und ansprechendes Ergebnis.

ergebnis-visual-composer

Video: Ein Einblick in den Visual Composer

https://vimeo.com/92033601

Visual Composer kaufen | Demo anfordern | Homepage besuchen

Fazit

In diesem Beitrag haben wir eine ganze Menge Möglichkeiten entdeckt, eine WordPress-Website neu zu gestalten, ohne eine einzige Zeile Code zu schreiben. Zumindest die Premium-Angebote haben mich in Ihrer einfachen, klaren Bedienung und den ansprechenden Ergebnissen überzeugt. Die umfassendsten Möglichkeiten bieten die beiden Premium-WordPress-Themes, weil einfach jeder einzelne Aspekt des Themes mit einem eigenen Layout versehen werden kann. Das können beide Premium-Plugins in dieser Form nicht.

Links zum Beitrag

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

4 Kommentare

  1. Auf der Suche nach einem Visual Page Builder bin ich hier gelandet – sehr schön zu lesen – Danke Dr.!

  2. Hallo Achim,

    in Sachen Headway hat sich sehr viel getan.

    Mittlerweile ist die Version bei 3.7.17 und kann einiges mehr als damals und ist einfacher zu bedienen. Ich denke Du sprichst noch von Version 3.5 / 3.6 oder?

    Es lassen Sie damit sehr schöne Seiten erstellen wie cb-immoconsult.de oder raum-mieten-muenster.de, auch wenn man sich ein wenig einarbeiten muss.

    Headway läuft sogar in Kombination mit dem Plugin von ThriveThemes oder Optimizepress, mit denen sich sehr einfach Landingpages erstellen lassen (die man allerdings mit Headway auch nachbauen könnte ;-)

    Der Nachteil von Headway ist nur, dass es in englischer Sprache ist, allerdings habe ich einen aktuellen Kurs in deutscher Sprache dazu erstellt unter http://www.headway-support-deutsch.de

    Wenn Ihr Euch für das Headwaytheme entscheidet könnt ihr bei mir gerne einen Rabattcoupon von 20% auf den Verkaufspreis anfordern.

    Mein Fazit: Headway gehört zu einem der besten und flexibelsten Frameworks, die für WordPress erhältlich sind.

    Beste Grüße

    Carsten

  3. Das ist ja ein geradezu klassisches Thema. Angefangen mit Headway (da habe ich noch eine der ersten Lifetime Lizenzen)über diverse Tools bis hin zu den Themes und PlugIns. Der Vorteil der Armada: Ich habe für so ziemlich jeden Bedarf irgendwas zur Hand, was die Arbeit erleichterm soll. Der Nachteil: Man verliert so langsam den Überblick: War die Funktion jetzt eigentlich in Tool A oder Theme B? Wie dem auch sein. Die Dinger erleichtern wirklich die Arbeit, wenn man sich mal auf eines konzentriert.

    Headway kann ich aus meiner Sicht eher weniger empfehlen. Ich empfand es immer als zu starr und unfelxibel.

    MotoPress und noch so zwei, drei habe ich zwar auf der Platte, aber noch nicht ausprobiert.

    Zur Zeit arbeite ich sehr viel mit Visual Composer und ein paar dazu gekauften Plgins. Das klappt eigentlich ganz gut. Vermisst oder nicht gefunden habe ich eine Funktion, mit der man Seiten duplizieren kann. Ich baue oft komplexe Sites, bei denen das Design in weiten Teilen identisch ist und sich nur die Inhalte ändern. Da ist es scon recht bewiem, wenn man eine Seite kopieren kann und nur die Inhalte ausrauschen muss. Hierfür habe ich ein zusätzliches kostenloses Plugin bei WordPress gefunden: https://wordpress.org/plugins/duplicate-post/ mit dem das Kopieren ausgezeichnet funktionert.

    Kleiner Tipp noch am Rande: Wenn jemand weniger auf umfangreichen Content und mehr auf Verkaufsseiten aus ist, sollte sich auch einmal OptimizePress http://www.optimizepress.com/ ansehen. Mit diesem Tool (sowohl Theme als auch Pugin) lassen sich Verkaufsseiten sehr schnell erstellen.

Schreibe einen Kommentar zu Carsten Dohmann Antworten abbrechen

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