Grid mit Itemz
Anleitung unter dem Demo
Demo:
Wollsocken in bunten Farben und Mustern setzen fröhliche Akzente und peppen jedes Outfit auf.
Mehr als nur ein Kleidungsstück
Wollsocken sind ein Stück Gemütlichkeit und Wohlbefinden. Sie schenken Wärme und Geborgenheit an kalten Tagen.
Traditionelle Handwerkskunst
Wollsocken werden oft in traditioneller Handwerkskunst hergestellt. Jedes Paar ist ein Unikat und zeugt von der Liebe zum Detail.
Wollsocken - Kuschelige Wärme für kalte Tage
An kalten Wintertagen sind Wollsocken unverzichtbar. Sie halten die Füße warm und behaglich, egal ob beim Faulenzen auf dem Sofa oder beim Winterspaziergang.
Natürliches Material - Angenehmer Tragekomfort
Wolle ist ein natürliches Material, das atmungsaktiv und temperaturausgleichend wirkt. So bleiben deine Füße warm und trocken, ohne zu schwitzen.
Vielseitige Verwendungsmöglichkeiten
Wollsocken gibt es in verschiedenen Farben, Mustern und Stärken. Ob als Hausschuhersatz, Wandersocke oder modisches Accessoire - Wollsocken passen zu jedem Anlass.
Perfektes Geschenk - Immer willkommen
Wollsocken sind ein tolles Geschenk für Freunde und Familie. Sie sind praktisch, nützlich und zeigen, dass du dir etwas Gutes für deine Lieben wünschst.
Förderung regionaler Produktion
Beim Kauf von Wollsocken aus regionaler Produktion unterstützt du lokale Unternehmen und nachhaltige Produktionsweisen.
Haltbarkeit und Pflege
Wollsocken sind robust und langlebig. Mit der richtigen Pflege, wie z.B. Waschen in der Waschmaschine mit Wollwaschgang, bleiben sie lange Zeit schön und warm.
Ein Beispiel mit 3
Der Name von Feld 2 ist "Breite: 2, 3, 4 oder leer". Der Wert hier ist 3, um die letzte Reihe aufzufüllen.
Egals was auch immer
Jetzt fällt mir nichts mehr ein.
Itemz eignet sich recht gut, um damit ein Grid anzusteuern und einfach pflegbar zu machen.
Das CSS-Stylesheet habe ich ausgelagert: grid-demo.css
Man könnte es aber auch zwischen <style>...</style> in die Kopfzeile der Itemz-Einstellungen kopieren.
Itemz-Einstellungen:
Kopfzeile (Beispiel):
<link href="[ITEMZ_MOD_DIR]helpers/grid-demo.css" rel="stylesheet" type="text/css" />
Kopfzeile Gruppe:
<div class="grid grid12">
Item:
<div class="grid-item width[SHORT2] do-aos">
<a href="[SHORT1]" class="picturecontainer" style="background-image: url('[PICTURE]')">
<h3>[NAME]</h3>
</a>
<div class="text">{LONG1}</div>
[EDITLINK]
</div>
Fußzeile Gruppe:
</div>
Feldnamen:
Short1: Link
Short2: Breite: 2,3,4 oder leer
Long1: WYSIWYG
Bildgrößen:
Hier sollte man nicht zu knausrig sein. Eine Breite von 1200px wird sinnvoll sein, die Höhe am besten 0 = proportional. Das Bild wird als Hintergrundbild mit background-size:cover eingebunden.
Beachtenswert:
Die CSS-Zeile
.grid-item { grid-column: span 3; ..}
ist der Standardwert und gibt für alle 3/12 als Breite vor.
Ausgenommen sind die ersten 5, unabhängig davon, welche das sind:
.grid-item:nth-child(1), .grid-item:nth-child(2) { grid-column: span 6; }
.grid-item:nth-child(3), .grid-item:nth-child(4), .grid-item:nth-child(5) { grid-column: span 4; }
Das sagt, dass das 1. Und 2. Grid-Item die Halbe Breite einnehmen sollen - eben 6 von 12 Spalten.
grid-item 3, 4, 5 sollen ein Drittel sein. Das alles kannst du natürlich beliebig ändern.
Link: Das kann ein voller oder relativer Link sein. Aber auch ein WBCE-Link wie [ wblink12 ] oder ein Sprunganker.
- Ich habe hier ein 12er Grid gemacht, das ist aber etwas unpraktisch und erfordert mehr Aufmerksamkeit, überhaupt in den Media-Queries.
Einacher geht es mit nur 6 oder 4 Spalten. Ändere dazu einfach die Zahlen im CSS. - Ein <H3> innerhalb eines Links ist nicht valid. Ich habe es hier trotzdem gemacht, um die Kompatibität mit allen Template aufrecht zu halten. Besser wäre ein <span class="headline">
- Natürlich kannst du innerhalb von <div class="grid-item"> ... </div> machen was du willst.
- Wer nicht einfach die ersten Itemz anders haben will als die Standardbox, kann ein weiteres Short-Feld für eine Class verwenden. Damit bindest du die Breite an bestimmte Boxen, unabhängig davon, wo diese sind. Ein Beispiel ist hier: https://webdesign-grafik.at/
