Eine einseitige Scroll-Website erstellen.

DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden

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.

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.

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 <front>#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.

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.

Wie geht es weiter?