Anleitungen für Fortgeschrittene

Tutorials

SP-Pagebuilder von Joomshaper Nr. 1: Worum gehts überhaupt?

Abgelaufen

Ist es wirklich möglich, dass Benutzer ohne grosse technische Kenntnisse eine Website ansprechend und professionell gestalten können? Wir sind davon überzeugt: Ja!

Unsere Lösung heisst SP Pagebuilder. Wir zeigen dir in diesem Video und in einer ganzen Reihe von folgenden was der Pagebuilder kann und wie du ihn einsetzt - so dass das Aufbauen von Inhalten wirklich Spass macht!

Alle Tutorials zum Pagebuilder findest du unter dem Tag SP Pagebuilder auf web2use.ch.

Der Pagebuilder ist übrigens ein Produkt von www.joomshaper.com

Beim folgenden Text handelt es sich um eine rudimentär korrigierte Transkription des Videos.

 

Hallo und ganz herzlich willkommen zu diesem neuen tutorial von web2use.ch. Wir starten mit diesem Tutorial in eine ganze Reihe von Anleitungen zu einer Erweiterung von Joomla, einer Erweiterung von der ich wirklich überzeugt bin.

Ich arbeite seit rund zwei Jahren damit und ich möchte euch in dieser und in den folgenden Anleitungen zeigen, was ist Erweiterung kann.

Ganz kurz zur Einführung: Diejenigen, die mir schon länger folgen, wissen, dass ich sehr viel Wert darauf lege, dass meine Kunden ihre Webseite selber bewirtschaften können. D.h. die Kunden erhalten eine Webseite und sie sollen sich wirklich um die Inhalte auf dieser Website kümmern können.

Ttraditionell sieht es in Joomla aber, wenn ich im Frontend, also in der Benutzeroberfläche etwas schreiben möchte, so aus. Wir haben zwar sehr wohl einen Editor mit gewisen Funktionen der ist je nach Template, also je nach Design auch etwas umfangreicher, aber im Grundsatz sind wir ziemlich eingeschränkt, vor allem wenn es darum geht einen Beitrag zu gestalten also beispielsweise im Text ein Bild dazu zu geben das ganze etwas zu gestalten da sind wir mit Joomla ziemlich eingeschränkt.

Es gibt sie diese Möglichkeit also wir können wirklich ein Bild holen und das dann noch einfügen das klappt, aber es ist einfach es ist nicht wahnsinnig intuitiv. jetzt gibt es natürlich Editoren die dann noch mehr können das ist absolut so. ich hab ja auch schon Anleitung zum Joomla Content Editor gemacht, der ist sehr mächtig, ist aber im Endeeffekt nicht das was ich suche, nämlich einen Editor der wirklich so nach dem WYSIWYG Prinzip funktioniert, also "What you see is what you get".

Was ich euch heute zeigen möchte ist ein Editor der das tatsächlich nicht nur verspricht, sondern auch kann und zwar ist das der Page Bilder von Joomshaper.

Ich werde den Link auf der Webseite und beim YouTube Video platzieren damit du da auch rein klicken kannst. Dieser Page Bilder der ist extrem mächtig der kostet etwas man kann gratis ausprobieren aber ich glaube wirklich und das ist meine absolute Überzeugung: Dieser Page Bilder der ist jeden Franken wert oder jeden Euro je nachdem woher du kommst

Wie das konkret aussieht zeige ich dir hier an einer Seite. ich gehe hier auf diese Übersichtsseite "about" ist alles nämlich jetzt Englisch und dann habe ich auf jeder Seite sofern ich eingeloggt bin hier diesen Button "Seite bearbeiten".

Ich klicke da drauf und jetzt lädt es mir diesen Page Bilder im frontend d.h. ich habe jetzt dann hier die Webseite an sich und hier drüben dann den ganzen Bereich und du siehst ich hab ja schon etwas gebastelt.

Ich kann hier jetzt effektiv diese einzelnen elemente anklicken.

jedes Element dass ich an klicke zeigt mir hier in der linken Spalte dann sämtliche Möglichkeiten die für dieses Addon bestehen, die kann ich ergänzen ich kann die löschen und ich kann auch neue einfügen und das ganze ist so mächtig dass ich jetzt effektiv wenn ich hier so ein Element habe in das Element rein klicken kann und hier etwas reinschreiben kann in den Fliesstext also wirklich What you see is what you get, wirklich mitten in den text rein.

Ich kann es auch hier Editor machen und ich habe auch sämtliche Möglichkeiten um diese Inhalte anzupassen also beispielsweise wenn ich dir den Titel setze ich sag jetzt einfach mal Titel dann kann ich dem sagen das ist jetzt ein H4 oder ein H1 und dann wird es entsprechend formatiert.

Das ganze ist extrem intuitiv.

