Beim folgenden Text handelt es sich um eine unkorrigierte Transkription des Videos durch Youtube.

hallo und herzlich willkommen zu diesem tutorial von web to use punkt ch ich habe in den letzten drei tutorials die überschriften den textblock und das bildelement vorgestellt und ein element fehlt noch um die seiten wirklich zu dem zu machen was sie sein können es gibt natürlich daneben noch vier und noch 52 weitere hat uns aber das sind so die wichtigsten mit denen man am meisten machen kann und darum als letztes jetzt noch das galeria dong ich gehe wieder ins park and the speed spieleseiten und dann auf meine seite addons das ist die seite auf der er hier schon bin und hier habe ich eine überschrift und hier das text element das sind diese beiden addons hier die überschrift und das textelemente und was ich jetzt machen möchte ist hier ein galeria don einzufügen das heißt ein addon mit mehreren bildern durch die hindurch blicken kann ich klicke hier drauf und dann gehe ich hier wieder in die liste und nehme hier dieses galerie hat man sei und das altern kann dasselbe wie alle anderen auch nämlich einen titel wenn ich hier etwas rein schreibe dann kommen automatisch die titel optionen das lasse ich jetzt weg geklärt auch nicht weiter dann habe ich hier aber und damit geht es eigentlich schon los in der galerie die möglichkeit die bilder die breite der vorschaubilder zu definieren und auch die breite der höhe die höhe der forscher würde und dann auch den abstand zwischen den werden jetzt das ganze macht nicht sinn solange wir nicht wir solange wir nicht bilder wirklich hochgeladen haben und aus diesem grund gehe ich jetzt erstmal hin und speichere das einfach mal damit wir einen eindruck haben hoops das war falsch ich lade die seite des east war ein einzelnes bild hier drinnen und jetzt gehe ich hin und sage okay dieses bild hier möchte ich sowieso nicht haben das ist das bild 1 das vorschaubild das lösche ich mal und nehme hier ein anderes fähige hier jetzt einfach mal dieses bild ein und du siehst es gibt hier zwei optionen es gibt ein vorschaubild und ein vollbild jetzt so wie ich das hier mache macht das natürlich überhaupt keinen sinn also grundsätzlich solltest du immer eine kleinere version und eine größere version des bildes haben das vorschaubild das irgendwo bei 300 pixel seitenlänge hat und dann das vorbild für eine vollbildansicht vielleicht ab 1800 pixel seitenlänge ich füge setzt der einfachheit halber aber so ein also im ernstfall und bei den richtigen produktiven seiten hier niemals das gleiche bild verwenden sondern für das vorschaubild wirklich ein verkleinertes heruntergerechnet das bild ich füge das jetzt einwenden dass an und speichere

