Für die E-Learning-Platform violinlab.com habe ich über den Editor die Übersichtsseiten für die Kurse gebaut.

Layout Übersichtsseite Kurse

Violinlab ist ein Online-Kurs, in dem man Geige spielen lernen kann. Der Lehrplan von violinlab.com ist in drei Schwierigkeitsstufen gegliedert, Anfänger, Mittelstufe und Fortgeschrittene. Eine Schülerin ordnet sich in der Regel einer dieser drei Stufen zu, das heißt, nur ein Bereich ist für sie relevant. 

Mir war es deshalb wichtig, das Layout so zu gestalten, dass die drei Spielniveaus gut unterscheidbar sind. Die Besucherin soll möglichst schnell an den Ort gelangen, an dem es für sie weitergeht.

Zur vollständigen Ansicht auf das Bild klicken.

Einstellungen über den Block

Ich habe das Layout mit dem Block LearnDash Course Grid aufgebaut. Im Editor sieht man bereits in der Bearbeitungsansicht, wie das Ganze von vorne aussehen wird. 

In der Sidebar des Blocks LearnDash Course Grid kann ich die Kurse nach den Kategorien Beginner, Intermediate und Advancing filtern. Dort findet man viele weitere Einstellungsmöglichkeiten für Farben, Schriften, Abstände etc. So kann ich die Kurs-Elemente sehr präzise an die Optik der Website anpassen. 

Zur vollständigen Ansicht auf das Bild klicken.

Die Alternative: Shortcodes

Bevor es Blöcke gab, hat man mit Shortcodes gearbeitet. Man kann damit die gleichen Dinge wie mit Blöcken machen. Shortcodes sind jedoch wenig intuitiv in der Handhabung. Die Optionen wie z.B. Farben, Anzahl Spalten oder Sortierung Teil sind in einer Art von Code versteckt. Man muss die Abkürzungen kennen, um zu verstehen, was hier vorgeht. Und man sieht keine so schöne WYSIWYG-Voransicht im Editor wie bei den Blöcken.

[ld_course_list col="4" progress_bar="true" num="12" orderby="title" order="ASC"]

Beispiel für einen Shortcode

Shortcodes für zusätzliche Ansichten

Shortcodes haben aber auch einen Vorteil: Man kann relativ leicht selbst welche bauen. Mir fehlte beispielsweise eine Alternative zur „Kachel-Darstellung“ der Kurse in LearnDash. Dieses Layout verbraucht relativ viel Platz, auf einer Plattform mit sehr vielen Kursen ist das nicht immer praktisch.
Ein weiterer Aspekt, der je nach Kontext störend sein kann: Wenn man wissen will, welche Lektionen ein Kurs enthält, muss man den Kurs anklicken. Erst dann sieht man auch den Inhalt. Es gibt keine Möglichkeit, einen Kurs und die darin enthaltenen Inhalte/Lektionen gleichzeitig anzeigen zu lassen.

Übersicht in Listendarstellung mit individuellem Shortcode

Angenommen, man möchte eine zusätzliche Übersicht in Listenform haben. Das sieht zwar etwas nüchtern aus, kann aber zur Orientierung hilfreich sein. Es wäre gut, wenn man dann noch die Kursnamen inklusive der enthaltenen Lektionen darstellen könnte. So können sich die Lernenden schneller ein Bild machen.

Ich habe mir über die Methode add_shortcode eigene Shortcodes dafür gebaut. Mit den Shortcodes kann man eine Seite gestalten, die zuerst alle Kurse auflistet und dann die Kurse und Lektionen innerhalb der unterschiedlichen Bereiche darstellt.

Fazit

Mit den LearnDash-Blöcken lässt es sich sehr angenehm arbeiten. Die Blöcke haben viele Einstellungsmöglichkeiten, über die man sehr genau konfigurieren kann, was man haben möchte. Ein großer Vorteil ist auch, dass man schon in der Editor-Ansicht sehen kann wie das Design auf der Vorderseite der Website aussieht.

Shortcodes verwendet man heute eigentlich nicht mehr, die Entwickler von LearnDash haben alles in Blöcke überführt. Es sei denn, man möchte etwas machen, das von LearnDash nicht als Block angeboten wird. Dann wird die gute alte Shortcode-Methode wieder interessant. Individuelle Shortcodes lassen sich relativ leicht bauen, so dass man auch Darstellungen hinbekommt, die von LearnDash nicht vorgesehen ist.

The post Layouten mit LearnDash has first been published on start the loop_.