Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4

Wie man eine Landing Page-Vorlage mit Bootstrap 4 erstellt

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Tutorial machen wir unsere Tour durch Bootstrap 4. Wir lernen, wie Sie damit eine reaktionsschnelle Zielseite erstellen.

Womit wir beginnen werden

Bevor wir wie immer beginnen, werfen wir einen kurzen Blick auf unser Demo-Projekt:

Überprüfen Sie unbedingt die Vollbildversion und ändern Sie die Größe Ihres Browserfensters, um festzustellen, wie sich das Layout abhängig von der Größe des Ansichtsfensters ändert.

Hinweis: In diesem Lernprogramm wird davon ausgegangen, dass Sie mit Bootstrap 4 vertraut sind. Sie müssen wissen, wie das Rastersystem und die Flex-Komponente funktionieren. Darüber hinaus wird Ihnen ein gutes Verständnis der responsiven Haltepunkte gute Dienste leisten.

Um Ihnen zu helfen, sich auf dem Laufenden zu halten, bieten wir hier bei Tuts+ eine Reihe von Kursen an, die sich auf Bootstrap 4 konzentrieren.

  • Bootstrap 4
    Das ist Bootstrap 4
    Adi Purdila
  • Bootstrap
    Ein Leitfaden für Anfänger zum neuen Bootstrap 4 Grid-System
    Adi Purdila
  • Bootstrap
    Arbeiten mit Bootstrap 4 und Sass
    Adi Purdila

Die Vermögenswerte

In diesem Projekt werden einige Assets verwendet. Hier finden Sie sie:

  • Für die in dieser Demo verwendeten Symbole habe ich die Font Awesome-Bibliothek in unseren Stift integriert.
  • Alle Bilder stammen von Unsplash.

1. Legen Sie das Markup fest

Lassen Sie uns anfangen! Wir machen alles mit typischen Seitenmarkierungen: eine Kopfzeile, eine Fußzeile und fünf Abschnitte:

2. Definieren Sie einige grundlegende Stile

Bevor wir uns die einzelnen Teile unserer Seite genauer ansehen, definieren wir zunächst einige CSS-Stile. Das sind oft Rücksetzregeln zusammen mit einigen Hilfsklassen, die wir später an die Zielelemente anhängen werden:

Hinweis: Wir werden versuchen, unser CSS so leicht wie möglich zu halten und die integrierten Klassen von Bootstrap 4 zu nutzen.

3. Erstellen Sie den Header

Der Seitenkopf hat:

  • Das Logo
  • Die Navigation
  • Die Kontaktinformationen

Wenn Sie die von Bootstrap definierten Haltepunkte verwenden, sollte es auf besonders großen Bildschirmen folgendermaßen aussehen:

The header layout on extra large screensThe header layout on extra large screensThe header layout on extra large screens

Auf den großen Bildschirmen:

The header layout on large screensThe header layout on large screensThe header layout on large screens

Auf den kleineren Bildschirmen sieht es anders aus:

The header layout on small screensThe header layout on small screensThe header layout on small screens

Header HTML

Um das Header-Markup zu erstellen, nutzen wir die von Bootstrap bereitgestellte navbar-Komponente.

So sieht das aus:

Header CSS

Standardmäßig hat nur der mobile Header (Off-Canvas-Menü) eine Hintergrundfarbe.

In einem nächsten Abschnitt wird jedoch erläutert, wie Sie dem Desktop-Header beim Scrollen der Seite eine Hintergrundfarbe hinzufügen.

4. Erstellen Sie die Heldensektion

Der erste Abschnitt unserer Seite enthält:

  • Ein Vollbild-Hintergrundbild
  • Eine Überschrift und zwei Handlungsaufforderungstasten, die vertikal über dem Bild zentriert sind.

So sieht es aus:

The section layoutThe section layoutThe section layout

Abschnitt #1 HTML

Abschnitt #1 CSS

Aus Gründen der Lesbarkeit erstellen wir eine Überlagerung über dem Hintergrund. Wir werden dann sicherstellen, dass der Text über dieser Überlagerung platziert wird.

Ähnlich wie in header werden wir später erläutern, wie dieser Abschnitt bei jedem Bildlauf der Seite skaliert wird.

5. Erstellen Sie den Übersichtsabschnitt

Der zweite Abschnitt unserer Seite enthält einige Details, die einen schnellen Überblick bieten, sobald unsere Besucher den Helden aufgenommen haben:

  • Eine Überschrift
  • Vier Textblöcke mit ihren Symbolen
  • Eine Handlungsaufforderungstaste

Auf großen Bildschirmen und höher sollte es so aussehen:

The section layout on large screensThe section layout on large screensThe section layout on large screens

Auf kleinen und mittleren Bildschirmen:

