Die Einrichtung Ihrer Website muss nicht kompliziert sein. Tatsächlich können Sie mithilfe einer einseitigen Website-Vorlage eine einfache, aber effektive Geschäftswebsite erstellen. Durch die Verwendung einer einseitigen Vorlage können Sie Ihrem Unternehmen die dringend benötigte Online-Präsenz geben und alle Informationen zu den von Ihnen angebotenen Dienstleistungen oder Produkten präsentieren.

Ein weiterer Vorteil ist die Tatsache, dass Personen, die an Ihrem Unternehmen interessiert sind, sofort alle erforderlichen Details sehen können, ohne auf mehrere Seiten klicken zu müssen. Und da auf einer Seite häufig mehrere Handlungsaufforderungen enthalten sind, besteht eine viel höhere Chance, Besucher in potenzielle Käufer umzuwandeln.

In diesem Tutorial führen wir Sie durch die Schritte zum Einrichten Ihrer Website mit einer einseitigen HTML-Vorlage. Wir werden die Tools beschreiben, die Sie benötigen, die technischen Details zum Anpassen Ihrer Vorlage und wie Sie sie auf Ihren Server hochladen. Wir geben Ihnen auch einige wichtige Tipps, wie Sie einseitige Websites effektiv gestalten können. Lass uns anfangen!

Bevor Sie loslegen

Bevor Sie Ihre einseitige Website erstellen, benötigen Sie einige Dinge. Lass uns unten über sie gehen.

1. Domänenname

Die naheliegendste Wahl ist die Verwendung Ihres Firmennamens für Ihre Domain. Wenn der Name vergeben ist, können Sie Wörter wie Firma, Agentur oder Studio hinzufügen und dann den Domainnamen erwerben.

Es wird auch empfohlen, eine .com-Erweiterung zu verwenden, da sie eine der ältesten und glaubwürdigsten Erweiterungen ist. Wenn Sie jedoch keinen passenden Namen mit der .com-Erweiterung erhalten, ist die Verwendung einer .net-Erweiterung eine Überlegung wert.

2. Hosting-Unternehmen

Ein gutes Hosting-Unternehmen zu finden, mag auf den ersten Blick eine unmögliche Aufgabe sein. Im Allgemeinen möchten Sie einen Host suchen, der gute Bewertungen auf Websites von Drittanbietern hat, da diese eher unparteiisch sind. Achten Sie darauf, was die Benutzer über ihre Betriebszeiten, den Kundensupport und die Benutzerfreundlichkeit sagen.

3. HTML-Vorlage

Der nächste Schritt besteht darin, eine Vorlage für Ihre Website zu finden. Ein guter Ort, um Ihre Suche zu starten, ist der Marktplatz von ThemeForest. Sie können aus Hunderten professioneller einseitiger Seitenvorlagen wählen, die sich für eine Vielzahl von Nischen eignen, oder unsere kuratierte Auswahl einiger der besten durchsuchen: 

4. Code-Editor und FTP-Client

Da Sie die Vorlage bearbeiten müssen, um die Informationen durch Ihre eigenen zu ersetzen, benötigen Sie einen Code-Editor. Es wird die Codesyntax hervorheben und das Auffinden der Teile des Codes erleichtern, die geändert werden müssen.

Für dieses Tutorial verwende ich Sublime Text, der unter Mac, Windows und Linux verwendet werden kann und eine kostenlose Testversion enthält.

Sie benötigen außerdem einen FTP-Client wie FileZilla, um eine Verbindung zu Ihrem Server herzustellen und die Websitedateien hochzuladen, ohne sie einzeln hochladen zu müssen. FileZilla ist kostenlos und für alle Betriebssysteme verfügbar.

Sehen wir uns nun die Details an, wie eine einseitige Website erstellt wird. Beginnen Sie mit dem Herunterladen und Einrichten Ihrer Site-Vorlage.

So bearbeiten Sie den Inhalt Ihrer Website-Vorlage

