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 zum sp page bilder von giuseppe was ganz wichtig ist ich habe im letzten tutorial im tutorial nummer fünf ganz grundsätzlich die gestaltungselemente erklärt das heißt ich habe dir gezeigt wo du für zeilen und spalten und hat uns die formatierungen findest ich werde hier in diesem tutorial auf die allgemeinen elemente nicht eingehen sondern ich werde hier jetzt wirklich zeigen wie du die zeilen formatieren und gestalten kannst damit das ganze etwas plastischer auch daherkommt und du etwas mehr möglichkeiten auch sie ist werde ich jetzt einen wechsel machen ich habe nämlich bis jetzt mit dem ganz normalen proto star template von joomla gearbeitet das ist ein standard template das mit joomla mitkommt und ich werde jetzt im backend ich gehe hier auf bin im kontrollzentrum auf erweiterungen templates werde jetzt dieses helix ultimate und ultimate template von shape aktivieren das ist ein template das gemacht wurde ebenfalls von sheikh und welches speziell gut funktioniert eben auch mit diesem patch bilde wenn ich jetzt das frontend neue lautet dann siehst du gleich okay da ist etwas gegangen das ist jetzt auch nicht besonders gut formatiert aber du siehst schon mal da ist einiges drin jetzt eben die navigation ist schon mal gegeben wenn ich das ganze etwas schmaler machen auch das ist natürlich komplett responsive ihr passiert den richtigen greife finden ist also das template selbe wie gesagt überhaupt nicht formatiert sondern einfach installiert ich habe mir das logo und den future hier unten rein geklaut und fertig und jetzt schauen wir uns mal die formatierung einer einzelnen zeile an und während ich im letzten tutorial die ganzen formatierungen im backend gezeigt habe zeige ich dir das hier jetzt im frontend und zwar bin ich eingeloggt und gehe jetzt auf seite bearbeiten und jetzt siehst du das blendet mir hier links die ganzen page bild der optionen ein und wenn ich mit der maus über die seite fahren hier blau diese zeilen und grün die einzelnen atoms und wenn ich etwas tiefer gehen dann hier über diese spalten dieses spalten symbol dann habe ich hier auch noch die spalten einstellungen also hier ist wirklich genau dasselbe wie auch im backend was ich dir in dieser anleitung zeigen möchte ist haben die formatierung der zeilen und du siehst wir haben hier eine zeile da ist schon einiges formatiert wie das funktioniert ist ganz einfach auch hier wieder ich habe die verschiedenen bearbeitungs elemente ich habe bei den zeilen hier dieses werkzeug symbol bei den einzelnen atoms hier diesen bleistift und wenn ich auf die spalten einstellung gehe hier dann die effektiven spalten einstellungen auf und auch hier habe ich bei allen elementen ich bleibe jetzt bei der zeile in der linken spalte die möglichkeit hier die styles zu definieren und dasselbe gilt auch für die rettungs und für die spalten ich habe hier in dieser zeile schon einige einstellungen gemacht es ab nehme ich für mein beispiel jetzt die erste zeile die es nämlich jungfräulich ich klicke hier auf dieses werkzeug symbol und jetzt komme ich zuerst in den reiter general und in diesen generellen einstellungen da kann ich beispielsweise die augen einstellung der bezeichnung definieren das habe ich im letzten tutorial schon gezeigt viel wichtiger ist ihr aber der titel ich kann hier sagen das ist der bereich titel und der ist zugleich der seitentitel weile zu oberst ist so jetzt möchte ich dem ganzen noch sagen es ist ein h1 weil es zur bassist du weißt ja jedes seite sollte nur ein h1 haben und dann die überschriften hierarchie einhalten hier kann ich die größe dieses titels definieren ich empfehle dir allerdings die größe der überschriften immer im css zu steuern und nicht über den page bildet damit die seite einheitlich daherkommt aber ich kann hier das alles einstellen ich kann hier auch sagen ich hätte den confed 700 ist das schrift gewicht für fett 600 wäre medium und 500 w normal dann kann ich die farbe einstellen diesen farbton haben wir an verschiedenen orten auf der seite den sehen wir dann noch ich hätte den keine jetzt orange soll im stil des logos ungefähr so dann kann ich hier auch noch die transparenz einstellen und du siehst das macht es hier drüben automatisch mit dann habe ich die möglichkeit den abstand zu definieren und hier kann ich wirklich für die ganze zeile einen außen abstand oben festlegen sie sage dem 450 und einen außen abstand unten so dass ist der abstand ich war unklar wohin das ist der abstand der gilt nur für die überschrift also nur für den titel wir sind immer noch nur beim titel darum nehme ich das jetzt wieder raus dann habe ich hier die möglichkeit einen untertitel zu definieren wie hier dies ist der seiten untertitelt und dann auch die ausrichtung hier ist standardmäßig titel und untertitel zentriert ausgerichtet ich hätte das gerne links und dann kann ich auch hier noch die ganzen außer die ausrichtung definieren was ganz wichtig ist und was sie des öfteren auch mal brauchen im zusammenhang mit leides ist dieses element ihr nämlich zeile mit voller breite und du siehst wenn ich das anklicken dann wird mir die seite die zeile wirklich über die ganze breite ausgegeben