wenn ich die seite jetzt im frontend neu laden dann siehst du dieses bild das ist jetzt eingefügt ich kann es auch vergrößern aber das sind natürlich noch überhaupt nicht gut aus ich gehe darum jetzt noch mal zurück und mache hier jetzt einfach mal noch ein paar zusätzliche vierte ränge nicht publizieren das sage dem hier bild 2 lade ein anderes bild hoch auch hier wieder ganz bequem und einfach ich nehme einfach ein bestehendes bild und füge das zweimal ein ich wiederhole noch mal weil das wirklich wichtig ist nämlich zweimal das gleiche bild fürs vollbild und führt den template findet das vorschaubild ist wirklich wichtig dass du hier verschiedene bilden emster sein kleines für die vorschau und ein großes vorbild sei danach build-3 nehme hier noch mal ein anderes bild ab notfalls was wollen wir hier nach luzern einfügen auch hier ich verpflichte mich hier ständig denn cert dann das vollbild natürlich in supply und speichere das jetzt mal speichern so und jetzt siehst du wir haben drei bilder die sind alle 200 pixel breit die sind auch 200 pixel hoch und die haben keinen abstand jetzt warum ist das so wenn ich hier ein gehe dann steht hier standardmäßig 200 pixel und 200 pixel und das ist natürlich witzlos weil die bilder haben ein anderes format wenn ich jetzt hingehen und hier einfach die größe herausnehmen und dann speichere dann siehst du sind die bilder jetzt in der korrekten 3t eingefügt und zwar in einer höhe die im richtigen verhältnis steht jetzt richtig spannend wird die ganze sache wenn ich hier ein hochformat iges bild einfügen blietz ihre hier nochmal löscher die beiden bilder und suche mir hier rasch ein großformatiges aus ich hoffe ich finde da gerade was ja ich habe hier noch ein quadratisches nehme doch dieses logo hier füge da sein und hier natürlich genau gleich hinzu das macht auch graz in form ablauf her und lade die seite noch mal so und jetzt siehst du auch dieses bild behält das seitenverhältnis das heißt wenn ich jetzt so wie hier in dieser randspalte die galerie einfüge dann habe ich automatisch eine volle breite und die entsprechende höhe ich studiere jetzt die ersten drei bilder nochmal sagt dieses bild 3 das ist meine unterschrift das ziehe ich ganz nach unten das hat damit hast ja gleich gleich noch etwas gesehen man kann die bilder nämlich ganz einfach verschieben und ich lade das noch mal das seien ideale bildung unter anderem zu investieren die schrift sei also jetzt das erste was ich gerne geändert hätte ich hätte gerne einen abstand und zwar hätte ich gerne zwischen den bildern einen abstand von zehn pixeln ich schreibe hier einfach zehn rein speichere und lade und jetzt siehst du macht es mir für jedes bild oben und unten jetzt in pixel darum ist dieser abstand hier 20 pixel groß das heißt wenn ich hier wirklich nur zehn pixelabstand haben möchte dann muss ich hier bei diesem abstand fünf hineinschreiben damit der abstand so aussieht wie ich das gerne hätte das ist mal das erste das sind zehn pixel jetzt und das zweite ist wir haben hier die die galerien der randspalte das heißt ich kann hier anklicken kann hier durch klicken von bild zu bild wenn ich jetzt aber diese galerie nicht in der randspalte habe sondern hier und die über die ganze breite darstelle ich mache hier eine spalte und das ganze speichere dann sieht das natürlich genau gleich aus auch hier sind die bilder die gehen über die ganze breite und das ganze sieht natürlich so nicht sehr ideal außen darum kann ich jetzt hingehen und sagen okay ich möchte in diesem fall jetzt beispielsweise die bildhöhe auf 200 pixel eingrenzen lasse die breite hier stehen wenn ich jetzt das ganze speichere und die seite neu laden dann siehst du werden die bilder sauber angeordnet mit dieser breite wer mit dieser höhe dasselbe gilt natürlich auch mit der breite das gibt dann aber ein ganz anderes bild das heißt wenn ich hier sage ich hätte gerne eine breite von 2 nehmen wir jetzt 300 pixeln und ich aktualisiere diese seite und lade das ganze neue dann siehst du orientiert sich das ganze nicht mehr an der höhe sondern die bilder werden alle gleich breit aufgestellten dadurch verändert sich auch das sieht dann nicht mehr ganz so ideal aus darum wenn du über die ganze breite arbeitest ist das mittel der wahl wirklich die höhe ich mache das noch mal zurück

und dann sieht das ganze auch einigermaßen gleichmäßig und wohlerzogen aus und jetzt in diesem fall gibt es noch eine kleine option die das ganze noch etwas gefälliger macht das siehst du besser wenn ich die höhe hier auf 180 pixel einstelle dann sieht das ganze nämlich etwas verloren aus weil die dann rechts einen leeren rand haben und wir können jetzt die ganze galerie auch noch ausrichten das heißt wir haben hier die möglichkeit links zentriert oder rechts das ganze darzustellen wenn ich je zentriert wehle und dann auf speichern klicken dann bildet das mir das ganze so zentriert was am besten zu deiner seite passt das musst du selber rausfinden aber so kannst du die ganzen elemente einfügen und die seite sauber darstellen so damit hast du gelernt wie du inhaltselemente wie du eine galerie erstellt mit einem inhalts element ich möchte das noch ein bisschen durcheinander ich nehme hier das bild 3 du siehst hier das bild reihen das bild zwei die sind gleich breit und breiter als das bild 1 ich nehme da das bild ein sind die mitte und hier das bild einst nach ganz rechts speicher hier noch mal und dann siehst du auch gleich was passiert mit dem ganzen sieht jetzt hier sehr schön aus weil wir auf jeder zeile dasselbe diese breite haben insgesamt effektiv wenn wir so darstellen franz des dann ein weniger aus auf der seite aber es sieht schon sehr gut sehr sehr schön gestaltet aus und wie gesagt du kannst da wirklich dann auch problemlos durch die bilder durchklicken hast eine saubere galerie was das auto nicht kann das muss ich auch gleich sagen und das ist sehr schade dass er den kann den titel der bilder nicht in die galerie mit geben das heißt wenn ich hier einen titel setzte dann ist dieser titel nicht sichtbar ich kann das auch nirgendwo einstellen also diese titel der existiert nicht ich aus anwenden würde mir wünschen dass es hier irgendwo noch den text hat zu diesem bild einen alt text beispielsweise der wenigstens den titel aufnimmt das kommt aber nicht vor darum ist das ganze auch mit einer gewissen vorsicht vorsicht zu genießen es gibt definitiv sehr viel bessere der galerie komponenten aber um einfach mal ein paar bilder darzustellen ist es definitiv eine gute lösung ich hoffe ich konnte dir damit etwas zeigen was sie so noch nicht gesehen hast ich hoffe du hast etwas rausnehmen können ich würde mich sehr freuen wenn du mir ein daumen hoch da lässt meinen kanal abonnierst natürlich bei den weiteren tutorials wieder reinschauen bis bald