Nachdem Sie alle benötigten Dateien und Tools gesammelt haben, können Sie nun die HTML-Vorlage ändern. Für dieses Tutorial verwende ich die Websitevorlage von Wander. Laden Sie zunächst die Vorlagendateien von Ihrer Downloadseite in ThemeForest herunter. Extrahieren Sie den Inhalt des gezippten Ordners und öffnen Sie den Ordner. Sie werden feststellen, dass es einen Dokumentationsordner sowie alle Site-Vorlagendateien enthält.

Da es sich um eine Mehrzweckvorlage handelt, befinden sich einige Dateien darin. Ihre Vorlage enthält möglicherweise nur eine einzige HTML-Datei und Ordner, die Stylesheets, Skriptdateien und Bilder enthalten.

Um die Vorlage nach Ihren Wünschen zu bearbeiten, müssen Sie die HTML-Datei ändern, die normalerweise aufgerufen wird index.html. Im Fall von Wander werde ich die Datei bearbeiten home-one-page.html, da wir eine einseitige Website erstellen.

Mit HTML arbeiten

Wenn Sie noch nie mit einer HTML-Vorlage gearbeitet haben, wirkt die Datei wahrscheinlich einschüchternd, wenn Sie versuchen, sie in Sublime Text oder einem anderen Editor zu öffnen. Während ein komplettes HTML-Lernprogramm nicht in diesem Artikel enthalten ist, behandeln wir die Grundlagen, was HTML ist und wie es aussieht.

HTML ist eine Auszeichnungssprache, die aus Tags besteht

,

,

, und andere. Die Tags werden paarweise geliefert und haben jeweils eine Öffnung und eine Schließung. Sie helfen dem Browser zu verstehen, wie er anzeigen soll, was sich zwischen diesen Tags befindet.

Ein Absatz in einem HTML-Dokument sieht folgendermaßen aus:

Das ist mein Absatz.

. Eine Überschrift wird von einem umgeben h tag begleitet mit einer nummer aus 1-6 was bedeutet Überschriftsebene 1 durch die Überschriftsebene 6.  

Wenn Sie eine HTML-Vorlage bearbeiten, müssen Sie keines der Tags bearbeiten, sondern nur den Text dazwischen. Wenn Sie jedoch einen Teil des Codes kopieren oder löschen möchten, müssen Sie den gesamten Teil vom öffnenden Tag bis zum schließenden Tag auswählen und dann kopieren oder löschen.

Die einfachste Methode zum Bearbeiten Ihrer Vorlage besteht darin, sie in einem Browser zu öffnen und dann den Code zu überprüfen. Doppelklicken Sie zunächst auf die HTML-Datei, um sie in Ihrem Standardbrowser zu öffnen. Sie sehen sofort, dass Sie den Text im Kopfbereich bearbeiten müssen. Klicken Sie mit der rechten Maustaste auf den Satz, der lautet Wir lassen MARKEN glänzen und wählen Sie Prüfen.

HTML in einem Webbrowser überprüfen.

Am unteren Rand wird ein Fenster angezeigt, in dem der HTML-Code unserer Vorlage angezeigt wird. Die Zeile mit dem ausgewählten Satz befindet sich auf der linken Seite des Inspektorfensters. Sie werden sehen, dass der Satz in ein

tag mit der Klasse von große mt20.

Öffnen Sie nun die Vorlage in Ihrem Code-Editor, indem Sie mit der rechten Maustaste auf den Namen der Vorlage klicken und auswählen Mit überhöhtem Text öffnen. Suchen Sie die gleiche Codezeile, die Sie im Inspektorfenster gesehen haben, wählen Sie den Text zwischen den Tags aus und ersetzen Sie ihn durch Ihren Unternehmens-Slogan.

HTML-Code bearbeiten.

Um den Absatz direkt unter der gerade ersetzten Überschrift zu bearbeiten, kehren Sie zu Ihrem Browser zurück, klicken Sie mit der rechten Maustaste auf den Absatz, und wählen Sie Inspizieren. Diesmal ist der Satz dazwischen eingeschlossen

