7 days of PowerPoint templates, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Business
  2. HTML

So erstellen Sie schnell eine responsive HTML5 Bootstrap-Landing Page

Scroll to top
Read Time: 10 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Wenn Sie sich auf die Einführung einer neuen Website, eines Produkts oder einer Dienstleistung vorbereiten, benötigen Sie einen speziellen Ort, um potenzielle Kunden und Kunden zu senden. Ihre Website ist jedoch möglicherweise noch nicht bereit, neue Besucher willkommen zu heißen. In diesen Fällen ist eine HTML5-Landingpage-Vorlage die perfekte Wahl.

Eine HTML5-Vorlage ist schnell und einfach zu installieren. Im Gegensatz zu einem CMS, das möglicherweise eine komplexe Programmiersprache verwendet, ist eine HTML-Vorlage selbst für Anfänger leicht zu bearbeiten.

In diesem Tutorial erkläre ich die Vorteile der Verwendung von HTML-Landingpage-Vorlagen und zeige Ihnen, wie Sie eine einrichten. Keine Sorge: Es geht schnell und schmerzlos.

Vorteile der Verwendung von HTML-Landingpage-Vorlagen

Wie bereits erwähnt, können Sie Landing Pages relativ schnell installieren und einrichten. Es gibt jedoch noch ein paar andere Vorteile bei der Verwendung eines:

  • Sie lassen sich leicht mit Ihren Inhalten und bevorzugten Farben anpassen.
  • Dank des einfacheren Codes sind sie leichtgewichtig, was bedeutet, dass Ihre Zielseite schnell geladen wird.
  • Schließlich erfordern HTML-Vorlagen keine zusätzliche Wartung oder Aktualisierungen, sodass Sie sich keine Sorgen machen müssen, wertvolle Zeit vor der Veröffentlichung zu verlieren.

Nachdem ich nun die Vorteile von HTML-Vorlagen behandelt habe, tauchen wir in das Tutorial ein.

So verwenden Sie eine HTML-Landingpage-Vorlage

Für die Zwecke dieses Tutorials verwende ich die Pure-Vorlage. Es ist eine saubere und minimalistische Vorlage, die für eine Vielzahl von Zwecken verwendet werden kann und mit einem funktionierenden Kontaktformular und einem MailChimp-Anmeldeformular geliefert wird.

The Pure HTML templateThe Pure HTML templateThe Pure HTML template

Neben der Vorlage gibt es noch einige andere Tools, die Sie benötigen, damit Sie die Vorlage ändern und Ihre Website live schalten können:

1. Ein Domainname und ein Hosting-Unternehmen

Bevor Sie eine Vorlage für Ihre Zielseite auswählen, müssen Sie einen Domainnamen erwerben und sich für einen Hosting-Plan anmelden. Heutzutage können Sie ein Hosting-Paket bereits ab 5 USD / Monat erwerben und die meisten Hosting-Unternehmen stellen Ihnen den Domainnamen kostenlos zur Verfügung, wenn Sie sich für ihren Plan anmelden. Einige Hosting-Unternehmen bieten unbegrenzten Speicherplatz und unbegrenzte Bandbreite an, andere begrenzen die verfügbaren Ressourcen.

Stellen Sie sicher, dass Sie recherchieren und ein paar unabhängige Bewertungen über Hosting-Unternehmen lesen, die Ihr Interesse wecken. Zu sehen, wie zufrieden ihre früheren Kunden sind, kann ein guter Indikator für die angebotenen Dienstleistungen und die Qualität des Kundensupports sein.

2. Ein FTP-Client

Der nächste Punkt auf Ihrer Liste sollte ein FTP-Client sein. Sie können sich mit Ihrem Hosting-Server verbinden und die Vorlagendateien hochladen.

Es gibt viele FTP-Clients, die für verschiedene Betriebssysteme verfügbar sind. Eine beliebte FTP-Plattform, die auf allen Plattformen verwendet werden kann, ist FileZilla. Es ist auch kostenlos herunterzuladen und zu verwenden.

3. Ein Code-Editor

