Wie man eine Landing Page-Vorlage mit Bootstrap 4 erstellt

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:

Please accept marketing cookies to load this content.

Ü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:

<header>...</header>
<main>
  <!-- Banner Section -->
  <section>...</section>
  <!-- Process Section -->
  <section>...</section>
  <!-- Featured Destinations Section -->
  <section>...</section>
  <!-- Popular Destinations Section -->
  <section>...</section>
  <!-- Request a Quote Section -->
  <section>...</section>
</main>
<footer>...</footer>

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:

:root {
  --lightblue: #F6F9FC;
  --red: #d64041;
}

a,
a:hover {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

.bg-lightblue {
  background: var(--lightblue);
}

.bg-red {
  background: var(--red);
}

.text-red {
  color: var(--red);
}

.container-fluid-max {
  max-width: 1440px;
}

.cover {
  background: no-repeat center/cover;
}

.p-15 {
  padding: 15px;
}

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 screens

Auf den großen Bildschirmen:

Auf den kleineren Bildschirmen sieht es anders aus:

Header HTML

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

So sieht das aus:

<header class="fixed-top page-header">
  <div class="container-fluid container-fluid-max">
    <nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="#home">...</a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-lg-between" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="">...</a>
          </li> 
          <!-- more list items here -->
        </ul>
        <div class="text-white">
          <a href="" class="mr-2">
            <i class="fas fa-phone"></i>
            <div class="d-none d-xl-inline">...</div>
          </a>
          <a href="">
            <i class="fas fa-envelope"></i>
            <div class="d-none d-xl-inline">...</div>
          </a>
        </div>
      </div>
    </nav>
  </div>
</header>

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.

.scroll .page-header {
  background: var(--red);
}

.page-header {
  transition: background 0.5s ease-in-out;
}

.page-header .navbar {
  padding: 1rem 0;
}

.page-header .navbar-toggler {
  border-color: var(--white); 
}

@media screen and (max-width: 991px) {
  .page-header {
    background: var(--red);
  }
}

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:

Abschnitt #1 HTML

<section id="home" class="d-flex align-items-center position-relative vh-100 cover hero" style="background-image:url(IMG_SRC);">
  <div class="container-fluid container-fluid-max">
    <div class="row">
      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
        <h1 class="text-white">...</h1>
        <div class="mt-3">
          <a class="btn bg-red text-white mr-2" href="" role="button">...</a>
          <a class="btn bg-red text-white" href="" role="button">...</a>
        </div> 
      </div>
    </div>
  </div>
</section>

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.

.scroll .hero {
  transform: scale(0.98);
}

.hero {
  background-attachment: fixed;
  transition: transform 0.5s ease-in-out;
}

.hero::after {
  content: ’’;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.hero .container-fluid {
  z-index: 10;
}

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:

Auf kleinen und mittleren Bildschirmen:

The section layout on small and medium screens

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

The section layout on extra small screens

Abschnitt #2 HTML

<section id="process" class="process">
  <div class="container-fluid container-fluid-max">
    <div class="row text-center py-5">
      <div class="col-12 pb-4">
        <h2 class="text-red">...</h2>
      </div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 pt-3">
        <a class="btn bg-red text-white" target="_blank" href="" role="button">...</a>
      </div>
    </div>
  </div>
</section>

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.

1	<div class="col-12 col-sm-6 col-lg-3">
2	<span class="fa-stack fa-2x">
3	<i class="fas fa-circle fa-stack-2x text-red"></i>
4	<i class="fas fa-map-marked fa-stack-1x text-white"></i>
5	</span>
6	<h3 class="mt-3 text-red h4">...</h3>
7	<p>...</p>
8	</div>

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 above

Auf schmalen Bildschirmen sollten sie so aussehen:

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:

<section id="featured-destinations" class="featured-destinations bg-lightblue">
  <div class="row no-gutters">
    <div class="col-12 col-md-6 d-flex align-items-center order-1 order-md-0">
      <div class="p-15">...</div>
    </div>
    <div class="col-12 col-md-6 order-0 order-md-1">
      <div class="vh-100 cover" style="bakground-image:url(IMG_SRC);">...</div>
    </div>
    <div class="col-12 col-md-6 order-2">
      <div class="vh-100 cover" style="bakground-image:url(IMG_SRC);">...</div>
    </div>
    <div class="col-12 col-md-6 d-flex align-items-center order-3">
      <div class="p-15">...</div>
    </div>
  </div>
</section>

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:

Auf kleinen Bildschirmen ändert sich das Layout:

Auf extra kleinen Bildschirmen sind alle Bildspalten gestapelt:

Abschnitt #4 HTML

<section id="popular-destinations" class="popular-destinations py-5">
  <div class="container-fluid container-fluid-max">
    <div class="row">
      <div class="col-12">
        <h2 class="pb-3 text-red">...</h2>
      </div>
      <div class="col-12 col-sm-6 col-md-4">...</div>
      <div class="col-12 col-sm-6 col-md-4">...</div>
      <div class="col-12 col-sm-6 col-md-4">...</div>
      <div class="col-12 col-sm-6">...</div>
      <div class="col-12 col-md-6">...</div>
    </div>
    <div class="row">
      <div class="col text-center">
        <a class="btn bg-red text-white" href="" role="button">...</a>
      </div>    
    </div>
  </div>
</section>

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

<div class="col-12 col-sm-6 col-md-4">
  <a href="" class="text-white">
    <figure class="position-relative overflow-hidden">
      <img class="img-fluid" src="IMG_SRC" alt="">
      <figcaption class="d-flex align-items-center justify-content-center position-absolute">
        <h3>...</h3>
      </figcaption>
    </figure>
  </a>
</div>

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:

.popular-destinations figure {
  margin-bottom: 30px;
}

.popular-destinations figcaption {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.popular-destinations img {
  filter: grayscale(100%) blur(3px);
  transition: transform 0.5s, filter 0.75s;
}

.popular-destinations a:hover img {
  transform: scale(1.25);
  filter: none;
}

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:

Auf kleineren Bildschirmen sind jedoch alle Elemente gestapelt:

Abschnitt #5 HTML

<section id="request-quote" class="py-5 request-quote bg-lightblue">
  <div class="container-fluid container-fluid-max">
    <div class="row justify-content-center">
      <div class="col-12 col-md-auto py-3 text-center">
        <h2 class="mb-0 text-red">...</h2>
        <p class="mb-0 h4 text-red font-weight-normal">...</p>
      <div>
      <div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
        <a class="btn bg-red text-white font-weight-bold" href="" role="button">
          ... 
          <i class="ml-1 fas fa-hand-point-right"></i>
        </a>
      </div>
    </div>
  </div>
</section>

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 above

Auf kleineren Bildschirmen ändert sich das Layout wie hier:

Fußzeile HTML

<footer class="py-5 page-footer">
  <div class="container-fluid container-fluid-max">
    <div class="row">
      <div class="col-12 col-md-6 footer-child copyright">...</div>
      <div class="col-12 col-md-6 footer-child footer-links">
        <a href="" class="mr-3">...</a>
        <a href="">...</a>
        <div>
          <small>...</small>
        </div>
      </div>
    </div>
  </div>
</footer>

Fußzeile CSS

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

.page-footer .footer-links {
  text-align: right;
}

@media screen and (max-width: 767px) {
  .page-footer .footer-child {
    text-align: center;
  }
}

Schauen wir uns an dieser Stelle unsere Seite an:

Please accept marketing cookies to load this content.

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:

.scroll .page-header {
  background: var(--red);
}

.scroll .hero {
  transform: scale(0.98);
}

.page-header {
  transition: background 0.5s ease-in-out;
}

.hero {
  transition: transform 0.5s ease-in-out;
}

@media screen and (max-width: 991px) {
  .page-header {
    background: var(--red);
  }
}

Und hier ist der erforderliche JavaScript-Code:

const $body = $("body");
const $header = $(".page-header");
const scrollClass = "scroll";

$(window).on("scroll", () => {
  if (this.matchMedia("(min-width: 992px)").matches) {
    const scrollY = $(this).scrollTop();
    scrollY > 0
      ? $body.addClass(scrollClass)
      : $body.removeClass(scrollClass);
  } else {
    $body.removeClass(scrollClass);
  }
});

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:

<body data-spy="scroll" data-target="#navbar" data-offset="72" position-relative>
  ...
  <nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
    ...
  </nav>
  ...
</body>

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:

$(".page-header .nav-link, .navbar-brand").on("click", function(e) {
  e.preventDefault();
  const href = $(this).attr("href");
  $("html, body").animate({
    scrollTop: $(href).offset().top - 71
  }, 600);
});

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