Tags mit der Klasse von Weiß. Gehen Sie zurück zu Ihrem Code-Editor, suchen Sie die entsprechende Codezeile, klicken Sie zwischen den Tags und fügen Sie Ihre Informationen hinzu.

Fahren Sie mit diesen Schritten fort, bis Sie den gesamten Demo-Inhalt durch Ihren eigenen ersetzt haben. Löschen Sie unerwünschte Abschnitte, indem Sie alles vom Anfang bis zum schließenden Tag eines bestimmten Codeabschnitts auswählen.

Wenn Sie einen Teil der Vorlage duplizieren möchten, suchen Sie auf ähnliche Weise den Code, der diesen Abschnitt enthält, und wählen Sie alles aus, einschließlich der öffnenden und schließenden Tags. Kopieren Sie ihn und fügen Sie ihn dort ein, wo der Inhalt angezeigt werden soll.

In der Abbildung unten wollte ich ein weiteres Testimonial hinzufügen, also habe ich den Code für das dritte Testimonial ausgewählt und ihn gleich unten kopiert.

Beachten Sie, dass in den meisten Fällen Abschnitte des Codes eingeschlossen werden

Tags, bevor Sie auf Überschriften und Absatz-Tags stoßen. Wenn Sie diesen Abschnitt duplizieren oder löschen möchten, müssen Sie das auswählen

Tags auch; Andernfalls wird Ihr Inhalt nicht richtig angezeigt.

Nachdem Sie den Inhalt bearbeitet haben, müssen Sie die Bilder ersetzen. Die einfachste Möglichkeit, sie auszutauschen, ist, die Bildnamen in Ihrem Vorlagenordner zu notieren und Ihre Bilder auf dieselbe Weise zu benennen. Sobald Ihre Bilder richtig benannt wurden, kopieren Sie sie in den Bilderordner.

So gestalten Sie Ihre Website-Vorlage für eine Seite

Bevor Sie die Dateien auf Ihren Server hochladen, müssen Sie noch etwas tun, und die Vorlage wird an Ihre bestehende Marke angepasst. Die Stile befinden sich im CSS-Ordner. Im Fall von Wander gibt es neben dem Ordner mehrere Stylesheets Farben.

Um mit der Bearbeitung der CSS-Datei zu beginnen, können Sie den gleichen Schritten wie bei der Bearbeitung der HTML-Datei folgen. Um herauszufinden, wie ein bestimmtes Element gestaltet wird, klicken Sie in Ihrem Browser mit der rechten Maustaste darauf und klicken Sie auf Prüfen. Schauen Sie dieses Mal auf die rechte Seite, und Sie werden den entsprechenden Stil für dieses Element bemerken. Das gleiche Bedienfeld enthält auch den Namen der Stildatei, die Sie bearbeiten müssen, zusammen mit der Zeile, in der sich der Code befindet.

CSS in einem Webbrowser überprüfen. 

Öffnen Sie die Datei in Ihrem Code-Editor. In diesem Fall ist es theme.css. Da ich die Hintergrundfarbe des zweiten Abschnitts bearbeiten möchte, der alle Funktionen hat, muss ich den finden Zeile 5378 in der Datei theme.css. Ändern wir es in Schwarz:

Passen Sie die Hintergrundfarbe schnell in CSS an. Wenn Sie die Farbe schnell anpassen möchten, müssen Sie nur das Stylesheet im Kopf der HTML-Datei durch den Namen Ihrer bevorzugten CSS-Datei ersetzen.

Suchen Sie nach der Codezeile, in der Folgendes steht:

Ändern Sie den Namen in green.css ändert die Farben der Buttons, Links und Icons:

Ändern der Farben der CSS-Dateiknöpfe.

Um die Schriftarten zu ändern, überprüfen Sie den Text und sehen Sie sich den rechten Teil des Inspektorfensters an. Sie sehen den Namen der Schriftart, die der Text verwendet, sowie die Codezeile, in der Sie die Schriftart in eine von Ihnen bevorzugte Schriftart ändern können.  

