Lektion 5: Elementor Page Builder

00:50
Ich wollte es euch nur zeigen, falls ihr mal mit Websites arbeiten müsst, die es schon länger gibt und die das alte System noch nutzen, wo es noch nicht umgestellt wurde. Ich zeige euch auch, wie ihr das umschaltet, wenn ihr noch das alte System habt bei einem Kunden und dann aber das neue nutzen wollt, dann könnt ihr einmal wieder hier unter Elementor gehen, Einstellungen und dann haben wir hier einmal den Flexbox Container, den wir auf aktiv stellen können und gleichzeitig auch den Grid Container, damit wir alles im Page Builder nutzen können. Das schalten wir beides auf aktiv und wenn wir jetzt aktualisieren, dann haben wir hier den Container und den Grid. Und das Ganze sieht dann entsprechend so aus, dass wir hier erstmal wählen müssen, Flexbox oder Grid und dann entsprechend starten und wir haben hier keinen inneren Abschnitt mehr. Das ist der Unterschied.

01:55
Wie das Ganze funktioniert, machen wir jetzt. Was ich einmal noch dazu sagen möchte, ist, falls jemand dieses alte System nutzt, wichtig ist da zu wissen, dass wenn ihr das auf Flexbox umschaltet, funktionieren die alten Seiten noch und man kann im Prinzip die Seiten weiter bearbeiten mit dem Containersystem, aber du kannst nicht mehr zurück zum alten System, wenn du bereits eine Seite mit dem Containersystem erstellt hast. Die müsste man dann neu erstellen, wenn man wieder zum alten System zurück möchte, was ich sowieso nicht empfehlen würde. Aber grundsätzlich würde ich euch empfehlen, dass ihr von Anfang an mit diesen Containern arbeitet. Das war jetzt nur ein Hinweis, wenn eure Kunden schon ältere Websites haben. Wir starten einmal zuerst mit den Containern, am Ende zeige ich euch die Grids und was der Unterschied ist.

02:49
So, also wenn wir einen Container einfügen wollen, Flexbox Container, dann haben wir erstmal die Möglichkeit zu sagen, soll unsere Struktur nach unten gehen, horizontal oder wie viele Spalten soll das Ding auch haben. Ich zeige euch mal erstmal diese Variante von oben nach unten. So, und wir fügen uns mal ein paar Elemente hier kurz ein. So, wir haben jetzt hier unseren Container einfach nur mit einer Überschrift, einem Text und einem Button. Jetzt schauen wir uns hier mal erstmal diesen Layout, die Layout Einstellungen an. Und zwar haben wir hier einmal gesagt, es ist Flexbox. Hier können wir jetzt auch noch ändern, Flexbox oder Grid. Hier können wir die Inhaltsbreite ändern. Wir können einmal sagen, es ist boxed und 1140px. Das heißt, mein Inhalt geht nicht über 1140px hinaus.

03:55
Wenn ich das auf volle Breite stelle, dann geht mein Inhalt komplett bis an den Rand meiner Webseite. Wir können dem ganzen auch eine Mindesthöhe geben. Mache ich sehr selten, weil das ja automatisch immer so hoch kommt, wie ich es brauche. Also wirklich nur, wenn ich irgendwie eine bestimmte Höhe von einem Container brauche, z.B. ein Bild anzeigen zu können, ordentlich im Hintergrund, dann könnte ich das mal benutzen, aber in der Regel benutze ich das nicht. So, kommen wir zum wichtigen Teil hier, der Richtung. Wir haben ausgewählt, dass das ganze vertikal nach unten geht. Wir können in diesem Container aber auch sagen, ich möchte nicht, dass es untereinander ist, sondern ich möchte, dass es alles nebeneinander ist. Und dann sieht das Ganze so aus. Wir können das Ganze auch umkehren, dann wäre jetzt der Button ganz links oder umkehren in der Spalte.

05:01
Das sind unsere vier Möglichkeiten. Wichtig ist, es geht immer nur eins. Also ich kann jetzt nicht sagen.

05:11
Wenn ich jetzt z.b. Noch ein Bild habe, können wir nicht sagen, mach die ersten drei Elemente untereinander und das vierte rechts. Das können wir innerhalb eines Containers nicht machen, da brauchen wir dann einen zweiten Container. Oder wir sagen eben, also wir können dann diese Option hier nehmen mit den zwei Kästen und dann haben wir neben diesem Abschnitt hier, wie wir es hier auch haben, hier haben wir den Abschnitt und dann die einzelnen Elemente drin. Wir sehen das auch hier ganz gut. Das ist unser leerer Container, also das ist der Container. Und dann haben wir Überschrift, Text, Button, Bild. Und in dem unteren Teil jetzt hier haben wir dann Container. Und innerhalb von diesem Container sind noch mal zwei Container, was jetzt hier unsere zwei Spalten sind. Und wenn wir das so machen, dann können wir sagen, wir fügen hier mehrere Elemente ein.

06:43
Also hier haben wir jetzt mehrere Elemente in diesem Container. Wir können auch hier dann wieder in diesen einzelnen Container reingehen und sehen, dieser linke Container ist jetzt hier vertikal ausgerichtet. Die Richtung ist vertikal nach unten. Könnten wir auch wieder ändern, so nebeneinander, so. Und der zweite Kasten, das ist egal, da ist ja jetzt eh nur ein Element drin, ist auch vertikal nach unten. Aber unsere zwei Kästen die sind horizontal, also die könnten wir auch theoretisch dann untereinander machen, , wenn wir das brauchen. Also das ist das Thema mit der Richtung, dass wir da sagen können, wir können nur einmal die Richtung bestimmen. Und wenn wir eben mehrere wollen, dann müssen wir Kästen, Container ineinander bauen. Genau, dann haben wir hier noch das justify-content Thema und align-items.

07:46
Wenn wir das Ganze mal nebeneinander machen, ich nehme das Bild einmal kurz weg und mache den Text hier ein bisschen kürzer, damit wir das besser sehen können, was der Unterschied ist. So. So, jetzt haben wir hier unsere drei Elemente, die erstmal so aneinander hängen, nebeneinander. Da ich das jetzt horizontal gemacht habe, dann habe ich hier die Möglichkeit, das ist jetzt der Standard, dass das ganze links ausgerichtet ist. Ich kann alle drei Elemente zentrieren oder ans Ende stellen von meiner Inhaltsbox. Ganz wichtig, also es geht nicht länger als die 1140px. So, das sind jetzt diese drei Standard Sachen, Anfang, zentriert und Ende. Ich kann auch sagen Zwischenraum, dann ist das hier an meinem Anfang, das am Ende und das in der Mitte.

09:13
Ich kann auch sagen Abstand im Umkreis, ihr seht, es ist jetzt ein bisschen nach innen gesprungen, das heißt wir haben hier Abstand, hier Abstand und hier ein bisschen Abstand. Ihr seht es auch hier oben an der Box, hier ist die Box eigentlich zu Ende und wir haben gleichmäßigen Abstand, dann geht es noch mal ein bisschen nach innen, das heißt hier, hier und hier ist überall gleich viel Abstand. Das ist unsere horizontale Ausrichtung und das ist unsere vertikale Ausrichtung. Hier können wir jetzt auch wieder sagen, das ganze soll oben ausgerichtet werden, das Ganze soll vertikal zentriert sein, es soll ans ausgerichtet sein oder es soll sich dehnen. Das können wir jetzt erstmal nur sehen, wenn wir hier mal eine Hintergrundfarbe machen, sondern Hintergrund, Moment, so.

10:41
Und wenn ich diesem Text jetzt hier sage, da möchte ich ein bisschen Padding oben haben, dann sehe ich, dass sich dieser Kasten hier dehnt. Also da ich diese vertikale Ausrichtung auf Dehnen gestellt habe, wenn ich das auf Beginn stelle, dann wäre der Kasten wirklich nur so groß, wie er sein soll. Und so richtet er sich eben auf die komplette Höhe ein, die der größte Kasten quasi hat. Genau, wenn wir das Ganze jetzt drehen, das ist jetzt ein bisschen der kompliziertere Teil, also wir sehen justify-content ist die horizontale Ausrichtung und align-items ist die vertikale Ausrichtung. Ich mache mal hier das ein bisschen anders. Ich habe jetzt hier mal drei Kästen eingebaut und wir erstellen hier mal noch eine Lücke zwischen den einzelnen Kästen, damit wir alles besser sehen. Wie gesagt, wir haben hier die Richtung da haben wir jetzt unsere drei Boxen.

11:48
Also ich habe die eingefügt über diese drei Spalten hier und habe die alle gleich groß gemacht, und zwar 20. Und hier in meinem Obercontainer kann ich jetzt sagen, ich möchte, dass diese Boxen horizontal nebeneinander sind, oder vertikal untereinander, umgekehrt oder auch übereinander. Bei der ersten Box habe ich auch noch eingestellt, dass es mindestens mit der Mindesthöhe 150px ist. Also das ist jetzt 150px hoch. Das habe ich bei diesen beiden hier nicht eingestellt. Auch hier ein bisschen Abstand im Obercontainer machen wir auch hier ein bisschen Abstand. So, und dann sehen wir es noch mal. So, ich habe jetzt hier 150px Höhe und bei den beiden habe ich es nicht eingestellt. So, wenn wir jetzt also sagen, wir wollen diese Kästen zentriert hinstellen, dann sieht das Ganze so aus. Und. Und wenn wir die z.B.

13:04
An den Anfang stellen, dann sind die anderen beiden plötzlich klein zentriert am Ende oder eben gedehnt, also die ganze Breite hoch. So, ich stelle es mal hier auf Beginn, weil dann wird es am besten deutlich. Das Ding ist nämlich jetzt, wenn ich das Ganze drehe, ändert sich justify-content und align-items. Wir erinnern uns, justify-content horizontal, align-items vertikal. Das ganze, wir sehen es ja so hier den Pfeil nach da. Ihr stellt euch das jetzt vor, als wenn ihr das im Uhrzeigersinn dreht. So, das heißt justify-content, man sieht es hier auch an den Symbolen, ist plötzlich das Vertikale. Also wenn ich jetzt hier sagen würde, meine Mindesthöhe ist 500, dann können wir es hier gut sehen. Das ist jetzt hier mein ganzer Kasten und entsprechend dahin richtet der sich jetzt aus, vertikal.

14:23
Da ist jetzt justify-content vertikal und align-items entsprechend horizontal. Hier geht er jetzt nicht rein, weil ich hier genau gesagt habe, die sind 20 % breit und bei diesen 20 % bleibt er dann auch. Genau. Aber stellt euch einfach vor, wie sich dieses ganze System im Prinzip dreht. Also wir drehen das im Uhrzeigersinn. Und das, was jetzt hier vorher so war, dreht ihr quasi auch mit. So, das ist, ich hoffe ihr versteht, was ich meine, dass es dann plötzlich vertikal ist. Und das horizontal, oder ihr merkt euch einfach, horizontal ist der Standard. Wenn wir den Standard haben, dann ist justify-content horizontal und align-items vertikal. Und wenn wir nicht mehr im Standard sind und unsere Richtung vertikal ist justify-content die vertikale Ausrichtung und align-items die horizontale Ausrichtung. So.

15:41
Hier die Lücken, die haben wir schon besprochen.

15:45
Wir schauen uns gleich Beispiele an, dass das Ganze ein bisschen klarer wird. Jetzt haben wir hier unten noch den Wrap. Und zwar was macht der, wenn ich jetzt hier reingehe in die einzelnen Boxen.

15:57
Und ich sage, meine Box ist 35 % breit, die ist auch 35 % und die auch. Wenn wir jetzt mal zusammenrechnen, kommen wir über 100 %. Ihr seht, es wird trotzdem noch in einer Reihe angezeigt, weil der Standard ist.

16:25
Dass er keinen Umbruch macht.

16:27
Ich könnte jetzt hier auch noch eine andere Box mit einfügen, er würde immer noch alles nebeneinander packen, dann ist es halt hier, dann stimmt diese Zahl, die hier steht, natürlich nicht. Er packt das dann alles in eine Zeile ohne einen Umbruch. So, das ist der Standard. Und wenn ich jetzt aber das hier auf Web stelle, dann macht er so, wie er Platz hat. Also das jetzt hier nur 2x 35% in eine Zeile passen und dann geschieht der Umbruch, weil dreimal 35 % eben nicht in eine Zeile passt. Und dann können wir nochmal hier festlegen, wie jetzt unsere vier Boxen hier aneinander sein sollen. Also sollen die zentriert sein, dann sind sie wieder vertikal in der Mitte, am Anfang, am Ende. Das betrifft jetzt im Prinzip hier alle vier Boxen. Zwischenraum, so wie wir das auch vorhin schon gesehen haben.

17:41
Bevor wir jetzt in die einzelnen Beispiele schauen wir uns hier noch diese zwei Reiter an.

17:47
Und zwar können wir hier einmal den Stil festlegen von unserem Container. Wir gehen einmal dazu hier in den ersten Container. So, standardmäßig sieht das Ganze so aus. Und wenn wir auf dieses Symbol klicken, dann können wir hier eine Farbe auswählen. Hier haben wir unsere globalen Farben, die wir über die Website Einstellungen hinzugefügt haben und können hier eine Farbe auswählen für unseren Container oder aber hier selbst einen Farbcode hinterlegen oder hier eine Farbe auswählen, und entsprechend die Box so einfärben. Wir können auch einen Farbverlauf geben, also dass ich z.B. Rot und die rosa sieht wunderschön aus und entsprechend hier so einen Farbverlauf reinmache.

18:46
Ich kann den Winkel hier auch verändern, dass es ein bisschen schräg ist. Ich mache es noch ein bisschen deutlicher, weil die Farben mir zu nah beieinander sind. Ich erkenne das selber gar nicht richtig. So, genau, jetzt haben wir es schräg. Und dann können wir auch noch ein Video in den Hintergrund packen. Würde ich euch jetzt nicht empfehlen, oder eine Slideshow. Das sind jetzt eher Sachen, die ich jetzt nicht so verwende aufgrund der Ladezeit. Bei diesem klassischen können wir neben der Farbe aber auch noch ein Bild in den Hintergrund packen. Wir nehmen mal das so und jetzt ist erstmal hier unser Bild in der Originalgröße, also zu groß. Wir sehen hier nur das mehr oder was es sein soll im Hintergrund. Wir können hier aber jetzt sagen, wie das Ganze auch positioniert sein soll.

20:02
Also in der Regel, wenn es passt, ist es meistens Mitte. Also da kann ich sagen, an welcher Stelle wir hier von dem Bild sind. Wir sind jetzt hier quasi . Wenn man das hier nimmt und auf Fixed stellt, dann haben wir hier so diesen Effekt, dass das Bild sich mit bewegt. Das wollen wir jetzt in dem Fall nicht. Hier kann man sagen, ob sich ein Bild wiederholt. Meistens ist es keine Wiederholung. Das wäre jetzt z.B. Wenn ich jetzt hier über den ganzen Abschnitt das machen möchte und vielleicht ein Muster im Hintergrund habe, dann benutze ich vielleicht mal eine Wiederholung, dass das Muster immer wiederholt wird. Aber bei einem normalen Foto nutzt man das nicht. Und hier kann ich jetzt sagen, wie das Bild dargestellt werden soll.

20:50
Also in der Vorgabe ist es jetzt quasi so in der Originalgröße, dass es da in die Mitte einfach reingezoopt wurde sozusagen. Und zwar ist das dieser automatische Punkt hier. Das ist gleiche Vorgabe und automatisch ausfüllen. Dann haben wir eben so ein Bild, also dass wir das ganze Bild so groß wie möglich sehen können. Dass das Ausbild beinhalten bedeutet, dass das Bild von oben bis unten komplett angezeigt wird. Und was dann eben nicht hin passt, das ist dann jetzt hier unsere Hintergrundfarbe. Also dass es quasi in seinem Originalformat, seine Originalverhältnisse, Seitenverhältnissen hier angezeigt wird. Und da wo halt nichts ist, da ist dann die Hintergrundfarbe oder es ist halt weiß, wenn ich es weiß habe und individuell. Dann kann ich hier jetzt auch noch individuell sagen, wie das Ganze sein soll. Meistens mache ich bei Hintergrundbildern die Option von ausfüllen.

21:54
Dann haben wir hier noch so Effekte, einmal die Scroll-Effekte, die schauen wir uns später bei den Modulen genauer an. Oder auch Mauseffekte, wo hier dann immer so, je nachdem wo ich gerade bin, ein bisschen schneller die Maus halt so mitgeht. Genau, aber die Scrolleffekte, die schauen wir uns auch noch mal später in einem anderen Video an. Hintergrundüberlagerung ist jetzt, wenn ich auf diesem Bild z.B. Noch eine Farbe haben möchte. Also ich mache jetzt z.b. Diese Farbe drüber, die ist jetzt hier mit einer Deckkraft von 0,5. Wenn ich jetzt das auf eins stelle, dann ist das Bild im Hintergrund nicht mehr zu sehen. Das ändert im Prinzip also die Transparenz von unserem Bild. Also je weiter ich darunter gehe oder auch hier auf dem Schieberegler, umso mehr sieht man das Bild.

23:07
Bei unserem Rahmen können wir eben entsprechend hier einmal sagen, erstmal wir wollen eine durchgezogene Linie und die soll ein px breit sein, z.b. Dann haben wir hier drum oder 11, dann sehen wir es noch deutlicher, haben wir hier eine Linie und genauso haben wir hier noch doppelte Linien. Wir haben gepunktete Linien, gestrichelt und groove. In den meisten Fällen werdet ihr wohl durchgezogen verwenden oder eben gar keine. Und hier können wir noch die Farbe von dem Rahmen dann festlegen. Und wir haben hier noch dann den Eckenradius, also wie rund das Ding sein soll. Jetzt haben wir hier abgerundete Ecken. Wir können es auch so machen. Ich mache es noch ein bisschen deutlicher. So, ich habe es jetzt mal noch ein bisschen deutlicher gemacht. Wir kennen das schon von dem einrichten Video.

24:19
Wir können auch, wenn wir jetzt hier auf diese graue Büroklammer oder was das sein soll, klicken, können wir auch eine Seite mehr Radius geben, also mehr Rundung geben als dem anderen, wenn wir das möchten. Und hier haben wir den Schatten für diese ganze Box, die wir hier auch noch entsprechend anpassen können, wenn wir das möchten. So, wunderschön. Und dann haben wir hier die Trennlinie, was sich eher eignet, wenn wir jetzt hier so eine ganze Box haben. Wir gehen mal in die große Box und gehen jetzt in die Trennlinie und dann nach unten. Also ihr könnt auswählen, ob ihr das unten machen wollt oder oben. Und dann haben wir hier so verschiedene Dinger, hier unseren Abschnitt ein bisschen anders zu trennen. So und hier kann ich dann sagen, wie breit das sein soll und wie hoch.

26:04
Das mit dem breit erkennt man glaube ich besser, wenn wir hier mal Wellen verwenden. So und wenn ich dann kleiner werde, dann ändern sich die Wellen entsprechend, dass sie höher werden. Also es zieht sich dann mehr in die Länge, wenn ich das hochschalte. Und Höhe ist letztendlich hier, wie groß das hier ist. Also wenn ich jetzt hier 300 eingebe, dann ist es so hoch und 50 ist dann entsprechend sehr schmal. Wir können das ganze auch wenden oder umkehren. Da machen wir mal hier die Tropfen, da sieht man das dann glaube ich am besten.