Auch das Gestalten von Elementen. Ich habe hier einen riesigen Katalog an solchen Elemente die ich einbauen kann und ich mache das jetzt mal mit einem Akkordeon. ich zieh das einfach hier rein. Du siehst, wenn ich das reinziehe erscheint dieser graue Balken. Ich ziehe das rein und  kann das dann auch entsprechend verschieben auf der Seite. Ich kann das auch ergänzen ich klicks jetzt mal an dann siehst du hier gibt es diese Akkordeonelemente. Ich gebe dem jetzt mal noch eine Nummer: Akkordeon-Titel Eins, verdopple das, Mache hier einen Akkordeontitel zwei rein und jetzt siehst du das ganze ist schon bereit und ich kann's jetzt auch entsprechend formatieren

Entweder nehme ich hier eine Standard formatierung oder ich gehe wirklich rein und sage nein ich möchte es gerne benutzerdefiniert gestalten und dann habe ich hier alle möglichkeiten, kann die Farben definieren einen weissen Hintergrund beispielsweise dann den Titel den gebe ich eine Farbe jetzt in meinem Fall wäre das irgendwo in diesem Bereich und dann siehst du das ganze ist wirklich extrem intuitiv sehr gut anpassbar und wenn ich das jetzt speichere und schliesse dann hab ich hier fertig eingebaute fertig formatiert Elemente die so ganz nebenbei auch komplett responsive sind d.h. Ich kann das zusammenziehen und du siehst, das Verhalten dieser Seite ist perfekt abgestimmt auf die Breite des Monitors.

Ja d.h. wir haben hier wirklich ein Element eine Erweiterung zu Joomla, die ist extrem mächtig und damit du das auch noch im Backend siehst, ich bin hier schon eingeloggt ich geh mal zurück schliesse das ganze, gehe ins Kontrollzentrum dann siehst du wir haben hier oben einen Button Page Builder oder über komponenten Page Builder und dann habe ich hier alle Seiten das hier ist jetzt eine Demo-Seite ein Template mit Demoinhalten von Joomshaper selber und ich habe hier die Möglichkeit diese Inhalte auch direkt im Backend zu administrieren.

d.h. das sind jetzt die Elemente das ist das Akkordeon dass ich davon eingebaut habe wenn ich das jetzt mal runter ziehen speichere und dann das Frontend neu lade dann rutscht es mir auch hier das Akkordeon nach unten und es gibt auch hier die Möglichkeit für eine Vorschau und für eine Frontendbearbeitung und wenn ich da drauf klicke dann werde ich wirklich weitergeleitet an das frontend genau auf die Seite auf der ich vorher war um das zu bearbeiten.

ich kann aber auch hier im Backend das ganz einfach machen und auch da um ich werde das dann in den weiteren Anleitung noch sehr viel detailierter zeigen aber auch damit du das siehst ich kann hier eine neue Zeile einfügen ich kann hier auch definieren wie diese Seite die Zeile aufgebaut sein soll also beispielsweise jetzt hier mit einem breiten und einem schmalen Teil ich kann dich auch ganz einfach wechseln und kann hier dann auch ganz einfach jetzt ein Element einfügen also das ist wirklich sehr sehr sehr einfach und die meisten dieser Elemente haben auch schon vorgefertigte Inhalte drin damit wenn man das ganze enfügt, auch etwas sieht

das ist siehst du bei dieser Animated Number, die ich jetzt eingefügt habe die enthält schon etwas, damit ich mir nicht überlegen muss, wie muss ich das ganze Bauen sondern ich sehe schon was steht drin und was bewirkt das einzelne Element.

d.h. wenn ich jetzt reingehe dann kann ich hier diese Zahl anpassen, eine 222 beispielsweise ich kann die Animationsdauer auch beeinflussen sage hier mal 5 Sekunden und ich kann auch den Text ergänzen der dann dazu gehört das ist ganze ist extrem intuitiv auch wenn die Maske selber ziemlich technisch aussieht.

Ich speichere das jetzt mal und da siehst du: Das ganze wird sehr viel langsamer hoch gezählt der Text stimmt aber die Nummer stimmt auch also es ist wirklich sehr sehr gut gebaut

Der Pagebuilder ist kostenpflichtig ich sage das ganz bewusst aber es ist auch so das wenn du auf den Link zum PageBilder klickst, den ich in der Anleitung deponiere, dann werde ich da nichts verdienen dran, es sei denn du kaufst ihn.

aber ich werde immerhin benachrichtigt dass jemand diesen Link angeklickt hat das ist ein Affilitate Link, aber ich kann dir das wirklich sehr empfehlen.

Für Kunden von mir ist der Page Bilder kostenlos denn ich habe eine Agentur Lizenz und kann dir diesen Page bin dann im Rahmen eines Wartungsvertrages auch kostenlos zur Verfügung stellen.

Aber du brauchst mich nicht dafür. Du kannst ihn auch direkt kaufen. ich empfehle ihn dir wirklich von Herzen falls du Fragen hast, falls etwas unklar ist dann verfolge bitte die weitern Tutorials, die folgen werden.

klicke unten auf die Glocke, um mich zu abonnieren oder gib mir einen Thumbs up, einen Daumen hoch wenn dir das gefällt was du gesehen hast.

Vor allem dann auch, was die weiteren tutorials angeht. Ich würde mich sehr freuen, dich weiter dabei zu haben, hätte riesige Freude auch an dienen Kommentaren. und ja bleib dran. bis bald tschau