die überschrift übrigens nicht die überschrift ist teil dieses frameworks wenn ich die überschrift auch in der ganzen breite haben möchte dann müsste ich mir die ins textelemente reinschreiben also möchte ich jetzt hier aber nicht dann habe ich die möglichkeit hier noch die breite zu definieren also ich kann effektiv den container definieren das sind fixe land pixel angaben aber ich kann auch prozent angaben machen habe das problem hier ist ein wenig die 100% die beziehen sich immer auf dieses auf diese breite des templates dann habe ich hier noch die möglichkeit die breite dieses abstand zu definieren der ist standardmäßig vorgegeben aber den kann ich hier auch noch definieren von 0 bis 100 wenn ich den breiter mache dann siehst du jetzt ist das so breit dass das template nicht mehr damit umgehen kann dass sie dann auch hässlich aus darum würde ich hier nicht viel höher gehen als über diese einstellung sei das sind also die allgemeinen einstellungen hier wie ich im letzten tutorial erklärt habe jede dieser einstellung ist auch möglich über diese geräte icons für die entsprechende geräte breite jetzt gehen wir hier in den bereich style weil hier gibt es ein paar funktionen die sind spezifisch für die zeilen das wichtigste dabei ist neben höhen und breiten die eigentlich selten eingesetzt werden aber die möglich sind hier auch wieder die prozentzahlen sind die abstände du hast in einem früheren tutorial schon gesehen dass man diese abstände ziehen kann ich kann hier wirklich hingehen und hier diesen innen abstand ziehen oben und unten in dem ich hier einfach fahrer bis mir diese kurse der pfeil angezeigt wird und kann das dann zu ziehen ich kann es aber auch hier einstellen bei diesen abständen ist es wichtig zu verstehen dass wir immer in der reihenfolge oben rechts unten und links vorgehen auch hier die außen abstände oben rechts unten und links auch hier haben wir wieder alle drei gerätetypen und hier haben wir dieses schloss wenn dieses schloss blockiert ist dann übernimmt es mir die abstände für alle seiten gleich also wenn ich hier 50 pixel rein schreibe dann macht es mir oben unten rechts und links diese 50 pixelabstand du siehst wenn ich hier mit der maus darüber fahre werden angezeigt wenn ich dieses schloss aber raus nehme ich mache ich jetzt wieder nur das deaktivieren damit es eben nicht mehr geschlossen ist dann kann ich grob bereich diese breite setzen also ich kann jetzt hingehen und sagen ich hätte gerne unten 50 pixel und torben hätte ich gerne 100 pixel damit kann ich verlieren und du siehst auch das ist automatisch angepasst also wenn ich hier jetzt sage nein ich hätte hier gerne nur zehn dann wird das angetastet auch hier dieses diese kleine blaue balken wird angepasst umgekehrt geht es leider noch nicht in echtzeit also ich habe jetzt das da vergrößert ich kann das so ziehen auf 50 das gerät ihr umgekehrt noch nicht da muss ich zuerst speichern und schließen damit es mir die breite bzw den abstand dann auch hier im editor anzeigt ich gehe wieder aufs werkzeug auf style und darf die abständen jetzt siehst du auch hier diese 50 pixel was ganz wichtig ist ich kann auch für eine einzelne sektion als wir einen 1 für eine einzelne zeile die text farbe anpassen nicht betroffen ist die überschriften vater die hätte ich vorhin antasten können und dann kann ich hier die hintergründe jahren passen ich bin da im letzten tutorial auch schon kurz darauf eingegangen hier kann ich eine farbe setzen auch hier wieder über diesen color picker ich hätte hier auch gerne wieder das orange irgendwo orientieren wir uns ungefähr hier dann könnte ich hier auch ein bild setzen ich habe eher zufällige weil sie noch einen video hintergrund ich könnte auch einen verlauf setzten hier sind die farben drin die kann ich jedenfalls über diesen vorfällen von gelb zur aus beispielsweise wäre hier ebenfalls geht dann nochmal in diesem bereich rein und was hier spannend ist auch ich kann nicht nur sagen wo diese farben positioniert sein sollen dass du siehst wie sich der verlauf verschiebt die herz der zweite farbe sondern ich kann auch sagen wie dieser verlauf erfolgt nämlich aber lineare folgt so wie hier oder der radial von der mitte nach außen und auch hier wenn ich jetzt die fakten die einstellungen hier etwas für ihre sieht man es etwas besser ich kann hier sagen ich hätte es gerne nobel im zentrum und in dem zentrum oder links oder rechts ganz wie ich das will so ich bleibe hier ist aber bei linear hier kann ich nämlich auch noch den winkel einstellen du siehst wie sich das wendet und zu guter letzt habe ich auch noch die möglichkeit hier ein video zu hinterlegen ich habe jede zwischenablage ein youtube video für das hier ein und du siehst sofort beginnt ihr im hintergrund dieses video aufzulaufen wie sinnvoll das ist darüber kann man streiten aber möglich ist es auf jeden fall also ich nehme das jetzt aber wieder raus und gehe zur nächsten option auch die schriftfarbe nehme ich wieder raus damit wir und voreingenommen weitermachen können denn die nächste option und die übernächste dies entspannend ich habe nämlich die möglichkeit auch einen rahmen zu setzen und du siehst diese rahmen der geht ganz außen herum ich kann definieren wie diese rahmen aussehen soll und ich kann auch hier wieder sagen es soll überall gleich sein oder es soll variieren ich kann beispielsweise sagen ich hätte gerne oben einem pixel dann zwei dann drei und vier und jetzt muss ich wissen die breiten die brauchen immer noch diesen pixel hinweis auf ein pixel zwei pixel groups zwei pixel drei pixel und vier pixel so und du siehst wie es das automatisch auch übernimmt dass er oben eine pixel rechts zwei und drei und links vier pixel dann kann ich auch die farbe wählen als ich du siehst werden die hier über diesen pkw fahrer wie die farbe des rahmens ändert und ich kann auch sagen ob der durchgehend sein soll oder doppelt oder gestrichelt gepunktet je nachdem was ich da wähle und was auch ganz wichtig ist ich kann hier den rahmen radios einstellen auch das ist ein element das je nach dem sinn macht je nachdem weniger sind aber hier sind wir ebenfalls in der lage sehr flexibel zu formatieren und das ganze darzustellen soviel zum rahmen und dann gibt es noch ein element das im zusammenhang mit rahmen er weniger sinn macht aber dass trotzdem sehr schön listen mit dem man sehr einfach elemente hervorheben kann und das ist der schatten ich nehme hier jetzt mal nicht ganz schwarz aber ein dunkles schwarz und gäbe diese farbe an und du siehst auf den ersten blick passiert da überhaupt nichts wirklich etwas passieren tut ihr erst wenn ich hingehe und sage okay ich hätte gerne hier ein horizontales oft hätten ein vertikales offset jetzt fragst du dich warum um alles in der welt haben wir hier diese rundung das kommt noch vom rahmen radios den habe ich nämlich nicht herausgenommen so ich habe jetzt also dieses offset ich kann das definiert ist ist diese scharte noch sehr hart ich kann den auch weicher machen du siehst über dieses klar dass da steht kann ich das weitermachen und ich kann ihnen auch noch etwas verteilen auch das hebt das ganze dann hervor ist in diesem zusammenhang jetzt nicht sehr schön da kann man dann aber auch variieren das heißt ich kann den abstand vertikal jetzt beispielsweise auf null setzen dann bleibt der oben und unten gleich oder ich kann ihn nach unten verschieben dann habe ich oben keinen schatten merkt also auch das ist etwas sehr schönes frauen dann auch für eine spalten oder einzelne inhaltselemente

