Site-, Layout- und Page-Builder vereinfachen die Konfiguration einer Website. Auch für Joomla gibt es Page Builder Erweiterungen, mit denen man per Drag and Drop einzelne Seiten erstellen kann. Als Beispiel zeige ich in diesem Beitrag den SP Page Builder der Firma Joomshaper. Es gibt eine freie und eine kostenpflichtige Version. Die kostenpflichtige Version hat erheblich mehr Features und bietet natürlich auch Support, zum Ausprobieren reicht die freie Version allerdings hin.

Installation

Joomla

Zum Ausprobieren solltest du ein „frisches“ Joomla ohne Beispieldaten installieren. Ich probiere es lokal aus (siehe dazu auch Das Wunder der Erstellung einer Website).

Installation Joomla

Ich habe die Sprache der Joomla Installation auf Englisch belassen. Nach der Installation sieht das Frontend so aus.

Frontend nach der Installation

Helix Template Framework

Der SP Page Builder funktioniert am besten mit dem Template Framework Helix. Helix nutzt Bootstrap in der Version 4 und ist komplett kostenlos. Auf der Download Site (https://www.joomshaper.com/downloads/template/helixultimate) wird ein Quickstart Paket und ein Template angeboten. Das Quickstart Paket enthält ein fertig konfiguriertes Joomla mit Helix. Ich lade mir, nach vorheriger Registrierung eines Benutzerkontos, nur das Template (helixultimate_template_j3.zip).

Helix Template

Das Template installiere ich über Extensions -> Manage -> Install und …

Template Installation

… aktiviere es als Default Style durch einen Klick auf das ausgegraute Sternchen.

Default Style auswaehlen

Durch einen Klick auf den Link Styles (shaper_helixultimate – Default) kommst du in die Optionen des Templates. Ich ändere nichts, schaue es mir aber mal an 🙂

Template Einstellungen

Das Frontend sieht ohne Änderungen folgendermaßen aus:

Frontend mit Helix Template

SP Page Builder

Nun kommt die eigentliche Page Builder Erweiterung. Die freie Lite Version lässt sich unter https://www.joomshaper.com/page-builder herunterladen, ich nehme die aktuelle 3er Version (com_sppagebuilder_lite_v3.1.3.zip) …

SP Page Builder – Download

… und installiere sie ebenfalls unter Extensions -> Manage -> Install.

SP Page Builder Installation

Erste Schritte

Dein Joomla hat nun ein neues, hoch konfigurierbares Template und einen Page Builder, mit dem der Inhaltsbereich einzelner Seiten aus vielen Elementen zusammengebaut werden kann. Der Page Builder beeinflusst die Ausgabe der Seite, das Template bietet (wie alle Joomla Templates) die Möglichkeit um diese Seite herum Module an verschiedenen Positionen zu platzieren. Im Screenshot siehst du die Vorschau der möglichen Modulpositionen. An der Stelle, an der eben „Home“ steht, würde dann die Ausgabe einer Page Builder Seite positioniert werden. Wenn die Modulpositionen nicht „gefüllt“ sind, erscheinen sie auch nicht.

Helix Template – Modulpositionen

Um diese Positionen in der Vorschau zu sehen, musst du in den Template Optionen die Vorschaumöglichkeit zunächst aktivieren.

Template Positionen aktivieren

Nach der Aktivierung kannst du die Positionsvorschau durch einen Klick auf das „Auge“ neben dem Template Style aufrufen.

Template Positionen aufrufen

Die erste Seite

Joomla bietet als möglichen Inhalt (Content) sogenannte Beiträge (Articles) an. Ein Beitrag besteht aus einer Überschrift, einem HTML Bereich und vielen Metadaten. Der SP Page Builder bietet nun zusätzlich zu den nach wie vor existierenden und verwendbaren Beiträgen die Möglichkeit Page Builder Seiten zu erstellen, die sich wie Beiträge verhalten, aber viel individueller konfigurierbar sind. In Drupal würde man sagen, es gibt einen zusätzlichen Inhaltstyp, in WordPress wäre es ebenfalls ein zusätzlicher Inhaltstyp, wie beispielsweise die Portfolio Typen.

Der SP Page Builder fügt ein eigenes Menü in der Joomla Administration hinzu, so dass du einfach zur Seitenübersicht kommst. Eine Seite erstellst du dort durch die Eingabe eines Titels.

Startseite erstellen

Nach der Erstellung der Seite ist sie im Frontend sichtbar und mit dem Frontend Editor bearbeitbar.

Startseite im Frontend-Editor

Im linken Bereich sind alle verfügbaren Elemente, im rechten Bereich ist das Frontend deiner Website. Du kannst eine neue Layout Reihe (Row) hinzufügen und dann deine gewünschten Elemente hinzufügen. Je nach Element gibt es eine beeindruckende Fülle an Konfigurationsmöglichkeiten.

Du kannst beliebig viele Seiten erzeugen und diese bei Bedarf über die in Joomla übliche Weise mit einem Menülink versehen. SP Page Builder stellt für die eigenen Seiten entsprechende Menüeintrags-Elemente zur Verfügung.

Es gibt eine ausführliche (englische) Dokumentation aller Funktionen (https://www.joomshaper.com/documentation).

Fazit

Wenn man sich auf die Kombination Template und Page Builder einlässt, lassen sich tatsächlich nach kurzer Einarbeitungszeit ansprechende Websites auf der Basis vom Joomla erstellen.

Links

• joomshaper.com

tl;dr: Der SP Page Builder verwandelt Joomla in ein Drag and Drop Site Building Tool.