27:06
Wenn wir das wenden, dann dreht sich das so und umkehren, dann ist es diese vertikale Umkehrung. So und in den Vordergrund, da kommt es dann so, dann haben wir diese Tropfen im Vordergrund vor unseren Elementen und so sind die entsprechend im Hintergrund. Genau, dann haben wir hier noch erweitert und erweiterte Einstellungen. Schauen wir uns auch im Detail bei den Modulen an. Erstmal so viel, der Aussenabstand ist der Abstand, der hier außerhalb unseres Containers ist. Also wenn ich den erhöhe, dann haben wir hier mehr Abstand. Und wenn ich den Innenabstand erhöhe, dann habe ich hier innen mehr Abstand innerhalb meiner Farbe. Dann können wir hier unserem Container auch noch CSS IDs oder Klassen hinzufügen. Der z-index, das könnt ihr euch so vorstellen wie im Matheunterricht, da haben wir auch x-Achse, y-Achse und z-Achse.

28:21
Und die z-Achse ist das, was übereinander liegt. Ich habe ja hier standardmäßig meine Reihenfolge, also zuerst kommt der Container und darüber liegt dann meine Überschrift. Und wenn ich jetzt aber z.B. Diese beiden Container übereinander schiebe, dann kann ich mit dem z-index kontrollieren, welcher Container im Vordergrund ist und welcher im Hintergrund. Je größer die Zahl, umso mehr ist es im Vordergrund. Dann haben wir die Bewegungseffekte, also Animationen im Grunde. Hier haben wir auch wieder die Scroll und die Maus Effekte. Kommen wir noch zu Animationen, wo dann entsprechend reingeflogen wird. Darum soll es jetzt hier in diesem Einführungsvideo erstmal nicht gehen. Und transformieren, da können wir dann nach links und rechts im Kreis das ganze drehen, auch da sprechen wir noch drüber.

29:26
Responsiv kann ich sagen entsprechend, dass ein Container am Desktop oder am Handy ausgeblendet wird, am Tablet und dann entsprechend auf diesem Gerät nicht angezeigt wird. Und dann können wir noch im CSS hier direkt zu einem Container eintragen. Aber wie gesagt, über diese Sachen sprechen wir dann noch in den folgenden Videos.

29:51
Neben dem Flexbox System haben wir jetzt hier auch noch die Möglichkeit zu sagen, wir wollen ein Grid. Und der Unterschied ist im Grunde, dass ein Grid in der Regel immer gleich groß bleibt. Also ich sage einmal hier, ich möchte zwei Spalten und eine Zeile oder ich möchte drei Spalten und zwei Zeilen.

30:19
So, und da seht ihr schon, ich habe jetzt hier sechs Kästen, die alle gleich groß sind. Und darum heißt es andere Flexbox, weil es einfach flexibel ist und ich jede Box so groß machen kann, wie ich sie brauche. Beim Grid ist alles gleich groß und ich lege hier im Prinzip hier oben der Teil ist gleich und hier unten sage ich dann, ich möchte so und so viele Spalten und so viele Zeilen.

30:51
Und hier entsprechend sage ich, wie groß da die Lücke sein soll zwischen den einzelnen Elementen. Grid Outline, da seht ihr jetzt einfach nur diese Kästen hier drumherum.

31:03
Wenn ich das weg mache, dann seht ihr da gar nichts mehr und dann nur die Elemente, die im Prinzip drin sind im Grid. Ich werde jetzt auch erstmal hier ein paar Texte reinpacken, damit ihr das besser sehen könnt. So, ich habe jetzt hier meine 6 Texte und wenn ich das jetzt hier ausschalte, dann sehe ich entsprechend nur die Texte und nicht die Boxen drumherum.

31:34
Ihr seht, ich habe jetzt hier diese Mindesthöhe von 300 eingestellt. Wenn ich jetzt aber hier reingehen würde in Text eins und sagen würde, wenn ich jetzt hier einen Abstand reinbringe in das erste, werden hier entsprechend diese Kästen, wenn ich jetzt hier mal rausgehe, alle auch so groß. Das meine ich mit, es bleibt alles gleich groß von der Breite her und von der Höhe. So, dann haben wir hier auch wieder die Möglichkeit einmal zu sagen, das ist der große Unterschied. Ich kann nämlich, ich hatte ja gesagt, hier kann ich nur sagen, horizontale Richtung oder vertikal. Aber wenn ich das jetzt hier vertikal.

32:26
Mache und ändere, dann sind halt alle Boxen untereinander.

32:32
Beim Grid habe ich die Möglichkeit zu sagen, das ist jetzt hier in der Zeile, also hier ist jetzt Text 1, 2, 3, 4, 5 und 6. Jetzt aber sage Auto-Flow Spalte, dann habe ich 1, 2, 3, 4, 5, 6, so entlang. Das ist der Unterschied. Und ich kann auch immer nur ein Element in eine Box tun. Also ich kann jetzt nicht hier reingehen und sagen, mach jetzt hier unter den Text noch einen Button. Wenn ich das tue, dann fliegt er in einen anderen Kasten. Also pro Kasten kann ich immer nur ein Modul reinpacken. Auch das ist ein Unterschied zu der Flexbox, weil in eine Flexbox können wir auch ohne Probleme mehrere Elemente reinpacken. Hier haben wir dann wieder die gleichen Einstellungen. Also ich kann einmal sagen, ich möchte das am Anfang anordnen, in der Mitte, am Ende oder ausgedehnt.

33:43
Das sieht man jetzt nicht, aber wenn ich es jetzt z.B. ans Ende packe, dann seht ihr, mein Textkasten ist hier nur so breit, wie der Text an sich auch ist. Und wenn ich das dehne, dann ist mein Text entsprechend die komplette Breite. Align-items ist dann wieder oben. Hier ist es jetzt nicht oben, weil ich ja die 400px Zwischenraum hier oben ausgewählt habe. Wenn ich jetzt hier wieder reingehen würde und das rausnehmen würde, damit wieder alle gleich groß sind, dann würde das entsprechend hier auch mitgehen. Oben, Mitte, unten und entsprechend hier wieder, dass es das ganze Ding einnimmt. So, hier ist jetzt wieder nur oben und hier ist die ganze Box so, genau. Und vom Stil und erweitert. Diese Reiter, die sind im Grunde gleich. Hintergrundrahmen, Trennlinie und dann haben wir hier diese Einstellungen.

34:46
So, das ist im Prinzip dieser Unterschied von Flexbox und dem Grid. Und jetzt schauen wir uns ein paar Beispiele an, damit das Ganze auch verständlicher ist. Was ich wann benutze und so weiter. Unser erstes Beispiel ist eine Reihe mit

35:04
5 oder 6 Logos. Also wenn ich jetzt z.b. So einen Abschnitt mache, wo steht bekannt aus und dann werden da verschiedene Logos hinterlegt. Das ist eins der Beispiele, wo es sich lohnt mit einem Grid zu arbeiten. Ich zeige euch auch warum. Wir fügen jetzt hier mal diese drei Spalten einmal ein und sagen hier aber, wir wollen eine Zeile mit sechs Spalten, sechs Logos. So, und dann fügen wir jetzt hier das Bild einmal ein. Ich füge mal ein Logo ein und das kann ich jetzt duplizieren. Duplizieren. So, jetzt haben wir die hier alle in einer Reihe und ich könnte jetzt ganz schnell sagen, ne, mach da drei Spalten raus und zwei Zeilen. Hier machen wir mal noch ein bisschen Abstand. So, und es geht einfach binnen Sekunden. Also ich muss hier nur sagen, wie die Aufteilung sein soll und es passt.

36:29
So, und der Vorteil ist auch, nicht nur jetzt hier im Desktop, sondern auch in der mobilen Optimierung, ich gehe jetzt hier rein in das Tablet und kann jetzt hier z.B. sagen, das bleibt noch so. Und beim Handy möchte ich, dass hier entsprechend, wir gucken mal, ob es drei passen, genau, drei Spalten und zwei Zeilen. So, da möchte ich das entsprechend so haben. Ruckzuck ist das ganze erstellt, wir sind fertig, wir müssen nur noch die Logos austauschen. Würde ich jetzt eine Flexbox verwenden, dann müsste ich jetzt hier erstmal sagen, z.B. Eben diese drei Kästen, wir fügen uns das Logo ein und jetzt duplizieren wir unsere Container. Können wir die auch wieder rausnehmen, damit.

37:42
Hier alles gleich ist. So, wenn wir jetzt hier etwas ändern wollen, also was noch geht, ist hier zu sagen 20px Spalte, 20px Zeile, Lücke lassen.

38:17
Das macht er dann auch. Aber wenn wir jetzt ins Tablet gehen, das passt auch wieder noch, da wollen wir sechs nebeneinander haben. Und hier am Handy sind die jetzt automatisch untereinander.

38:32
Und jetzt muss ich in jeden einzelnen Kasten reingehen und sagen, ich möchte, dass das hier 30% und 30% ist, das 30% usw.

38:57
Und dann passt es wahrscheinlich schon mal nicht, weil ich auch noch diese Lücken gelassen habe. Das heißt, ich muss sogar noch ein bisschen runter gehen, weil ich ja noch die 20px Lücke gelassen habe und ich so schon nicht mehr auf eine Zeile komme, auf 100%, sondern schon über meinem 100% bin.

39:44
Hier haben wir die Breite von unserem Hauptcontainer. Machen wir mal auf . So, also ihr seht schon, ich muss halt ein bisschen rumspielen, damit es alles in eine Zeile passt und ich muss jeden einzelnen Container anfassen. Und bei der Gridbox kann ich halt wirklich einfach nur reingehen und sagen, mach mir jetzt hier drei Spalten und zwei Zeilen. So, und wenn ich unterschiedliche Logos habe, kann ich auch noch sagen, dass ich jetzt hier z.B. Ich mach mal hier nochmal ein anderes, dann kann ich entsprechend hier bei dem Auto-Flow auch noch diese Reihenfolge ändern, wenn ich das möchte. Also in diesem Sinne von, es ist in der Reihenfolge oder ist es von oben nach unten. Genau, also es geht einfach in diesem Moment deutlich schneller, weil ich einfach nur die einzelnen Elemente reinpacke und sage, was für eine Struktur ich haben möchte. Beispiel eins.

41:24
Als nächstes schauen wir uns mal an, was wir mit der Flexbox so schönes machen können. Und zwar wählen wir jetzt hier dafür erstmal diese Option hier aus mit den drei Boxen. Und damit wir das besser sehen können, gebe ich den jetzt erstmal eine Hintergrundfarbe. So, jetzt haben wir hier unsere drei Boxen. Und wenn wir einmal in diesen Überblick.

42:00
Hier reingucken. Also wir fangen hier an, hier geht unsere Box los. Also wir sehen, das alles zu machen. Das ist unser Hauptcontainer, das was jetzt quasi gerade rosa markiert ist. Unter diesem Container haben wir jetzt zwei Container, also die linke Spalte und die rechte Spalte. So, wir sehen also links und rechts. Wir können auch das einfach hier einmal hochschieben.

42:38
Und dann haben wir das Ganze vertauscht. Also das ist auch eine Möglichkeit, wenn ihr im Prinzip das umgekehrt haben wollt, diese Boxen. Wir können diese 3 Boxen also quasi hin und her schieben. Was ich euch aber eigentlich zeigen wollte, hier ist die Struktur. Also wir sehen, das ist der Übercontainer. So, da wird er jetzt markiert. Dann haben wir den linken Container und den rechten. Und wenn wir links aufklappen, ist jetzt hier in diesem linken nur noch die Überschrift drin. Wenn wir den rechten aufklappen, dann haben wir hier wieder zwei Container, die entsprechend diese Texte hier drin haben. Und und wenn ich jetzt auf den rechten Container reingehe, dann kann ich hier theoretisch auch wieder noch sagen, mach das ganze nebeneinander. Dann sind die zwei Texte hier nebeneinander, die zwei Container oder eben untereinander. Das war jetzt das, was eingestellt ist.

43:42
Genau, also da könnte ich jetzt dann auch noch mal wechseln. Wenn wir jetzt ins Tablet gehen, sieht das ganze erstmal so aus. Und vielleicht sagen wir jetzt, wir wollen das hier an dieser Stelle anders aufgeteilt haben. Wir wollen, dass diese Box oben ist und die zwei unten. Dann können wir entsprechend hier in dieser Box ganz flexibel sein und sagen, ich möchte, dass dieser erste Container hier 100 % breit ist. So, wir sagen noch, dass das dann hier gewrapt werden soll. So, und jetzt können wir sagen, der hier ist 50 % da sind sie jetzt standardmäßig auch schon und der ist auch 50. So und jetzt seht ihr, ist es ja immer noch nicht jetzt hier 50 % von diesem gesamten. Das liegt daran, dass wir noch den Elterncontainer haben von diesen beiden.

45:27
Also über diesen beiden Überschriften hier, das ist hier die eine Überschrift, das ist die zweite, liegt ja noch dieser Kasten hier. Das ist der gesamte Kasten und der muss auf 100 % gestellt werden.

45:47
So und die zwei Texte, die da drin sind, oder die zwei Untercontainer, wo die Texte dann drin sind, die sind standardmäßig hier ja vertikal, weil wir hatten die ja am Desktop in der rechten Spalte untereinander. Und jetzt wollen wir aber, dass sie hier am Tablet nebeneinander sind. Und schon haben wir das ganz easy so hier ganz anders gestaltet als am
Desktop, weil es einfach dann vielleicht in

46:17
dieser Ansicht so besser passt, als wenn ich das nebeneinander mache, wenn ich da auch mehr Text drin habe oder ein Bild oder so. So und am Handy können wir es jetzt noch mal ganz anders machen. Also auch hier könnten wir jetzt theoretisch reingehen und sagen, ich gehe hier in den rechten Container, also was vorher rechts war und

46:46
gehe dann in meine Untercontainer. Die sind jetzt hier standardmäßig auf 100 und kann das auch nochmal wieder so ändern, dass die auf 50 sind.

46:55
Und dann habe ich das selbst am Handy auch so geregelt, dass es in dieser Ansicht ist. So, für das nächste Beispiel habe ich ja jetzt diese Boxen hier, die Reihenfolge geändert, hier das Bild und jetzt hier noch zwei so eine Icon Boxen reingepackt. Die ordnen wir jetzt mal noch so an, dass sie Zwischenraum haben bzw. Moment, ich bin glaube ich im falschen Container. Genau dafür, genau dafür sind diese Layer Ansichten gut. So, das einmal oben und einmal hier unten. So, wenn ich jetzt ins Tablett gehe, dann sieht das Ganze so aus. Und es wäre ja sinnvoller, das Bild über Icons zu machen, wenn ich es nicht ganz ausblenden möchte. Und zwar können wir dafür hier in diesen unteren großen Container gehen und hier dann unter erweitert haben wir den Punkt Sortierung. Und hier können wir erstmal das hier nach oben schieben und dann haben wir es getauscht.

48:08
Wir können aber auch , wenn das jetzt mehrere Boxen sind, könnten wir hier auch theoretisch individuell tauschen. Also ich kann es auch hier direkt sagen, bei null fängt es immer an, null ist ganz vorne und dann gehe ich in den oberen Kasten hier und sage eins. Und auch dann wird es getauscht.

48:31
Also wenn ich jetzt noch mehr Boxen habe, z.B. Drei nebeneinander, wir machen mal, dass wir hier, wir machen mal ein.

48:45
Anderes Beispiel, wir sagen mal drei nebeneinander. Also wenn ich jetzt hier meine Box habe mit drei Containern, dann kann ich theoretisch eben sagen, ich möchte z.B. Das am Tablet, die rosane links ist, die grüne in der Mitte, die gelbe am Rand. So, und dann nützt es mir ja nichts zu sagen, dreh einfach die Reihenfolge.

49:16
Sondern dann muss ich wirklich eine Reihenfolge vergeben, eine individuelle. Und das kann ich eben machen, indem ich in den Container reingehe und jetzt hier sage, bei Sortierung individuell null. Dann gehe ich in diesen hier rein, erweitert, eins und in den gelben Zwei.

49:46
Und dann habe ich diese andere Reihenfolge geschaffen. Und wenn ich aber ans Tablet, an den Desktop zurückgehe, habe ich weiterhin meine Reihenfolge so, wie ich sie vorher hatte. Genau, also da können wir dann immer noch individuell switchen. Ein praktisches Beispiel, wo wir das mit den Kästen sortieren anwenden könnten, ist bei unserem Menü z.B. Also wenn ich jetzt hier z.B. Eben mein Logo hin habe, ich füge mal wieder ein Logo ein. Hier haben wir unser Logo, dann kommt unser Menü. Und als letztes wollen wir noch einen Call to Action Button hier einfügen. So, die Farben lassen wir mal so, wie gesagt, dann seht ihr die Kästen besser. Wir machen jetzt hier das mal noch zentriert und zentriert. So, und den Button ebenfalls. So, das jetzt unter Menü am Desktop gehen wir zum Tablet. Moment, ich muss erstmal wieder die Standardeinstellungen zurückgehen.

51:51
So, jetzt habe ich hier unsere umgekehrte Reihenfolge entfernt, die wir eben drin hatten. Jetzt haben wir hier auch wieder normal Logo, Menü, Button. So, aber am Tablet und am Handy wollen wir vielleicht, dass unser hamburger Menü ganz rechts ist und der Button in der Mitte. Und das können wir jetzt ganz easy machen, indem wir eben diese Reihenfolge ändern. Das heißt, wir gehen, der bleibt so gleich, wir gehen hier rein und sagen nicht null, sondern zwei. Und hier gehen wir rein, es ist ja jetzt schon richtig, aber wir machen es mal noch richtig und sagen hier eins, genau. Und dann können wir entsprechend noch sagen, ich möchte das am Tablet hier nicht so breit haben. Mir reicht das, wenn das z.B. 20 % breit ist und dafür die anderen beiden 40. So, und jetzt haben wir ganz schnell unser anderes Menü gebaut.

53:37
Jetzt könnten wir natürlich hier auch noch das ein bisschen anders machen, dass das wirklich zentriert ist. Also dass wir sagen, das 20 z.B. Und dieser Kasten hier in der Mitte dann 60, damit der Button auch letztendlich wirklich in der Mitte ist. . Also Moment, so, genau. So z.b. können wir halt so spielen, wie wir möchten und die Reihenfolge ändern, so wie wir möchten. Und dann das ganze am Handy könnten wir auch noch mal ganz anders gestalten. Jetzt ist es hier nebeneinander. Wir können dann z.b. Sagen, mach den Button weg am Handy wollen wir nicht. Oder wir können auch mal schauen, vielleicht klappt es auch, wenn ich das hier wieder so mache, mit dem 2020 und hier dann 60. Passt das so oder ist es dann zu eng?