The section layout on small and medium screensThe section layout on small and medium screensThe section layout on small and medium screens

Schließlich werden auf extra kleinen Bildschirmen alle Spalten gestapelt:

The section layout on extra small screensThe section layout on extra small screensThe section layout on extra small screens

Abschnitt #2 HTML

Stapeln von Symbolen

Um mehrere Symbole in unseren Spalten zu stapeln, nutzen wir die mit Font Awesome gebündelten Stile. Auf diese Weise können wir ein weißes Symbol über ein farbiges Kreissymbol stapeln.

Stacking multiple icons using Font Awesome library

Sie sehen das Markup für die erste Spalte. Die beiden <i> Elemente sind nebeneinander inline, aber mit den fa-stack-Klassen werden sie gestapelt.

6. Erstellen Sie den Abschnitt Geteilte Blöcke

Der dritte Abschnitt unserer Seite enthält zwei Vollbildzeilen. Jede Zeile ist geteilt und enthält eine Bildspalte und eine Textspalte. Der Inhalt innerhalb der Textspalten muss vertikal zentriert sein.

Auf mittleren Bildschirmen und darüber sieht das Abschnittslayout folgendermaßen aus:

The section layout on medium screens and aboveThe section layout on medium screens and aboveThe section layout on medium screens and above

Auf schmalen Bildschirmen sollten sie so aussehen:

The section layout on small screensThe section layout on small screensThe section layout on small screens

Abschnitt #3 HTML

Sie werden die Reihenfolge der obigen Blöcke bemerken. Auf schmalen Bildschirmen müssen sich Text- und Bildblöcke abwechseln: Bild, Text, Bild, Text. Dфы wäre ohne die unten verwendeten Flexbox-order-klassen nicht möglich:

7. Erstellen Sie den Abschnitt Bildergalerie

Der vierte Abschnitt unserer Seite enthält:

  • Eine Überschrift
  • Fünf Bildspalten mit ihrer Beschreibung
  • Eine Handlungsaufforderungstaste

Auf mittleren Bildschirmen und darüber sieht es so aus:

The section layout on medium screens and aboveThe section layout on medium screens and aboveThe section layout on medium screens and above

Auf kleinen Bildschirmen ändert sich das Layout:

The section layout on small screensThe section layout on small screensThe section layout on small screens

Auf extra kleinen Bildschirmen sind alle Bildspalten gestapelt:

The section layout on extra small screensThe section layout on extra small screensThe section layout on extra small screens

Abschnitt #4 HTML

Das Markup, das für das Festlegen des Spalteninhalts verantwortlich ist, sieht so aus:

Abschnitt #4 CSS

Am Anfang sind alle Bilder verschwommen und grau. Jedes Mal, wenn Sie mit der Maus über ein Bild fahren, werden die Bildskalen und die Standardfilter entfernt.

Dies sind die Stile, um dies zu erreichen:

8. Erstellen Sie den Abschnitt Handlungsaufforderung

Der fünfte Abschnitt unserer Seite enthält:

  • Ein Textblock
  • Eine Handlungsaufforderungstaste

Handlungsaufforderungen sind auf Zielseiten von entscheidender Bedeutung, da sie Besucher dazu ermutigen, etwas zu tun, anstatt zu gehen. Das von uns verwendete Zeigersymbol macht den CTA besonders überzeugend. Auf mittleren Bildschirmen und darüber sieht es wie folgt aus:

The section layout on medium screens and aboveThe section layout on medium screens and aboveThe section layout on medium screens and above

Auf kleineren Bildschirmen sind jedoch alle Elemente gestapelt:

The section layout on small screensThe section layout on small screensThe section layout on small screens
Abschnitt #5 HTML

9. Erstellen Sie die Fußzeile

Wir haben das Ende unserer Zielseitenvorlage erreicht! Die Seitenfußzeile enthält:

  • Ein Element mit Copyright-Informationen
  • Ein Element mit Links zu verschiedenen Seiten

Auf mittleren Bildschirmen und darüber sollte es folgendermaßen aussehen:

The footer layout on medium screens and aboveThe footer layout on medium screens and aboveThe footer layout on medium screens and above

Auf kleineren Bildschirmen ändert sich das Layout wie hier:

The footer layout on small screensThe footer layout on small screensThe footer layout on small screens
Fußzeile HTML

Fußzeile CSS

Die Ausrichtung der Fußzeilenlinks ändert sich je nach Größe des Ansichtsfensters. Hier sind die Regeln, die dieses Verhalten bestimmen:

Schauen wir uns an dieser Stelle unsere Seite an:

10. Fügen Sie einige JavaScript-Aktionen hinzu

Es ist jetzt an der Zeit, JavaScript zu schreiben, um das Erlebnis unserer Seite zu verbessern.

Auf Bildlaufanimationen