und dann gibt es noch ein weiteres element das spannend ist und das sind diese shape stop und button ich habe die möglichkeit nämlich diese hintergründe oben und unten zu definieren und du siehst hier gibt es ebenfalls eine ganze reihe von nämlich oben jetzt beispielsweise diese clouds ich habe hier diesen bauch der dann gezeigt wird ich kann einen pinselstrich einfügen kann da natürlich auch die farbe definieren also auch hier haben wir viele möglichkeiten ich kann die breite definieren also kann sagen ich hätte dein ding gerne sehr groß ich kann die höhe definieren und ich kann auch sagen ich möchte den umdrehen also von links nach rechts jetzt in diesem fall oder in den vordergrund rücken dann steht diese shape nämlich vor dem text das macht nicht immer sehen aber ist ein element um beispielsweise eine gestaltung abzuheben hier jetzt beispielsweise könnte man einen titel damit sehr gut verkleiden also das sind diese shapes und wichtig die kannst du oben und unten setzen das war jetzt derjenige oben ich nehme noch den unten da haben wir diese wollten die sind noch haupt durchsichtig hier kann ich die farben setzen und auch hier wieder genau gleich wie vor breite und höhe umdrehen und in den vordergrund und wie ich das schon gezeigt habe auch hier habe ich die möglichkeit diese elemente noch zu formatieren einzustellen was sollen die da angezeigt werden so und jetzt gibt es noch ein letztes element das sich die kurz zeigen möchte von dem ich aber nicht glaube dass es in vielen fällen sinnvoll ist nämlich die animation ich habe die möglichkeit einem element zu sagen wie es angezeigt werden sollen nämlich viel saniert werden soll ich habe hier eine ganze reihe von verschiedenen möglichkeiten zb dieses rotating ich kann hier sagen wie lange die animation an sich dauern soll beispielsweise 500 millisekunden und ich kann auch sagen wie lange die animation verzögert sein soll wenn ich hier 5000 millisekunden nehme dann wird fünf sekunden nach dem laden der seite dieses element überhaupt erst angezeigt ich speichere das jetzt mal und schließe die seite und dann wird die seite neu geladen und jetzt siehst du hast fünf sekunden lang nichts und dann nach fünf sekunden wird das element mit der animation eingefügt wie gesagt persönlich glaube ich nicht dass das in vielen fällen sinn macht aber es kann natürlich helfen die sichtbarkeit die die qualität der anzeige etwas zu erhöhen wenn du das gerne hättest dann kannst du das wie gesagt ganz einfach über diese animation darstellen das ist in diesem bereich drin also damit hast du gelernt wie du die einzelnen zeilen formatieren kannst als du siehst da ist eine ganze menge an verschiedensten optionen drin wenn du bei diesem tutorial eingestiegen bis dann empfehle ich dir sehr nochmal das tutorial 05 zu schauen zum page bildet damit auch diese funktionen erklärt sind und vor allem auch diese funktionen hier unten das lohnt sich schau dir diese tutorials an ich würde mich sehr freuen wenn du weiter dran bleibst es werden noch einige tutorial zum page bilder folgen ich hoffe ich konnte dir etwas zeigen was du so noch nicht wusstest du hast dich weiter bringt was dir hilft und ich würde mich sehr freuen über einen satz ab und wenn du meinen kanal abonnierst bis bald