Also ihr seht, das ist schon manchmal soein bisschen frickelig, aber wir machen das
jetzt so, dass wir die Sachen einfachkopieren, dann haben wir nämlich ein sehr
ähnliches Verhalten zum Spaltenblock obendrüber, sodass wir quasi einen umfassenden
Block haben und dann darin quasi nochmalUnterbereiche.
Und wenn ich jetzt hier reingehe und sage,ich möchte nach dem Überschrift noch einen
Absatz hinzufügen, dann sieht das Ganzehalt so raus.
Und ihr seht schon, das ist schon einbisschen visuell anders.
Das ist im Prinzip gleich aufgebaut,so von der Idee her, aber einfach dadurch,
dass sich die Sachen unterscheidenin dem, wie sie aufgebaut
sind, kommt man da ein bisschenunterschiedlicher Ergebnisse.
Also schauen wir mal in den Spaltenblockhier rein und hier sieht man, da ist noch
ein bisschen was drumherum,aber im Prinzip ist das hier
auch mit Spalten gelöst,also wie in der ersten Lösung.
Einfach, weil ihr schon sehen könnt,hier müsste man jetzt noch hergehen und
die einzelnen Sachen nochmal in sichanders ausrichten.
Das wird halt mit dem Spaltenblock zumBeispiel viel einfacher gemacht,
weil das schon vorgegeben ist,wie sich die Dinge ausrichten.
Und wenn wir uns das Ganze anschauen.
Zum Beispiel auf Tablet, dann sehen wir,okay, hier ist schon alles ungebrochen.
Weil es auch bei den Spalten so ist,wird das auch hier schon ungebrochen,
aber man sieht halt, in der Zeile ist nochalles nebeneinander.
Das wäre jetzt so im erstenMoment eben zu sagen, okay,
Spalten ist hier tatsächlichder bessere Block an der Stelle.
Es ist theoretisch möglich,das Ganze mit einer Zeile zu
machen, hat aber einfachgrundsätzlich anderes Verhalten.
Und da muss man immer gucken, was möchteman erreichen?
Wie möchte man die Inhalte darstellen?
Was ist da am sinnvollsten quasi möglich?
Ich glaube, wenn wir auf Mobil gehen,dann wird auch bei den...
Aber wird auch hier unten. Nee, da wirdhier unten auch nicht ungebrochen, genau.
Das ist halt auch noch so ein Ding.
Da muss man hier einmal Zeilenumbrucherlauben und dann funktioniert das.
Wenn ich jetzt aber natürlich hier nochmehr reinschreiben würde, dann seht ihr,
bricht es auch irgendwann mal um.
Aber beim Spaltenblock ist das schon einbisschen früher der Fall, dass das so
passend sich umbricht, dass man dann nichtmehr allzu …
Und dann ist es imPrinzip eigentlich nur noch
eine Sache von, wiegestalte ich meine Inhalte?
Oder könnte man jetzthergehen und sagen,
okay, macht jetzt auchnoch einen Spanner rein.
Spanner hier drin, wo es hier auch zusehen ist.
Dann kommt noch mal ein bisschen Text odereine Liste.
Nach dem Trenner.
Das ist immer ein bisschen frickelig mitdem Trennern.
Neues Feature 1, Neues Feature 2 und soweiter.
Und irgendwann kommt dann nochmal einButton.
Jetzt auf.
Und dann kann manhier natürlich auch noch
sagen, an der Spaltemuss man das auswählen.
Da müsst ihr auch immer gucken.
Also ich war hier gerade auf derÜberschrift und hab geguckt, okay,
wie kann ich das ausrichten?
Aber wenn man hier.
Wenn ich natürlich jetztnur auf der Überschrift
bin, richte ich ja nurdie Überschrift aus.
Da muss man immer gucken, wo man sichgenau befindet.
Deswegen finde ich das immer so hilfreich,wenn die Listenansicht offen ist.
Weil dann kann ich hier genau sehen,wo bin ich gerade?
Welcher Block ist gerade ausgewählt?
Weil das ist hier oben für viele,die jetzt nicht so wahnsinnig viel damit
arbeiten, einfachschwierig, immer zu sehen,
okay, wo befinde ichmich eigentlich gerade?
Weil der einzige Unterschiedzwischen was hier ist
und was hier steht, istim Prinzip dieses Icon.
Hier, also um welchen Block es sichhandelt.
Und bei der Überschrift ist halt dann nochdie Ebene dazu.
Aber ansonsten sehen die...
Sieht das hier sehr, sehr identisch aus.
Deswegen ist es immer einfacher,wenn man die Listenansicht noch offen hat
und kann dann halt hier reingehen undsagen, okay, das ist jetzt mein...
Da befinde ich mich jetzt gerade drin.
Dann kann ich halt an der Spalte hier...
Das auch nicht sagen, genau.
Sondern muss das Ganze tatsächlich,glaube ich, nochmal kopieren.
Und dann könnte man im Prinzip auch allesauswählen.
Das glaube ich.
Ich glaube nicht, dass es inzwischenfunktioniert.
Nein, tut es nicht.
Warte, dann machen wir das einfach so.
Okay, können wir uns sparen mit derAusrichtung.
Müssen wir immer noch manuell machen.
Ich dachte, das ging inzwischen,aber.
Oder ich habe das Gutenberg-Plugin …
Eins von beiden.
Genau.
Aber diese Gruppe ist jetzt eigentlich daauch übergrößert.
So könnte man hergehen.
Also was ich am liebsten mache,ist, ich baue mir eine Sache hier so auf.
Und dann würde ich dasGanze einfach duplizieren
und nur noch dieInhalte austauschen.
Das macht es ein bisschen einfacher,wie wenn man.
Was ihr gerade gesehen habt.
Neuen Blog anlegen,wieder tippen, wieder
Trenner eingeben,wieder tippen und so weiter.
Ich bin eher so.
Das hat man auch indem Speed-Bild gesehen,
den ich beim WordCampEurope gemacht habe.
Ich habe mir eine Vorlage quasi angelegtund habe diese dann einfach dupliziert und
dementsprechend angepasst, wo ich esgerade gebraucht habe.
Das finde ich macht das Arbeiten einfachgrundsätzlich einfacher, als wenn man
wirklich immer manuell hergeht und allesmacht.
Klar, man kann das natürlich so feintunenund dann anpassen.
Wenn man dann aber grundsätzlichwas ändern möchte, hat man
aber halt immer das Problem,dass man dann überall ran muss.
Aber das ist halt relativ einfach soumzusetzen.
Muss ich nur einmal schauen, weil es michinteressiert persönlich.
Das wollten wir gerade nicht.
Genau, also die Sachen sind hier alle insich zentriert ausgerichtet.
Also da ist das alles...
Gut, der Button nicht, aber der Button istauch auf 100% gestellt.
Das könnte ich ja vielleicht auch nochmalmachen.
Der ist ganz schön groß.
Aber ist okay.
Jetzt sieht das eigentlich aus, wenn wirnoch einen zweiten Button hinzunehmen.
Es geht.
Genau, man hat hier noch Abstände.
Die könnten wir auch mal ein bisschenanpassen vielleicht.
Hier können wir gerade in den Rahmengehen.
Und.
Nun abziehen.
So, das ist noch Padding zu außen.
Rücksetzen.
Muss es auch bewegen?
Ich glaube, ja.
Okay.
Also da kann man danndarüber dann vielleicht
mal noch ein bisschenweiter hier anpassen.
Ja, aber so vom Grundprinzip her,so könnte man sowas aufbauen.
Dann natürlich.
Hier ist es natürlich jetzt nochmal einbisschen anders, weil hier jetzt noch
dieser ganze Bereich drumherum ist.
Erst mal zumachen und uns das malanschauen, wie das hier aufgebaut ist.
Dann ist das hier oben erstmal tatsächlicheine Gruppe.
Darin liegt wiederum eine Gruppe.
Die hat dann die Hintergrundfarbe,genau.
Hier ist dann die weiße Hintergrundfarbebesetzt.
Und.
Dann findet hier erstmal noch dieÜberschrift und dieser Text mit statt.
Und erst dann geht es quasi in die Spaltenrein.
Und da wird dann eben alles hin ge…
Ja?
Das ist eine sehr gute Frage.
Aber die Frage war, wenn jetzt die Spaltenhier unterschiedlich hoch sind.
Hier sieht man es so ein bisschen.
So der mittlere ist so ein bisschen weitnach unten verschoben.
Und die Frage war jetzt, kann man dieButtons quasi auf eine Höhe bringen.
Das ist ganz oft.
Hatte ich tatsächlichletztens auch erst im
Support, wo mich genaudiese Frage gestellt wurde.
Kann man tatsächlich tun.
Das wird jetzt spannend, ob ich das jetztnochmal wieder auf die Schnelle hinkriege.
Aber dafür sind wir ja hier.
Also.
Im Prinzip habe ich jetzt hier schon quasimir die Vorlage gebaut.
Und kann jetzt sagen, okay, ich möchtediesen Button hier ganz unten haben.
Weil ich habe hier ein bisschen wenigerText.
Brauche ich auch nicht so viel.
Aber trotzdem soll das nicht so eineTreppe sein.
Sondern die Buttons sollen alle auf einerHöhe sein.
Jetzt muss ich nochmal kurz überlegen.
Also wir haben hier eine Spalte.
Da liegt im Prinzip alles drin.
Und der Button soll jetzt quasi nachunten.
Ich glaube, ich musseinmal alle Blöcke, die oben
drüber liegen, also überden Button, einmal kopieren.
Mit diesem schönen Feature hier.
Und dann.
Genau, das war nämlich das, was nichtfunktioniert hat.
Dieses zum Füllen strecken.
Aber es gab einen anderen Trick,wie das ging.
Muss ich noch selber überlegen.
Aber ich will euch zeigen, wenn ihrstruggelt, ich struggle auch.
Also tut euch da keinen Zwang an,wenn ihr mal sofort nichts hinkriegt.
Muss ich wirklich überlegen.
Also es ist nicht an der Spalte.
Genau, das war glaube ich.
Wir machen nochmal einen Stapel.
Hier.
Ah.
Hier.
Das war aber auch nicht das Richtige,glaube ich.
Bei der Sichtvariante.
Passt.
Ja, bin ich ja gerade dabei.
Ne, das ist ja nur eineLinks-Rechts-Anordnung.
Das ist ja was anderes.
Hier rüber.
Ne.
Ja, damit ich es unten ausrichten kann,muss ja eigentlich.
Das ist die normale Anordnung.
Das ist die falsche Anordnung.
Ich wusste irgendwas auf 100% Höhe setzen.
Bin ja nicht mal sicher, welche Gruppe eswar.
Wir probieren jetzt einfach mal rum.
Das war's auch nicht.
Scheiße, ich hab das Beispiel auch schonwieder rausgeholt, wo ich es mal hatte.
Aber.
Wir heben hier mal die Gruppierung auf.
Haben wir alles in einen.
Jetzt zieht das nur quasi auf die volleBreite.
Ja, wie sage ich mal, wieder 100 Prozent.
Ähm, ja, warte.
Ich bin mir relativ sicher, dass esirgendwie.
Ah, Zwischenraum, das war's.
Genau, und jetzt mussich hergehen und mir diese
trotzdem noch mal in eineGruppe zusammenlegen.
Okay, jetzt haben wir's.
Also.
Nämlich ein bisschen kompliziert.
Kann ich das hier rausnehmen?
Okay, also.
Wir haben eine.
Wir haben hier die Spalte,das ist das ganze Ding, das
ganze Konstrukt hier, innerhalbdieses grünen Bereichs.
So, dann haben wir.
innerhalb dessen einen sogenannten Stapel,also das ist ein Gruppenblock,
der nicht horizontal ausgerichtet ist,sondern vertikal.
Mit dem habe ich jetzt auch.
Das ist hier jetzt wurscht, das ist dieandere Anordnung.
Also, hier seht ihr ja,hier ist zentriert, hier
ist rechtsbündig undhier ist quasi gestreckt.
Ich lasse das jetzt mal hier.
Wichtig ist, dass die Richtung eben vertikalist an der Stelle und nicht horizontal.
Und.
Ich habe diesem Stapel eine minimale Höhevon 100 Prozent gegeben.
Das heißt, streck sich auch.
All das, den Platz, den du hast.
Also, in der, Nicht hier, sondern.
Höhe.
An der Stelle.
Und darin habe ich dann quasi zwei Dinge.
Zum einen die Gruppe.
Eine Gruppe, wo die ganzen Informationendrin liegen, also meine Headline.
Beschreibung, Trenner, was auch immer manda reinmachen möchte.
Und eben den Button selber, der ja immerunten ausgerichtet werden soll.
Und.
An der Gruppe, das ist dann quasi einContainer.
Der jetzt hier auch nichts besonderseingestellt hat.
Das ist einfach nur, dass alleszusammengehalten wird an der Stelle.
Und eben der Button separat, der jetztauch nichts großartig eingestellt hat.
Und die Magic, die man braucht,ist hier am
Stapel, dass man sagen kann, Zwischenraum.
Man kann es auch mittig einrichten.
Dann sieht man, geht der.
Ist hier oben ein bisschen mehr Platz undhier unten ein bisschen mehr Platz.
Ich kann es halt nach oben ausrichten,so wie es ganz ursprünglich mal war.
Wie auch der normale Flow ist,sag ich mal.
Ich kann es auch nach unten ausrichten.
Dann ist der Hauptabstand eben hier oben.
Oder ich gehe dann eben in denZwischenraum und sage, der Zwischenraum
zwischen den Kind-Elementen, was eben hierdie Gruppe ist, und der Button.
Das ist dann, wie ich den Button nachunten gedrückt bekomme.
Und egal was für... wie hoch die Inhaltehier oben sind in dieser Gruppe,
die Buttons sind immer ganz unten.
Habt ihr was gelernt?
Sehr gut.
Okay.
Weitere Vorschläge?
Das ganze Gefrickel abspeichern,wie meinst du?
Dass du das immer wieder nutzen kannst,ja.
Kannst du tun?
Okay, angenommen, dumöchtest dir jetzt das komplette
Spalten-Ding hier speichern,dass du das als Vorlage hast.
Ich würde dir immer empfehlen, tatsächlichso alles mitzunehmen, das du da hast.
Also nicht nur so einenTeil davon, sondern dann
hast du das immer imGesamtkonstrukt zu sehen.
Dann kannst du hier drüber sagen,Vorlage erstellen.
Und kannst dann hier sagen, eben,keine Ahnung, weiß ich wie.
Pattern.
Kannst auch noch Kategorien vergeben,wenn du möchtest.
Und dann musst du dich hier entscheiden,synchronisiert oder nicht synchronisiert.
Das ist jetzt der einzige Unterschied, jenachdem, welchen Anwendungsfall du hast.
Wenn du synchronisiert auswählst,dann steht hier diese Vorlage über mehrere
Positionen hinweg synchronisierend.
Das heißt, wenn du das einmal auf derSeite jetzt zum Beispiel einfügst,
hast du das einmal hier und dann fügst dudas auf einer zweiten Seite ein.
Und wenn du auf dereinen Stelle eine Änderung
machst, ist es gleichauf der anderen Stelle.
Das ist halt synchronisiert.
Wenn du das nicht möchtest, wenn duwirklich nur als Vorlage möchtest,
dass du selber dann, je nachdem,wo du es gerade brauchst, Anpassungen
vornehmen kannst, dannwürde ich dir empfehlen,
das als nichtsynchronisiert zu machen.
Das ist jetzt der einfache Unterschied,wo man sich hier entscheiden muss.
Und dann kann man das hier über die SchönePlus hinzufügen.
Und dann kann man tatsächlich auch,wenn man jetzt hier wieder Blöcke einfügt
über Vorlagen, gibt es hier den BereichMeine Vorlage.
Und den gibt es erst, wenn man wastatsächlich angelegt hat.
Und da kann ich jetzt im Prinzip, wieoft ich möchte, diese Vorlage einfügen.
Weil sie jetzt nichtsynchronisiert ist, sieht man
halt hier jetzt, dass es einganz normales Pattern ist.
Ich kann das jetzt anpassen und es ändertsich halt nicht hier oben und auch nicht
hier unten, weil die halt von einanderunabhängig sind.
Okay.
Noch Fragen?
Oder andere Vorschläge für Patterns,die man bauen könnte?
Jetzt habe ich irgendwie alle erschlagen.
Philipp?
Ja.
Okay, also aus diesen Pricing Pattern, ichnehme die mal zusätzlich mal raus damit.
Übersichtlicher.
Also du möchtest ein Testimonial Patternjetzt da rausbauen.
Auf der Hälfte darzustellen.
Ah.
Jetzt weiß ich, was du meinst.
Also Philipp möchte,dass man hier ein Bild hat
und das Bild soll quasihier über oben rausgehen.
Und dann, wie macht man das?
Okay, probieren wir mal.
Ja, machen ein Bild.
Ich glaube, hier habe ich noch gar nichtshochgeladen.
Das macht nichts.
Ich habe irgendwo immer irgendwelcheBilder.
Ich meine, da haben wir immer die schönenBlumen.
So, jetzt haben wir hier ein Bild.
Jetzt können wir malin die Einstellungen
reingehen, weil deineAnforderung war ja kreisrund.
Ja, nicht so ganz.
Macht nichts.
Machen wir einfach mal auf...
Okay, müssen wir mal ein bisschen mehrmachen.
Machen wir...
Das hat auch keine Auswirkung.
Ja, wir machen was ganz anderes.
Wir mogeln ein bisschen.
Croppen das.
Und dann machen wir.
Genau, dann haben wir erstmal einkreisrundes Bild.
Und jetzt geht es darum, das Ganze nachoben zu schieben.
So, ich bin mir jetzt nicht sicher,wie gut das im Spaltenblock funktioniert.
Aber das finden wir jetzt raus.
Okay, ich sehe schon, das wird nicht mehrfunktionieren.
Weil ich dafür die Einstellungen noch garnicht habe.
Okay.
Das geht nicht.
Wir sagen jetzt an dem Bild einmal,ich möchte es schieben.
Dann sollte ich doch dafür Außenabstandhaben.
Genau.
Jetzt sagen wir individuell.
Oben.
Minus 50 Pixel.
Okay.
So kannst du das...
Die negative Margins sind auch erst seit6.6, glaube ich, drin.
Genau.
Das ist relativ neu.
Früher konnte man tatsächlich gar nichtnegative Margins anlegen.
Aber wie du gesehen hast, am Bild selberkannst du es nicht machen.
Du musst das Bild in eine Gruppe legen.
Weil dann hast du eben dieseAußenabstand-Teile.
Und kannst dann natürlich hierüber dannsagen.
Also ich habe das jetzt hier auch extraaufgedröselt, dass ich nur den oberen habe.
Weil normalerweise ist das immer zusammen.
Also die Abstände oben und unten wirdgleich ausgerichtet.
Hier brauche ich aber nur den oberenAbstand.
Und deswegen daseinmal auf oben umgestellt.
Und halt anstatt den vorgegebenen Presetshier einmal so eingestellt.
Und dann kannst du das quasi individuellrausschieben, wie es gerade geht.
Also ich bin auchgerade sehr erstaunt, dass
das beim Spaltenblocktatsächlich auch geht.
Ich hätte jetzt erwartet, dass es nichtfunktioniert.
Aber es funktioniert.
Okay.
Und jetzt die Buttons wieder ausrichten.
Ja, das ist gut.
Es geht, glaube ich, jetzt auch einbisschen schneller.
Wir haben nicht mehr allzu viel Zeit,habe ich gerade mitbekommen.
Aber das kriegen wir hin.
Also wir haben ja gelernt, wir müssenalles in eine.
Falsche Taste.
Jetzt aber.
Also wir machen eine Gruppe.
Dass wir hier einmal Gruppe und Buttonhaben.
Gucken wir nochmal.
Okay, das passt.
Jetzt machen wir das in eine Spalte.
Auf.
Das schieben wir nochmal breit.
Wenn wir sagen.
Mal 100%.
Und jetzt sagen wir zwischendurch auf.
Dann haben wir wieder alles auf.
Okay.
Mal gucken.
Ja.
Eine ganz kurze Frage haben wir vielleichtnoch.
Soll ich noch irgendwas basteln?
Wenn nicht, seid ihr auch in dieMittagspause entlassen.
Wenn ich es richtig im Kopf habe,ist jetzt Mittagspause.
Okay.
Aber ansonsten, wenn ihr noch Fragen habt,fragt gerne mich.
Oder auch viele Leute, andere Leute hier.
Wir basteln solche Dinge gerne.
Und ja.
Es gibt für vieles eine Lösung.
Noch nicht für alles.
Aber wie ihr seht, man kann Dingetatsächlich erreichen.
Okay.
Danke euch.
So.
Vielen Dank für den schönen Vortrag.
Ich darf dir jetzt ein kleinesGeschenk überreichen.
Dankeschön.
Danke auch.