Wenn die Seite gescrollt wird, sollte das body-Element die scroll-Klasse erhalten. Diese Klasse ist für folgende Dinge verantwortlich:

  • Fügen Sie einer Hintergrundfarbe zum Header hinzu. Beachten Sie, dass das Verhalten nur auf mittleren Bildschirmen und höher auftreten sollte. Denken Sie daran, dass wir bereits eine Hintergrundfarbe für das mobile Menü festgelegt haben.
  • Skalieren des ersten Abschnitts.

Lassen Sie uns die entsprechenden Stile noch einmal kurz betrachten:

Und hier ist der erforderliche JavaScript-Code:

Bootstraps Scrollspy wird ausgelöst

Danach möchten wir den aktiven Menü-Link abhängig von der Bildlaufposition automatisch aktualisieren.

Dazu nutzen wir das Scrollspy-Plugin von Bootstrap.

Im Anschluss an die Dokumentation müssen wir das body-Element anpassen, um das Scrollspy-Verhalten für die Navigationselemente auszulösen. Genauer:

  • Geben Sie ihm position:relative
  • Add data-spy="scroll"
  • Fügen Sie data-target="#navbar" hinzu, wobei #navbar die ID unseres navbar-Elements ist. Innerhalb dieses Elements befinden sich die Menü-Links, die active Klasse von Scrollspy erhalten sollen.
  • Add data-offset="72" wobei 72 die Höhe des Desktop-Headers sowie die Höhe des mobilen Headers ist, wenn das Menü geschlossen wird. Diese Option bestimmt den Menülink, der aktiv wird, sobald der entsprechende Abschnitt 72 Pixel vom oberen Rand des Ansichtsfensters entfernt ist.

Hier sind die erforderlichen Änderungen der Seitenstruktur:

Eine Sache zu beachten ist, dass die Dinge schwierig werden, wenn reaktionsfähige Offsets erforderlich sind. Das heißt, wenn die Kopfzeile je nach Bildschirm eine unterschiedliche Höhe hat (aufgrund der Schriftgröße). In einem solchen Fall funktioniert es nicht, dem data-offset attribut einen statischen Wert zuzuweisen und das Plugin über JavaScript (zusammen mit benutzerdefiniertem Code) zu initialisieren. Dies würde den Rahmen unseres Tutorials an dieser Stelle sprengen.

Hinzufügen von reibungslosem Scrollen zu Logo- und Menü-Links

Schließlich sollte der Browser jedes Mal, wenn wir auf das Logo oder einen Menülink klicken, reibungslos zum entsprechenden Abschnitt scrollen.

Dank der animate-Methode von jQuery können wir diese Funktionalität problemlos erreichen. Hier ist der erforderliche JavaScript-Code:

Beachten Sie die Nummer 71 im Code. Diese Zahl wird durch Subtrahieren von 1 von 72 abgeleitet (denken Sie daran, dass dies die Kopfhöhe ist).

Mein erster Versuch war, die Nummer 72 in den obigen Code einzufügen. In einigen Browsern ist jedoch ein Problem aufgetreten (z.B. hat Firefox-Chrome funktioniert). Wenn auf einen Link im Header-Menü geklickt wurde, bekommt dieser Link nicht sofort die erwartete active Klasse (die von der Scrollspy-Komponente stammt). Das hat funktioniert, sobald ich um ein Pixel nach unten gescrollt habe. In diesem Sinne bestand eine einfache Lösung darin, die ursprüngliche Zahl um eins zu verringern.

Abschluss

Das war's alles, Leute! Das war eine lange Reise, aber hoffentlich haben Sie die Mühe wert gefunden. Ich hoffe wirklich, dass diese Übung Ihnen genug Wissen und Inspiration gegeben hat, um mit Bootstrap 4 fantastische Zielseiten zu erstellen. Vergessen Sie nicht, die Vollbildversion zu überprüfen und sicherzustellen, dass sie zu Ihrer Arbeit passt.

In Bezug auf diese Demo könnte ein nächster Schritt darin bestehen, sie dynamisch zu gestalten, indem sie mit einer serverseitigen Sprache verbunden wird. Zum Beispiel wäre es großartig, ein WordPress-Theme basierend auf diesem Layout zu erstellen.

Vielen Dank für das Lesen!

Weitere HTML-Landingpage-Ressourcen

  • Startseiten
    Landing Page Design-Prinzipien
    Adi Purdila
  • HTML
    Wie man schnell eine großartige Landing Page mithilfe von Vorlagen erstellen kann
    Brenda Barron
  • Startseiten
    Erstellen einer Landing Page, die konvertiert
    Craig Campbell
  • Startseiten
    Über 20 großartige Landingpage-Vorlagen für Produkte (Designbeispiele für 2018)
    Brenda Barron
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.