Das Aussehen eines Elements im Style-Tab ändern.

Nutzen Sie das Style-Panel, wenn ein Element auf einer Seite seinen eigenen Look braucht: eine farbige Card, ein verblasstes Logo, ein Button in Kampagnenfarben. Jede Änderung sehen Sie sofort auf der Seite. Für einen Look, den jede Seite teilen soll, zum Beispiel die Farbe aller Buttons, ändern Sie stattdessen Ihr Theme. Eine Bearbeitung dort aktualisiert die ganze Website.

Das Video folgt dem ersten Rezept unten: Es dimmt ein Partnerlogo, bis der Zeiger es erreicht.

Bevor Sie beginnen

• Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit More. Neu im Builder? Siehe Ihre erste Seite.
• Speichern im Dialog behält eine Änderung im Editor. Speichern in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“.

Einstellungen im Style-Panel gehören zu einem Element. Sie werden im Inhalt dieser Seite gespeichert, nicht in Ihrem Theme. Ändert sich Ihre Markenfarbe nächstes Jahr, behält jedes von Hand gefärbte Element die alte Farbe, bis Sie es bearbeiten.

• Einen Look wiederverwenden, indem Sie ein gestaltetes Element mit More > Save as template speichern oder Elementen eine geteilte Klasse unter HTML classes geben. Siehe Benutzervorlagen und HTML-ID und Klassen.
• Farben aus den Farbfeldern wählen, wenn Ihre Website sie zeigt. Sie stammen aus der Farbpalette Ihres Themes. Ein Farbfeld kopiert die Farbe, sodass eine spätere Palettenänderung es nicht aktualisiert.

Rezept: Logos dimmen, bis der Zeiger sie erreicht

Eine Reihe von Partnerlogos wirkt ruhiger, wenn die Logos gedimmt sind. Dieses Rezept dimmt ein Logo und holt es beim Darüberfahren zurück.

1. Fahren Sie mit der Maus über ein Image-Element, das ein Logo zeigt, klicken Sie auf More und dann auf Settings.
2. Öffnen Sie das Style-Panel und ziehen Sie Opacity auf 0.5. Das Logo verblasst beim Ziehen.
3. Öffnen Sie das Hover style-Panel darunter und ziehen Sie Opacity auf 1.
4. Klicken Sie im Dialog auf Speichern und dann in der Symbolleiste auf Speichern.
5. Öffnen Sie das Ansichtsmenü (das Augen-Symbol) in der Builder-Symbolleiste, wählen Sie Preview und zeigen Sie auf das Logo. Es wechselt zu voller Stärke und dimmt wieder, wenn der Zeiger es verlässt.

Wiederholen Sie die Schritte für jedes Logo in der Reihe.

Rezept: ein Button in Kampagnenfarben

Ihr Theme gibt Buttons eine Hover-Farbe. Ein selbst gesetztes Background ersetzt diese Hover-Farbe ebenfalls, stellen Sie also beides ein.

1. Fahren Sie mit der Maus über das Button-Element, klicken Sie auf More und dann auf Settings.
2. Wählen Sie im Style-Panel ein Background und eine Font color. Klicken Sie auf ein Farbfeld oder geben Sie Ihren Farbcode, zum Beispiel #e4002b, in das Farbfeld ein.
3. Wählen Sie im Hover style-Panel ein dunkleres Background.
4. Klicken Sie im Dialog auf Speichern und dann in der Symbolleiste auf Speichern.
5. Wählen Sie Preview im Ansichtsmenü und zeigen Sie auf den Button. Er nimmt die dunklere Farbe an.

Was Sie sehen

Solange der Dialog offen ist, zeigt das Element jede Änderung. In Preview wechselt das gedimmte Logo unter dem Zeiger zu voller Stärke und der Kampagnen-Button nimmt seine dunklere Farbe an. Beide Looks bleiben nach einem Neuladen der Seite, denn Speichern in der Symbolleiste hat sie gespeichert.

Was jedes Steuerelement akzeptiert

Ein eingetippter Wert außerhalb des Bereichs wird auf die nächste Grenze gekürzt. Boxmodell und Schlösser erklärt die Seite Abstände.

Wie sich die Einstellungen verhalten

Theme defaults

Eine leere Farbe, ein Regler auf 0, eine Liste auf Theme defaults und eine Boxmodellseite, die „-“ zeigt, bedeuten alle dasselbe. DXPR Builder schreibt nichts und Ihr Theme entscheidet. So verbirgt Opacity 0 kein Element und Font size 0 behält die Theme-Größe. Um zum Theme-Look zurückzukehren, klicken Sie im Farbwähler auf Clear, schieben Sie den Regler auf 0 oder wählen Sie erneut Theme defaults.

