Zum Hauptinhalt springen

Style- & Layout-Änderungen

Zuletzt aktualisiert am 24. März 20262 Min. Lesezeit
Inhaltsverzeichnis

Kurz gesagt​

Style- & Layout-Änderungen können direkt mit dem Floating Editor vorgenommen werden. Dieser ist sofort sichtbar, nachdem Varify.io auf deiner Seite geladen wurde. Klicke einfach auf das Element, das du optimieren möchtest, und lege die Änderung über das Dropdown-Menü fest oder gib die gewünschte Styling-Option ein.

Varify Style-Panel mit „Edit element“, den Feldern für Dimensionen und Position sowie den Typografie-Einstellungen

Stil- und Layout-Optionen​

Die folgenden Optionen stehen im Floating Editor zur Verfügung:

  • Dimensions: Breite und Höhe eines Elements
  • Location: Positionierung eines Elements auf der Webseite
  • Typography:
    • font-family: Schriftart
    • font-size: Schriftgröße
    • font-weight: Strichbreite der Schrift
    • text-align: Horizontale Textausrichtung
    • color: Definiert die Textfarbe.
    • text-decoration: Text kann zum Beispiel unterstrichen oder durchgestrichen werden.
    • line-height: Ist die Höhe einer Zeile.
    • word-spacing: Diese Option erhöht oder verringert die Breite der Schrift.
    • white-space: Durch white–space wird festgelegt, wie Zeilenumbrüche und Leerzeichen im Quelltext im Browser dargestellt werden.
  • Background:
    • background-color: Ist die Farbe des Hintergrunds für ein Element.
    • background-image: Hintergrundbild für ein Element. Das Dateiformat des Hintergrundbilds kann JPG, PNG, SVG, webP oder GIF sein.
    • background-style: Wenn du nichts angibst, wird die Hintergrundgrafik in ihrer vollen Größe im Hintergrund geladen. Wenn das Element in Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Grafik automatisch beschnitten.
    • background-repeat: Ist das Wiederholungsverhalten einer eingebundenen Hintergrundgrafik
  • Border:
    • margin: Beschreibung des äußeren Abstands eines Elements zu seinen umgebenden Elementen.
    • padding: Beschreibt den inneren Abstand eines Elements zu seinem Rahmen.
    • border-style: Die CSS-Eigenschaft border-style legt den Stil aller vier Seiten der Rahmen eines Elements fest.
    • border-width: Die Eigenschaft border-width bestimmt alle Rahmenbreiten eines Elements.
    • border-color: Die Eigenschaft border-color bestimmt alle Rahmenfarben eines Elements.
    • border-radius: Die Eigenschaft border-radius bestimmt den Radius, mit dem die Ecken eines Elements abgerundet werden.
  • Layout:
    • float: Damit weisen wir ein Element an, sich zum linken oder rechten Rand seines übergeordneten Elements zu bewegen. Dies wirkt sich nicht nur auf das Element selbst aus, sondern besonders auf andere Elemente, die mit dem „floatenden" Element in Beziehung stehen.
    • vertical-align: Richtet Bilder und Text in Tabellenzellen sowie Text an einer Grundlinie aus. Die Grundlinie, oder Baseline, ist eine unsichtbare Linie, auf der die meisten Buchstaben einer Zeile stehen.
    • overflow: Wenn Elemente zu groß sind, um in den umspannenden Block zu passen, läuft ihr Inhalt ohne Rücksicht über den umspannenden Block hinaus. CSS overflow verbirgt überlaufende Teile des Elements, sodass der verbleibende Teil in den umgebenden Block passt.
    • opacity: Deckkraft eines Elements. Die Werte können zwischen 0 und 1 liegen. 0 bedeutet vollständig transparent. 1 bedeutet vollständig sichtbar.
    • z-index: Die Eigenschaft z-index legt die Reihenfolge fest, in der Elemente von hinten nach vorne auf dem Ausgabemedium angeordnet werden. Dies ist wichtig, wenn sich Elemente überlappen. Elemente mit einem größeren z-index liegen näher am Betrachter und können Elemente mit einem kleineren z-index überlappen.
Auf dieser Seite