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 shape ich habe dir im letzten tutorial gezeigt wie du deine seite mit zeilen und spalten bauen kannst eine zeile ich bin hier in front end eingeloggten kemal auf seite bearbeiten eine zeile ist das was hier blau umrandet ist du siehst dass das sind ganze bereiche eine spalte das sind die elemente die hier in diesem grünen bereich drin sind das können aber auch mehrere unternehmen untereinander seien also hier können mehrere elemente untereinander sein ich zeige dass mahler verwaschen dem ich hier ein paar tiere so das ist hier ist eine spalte und eine zeile und dann haben wir noch die einzelnen atoms und ich möchte dir in dieser anleitung zeigen wie du diese elemente formatieren kannst denn jedes dieser elemente hat im paid spielte gemeinsamkeiten die steuerung bzw die formatierung diese elemente funktioniert im page bilder nämlich ebenfalls über eine maske und da kannst du sehr vieles anpassen einsteigen diese maske tust du immer über dieses werkzeug symbol hier oder dann über diesen bleistift hier und das ganze aber etwas deutlicher noch zumachen zeige ich dir diese elemente im backend denn all diese einstellungen kannst du im frontend wie im backend machen im becken dies ist aber etwas logische dargestellte das offensichtliche und etwas besser zu verstehen auch ich geh auf sp page bilde und auf seiten und dann auf testseite und hier siehst du jetzt diese ganz klassische darstellung wir haben hier zeilen wir haben innerhalb dieser zeilen spalten wenn ich hier was ich vorhin gemacht habe ein element dupliziere dann siehst du innerhalb dieser spalte wird das eingefügt und wir haben dann die einzelnen elemente die inhaltselemente diese sogenannten addons und du siehst jede zeile hat hier ein zahnrad symbol für die optionen jede spalte hat hier ein werkzeug symbol für die einstellungen und jedes erdung hat seinerseits auch nochmal dieses symbol für die bearbeitung wenn ich das im frontend nochmal anschauen ich schließe diese seite noch mal weil es besser ist wenn man nicht an beiden orten eingeloggt ist dann siehst du genau diese elemente auch hier also wir haben hier das werkzeug für die spalte die zeile wir haben hier das element für einzelne erdogan und wir haben hier auch noch den greifer beziehungsweise die spalten einstellungen in denen du dann die effektiven einstellungen für die spalten vernehmen kannst also ich schließe das jetzt wiederum gehe wieder ins backend gehe wieder in diese seite hinein und hier hast du jetzt diese ganzen elemente und ich zeige jetzt diese audi meinen einstellungen am einfachsten an den zeilen weil hier ist das übersichtlichste hier haben wir am wenigsten optionen wir haben zum einen hier die möglichkeit eine admin bezeichnung zu machen die dient nur dazu das ganze für mich etwas übersichtlicher zu machen also textzeile 1 wenn ich das jetzt bestätigen dann siehst du hier diese textzeile 1 das ist hier jetzt nicht so relevant weil es recht übersichtlich ist aber es gibt in haus elemente bei denen es sehr unübersichtlich fehlten darum ist diese armin bezeichnung in manchen belangen eben sehr praktisch also die auch mit bezeichnung dann kann ich einen titel und einen untertitel setzen das ist das was ich hier gemacht habe einen bereichs titel und bereich untertitel ich habe die möglichkeit die titel zu zentrieren das ist sowohl in der zeile als auch bei den inhalts elementen in der regel so dass wir diese ausrichtung setzen können ich kann hier sagen ich will es vertikal noch ausrichten dann habe ich jede zusätzliche optionen ich kann sagen ich hätte gerne eine zeile mit voller breite das macht ihr wenig sinn aber wenn ich setzen würde dann würde hier der ganze inhalt wirklich randabfall und seien in einem template von sheikh ich zeige dass in einem späteren tutorial dann noch sind diese bereiche dann wirklich aber über die ganze breite also das ist beispielsweise praktisch für einen slider dann kann ich die breite des containers setzen ich kann wenn ich mehrere spalten habe auch sagen wie der abstand zwischen diesen spalten sein soll und ich kann auch eine bereichs id setzen diese id ist wichtig wenn ich mit css arbeiter und eine spezifische bereich sei die für die css klassen setzen will auch das werde ich dann später noch zeigen das wichtigste element und hier gibt es auch am meisten gemeinsamkeiten zwischen zeilen im spalten und addons ist diese breite style und hier drin hat es jetzt ein paar ganz wichtige dinge die sich überall wiederholen und ich zeige jetzt nicht jedes einzelne element sondern wirklich ein spalt paar steuerelemente die sehr wichtig sind zu meinen ziehst du wir haben hier verschiedene optionen und wir haben über all diese drei symbole mit diesen drei symbolen kannst du das verhalten zwischen den einzelnen bildschirm breiten definieren das heißt wir haben hier eine desktop version eine tablet-version und eine mobile version das ist vor allem dann spannend wenn wir über abstände reden wir haben hier beispielsweise abstände innen abstände jetzt in diesem element und du siehst hier können wir sehr einfach definieren wir diese abstände aussehen sollen ich möchte beispielsweise jetzt hier diesem element einen innen abstand unten geben diese abstände die wiederholen sich immer nach demselben schema wir haben zuerst oben dann rechts dann unten und dann links und du siehst hier habe ich jetzt dieses schloss ist offen das heißt ich kann wirklich pro seite diese diesen abstand setzen wenn das schloss geschlossen wäre so wie hier beim abstand übernimmt das die einstellung für alle das will ich jetzt in diesem fall nicht sondern ich bleibe hier jetzt bei diesem abstand und ich hätte hier beim desktop gerne einen abstand von 50 pixel wenn ich hier jetzt die tablet-version nehme dann siehst du das ist es schloss aktiviert wenn ich das deaktivieren dann kann ich hier sagen hier hätte ich gerne nur 20 pixel und in mobile hätte ich gerne gar keinen abstand nur pixel so kann ich wirklich pro bildschirmbreite definieren wie die breite oder der abstand oder was auch immer ich da definiere sich je nach gerät verhalten soll das ist eine ganz wichtige funktion und ich zeig dir das rasch diese funktion die gibt's hier bei den zeilen einstellungen wo wir waren die gibt es aber auch hier bei den sparten einstellungen style auch hier haben wir diese optionen und die gibt es auch bei den einstellungen für die einzelnen atoms auch hier haben wir diesen style breite und auch hier sind all diese drei symbole voran also das ist genau das gleiche bei all diesen elementen und das ist extrem wichtig und gut zu wissen dass man hier druck gerät diese einstellungen vornehmen kann also wir haben hier die möglichkeit eine höhe einzustellen jetzt bei der zeile einen overflow den wirst du brauchen wenn du beispielsweise ein bild hast dass wir bei den inhalt hinaus geht dann haben wir hier eine höhe die wir definieren definieren können eine breite die wir definieren können hier oben die höhe das habe ich übersprungen die breite dann die abstände da sind wir vorhin schon gewesen wir können auch pro zeile die text farbe definieren was ich kann hier sagen beispielsweise ich hätte alles was sie diese zeile ist gerne in rot und dann haben wir und auch das ist sehr praktisch ihr die möglichkeit einen event hintergrund zu setzen standardmäßig ist hier nichts ich kann hier aber eine farbe setzen kann die hier einfach ziehen sie ist da kommt dieser carl peters ich kann hier auch den fachbereich wählen also wenn ich wählen bereich glauben möchte dann ziehe hier diese farbe dahin wo ich will ich kann mir ein bild setzen ich habe hier ein bildschirm hochgeladen das ist ein video hintergrund denn ich ein oder eine videovorschau die hieraus bild einfüge wodurch kann auch einen verlauf einfügen und das ist auch ziemlich praktisch weil ich kann hier zum einen die farben wählen nehmen hier etwas schrilles ein helles grün dann habe ich hier die möglichkeit zu sagen wie diese verlauf sein soll nämlich linear als auf eine farbe zur anderen oder radio auch vom zentrum nach außen und hier kann ich dann auch noch definieren wie also wie diese radiale dem verlauf sein soll das ist etwas womit man experimentieren kann und hier habe ich auch noch die möglichkeit den winkel einzustellen mit dem diese verlaufen passiert und zu guter letzt habe ich auch noch die möglichkeit ein video ein zufügen ich kann das entweder hochladen oder dann ein youtube-video einbinden und das so darstellen all diese dinge auch einen rahmen beispielsweise kann ich so wohl auch hier wieder in der zeile als auch in der spalte ich zeige dass auch hier noch kurz auch hier haben wir die möglichkeit einen rahmen zu setzen oder einen hintergrund zu setzen oder den einzelnen atoms auch hier wieder den hintergrund hier sind die video setzt nicht mehr drin aber du siehst auch hier haben wir diese möglichkeiten ein hintergrund zu setzen oder einen rahmen zu setzen die sind überall genau gleich also wenn du in diesen elementen drin bist dann kannst über diese bearbeitungsfunktionen und das style element extrem viele formatierungen vornehmen und hier natürlich einen rahmen einfügen du kannst eine begrenzung setzen du kannst auch einen schatten setzen wenn du das möchtest auch das ist vorgesehen und du kannst auch einen hintergrund setzen auch das ist vorgesehen ich werde im nächsten tutorial dann im detail zeigen wie du das tun kannst wie das danach aussieht auf einem einzelnen gerät ganz wichtig ist dieser letzte teil hier auch dieses element gibt es auf jedem in jedem dieser bereiche auf mobilgerät verstecken tablet verstecken desktop verstecken ich gehe hier mal in die spalten einstellungen und auch hier ist es versteckt und der responsive in einem separaten reichte auch hier haben wir die möglichkeit dann noch klassen für die einzelne darstellung festzulegen doch hier haben wir die möglichkeit das auf einzelnen geräten zu verstecken und auch bei den einzelnen inhalts elementen geht das hier ist es auch wieder runter style wenn ich hier nach unten ein falscher und advanced wenn ich hier nach unten clique dann hps wolle habe ich hier auf dem desktop verstecken auf den tablet verstecken oder auf dem mobilgerät verstecken und diese einstellung die ist vor allem dann extrem praktisch wenn ich 10 halte wirklich für eine geräte breite optimieren das kommt bisweilen vor wenn wir beispielsweise auf dem desktop einen slider mit viel text haben und auf dem mobilen gerät nur ein bild haben möchten dann können wir das mit unterschiedlichen inhalts elementen zu gestalten so das war ein einblick in die style optional sind die darstellungs funktionen die wir haben bei den spalten beiden zeilen hier über das zahnrad oder bei den addons hier übers bleistift ich werde in den nächsten tutorials dann noch etwas vertieft er darauf eingehen und vor allem im nächsten tutorial zeige ich dir wie du im frontend eine zeile entsprechend stylen und anpassen kannst da gibt es wirklich eine menge optionen die deines deine seite wirklich zu etwas besonderem machen nicht alle sind machen gleich viel sinn aber ich zeige dir einfach damit für einen eindruck davon hast was mit diesem page bilder wirklich aus dem element heraus möglich ist ohne dass du auch nur eine einzige zeile css oder gott schreiben muss ich hoffe ich konnte dir damit etwas zeigen was du noch nicht wusstest ich würde mich sehr freuen wenn du dran bleibt es kommen einige weitere tutorials noch zu diesem page bilde ich würde mich sehr über einen daumen hoch freuen wie brennen kommentar und frauen natürlich auch wenn du meinen kanal abonnieren würdest bis bald