Suchen des CSS-Codes für Schriftarten.

So laden Sie Ihre Site-Vorlage auf den Server

Nachdem Sie nun Ihre einseitige Website-Vorlage geändert und gestaltet haben, können Sie sie auf Ihren Hosting-Server hochladen. Ihr Gastgeber wird Ihnen den Benutzernamen und das Kennwort mitteilen, die zur Verwendung der FTP-Verbindung erforderlich sind.

Öffnen Sie FileZilla, geben Sie den Servernamen, den Benutzernamen und das Kennwort in die obere Leiste ein, und klicken Sie auf Schnelle Verbindung.

Suchen Sie den Ordner mit Ihrer Vorlage auf Ihrem Computer auf der linken Seite des Bildschirms und klicken Sie darauf, um ihn zu erweitern. Wählen Sie unten links alle Dateien und Ordner aus, und ziehen Sie sie auf die rechte Seite des Bildschirms in den Stammordner Ihres Hosting-Servers, der sich in befindet public_html Mappe.

Übertragen Ihrer einseitigen Website-Vorlage per FTP.

5 wichtige Tipps für bessere One-Page-Websites

Nun, da Ihre Website live ist, sind hier einige wichtige Tipps, die Sie beachten sollten.

1. Halten Sie Ihre Botschaft kurz

Im Gegensatz zu einer herkömmlichen Website verfügt eine Vorlage mit einer Seite nur über begrenzten Speicherplatz, so dass weniger Platz für Ihre Nachricht vorhanden ist. Deshalb ist es wichtig, alle Fachjargon und unnötigen Details zu beseitigen und nur die relevantesten Informationen zu hinterlassen. Erläutern Sie deutlich, was Sie zu bieten haben und welche Vorteile Ihr Produkt oder Ihre Dienstleistung bietet.

2. Verwenden Sie starke Handlungsaufforderungen

Angesichts des begrenzten Raums muss Ihr Aufruf zum Handeln stark und überzeugend sein. Sie müssen es auch mehrmals einschließen, um den maximalen Effekt zu erzielen. Standardmäßig enthalten die meisten Seitenvorlagen für eine Seite bereits mehrere Abschnitte, in denen ein Aufruf zum Tätigwerden enthalten ist. Leiten Sie die Besucher zu einem Bereich mit Preisplänen oder zu einem Kontaktformular, wo Sie mit Ihnen Kontakt aufnehmen können.

3. Halten Sie die Navigation zugänglich und einfach

Stellen Sie Ihre Navigation so ein, dass Sie zu verschiedenen Abschnitten Ihrer Website springen. Sie sind dem Spiel einen Schritt voraus, wenn Sie sich für eine Vorlage entscheiden, die bereits über eine Sticky Navigation verfügt, die beim Scrollen des Besuchers erhalten bleibt. Fügen Sie nur die Links zu Ihren Website-Abschnitten hinzu und vermeiden Sie, externe Links zu platzieren, da dies jeden Besucher von Ihrer Seite abschüttet.

4. Verwenden Sie Visuals

Die Verwendung von Bildern oder Videos hilft Ihnen, Ihre Geschichte zu erzählen und mehr über das, was Sie zu bieten haben, zu teilen, ohne viel Platz zu beanspruchen. Bei einseitigen Websites sind Bilder Ihr bester Freund.

5. Hierarchie pflegen

Platzieren Sie die wichtigsten Informationen oben auf Ihrer Site, und führen Sie den Benutzer dann langsam auf der Seite hin zu spezifischeren Informationen, die Ihre Kernbotschaft unterstützen. Auf diese Weise können Sie die Hierarchie beibehalten und die Informationen logisch darstellen.

Beginnen Sie mit Ihrer eigenen One-Page-Website

Wenn Sie diesem Lernprogramm gefolgt sind, können Sie jetzt schnell eine einseitige Website mit einer responsiven Vorlage erstellen. Beginnen Sie Ihre Reise mit der richtigen Website-Vorlage und lesen Sie dieses Tutorial, um es schnell einzurichten.

Geschäft