Du bist beim letzten Tutorial des Grundkurses zum SP Pagebuilder angelangt: in diesen ersten acht Tutorials hast du gelernt, wie du grundsätzlich mit dem Pagebuilder umgehen, Seiten, Zeilen und Spalte einfügen und diese anpassen kannst.
In diesem Tutorial zeige ich dir nun, wie du im Frontend und im Backend Inhaltselemente, sogenannte Addons, wie Textblöcke, Bilder und ähnliches in eine Seite einfügst.
Diese Inhaltselemente sind die Gefässe für die eigentlichen Inhalte deiner Seite und darum ist dieses Tutorial sehr wichtig.
Damit hast du sämtliche Grundlagen, um mit dem Pagebuilder zu arbeiten.
Falls du mit diesem Video in die Reihe einsteigst, beachte bitte unbedingt auch die folgenden Videos zu den Formatierungsgrundlagen:
- SP-Pagebuilder von Joomshaper Nr. 5: Zeilen, Spalten, Addons formatieren - die Grundlagen
- SP-Pagebuilder von Joomshaper Nr. 6: Zeilen formatieren im Detail
- SP-Pagebuilder von Joomshaper Nr. 7: Spalten formatieren und verschachteln
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 diesen neuen tutorials von web to use punkt ch ich habe dir in den ersten sieben folgen zum sp page bilder von cheffe die grundlagen gezeigt wie du eine neue seite aufbaust wie du zeilen in dieser seite einfügt wie du die entspannten unterteilt wie du diese spalten und zeilen verschieben kannst wie du die formatieren kannst aber wir haben bisher noch nicht wirklich über die eigentlichen und die wichtig wichtigsten elemente in page bilder gerät nämlich über die madonna hat uns das sind die inhaltselemente innerhalb einer page bilderseite und in diesem tutorial und auch in den folgenden werde ich dir zeigen wie du solche erdogan sein fügt wie du die formatiert und zwar weniger inhaltlich sondern mehr wie du die wirklich so darstellen kannst damit sie am ende auch so daherkommen und das versprechen vom ersten tutorial weg das den bleibe ich treu du kannst das alles tun ohne eine einzige zeile code schreiben zu müssen ich hoffe du bleibst dran ich wünsche dir ganz viel spaß damit nehmen wir werden nicht alle 52 hat uns anschauen aber doch das eine oder andere dann auch etwas genauer unter die lupe nehmen ich wünsche dir viel spaß bleibt dran und ja schauen wir über die schulter wenn ich jetzt in die einzelnen tutorials reingehe
ich habe hier eine seite vorbereitet wie heißt das die ist zweispaltig habt ihr auch im backend vorbereitet damit du das kurz ist da gibt es einen titel der ist auch ein addon und dann einfach zwei spalten in die wir jetzt laufend neue addons einfügen grundsätzlich gilt folgendes ich zeigte dass zuerst im backend und dann noch in front wenn wir hier eine zeile haben als einfach eine neue zeile einfügen dann ist die lehr und die hat zu beginn einfach so einfällt drin und wenn ich mit der maus über dieses fällt drüber fahre dann steht da für ein neues addon hinzu wenn ich das anklicken dann komme ich hier auf diese gäste sind insgesamt 56 52 wie ich vorhin gesagt habe er bei uns und da ist jede menge drin also begonnen mit der überschrift die ich wählen kann über google maps galerien bildet über eine instagram galerie über eine open street map preistabelle tabs tables etc bis hin zu einem einfachen textblock und all diese bonds die kann ich nehmen und einfach einfügen das heißt ich klicke beispielsweise jetzt einfach diesen text blog an und dann komme ich auf eine seite auf einen flyer auf dass mir hier nicht ein flyer und eine eine lightbox in der mir eigentlich dieses ganze element angezeigt wird und was ganz wichtig ist es gibt ein paar elemente die sind bei jedem ton gleich nämlich wir haben eine admin bezeichnung die sieht man im frontend nicht die ist nur für mich ich sagte ihm jetzt textblock dann haben wir hier unten die möglichkeit diesem element eine cs s klasse mit zu geben das heißt ich kann sagen ich möchte dem einfach textblock sagen ich werde das mal an und speichere die seite g1 frontend dann siehst du hier diesen text blog wenn ich jetzt hier dieses element untersuchen will nicht sie hier den inspektor in die nähe dann habe ich wenn ich mir den quellcode anschaue hier die zeile den container und dann das eigentliche inhaltselemente
dann habe ich hier diese klasse textblock die wird mitgeliefert die kann ich verwenden um beispielsweise eigene formatierungen mitzugeben in der regel ist das nicht nötig aber faust jetzt gewisse textblöcke haustier immer genau gleich formatiert werden dann kann das eine möglichkeit sein um das zu verwenden in regel wirst du das aber nicht gebrauchen weil dieser texte ist ja über das template formatiert dass er hat seine markierung schon von da was ganz wichtig ist ich gehe noch mal in dieses add-on rein wir haben hier wie ich das schon gezeigt habe auch diese ganze zeit ganzen styling merkmale und wir haben auch hier den reiter advanced auf dem wir definieren können wo das ganze angezeigt werden zwar lasse auf dem desktop verstecken tablet oder auf dem mobilgerät verstecken so funktioniert das im backend wenn ich ein weiteres auto in dieser spalte einfügen will dann klicke ich einfach hier oben auf dann komme wieder auf diese liste kann hier wieder ein element wählen textblock und das einfügen dann habe ich das treten und du siehst jetzt auch diese admin bezeichnung die hier eingefügt habe ich kannte ihn jetzt noch sagen textblock 1 dass wir hier angezeigt textblock 24 dass auch ein da sehe ich immer genau welches inhaltselemente das effektiv ist welche saison im frontend sehe ich das aber nicht als er da steht wirklich nur der text ich speichere und schließe das jetzt mal und gehirns frontend wenn ich im frontend auf seite bearbeiten klicken öffnet es mir den page spielte und hier sieht das ganze jetzt etwas anders aus wenn ich hier über diese zeile fahrer dann ziehst du habe ich hier einen umriss für die noch leere spalte hier zeigt mir nicht sein weil schon etwas in der sparte drin ist und hier läuft das ganze jetzt etwas anders ich klicke das jetzt nicht einfach an ich könnte zwar jetzt hier auch das plus klicken aber da passiert nichts ich klicke das also nicht einfach amt sondern ich packe dieses element aus ich klicke darauf bald behaltet die maustaste gedrückt und ziehe das in dieses feld hinein oder aber hier dazwischen also davor danach oder eben in dieses leere feld und der ziehst du sofort ich habe genau die gleichen felder die ich auch im backend hatte jetzt im frontend das heißt ich kann dem sagen auch in bezeichnung text block 3 ich habe hier alle styling möglichkeiten ich habe hier auch diese ganzen aufwands möglichkeiten mit dem verstecken erkennt wo und was neu ist ich habe hier auch noch diese interaktion die hat man vorher nicht gesehen die ist etwas versteckt aber auch das sind optionen die wir eigentlich kann brauchen also von dem her die einstellungen sind dieselben wenn ich aber jetzt von hier von dieser einstellungen werten bin wieder zurück wechseln will dann muss ich hier auftakt also ich komme dann wieder auf diese liste mit den einzelnen tanz und so funktioniert das was ich kann irgendein auto nehmen die sind alle schon vorformatiert sie hat ihr einfach reingehen wieder zurück dann haben wir hier eine nummerierung sei dann noch mal zurück hier kann ich einen eine funktions box beispielsweise ein für ihn zählte also das sind alles elemente die ich einfach so packen und tieren kann und du siehst diese elemente die sind alle in dem sind schon vorbereitet also wenn wir hier dieses element nehmen auf den bleistift gehen dann habe ich hier die einzelnen punkte schon vorbereitet und kann effektiv dann damit arbeiten also es ist wirklich in dem sie in extrem intuitiv und extrem einfach solche adams einzufügen und ich werde in den folgenden tutorials dann einzelne dieser erde uns zeigen die etwas genauer erklären wie die funktionieren ich würde mich freuen wenn du dabei bleibst wenn du wieder rein schaust wenn du die weiteren tutorials auch anschaust wenn du magst gib mir doch ein daumen hoch auf youtube oder abonnieren meinen kanal ich würde mich sehr freuen wenn du dabei bleibst bis bald