Editor vs. Composer! Einfacher WYSIWYG-Text-Editor gegen Drag’n’drop Plugin

‚Visual Composer‘ gehören zu den Trends bei WordPress. Wer Seiten und Artikel im Content Management System WordPress erstellen will, der ist auf den integrierten WP-Editor angewiesen. Der WP-Editior ist kurz gesagt ein WYSIWYG-Editor, lang gesagt ein “what you see is what you get”-Editor. Das heißt, ähnlich wie in der bekannten Bürosoftware Word von Microsoft, sehen Sie Änderungen immer live. Machen Sie ein Wort fett fett ist fett. Unterstreichen Sie ein Wort ist es unterstrichen. Genau so funktioniert der WordPress Editor, was du tust, ist was du siehst. Für kleinere Online Projekte, Websites und Blogs reicht diese Funktion vollkommen aus. Mit der zunehmenden Beliebtheit von WordPress wurden aber auch immer größere Seiten mit dem System umgesetzt. Viele der Webdesigner und Medienmanager wollten sich aber nicht mit einfachen Textfeldern zufrieden geben und die einzelnen Layout der Seiten verschönern. Durch individuelle Icons, individuelle Hintergründe, Slider, große Bilder und vieles mehr.

Klassischer WordPress Editor oder doch Composer?

Für einen Profi ist das auch gar kein Problem, er schreibt sich ein paar Zeilen Code mit HTML und CSS und schon ist es erledigt. Das Prinzip eines Content-Management-Systems ist es aber große Datenmengen zu verwalten und Sie im Idealfall auch für Anwender einfach zugänglich, editierbar und löschbar zu machen. Deshalb empfiehlt es sich, eine schöne benutzerfreundlich Oberfläche zu haben, in der sich auch ohne große technische Vorkenntnisse einfach arbeiten lässt.

Prinzip, Design mit Shortcodes

Um Seiten relativ einfach zu stylen, kam man deshalb auf die Idee Shortcodes zu verwenden. Diese Shortcodes fassen kompliziertere code in einfache Tags zusammen die dann vom Benutzer verwendet werden können. Ein einfaches Beispiel wäre es eine schicke Überschrift in einen Shortcode zu verpacken:

[ headline ]Hier steht die Überschrift[ /headline ]

… das Element bekommt dann eine besondere Farbe, eine besondere Position, vielleicht eine andere Schriftart, Schrift Stärke und vieles mehr. Bevor wir nun komplizierte HTML und CSS-Eigenschaften tippen, wäre es doch schlau nur den Begriff Headline zu verwenden. Und genau so funktioniert das Prinzip Shortcodes: Sie verpacken kompliziertere, lange Codes in einfache kleine Schnipsel. Das Problem an diesem Prinzip ist, Sie brauchen viel visuelle Vorstellungskraft, den der Nutzer sieht Code, keine schön formatierte Überschrift. Und stellen Sie sich nun vor, dass wir die Komplexität nur ein Stück erhöhen und Tabellen einbauen, mit exakt gleichen Abständen, die dann auch noch im Hintergrund eingefärbt sind, individuell, einmal blau, einmal gelb einmal orange. Hier stoßen Shortcodes an Ihre Grenzen, zumindest für den nicht Techniker.

Neu: Composing im WordPress-Editor

Damit Inhalte ganz einfach platziert werden können und auch direkt visuell sichtbar sind, in ihrer ungefähren Position, in ihrer ungefähren Form, gibt es seit einiger Zeit verschiedene Alternativen zum standardmäßigen WP-Editor: Composer. Diese können Sie ganz gewöhnlich herunterladen, in Ihrem WordPresssystem installieren und schon geht es los. Alle wichtigen Downloads finden Sie hier und noch einmal am Ende des Aritkels.

Im ersten Schritt installieren Sie den Composer Ihrer Wahl wie ein ganz normales Plugin in Ihrem WordPress Dashboard. In einem weiteren Schritt aktivieren Sie das Plugin wie gewohnt. Was hat sich nun verändert? Seiten und Beiträge. Werfen wir zunächst noch einmal einen Blick auf Ihr WordPress Dashboard, hier finden Sie alle wichtigen Punkte für Sie noch einmal im Überblick, von dem Blog Posts über die Medien bis hin zu Kommentaren und Erweiterungen. Für unsere heutige Aufgabe relevant sind Seiten und Beiträge. Seiten und Beiträge unterscheiden sich im Prinzip nur dadurch, dass Sie Beiträge wie in einem klassischen Blog kategorisieren und zeitlich einordnen. Seiten sind alle statischen Seiten wie Ihre AGB, Kontaktseiten oder „Über uns“ aber auch die Startseite und so weiter.

