Erweiterte Einstellungen von Elementen

1

Layout

  • 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
screen-erw-einst-layout-neu
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
screen-erw-einst-bewegungseffekte-neu
3

Transformieren

  • Verdrehungen und Verzerrungen des Elements möglich
  • Diese Effekte bitte nur im Ausnahmefall anwenden
screen-erw-einst-transformieren-neu
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
screen-erw-einst-hintergrund-neu
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
screen-erw-einst-rahmen-neu
6

Maskieren

  • Möglichkeit, das Element in einer bestimmten Form-Maske, z.B. einem Kreis, zuzuschneiden
  • Achtung, Inhalt wird dadurch ggf. abgeschnitten und unsichtbar!
screen-erw-einst-maskieren-neu
7

Responsiv

  • Hier hat man die Möglichkeit, das Element in bestimmten Bildschirmbreiten auszublenden:
    • Auf Desktop ausblenden
    • Auf Tablet ausblenden
    • Auf Mobile ausblenden
screen-erw-einst-responsiv-neu
8

Attribute

  • Diese Funktion ist für Entwickler mit tieferen Programmier-Kenntnissen
screen-erw-einst-attribute-neu
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
  • Beispiel-Code:
    selector {color:#ffffff;}
screen-erw-einst-eigenes-css-neu