Sie benötigen einen Code-Editor, um Ihre Vorlage zu ändern. Die Verwendung eines Code-Editors erleichtert Ihnen das Auffinden des Codes, den Sie bearbeiten müssen, da er spezielle Syntaxhervorhebungen verwendet. Sie können Notepad++ verwenden, wenn Sie ein Windows-Benutzer sind, oder TextWrangler, wenn Sie ein Mac-Benutzer sind. Eine andere Möglichkeit ist die Verwendung von Sublime Text 3, das sowohl auf Windows- und Mac-Computern als auch unter Linux verwendet werden kann und eine kostenlose Testversion bietet.

4. Die HTML-Vorlage und der Inhalt für Ihre Bootstrap-Landingpage

Schließlich müssen Sie eine Landing Page Vorlage kaufen und herunterladen und den Inhalt vorbereiten, der auf Ihrer Zielseite angezeigt wird. Auf Envato Elements finden Sie viele HTML-Landingpage-Vorlagen, die speziell für Landingpages entwickelt wurden. Sobald Sie eine Vorlage gefunden haben, die Ihnen gefällt, kaufen Sie sie und laden Sie sie auf Ihren Computer herunter. Stellen Sie sicher, dass Sie den Ordner entpacken und an einem Ort speichern, an dem Sie leicht darauf zugreifen können.

Sammeln Sie alle Bilder und Texte, die Sie zu Ihrer Zielseite hinzufügen möchten. Wenn Sie alles an einem Ort aufbewahren, können Sie es leichter der Vorlage hinzufügen und die Bilder auf Ihren Server übertragen.

So passen Sie Ihre HTML-Landingpage-Vorlagen an

Wenn alles vorhanden ist, ist es an der Zeit, die Vorlage anzupassen und Ihre Informationen hinzuzufügen. Machen wir uns zunächst mit der Struktur der Vorlage vertraut.

1. Die Struktur der Vorlage

Wie bereits erwähnt, verwende ich die Pure HTML-Landingpage-Vorlage.

Nach dem Entpacken des Ordners sehen Sie, dass die Bootstrap-Landingpage-Vorlage mehrere Unterordner und eine Reihe von HTML-Dateien enthält. So sieht die Struktur aus:

  • CSS-Datei. Dieser Ordner enthält CSS-Dateien, die steuern, welche Schriftarten und Farben in der Vorlage verwendet werden, sowie das Gesamtlayout der Seite. Sie müssen diese Datei bearbeiten, wenn Sie die Standardstile ändern möchten.
  • Dokumentation. Hier finden Sie die Dokumentation zur Pure-Vorlage, die erklärt, wie die Vorlage funktioniert und wie Sie sie anpassen können.
  • Schriftarten. Dieser Ordner enthält alle Symbolschriften
  • Bild Der Ordner img enthält alle Hintergrundbilder, die in der Vorlage verwendet werden
  • Js. Der Javascript-Ordner enthält den gesamten Javascript-Code, der für die ordnungsgemäße Funktion der Vorlage erforderlich ist. Es bietet zusätzliche Funktionen zum Umschalten von Menüs, zum Überprüfen von Formularen und zum Steuern von Animationen. Normalerweise müssen Sie die Dateien in diesem Ordner nicht bearbeiten.
  • Php. Dieser Ordner enthält den PHP-Code, der für die Funktion des Kontaktformulars benötigt wird. Sie müssen diese Dateien bearbeiten, damit Ihr Kontakt- und MailChimp-Formular die Informationen ordnungsgemäß erfasst und übermittelt.
  • Sass. Der Ordner sass enthält alle Variablen für die Stylesheets.

Sie werden auch mehrere HTML-Dateien bemerken, die verschiedene Demoversionen der HTML-Landingpage-Vorlagen darstellen. Sie können jede der HTML-Dateien mit der rechten Maustaste anklicken oder doppelklicken, um sie in Ihrem bevorzugten Browser zu öffnen und zu sehen, wie sie aussehen. Wenn Sie die Demoversion gefunden haben, die Ihnen gefällt, schließen Sie alle anderen Registerkarten.

Template file structureTemplate file structureTemplate file structure

Für den Rest des Tutorials werde ich mit der Vorlage index-normal-scroll-countdown.html arbeiten.