Die wichtigsten WP-Dashboard Element für Ihre Website:

WP-Composer aktivieren

Im folgenden Beispiel verwenden wir den Layout Editor im WordPress Themes Enfold (hier zu finden). Egal aber ob Sie den Layout Editor verwenden oder den Visual Composer der WP Bakery, Sie finden nun in jeder Einzelseite oder einzelnen Beiträg einen blauen Button, der Sie zum Composer führt, bzw. den Modus vom WP-Editor zum Composer wechselt.

Viele Vorteile, viel Flexibilität

Werfen wir zunächst einen Blick auf die unzähligen Vorteile die der Composer für Sie mit sich bringt . Zum einen haben wir die responsive Zusammenstellung der Inhalte für Computer und für mobile Endgeräte. Der Composer ermöglicht, das Spalten und Zeilen als einzelne Elemente betrachtet werden und sie sich je nach Bildschirmgröße, das heißt an Desktop, Tablet oder Smartphone, anpassen. Desweiteren haben Sie eine visuelle Oberfläche, Sie benötigen weder HTML noch CSS noch Shortcodes um starke Elemente wie Video Hintergründe zu erzeugen. Alle Elemente innerhalb der Pages oder Posts können Sie ganz einfach und intuitiv via drag and drop verschieben. Der Aufbau der einzelnen Elemente ist dabei definiert und stets gleich, dies gibt Ihrer Website einen einheitlichen Look und dem Nutzer Orientierung und damit weniger Störungen beim Besuch.

Weitere Vorteile:

• Elemente sind frei positionierbar – auch ohne HTML, CSS Kenntnisse
• Medien, Bilder, uvm. sind einfach einzubinden
• Wir können Layouts als Vorlagen anlegen
• …

Spalten, Zellen und Aufbau

Schauen wir uns nun Bild 4 an. Dort finden Sie den Abschluss der kleinen Einführung in das Arbeiten mit visuellen Editoren in WordPress. Auch in meinen Workshops ist das der letzte Step, da das Arbeiten mit einem Composer sehr intuitiv ist und am Besten durch probieren gelernt werden kann. Das kostet auch nicht viel zeit, denn die Elemente beschränken sich meist auf zwanzig Stück. Mit einer selbständigen Einarbeitung ist die Verwendung des Composers einfacher und schneller verständlich. Die Ergebnisse werden schnell sehr gut sein, da die Anwendung wirklich einfach ist mit etwas Anleitung und Vorstellungskraft:

Mein Tipp: Keep it simple

Sehen Sie sich den Aufbau im Bild 4 an, oft muss keiner der speziellen Überschriften sein, es reicht ein Textfeld. Setzen Sie sich eine Sektion, oder arbeiten Sie mit einer Spalte, platzieren Sie hier einen Textelement und schauen Sie was passiert. Über die Vorschau (rechts oben auf Ihrer Bearbeitungsseite), sehen Sie das Ergebnis in einem neuen Browser-Tab. Gehen Sie nun einen kleinen Schritt weiter und setzen Sie eine Linie unser erstes Textfeld. Aus dem Textfeld machen Sie eine Überschrift und ganz am Ende positionieren Sie nun ein neues Textfeld. Fertig. Diese Felder können Sie in einem Composer einfach kopieren und sich so direkt drei oder vier oder fünf Absätze schaffen. So können Sie schnell Layout schaffen und auch neue Mitarbeiter schnell ein lernen und ihnen zeigen wie effektives Content Management funktioniert

Noch Fragen zum Thema Content Management, Content Marketing, WordPress oder Workshops für die Einarbeitung ihrer Mitarbeiter, dann rufen Sie uns an, wir haben effiziente und starke Workshop Konzepte, die wir schon oft erprobt haben, in enger Zusammenarbeit mit unseren Kunden und Auftraggebern. Profitieren Sie auch von unseren Erfahrungen und Know-how als Online-Unternehmer und -Berater.

• Download: Visual Composer
  von CodeCanyon

Doch an dieser Stelle noch einmal die ausdrückliche Warnung, nutzen Sie Composer nur sehr fokussiert für eine Hand voll Seiten, um die Ladegeschwindigkeit nicht unnötig zu verlängern.