54:34
Dann können wir hier vielleicht den Button noch anpassen, dass da nicht steht, hier klicken, sondern meinetwegen nur Newsletter. Oder wir machen die Schrift kleiner, damit es eben in eine Zeile passt und nicht so komisch abgeschnitten ist. Aber da kommen wir gleich noch zu bei der mobilen Optimierung. Aber das wäre z.B. Ein praktisches Beispiel, wo man diese Umkehrung von den Boxen sinnvoll nutzen kann. Ihr seid also super flexibel mit diesem Flexbox System. Ihr könnt auch Boxen ineinander verschachteln. Also wenn ihr jetzt z.B. Sagt, ich möchte jetzt hier zwei Spalten haben und innerhalb von diesen zwei Spalten sollen dann nochmal , so Container untereinander sein, wie wir das eben auch schon hatten. Dann könnt ihr diese Container, wie ihr hier seht, auch ineinander packen. So, jetzt habe ich hier die Spalten links und rechts und dann untereinander.

55:38
Und dann kann ich hier auch theoretisch wieder die Richtung ändern und dann ist es wieder nebeneinander, wie wir das vorhin auch schon hatten. Was ihr also machen müsst, ist: Wenn ihr einen Abschnitt erstellt und in eurem Kopf schon wisst, wie das aussieht, müsst ihr einmal überlegen, sind die Spalten überall gleich? Ist überall nur ein Element in jeder Spalte? Wenn ja, dann ist es ein Grid. Wenn nein, dann baut ihr es mit der Flexbox und überlegt, welche Struktur nehme ich da . Am besten ist es immer, so wenig Container wie möglich zu verwenden. Also das hier z.B. Wenn ich jetzt das hier nachbauen möchte, dann brauche ich hier theoretisch diese Container nicht. Das war jetzt nur ein Beispiel. Wenn ich einfach nur zwei Iconboxen untereinander haben möchte, dann kann ich auch die Iconboxen einfach so einfügen. ohne einen extra Container.

56:51
Der Container wäre jetzt nur notwendig, wenn z.B. Mehrere Sachen da drin sind. Also wenn ich jetzt hier einen Container. So, und dann machen wir jetzt hier meinetwegen Bild und Text. Und das soll jetzt aber nebeneinander sein. So, und dann kopieren wir uns das noch mal. So, z.B. Hier sind jetzt diese extra Container notwendig. Also hier muss ich jetzt sagen, es ist der Obercontainer. Das ist der Obercontainer von allem. Dann kommen unsere zwei Container, der linke und der rechte. So, und dann sage ich, ja, ist ja dieser Container hat die Ausrichtung, die Richtung vertikal. Das heißt, damit ich dann hier wieder horizontal gehen kann, brauche ich den Container im Container, weil wie wir gelernt haben, die Flexbox geht immer nur in eine Richtung. Ich kann nicht sagen, mach hier die zwei Boxen hin, so, also mach erst zwei untereinander und dann zwei nebeneinander.

59:00
Das heißt, wenn ich das so machen möchte und z.B. Auch sagen möchte, dass das Bild noch ein bisschen schmaler ist als der Text, dann machen wir das hier mit diesen zwei Containern. Wenn ich aber wirklich nur zwei Elemente untereinander haben möchte, dann brauche ich diese extra Container untereinander nicht, sondern kann eben hier direkt in diesen Container sagen, packt da die Iconbox rein. So, wir nehmen es mal wieder weg. So, und machen jetzt hier unsere Iconbox rein. So, und ich habe es genauso untereinander und habe aber weniger Container. Versucht immer so wenig wie möglich Container zu verwenden, weil das, je mehr Container ihr habt, umso größer ist euer Code. Manchmal braucht man das. Also wie gesagt, wie ich das eben gemacht habe, da brauchte ich jetzt diesen Container, besonders wenn meine vier Kästen dann unterschiedlich groß sind.

01:00:14
Hier kann ich jetzt wieder sagen, ich möchte, dass die da nebeneinander sind. Z.B. Und noch eine Sache, ich hoffe, ich verwirre euch jetzt damit nicht komplett. Ihr könnt auch in diesem Container hier ein Grid machen. Also wenn ihr sagt, dass dieses Bildtext Bild Text Konstrukt, was wir da eben gebaut haben, alle vier Zellen gleich hoch sind, dann kann ich auch sagen, zwei mal zwei. Und dann mache ich hier entsprechend das Bild, den Text, das Bild, und den Text. So, bitte, bitte habt jetzt keine Angst davor. Jetzt kann ich hier auch noch den Abstand eingeben. Wenn ihr das umsetzt und erstmal Sachen damit baut, dann ist das auch alles verständlicher und wird alles klarer. Das ist Anfang ein bisschen viel, aber mit der Übung wird das auf jeden Fall klar und man kommt auch damit klar.

01:01:36
Ich möchte euch das nur von Anfang an richtig sagen. Also wenn ein Grid möglich ist, dann nimmt ein Grid und ansonsten überlegt, wie könnt ihr das mit so wenig Containern wie möglich darstellen. Und genau dafür sind ja dann auch die Übungsaufgaben dass wir das Ganze üben und ausprobieren und dann wird das auch immer leichter und ihr denkt gar nicht mehr groß darüber nach.

01:06
Das habe ich hier bei Elementor nicht. Darum kann man einfach diese zwei Module getrennt voneinander verwenden, das dann darzustellen. Genau, also bei einer Überschrift haben wir erst einmal hier im Inhalt die Möglichkeit den Titel zu ändern, also den Text. Ich kann das auch mit AI generieren lassen, aber zum Thema AI kommen wir später in Modul 8. Ich kann auch dynamisch mir meine Überschrift generieren lassen, also zum Beispiel sagen an dieser Stelle soll immer der Titel von der Seite angezeigt werden oder vom Beitrag, dann wird es immer so angezeigt. Also dann kann ich hier nichts mehr ändern an dem Text, außer was vorher und nachher. Also ich kann zum Beispiel sagen, Ich weiß nicht, was ich jetzt hier vor einem Titel noch sagen würde. Ich mache jetzt einfach mal Titel. Dann seht ihr, wie es aussieht.

02:04
Es macht jetzt an dieser Stelle nicht so viel Sinn. Aber dann kann ich da noch was davor und dahinter schreiben. Aber ich kann den Titel selbst nicht anpassen. Der wird dynamisch generiert. Das ist der Seitentitel von dieser Seite. So, ich nehme das mal wieder weg. Dann kann ich der Überschrift auch einen Link geben, mache ich bei einer Überschrift jetzt eigentlich nie, es sei denn, wir wollen dann vielleicht irgendwie zu einer anderen Seite verlinken, dass das jetzt auf der Startseite zum Beispiel irgendwie so eine Box ist, wo ich sage, das sind meine Angebote und dann soll die Überschrift auch verlinkt sein, dann kann ich das hier machen. Was diese Eigenschaften hier betrifft, das schauen wir uns beim Button dann nochmal genauer an. Das ist jetzt hier bei der Überschrift eigentlich vollkommen unnötig, das braucht man nicht.

02:57
Und hier kann ich aber jetzt noch bestimmen, was es für eine Überschrift ist. Also eine H1 ist im Prinzip mein Seitentitel und Die anderen Überschriften sind dann so Unterüberschriften, also die H2 kommt nach der H1 und so weiter. Das kommt auch, wie gesagt, im SEO-Thema nochmal dran, wenn wir da über die Struktur sprechen. Aber nur, dass ihr es schon mal gehört habt, die H1 ist im Prinzip die Seitenüberschrift, H2 sind dann die einzelnen Überschriften der Abschnitte und wenn es in den Abschnitten nochmal Unterüberschriften gibt, nimmt ihr H3. Genau, die gleichen Einstellungen ungefähr haben wir hier auch beim Text. Hier haben wir einmal, dass wir hier den Text einfügen können. Also ihr seht, es sieht ein bisschen anders aus. Hier haben wir nur so ein kurzes Feld. Hier kann ich jetzt auch noch mehr Einstellungen vornehmen in Bezug auf das Sollfettsein, Kursiv, Aufzählungszeichen und Verlinkung.

03:56
Also wenn ich jetzt hier ein Wort verlinken möchte, kann ich hier auch draufklicken und dann hier einen Link reinsetzen. So, hat er nicht genommen. Nochmal. So, jetzt aber. Und dabei kann ich auch sagen, ich gehe hier drauf und klicke, ob das Ganze in einem neuen Tab geöffnet werden soll oder nicht. Initiale. Ist wie in so einem Buch, sag ich mal, dass da der erste Buchstabe groß ist, verwende ich jetzt eigentlich auch nicht. Und hier unter Spalten könnte ich jetzt rein theoretisch auch noch sagen, ich möchte das Ganze, meinen Text, wenn es ein längerer ist, in zwei Spalten aufteilen. Aber auch das mache ich eher selbst, dass ich die Texte dann selbst trenne und so in die Spalten packe. Aber ihr habt es mal gesehen, es ist möglich. Und dann kann ich auch sagen, wie viel Abstand zwischen den Spalten sein soll.

04:59
Kommen wir mal zum Stil. Ich erkläre erstmal diese Sachen. Bei der Überschrift gibt es noch zwei, drei Sachen mehr. Ich glaube zwei. Wir können hier auswählen, ob das Ganze eben linksbündig ist, zentriert, rechtsbündig oder auch im Blocksatz. Blocksatz bitte ich euch bei Websites nicht zu verwenden, weil wenn wir uns das mal angucken, entstehen hier ganz hässliche Lücken, wenn jetzt hier unsere Zeile zum Beispiel noch breiter ist. Und dann werden die Lücken noch hässlicher. Und dann entstehen so ungleichmäßig große Lücken. Und das wollen wir nicht, weil das unseren Lesefluss auch negativ beeinflusst. Also wenn ihr mehrere Zeilen habt, nehmt immer linksbündig. Also jetzt mehr als zwei, wenn ich sag mal so ab vier Zeilen. Würde ich eher immer das linksbündig machen. Und wenn es so zwei Zeilen sind, wie jetzt hier in dem Beispiel, ist auch zentriert okay.

06:00
Aber grundsätzlich sagt man, dass es für das Auge leichter zu lesen ist, wenn er das linksbündig ist. Dann können wir die Farbe hier einstellen. Hier haben wir, wenn wir auf diesen Globus klicken, haben wir unsere globalen Farben, die wir hinterlegt haben bei der Einrichtung. Die kann ich auswählen oder ich kann auch selbst hier entweder einen Farbcode eingeben oder hier individuell suchen in diesem Auswähler. Und wenn ich jetzt irgendwie sage, oh, die Farbe gefällt mir und ich möchte mir die abspeichern, kann ich die auch hier über das Plus zu meinen globalen Farben hinzufügen. Oder ich sage auch, wenn ich jetzt plötzlich merke, ich mache mal wieder rot, dann fällt es mir auf, Oh Mist, jetzt habe ich da aus Versehen irgendwas geklickt. Ich will es wieder rückgängig machen zu meinen Standardeinstellungen.

06:53
Dann kann ich hier auf das Löschen klicken und dann habe ich es wieder so, wie ich es in den globalen Einstellungen gemacht habe. Wichtig ist, dass ihr noch mal euch in Erinnerung ruft, wenn ich jetzt hier irgendwas einstelle. So. Und dann später an den globalen Einstellungen meinen Fließtext, meine Fließtextfarbe zum Beispiel, ändere jetzt, wie wir es jetzt hier gerade machen. Dann würde sich dieser Text hier nicht anpassen, weil wir den schon angepasst haben individuell. Ich zeige euch das nochmal anhand der Einstellungen. Ich habe jetzt hier einmal einen Text mit meinen normalen Farben, die ich global eingestellt habe und das habe ich manuell im Textfeld geändert. Wenn ich jetzt in meine globalen Einstellungen reingehe, So, und hier gehe ich jetzt rein und sage, meine Textfarbe soll jetzt blau sein.

07:57
So, dann seht ihr, hier passt er das an, weil das ist mein Standard, das ist meine Default-Farbe, dieses Schwarz. Es wird automatisch angepasst, wenn ich diese Default-Farbe ändere. Da ich hier aber schon Änderungen in der Textfarbe im Modul vorgenommen habe, wird die Änderung nicht übernommen. Das müsst ihr immer bedenken, wenn ihr die Farben direkt dort im Textmodul anfasst, dass wenn ihr dann global auf der gesamten Webseite irgendeine Farbe ändern wollt, dass das dann nicht gilt. So, nochmal als kleiner Einschub. Gehen wir wieder raus. Neben der Farbe haben wir auch noch unsere Typografie-Einstellungen. Hier kann ich wieder die globalen Schriften auswählen. Da gilt das Gleiche wie für die Farben. Ich kann das hier auswählen, wenn ich diese hier auswähle und die dann in den globalen Einstellungen anpasse, wird das auch angepasst.

08:49
Wenn ich aber hier draufklicke und hier die Einstellungen mache, dann bleibt es immer so, auch wenn ich in den globalen Einstellungen etwas ändere. Also ich kann hier die Schriftart auswählen, die Größe, Ich kann hier sagen, wie fett das Ganze sein soll. Ich kann sagen, ob es Großbuchstaben, Kleinbuchstaben, Großschreibungen, das bedeutet, dass immer der Anfangsbuchstabe groß ist, oder halt normal. Normal und Vorgabe ist jetzt in dem Fall das Gleiche. Vorgabe ist, nein, ist nicht das Gleiche. Vorgabe ist das, was ihr in den globalen Einstellungen eingestellt habt. Und normal wäre dann, wenn ich jetzt zum Beispiel sage, hier in der Überschrift habe ich ja als Vorgabe jetzt, dass es Großbuchstaben sind. Also hier steht jetzt Vorgabe. Wenn ich jetzt aber hier normal wähle, dann ist es normal. Also Vorgabe bedeutet das, was ihr in den globalen Einstellungen gemacht habt.

09:53
Und dann habt ihr hier noch diese anderen Möglichkeiten. Und dann habe ich noch Stil, also kursiv oder schräg oder normal und Unterstreichungen. Wir haben dann auch noch den Abstand zwischen den Zeilen, das ist die Leinheit. Das wird meist in EM-Werten angegeben. Ich zeige das mal im Text, das sieht man dann besser, weil es mehrere Zeilen sind. Das fängt so, sage ich mal, bei 1,4 an. 1,5, 1,6, so, damit man das gut lesen kann. So, ich sag mal so zwischen 1,4 und 1,6 ist so der normale Abstand von Fließtexten. Bei einer Überschrift kann es auch mal weniger sein, weil die Schriftgröße ja größer ist. Da schaut ihr dann einfach, wie es auch optisch gut aussieht, damit das nicht zu nah rangeklappt ist, aber auch nicht zu viel Abstand, sag ich mal. Letter Spacing ist dann der Abstand zwischen den einzelnen Buchstaben.

11:05
Und Wortabstand, ja, ist der Abstand zwischen den Worten. Das ist, glaube ich, selbsterklärend. Ich mach’s mal wieder alles rückgängig. So. Und Text Shadow, ja, ist der Schatten. Würde ich jetzt bei Vliestext auch nicht verwenden. Ich zeig’s euch mal bei der Überschrift. Haben wir hier den Text Shadow. Und da kann ich erstmal sagen, wie unscharf das sein soll. Also ich kann zum Beispiel auch das ganz dolle Das ist ja ein bisschen dolle. Dass es scharf ist, machen. Oder ich sage, also ihr seht, das ist jetzt schon richtig so diese Buchstaben. Und wenn ich so mache, dann ist es wirklich unscharf. Und hier kann ich auch noch die Farbe verändern. Hier habe ich die Farben und hier ist die Transparenz. Also der zweite Balken ist immer die Transparenz. So. Könnte jetzt also hier Zum Beispiel so einen ganz roten, das sieht wunderschön aus, Schatten machen.

12:13
Oder ich kann halt das dann auch transparenter machen. Und bei der Überschrift haben wir auch noch die Textumrandung. Und da kann ich dann im Prinzip hier so einen Rand drum machen, wie der Name schon sagt. Und kann hier auch die Farbe von diesem Rand wählen. Das ist der Unterschied zum Text. Dann haben wir noch erweiterte Einstellungen, die wir auch so gut wie bei allen Modulen haben. Das Prinzip vom Abstand erkläre ich euch am besten mal bei einem Container und nicht vom Text, weil man das dann besser sieht. Farbe wollte ich ändern. Wir haben den Innenabstand und den Außenabstand. Wenn das hier grau hinterlegt ist, bedeutet das, sobald ich hier eine Zahl eintrage, wird die auf allen vier Seiten eingefügt. Wenn ich das hier rückgängig rausnehme, dann kann ich individuell pro Seite eine unterschiedliche Zahl eingeben.

13:32
Außenabstand ist, wenn wir im CSS sprechen, heißt es auch Margin und das heißt Padding. Margin bedeutet jetzt außerhalb der Box. Also wenn ich jetzt hier einen Abstand einfüge, dann seht ihr, haben wir den Abstand hier. Wenn ich das Ganze bei Innenabstand eintrage, habe ich das Ganze hier, also innerhalb dieser Box. Das ist der Unterschied von Margin und Padding. Gehen wir zurück zum Text. Was hier jetzt noch wichtig ist, Ich könnte jetzt hier auch noch die Breite ändern von meinem Text. Also ich könnte sagen, es soll nur 50% breit sein. Das benutze ich aber sehr selten. Und hier kann ich jetzt aber auch noch sagen, wie das Ganze ausgerichtet sein soll.

14:23
Zum Beispiel bei einer Überschrift, hier habe ich ja jetzt einen Fließtext, da würde es jetzt auch nicht viel Sinn ergeben, aber hier könnte ich jetzt auch sagen, dass ich das rechtsbündig haben möchte, wenn ich jetzt nicht schon das hier, also es ist im Prinzip ähnlich wie hier die Ausrichtung. Oder ich sage das Ganze, also ihr seht jetzt, habt ihr den Kasten, das ist der Unterschied, wenn ich gehe mal nochmal, mache es mal nochmal Standard, so. Seht ihr, haben wir jetzt hier den Kasten, oben das ganze Ding, also das heißt, Wenn ich meinem Text eine Hintergrundfarbe geben würde, meiner Überschrift, nimmt das den ganzen Kasten ein. Und das ändert sich auch nicht, wenn ich jetzt hier links und rechts und zentriert was ändere. Das Element selbst nimmt diese ganze Zeile ein.

15:19
Die Breite kann ich halt hier, wie gesagt, ändern, wenn ich jetzt das nicht so breit haben möchte. Dann ist der Kasten 50% breit. Oder aber ich sage, ich möchte das eben an den Anfang haben, dann macht er es so breit, wie mein Text ist. Zentriert, die ganze Box ist nur so breit wie mein Text und am Ende das Gleiche und das ist eben der Standard. So, dass die ganzen Sachen im Blocksatz sozusagen untereinander sind. Hier kann ich die Reihenfolge ändern, wenn ich irgendwie das zum Beispiel, brauche ich jetzt beim Text eigentlich nicht so unbedingt, aber ich sage mal, wenn ich zwei Container habe, das hatten wir auch in dem Flexbox-Video schon, und ich möchte Tablet dann die Reihenfolge ändern, kann ich das über diese Funktion machen.

