Mit Hilfe von Elementen und Section-Templates erstellst du schnell und einfach wunderschöne Websites ohne, dass zusätzlicher Code notwendig ist. Elemente stellen einzelne Objekte wie z.B. Icons, Buttons, Bilder, Überschriften oder dergleichen dar. Section-Templates kombinieren Elemente und erweitern diese um weitere Design-Optionen.
Inhaltsangabe
Generelle Information
Section-Templates setzen sich aus Containern zusammen, die unterschiedliche Elemente umfassen.
Das Section-Template Karten setzt sich beispielsweise auf einem Container (rot) zusammen, der ein Bild-Element (orange), ein Überschrift-Element (blau) und ein Text-Element (lila) umfasst. Wenn du über einen Abschnitt hoverst oder diesen anklickst und eine orangefarbene Umrandung sichtbar wird, weißt du, dass du in einem Section-Template arbeitest. Außerdem steht der Name des Section-Templates oben links in der Ecke.
Section-Templates haben unterschiedliche Style-Optionen und lassen sich so schnell an deine Wünsche anpassen. Bei den meisten Section-Templates kannst du auch aus unterschiedlichen Varianten auswählen und die Einstellungen auf unterschiedlichen Ebenen anpassen.
Section-Templates nutzen
Durch die Nutzung von Section-Templates kannst du schnell und einfach deine Wunschwebsite erstellen. Beim Section-Template Galerie siehst du bspw. unterschiedliche Varianten einer Galerie, damit du genau die aussuchen kannst, die zu deinem Website-Style passt. Varianten sind unterschiedliche Ausprägungen eines bestimmten Section-Templates. Hier im Beispiel siehst du, dass eine Galerie aus Quadraten oder Kreisen bestehen kann oder als Collage oder in einem Gitter angeordnet werden kann. Nachdem du dich für eine Variante entschieden hast, kannst du die Einstellungen nutzen, um weitere Anpassungen vorzunehmen.
Jedes Section-Template hat eine eigene Klasse (bspw. .preset-gallery-v3-default). Wenn du ein Section-Template zu deiner Website hinzufügst, generiert sich automatisch der entsprechende CSS Block unter CSS im Code Editor. Neuer Code wird immer am Ende hinzugefügt. Der CSS Code enthält alle Einstellungen, die du für das Section-Template im linken Panel eingestellt hast. Solltest du Änderungen im Code vornehmen, wird das im Panel widergespiegelt und umgekehrt.
Wenn du zwei Sections mit dem gleichen Section-Template erstellen möchtest, aber die eine Section anders gestalten möchtest (bspw. weniger Spalten in der Galerie anzeigen), dann kannst du dem zweiten Section-Template eine neue Klasse zuweisen. Dadurch wird ein neuer CSS-Block unter einem anderen Namen generiert. So stellst du sicher, dass die Anpassungen an dem zweiten Section-Template nicht die Einstellungen des Ersten beeinflussen.
Responsive Einstellungen
Wie auch in den Element-Einstellungen kannst du auch in den Einstellungen des Section-Templates Design-Vorgaben abhängig vom genutzten Endgerät und der Displaygröße ändern. So lassen sich speziell für Desktop, Tablet und/oder Smartphones beispielsweise Abstände oder die Schriftgröße anpassen, sodass du jederzeit volle Kontrolle über das Design deiner Website auf den jeweiligen Geräten hast.
Um Anpassungen für die unterschiedlichen Endgeräte vorzunehmen, wähle es in der oberen Menüleiste aus. In diesem Fall passen wir die Anzahl der Spalten und den Abstand zwischen den Spalten für das Section-Template Logos an.
So sieht Logos in der Desktop-Ansicht aus:
Das soll jetzt für Tablet angepasst werden:
- Wechsel auf das Tablet-Icon in der oberen Menüleiste des Editors, um die Tablet-Ansicht zu aktivieren
- Stelle sicher, dass du im Style-Tab die Einstellungen für das Section-Template geöffnet hast (nicht Elemente)
- Passe unter Darstellung die Zahl der Spalten an - in diesem Fall sehen 6 Logos in einer Reihe gut aus
- Damit die Logos näher zusammenkommen, stelle den Abstand bspw. auf 0.5 rem
- Die Label-Farbe von Spalten und Abstand hat sich von weiß auf lila (wie das Tablet-Icon) gestellt und zeigt dir so an, welche Änderungen du für die Tablet-Ansicht vorgenommen hast.
Jetzt werden die Anpassungen für Mobile vorgenommen:
- Wechsel auf das Handy-Icon in der oberen Menüleiste des Editors, um die Smartphone-Ansicht zu aktivieren
- Stelle sicher, dass du im Style-Tab die Einstellungen für das Section-Template geöffnet hast (nicht Elemente)
- Passe unter Darstellung die Zahl der Spalten an - in diesem Fall sehen 2 Logos in einer Reihe gut aus
- Hier sieht es besser aus, wenn die Logos noch etwas weiter auseinander sind, deswegen ändere den Wert bspw. auf 1 rem
- Die Label-Farbe von Spalten und Abstand hat sich von lila auf gelb (wie das Handy-Icon) gestellt und zeigt dir so an, welche Änderungen du für die Smartphone-Ansicht vorgenommen hast.
Änderungen in anderen Geräteansichten gelten immer auch automatisch für alle kleineren Geräte: Alle Einstellungen, die du in der Desktop-Ansicht triffst, gelten für alle Gerätetypen. Änderst du Einstellungen für die Tablet-Ansicht, werden die Einstellungen auch für mobile Geräte, nicht aber für Desktop-Geräte übernommen. Die Änderungen werden wie bereits erwähnt farblich gekennzeichnet.
Kommentare
0 Kommentare
Zu diesem Beitrag können keine Kommentare hinterlassen werden.