Anleitungen für Fortgeschrittene

Tutorials

SP-Pagebuilder von Joomshaper Nr. 4: Zeilen und Spalten einfügen und verschieben

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 dieser Anleitung zeige ich dir, wie du mit dem Pagebuilder Zeilen und Spalten in eine Seite einfügst und diese verschiebst.

Und all das ist wirklich sehr einfach.

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 ganz herzlich willkommen zu diesem neuen tutorial von web to use punkt ch es geht in diesem tutorial um zeilen und spalten in den sp page bilde seiten wir haben hier ja getestet mit diesem mit dieser standard die installation von joomla das ist einfach nur ein basis template ich wechsle jetzt mal ins backend und dann hier auf sp page bildet seiten und hier haben wir diese eine testseite die im moment hier noch ganz leer aussieht für das verständnis von die von diesem projekt bildet ist ganz wichtig dass wir verstehen wie dieser page bilder aufgebaut ist wie dieser page peter seiten aufbaut vielmehr wenn ich hier auf testseite clique dann komme ich in die seite hinein und in einer jungfräulichen seite sieht man zum einen hier neue zeile einfügen dann importieren damit kann man andere seiten die man vorher exportiert hat importieren oder dann gibt es hier noch die seiten vorlagen also fix fertige seiten die bereits vorbereitet sind die man nehmen kann und dann die inhalte abkühlen kann was wir jetzt machen einfach mal für verständnis ist von hand eine seite bauen und dafür nehmen wir hier zuerst eine neue zeile und jetzt ist ganz wichtig für für verständnis folgendes zumeist in wustrow abgebaut und boots treppe ist ein framework dass die seite in zwölf sparten unterteilt wir haben hier also das modell mit drei spalten 4 + 4 + 4 mit vier spalten wäre dann drei +3 +3 die haben wir acht +43 plus neun dann drei plus 6 + 3 also immer 12 auf smart ihr können dass hier auch aufteilen und sagen beispielsweise 1+2 sind drei +3 sind 64 sind zehn +2 generieren und dann braucht es uns weil es genau auf 12 auf geht diese zeile so auf mit diesen unterschiedlichen sparten also es muss immer zwölf geben jetzt haben wir selbst wollen wir hier mal bescheiden bleiben und einfach zwei spalten und wir hätten hier gerne dieses zweispaltigen layout hier standardmäßig jetzt ein layout für text und hier ein lehrer für bild damit wir im frontend etwas sehen füge ich hier jetzt zwei jahren sein ich nehme hier den textblock gehabt hier schon zu einem für text verdoppelte noch ein paar mal und hier nehmen wir ein bild ich gehe dann in einem späteren tutorial noch auf die einzelnen atoms 1 hat uns sind diese elemente hier geht jetzt wirklich nur darum dass wir diese zeile mal bauern so wir haben jetzt eine erste zeile eingefügt ich speichere das mal und gehe jetzt ins frontend du siehst im frontend ist das bereits fertig formatiert also hier ist das genauso gebaut wie es eben dann effektiv aussehen soll so was ganz wichtig ist ich kann beliebig viele zeilen einfühlen das heißt ich kann das wiederholen ich kann dir jetzt beispielsweise kopieren oder ich kann einfach eine neue zeile einfügen und ich kann auch dazwischen einfach eine neue zeile einfügen ich mache das jetzt und füge hier jetzt einfach dazwischen eine neue zeile du siehst wie dies hier lehrt dass ihr ist die kopierte zeile so und jetzt kann ich hier genau dass er noch mal machen mit etwas weniger text so und mit einem bild auch hier einfügen und speichern wenn ich die seite neu laden dann wird es jetzt eine relativ lange seite weil wir in diesem ersten element sehr viel text drin haben so soviel mal grundsätzlich zum aufbau aufbau mit zeilen und spalten was ganz wichtig ist du siehst wir haben bei jedem von diesen elementen zu einem greife den gibt es hier für die ganze zeile das heißt ich kann die ganz einfach verschieben und den gibt's auch hier für die spalten das heißt ich habe hier bei jeder spalte auch so eingreife und kann den jetzt ganz einfach ziehen also wirklich diese spalten austauschen erfahrungsgemäß geht es besser von rechts nach links da wechselt es sofort du siehst wenn ich hier das von links nach rechts kacke da muss ich genau zielen darum besser von rechts nach links ich speichere das jetzt noch mal und zeige diese seite an und du siehst sie habe diese elemente jetzt sollten sich umgezogen so sieht's jetzt aus als er das ist wirklich sehr sehr einfach so die wahre stärke zeigte page bilder aber nicht im backend ich wechsle darum jetzt weil es das erstellen von seiten nur im backend möglich ich habe ich möglich ist habe ich das jetzt gemacht habe ich speichere und schließe das jetzt mal und weg lenz frontend hier logge ich mich ein

so und jetzt siehst du auf dieser seite hier oben diesen button seite bearbeiten wenn ich da drauf klicken dann lädt hier der page bilder im frontend wir haben hier das ganze mit allen ärgers und wir haben hier diese einzelnen elemente wir haben blau die zeilen die wir vorhin gehabt haben und grün mit diesem grünen rahmen die sparten das ist als auch hier genauso jetzt was ganz wichtig ist du siehst grundsätzlich mal diese abstände oben und unten diese abstände die kann man auch im backend administrieren das heißt ich kann hier genau gleich wie im backend auch auf die einstellung klicken dann gehe ich hier auf style und dann kann ich hier sagen ich hätte jetzt hier oben gerne 0 pixel du siehst das passt es hier automatisch an aber viel einfacher im frontend ist wenn ich eben diesen abstand manuell sie ihr das heißt du hast gesehen ich habe den jetzt vorhin gepackt und ich kannte ihn wirklich ziehen so groß wie ich den haben will und hier genau gleich aus ich kann das so zusammenfügen dann kann ich auch die spalten wechseln das ist hier etwas komplizierter weil wir nicht einfach jetzt in einem bereich parken können sondern ich habe hier eine schaltfläche und kann hier dann die spalte verschieben dann gibt es mir hier diesen greife und auch hier ist es genau das selbe es geht besser von rechts nach links aus ich klicke hier auf verschiebe die spalte ziehe die hierhin und für s und lasse sie einfach fallen es geht hier auch von rechts nach links ab von links nach rechts aber auch hier ich empfehle grundsätzlich eigentlich immer von rechts nach links zu verschiedenen und genau gleich können wir auch spalten verschieben also ich habe jetzt einfach gepackt ich mach das nochmal und schiebe die das richtige wort so können wir sehr einfach mit zeilen und spalten die eine seite aufbauen und diese seite gestalten das ist wirklich kein problem es geht wirklich sehr sehr simpel wir werden dann in einem nächsten tutorial nach hand schauen wie man solche addons im detail einfügen wie man die dann auch formatieren kann denn auch da gibt es noch sehr viele einstellungen im frontend wichtig wenn ich solche änderungen gemacht habe speicher und schließen sonst gehen die änderungen wieder verloren so viel außer zu den zeilen und spalten e-mails die spd spielte ich würde mich sehr freuen wenn du dran bleibt wenn du auch die weiteren tutorials anschaut wir werden jetzt immer mehr in die tiefe gehen immer mehr details auch anschauen das war jetzt seine letzte große einführung zu den einzelnen seiten ich hoffe du bleibst dabei ich würde mich sehr über eine samstag freuen über ein abo nieren wenn dir der kanal gefällt dann bleib doch der anlass werden wirklich noch einige weitere tutorials folgen bis bald