16:14
Und genauso geht es hier im Prinzip auch mit dem Text, dass ich jetzt sage, ich möchte das 1 runter haben beim Tablet oder so. Also bei der Überschrift macht das jetzt keinen Sinn, aber das kann man so hin und her schieben sozusagen. Dann ist noch der Z-Index an dieser Stelle wichtig. Das kann manchmal sein, wenn ihr zum Beispiel den Text über ein Bild schieben wollt. Also ich habe jetzt mal den Text auf. Ja, wir lassen den hier. Ist egal. Und haben jetzt hier ein Bild. So, und ich möchte jetzt, dass dieses Bild So. Hier so ein Stück nach drüben. Ich mach das mal ein bisschen auffälliger. So. Und den Text mal so. So, jetzt seht ihr, der Text ist hinter dem Bild. Und wenn ich den Z-Index hochsetze, dann erscheint er plötzlich über dem Bild.

17:39
Also ihr könnt euch das so ein bisschen so vorstellen, wie die Z-Achse im Matheunterricht. Wir haben die X- und die Y-Achse nach oben und nach rechts. Also quasi einmal die x-Achse und die y-Achse und die z-Achse ist dann das dreidimensionale, was übereinander liegt. Und über den z-Index, wenn ich den hochsetze, kann ich eben bestimmen, das Bild soll unten liegen. So, ich kann es auch jetzt hier wieder hochsetzen auf 2 hoch. Nicht auf minus 2, sondern auf 2. Dann ist es wieder im Vordergrund. Dann ist diese 2 ja wieder höher als die 1 und dadurch ist es wieder im Vordergrund. Und so kann ich die Reihenfolge wie es aufeinander liegt, strukturieren. Hier können wir CSS-ID und CSS-Klassen eingeben, da kommen wir dann auch in Modul 8 drauf zu sprechen.

18:30
Aber ID ist erstmal eine Sache, die es nur einmal auf einer Seite gibt und CSS-Klasse, das gibt es mehrfach. CSS-ID wird zum Beispiel verwendet, wenn ich Menüpunkte habe, also wenn ich einen One-Pager habe und da drauf klicke und zu einem bestimmten Abschnitt springe. Dann gibt es diesen Abschnitt nur einmal. Das ist die ID. Da muss ich eine ID verwenden. Eine Klasse ist zum Beispiel, wenn ich mehrere Boxen habe, Textboxen, die ein bestimmtes Aussehen haben sollen, dann kann ich mehreren Textboxen die gleiche Klasse vergeben. Und es für alle einmal festlegen. Das ist der Unterschied. Bei den Bewegungseffekten, wir gehen mal hier jetzt in den Text hier da rein, ist aber das gleiche bei der Überschrift, nur weil wir jetzt hier schon so verschoben haben wir einmal Scroll-Effekte und Maus-Effekte und dann auch noch die Animation.

19:34
Scroll-Effekte, da kann ich sagen, wir schieben das Ganze mal hier runter, damit man auch was zum Scrollen hat. Wir können das Ganze vertikal scrollen lassen, also wenn ich jetzt hier runtergehe, dann bewegt sich das von oben nach unten oder auch andersrum, so nach unten. Das gleiche können wir auch mit horizontal machen. Ich mache so, dass sich das dann so rein bewegt. Hier können wir dann immer noch die Geschwindigkeit sagen und wann es anfangen soll, sich zu bewegen vom Bildschirm her. Also sobald es im Bild ist, also es ist ja jetzt hier bei mir schon direkt im Bild, dann soll es sich losbewegen und wenn es hier quasi ganz oben ist, dann hört es auf. Ich kann aber auch sagen, es soll sich nur einen ganz kleinen Moment mit bewegen. So, dann bewegt sich das jetzt erstmal nicht. Es steht still, wie ihr seht.

20:39
Sobald ich da hinkomme, ich hoffe, dass… Ja, wir machen mal hier noch ein bisschen Platz, damit wir das sehen. So. Jetzt scrolle. Seht ihr, jetzt bewegt es sich. Ist bei 33 Prozent. Hatten wir, glaube ich, eingestellt. So und dann bewegt es sich und jetzt hört es wieder auf. Also das kann ich damit bestimmen, indem ich da diese Viewport-Einstellungen mache. Die Transparenz ist, dass der Text halt dann erscheint so oder halt auch ausgeblendet wird. Unschärfe ist dann dass es unscharf ist und sobald ich da irgendwie an eine bestimmte Stelle komme, wird es scharf. Das kann man zum Beispiel bei Bildern ganz gut verwenden. Hier, ja, das ist eine kleine Spielerei, würde ich auch eher wenn dann bei Bildern verwenden, dass sich hier der Text so dreht beim Scrollen.

21:42
Oder vielleicht so auch mal, wenn man nur ein Wort irgendwie hat, das geht natürlich auch beim Scale-Effekt kann ich halt das ganze größer machen, wenn man scrollt, kleiner oder auch klein und groß in unterschiedlicher Reihenfolge. Dann haben wir Mouse-Effekte. Eher auch für Bilder geeignet, dass man hier zum Beispiel Wenn ich dann mit der Maus rangehe, bewegt sich das mit meiner Mausbewegung. Oder 3D-Tilt. Dann bewegt sich das so. Das macht jetzt bei Text wenig Sinn. Wir machen das mal direkt beim Bild. Da kann das ein ganz cooler Effekt sein. Da raufgehen mit der Maus, dann bewegt sich das so. Genau, oder halt entgegengesetzt zu meiner Mausbewegung. Genau, wenn etwas sticky ist, das zeige ich jetzt mal hier bei der Überschrift, die haben wir schon so schön oben.

23:06
Kann ich sagen oben oder unten, also ich könnte zum Beispiel auch so ein Scroll, also manchmal hat man ja hier so Icons, zurück nach oben. Das kann ich dann mit dieser Eigenschaft sticky unten machen. Jetzt habe ich das hier sticky oben, die Überschrift. Und wenn ich jetzt scrolle, bleibt diese Überschrift immer hier oben. Ich kann auch sagen, die soll ein bisschen Abstand haben, so von meinem Bildschirmrand. Dann bleibt das immer hier oben. Das wird zum Beispiel bei Menüzeilen oft verwendet. Es könnte vielleicht auch eine Telefonnummer sein, die immer oben eingeblendet ist. Oder manchmal hat man das auch mit Social Media Icons, die da mit fliegen bei Blogbeiträgen. Dafür kann man das benutzen. Und Eingangsanimation ist letztendlich einfach nur eine Animation, wie das Ganze hier reingeflogen kommt. Fade in. Fade in von links. Fade in von rechts. Und dann haben wir noch so andere Sachen.

24:09
Zoom in, Bouncing, Sliding, auch in der Drehbewegung, genaue Swing, also da könnt ihr euch mal durchgucken. Bei Animationen immer darauf achten, mit Bedacht wählen. Also es kann auflockern, aber es sollte jetzt auch nicht jedes Element betreffen. Genau, hier kann ich das dann auch noch verzögern, dass ich sage, es soll nicht sofort diese Animation losgehen, sondern nach einer bestimmten Weile. Genau. So, ich nehme mal das sticky wieder raus. Transformieren. Damit kann ich mein Element verschieben. Zum einen ist es hier möglich, dass ich das im Normalzustand mache oder wenn ich hovere. Also ich kann zum Beispiel sagen, dass mein Bild Wenn ich da draufgehe mit der Maus, nicht hier, sondern hier, ein bisschen größer wird, dass das Maßstab da auch immer 0,3, 1,3, 1,1, das glaube ich in Prozenten berechnet, also das sind dann 110%.

25:35
Also vorher ist das Bild 100% und jetzt ist es dann 10% größer. Und das passiert dann halt, wenn ich… Achso, ich hab’s jetzt bei normal. Wir wollen das beim Hovern. Das heißt, wenn ich jetzt mit der Maus draufgehe, dann wird das Bild größer. So, das ist eine Möglichkeit. Wir können aber die Sachen auch drehen. Wunderschön. Wir können das Ganze auch, wenn wir jetzt mal zurück zur Überschrift gehen, hier einmal das Ganze ein Stück nach unten ziehen. Also hier haben wir wieder die x-Achse und die y-Achse, wie im Matheunterricht. Und das Ganze so verschieben. Könnt das Ganze aber auch mit Margin machen. Also ihr braucht hier nicht diese transformieren Funktion. Der Unterschied ist, ich zeig das mal hier kurz. Jetzt hab ich hier so viel Mist gemacht. Ich füge mal hier einen neuen Abschnitt ein.

27:02
Und der Unterschied ist, wenn ich jetzt hier die Überschrift so verschiebe, also sage 60 Pixel Außenabstand, dann bewegt sich der Text unten mit. Wenn ich jetzt aber hier reingehe und sage Dann verschiebt sich nur die Überschrift. Der Text bleibt an der gleichen Stelle. Das ist der Unterschied. Ich benutze meistens eher den Abstand oben statt dieses Transformieren, weil man dann einfach ordentlicher arbeitet. Also für mich zumindest. Maßstab hatten wir schon. Schräge ist dann entsprechend. Das benutze ich eigentlich nie. Und dann haben wir noch horizontales Drehen und vertikales Drehen, was dann auch bei Bildern eher sinnvoll ist. Hintergrund hatten wir auch schon. Da kann ich diesem Textfeld einen Hintergrund geben. Wir haben hier, wenn wir auf diesen klassischen Hintergrund gehen, immer eine Farbe oder auch ein Bild. Also ich könnte jetzt diesen Text hier auf ein Bild in den Hintergrund legen.

28:09
Und hier haben wir einen Farbverlauf. Also da könnte ich dann zwei verschiedene Farben wählen. Und die würden dann hier angezeigt werden. Aber das ist jetzt auch nichts für einen Text. Ich kann hier auch wieder einen Rahmen geben. Durchgezogen, Rahmenbreite 3 Pixel. Dann haben wir hier dieses Feld herum 3 Pixel. Dann würde ich hier wieder hier ins Padding reingehen in dem Fall. Also hier sehen wir das jetzt auch nochmal gut. Wenn ich hier mache, dann ist es außerhalb dieses Rahmens. Und wenn ich jetzt hier 20 eingebe, 30, 20, 30, also links und rechts ein bisschen mehr, dann würde ich aber den Text natürlich auch noch zentriert machen. Dann habe ich den Abstand innen. Da kann man es auch nochmal sehr gut sehen mit diesem Rahmen drumherum. Ich kann dann auch sagen, dass ich hier eine andere Farbe verwenden möchte für den Rahmen.

29:13
Ich kann das Ganze auch ein bisschen abrunden. Und auch hier wieder, wenn ich das hier rausnehme, dann kann ich hier auch unterschiedliche Ecken machen, je nach Seite. Und hier kann ich diesen ganzen Boxdingens, also das ganze Textfeld im Gesamten, nicht nur den Text, sondern dieser Box, einen Schatten geben und auch hier wieder bestimmen, wie scharf das sein soll und so weiter. Und hier unter responsiv können wir jetzt noch sagen, ob wir irgendwas am Handy oder am Tablet oder auch am Desktop ausblenden wollen. Wenn ich jetzt zum Beispiel irgendwie ein Bild habe, wo ich sage, es ist fürs Handy nicht wichtig, dann kann ich das hier an dieser Stelle ausschalten. Und unter eigenes CSS können wir dann CSS nur für dieses eine Feld hinterlegen. Genau, soviel zum Text und zur Überschrift. Beim Bild haben wir jetzt auch schon öfter drin.

30:07
Ich mache mal diesen Hover-Effekt raus, sonst werde ich noch wahnsinnig. So, beim Bild haben wir erstmal hier die Möglichkeit zu sagen, das Bild auszuwählen aus unserer Mediathek. So. Und dann kann ich hier auch noch die Größe festlegen, individuell, wenn ich das jetzt hier irgendwie kleiner haben möchte. So, jetzt ist es kleiner. Ich kann auch eine Bildunterschrift nehmen, also Unterschrift des Anhangs bedeutet das, was ihr in der Mediathek festgelegt habt. Also wenn ich jetzt hier Caption hinschreibe, Dann steht es hier unter dem Bild. Oder aber ich sage eigene Beschriftung, dann öffnet sich hier ein Feld und ich kann hier selbst was schreiben. Meine individuelle Caption. Und ich kann dieses Bild auch verlinken. Einmal eine individuelle URL, also dass ich dann irgendwie auf eine andere Seite verlinke oder auf irgendeine andere URL. Also ich meinte mit Seite, eine Seite auf meiner Webseite.

31:33
Oder aber ich sage Mediendatei und dann kann ich sagen, es soll sich eine Lightbox öffnen. Das heißt, es öffnet sich dann so ein Pop-up von dem Bild im Prinzip. Das sind die Inhaltseinstellungen. Beim Stil haben wir hier dann noch Einstellungen in Bezug auf die Ausrichtung. Wie soll das Bild ausgerichtet sein? Und hier, ihr seht, die Caption bewegt sich auch direkt mit. Hier unter Breite kann ich dann auch noch die Breite von dem Bild einstellen in Bezug auf meinen Container. Also der Container ist jetzt 100 Prozent und wenn ich da sage 50 Prozent, dann nimmt das Bild 50 Prozent von meinem Container ein. Hier können wir dann bei der Höhe auch noch sagen, ich möchte, dass mein Bild kleiner ist, dann wird das entsprechend auch von der Breite her direkt angepasst.

32:31
Wichtig ist zu sagen, wenn es jetzt höher ist, also der ist jetzt von der Breite her, wird es nur so breit, wie der Container auch da den Platz bietet. Das heißt, es wird jetzt hier, wenn es dann höher ist, verzerrt. Dann könnt ihr aber hier die Objektanpassung machen und zum Beispiel sagen, ausfüllen und dann das entsprechend so anpassen. Das ist oben rechts, so. Dass es so angezeigt wird, wie bei einem Hintergrundbild im Prinzip. Dass ich da die Möglichkeiten habe, dass so anzuzeigen, dann beinhalten, dann ist das so da innen drinnen, so mittig und füllen ist dann das Verzerrte. Hier können wir noch die Deckkraft schon im Bild verändern. Also dass es nicht so in den Kontrast ganz klar ist. 0,1 ist das wenigste und dann, wenn wir es hier hochziehen, dann ist es am stärksten.

33:38
Wir können das auch beim Hover-Effekt machen, also dass es dann ein bisschen unschärfer, also nicht unschärfer, sondern weniger deckend ist. Wir können hier auch noch so eine Animation machen, wenn wir das mit der Maus berühren, wenn wir das möchten, kleine Spielereien und auch hier haben wir wieder die Einstellungen zu den Rändern und hier können wir den Bildunterschrift bearbeiten, wie das Ganze aussehen soll vom Stil her, wie beim Text sind die Einstellungen und hier unter erweitert haben wir nichts anderes als beim Text Genau. Als nächstes haben wir dann noch die Galerie. So, wenn wir jetzt hier nach Galerie suchen, haben wir zwei verschiedene. Ich würde euch immer empfehlen, diese hier zu nehmen, weil die Bilder ordentlich anpasst und es schöner aussieht. Bei der anderen, da habe ich nicht so viele Einstellungsmöglichkeiten. Ich kann hier nämlich sagen, also da ist alles grundsätzlich im Gitter.

34:40
Und hier habe ich verschiedene Layout-Möglichkeiten. Das schauen wir uns jetzt einmal an. Ich wähle mal ein paar Bilder hier aus. Und jetzt werden die uns hier erstmal so im Gitter angezeigt. Ich kann aber auch sagen, Masonry und dann macht ihr die Bilder so, dass sie so auch möglichst komplett angezeigt werden, so wie sie sind. Hier kann ich dann die Spalten auch anpassen. Da kann ich zum Beispiel sagen, es sind drei, sieht das Ganze schon besser aus. Ich kann das Ganze zufällig anordnen. Und kann auch sagen, wie groß die Abstände hier zwischen den Bildern sein sollen. Ich kann sagen, ob die verlinkt sein sollen. Also das bezieht sich hier nur auf die komplette Galerie. Wenn ich hier eigene URL auswähle, dann würde die ganze Galerie mit einer URL verlinkt sein oder auf die Bilder selbst. Das wäre dann das Bild selbst.

35:54
Und dann kann ich wieder hier mit so einem Popup öffnen. Ich kann diese Überlagerung, das haben wir jetzt hier eben schon gesehen. Nee, haben wir nicht. Ist jetzt hier eingeschalten auf Ja. Dann wird das Ganze dunkler. Ich kann jetzt hier auch sagen, ich möchte, dass dann der Titel von dem Bild angezeigt wird, wenn ich da rübergehe. Da muss ich den natürlich auch ordentlich benennen. Das sind alles Möglichkeiten und ich kann hier auch die, da habe ich jetzt glaube ich keine Beschreibung, aber ich könnte dann Titel und Beschreibung mir anzeigen lassen, zum Beispiel, wenn ich da draufgehe. Und beim Stil haben wir jetzt dann hier noch eine Möglichkeit, da noch einen Rahmen zu geben. Die einzelnen Bilder, das abzurunden, eben auch wieder einen Effekt beim Hovern zu haben. Und dass das Ganze dann noch ein bisschen interaktiver wird.

37:04
Und hier beim Inhalt, das betrifft dann eben den Text. Den wir da eben als Überlagerung eingestellt haben. Genau, so und unter erweitert haben wir das gleiche wie über. So, nehmen wir die Galerie mal weg und machen weiter. Wir schauen uns jetzt mal drei, nein vier Elemente in einem an. Und zwar ist es einmal das Icon, dann haben wir die Bilderbox, die Iconbox und die Iconliste. Diese drei Elemente hier, die sind, lassen sich alle bei DW im Informationstext nachstellen. Wir haben jetzt hier drei verschiedene Module. Beim Icon selbst können wir eben unser Icon hier auswählen, welches wir verwenden möchten. Wir nehmen jetzt mal den Sandschirm. Da kann ich sagen, ob das Ganze so normal angezeigt werden soll, ob es so mit einem Kreis oder einem Quadrat angezeigt werden soll oder gerahmt und dann auch wieder Quadrat oder Kreis.

38:54
Das sind unsere Möglichkeiten und auch das Icon können wir wieder verlinken und unter Stil können wir dann unsere Ausrichtung festlegen und Die Farbe, wenn wir jetzt hier einmal das mit dem Rahmen gewählt haben oder die gestapelte Variante, dann haben wir hier zwei Farben, die wir bearbeiten können. Wenn wir die normale Variante haben, dann haben wir nur eine Farbe. Wir nehmen mal die gestapelte. So. Und jetzt kann ich hier sagen, das soll so und meine sekundäre Farbe ist dann Weiß wollte ich nehmen. Hier kann ich die Größe anpassen von dem Icon. Den Abstand innen, also wie viel Platz ist da zwischen dem Icon und diesem Kreis. So, jetzt sieht man es besser. Jetzt ist viel Abstand und jetzt ist sehr wenig. Ich kann das Icon auch drehen. Ich weiß nicht, ob man das mal braucht.

40:01
Und wenn ich hier jetzt das Quadrat auswähle, dann kann ich hier auch noch ein bisschen den Rand abrunden. Und ich kann beim Hovern dann auch noch die Farbe ändern. Also ihr seht immer, wenn ihr hier Normal und Hover habt ihr Hover-Effekte. Das endet dann immer hier, wenn so eine Linie ist. Also die Hover-Sachen sind nur für die Farben in dem Fall und die Animation. Die Größe ändert sich jetzt nicht beim Hovern. Genau, und da haben wir dann wieder die gleichen erweiterten Einstellungen. Bei der Bilderbox können wir, Überraschung, hier oben ein Bild auswählen, eine Überschrift und einen Beschreibungstext. Und hier kann ich auch wieder sagen, meine Überschrift soll eine H3-Überschrift sein oder eine andere. So, und bei Stil haben wir jetzt einmal den Punkt Box. Das ist diese gesamte Box im Prinzip, also alle drei Sachen zusammen, Bild und Inhalt.

