--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/einseitige-website' title: 'Eine einseitige Scroll-Website erstellen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:42:08+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Hier bauen Sie eine ganze Website auf einer Seite: einen bildschirmhohen Hero, dessen Buttons zu den Abschnitten Über uns, Leistungen und Kontakt darunter springen. Jeder Abschnitt trägt eine HTML ID, das Ziel seines Buttons. Nutzen Sie sie für ein kleines Unternehmen, eine Kampagne oder ein Portfolio. Für eine Seite rund um ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen. Das Video baut die Website eines Designstudios namens Studio Nord. tags: - 'Connect Drupal features' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:03:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Eine einseitige Scroll-Website erstellen' description: |- Hier bauen Sie eine ganze Website auf einer Seite: einen bildschirmhohen Hero, dessen Buttons zu den Abschnitten Über uns, Leistungen und Kontakt darunter springen. Jeder Abschnitt trägt eine HTML ID, das Ziel seines Buttons. Nutzen Sie sie für ein kleines Unternehmen, eine Kampagne oder ein Portfolio. Für eine Seite rund um ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen. Das Video baut die Website eines Designstudios namens Studio Nord. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:42:08+0000' dateModified: '2026-10-24T20:03:43+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/tutorials/einseitige-website' articleSection: 'Drupal-Funktionen verbinden' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/einseitige-website' description: |- Hier bauen Sie eine ganze Website auf einer Seite: einen bildschirmhohen Hero, dessen Buttons zu den Abschnitten Über uns, Leistungen und Kontakt darunter springen. Jeder Abschnitt trägt eine HTML ID, das Ziel seines Buttons. Nutzen Sie sie für ein kleines Unternehmen, eine Kampagne oder ein Portfolio. Für eine Seite rund um ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen. Das Video baut die Website eines Designstudios namens Studio Nord. 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) /[Website verwalten](/de/hc/documentation/learn-dxpr-builder/manage) /[Drupal-Funktionen verbinden](/de/hc/documentation/learn-dxpr-builder/integrations) # Eine einseitige Scroll-Website erstellen. DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden ## In diesem Leitfaden Verwandte Leitfäden - [Einen Hero-Abschnitt gestalten](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/hero-abschnitt) - [Eine Marketing-Landingpage erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/marketing-landingpage) - [Auf Abschnitte verlinken und Stile per Klassen wiederverwenden](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css) Hier bauen Sie eine ganze Website auf einer Seite: einen bildschirmhohen Hero, dessen Buttons zu den Abschnitten Über uns, Leistungen und Kontakt darunter springen. Jeder Abschnitt trägt eine **HTML ID**, das Ziel seines Buttons. Nutzen Sie sie für ein kleines Unternehmen, eine Kampagne oder ein Portfolio. Für eine Seite rund um ein Angebot folgen Sie stattdessen [Eine Marketing-Landingpage erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing). Das Video baut die Website eines Designstudios namens Studio Nord. ## Bevor Sie beginnen - Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**. - Die Medienbibliothek enthält ein breites Foto für den Hero und ein Teamfoto. - Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) und klicken Sie auf **Save**. - Neue Elemente landen oben in ihrem Abschnitt oder ihrer Spalte, sodass die Hero-Buttons vom letzten zum ersten hineinkommen. ## Schritt 1: Den Hero bauen 1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**. 2. Fahren Sie über den Abschnitt und öffnen Sie **More** > **Settings**. Setzen Sie **HTML ID** auf `hero` und wählen Sie unter **HTML classes** **Align text center**. 3. Schalten Sie **100% height** ein, sodass der Abschnitt den Bildschirm füllt, und **Vertical centering**, sodass der Inhalt in der Mitte sitzt. 4. Öffnen Sie das Panel **Style**. Klicken Sie unter **Background image** auf **Select Image**, haken Sie ein Foto an und klicken Sie auf **Insert selected**. Setzen Sie **Background style** auf **Cover**, wählen Sie das Navyblau als **Background** und Weiß als **Font color** und klicken Sie dann auf **Save**. 5. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Button**. Setzen Sie **Title** auf „Kontakt“, **Link** auf `#contact` und **Type** auf **Light**, und klicken Sie dann auf **Save**. Fügen Sie zwei weitere Buttons genauso hinzu: „Leistungen“ mit `#services`, dann „Über uns“ mit `#about`. Jeder landet über dem letzten. 6. Klicken Sie erneut auf **+** und wählen Sie **Text**; er landet über den Buttons. Geben Sie „Studio Nord“ als **Heading 2** ein und fügen Sie den Slogan hinzu. Setzen Sie **Font color** im Panel **Style** auf Weiß und klicken Sie auf **Save**. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe [SEO-freundliche Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2). ## Schritt 2: Den Über-uns-Abschnitt hinzufügen 1. Fahren Sie über den Hero und klicken Sie auf **Add Section Below**. Öffnen Sie das **More** > **Settings** des neuen Abschnitts, setzen Sie **HTML ID** auf `about` und klicken Sie auf **Save**. 2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten. 3. Klicken Sie in der linken Spalte auf **+** und wählen Sie **Image**. Klicken Sie auf **Select Image**, haken Sie ein Foto an und klicken Sie auf **Insert selected**. Geben Sie das **Alt attribute** im Panel **SEO** ein und klicken Sie auf **Save**. 4. Klicken Sie in der rechten Spalte auf **+** und wählen Sie **Text**. Geben Sie „Über uns“ als **Heading 2** ein, fügen Sie Ihre Geschichte hinzu und klicken Sie auf **Save**. ## Schritt 3: Den Leistungsabschnitt hinzufügen 1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu und öffnen Sie sein **More** > **Settings**. Setzen Sie **HTML ID** auf `services`, wählen Sie **Align text center** unter **HTML classes** und ein hellgraues **Background** im Panel **Style**. Klicken Sie auf **Save**. 2. Fügen Sie eine **Row** hinzu, klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**. 3. Klicken Sie in der ersten Spalte auf **+** und wählen Sie **Text**. Geben Sie „Branding“ als **Heading 3** ein, fügen Sie eine Zeile hinzu und klicken Sie auf **Save**. 4. Klicken Sie in derselben Spalte auf **+** und wählen Sie **Icon**; es landet über dem Text. Wählen Sie das Set **Font Awesome Free Solid**, suchen Sie nach `pen-nib` und klicken Sie auf das Icon. Setzen Sie **Size** auf **Very Large (3x)**, öffnen Sie **Icon utilities**, setzen Sie **Style** auf **Circle** und klicken Sie auf **Save**. 5. Wiederholen Sie das für „Websites“ mit `laptop-code` und „Analytics“ mit `chart-pie`. ## Schritt 4: Den Kontaktabschnitt hinzufügen 1. Fügen Sie einen vierten Abschnitt hinzu und öffnen Sie sein **More** > **Settings**. Setzen Sie **HTML ID** auf `contact`, wählen Sie **Align text center** unter **HTML classes** und klicken Sie auf **Save**. 2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Social links**. Geben Sie `linkedin` als Marke der ersten Zeile ein und fügen Sie die Profil-URL ein, dann `instagram` und seine URL in der zweiten. Setzen Sie **Style** auf **Circle** und **Size** auf **2x**, und klicken Sie dann auf **Save**. 3. Klicken Sie erneut auf **+** und wählen Sie **Button**; er landet über den Links. Setzen Sie **Title** auf „Schreiben Sie uns“, **Link** auf `mailto:hello@studionord.example` und lassen Sie **Type** auf **Primary**, und klicken Sie dann auf **Save**. 4. Klicken Sie erneut auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie „Kontakt aufnehmen“ als **Heading 2** und Ihre E-Mail-Adresse und Telefonnummer darunter ein, und klicken Sie dann auf **Save**. ## Schritt 5: Speichern und Vorschau 1. Klicken Sie in der Builder-Symbolleiste auf **Save**. 2. Öffnen Sie das Ansichtsmenü (das **Augen-Icon**), wählen Sie **Preview** und klicken Sie auf einen Hero-Button, etwa **Kontakt**. ## Weiter gehen Nicht im Video gezeigt: - **Fixiertes Menü**: Erstellen Sie ein Menü unter **Structure** > **Menus** > **Add menu** mit einem Link pro Abschnitt, etwa `/studio-nord#about`, oder `#about` auf der Startseite. Platzieren Sie es in der Header-Region unter **Structure** > **Block layout**. Schalten Sie in DXPR Theme **Sticky Header** unter **Appearance** > **Settings** > **DXPR Theme** ein. - **Startseite**: Machen Sie die Seite unter **Configuration** > **System** > **Basic site settings** zu Ihrer Startseite. - **Kontaktformular**: Fügen Sie statt des Einleitungstextes ein Formular aus dem Tab **Drupal Blocks** ein; siehe [Formulare zu Seiten hinzufügen](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms). ## Was Sie sehen Das Foto füllt den Bildschirm mit „Studio Nord“, dem Slogan und drei hellen Buttons. Ein Klick auf einen Button scrollt die Seite sanft nach unten zu seinem Abschnitt. Über uns zeigt das Teamfoto neben der Geschichte, Leistungen drei Icons im Kreis auf Grau, und Kontakt die Überschrift „Kontakt aufnehmen“ und den Button **Schreiben Sie uns** über zwei runden Social-Media-Icons. ## Wenn Sie die Seite nicht wie gezeigt sehen - **Ein Button springt nicht zu seinem Abschnitt.** Sein **Link** passt nicht zur **HTML ID** des Abschnitts. Der Link ist `#` plus genau dieselbe ID, etwa `#about` für die ID `about`. - **Ein Abschnitt landet unter Ihrem fixierten Header.** Der Builder kennt die Höhe des Headers nicht. Setzen Sie unter **Advanced Settings** unter **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) **Scroll offset selector** auf den CSS-Selektor Ihres Headers. - **Ein Social-Media-Link zeigt „No matching brand icon found“.** Die Marke ist kein bekannter Icon-Name. Geben Sie sie in Kleinbuchstaben ein, etwa `linkedin` oder `instagram`. - **Ihre Änderungen sind nach einem Neuladen weg.** Sie haben die Seite verlassen, bevor Sie auf **Save** in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe [Änderungen werden nicht gespeichert](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl). ## Wie geht es weiter? - [Hero-Abschnitt](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section) für Overlay- und Parallax-Optionen - [Landingpage](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) für eine Kampagnenseite - [Auf Abschnitte verlinken und Stile per Klassen wiederverwenden](/de/hc/documentation/learn-dxpr-builder/element-settings/custom-css) für mehr über HTML-IDs