Außenabstand (in Pixel) - Entfernung der Außenkanten des Elements zum nächsten Element
Angaben jeweils für Oben, Rechts, Unten, Links
Entweder verknüpfte Werte (Link Symbol dunkel, dann ändern sich alle 4 Werte immer synchron) oder
individuelle Werte (Link Symbol hell) dann kann man für alle 4 Positionen unterschiedliche Werte eintragen
Innenabstand (in Pixel) - Innerer Puffer des Element-Inhalts bis zur Außenkante des Elements
Infos zu Angabe & Werten siehe Außenabstand.
Breite
Volle Breite (100%) - dies ist die Standard-Einstellung. Das darauf folgende Element schließt sich unterhalb an.
Inline (auto) - das Element endet dort, wo der Element-Inhalt endet. Nachfolgende Elemente rutschen dadurch, wenn Platz ist und diese ebenfalls als Breite "Inline" eingestellt haben, in die gleiche horizontale Ebene
Individuell (Beliebige Angabe möglich in Pixel, Prozent u.v.m.)
Position
Standard Einstellung ist "Relativ"
Absolut - Positionierung im Bezug zum umschließenden Element (i. d. R. die umfassende Spalte). Beim Scrollen bewegt sich das Element mit.
Fixiert - Anheftung im Bezug zum Bildschirmrand. Beim Scrollen bleibt das Element wie festgeklebt unbewegt an der gleichen Stelle stehen.
Z-Index Ebenen-Positionierung bei überlappenden Elementen, Angabe in natürlichen Zahlen (je höher desto weiter oben)
CSS ID, Dynamische Attribute und CSS-Klassen sind eher Optionen für Entwickler
2
Bewegungseffekte
Hier sind Effekte wie Scrolling Effekte, Mauseffekte, Sticky-Effekte (Fixierung) und Animationen möglich
Bitte mit diesen Effekten grundsätzlich sparsam umgehen, da die Seite sonst schnell unruhig wirkt und sich die Ladezeiten erhöhen
3
Transformieren
Verdrehungen und Verzerrungen des Elements möglich
Diese Effekte bitte nur im Ausnahmefall anwenden
4
Hintergrund
Hintergrund-Optionen jew. verfügbar für Normal & Hover (bei Mausover)
Hintergrundtyp wählbar: Klassisch (Bild oder Farbe) oder Verlauf
Farbe - wählbar aus Globalen Farben (Welt-Icon) oder Farbpalette
Bild - wählbar aus Mediathek mit folgenden weiteren Optionen:
Bildgröße - am besten immer "Orginalgröße" auswählen
Position - wie soll das Bild ausgerichtet werden?
Mitte Mitte
Mitte Rechts
Mitte Links
Oben Mitte
Oben Rechts
Oben Links
Unten Mitte
Unten Rechts
Unten Links
Individuell (vertikale und horizontale Angabe in Pixel)
Anhang - standardgemäß scrollt das Hintergrund mit, es sei denn Sie wählen die Option "Fixed", dann bleibt das Hintergrundbild beim Scrollen statisch stehen ("Parallax-Effekt")
Repeat - wenn das Bild kleiner ist als die Element-Fläche, soll es sich wiederholen, um die Fläche komplett abzudecken?
No-Repeat = Keine Wiederholung
Repeat = Wiederholung vertikal & horizontal
Repeat-x = Wiederhoung horizontal
Repeat-y = Wiederholung vertikal
Anzeige Größe
Auto - automatische Größe
Cover - bedeckt automatisch die komplette Fläche des Elements, auch wenn dadurch Teile des Hintergrund-Bildes abgeschnitten werden
Eingepasst - das komplette Hintergrund-Bild wird angezeigt, ohne dass etwas abgeschnitten wird, auch wenn dadurch nicht die gesamte Fläche des Elements abgedeckt wird
Individuell - Angabe in Pixel oder Prozent
Verlauf - wie Farbe, nur mit weiteren Optionen
5
Rahmen
Rahmen-Optionen jew. verfügbar für Normal & Hover (bei Mausover)
Rahmentyp - wenn ein Rahmen gewünscht ist, ist die Standard-Option "Durchgezogen", weitere Optionen sind verfügbar
Breite - Angabe in Pixel jew. für Oben, Rechts, Unten, Links
Farbe - Auswahl der Rahmenfarbe über Globale Farben oder Farbpalette
Eckenradius - wenn abgerundete Ecken gewünscht sind, Angabe des Radius in Pixel jew. Oben, Rechts, Unten, Links
Box-Schatten - Schlagschatten Optionen
6
Maskieren
Möglichkeit, das Element in einer bestimmten Form-Maske, z.B. einem Kreis, zuzuschneiden
Achtung, Inhalt wird dadurch ggf. abgeschnitten und unsichtbar!
7
Responsiv
Hier hat man die Möglichkeit, das Element in bestimmten Bildschirmbreiten auszublenden:
Auf Desktop ausblenden
Auf Tablet ausblenden
Auf Mobile ausblenden
8
Attribute
Diese Funktion ist für Entwickler mit tieferen Programmier-Kenntnissen
9
Eigenes CSS
Diese Funktion ist für Entwickler mit HTML- / CSS-Kenntnissen
Wenn Sie sich mit CSS auskennen, können Sie hier CSS-Code für weitere Formatierungen des betreffenden Elements einfügen
"selector" markiert den das Element umschließenden Container