41:11
Hier kann ich jetzt erstmal im Gesamten sagen, dass ich möchte, dass das Bild eben links angeordnet ist, oben oder auch rechts. Wir wollen es oben haben. Achso, wenn ich jetzt hier das links habe, kann ich auch noch sagen, ich möchte das vertikal in der Mitte oder unten haben. Aber wir wollen das Bild oben. Und hier kann ich die gesamte Box, also Bild, Überschrift und Text linksbündig, mittig, rechtsbündig anordnen. Beim Bild kann ich dann sagen, wie viel Abstand da erstmal ist. Also das bezieht sich hier auf den Abstand zur Überschrift. Und hier kann ich die Breite festlegen. Die Breite, auch wieder die Prozentzahl, ist in Bezug auf den Container, also 100% Breite vom Container. Machen wir hier wieder ein bisschen Abstand rein. Und ich kann auch hier wieder einen Rahmen das Bild machen, wenn ich das möchte. Und die Farbe festlegen oder es auch abrunden.

42:23
Ich kann hier, dass es eine Animation gibt, wenn man drauf geht auf das Bild, Einen wollen wir eigentlich nicht. Und dann haben wir hier wieder Hover-Effekt in Bezug auf die Deckkraft. Und beim Inhalt kann ich jetzt einmal festlegen, wie mein Titel aussehen soll von den Texteinstellungen und der Beschreibungstext. Genauso funktioniert das mit der Iconbox, nur dass ich eben kein Bild habe, sondern ein Icon. Sonst funktioniert das genau gleich. Hier habe ich jetzt dann wieder die Möglichkeit mit dem Gestapelten und dem Gerahmten, wie wir es auch schon beim Icon selbst hatten. Hier kann ich das Icon auswählen oder ich kann auch selbst eins hochladen. Und der Stil sieht dann genauso aus wie eben beim Bild. Wir haben dann hier nur nicht Bildposition, sondern eine Icon-Position. Wir haben dann hier die Icon-Einstellungen und die Inhalts-Einstellungen. Unter erweitert haben wir im Prinzip immer das Gleiche.

43:33
Dann haben wir die Icon-Liste. Das könnt ihr euch auch schon denken, was damit gemeint ist. Und zwar ist es eine Liste. Die so untereinander ist. Und zwar können wir für jedes Element da einzelnes Icon festlegen, wenn wir das wollen, oder eben für jedes das gleiche. Wenn ich jetzt hier so eine Checkliste haben möchte, dann kann ich hier das entsprechend so machen und verschiedene Elemente einfügen. Hier ist dann der Text für das Element. Ich kann es auch verlinken. Ich glaube, da klickt niemand drauf, dass er denkt, das ist jetzt ein Link. Das habe ich jetzt noch nicht verwendet, aber hier könnt ihr dann auch wieder das Icon auswählen. Und hier haben wir, dass es erstmal so untereinander ist oder aber nebeneinander, wenn es dann hinkommt und Platz hat. Also wenn ich das jetzt hier in diese Zeile verschieben würde, dann würde es nebeneinander passen.

44:31
So, da sehen wir es. Und jetzt fällt mir auch ein, wann der Link Sinn macht, denn ihr könnt es natürlich auch für eure Social-Media-Kanäle verwenden, dass ihr sagt, ich möchte, also das ist jetzt hier Instagram, adtechnik.va und dann mach ich hier ein Instagram-Icon. So. Und dann sage ich, was gibt’s noch? Facebook, Twitter. Weiß nicht, wie das bei Twitter heißt. Nutzername schreibe ich jetzt einfach mal. So, wir machen Twitter-Symbol. So, das wäre halt eine Möglichkeit. Twitter. So. Und dann habe ich das so nebeneinander. Und dann ist es natürlich sinnvoll, das auch zu verlinken. Genau, und dann haben wir hier bei den Stileinstellungen die Möglichkeit, hier den Abstand zwischen den einzelnen Dingern anzupassen. Ich kann es auch ausrichten, linksbündig, zentriert. Rechtsbündig kann da auch ein Trenner dazwischen sitzen. Wir machen es mal wieder untereinander. Das ist, glaube ich, das typischere Beispiel.

45:56
Seht ihr jetzt auch, jetzt haben wir hier ganz viel Abstand. Und auch hier der Trenner, der ist dann dazwischen. Und hier bei den Icons können wir wie bei den Icon-Einstellungen selbst auch wieder Farbe und so weiter festlegen. Genau, und hier haben wir dann die Einstellungen zum Text, wie die Typografie-Einstellungen sein sollen. So, jetzt schauen wir uns noch zwei letzte Sachen an für dieses Video, und zwar den Button. Hier kann ich erstmal auch wieder sagen, dass hier ist mein Standard-Button, den ich in den globalen Einstellungen hinterlegt habe einen Informationsbutton haben, eine Erfolgsmeldung, das ist dann grün, Warnung ist orange und Gefahr ist rot, nehme ich an, genau. Ich verwende eigentlich nur den. Hier kann ich jetzt sagen, was soll auf dem Button stehen und hier packe ich den Link rein. So und jetzt wollte ich hier nochmal auf diese Einstellungen kommen.

47:09
Bei Linkoptionen kann ich sagen, ob sich der, wenn ich da draufklicke, in einem neuen Fenster öffnet. Und hier habe ich so dynamische Links, wenn ich zum Beispiel auf einer Seite den Autor, immer bei meiner Blogseite steht immer unten der Autor und dann will ich so einen Hinweis, dass man da zu allen Artikeln vom Autor kommt, dann kann man hier da draufklicken und kann das dann einfach als dynamischen Button in den Beitrag machen und je nachdem welcher Autor dann diesen Beitrag geschrieben hat, kommt man zu diesem Autorenarchiv. Genau, aber in der Regel packt ihr da einfach euren normalen Link rein. Könnt den auch wieder ausrichten. Und wir können auch zu dem Button hier noch ein Icon dazu packen. Ein Icon. Nehmen wir mal den.

48:06
So, dann ist der davor, wir können den auch danach packen und hier noch bestimmen, wie viel Abstand da sein soll. Und beim Stil können wir bestimmen, wie der Button aussehen soll. Auch da wieder denkt daran, wenn ihr hier Einstellungen macht und dann global was ändert, wird dieser Button hier nicht übernommen. Genau, wir können hier wieder die Schriftarten ändern und dann entsprechend auch die Hintergrundfarbe vom Button. Wir können auch sagen, dass diese Hintergrundfarbe beim Hovern sich ändern soll. Genauso auch wie die Schriftfarbe. Also ich würde jetzt hier zum Beispiel nicht Textfarbe. Hier. Und dann beim Hovern entsprechend weiß nehmen. So, das geht auch. Und unser Button kann auch abgerundet sein, einen Rand drumherum haben und einen Schatten haben. Und Innenabstand ist jetzt hier beim Button selbst.

49:26
Also der Unterschied zwischen dem Innenabstand hier und dem Innenabstand hier, wenn ich jetzt hier reingehe, ist der Innenabstand innerhalb dieser Box von dem Button. Wenn ich den Innenabstand unter Stil mache, den hier, Dann ist das der Button selbst. Das ist der Unterschied zwischen diesen zwei Abständen. Bei der Breite kann ich hier auch individuell festlegen oder ich sage wieder, das soll so linksbündig sein, rechtsbündig. Zentriert oder ausgedehnt und dann haben wir hier die gleichen Einstellungen. Wenn ich jetzt Hintergrund sage, bezieht sich das auch wieder auf diese ganze Box. Und nicht nur den Button. Die Buttonfarbe, die haben wir hier unter Stil. Also das immer beachten. Genau und als letztes In diesem Video haben wir noch den animierten Text bzw. Überschrift. Und hier haben wir ein bisschen was zum Spielen. Und zwar können wir hier drei verschiedene Texte machen.

50:57
Also ich könnte jetzt hier auch noch was dahinter schreiben. So. Dann ist der Kreis bei hervorgehobener Text auch wundervoll. Wir haben hier den Stil hervorgehoben. Wir können auch rotierend machen. Dann haben wir hier, dass diese Wörter abgewechselt werden. Aber wir bleiben erstmal bei dem hervorgehobenen. Da gibt es diese runde Einstellungen. Wir können es gewählt machen. Da gibt es halt einfach verschiedene Stile. Das könnt ihr euch ja mal anschauen. Kannst auch durchstreichen. Oder ja, so ein X da drüber machen. Oder dahinter. Genau, das sind die hervorgehobenen Sachen. Und hier können wir sagen, ob es Endlosschleife ist oder ob es nur einmalig ist. Genau, und bei den rotierenden kann ich auch hier, da würde ich dann den Text danach eigentlich weglassen. Da werden dann immer die Wörter so nacheinander eingetippt.

52:09
Wir haben hier Typing und dann haben wir hier auch noch verschiedene Animationstypen, die man machen kann. Und wie das Ganze aussieht, das machen wir dann eben im Stil von der Farbe her, von der Schriftgröße her, Schriftfarbe und so weiter. Aber das ist vielleicht auch ein cooler Effekt an so manchen Stellen. Auch da wieder nicht zu viel verwenden, sondern dann, wann es passt und sinnvoll ist und dann auch mal auflockern kann.

00:37
So, so lang gezogen. Und fügen uns mal ein Akkordeon ein, mit zwei K. So, Und? Und hier sehen wir jetzt, früher war es nämlich so, dass man hier immer nur Text einfügen konnte, also man musste hier draufklicken und dann war auch hier der Text.

00:57
Was jetzt das coole daran ist, wir können in unsere Umschalter jetzt sämtliche Module reinpacken, die wir möchten. Also ich kann jetzt hier reingehen und ganz normalen Text einfügen, wenn ich so ein FAQ halt habe.

01:12
Und ich kann aber auch andere Module hier reinpacken, also ich kann jetzt hier auch ein Bild reintun und ich kann auch Bild und Text quasi kombinieren.

01:27
Und genau, das finde ich ziemlich cool, diese Änderung. Und so können wir uns unsere Akkordeons so bauen, Untertitel der Amara.org-Community wie wir sie brauchen, ob mit Text oder mit anderen Elementen.

01:40
Wir haben hier wieder ganz normal diese drei Elemente in dem Fall und können aber auch eben hier welche löschen oder eben neue hinzufügen.

01:52
können wir die Ausrichtung von dem Text ändern, also jetzt haben wir es links und dann haben wir den Text in der Mitte und so weiter.

02:01
Und hier kann ich auch das Icon positionieren, ob ich das am Anfang haben möchte oder nach dem Text. So, und wenn ich jetzt so mache, dann habe ich das Plus hier hinten und in der Text vorne.

02:19
Und hier kann ich jetzt meine Symbole ändern. Wenn ich das möchte, kann ich da drauf gehen und sagen, ich möchte keinen Plus haben, nicht so ein einfaches Plus, sondern vielleicht so eins und entsprechend das Minus dann auch mit so einem Minus.

02:35
Und ich kann hier auch Ich möchte ganz ehrlich kein Icon oder ich kann ein eigenes Icon hochladen. Dafür muss ich das hier erst einmal aktivieren und dann kann ich hier eine Datei FAQ-Schema bedeutet, wenn das hier dann FAQ-Bereich ist, dann könnt ihr das hier einmal anklicken und dann weiß nämlich Google

02:56
, dass das ein FAQ-Bereich ist und ihr da eben Fragen beantwortet und so weiß Google halt schneller, worum es da geht sozusagen.

03:05
Dann haben wir hier noch Interaktionen, da kann ich sagen, ob das erste hier direkt ausgeklappt sein soll und ob ich mehrere gleichzeitig aufklappen kann.

03:16
Also, dass das dann so aussieht. Genau, und hier könnt ihr die Dauer der Animation bestimmen. Und das Stil können wir dann wieder, wie wir es kennen, einmal auch den Abstand hier erstmal ändern.

03:32
Ich kann hier den Abstand vom Content, also von der Überschrift zum Text, ändern. Hier haben wir die Hintergrundfarbe. Wir wählen mal direkt hier so eine von unseren.

03:51
Dann habe ich hier im Prinzip die Farbe drin und ich kann auch noch mal sagen, ich mache jetzt mal hier eins zu, also hier ist der Hover-Effekt, auch die Farbe kann ich ändern und bei aktiv kann ich dann sagen, da möchte ich, dass es gelb ist und dann haben wir die aufgeklappten im Prinzip in der einen

04:11
Farbe und die Zunen in der anderen. So, und hier können wir jetzt auch noch eine Linie drumherum machen. In einen Pixel, kann jetzt rausgehen.

04:25
Wir müssen natürlich auch noch eine Farbe vergeben. So, dann sehen wir hier den Kasten um diesen Text. Das betrifft jetzt auch noch das Aktive, wenn ich das generell haben möchte, dann muss ich das hier einmal machen und dann habe ich es quasi immer und nicht nur bei dem aufgeklappten.

04:46
So, hier kann ich dann noch eine Rundung festlegen, ne, und einen Innenabstand. So, damit ihr das seht. Also das ist auch wieder hier nur dieser Kasten.

05:04
Und dann haben wir unsere Kopfzeile und zwar die Schriftart. Also wie soll die Schrift sein.

05:16
da können wir hier auch unsere Vorgaben machen. Da ist es vielleicht ein bisschen groß. Und Schatten können wir geben, Umrandung und auch wieder wie es beim Hover ist oder wenn es aufgeklappt ist, dass es da anders ist.

05:32
Hier haben wir dann die Icon Größe, das können wir hier ein bisschen kleiner machen, wenn wir das möchten. Und auch hier können wir das wieder ändern, je nachdem ob das der Normalzustand ist, also zugeklappt, der Hover-Effekt und der aktive Zustand.

05:47
Und das gleiche haben wir jetzt hier nochmal, oder nicht das gleiche, sondern wir haben jetzt hier nochmal die Möglichkeit, unseren Bereich hier im Prinzip festzulegen.

06:00
Da seht ihr jetzt nichts mit Schriftart, weil das betrifft ja dann wieder die hier unser Textfeld. Also hier haben wir jetzt wirklich nur die Möglichkeit, die Box farblich zu hinterlegen und dadurch, dass wir hier oben die 20 gemacht haben, haben wir da jetzt diese weiße Fläche.

06:24
Wenn ihr also das in der Farbe macht, dann nehmt nicht die 20. Ihr könnt Abstand nach oben machen, sondern hier rein.

06:34
Hier diese 20px rein machen und dann entsprechend, ja wir können ruhig überall 20cm machen. Dann habt ihr, dass die Farbe quasi bis nach oben geht.

06:48
Genau hier haben wir dann wieder die Rundung und auch hier können wir einen Rand drum herum Und unter erweitert haben wir jetzt hier die Einstellungen für das gesamte Ding.

07:12
Also wenn ich jetzt hier reingehe und einen Außenabstand eingebe, Dann gilt er eben für dieses ganze Modul, für alle drei Elemente, also für diesen Kasten, den ich jetzt hier, was hier jetzt rosa hinterlegt ist, ne?

07:25
Und wenn ich jetzt hier nochmal was eingebe, dann betrifft das auch wieder diesen ganzen Kasten und es ist der Innenabstand.

07:33
So, hier kann ich eben wieder die Breite anpassen. Das sind ja jetzt immer die gleichen Einstellungen. Ich kann das Ganze hier auch ändern.

07:42
Bewegen, das macht jetzt nichts, weil mein Element ja so breit ist wie das ganze Ding, aber wenn ich das jetzt hier zum Beispiel sagen würde, ich möchte, dass das nur 50% breit ist, dann kann ich das entsprechend hier ausrichten.

07:59
Genau, und dann haben wir die ganz normalen Standardeinstellungen. hier auch wieder, Bewegungseffekte transformieren, Hintergrund für das ganze Ding wieder. Ich mach mal kurz so.

08:15
Das war hier unser Margin, darum ist das nicht schwarz. Der Außenabstand betrifft das immer nicht, sondern nur den Innenabstand. Wir können dem einen Rahmen geben, wir können das ganze maskieren.

08:35
So. Und hier lustige Sachen machen. Sehe ich jetzt nicht den Sinn, warum man das bei einem Akkordeon machen sollte. aber ihr habt die Möglichkeit und wir können natürlich auch wieder das ganze mobil optimieren und noch mit CSS aufpolieren sozusagen und so.

09:03
Und neben diesen Akkordeons, Akkordeon, ja ich glaube Akkordeons ist die Mehrzahl, haben wir auch noch die Tabs und die funktionieren vom System her ähnlich wie Also wir haben auch die Möglichkeit, hier wieder extra Module einzufügen.

09:23
Also ich kann jetzt hier ein Bild einfügen. Ich kann hier dann einen Text einfügen. Das funktioniert so, wie wir es eben auch schon gesehen haben.

09:31
Und hier haben wir ja nicht, dass wir das aufklappen, sondern hier switchen wir, wie so bei Karteikarten, sage ich mal.

09:38
So ein Karteikartensystem, früher hatten wir Und genau, hier kann ich auch wieder sagen, wie das Ganze ausgerichtet sein soll, also ob ich das oben haben möchte, das ist der Standard, ich kann es auch unten haben, seitlich, rechts oder auch links Und hier haben wir dann die Ausrichtung, also wenn ich

09:58
es zum Beispiel oben habe, das dehnen möchte, dann nimmt das diese ganze Breite ein. Oder wenn ich es links haben möchte, rechts und so weiter.

10:08
Wenn wir jetzt mehrere Tabs haben, die hier gar nicht alle reinpassen, dann sieht das Ganze erstmal so aus und wir können aber auch sagen, wir wollen horizontalen Scroll ermöglichen und dann können wir hier von links nach rechts scrollen.

10:33
So, und hier sehen wir schon, Breakpoint soll bei mobil sein, schauen wir uns das mal an, Beim Tablet sieht das Ganze noch so aus und beim Handy, Haben wir das dann letztendlich so, dass es im Grunde aussieht wie so ein Akkordeon auch.

10:56
Genau, hier können aber auch sagen, keine, wir wollen das nicht. Wir wollen es immer, dass das hier so ist. Das ist also auch möglich.

11:05
Gehen wir mal zurück. Dann haben wir hier noch und den Stil. jetzt auch wieder sagen, wenn es denn möchte. Der Abstand hier zwischen den Tabs, ich mach das mal jetzt ganz auffällig, wie ist der Abstand hier nach unten, so und dann haben und das Bis nächsten Mal.

11:29
hier wieder die Einstellungen, wie wir es eben schon hatten, im Normalzustand, im Hoverzustand, im aktiven Zustand und wir können wieder sagen, wie ist die Hintergrundfarbe, haben wir einen Rand, wir können Schatten geben und hier dann entsprechend den Rand vergeben.

11:46
Das sehen wir jetzt nur, wenn wir hier auch eine Farbe haben. So. Und hier haben wir quasi den Radius von diesen Tabs, wie runde sein sollen.

