Normalerweise verwenden die meisten Bild- und Textelemente in Deinem Theme die Standardvoreinstellung. Es ist auch die Voreinstellung, die automatisch auf jedes neue Element angewendet wird, das in einem Layout platziert wird.

Benutzer sollten sich darüber im Klaren sein, dass durch Ändern der Standardvoreinstellung die Änderung auf alle Instanzen dieser Voreinstellung angewendet wird. Wenn Du beispielsweise der Standardvoreinstellung eines Textelements einen grünen Hintergrund und einen 5-Pixel-Rand gibst, wird höchstwahrscheinlich der gleiche Stil auf 90% der Textelemente im Thema angewendet. Aus diesem Grund empfehlen wir dringend, eigene Voreinstellungen zu erstellen.

Eine Voreinstellung kann in drei einfachen Schritten erstellt werden:

1. Gehe zu den Einstellungen eines Elements
2. Erweitere das Aussehens Akkordeon
3. Klicke auf Auswählen oder Voreinstellung erstellen, gib einen Namen für Deine Voreinstellung ein und klicke auf Hinzufügen.

Das ist alles, was Du brauchst, um eine Voreinstellung zu erstellen. Jetzt kannst Du die Darstellungseinstellungen ändern. Wenn Du das Element speicherst, werden alle diese Änderungen in dieser Voreinstellung gespeichert.

Um eine erstellte Voreinstellung auszuwählen, klicke auf Voreinstellungen und wähle Deine erstellte Voreinstellung aus der Liste aus.

Jede Voreinstellung kann jederzeit bearbeitet werden, indem die Darstellungseinstellungen geändert und das Element gespeichert werden.

Nach einiger Zeit stellst Du möglicherweise fest, dass Du zu viele Voreinstellungen erstellt hast und nur einige davon verwendest. In diesem Fall möchtest Du möglicherweise einige Voreinstellungen löschen. Klicke dazu neben Voreinstellungen Auswahl auf die Schaltfläche Löschen.

7.3 Darstellungseinstellungen und vor eingestelltes CSS

UpFront bietet eine Vielzahl von Stiloptionen für Elemente, mit denen Du Deine Inhalte formatieren kannst, ohne das CSS manuell anpassen zu müssen. Die Stiloptionen arbeiten in Echtzeit. Wenn Du also eine Einstellung änderst, werden die Ergebnisse sofort auf Deiner Webseite angezeigt. Du kannst Deine Änderungen entweder speichern oder abbrechen. Unten siehst Du ein Beispiel für zwei Schaltflächenelemente mit unterschiedlichen Einstellungen.

Während wir weiter an der Verbesserung von UpFront arbeiten, werden mehr Styling-Optionen für Dinge wie Schatten, Verläufe, Animationen usw. verfügbar. In der Zwischenzeit kannst Du Elementvoreinstellungen benutzerdefiniertes CSS hinzufügen, um das Styling auf Deiner Seite weiter zu gestalten. So geht’s:

1. Öffne die Einstellungen eines Elements
2. Scrolle im Bereich Darstellung ganz nach unten und klicke auf die Schaltfläche Voreinstellung CSS bearbeiten
3. Füge hier Dein Element-CSS hinzu (denke daran, dass vor jedem eingegebenen CSS .presetName steht, um zu verhindern, dass CSS außerhalb des Elements ausläuft).

Das CSS-Panel ist ziemlich einfach zu bedienen. In der oberen Leiste werden vier anklickbare Optionen angezeigt:

1. Schriftart einfügen – Mit dieser Option können Sie den Namen und den Stil der Schriftart in Ihr CSS einfügen
2. Link Theme Bild – wird zum Verknüpfen von CSS-Sprites verwendet
3. Bild verknüpfen – wird verwendet, um von Benutzern hochgeladene Bilder zu verknüpfen
4. Farbwähler – Fügt den HEX-Wert für die ausgewählte Farbe in CSS ein

Darunter befindet sich das eigentliche CSS-Eingabefenster. Hier solltest Du den Code schreiben. Die rechte Seitenleiste enthält Verknüpfungen für verfügbare Selektoren. Wir empfehlen dringend, diese für Dein individuelles Styling zu verwenden. Wenn Du den Mauszeiger über einen bestimmten Selektor bewegst, wird dieser auf dem Element hervorgehoben, sodass Du sehen kannst, welchen Teil Du stylst. Die Anzahl der Selektoren kann variieren, einige Elemente haben nur einen, während andere Dutzende haben können.

Unten siehst Du, wie Du die Schaltfläche verbessern kannst, indem Du ihr einige benutzerdefinierte CSS-Animationen gibst.

.upfront-button a.upfront_cta {
text-transform: inherit;
padding-right:0;
transition:padding 0.15s linear;
}
.upfront-button:hover .upfront_cta {
padding-right:10px
}
.upfront_cta:after {
content: ‚►‚;
display:inline-block;
position:relative;
top:4px;
left:-5%;
opacity:0;
transform:scale(2);
transition:all 0.15s ease-in;
}
.upfront-button:hover .upfront_cta:after {
    top:2px;
    left:10px;
    transform:scale(.7);
    opacity:0.8;
}