Anleitungen für Fortgeschrittene

Tutorials

SP-Pagebuilder von Joomshaper Nr. 7: Spalten formatieren und verschachteln

Das Versprechen, dass jeder und jede eine Joomla-Website bewirtschaften kann, ist mit dem SP-Pagebuilder von Joomshaper ein gutes Stück näher gerückt.

In diesem Tutorial zeige ich dir, wie du ohne eine Zeile Code die Zeilen in deinen Pagebuilderseiten formatieren kannst.

Den Möglichkeiten sind hier kaum Grenzen gesetzt: Von Hintergründen über Abstände bis hin zu Anmiationen ist alles möglich. Und natürlich ist das alles auch komplett responsive.

Falls du mit diesem Video in die Reihe einsteigst, beachte bitte unbedingt auch die beiden folgenden Videos zu den Formatierungsgrundlagen:

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 unkorrigierte Transkription des Videos durch Youtube.

hallo und herzlich willkommen zu diesem neuen tutorial von web to use punkt ch schön dass du dabei bist ich zeige dir in diesem tutorial einen weiteren teil des s p page bildes von schejbal es geht in diesem tutorial hier um die spalten innerhalb der zeilen in einer page bilderseite und falls du mit diesem video ein steigst empfehle ich dir sehr die beiden vorhergehenden videos auch anzuschauen nämlich die grundlegenden einstellungen für styling von zeilen spalten und addons und daneben auch für das styling von spalten ich werde in diesem tutorial hier nicht mehr ganz so tief gehen weil ich vieles schon erklärt habe darum schaut ihr bietet die vorhergehenden videos auch hand aber hier jetzt geht es wirklich um die spalten wir haben hier im frontend dieser seite mit dieser ersten zeile hier mit einer zweispaltigen darstellung ich gehe diesmal jetzt ins backend weil hier die sparten einstellungen etwas bessere erreichbar sind vielleicht einfach der vollständigkeit habe gehe hier im frontend auf seite bearbeiten und dann innerhalb eines elements wir hier die sind diese grünen rahmen haben dann sind das elemente innerhalb einer spalte und das zu verdeutlichen ich mache hier noch ein paar mehr das hier ist eine spalte dann haben wir hier dieses icon übergeordnete spalte wenn wir darauf klicken dann haben wir auch hier diese spalten einstellungen drin aber ich zeige dir das lieber im backend weil es im backend einfach ein paar funktionen hat die einfacher zu verstehen sind und vor allem weil man da auch etwas flexibler ist und etwas besser sieht wie diese spalten danach aussehen ich gehe also ins backend auf den s&p page bilder seiten und dann in meine testseite hier haben wir jetzt drei zeilen eine 23 mit je zwei spalten ich habe ihm in einem dresden tutorial als ich seiten eingefügt habe zeigen und und spalten erklärt wie das funktioniert mit dem einfügen der spalten da gehe ich nicht mehr darauf ein jetzt zeige ich dir was sich verbirgt hinter diesem button und auch hier mache ich es in dem sind kurz wir haben nämlich hier bereits diese allgemeinen einstellungen angeschaut wir haben auch die style einstellungen schon angeschaut da gibt es hier nicht viel spezielles das heißt wir haben auch hier text farbe wir haben hintergründe wir haben abstände rahmen und schatten das habe ich alles bereits bei den zeilen erklärt wir haben auch hier die möglichkeit responsive die ganze darstellung zu strukturieren das habe ich auch schon erklärt und auch die animationen habe ich dir im zusammenhang mit den teilen ja schon gezeigt da gehe ich nicht darauf ein was ich dir aber unbedingt zeigen möchte was nämlich extrem praktisch ist und was viele leute die mit dem beispiel der arbeiten nicht wissen ist dass man zeilen auch verschachtelung gespalten auch verschachteln kann wir haben hier nämlich jetzt eine spalte eine zeile mit zwei spalten also wir haben hier dieses klassische 84 8 zu 4 modell ist hier eingefügt mit einer spalte und mit einer zweiten spalte auf der seite wenn wir jetzt mehrere elemente haben ich fühle jetzt mal mehrere elemente ein so so kann das klassischerweise aussehen wenn ich die seite speichere und im frontend heute werden diese elemente so angezeigt die bilder kommen weil sie alarmierten und wir gehen diesen lacie jod drin haben etwas städte aber dann ist das so eine klassische darstellung jetzt kann es aber sein dass wir innerhalb dieser sparte eine zusätzliche unterteilung wünschen und dafür gibt es im zusammenhang mit diesen einstellungen hier eine möglichkeit nämlich neue zeile einfügen und wenn ich das jetzt mache dann erhalte ich denselben dialog wie wenn ich hier oben eine neue zeile des semesters sind genau dieselben funktionen auch aus den spalten hinzufügen zeile duplizieren seinen optionen und dann auch diesen drei punkte knopf mit dem ich noch ein paar optionen mehr habe so und was jetzt extrem spannend ist ich kann nämlich jetzt hingehen und innerhalb einer spalte zusätzliche spalten setzen und zwar ganz wie ich das will auch hier haben wir wieder dieses 12er modell auch dieser teil unterteilt sich jetzt in zwölf spalten und diese zwölf spalten die kann ich verwenden wenn ich jetzt also hin gehe und sage ich hätte hier gerne dieses dreispaltige dann baut es mir hier drin ein dreistufiges modell ein und ich mache das jetzt ganz faul ich hätte hier nämlich gerne drei bildschirme nebeneinander ich nehme jetzt überall dasselbe du siehst ich ziehe die einfach rein und dann hätte ich gerne darunter noch ein zusätzliches text element ich kann dir also einfach anordnen das hat jetzt nicht geklappt dupliziere das ja es ist hier gleich wie bei den anderen dingen auch es geht besser von unten nach oben zu ziehen als von oben nach unten so habe jetzt zwei textelemente diese zusätzliche spalte diese beiden textelemente hat es mir ihre eingezogen habe ich erst jetzt gesehen ich ziehe die wieder raus gibt jetzt ein etwas größeres element aber ich habe jetzt innerhalb dieser seite dieser zeile mehrere spalten zusätzlich wenn ich die seite jetzt laden dann sieht das wie folgt aus wir haben hier die texte elemente also diese r dienst das sind hat uns zwei der vortrag der nach hier diese beiden und dann drei danach und hier drin die drei bilder die ich jetzt als elemente eingefügt habe auch hier gilt wieder wenn ich das ganze kleinere mache ich um ein mobiles gerät zu

