Was sind Presets?
Presets sind "vorgefertigte Website Sections", die bestimmte Elemente in einem Container beinhalten. Das Design dieser Elemente kann jederzeit auf verschiedene Wege angepasst werden. In diesem Artikel stellen wir dir vor, wie man solche Presets benutzt und individualisiert.
Inhaltsangabe
Generelle Information
Presets setzen sich aus Containern zusammen, die unterschiedliche Elemente umfassen.
Das Preset "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 eine Section hoverst oder diese anklickst und eine orangefarbene Umrandung sichtbar wird, weißt du, dass du in einem Preset arbeitest. Außerdem steht der Preset-Name oben links in der Ecke.
Presets haben unterschiedliche Style-Optionen und lassen sich so schnell an deine Wünsche anpassen. Bei den meisten Presets kannst du auch aus unterschiedlichen Varianten auswählen und die Einstellungen auf unterschiedlichen Ebenen anpassen.
Video - Presets einfügen
.wistia_no_animate * { transition: none !important; -mozilla-transition: none !important; -ms-transition: none !important; -o-transition: none !important; -webkit-transition: none !important; }
Dieses Video wurde in der alten UI aufgenommen. Wir werden das Video bald updaten.
Presets nutzen
Durch die Nutzung von Presets kannst du schnell und einfach deine Wunschwebsite erstellen. Beim Galerie-Preset 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 Presets. 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 Preset hat eine eigene Preset-Klasse (bspw. .preset-gallery-v3-default). Wenn du ein Preset 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 Preset 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 Preset erstellen möchtest, aber die eine Section anders gestalten möchtest (bspw. weniger Spalten in der Galerie anzeigen), dann kannst du dem Preset in der neuen Section eine neue Preset-Klasse zuweisen. Dadurch wird ein neuer CSS-Block unter einem anderen Namen generiert. So stellst du sicher, dass die Anpassungen an dem zweiten Preset nicht die Einstellungen des ersten Presets beeinflussen.
Responsive Einstellungen
Wie auch in den Element-Einstellungen kannst du auch in den Preset-Einstellungen 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 Preset Logos für Tablets an. Wie du siehst verändert sich die Label-Farbe von weiß auf lila (wie das Tablet-Icon) und zeigt dir so an, welche Änderungen du für die Tablet-Ansicht vorgenommen hast.
Im nächsten Beispiel, passen wir die Anzahl und den Abstand zwischen den Spalten nochmal für Smartphones an. Dafür klicken wir in der oberen Menüleiste auf das Handy-Icon. Wie du siehst wechselt die Farbe der Labels hier auf gelb (wie das Handy-Icon) und zeigt dir damit an, dass du Änderungen für die Mobile-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.
Responsive Einstellungen können auch für Element-Settings vorgenommen werden. Mehr Informationen dazu, findest du hier.
Werde ein Teil unserer Community!
Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.
