--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css' title: 'Auf Abschnitte verlinken und Stile per Klassen wiederverwenden | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:56:57+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Geben Sie einer Section eine HTML ID, sodass ein Button zu ihr springen kann. Fügen Sie HTML classes hinzu, um ein Element auf Smartphones zu verbergen, Abstände pro Bildschirmgröße zu setzen oder einen Look wiederzuverwenden, den Ihr Theme definiert. Beide Felder finden Sie unten im General-Panel jedes Elements. Eine Klasse hält einen Look konsistent: Wenn sich ihre CSS-Regel ändert, folgt jedes Element mit dieser Klasse.' tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Auf Abschnitte verlinken und Stile per Klassen wiederverwenden' description: 'Geben Sie einer Section eine HTML ID, sodass ein Button zu ihr springen kann. Fügen Sie HTML classes hinzu, um ein Element auf Smartphones zu verbergen, Abstände pro Bildschirmgröße zu setzen oder einen Look wiederzuverwenden, den Ihr Theme definiert. Beide Felder finden Sie unten im General-Panel jedes Elements. Eine Klasse hält einen Look konsistent: Wenn sich ihre CSS-Regel ändert, folgt jedes Element mit dieser Klasse.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:56:57+0000' dateModified: '2026-10-24T17:19:22+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/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css' articleSection: 'Elemente gestalten' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css' description: 'Geben Sie einer Section eine HTML ID, sodass ein Button zu ihr springen kann. Fügen Sie HTML classes hinzu, um ein Element auf Smartphones zu verbergen, Abstände pro Bildschirmgröße zu setzen oder einen Look wiederzuverwenden, den Ihr Theme definiert. Beide Felder finden Sie unten im General-Panel jedes Elements. Eine Klasse hält einen Look konsistent: Wenn sich ihre CSS-Regel ändert, folgt jedes Element mit dieser Klasse.' 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 --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) # Auf Abschnitte verlinken und Stile per Klassen wiederverwenden. DXPR Builder lernenSeiten erstellenElemente gestalten ## In diesem Leitfaden Verwandte Leitfäden - [Layout auf Telefonen lauffähig machen](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design) Geben Sie einer Section eine **HTML ID**, sodass ein Button zu ihr springen kann. Fügen Sie **HTML classes** hinzu, um ein Element auf Smartphones zu verbergen, Abstände pro Bildschirmgröße zu setzen oder einen Look wiederzuverwenden, den Ihr Theme definiert. Beide Felder finden Sie unten im **General**-Panel jedes Elements. Eine Klasse hält einen Look konsistent: Wenn sich ihre CSS-Regel ändert, folgt jedes Element mit dieser Klasse. Das Video folgt dem ersten Rezept unten: Es lässt einen Button zu einem Abschnitt weiter unten auf der Seite springen. ## 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/dokumentation/dxpr-builder-lernen/erste-schritte/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“. - **Nutzen Sie eine HTML ID** für ein Sprungziel. Ein „Book a tour“-Button kann zum Buchungsformular scrollen. Eine Linkliste oben auf einer langen Seite kann zu jedem Teil führen. - **Nutzen Sie eine Klasse für einen Look, der sich wiederholt.** Ihr Webmaster schreibt das CSS einmalig und Sie fügen die Klasse hinzu, wo Sie sie brauchen. Das **Style**-Panel kopiert Werte stattdessen in jedes Element, was mit der Zeit auseinanderdriftet. - **Nutzen Sie eine Klasse für das, was das Style-Panel nicht kann**, zum Beispiel ein Element auf Smartphones verbergen oder Abstände pro Bildschirmgröße ändern. ## Rezept: ein Button, der zu einem Abschnitt springt 1. Fahren Sie mit der Maus über die Ziel-**Section**, klicken Sie auf **More** und dann auf **Settings**. 2. Geben Sie im **General**-Panel einen kurzen Namen, zum Beispiel `programmes`, unter **HTML ID** ein. Klicken Sie auf **Speichern**. 3. Öffnen Sie die Einstellungen des **Buttons**. Geben Sie unter **Link** `#` gefolgt von exakt demselben Namen ein: `#programmes`. Klicken Sie auf **Speichern**. 4. Klicken Sie in der Builder-Symbolleiste auf **Speichern**. 5. Wählen Sie **Preview** im Ansichtsmenü (das Augen-Symbol) und klicken Sie auf den Button. Testen Sie mit dem Abschnitt weiter unten auf der Seite als dem Button, sodass Sie den Bildlauf sehen. Liegt das Ziel in einem aufklappbaren Panel, einem Tab oder einer Karussellfolie, öffnet der Link es zuerst. ## Rezept: ein Element auf Smartphones verbergen 1. Fahren Sie mit der Maus über das Element, klicken Sie auf **More** und dann auf **Settings**. 2. Klicken Sie im **General**-Panel auf das Feld **HTML classes**. 3. Wählen Sie **Hidden on extra small devices, phones (<576px)**. Es sitzt in der Gruppe **Responsive Visibility**. 4. Klicken Sie im Dialog auf **Speichern** und dann in der Symbolleiste auf **Speichern**. Das Element verschwindet nun auf Bildschirmen unter 576 px Breite, auch im Editor. Prüfen Sie es, indem Sie die Seite auf einem Smartphone öffnen. ## Rezept: eigene Klassen eintippen Das Feld **HTML classes** lässt Sie nur aus seiner Liste wählen. Um einen Klassennamen einzutippen, schalten Sie es zuerst auf Text um. 1. Fahren Sie mit der Maus über das Element, klicken Sie auf **More** und dann auf **Settings**. 2. Klicken Sie unter **HTML classes** auf **Edit as text**. Das Feld wird zu einem reinen Textfeld, das die Klassen auflistet, die das Element bereits hat. 3. Fügen Sie Ihre Klassennamen dahinter hinzu, durch Leerzeichen getrennt, zum Beispiel `brand-card py-3 py-lg-5`. Lassen Sie den Punkt weg: `.brand-card` im CSS Ihres Teams ist hier `brand-card`. 4. Klicken Sie im Dialog auf **Speichern** und dann in der Symbolleiste auf **Speichern**. Das Element übernimmt den Look, den Ihr Webteam definiert hat. ## Was Sie sehen In **Preview** scrollt der Button die Seite weich zum Abschnitt und lässt Raum für einen fixierten Header; die Adressleiste endet auf `#programmes`. Unter 576 px Breite ist das verborgene Element weg. Eingetippte Klassen erscheinen als Chips, wenn Sie den Dialog das nächste Mal öffnen, in Anführungszeichen, wenn sie nicht in der Liste stehen, zum Beispiel „brand-card“. ## Wie die Felder funktionieren ### HTML ID Eine ID muss mit einem Buchstaben beginnen. Danach darf sie Buchstaben, Zahlen, Bindestriche und Unterstriche enthalten, aber keine Leerzeichen. Eine falsche ID zeigt einen Fehler unter dem Feld und **Speichern** tut nichts, bis Sie sie beheben. Lassen Sie das Feld leer, behält das Element eine ID, die DXPR Builder erzeugt hat. Das leere Feld zeigt sie in Grau. Nutzen Sie jede ID einmal pro Seite: Wenn sich zwei Elemente eine teilen, springen Links zur ersten. ### HTML classes Die Liste enthält Schattenklassen und Bootstrap-5-Klassen, nach Aufgabe gruppiert, zum Beispiel **Margins**, **Padding**, **Responsive Visibility** und **Rounded Corners**. Ihr Theme kann am Ende eine eigene Gruppe hinzufügen. Scrollen Sie die offene Liste oder geben Sie einen Namensteil wie padding, py-5 oder circular ein, um sie einzugrenzen. Tippen filtert nur die Liste; für eine Klasse, die nicht darin ist, nutzen Sie **Edit as text**. Bootstraps Klassen funktionieren nur, wenn die Seite Bootstrap 5 lädt. Es kommt aus Ihrem Theme oder aus **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), wo **Sideload Bootstrap files** auf **Bootstrap 5** steht. Bootstraps Utility-Klassen, zum Beispiel die Farb- und Abstandsklassen, sind mit `!important` markiert. Sie schlagen das **Style**-Panel auf derselben Eigenschaft. **Primary background** schlägt **Background** und **Top margin size 3 (mt-3)** schlägt den oberen **Margin**. Eine Klasse mit einer Bildschirmgröße im Namen gilt ab dieser Breite aufwärts: | Im Klassennamen | Gilt ab | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | So gibt `py-3 py-lg-5` 16 px Padding oben und unten auf kleineren Bildschirmen und 48 px ab 992 px Breite. ### Für Ihre Theme-Entwicklung Eine Klasse braucht eine CSS-Regel im Theme, zum Beispiel: ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Um die Klasse in der Liste **HTML classes** für die Redaktion zu zeigen, registrieren Sie sie in der `.info.yml` des Themes; siehe [Utility-Klassen](/de/hc/dokumentation/dxpr-builder-lernen/anpassung/dienstklassen). Für Stile auf der ganzen Website siehe [Eigenes CSS](/de/hc/dokumentation/dxpr-builder-lernen/anpassung/eigenes-css). ## Wenn Sie es nicht sehen - **Speichern tut nichts und HTML ID meldet „ID must start with a letter“.** Die ID bricht die obigen Regeln. Beginnen Sie sie mit einem Buchstaben und nutzen Sie nur Buchstaben, Zahlen, Bindestriche und Unterstriche. - **Sie können keine neue Klasse eintippen.** Das Feld filtert nur seine Liste. Klicken Sie zuerst auf **Edit as text**. - **Eine erwartete Klasse fehlt in der Liste.** Die Liste enthält nur die Klassen, die DXPR Builder und Ihr Theme definieren. Klicken Sie auf **Edit as text** und tippen Sie sie ein. - **Der Button scrollt gar nicht.** **Link** muss `#` gefolgt von exakt der HTML ID sein, mit denselben Großbuchstaben. Prüfen Sie beide Felder und testen Sie in **Preview**. - **Eine Klasse hat keine Wirkung.** Der Name ist falsch geschrieben, das Theme hat keine Regel dafür oder Bootstrap 5 lädt nicht. Prüfen Sie die Schreibweise und fragen Sie dann Ihren Webmaster nach der Regel oder nach **Sideload Bootstrap files**. - **Die Klasse Ihres Teams ändert nur manches.** Ein **Style**-Panel-Wert auf derselben Eigenschaft schlägt eine Theme-Klasse. Leeren Sie diesen Wert im **Style**-Panel. - **Der Button springt an die falsche Stelle.** Zwei Elemente teilen sich die ID und das erste gewinnt. Geben Sie jedem Element seine eigene ID. - **Die Abschnittsüberschrift versteckt sich unter dem fixierten Header.** DXPR Builder erkennt Ihren Header nicht. Ein Webmaster stellt **Scroll offset selector** unter **General Settings** > **Advanced Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) auf den CSS-Selektor des Headers. ## Wie geht es weiter? - [Responsives Design](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design): Planen, welche Elemente auf jeder Bildschirmgröße erscheinen.