simulieren dann wird die werden die bilder hier entsprechend auch tag gestellt also das sind jetzt diese drei bilder aus dem spalten element in der spalte und das sind die bilder aus dem zusätzlichen element in der randspalte und hier sind wir extrem flexibel also wir können tatsächlich jetzt auch hingehen und mehrere solche elemente einfügen ich kann also hier rein gehen und sagen ich möchte gerne eine neue zeile einfügen für gezielt die da zwischen hinein und sage ich hier hätte ich gern ein zweisprachiges kopiere hier wieder die bilder ziehe die reihe eins und noch eins hätte gerne noch einmal in seinem element über die ganze neue zeile über die ganze breite ziehe das hoch und füge hier ein einzelnes bild 1 und speichere das und wenn ich die seite jetzt neu lade die bilder kommen immer etwas später dann siehst du diese darstellung die welt wirklich eins zu eins übernommen und zauberte stellt also damit kann ich extrem flexibel seiten sehr gefährlich bauen und du siehst ich habe nichts besonderes gemacht ich habe einfach nur inhaltselemente angeordnet und die seite an sich wird einfach schon mal sehr professionell sehr aufgeräumt und vor allem sie verhält sich auf jedem gerät wirklich sauber also wir haben hier nicht mehr die probleme mit wo werden bilder angezeigt wo nicht wie sehen die bilder raus wenn ich dieses fans die reds schmaler machen und einfach da auf die seite zeige dass hier am besten dann werden diese bilder entsprechend auch einfach angepasst also die nehmen wirklich die breite an sind fortlaufendem text dargestellt und das klappt wirklich reibungslos und wie versprochen ohne dass du auch nur eine einzige zeile code schreiben musste also etwas passiert wirklich mit den port einstellungen das eine ganz wichtige einstellung diese spalte in der spalte beziehungsweise die zeile in der spalte mit der wir das ganze noch mal strukturieren können probier's aus das macht wirklich spaß und du kannst sehr vieles bauen ich werde im nächsten tutorial dann auf die einzelnen arten seien gehen und auch darauf wie man diese art uns formatiert im nächsten und in den folgenden und du wirst dann einiges sehen was sich sehr einfach da auch ein bau- und lässt sehr einfach auch nutzen lässt für diese darstellungen mit dem du einen beitrag der bis jetzt einfach aus text und einem mühsam platzierten bildbestand wirklich gefällig und sauber bauen kannst ohne auch hier wieder dass du eine zusätzliche zeile code schreiben muss ich hoffe ich konnte dir damit etwas zeigen was du so noch nicht wusstest kann dir damit deine arbeit ein wenig erleichtern ich würde mich sehr über einen daumen hoch freuen oder wir einen kommentare auch wenn dir etwas auffällt falls du noch eine frage hast und was es nicht schon getan hast abonniere meinen kanal ich würde mich sehr freuen bis bald