SP Page Builder

SP Page Builder für Joomla

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
Installation Joomla

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

Frontend nach der Installation
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
Helix Template

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

Template Installation
Template Installation

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

Default Style auswaehlen
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
Template Einstellungen

Das Frontend sieht ohne Änderungen folgendermaßen aus:

Frontend mit Helix Template
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
SP Page Builder – Download

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

SP Page Builder Installation
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
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
Template Positionen aktivieren

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

Template Positionen 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
Startseite erstellen

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

Startseite im Frontend-Editor
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


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


Beitrag veröffentlicht

in

, ,

von

Kommentare

5 Antworten zu „SP Page Builder für Joomla“

  1. Avatar von Jack
    Jack

    Hi, yes using SP Page Builder you can easy build One Page , as well.

  2. […] sehr erfolgreichen Page Builder für Joomla über den ich hier im Blog auch schon geschrieben habe (SP Page Builder für Joomla). Nun gibt es ein ähnliches Produkt für […]

  3. Avatar von Jorg
    Jorg

    hallo, ich bin kein Profi mit Joomla,nur ein Laie. Leider habe ich das Problem, dass Joomla mir anzeigt, das es eine maximale Downloadgroesse von 2 MB hat… sowohl Helix Template als auch die freie SP Builder version haben ueber 2 MB. Die SP Installation war damit schon erst garnicht moeglich… und ich schaetze mal bei dem Helix Template wird es die gleichen Probleme geben.. haben Sie einen Tip dieses Problem zu loesen?? wie gesagt, ich bin kein Programmierer, waere schoen, wenn es eine Erlaeuterung fuer einen Laien gibt. danke

    1. Avatar von hagengraf

      Hallo Jörg, ich vermute mal du meinst „Uploadgrösse“.
      In deiner Konfigurationsdatei für PHP (php.ini)werden solche Limits festgelegt.
      In diesem Thread werden verschiedene Möglichkeiten zur Behebung des Problems gezeigt https://stackoverflow.com/questions/2184513/change-the-maximum-upload-file-size. Du kannst es an unterschiedlichen Stellen ändern. Findest du deine php.ini?
      Viele Grüsse
      Hagen

  4. Avatar von Jörg

    Hallo!
    Danke für die hilfreiche Vorstellung des Tools.

    Ich suche ein Anleitung wie ich Seiten im SP PB sauber verlinken kann, sodas wie in joomla gewohnt saubere Seitenadressen entstehen. Aktuell sieht das so aus: https://www.freie-praxissoftware.de/component/sppagebuilder/?view=page&id=31
    – aussehen soll das aber https://www.freie-praxissoftware.de/eigenschafte.html

    Die Seite EIgenschaften habe ich im SPPB erstellt – wie bekomme ich die auf Button wie „weiterlesen“ sauber verlinkt?

    Ist klar was ich suche?

    Grüße
    Jörg

Schreibe einen Kommentar

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