12:16
Und hier haben wir den Innenabstand. Wenn wir ein Icon haben, dann können wir den Titel wieder anpassen und sagen, wie der aussehen soll, welche Schriftart, welche Schriftgröße, welche Farbe und so weiter.

12:34
Wenn wir ein Icon haben, das habe ich gerade noch nicht gezeigt. Wenn wir hier reingehen, haben wir einmal den Titel und wir können hier auch noch ein Icon und dahin packen zurück Da haben wir es und dann kann ich sagen wie das eben positioniert sein soll und wie das aussehen soll Also hier einmal die

13:09
Position, die Größe, die Abstände und die Farbe und dann haben wir den Inhalt und das ist auch wieder, wie eben schon bei dem Akkordeon, nur dieser Kasten, also nicht der Inhalt, den müssen wir dann wieder entsprechend über das extra Modul machen.

13:33
Und da haben wir eben auch wieder die Einstellungen mit der Hintergrundfarbe und so weiter, wie eben auch schon beim Akkordeon.

13:41
Dann haben wir erweitert und es sieht im Prinzip genau, nicht im Prinzip, es sieht genau gleich aus. Genau, so und dann haben wir noch die Flipbox, die ich euch in diesem Video zeigen wollte.

13:57
Die packen wir mal hier rein. So, und das ist im Prinzip so ein Element, wenn ich da jetzt mit der Maus draus gehe, dann dreht sich das so um.

14:10
Und wir haben einmal hier im Inhalt die Vorderseite. Und da haben wir den Inhalt. Wir haben den Hintergrund. So, wir fangen mal mit dem Hintergrund an, so.

14:24
Wir können auch ein Bild in den Hintergrund packen. Und dann haben wir hier ein Icon oder wir können auch ein Bild hinterlegen oder gar nichts.

14:36
Und dann haben wir eine Überschrift und eine Beschreibung. und auf der Rückseite haben wir dann einen Titel, eine Beschreibung und einen Call-to-Action-Button, den wir hinterlegen können und hier dann entsprechend natürlich den Link.

14:53
Und dann haben wir hier noch Einstellungen, wo wir sagen können, unsere Titel sollen eine H3-Überschrift sein, was meistens wahrscheinlich so sein wird, wenn ihr das benutzt, weil wir die H2-Überschriften ja dann für den Abschnitt nehmen und dann wäre das da drunter.

15:09
Ansonsten kann man das hier auch noch ändern. Sprechen wir aber auch im SEO-Modul, wie gesagt, nochmal drüber, über die Überschriftenstrukturen.

15:19
Genau, und hier haben wir den normalen Text. Das kann so bleiben, oder wir machen P draus. Nimmt sich jetzt nicht viel.

15:27
Hier kann ich auch noch eine Höhe festlegen. Untertitel der Ich mache mal so, würde ich, wie ihr seht, nicht tun, weil das ist eine feste Höhe und wenn unser Inhalt dann größer ist, was passieren kann, wenn wir irgendwie kleinere Bildschirme haben.

15:50
Und darum würde ich immer nicht mit Höhen arbeiten, weil wenn ich das hier einfach leer lasse, dann nimmt der, auch wenn ich hier jetzt plötzlich mehr Text drin habe, immer die Höhe, die ich brauche.

16:06
Ich habe jetzt die 30 doch nicht rausgeschmissen. Ich glaube, wenn wir jetzt hier rausgehen, dann würde der das richtig machen.

16:19
Das ist wahrscheinlich ein Darstellungsfehler. Genau. Hat der noch nicht gecheckt, dass ich die 30 da wieder rausgenommen habe. Ich aktualisiere mal kurz, damit das wieder richtig ist.

16:38
Und so, jetzt hat das geschnallt. So, kommen wir hier nochmal zu den Einstellungen. Hier kann ich den Nachbarn die Umrandung machen, die Rundung, wenn ich das irgendwie rund haben möchte, so und hier, das ist jetzt vielleicht noch am spannendsten, kann ich jetzt hier den Effekt noch ändern.

17:02
Also ihr habt schon gesehen, das ist der Standard und ich kann aber auch sliden, ich kann pushen, So, reinzoomen. rauszoomen oder auch das so überblenden.

17:25
Und bei Flip haben wir die Möglichkeit noch zu sagen, wie rum soll sich das Ganze flippen. Bei Slide haben wir das gleiche, können wir sagen, wie es sliden soll, nach oben, nach unten, rechts oder links und Push das gleiche und bei den Zoom In, Zoom Out entsprechend Und dann haben wir nur diese, Wahl

17:53
, das einmal hier auszuwählen und da keine Richtung zu haben, weil es ja von innen kommt sozusagen. Genau, und im Stil können wir dann hier auch alles ganz im Detail definieren.

18:05
Also einmal den Abstand und da könnte ich jetzt zum Beispiel hier sagen, ich möchte oben und unten ein bisschen mehr Platz.

18:17
Und links und rechts. Naja, ein bisschen mehr können wir ruhig. So, kann die Ausrichtung ändern von dem Inhalt, die Position und auch hier wieder einen Rahmen machen, wenn ich möchte.

18:34
Ich kann das Icon bestimmen, wie das aussehen soll, ob das hier wieder so aussieht. umrandet sein soll oder auch als Viereck.

18:43
Und ich kann auch gerahmt auswählen oder eben das ganz normal. Wie groß der Abstand hier sein soll zwischen dem Icon und dem Text, die Farbe von dem Icon.

18:57
Hier haben wir jetzt nur eine Farbe, wenn ihr entsprechend hier gestapelt oder gerahmt abnehmt. habt ihr entsprechend zwei Farben. Die Größe machen wir ein bisschen kleiner und hier können wir es ein bisschen drehen.

19:17
Dann haben wir den Titel, können wir auch wieder den Abstand ändern zu dem Text darunter. Wir haben die Schriftart, Text umrandung.

19:30
weiß ich jetzt nicht, ob man das irgendwie braucht. Genau, und den Beschreibungstext und da auch die Farbe, machen wir mal schwarz, damit wir es auch lesen können und Schriftart und so weiter.

19:45
So, und dann haben wir die Rückseite und da können wir eben auch noch mal diese Einstellungen ändern. wie das hier alles aussehen soll also das hatten wir alles schon und dann haben wir hier aber noch den Button wo wir halt sagen können was da die Schritte sind Größe und Farbe und so weiter ist, wie

20:03
das Ganze im Hover-Zustand aussehen soll und so weiter wie auch bei einem normalen Button. Und hier ist im Prinzip wieder alles wie immer.

20:14
Wir haben den Abstand für das gesamte Ding. Also wenn ich jetzt hier wieder sage so, dann ist das der ganze Kasten und der Rest ist gleichmäßig.

20:24
wie bei den anderen Elementen.

00:17
So, da seht ihr schon meine Fertigkeit Webdesigner. Das ist zum Beispiel eine Möglichkeit, wo ich das öfter sehe, dass Leute sowas verwenden. Dass man seine Fähigkeiten aufzählt, mit verschiedenen Balken dann untereinander. Und dann so sagt, meine Webdesignfähigkeiten sind meinetwegen 100%.

00:36
Dann mache ich hier… Ich würde dann natürlich nur einmal diesen Titel verwenden und hier dann nicht mehr. Und dafür aber ein bisschen Abstand nach oben.

00:56
So, und dann hier bei dem ersten meinetwegen SEO oder so, was auch immer. Und dann da eure Fähigkeiten eintragen. Das ist jetzt hier ganz schön lang, ich würde das dann eher auf einer zweispaltigen Sache, in zweispaltigen Zeilen machen. Aber so habt ihr es mal gesehen. Also ich kann hier einen Titel vergeben, der wird hier oben drüber geschrieben. Ich kann die Prozentzahl hier eingeben. Und ich kann auch sagen, ich möchte, dass das eine normale Zahl ist, also kein Prozentzeichen dahinter angezeigt wird, beziehungsweise gar nicht die Zahl an sich.

01:35
Und unter innerer Text steht das, was hier innen quasi angezeigt wird.

01:40
Und unter Stil können wir das jetzt noch gestalten, also die Farbe vom Balken an sich. Das wäre dann so und die Hintergrundfarbe ist dann entsprechend. Der Rest des Balkens.

01:55
Ich kann die Höhe verändern von diesem Ding. So sieht man es besser. Ich kann es auch rund machen. Wieder ein bisschen kleiner.

02:09
So, wenn ich das möchte und beim inneren Text kann ich dann auch wieder die Farbe verändern und die Schriftgrößen und den Schatten. Und der Titel ist dann entsprechend hier. Die gleichen Typografie-Einstellungen wie immer. Genau, und beim Zähler. Jetzt nehmen wir doch den Zähler.

02:38
Das kennt ihr vielleicht, da steht schon coole Zahl. Ich mach mal hier so ein paar davon. So und das kennt ihr vielleicht, wenn man irgendwie sowas hat wie 100 Kunden.

03:03
Oder so oder hier kann ich jetzt dann Kunden oder 1000 Tassen Kaffee getrunken oder keine Ahnung und dann startet das immer hier bei 0 und endet bei der Zielzahl.

03:21
Ich kann hier unter Präfix etwas einstellen, was vor der Nummer angezeigt wird. Ich schreibe jetzt einfach mal einen Buchstaben. Dann steht das davor. Und dahinter kann ich jetzt zum Beispiel ein Plus machen, wenn es mehr als 100 sind.

03:33
Jetzt sind 100 Plus Kunden. Und ich kann auch sagen, dass ein Tausender Trendzeichen angezeigt werden soll und dann bestimmen, welches Tausender Trendzeichen. Also wenn ich jetzt hier 1000 eintrage oder 2000, dann kann ich hier sagen.

03:50
Es soll ein Punkt sein oder ein Komma. Je nachdem ob es oder space je nachdem ob wir in Amerika, England, Deutschland oder wo auch immer sind genau und der Titel ist eben das was unten drunter steht und unter Stil können wir dann die ganzen Einstellungen machen wie das Ganze von den Schriftarten und Farben und so weiter aussehen soll und als letztes haben wir noch den Countdown Wenn wir zum Beispiel irgendwie die Türen schließen und da so einen Countdown einbauen wollen, können wir diesen verwenden und hier dann entsprechend einmal sagen, es soll entweder ein Evergreen-Timer sein, der dann halt immer los startet, wenn man das erstmal an die Seite betritt oder eben mit einem Fälligkeitsdatum, wo ich dann hier das Datum festlege.

04:59
Und hier kann ich noch sagen, ob es im Block, wir sehen jetzt hier gerade natürlich nichts, ich mach mal. So.

05:11
Im Block, dann sieht das Ganze so aus, oder in einer Reihe, dann ist es ein bisschen enger.

05:17
So, und dann kann ich hier sagen, ob Tage, Stunden, Minuten oder Sekunden auch angezeigt werden sollen. Und ob die Beschreibung angezeigt werden soll. Es macht eigentlich nur Sinn mit der Beschreibung. Und ich kann hier auch noch einen eigenen Namen vergeben, wenn ich sage, ich möchte… Ja, weiß ich auch nicht. Vielleicht bei Stunden hier das so machen oder so.

05:42
Minuten. So. Wäre eine Option, da eigene Begriffe zu nennen. Hier bei Actions after Expire können wir festlegen, was passiert, wenn dieser Countdown abgelaufen ist. Sollen wir dann auf eine andere Seite weitergeleitet werden?

05:59
Dann fragt er hier nach einer URL oder soll das einfach versteckt werden, dieser Countdown? Oder soll da eine Nachricht angezeigt werden. Die Zeit ist oder sowas. Das können wir hier noch festlegen.

06:16
Und bei Stil können wir dann entsprechend sagen, welche Farbe diese Boxen haben sollen, wie breit das Ganze sein soll im Gesamten.

06:27
Und ich kann auch das wieder abrunden, diese einzelnen Boxen. Ich kann die Abstände zwischen den Boxen vergrößern. Ich kann auch die Abstände von der Zahl zum Rand hin anpassen.

06:44
Und hier bei Inhalt wähle ich dann die Typografie-Einstellungen für die Zeichen, also für die Tage, also die Nummern und für die Bezeichnungen unten drunter.

00:44
Ich mache mal alles 33% groß. Genau, da seht ihr jetzt hier schon mal die Unterschiede. Also das bewegt sich nicht und die bewegen sich erstmal standardmäßig automatisch. Wir gehen mal hier ins normale Testimonial. Da haben wir erstmal den Text von dem Testimonial. Hier können wir ein Foto von der Person einfügen, den Namen und was das für ein Beruf ist. Und dann können wir hier noch sagen, ob das Bild links von dem Namen angezeigt werden soll oder oben drüber. Und dann können wir auch noch sagen, es soll eben linksbündig sein, zentriert oder rechtsbündig. Und dann können wir dieses Testimonial natürlich auch noch stilmäßig anpassen von den Typografie-Einstellungen wie wir sie kennen.

01:31
Wir können beim Bild sagen, wir möchten das nicht rund haben. Dann können wir das hier eintragen, dass wir es auf Null stellen, den Eckenradius. Und können auch sagen, wie groß das Ding sein soll. Und beim Namen auch wieder Typografie-Einstellungen, genauso wie beim Titel. Und hier bei diesem, das bewegt sich wie gesagt, hier kann ich auch noch zwischen diesen verschiedenen Stilen wählen. So, dann habe ich da, ich mache mal diesen jetzt raus, dann sind wir fertig mit. Dann sehen wir es besser. Und Wir lassen es mal bei der Vorgabe.

02:27
Ich kann hier sagen, dass das Bild so ist. Oben drüber, links. Ich weiß nicht, wann man das benutzt. Ist nicht sonderlich hübsch, glaube ich. Aber das sind die Einstellungen und auch hier kann ich wieder die Ausrichtung ändern. Ich kann sagen, wie viele in der Vorschau zu sehen sind. Ich kann zum Beispiel eben sagen, dass da nur eins erstmal angezeigt werden muss. Und ich kann auch die Breite festlegen. Hier kann ich sagen, wie viel gewischt werden soll. Also je nachdem, wenn das sich bewegt, wie viel dann da weitergeklickt wird. Ich würde hier das auf 1 stellen. Und unter weitere Optionen kann ich auch sagen, sollen diese Pfeile angezeigt werden. Soll automatisch das bewegt werden oder nicht. Soll eben nur das bewegt werden, wenn man wirklich klickt. Das würde ich ja bevorzugen. Und Endlosschleife ja.

03:38
Genau, die Sachen können wir alle so lassen, aber das würde ich im Prinzip ausschalten und die Endlosschleife aber anlassen, damit man dann wieder zum ersten kommt, wenn man einmal am Ende ist. Hier im Stil ist es so ähnlich, also wir haben einmal wieder auch so eine Hintergrundfarbe für die Box komplett, außer dieser Punkt hier unten, wie ihr seht. Wir können dem auch wieder einen Rahmen geben, eine Rundung, dem Rahmen eine Farbe, einen Abstand bestimmen. Jetzt zum Beispiel sagen ich möchte, dass meinetwegen rechts und links mehr Abstand sein soll als oben und unten. Und beim Inhalt haben wir dann wieder die Typografie-Einstellungen für das gesamte Ding. Also für das Testimonial an sich, den Text hier oben, für den Namen und den Titel.

04:35
Und hier haben wir dann die Einstellungen für das Bild und für die Navigation, also diese Pfeile und die Punkte hier unten, Paginierung, wie auch immer man das ausspricht. Die können wir übrigens hier auch ausschalten. Also wenn wir nur eins, wenn wir das nicht haben wollen, so. Oder wir sagen, wir wollen das so haben oder hier oben dieser Fortschrittsbalken.

05:10
Und hier sehen wir schon, das ist jetzt hier dann mit Social Media verbunden, also ich kann jetzt hier ein Icon hinzufügen, wenn ich hier irgendwelche Twitter-Nutzern haben, Instagram-Nutzern haben möchte, dann das Bild einfügen. Und das Ganze dann auch verlinken. Und hier unten packe ich dann den Text rein für das Testimonial. Und kann das dann hier auch wieder mit verschiedenen Elementen machen. Also verschiedene Kacheln sozusagen, Slides. Und hier kann ich auch wieder sagen, wie viele angezeigt werden sollen. Also ich kann jetzt hier auch sagen, mehrere. Und dann sind hier mehr in einer Reihe der passen. Jetzt sind es ja auch nur drei und ja, das wäre jetzt auch ein bisschen viel, wenn wir da sechs anzeigen. Aber drei ist auf jeden Fall möglich, wenn wir jetzt zum Beispiel diese Box hier noch rausnehmen und dann sagen, die nimmt halt die ganze Breite ein. Dann könnten wir hier, wenn wir dann.

06:14
So viele hätten, könnten wir hier halt sagen 3 oder entsprechend auch 6 oder was auch immer für eine Zahl.

06:32
Genau, und hier bestimmen wir dann, wie viele da, wenn das gescrollt wird, wie viele dann weiter springen, wie viele Slides weiter. Die Breite von dem gesamten Ding. Und unter weitere Optionen, das gleiche wie wir eben hatten, brauchen wir diese Punkte unten drunter, wollen einen Bruch, Fortschrittsbalken, wollen wir Pfeile und soll es automatisch abgespielt werden, genau. Und hier haben wir dann, Überraschung, auch wieder diese ganzen Stileinstellungen zum Slider an sich. Das ist dann wieder das ganze Ding, aber eben so kachelmäßig. Und wir können Rahmen setzen, den Abstand, die Kopfzeile ist dann entsprechend. Ich zeige es mal, damit ihr wisst, was ist. Der obere Bereich von Bild, Text und Nutzername. Wir haben hier so einen Trenner, den mache ich auch mal farbig, damit man ihn sieht. So, das ist der Trenner. Den kann ich auch von der Größe her anpassen, von der Dicke.

07:40
Dann haben wir den Text, das ist der normale Text wieder hier, dann der Titel und der Review-Text. Also Name, Titel, Review. Und Bild kann ich auch wieder festlegen. Wenn wir es rund haben wollen, können wir es auch auf 100% setzen. Dann ist das Bild komplett rund. Wie ist der Abstand zwischen dem Namen und dem Bild und wie groß soll das Bild sein? So, und dann haben wir hier noch dieses Icon, das dritte Icon, das sieht man jetzt gerade nicht, weil wir das jetzt hier so winzig klein haben.

08:27
Machen wir zwei. Dann sehen wir es wieder. Auch das können wir… …förmlich oder benutzerdefiniert machen.

08:42
Dann kann ich die Farbe bestimmen, also bei förmlich, das hat dann halt diese Twitter-Farbe, ne, automatisch. Kann’s aber auch in meiner Farbe machen. Und kann hier auch noch die Größe bestimmen und dann kann man da draufklicken und landet bei dem jeweiligen auf dem Profil.

08:56
Und bei der Bewertung sehen wir dann auch, hier haben wir jetzt hier gar nicht mit drin, Bewertung hier 5, So. Dann haben wir hier die Sterne.

09:16
Und hier kann ich dann eben bestimmen, wie groß dieser Stern sein soll. Wie viel Abstand die haben soll. Und ich kann auch die Farbe bestimmen. So, grün.

