Share
Wenn Sie sich darauf vorbereiten, eine neue Website, ein Produkt oder einen Service zu starten, benötigen Sie einen dedizierten Ort, um potenzielle Kunden und Kunden zu senden. Ihre Website ist jedoch möglicherweise noch nicht bereit, neue Besucher zu begrüßen. In diesen Fällen ist eine HTML5-Landing-Page-Vorlage die perfekte Wahl.
Eine HTML5-Vorlage lässt sich schnell und einfach installieren. Im Gegensatz zu einem CMS, das möglicherweise eine komplexe Programmiersprache verwendet, kann eine HTML-Vorlage selbst für Anfänger leicht bearbeitet werden.
In diesem Lernprogramm werde ich die Vorteile der Verwendung von HTML-Landing-Page-Vorlagen erläutern und Ihnen zeigen, wie Sie eine davon einrichten. Mach dir keine Sorgen: es ist schnell und schmerzlos.
Wie bereits erwähnt, können Sie Landing Pages schnell installieren und einrichten. Es gibt jedoch ein paar andere Vorteile, wenn man eins verwendet:
Nun, da ich die Vorteile von HTML-Templates besprochen habe, wollen wir in das Tutorial eintauchen.
Für die Zwecke dieses Tutorials verwende ich die Vorlage Pure. Es ist eine saubere und minimale Vorlage, die für verschiedene Zwecke verwendet werden kann und mit einem funktionierenden Kontaktformular und einem MailChimp-Anmeldeformular geliefert wird.
Neben der Vorlage gibt es noch einige andere Tools, mit denen Sie die Vorlage ändern und Ihre Website live schalten können:
Bevor Sie eine Vorlage für Ihre Zielseite auswählen, müssen Sie einen Domainnamen erwerben und sich für ein Hosting-Paket anmelden. Heutzutage können Sie ein Hosting-Paket ab 5 € pro Monat erwerben. Bei den meisten Hosting-Unternehmen erhalten Sie den Domänennamen kostenlos, wenn Sie sich für ihren Plan anmelden. Einige Hosting-Unternehmen bieten unbegrenzten Speicherplatz und Bandbreite, andere beschränken die verfügbaren Ressourcen.
Stellen Sie sicher, dass Sie Ihre Nachforschungen anstellen und ein paar unabhängige Rezensionen über Hosting-Unternehmen lesen, die Ihr Interesse wecken. Zu sehen, wie zufrieden ihre bisherigen Kunden sind, kann ein guter Indikator für die angebotenen Dienstleistungen und die Qualität der Kundenunterstützung sein.
Der nächste Eintrag in 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.
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 Syntax-Hervorhebungen verwendet. Sie können Notepad ++ verwenden, wenn Sie ein Windows-Benutzer sind, oder TextWrangler, wenn Sie ein Mac-Benutzer sind. Eine andere Option 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.
Schließlich müssen Sie eine Landing-Page-Vorlage kaufen und herunterladen und den Inhalt vorbereiten, der auf Ihrer Landing-Page angezeigt wird. In Envato Elements finden Sie viele HTML-Landing-Page-Vorlagen, die speziell für Landing-Pages entwickelt wurden. Wenn Sie eine Vorlage gefunden haben, die Ihnen gefällt, kaufen Sie sie und laden Sie sie auf Ihren Computer herunter. Entpacken Sie den Ordner und speichern Sie ihn an einem Ort, an dem Sie leicht darauf zugreifen können.
Sammeln Sie alle Bilder und Texte, die Sie Ihrer Zielseite hinzufügen möchten. Wenn Sie alles an einem Ort aufbewahren, können Sie es einfacher zur Vorlage hinzufügen und die Bilder auf Ihren Server übertragen.
Wenn alles vorhanden ist, müssen Sie die Vorlage anpassen und Ihre Informationen hinzufügen. Beginnen wir mit der Struktur der Vorlage.
Wie bereits erwähnt, verwende ich die reine HTML-Zielseitenvorlage.
Nach dem Entpacken des Ordners können Sie sehen, dass die Bootstrap-Zielseitenvorlage mehrere Unterordner und mehrere HTML-Dateien enthält. So sieht die Struktur aus:
Sie werden auch mehrere HTML-Dateien feststellen, die verschiedene Demoversionen der HTML-Landing-Page-Vorlagen darstellen. Sie können mit der rechten Maustaste oder doppelklicken Sie auf jede HTML-Datei, um sie in Ihrem bevorzugten Browser zu öffnen und zu sehen, wie sie aussehen. Wenn Sie die gewünschte Demoversion gefunden haben, schließen Sie alle anderen Registerkarten.
Ich werde im restlichen Tutorial mit der Vorlage index-normal-scroll-countdown.html arbeiten.
Nachdem die von Ihnen gewählte HTML-Zielseitenvorlage in Ihrem Browser geöffnet ist, ist es Zeit, die Informationen durch Ihre eigenen zu ersetzen. Der einfachste Weg, dies zu tun, ist zu verstehen, welcher Teil des Codes in der Vorlage geändert werden muss. Beginnen wir, indem Sie mit der rechten Maustaste auf die erste Textzeile unterhalb des Zählers klicken und auf Prüfen klicken.
Ein neues Fenster wird am unteren Rand Ihres Browserfensters angezeigt. Sie werden feststellen, dass auf der linken Seite der HTML-Code unserer Vorlage und auf der rechten Seite das CSS angezeigt wird, das Stile für die Vorlage bereitstellt.
Wie Sie dem Screenshot entnehmen können, befindet sich der ausgewählte Satz zwischen Tags, die Absätze darstellen. Die meisten Tags in HTML bestehen aus Tagpaaren mit einem öffnenden und einem schließenden Tag. Der Inhalt muss zwischen diesen Tags platziert werden, um auf einer Webseite angezeigt zu werden:
opacity-0 "> Genießen Sie vor dem Start a Sehr begrenzte Gelegenheit Abonnieren Sie unseren Newsletter.
Klicken Sie auf die nächste Schaltfläche, um weitere Informationen zu unserem Projekt zu erhalten.
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 suchen und Ihren eigenen Text einfügen.
Nachdem Sie wissen, wie Sie Code finden, der bearbeitet werden muss, kehren Sie zum Vorlagenordner zurück, klicken Sie mit der rechten Maustaste auf die gewünschte HTML-Datei, und wählen Sie aus Ö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 hervorgehoben haben. Es sollte sich um die Linie 75-76 befinden. Klicken Sie dann in das
markieren Sie den Text und ersetzen Sie ihn durch Ihren eigenen.
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 Eröffnungs-Tag beginnt und alles bis hin zum schließenden Tag für diesen Teil hervorhebt, und löschen oder kopieren Sie diesen Abschnitt darunter.
Wenn Sie mit dem Ersetzen des Inhalts fertig sind, müssen Sie die Beispielbilder durch Ihre eigenen ersetzen. Um diesen Vorgang zu vereinfachen, werfen Sie einen Blick auf die Bildnamen im Ordner "img" der Vorlage und benennen Sie Ihre Bilder dann mit denselben Namen. Wählen Sie dann alle Platzhalterbilder aus, löschen Sie sie und platzieren Sie Ihre Bilder stattdessen im Ordner img.
Jetzt ist es an der Zeit, das Erscheinungsbild Ihrer Vorlage zu optimieren und die Stile in CSS zu bearbeiten. Standardmäßig enthält die Pure-Vorlage verschiedene Stylesheets für die dunkle und helle Version der Vorlage:
Um herauszufinden, welches Stylesheet Sie bearbeiten müssen, schauen Sie sich Ihre HTML-Datei im Code-Editor an und suchen Sie nach der Zeile, die der folgenden ähnelt:
Gehen Sie zum Ordner Ihrer Vorlage und öffnen Sie das entsprechende Stylesheet im Code-Editor.
Um zu sehen, welche Code- und Stilzeile Sie bearbeiten müssen, können Sie den gleichen Vorgang wiederholen, den Sie zum Bearbeiten des HTML-Codes verwendet haben.
Klicken Sie in Ihrem Browser mit der rechten Maustaste auf ein Element, das Sie formatieren möchten, und wählen Sie Inspizieren. Nach rechts schauen, werden die für diesen Teil der Vorlage verwendeten Stile angezeigt:
Wie Sie dem Screenshot entnehmen können, wird der Inspektor zeigt uns die für den Absatztext verwendeten Stile. Wechseln Sie zum Code-Editor und zur 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 Farbe des Textes ä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 anschließend den HEX-Farbcode ein
der Teil, der Hintergrundfarbe liest.
Vergessen Sie nicht, alle Änderungen zu speichern, indem Sie in Ihrem Code-Editor auf Speichern klicken.
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 eine E-Mail mit allen Informationen, die Sie zum Übertragen von Dateien mit FTP benötigen.
Starten Sie Ihr FTP-Programm wie FileZilla. In der oberen Leiste können Sie den Servernamen, Ihren Benutzernamen und das Kennwort eingeben. Stellen Sie mithilfe der von Ihrem Host bereitgestellten Informationen eine Verbindung zu Ihrem Server her, indem Sie auf klicken Schnelle Verbindung.
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.
Wenn alle Dateien hochgeladen wurden, öffnen Sie Ihren Browser und geben Sie Ihren Domainnamen ein. Herzlichen Glückwunsch, Ihre Website ist jetzt live!
Eine Landing Page kann für Ihr Unternehmen oder Ihr Produkt Wunder bewirken, wenn Sie sich auf den Start vorbereiten. Hier sind ein paar Tipps, mit denen Sie Ihre HTML-Zielseitenvorlagen optimal nutzen und Hype erstellen können:
Um noch mehr über HTML-Zielseitenvorlagen oder Bootstrap-Zielseitenvorlagen zu erfahren, lesen Sie die folgenden Lernprogramme:
Mit Hilfe einer HTML-Vorlage können Sie Ihre Bootstrap-Zielseite schnell zum Laufen bringen. Wählen Sie zunächst eine unserer HTML-Landing-Page-Vorlagen aus Envato Elements oder eine der Bootstrap-Landing-Page-Vorlagen aus ThemeForest aus. Verwenden Sie dann unser Tutorial, um Sie durch den Einrichtungsprozess zu führen.
Accentsconagua