Wo die Einstellungen landen

Jede Style-Einstellung außer Drop shadow wird als Inline-Stil auf dem Element gespeichert. Inline-Stile schlagen gewöhnliches Theme-CSS. Zwei Dinge gewinnen noch über sie: Theme-Regeln mit !important und Bootstrap-Utility-Klassen unter HTML classes, die ebenfalls !important tragen.

Auf manchen Elementen landen die Einstellungen auf einem inneren Teil. Auf einem Button gestalten sie den Button selbst, auf einem Image das Bild, auf einem Link den Link und auf einer Map den Kartenrahmen.

Jede Bildschirmgröße

Style-Einstellungen haben keine Breakpoints. 64 px Padding sind auch auf einem Smartphone 64 px. Prozentwerte wachsen und schrumpfen mit der Breite der Seite. Für unterschiedliche Werte pro Bildschirmgröße nutzen Sie responsive Klassen, wie auf der Seite HTML-ID und Klassen gezeigt.

Opacity blendet alles darin aus

Opacity wirkt auf das ganze Element. Es blendet Kasten, Rahmen, Text und jedes Element darin aus. Für einen durchsichtigen Kasten hinter solidem Text lassen Sie Opacity auf 0. Wählen Sie stattdessen eine Background-Farbe mit etwas Transparenz: Der Farbwähler hat dafür seinen eigenen Opazitätsregler.

Hover style

Hover style ist ein separates Panel unter Style. Es hat dieselben Steuerelemente, eigenes Boxmodell eingeschlossen. Seine Werte gelten, solange der Zeiger über dem Element ist. Anders als Style-Werte sind sie selbst mit !important markiert, schlagen also Ihre Style-Werte, die Utility-Klassen unter HTML classes und die meisten Theme-Regeln.

Nur Drop shadow blendet ein, in 0,15 Sekunden. Andere Hover-Änderungen schalten sofort um, sofern Ihr Theme sie nicht animiert. Bootstrap-Buttons blenden Farben in 0,15 Sekunden über.

Smartphones und Tablets haben keinen Zeiger. Besucher dort sehen einen Hover-Look erst nach einem Tippen, legen Sie also nie benötigte Information hinein.

Elemente mit eigenen Einstellungen

Manche Elemente haben für dieselbe Aufgabe eine eigene Einstellung. Ihre eigene Einstellung gewinnt und das Style-Steuerelement tut nichts.

Wenn Sie Ihre Änderung nicht sehen

• Die Änderung ist beim Schließen des Dialogs verschwunden. Sie haben ihn mit Cancel, dem Schließen-Symbol oder der Escape-Taste geschlossen, was die alten Einstellungen zurückgeholt hat. Nehmen Sie die Änderung erneut vor und klicken Sie im Dialog auf Speichern.
• Die Änderung ist nach einem Neuladen der Seite weg. Speichern im Dialog behält eine Änderung nur im Editor. Klicken Sie in der Symbolleiste auf Speichern, bevor Sie die Seite verlassen.
• Der Theme-Look bleibt. Eine Bootstrap-Utility-Klasse unter HTML classes oder eine Theme-Regel mit !important gewinnt. Öffnen Sie das General-Panel und entfernen Sie den Klassen-Chip, zum Beispiel Primary background, oder fragen Sie Ihren Webmaster nach der Theme-Regel.
• Ein Steuerelement tut gar nichts. Manche Elemente haben für dieselbe Aufgabe eine eigene Einstellung. Siehe Elemente mit eigenen Einstellungen.
• Der Button ändert seine Farbe beim Darüberfahren nicht mehr. Ihr Background ersetzt die Hover-Farbe des Themes. Stellen Sie ebenfalls ein Background im Hover style-Panel ein.
• Der Text ist zusammen mit dem Kasten blass geworden. Opacity blendet das ganze Element aus. Setzen Sie es auf 0 zurück und nutzen Sie eine Background-Farbe mit Transparenz.
• Opacity 0 verbirgt das Element nicht. 0 bedeutet Theme defaults. Fügen Sie stattdessen die Klasse Hide element (d-none) unter HTML classes hinzu.

Wie geht es weiter?

• Hintergründe: Ein Foto hinter eine Überschrift legen und die Überschrift lesbar halten.