09:36
Jetzt haben wir hier unsere zwei Farben und wenn ich jetzt nicht fünf Sterne gewählt hätte, sondern 4, dann würde das Ganze so aussehen. Also da würde ich dann irgendeine Farbe mit weniger Deckkraft oder so nehmen, wenn ich das verwenden würde. Dass man das dann so macht irgendwie. Und dann haben wir noch die Navigation, also wieder diese Pfeile und die Punkte hier unten drunter und wie die farblich dargestellt werden.

10:18
Als nächstes haben wir bei Elementor natürlich auch die Möglichkeit ein Video einzufügen. Hier kann ich erst mal auswählen, ob es YouTube, Vimeo oder hier irgendwelche anderen Quellen sind und dann packe ich hier einfach nur den Link rein und schon ist das Video hinterlegt.

10:48
Wenn ich das Video später, also nicht direkt von Anfang an starten möchte, sondern zu einem bestimmten bei einer bestimmten Sekunde, wo das anfängt. Da kann ich das hier einfügen, genau so die Endzeit. Ich kann sagen, dass das Video automatisch wiedergegeben werden soll und stumm zum Beispiel. Ich persönlich finde das jetzt nicht so cool. Ich würde es immer auslassen. Es sei denn, es ist jetzt hier irgendwie was im Hintergrund oder so, aber dann nehme ich eh nicht das Videomodul.

11:22
Und ich kann auch sagen, es soll wieder starten, wenn es zu Ende ist. Und hier bei YouTube kann ich auch noch den privaten Modus einstellen, damit YouTube keine Informationen bekommt, in Bezug auf die IP-Adresse zum Beispiel. Wenn ich Vimeo auswähle, Dann habe ich hier genauso diesen privaten Modus. Es gibt auch eine Möglichkeit bei Vimeo-Videos, wenn ich einfach ein, das machen wir aber auch im Datenschutzmodul, Fragezeichen ?dnt=1, hinten dran hänge, dann ist es auch automatisch der private Modus und es werden keine Daten an Vimeo versendet. Genau so. Und hier könnt ihr auch noch ein Bild über das Video machen, aber das mache ich persönlich auch immer schon direkt bei Vimeo und würde es jetzt nicht hier machen. Das würde dann eben angezeigt werden, bevor ich klicke. Aber wie gesagt, das mache ich bei Vimeo selbst.

12:22
Und hier kann ich jetzt noch bestimmen, wie dieser Playbutton aussehen soll. Also kann jetzt hier den Default wählen oder aus meiner Icon-Bibliothek eins von diesen Playbuttons auswählen oder auch jeden anderen. Jedes andere Icon, aber es macht natürlich Sinn, hier so eins zu wählen, weil man damit ja auch was anfangen kann. Und ich kann auch sagen, dass ich das Video in einem Popup dann öffnen soll, wenn ich da draufklicke. So, dann öffnet sich das entsprechend so. Im Stil kann ich sagen, was es für ein Video ist. Also Standard ist es ja immer 16×9. Vielleicht ist es auch ein Instagram Wheel oder so. Dann ist es 9×16. Je nachdem, das kann man hier einstellen. Aber meistens ist es 16×9. Und auch hier bei der Bildüberlagerung kann ich noch sagen, welche Farbe dieses Icon dann haben soll. Genau, soviel zum Video.

13:28
Als nächstes kommen wir zu den Preisen. Da haben wir einmal eine Preisliste.

13:38
Das Ganze sieht so aus, wie so eine Speisekarte letztendlich, finde ich. Da habe ich hier die Möglichkeit einen Preis einzugeben, den Titel, man ist größer hier oben und einen Beschreibungstext und ich kann auch ein Bild von meinem leckeren Essen machen, wenn es wirklich eine Speisekarte ist. Haben wir hier was zu essen? Ich glaube nicht. Unser Hund kostet 20 Dollar. Ich lasse mal das Bild dann sehen, wie es aussieht und man kann dann auch hier draufklicken, also kann auch einen Link hinterlegen. Hier kann ich erst mal sagen, wie diese ganzen Listensachen aussehen sollen. Also der Titel, der Preis und die Beschreibung. Dann haben wir noch den Trenner. Da kann ich sagen, sollen das Punkte sein, sollen es Striche sein, Doppelt. So, das ist jetzt eine doppelte Linie. Das sieht man jetzt nicht. Das ist keine doppelte Linie, aber gut, das heißt doppelt.

14:35
Oder ob da kein Strich sein soll. Und dann entsprechend auch die Farbe kann man hier und die Fette eingeben und wie der Abstand sein soll. Hier haben wir dann das Bild, das haben wir zum Glück drin gelassen. Da kann ich jetzt auch noch sagen, wie groß das sein soll. Thumbnail ist, glaube ich, ganz gut von der Größe her. Größer, es sei denn, wir haben jetzt mehr Platz, wenn wir es jetzt einzigspaltig machen würden. Und ich kann dann auch hier wieder sagen, ich möchte es rund haben zum Beispiel. Und wie groß die Abstände zwischen Text und Bild sein sollen.

15:18
Und hier können wir dann auch noch auswählen, wie groß der Abstand zwischen den einzelnen Speisekartenelementen sind, falls es eine Speisekarte ist. Und hier kann ich das dann auch noch mittig ausrichten, damit es auch ein bisschen ordentlicher aussieht, wenn ich dann Bilder habe.

15:37
Und auf der anderen Seite haben wir die Preistabelle. Das sieht erstmal so aus und dann kann ich mir auch zum Beispiel hier drei nebeneinander machen. Da würde ich euch dann empfehlen, dass ihr eins erstmal ordentlich einstellt und dann könnt ihr eben duplizieren und müsst die Einstellungen nicht mehrfach machen oder ihr wählt eben hier rechtsklick und sagt kopieren. Also wenn ich jetzt hier zum Beispiel schon mal gesagt habe, ich möchte die Kopfzeile in diesem. Und ich habe jetzt die anderen noch nicht angepasst, dann kann ich auch hier sagen kopieren. Und dann gehe ich hier rein, rechtsklick und sage Stile anwenden. Und dann kann ich das auf alle anwenden. Genau, das ist eine Preistabelle, wie wir sie sicherlich alle schon mal gesehen haben, so in der Art. Oh, ich bin im Container.

16:44
Wo es so normal ist, dass es in der Mitte ein bisschen anders dargestellt ist als die beiden Außen, damit es mehr ins Auge springt. Gehen wir erstmal hier zum Inhalt. Der Titel, das ist der Titel, das ist die Beschreibung. Und dann kann ich hier den Preis festlegen, wie ist die Währung. Hier kann ich den Preis festlegen. Hier kann ich auch sagen, dass ich dann hier die Tausenderzeichen mit einem Punkt haben möchte und Aktion, wenn es dann eben irgendwie einen Vorherpreis gab. Also wie war der Preis vorher? Wie oft muss das Ganze bezahlt werden? Sonst kann ich das auch einfach wegnehmen, wenn ich das nicht brauche. Oder ich sage halt Einmalzahlung zum Beispiel. Und bei den Eigenschaften kann ich dann hier eben diese Listenelemente anpassen und auch hier dann das Icon auswählen, was ich benutzen möchte.

17:40
Also ich würde dann vielleicht auch eher die normale das hier nehmen, das normale Checkmark und nicht mit diesem Kreis. Und dann kann ich auch wieder hier das einfach kopieren. Und dann habe ich das für alle Elemente. Genau, und kann hier meinen Text einfügen, was denn da wichtig ist für dieses Produkt. Und Fußzeile ist das hier unten. Und dann haben wir auch noch den Button hier oben drüber. Das habe ich jetzt nicht gesehen. Hier kommt der Button Text, also was steht auf dem Button und was ist der Link. Und die zusätzliche Information ist das hier unten. Und Banderole ist hier, wo populär steht natürlich. Genau, und da kann ich auch sagen, ich möchte das links haben oder rechts. Oder ich möchte es gar nicht angezeigt haben, wenn ich jetzt zum Beispiel das in der Mitte ein bisschen hervorheben möchte.

18:39
Und dann können wir das Ganze wie immer im Stil noch anpassen. Kopfzeile hatten wir eben schon, das ist diese Farbe hier oben. Ich kann mich auch den Abstand noch anpassen. Der Titel, welche Farbe, welche Schriftart, zweite Überschrift ist dann diese Beschreibung. Wie soll der Preis dargestellt werden? Das finde ich jetzt hier ein bisschen klobig.

19:08
Da gehen wir doch glatt mal rein. Und machen das vielleicht ein bisschen klein.

19:19
Dann kann ich hier noch, wie die Währung angezeigt werden soll. Vorher oder hinterher. Also hintendran. Ich habe ja hier eigentlich das mit einem Komma gemacht, oder? Achso, ich habe hier selber einen Punkt stehen.

19:46
Kann ich dann auch noch die Größe von dem Eurozeichen verändern? Wo es angezeigt werden soll? Oben? In der Mitte? Unten? Das war ein bisschen größer. Das ist ja immer noch so klein. So. Und dann die Nachkommastelle, also die 99 jetzt hier sind die oben, mittig oder unten. Und dann hier beim Zeitraum, wie soll das angezeigt werden von der Größe her, von der Farbe her und so weiter. Und das gleiche mit den Eigenschaften. Hier haben wir auch wieder die Typografie-Eigenschaften. Wie die Ausrichtung sein soll, wenn ich das hier linksbündig haben möchte. Ob ich hier so einen Trenner haben möchte. Also diese Linie, die wollen wir jetzt nicht. Finde ich jetzt nicht so schön. Aber wenn wir sie haben, können wir auch sagen, wie breit die sein soll.

20:47
Also können wir auch die gesamte Breite einnehmen oder halt nur so einen kleinen Strich. So, weiß ich nicht. Und den Abstand zwischen den Elementen größer. Weiß ich jetzt nicht, braucht man jetzt auch nicht so groß machen. Und hier haben wir dann noch die Einstellungen für den Button und diesen Text da unten drunter. Hier können wir den Button wieder rund machen und so weiter.

21:20
Als nächstes schauen wir uns den Trenner an. Hier haben wir ihn. Da haben wir jetzt eine Linie. Das ist jetzt erstmal nicht so spannend, aber wir können auch hier noch verschiedene Stile verwenden von diesem Trenner.

21:47
Ich zeige jetzt hier mal einfach zwei. Und wir können auch ein Icon in die Mitte packen. So, jetzt ist das hier in der Mitte oder auch Text.

22:02
Also wenn ihr irgendwie eine Überschrift haben wollt und da ist die Linie links und rechts, dann könnt ihr es damit machen. Wir wollen jetzt erstmal keins. Aber wenn, dann könnt ihr halt die normalen Einstellungen für Typografie und so wieder verwenden. Was ich jetzt aber damit auch noch machen kann, ist, dass ich sage, Dieses Ding soll 200 Pixel breit sein. Lücke 0, das ist dieser Abstand jetzt hier und hier.

22:39
Und dann gehe ich hier rein in die Breite und sage individuelle Breite und gehe hier auch in die Pixel und sage auch 200. Dann habe ich ein Und ich kann das ja jetzt zum Beispiel hier, das ist jetzt bei einem Preisdingens vielleicht nicht, aber ich könnte es zum Beispiel hinter so einem Bild packen. Ich füge mal schnell ein Bild ein. Und dann gehe ich hier rein und mache das jetzt noch in einer etwas unauffälligeren Farbe. Und richten das Ganze hier mal rechtsbündig aus. Und dann können wir hier zum Beispiel minus 50 oder noch mehr, minus 80, ganz ruhig minus 100 sagen.

23:40
Und rechts minus 100 und dann müssen wir links aber auch noch 100. Damit es auch noch rechteckig bleibt. Und Z-Index vom Bild setzen wir hoch auf 1.

24:03
Und dann haben wir hier so ein Hintergrunddingens. Ich muss natürlich, wie gesagt, Sandwich schon nicht unbedingt hier dieses Margin nehmen, sondern ich kann es auch über das Transformieren verschieben. Das ist auch eine Möglichkeit, nur damit ihr es erstmal gesehen habt. Das war falsch. Ne, so viel wollen wir nicht.

24:38
Ja, 50 so und hier dafür aber 150. Genau, und dann haben wir hier so ein Element im Hintergrund, das können wir dann natürlich auch noch ein bisschen die Transparenz verändern, dass es nicht ganz so dolle ist.

24:59
Genau, also falls ihr mal solche Elemente braucht, lässt sich das damit auch machen. Und als nächstes schauen wir uns den Call to Action noch an. Bei diesem Element haben wir hier im Prinzip so ein Bild oben drüber. Wir können es auch anders anordnen.

25:23
So oben oder auch rechts. Ich kann auch sagen, dass es so ist, dass das Bild im Hintergrund ist.

25:33
Wir lassen es mal so nach oben. Und dann haben wir eben hier einmal eine Überschrift, eine Beschreibung und einen Link, wo wir hier den Link einfügen. Und wir können auch noch hier, Achtung, eine Banderole einfügen und die ausrichten rechts oder links. Und dann haben wir hier so eine ganze Box quasi, die hervorsticht. Und hier können wir auch wieder sagen, wie hoch das Ganze sein soll. Ich kann das Ganze, ja, das macht jetzt hier keinen Unterschied, weil es nur, wenn ich jetzt das höher machen würde, so, dann könnte ich es mittig ausrichten. So, dann seht ihr, was damit gemeint ist. Ich kann es auch linksbündig oder rechtsbündig machen. Ich kann sagen, wie hoch das Bild sein soll. So, kannst du höher machen oder schmaler, wenn ich das möchte.

26:31
Und dann haben wir hier ganz normal diese Typografie-Eigenschaften unter Inhalt, Button und Banderole. Und bei Hover-Effekt hoch sehen wir jetzt dieses Zoom-In, was da passiert, wenn ich da auf das Bild gehe.

26:50
Und da gibt es dann noch andere Möglichkeiten, die man auswählen kann. Und als letztes für dieses Video schauen wir uns noch das Zitat an.

27:08
Das ist so ähnlich wie ein Testimonial, sage ich mal. Wir haben hier aber erstmal so diesen Rahmen hier an der Seite. Wir können auch Zitat auswählen. Dann haben wir ein Zitatzeichen in einer Box. Dann ist das Ganze einfach nur so grau. Also ihr könnt natürlich die Farbe dann ändern oder auch einfach ohne diesen Rahmen da links. Wir nehmen mal Zitat, finde ich am besten. Und dann können wir es auch wieder ausrichten. Hier haben wir dann den Zitat Text, den Verfasser des Zitats. Wir können sagen, wir wollen Icon und Text angezeigt haben. Also ich kann auch sagen, Hier dieses Twitter-Symbol soll nur das Symbol angezeigt werden. Oder eben so der Text. Und wenn man dann draufklickt, dann kann man das entsprechend Twittern. Ich habe keine Ahnung, wie Twitter funktioniert, aber kann man auch ausmachen, wenn man hier auf ausmacht.

28:10
Ich weiß nicht, ob jemand von euch Twitter oder X benutzt. Genau, und beim Stil kann man dann entsprechend natürlich den Text und auch dieses Zitatzeichen anpassen.

00:25
So sieht das jetzt standardmäßig aus. Wir haben aber verschiedene Darstellungsmöglichkeiten. Und zwar haben wir hier einmal klassisch.

00:34
Wir haben Karten, dann sind das so Boxen oder Kacheln und wir haben Full Content, also dass die Blogbeiträge untereinander angezeigt werden. Das brauchen wir jetzt eher selten, zumindest auf der Startseite. In der Regel, also das sind jetzt hier wirklich nur so Beiträge, die ich schnell angelegt habe mal und wo nicht viel Inhalt ist, aber normalerweise würde ich ja nicht wollen, dass da so viel Inhalt immer nacheinander ist. Das guckt sich ja niemand an. Ich finde Karten tatsächlich am schönsten, aber klassisch geht natürlich auch. Hier bei diesen Karten können wir dann auch noch wählen, wie viele Spalten wir haben möchten. Drei finde ich aber immer eigentlich ganz angemessen. Und wie viele Beiträge pro Seite angezeigt werden. Ich habe jetzt hier nur drei, darum habe ich nicht mehrere Seiten, aber sonst könnte man dann immer auf weiter klicken zwischen den Seiten.

01:33
Oder ihr sagt, wir brauchen auch nur drei und das reicht für die Startseite, wenn wir jetzt bei der Startseite bleiben. Masonry würde jetzt auch wieder so bedeuten, dass dadurch, dass die Beiträge jetzt gleich sind, sieht man das jetzt dummerweise nicht, aber so wie wir das bei der Galerie gesehen haben, dass die dann so ineinander sind, so wie das letztendlich auch bei Divi ist. Da ist es ja auch so, dass die dann so hier ineinander gehen, dass die nicht alle gleich hoch sind, sondern.

02:08
Wenn der Text vorbei ist, folgt das nächste. Und so wäre das dann bei Elementor entsprechend auch, wenn ich das hier auf Ja setze und es unterschiedlich lange Inhalte wären. Hier können wir jetzt noch auswählen, wie viel von dem Bild angezeigt wird. Also nicht wie viel, sondern wie groß. Normalerweise ist es halt in 0,66. Ich glaube, das ist auch der Standard, der da immer eingegeben ist. Und ich finde, das sieht auch sehr gut so aus, wie es ist. Hier kann man noch sagen, ob der Titel angezeigt werden soll. Der Auszug, also dieser Teil hier, den kann man sonst auch weglassen und nur den Titel anzeigen. Zum Beispiel Bei den Metadaten, das sind eben diese hier unten, da ist jetzt Datum und wie viele Kommentare vorhanden sind angeklickt. Wir können aber auch noch den Namen von Verfasser, die Uhrzeit von der Veröffentlichung und auch das Änderungsdatum anzeigen lassen, wenn wir das möchten.

03:09
Genau, und der Trenner hier zwischen, also der Trenner zwischen, das ist dieser Punkt hier. Da können wir auch selber irgendwie so einen Strich machen oder so zum Beispiel. Wir können sagen, ob dieser Weiterlesen Button oder dieser Link hier angezeigt werden soll und was da genau stehen soll. Wir können die Buttons auch von der Höhe her angleichen, also wenn jetzt hier meine Texte unterschiedlich lang wären, dann wäre normalerweise der Weiterlesen Button hier weiter oben und wenn ich den ausgleiche, dann wäre hier quasi so eine weiße Lücke und der Button wäre auf der gleichen Höhe wie bei allen anderen. Genau, ich kann sagen, dass es im neuen Tab geöffnet wird, der Blogartikel brauche ich jetzt eigentlich nicht, weil es ist Links innerhalb der Website, die würde ich immer im gleichen Tab öffnen, sobald man die Website verlässt, auf eine andere, dann im neuen Tab.

04:04
So, Plakette ist es hier oben. Da haben wir die Kategorie angezeigt. Wir können das aber auch ändern und die Schlagwörter zum Beispiel anzeigen. Ich weiß nicht, ob ich da jetzt welche hinterlegt habe. Ich glaube nicht, genau. Formate.

04:20
Ja, also ich finde das mit den Kategorien noch am sinnvollsten. Unter Abfrage können wir dann zum Beispiel sagen, welche Beiträge wir angezeigt haben wollen, also zum Beispiel kann ich jetzt hier, ich habe jetzt nur diese uncategorized Kategorie.

