--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab' title: 'Das Aussehen eines Elements im Style-Tab ändern | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:55:14+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Elementen stylen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Das Aussehen eines Elements im Style-Tab ändern' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:55:14+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) # Das Aussehen eines Elements im Style-Tab ändern. Learn DXPR BuilderBuild pagesElementen stylen ## In this guide Related guides - [Eine Farbe oder ein Foto hinter Inhalte legen](/de/hc/documentation/learn-dxpr-builder/element-settings/background) 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](/de/hc/documentation/learn-dxpr-builder/getting-started/first-page). - **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](/de/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) und [HTML-ID und Klassen](/de/hc/documentation/learn-dxpr-builder/element-settings/custom-css). - **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 | Steuerelement | Bereich | Einheit | |---|---|---| | **Font color**, **Border color**, **Background** | jede Farbe, mit Transparenz | Farbe | | **Background image** | ein Bild aus der Medienverwaltung oder eine URL | | | **Background style**, **Background position**, **Border style** | eine Liste ab **Theme defaults** | | | **Font size** | 0 bis 100 | px | | **Border radius** | 0 bis 100 | px | | **Opacity** | 0 bis 1, in Schritten von 0,01 | | | **Drop shadow** | Level 0 bis 5 | | | Boxmodell **Margin** | -200 bis 200 | **PX** oder **%** | | Boxmodell **Padding** | 0 bis 200 | **PX** oder **%** | | Boxmodell **Border** | 0 bis 50 | px | | Boxmodell Breite × Höhe | 0 bis 2000 | **PX** oder **%** | 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](/de/hc/documentation/learn-dxpr-builder/element-settings/spacing). ## 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](/de/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 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. | Element | Ignoriert in Style | Stattdessen verwenden | |---|---|---| | Circle counter | **Background**, **Font size**, Breite × Höhe | **Background color** und **Dimension** in **General**, **Font size** in **Circle content** | | Progress bar | **Background**, Breite × Höhe | **Back color**, **Front color** und **Bar height** in **General** | | Divider | **Background**, Breite | **Color** und **Length** in **General** | | Number counter | **Font size** | **Font size** in **General** | | Image | Breite × Höhe | **Image width** und **Image height** in **General** | | Map | Breite × Höhe | **Map width** und **Map height** in **General** | | Marquee | Breite × Höhe | **Image width** und **Height** in **General** | | Video, Local video | Breite | **Video width** in **General** | | Positioned layers | Breite × Höhe | **Width** und **Height** in **General** | ## 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](#elements-with-their-own-settings). - **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](/de/hc/documentation/learn-dxpr-builder/element-settings/background): Ein Foto hinter eine Überschrift legen und die Überschrift lesbar halten.