2. Bearbeiten Sie die HTML-Dateien

Da die von Ihnen gewählte HTML-Landingpage-Vorlage jetzt in Ihrem Browser geöffnet ist, ist es an der Zeit, die Informationen durch Ihre eigenen zu ersetzen. Der einfachste Weg, dies zu tun, besteht darin, zu verstehen, welcher Teil des Codes in der Vorlage geändert werden muss. Beginnen wir mit einem Rechtsklick auf die erste Textzeile unter dem Zähler und einem Klick auf Inspect.

Ein neues Panel wird am unteren Rand Ihres Browserfensters angezeigt. Sie werden feststellen, dass der HTML-Code, aus dem unsere Vorlage besteht, auf der linken Seite sowie das CSS, das Stile für die Vorlage auf der rechten Seite bereitstellt, angezeigt wird.

Finding HTML with InspectorFinding HTML with InspectorFinding HTML with Inspector
Wie Sie auf dem Screenshot sehen können, befindet sich der ausgewählte Satz zwischen den <p>-Tags, die Absätze darstellen. Die meisten Tags in HTML bestehen aus Tag-Paaren mit einem öffnenden und einem schließenden Tag. Der Inhalt muss zwischen diesen Tags platziert werden, um auf einer Webseite angezeigt zu werden:

<p class="open-anim opacity-0">Genießen Sie vor dem Start eine <strong>Sehr begrenzte Gelegenheit</strong>, indem Sie unseren Newsletter abonnieren.<br>

Klicken Sie auf die Schaltfläche Weiter, um weitere Informationen zu unserem Projekt zu erhalten.</p>

Um die Dummy-Informationen in der Vorlage zu ersetzen, müssen Sie nur wissen, welche Tags die Informationen enthalten, die Sie bearbeiten möchten. Anschließend können Sie diese Tags im Code-Editor finden und Ihren eigenen Text einfügen.

Nachdem Sie nun wissen, wie Sie Code finden, der bearbeitet werden muss, gehen Sie zurück zum Vorlagenordner, klicken Sie mit der rechten Maustaste auf die von Ihnen gewählte HTML-Datei, wählen Sie Öffnen mit und wählen Sie den Code-Editor, den Sie zuvor heruntergeladen haben. Sie sollten den vollständigen HTML-Code sehen, aus dem Ihre Vorlage besteht.

Scrollen Sie im Code-Editor nach unten, bis Sie dieselbe Codezeile finden, die wir im Browser markiert haben. Es sollte in der Nähe der Linie 75-76 sein. Klicken Sie dann in das <p>-Tag, markieren Sie den Text und ersetzen Sie ihn durch Ihren eigenen.

Editing HTMLEditing HTMLEditing HTML

Um den Rest der Vorlage zu bearbeiten, können Sie einfach die obigen Schritte wiederholen, bis alle gewünschten Informationen enthalten sind.

Sie können auch Abschnitte der Vorlage löschen, wenn sie nicht angezeigt werden sollen. Ebenso können Sie Abschnitte duplizieren, wenn Sie weitere Informationen hinzufügen möchten. Wählen Sie einfach den Teil der Vorlage aus, der mit dem öffnenden Tag beginnt und alles bis einschließlich des schließenden Tags für diesen Teil hervorhebt und diesen Abschnitt entweder löschen oder kopieren und einfügen.

Wenn Sie mit dem Ersetzen des Inhalts fertig sind, ist es an der Zeit, die Beispielbilder durch Ihre eigenen zu ersetzen. Um diesen Vorgang zu vereinfachen, sehen Sie sich die Bildnamen im img-Ordner der Vorlage an und benennen Sie dann Ihre Bilder mit denselben Namen. Wählen Sie dann alle Platzhalterbilder aus, löschen Sie sie und legen Sie Ihre Bilder stattdessen im Ordner img ab.

So passen Sie das Erscheinungsbild Ihrer HTML-Landingpage-Vorlage an

Jetzt ist es an der Zeit, das Aussehen Ihrer Vorlage zu optimieren und die Stile in CSS zu bearbeiten. Standardmäßig enthält das Pure-Template verschiedene Stylesheets für die dunkle und helle Version des Templates:

