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 zufriedengeben und die einzelnen Layout der Seiten verschönern. Durch individuelle Icons, individuelle Hintergründe, Slider, große Bilder und vieles mehr.

Fragen? Rufen sie uns an oder schreiben Sie uns eine E-Mail: Kontakt

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, benutzerfreundliche Oberfläche zu haben, in der sich auch ohne große technische Vorkenntnisse einfach arbeiten lässt.

Prinzip, Design mit Shortcodes

Um Seiten einfacher zu stylen, wurden Shortcodes eingeführt. Sie fassen komplizierten Code in einfache Tags zusammen, die vom Benutzer genutzt werden können. Ein Beispiel wäre, eine ansprechende Ü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 benötigen viel visuelle Vorstellungskraft, den der Nutzer sieht Code, keine schön formatierte Überschrift. Und stellen Sie sich jetzt 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 und 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 Artikels.

Installation und Aktivierung

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 den Blogposts über die Medien bis 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 Elemente für Ihre Website:

Das WordPress-Dashboard ist Ihr zentraler Hub zur Verwaltung Ihrer Website. Es bietet schnellen Zugriff auf Beiträge, Seiten, Plugins und Einstellungen. Hier starten Sie alle wichtigen Aktionen und behalten die Übersicht über Ihre Website-Aktivitäten.

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ägen einen blauen Button, der Sie zum Composer führt, bzw. den Modus vom WP-Editor zum Composer wechselt.

Nach dem 5.0 Update von WordPress gab es einige änderungen in der WP Bakery

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, dass Spalten und Zeilen als einzelne Elemente betrachtet werden und sie sich je nach Bildschirmgröße, das heißt an Desktop, Tablet oder Smartphone, anpassen. Des Weiteren 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, u. v. m. 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 selbststä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

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 ein 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 jetzt 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? 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 Handvoll Seiten, um die Ladegeschwindigkeit nicht unnötig zu verlängern.

• Erfahre wie du WordPress Templates installierst