04:45
Aber ich kann jetzt hier nur Beiträge aus dieser Kategorie anzeigen lassen zum Beispiel, dann kann ich das hier eintragen. Fügebeiträge aus dieser Kategorie hier ein und sonst keine, wenn ihr so eine Kategorieseite zum Beispiel baut und die anpasst oder für einen bestimmten Verfasser. Und bei Ausschließen, also hier kann ich jetzt Artikel mit aus einer bestimmten Kategorie von jemandem bestimmten oder den aktuellsten Beitrag oder auch einen manuellen Beitrag, dann kann ich hier wieder suchen.

05:40
Beitrag 3 will ich ausschließen und jetzt habe ich nur noch 1 und 2. Duplikate vermeiden. Ist, wenn ihr z.B. Zwei Blog-Artikel-Module einfügt, weil ihr das z.B. So darstellen wollt, ich hier bei meinem Blog, das ist der aktuellste, das ist so oben und dann kommen die anderen ganz normal hier untereinander. Und wenn man das macht, will ich natürlich nicht, dass jetzt hier dieser Artikel hier dann nochmal erscheint. Und dann kann man eben entsprechend sagen, Duplikate vermeiden, damit das dann nur einmal alles angezeigt wird. Dann können wir sagen, welche Beiträge wir hier, also hier haben wir wieder die Linien, da hört es dann auf mit dem Beifügen und Ausschließen. Da können wir sagen, ob wir jetzt hier nur Beiträge anzeigen wollen, die jetzt irgendwie im letzten Jahr, im letzten Quartal und so weiter da erstellt wurden.

06:46
Wir können das nach Datum sortieren oder nach Titel zufällig und wir können es auch absteigend oder aufsteigend sortieren. Hier kann ich jetzt sagen, möchte ich, dass es mehrere Seiten geben soll.

07:05
Wenn ja, wie soll das aussehen mit voheriger, nächster. Wie gesagt, bei mir sieht man das jetzt nicht, weil ich hier nur drei Beiträge habe. Aber hier habt ihr so verschiedene Möglichkeiten. Infinite Scroll bedeutet, dass es dann halt immer wieder lädt. Sobald man unten ankommt, dann kommen die nächsten Beiträge. Und keine würde ich jetzt hier, wenn es wirklich die Startseite wäre, auswählen und dann hier zum Beispiel so einen Button drunter machen, wo man dann zur kompletten Blogseite kommt.

07:39
So würde ich es machen. So habe ich es auch bei mir. Ich kann es ja mal kurz zeigen. Auch wenn es Divi ist. Genau, ich habe hier die neuesten drei Beiträge und dann kann man hier zu allen Beiträgen gelangen. Und habe ich jetzt auch keine Nummerierung von vorherigen Posts an dieser Stelle.

08:02
Das ist dann erst auf dem Block. Genau, und beim Stil, ja, können wir sagen, wie viel Abstand zwischen den einzelnen Spalten ist, zwischen den einzelnen Reihen. Wenn hier darunter dann weitere kommen. Ich kann sagen, wie diese Karte aussehen soll. Ich habe hier die Hintergrundfarbe von diesen einzelnen Kacheln.

08:24
Also wenn ich das jetzt machen würde, dann hätte ich da so einen Hintergrund. Ich kann hier auch einen Rahmen hinzufügen, wenn ich das möchte. Ich kann das Ganze rund machen. Ich habe hier einen Innenabstand horizontal. Und auch vertikal.

08:45
Hier sieht man es jetzt ein bisschen, dass es größer wird und hier oben auch. Und ich kann auch einen Boxschatten machen, der ist schon da. Da sieht man ein bisschen Schatten.

08:55
Und als Hover-Effekt kann ich hier einen Farbverlauf machen. Also wenn ihr seht, das bewegt sich jetzt hier so ein bisschen, wenn ich da draufgehe. Es wird ein bisschen heller.

09:07
Genau, ich kann auch sonst hier sagen. Ich möchte keinen Beim Bild kann ich dann auch wieder sagen, ich möchte, dass da Abstände sind. Also Abstände, damit meinen sie hier nach unten. Hier oben bleibt es gleich, das war eben der Innenabstand. Die Plakette, damit sind die Kategorien hier gemeint. Ich kann das Ganze auch links anordnen. Auch hier haben wir eine Hintergrundfarbe von dieser Plakette.

09:35
Ich mach das mal schwarz. Und die Textfarbe ist weiß. Das passt ja jetzt so. Und ich kann das auch eckig machen. Ich kann es größer machen. Also den Text jetzt. Und den Abstand nach außen. Ich muss das auch mal verändern, damit ihr es seht.

09:56
So, also wie nochmal zur Erinnerung. Innenabstand wäre jetzt hier innerhalb von dem Dings. Außenabstand ist jetzt der Abstand hier. Und hier, der verändert wurde. Und Inhalt ist dann letztendlich hier dieser Textteil.

10:18
Wo wir auch wieder die normalen Typografie-Einstellungen haben für die Überschrift, für den Textauszug, für den Weiterlesen-Button und wo hier Meta steht, das sind die Teile hier unten. Zu einem Blog gehört ja immer auch noch ein Inhaltsverzeichnis. Und dazu gehen wir jetzt mal in so einen Blogbeitrag rein.

10:47
So, und ich würde jetzt hier mal noch ein bisschen was ergänzen, beziehungsweise wir kopieren uns das einfach mal. Es sieht jetzt nach einem furchtbaren Text aus, weil es keine Abstände gibt und so, aber darum geht es jetzt erstmal nicht. Wir machen hier eine H2 Überschrift, dann machen wir mal hier dazwischen noch eine H3 und Hier nochmal eine H2. Wir machen das jetzt einfach quer mittendrin. Ist egal. Es soll jetzt nur erstmal darum gehen, wie ihr dieses Inhaltsverzeichnis erstellen könnt.

11:38
Table of Content. So, das fügen wir ein. Ist jetzt eingefügt? Okay, unter Inhalt können wir erstmal sagen, wie die Überschrift sein soll. Inhalt.

12:16
Und dieses Inhaltsverzeichnis hat eine Überschrift von H4. Das kann so bleiben. Und hier kann ich jetzt sagen, welche Überschriften hier angezeigt werden sollen. Und standardmäßig sind es alle außer die H1, weil das ist ja unser Seitentitel und der muss jetzt im Inhaltsverzeichnis nicht angezeigt werden. Wenn ihr jetzt aber irgendwelche Überschriften habt, die nicht angezeigt werden sollen, weil ihr ganz am Ende hier noch irgendwie sowas habt, welche Beiträge es noch gibt und das ist jetzt eine H6 Überschrift zum Beispiel, dann könnte man jetzt hier auch sagen, dass ich die H6 nicht haben möchte. Oder ich kann auch sagen, wenn ich jetzt eine bestimmte Überschrift nicht haben möchte, dann gebe ich dieser Überschrift eine CSS-Klasse und kann die dann hier angeben und dann wird diese nicht in dem Inhaltsverzeichnis angezeigt. Wir haben hier, dass es mit Nummern versehen ist.

13:16
Wir können es auch einfach mit Bullet Points machen oder hier auch was ganz. Anderes aus der Icon-Bibliothek auswählen. Einfach, es ein bisschen anders zu haben. Oder wir sagen auch, es soll gar nicht angezeigt werden. Es ist einfach nur so untereinander ist. Genau, ich bleibe mal bei den Nummern jetzt. Und unter weitere Optionen können wir sagen, dass hier Wörter zusammengefasst werden, wenn jetzt die Überschrift so lang ist, dass wir die Box hier zusammen, wie sagt man, ja, zusammenklappen kann. Dafür ist dieses hier da.

14:00
Jetzt ist es nämlich weg. Wir haben hier das Icon für diese Minimize-Box offen und geschlossen. Können auch sagen, dass es ab welchem Gerät Desktop oder kleiner, also dass es immer geschlossen ist, dass es ab Tablet immer geschlossen ist oder nur bei Handy immer geschlossen ist. Und hier haben wir, dass es hierarchisch angezeigt werden soll, also dass es eingerückt ist und auch die Nummern halt anders sind. Das ergibt schon Sinn, weil ja das eine H3 Überschrift ist, eine Unterüberschrift von dem. Darum würde ich das auf jeden Fall drin lassen. Und hier kann ich auch sagen, dass wir die Unterüberschriften dann nicht anzeigen.

14:50
Genau, und beim Stil können wir jetzt noch die Hintergrundfarbe, den Rahmen, genau die, wenn das geladen wird, im Prinzip hier einstellen, das seht ihr jetzt ewig, die Breite von der Box und nicht von der Box, von dem Rahmen, Entschuldigung, und Dann letztendlich auch, ob es eine Rundung hat, den Innenabstand, wie hoch das Ding mindestens sein soll. Das würde ich einfach frei lassen. Und einen Schatten kann ich hier auch noch machen.

15:26
Das betrifft jetzt die ganze Box. Ich kann das ja nochmal so zeigen, damit man immer sieht, was da jetzt betroffen ist. Das ist die ganze Box. Hier unten, das ist nur unser Außenabstand, den ich gemacht habe, damit der Text nicht direkt da dran klatscht. Und Kopfzeile ist dann logischerweise nur das hier oben. Da kann ich dann auch hier noch so einen Abstand einbauen, wenn ich das denn möchte. Ich kann auch die Textfarbe wieder ändern.

15:59
Typographie, ihr kennt es mittlerweile. Und unter Liste können wir jetzt hier auch noch sagen, wie hoch das Ganze maximal sein soll. Ja, finde ich jetzt auch sinnlos, weil dann ist das Inhaltsverzeichnis weg und man möchte ja schon dann auch alles sehen, was der Text verspricht oder beinhaltet und nicht nur ein Teil. Genau, und darum würde ich hier einfach nichts eintragen. Typografie-Einstellungen ganz normal.

16:29
Hier haben wir die Einrückung von diesen unter Überschriften. Wir können da auch noch die Einstellungen vorne im Hover, wenn wir da drüber gehen und aktiv ist, wenn man quasi gerade klickt. Man kann auch hier die Überschriften unterstreichen. Würde ich jetzt eigentlich nicht machen. Kann man machen, muss man aber nicht. Beim Hovern, da ist es sowieso hoch, so standardmäßig so eingestellt und Marker sind die Zahlen. Ja, die würde ich jetzt auch nicht anders machen als den Text. Und ich kann die aber auch noch in der Größe verändern, wenn ich das irgendwie möchte. Würde ich persönlich aber auch alles so gleich machen wie den Text selbst. Genau, so viel zum Thema Blog und Inhaltsverzeichnis. Ein Video kommt noch und dann seid ihr gefragt und könnt ausprobieren, wenn ihr das nicht sowieso schon macht, jetzt hier so nebenbei.

HTML Code: 0 – 1:25 Minuten
Email Opt-in: 1:25 – 6:47 Minuten
Kontaktformular: 6:47 Minuten -Ende

01:12
Also wenn ich jetzt hier zum Beispiel E-Mail-Adresse stehen haben möchte, oberhalb oder ich sage, ich möchte das nur in den Feldern haben und nicht, also als Platzhalter und nicht nochmal da drüber, weil das doppelt gemoppelt ist, dann kann ich das hier entfernen. Genau, dann haben wir die Schaltflächen. Hier kann ich sagen, wie groß das Ganze sein soll. Also ich kann das hier größer machen. Zum einen hier oben. Ich kann sagen, wenn ich mehrere Steps habe, kann ich nächster und voriger sagen. Das ist jetzt bei dem E-Mail-Opt-in nicht der Fall. Hier würde ich jetzt noch sagen, jetzt anmelden zum Beispiel. Und jetzt kommt das Wichtige, Aktion nach dem Versenden. Hier muss ich jetzt nämlich das einmal rausnehmen. Und hier wähle ich jetzt den E-Mail-Anbieter an. Ich nehme jetzt ActiveCampaign. Und schon entsteht hier ein neuer Unterpunkt, ActiveCampaign.

02:09
Außerdem benötige ich, den die Aktion weiterleiten, damit die Leute dann auf die FastGeschafft-Seite kommen. Gehe jetzt also zu Weiterleiten und packe hier erstmal den Link von der Fast-Geschafft-Seite rein, wo dann steht, du musst deine E-Mail-Adresse bestätigen. Und hier haben wir dann Active Campaign. Das müssen wir erst einmal verbinden. Und dazu klicken wir hier auf diesen Link und dann öffnet sich das Fenster bei Elementor von den Integrationen. Ihr findet das auch unter Elementoreinstellungen und dann hier den Reiter Integration. Und dann sucht ihr hier euren Anbieter. Und könnt das hier entsprechend hinterlegen. Bei ActiveCampaign findet ihr das hier in den Einstellungen unter Entwickler und könnt dann einmal kopieren. Die URL und den Schlüssel. Überprüfe den Schlüssel. So. Und jetzt kann ich hier hin zurückgehen.

03:04
Und bei mir war das jetzt schon drin, aber wenn ihr es nicht habt, dann seht ihr dann jetzt hier, dass ihr das verbunden habt und könnt jetzt hier einfach Default lassen und wählt die Liste Newsletter aus zum Beispiel. Hier müssen wir jetzt die Sachen zuordnen und zwar sagen wir E-Mail ist E-Mail und Vorname ist der Name. Und dann ist das miteinander verbunden, die einzelnen Felder. Also dann wissen wir, dass was wir hier eintragen ist in ActiveCampaign mein Name und die E-Mail ist die E-Mail. So. Und hier bei weiteren Optionen sage ich jetzt noch, welches Formular genutzt werden soll von ActiveCampaign. Damit auch man das richtige Freebie zum Beispiel bekommt oder 0 Euro Produkt. Und zwar sehen wir das bei ActiveCampaign hier an dieser Stelle im Link.

03:48
Das ist mein Formular 21 und dann kann ich das hier eintragen und dann ist das richtige Formular miteinander mit ActiveCampaign verbunden. Bei anderen Anbietern kann das ein bisschen anders aussehen. Da müsst ihr dann nochmal individuell schauen, welche Angaben ihr hier machen müsst. Aber da kommen dann immer genau diese Felder, die ihr braucht hier als Reiter noch hinzu. Genau, und dann kann ich das ganz normal stilistisch verändern, so wie ich das möchte. Also ich kann den Abstand hier zwischen den einzelnen Spalten, wenn ich verschiedene Spalten habe, verändern. Also wenn ich jetzt zum Beispiel sage, ich möchte, dass das 50 Prozent breit ist und E-Mail ist auch 50 Prozent breit, dann kann ich hier den Abstand vergrößern zwischen diesen zwei Punkten.

04:42
Und hier dann, wenn ich mehrere Reihen habe, also jetzt seht ihr das zum Abstand zum Button, das kann ich hoch Jetzt macht meine Maus, was sie will. So. Kann ich hier selber eintragen und den Abstand vergrößern. Ich kann hier auch sagen, wie groß der Abstand vom Feldnamen zum Text sein soll. Ich kann die Felder an sich designen. Also ich kann sagen, wie die Textfarbe hier innerhalb sein soll, die Hintergrundfarbe, der Rahmen, ob der rund sein soll oder eckig. So, dann ist er eckig. Achso, Quatsch, das war jetzt die Rahmenbreite. Ich wollte hier die 0 eintragen. So, dann ist der Kasten eckig. Ich kann die Schaltflächen designen, also auch hier wieder sagen, das soll jetzt Schriftart sowieso sein. Das ist hier der Button. Text und dann habe ich Hintergrundfarbe und so weiter.

05:44
Bei den Nachrichten, das brauchen wir nicht, weil wir ja dann weiterleiten zur Fast geschafft-Seite. Das heißt, eine Erfolgsnachricht haben wir gar nicht. Und auch hier haben wir die Steps, das brauchen wir auch nicht, weil wir ja direkt weiterleiten. Genau, wir können dieses Formular aber natürlich auch als Kontaktformular nutzen. Und das erneut einfügen und dann hier unsere Felder einfügen, so wie wir sie brauchen fürs Kontaktformular. Dann kann ich auch hier sagen, Name 50%, E-Mail 50% und dann kommt meine Nachricht. Ich kann hier auch noch Felder hinzufügen, wo ich dann sage, das ist jetzt ein Radio Button sozusagen. Option 1, Option 2. So. Oder ich sage, man soll das hier aus einer Liste auswählen können. Dann erscheint hier so eine Dropdown-Liste. Ich kann auch Dateien hochladen lassen und so weiter. Und dann gehe ich zur Aktion nach dem Versenden und möchte, dass eine E-Mail versendet wird an mich.

06:58
E-Mail. Und dann gehen wir hier rein und sagen, die E-Mail soll an mich geschickt werden. Hier kommt der Betreff ein, neue Nachricht. Von und kann dann hier reingehen und sagen, wie war jetzt nochmal mein Name erweitert. Hier haben wir die ID, Fieldname, Name, das können wir hier nehmen und sagen dann hier bei E-Mail neue Nachricht von und dann wird an der Stelle der Name angezeigt. Hier werden jetzt in unserer Nachricht alle Felder angezeigt. Also alle Felder, die hier sind, werden dann in unserer E-Mail angezeigt. Wir können aber auch das genauer machen und wie hier jetzt Field ID Name, die so nacheinander einfügen und dann sagen Name, Doppelpunkt, Field ID Name und dann wird an der Stelle der Name angezeigt, dann E-Mail und dann gehen wir zu E-Mail. Und schauen, wie hier der Shortcode dafür ist und so.

07:59
Packen den hier wieder rein hier und fügen so alles ein, wie ihr das möchtet. Ihr könnt aber auch All Fields lassen. Es wird einfach alles untereinander euch dargestellt. So, hier packt ihr jetzt eure E-Mail-Adresse von eurer WordPress-Installation rein, damit diese E-Mail auch bei euch ankommt. Und das Ganze wird eben an euch selbst auch gesendet. Das geht von euch an euch sozusagen. Könnt es auch noch an jemand anderen senden, wenn ihr das möchtet. Und das wird dann… Geht dann an euch raus. Testet das dann auch einmal, wenn ihr so ein Kontaktformular erstellt und schreibt euch selbst eine E-Mail sozusagen, zu schauen, ob alles funktioniert. Im Notfall, wenn es nicht ankommt, probiert einmal aus, das Plugin Post SMTP zu installieren. Das ist…

09:06
Im Prinzip eine Möglichkeit, dass ihr euren Postausgangsserver vom Hoster, also ihr könnt ja auch bei eurem Hoster eine E-Mail-Adresse hinterlegen und erstellen und diese richtet ihr dann zum Beispiel bei Outlook ein. Und das ist im Prinzip das Gleiche, was ihr dann bei Outlook macht. Pappt euren Postausgangsserver auf der Website rein, damit ihr eben von dieser Website E-Mails aus verschicken könnt an bestimmte Personen, in dem Fall an euch selbst. Und das macht ihr halt dann möglich. In vielen Fällen funktioniert es auch ohne dieses Post SMTP-Plugin. Aber falls es Probleme macht, probiert es mal aus, mit diesem zu arbeiten. Das hilft dann immer, wenn es nicht geht, dann funktioniert es danach eigentlich immer. Also ich habe es noch nicht erlebt, dass es nicht funktioniert. Genauso weit zum Thema Elementor und weiter geht es dann mit der mobilen Optimierung.