CSS FilesCSS FilesCSS Files

Um herauszufinden, welches Stylesheet Sie bearbeiten müssen, sehen Sie sich Ihre HTML-Datei im Code-Editor an und suchen Sie nach der Zeile, die dieser ähnelt:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Gehen Sie in den Ordner Ihrer Vorlage und öffnen Sie das entsprechende Stylesheet im Code-Editor.

Um zu sehen, welche Codezeile und welcher Stil Sie bearbeiten müssen, können Sie den gleichen Vorgang wiederholen, den wir zum Bearbeiten des HTML-Codes verwendet haben.

Klicken Sie in Ihrem Browser mit der rechten Maustaste auf ein beliebiges Element, das Sie formatieren möchten, und wählen Sie Prüfen. Schauen Sie nach rechts und Sie sehen die Stile, die für diesen Teil der Vorlage verwendet werden:

Editing CSSEditing CSSEditing CSS

Wie Sie auf dem Screenshot sehen können, zeigt uns der Inspektor die Stile, die für den Absatztext verwendet werden. Wechseln Sie in den Code-Editor und die Stylesheet-Datei. Scrollen Sie nach unten, bis Sie eine Codezeile finden, die mit p beginnt.

Hier können Sie die verwendeten Schriftarten, die Schriftgröße sowie die Textfarbe ändern.

Wenn Sie die Hintergrundfarbe der Vorlage ändern möchten, suchen Sie nach der Codezeile mit dem Text body gefolgt von geschweiften Klammern und geben Sie dann den HEX-Farbcode ein

der Teil, der Hintergrundfarbe liest.

Vergessen Sie nicht, alle vorgenommenen Änderungen zu speichern, indem Sie in Ihrem Code-Editor auf Speichern klicken.

1. Laden Sie Ihre Dateien auf den Server hoch

Nachdem Sie die Vorlage nach Ihren Wünschen geändert haben, müssen Sie sie auf Ihren Hosting-Server hochladen. Ihr Hosting-Provider sendet Ihnen per E-Mail alle Informationen, die Sie zum Übertragen von Dateien per FTP benötigen.

Starten Sie Ihr FTP-Programm wie FileZilla. Sie werden die obere Leiste bemerken, in der Sie den Servernamen, Ihren Benutzernamen und das Passwort eingeben können. Stellen Sie anhand der von Ihrem Host bereitgestellten Informationen eine Verbindung zu Ihrem Server her, indem Sie auf QuickConnect klicken.

Suchen Sie auf der linken Seite des FileZilla-Fensters den Ordner mit Ihrer Vorlage auf Ihrem Computer und klicken Sie darauf, um ihn zu erweitern. Wählen Sie alle Dateien und Ordner aus und ziehen Sie sie auf die rechte Seite des Bildschirms in den Ordner public_html.

Nachdem alle Dateien hochgeladen wurden, öffnen Sie Ihren Browser und geben Sie Ihren Domainnamen ein. Herzlichen Glückwunsch, Ihre Website ist jetzt live!

2. Holen Sie mehr aus Ihrer Bootstrap-Landingpage-Vorlage heraus

Eine Landing Page kann Wunder für Ihr Unternehmen oder Produkt bewirken, wenn Sie sich auf die Einführung vorbereiten. Hier sind ein paar Tipps, die Ihnen helfen, Ihre HTML-Landingpage-Vorlagen optimal zu nutzen und einen Hype zu erzeugen:

Um noch mehr über HTML-Landingpage-Vorlagen oder Bootstrap-Landingpage-Vorlagen zu erfahren, lesen Sie diese Tutorials:

So verwenden Sie eine Landing Page Vorlage zum Sammeln von Leads

Mit Hilfe einer HTML-Vorlage können Sie Ihre Bootstrap-Landingpage schnell zum Laufen bringen. Wählen Sie zunächst eine unserer HTML-Landingpage-Vorlagen von Envato Elements oder eine der Bootstrap-Landingpage-Vorlagen von ThemeForest aus. Verwenden Sie dann unser Tutorial, um Sie durch den Einrichtungsprozess zu führen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Business tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.