Headerbild

Kostenlose Website: One-Page-Vorlage anpassen

Bei united-domains bekommen Sie zu jeder Domain eine kostenlose One-Page-Website inklusive Vorlage. In unserem Beitrag Kostenlose Website im One-Page-Design haben wir Ihnen gezeigt, wo Sie unsere One-Page-Vorlage finden und wie sie aktiviert wird. In diesem Beitrag erklären wir, wie Sie diese One-Page-Vorlage Ihren Wünschen anpassen können.

Inhalt

1. Die Struktur des One-Page-Designs
2. Die wichtigsten Seitenelemente: Name, Bilder, Social-Media-Links und Text anpassen
3. Inhaltsbereiche hinzufügen und entfernen
4. Farben ändern
5. Schriftarten ändern und Webfont-Icons nutzen

 

Die Struktur des One-Page-Designs

Websites basieren auf HTML, der Hyper-Text-Markup-Language. HTML verwendet Tags, um Inhalte zu strukturieren. Diese übermitteln dem Browser, um welchen Inhaltstyp es sich handelt. Tags bestehen meist aus einen Anfangs- und einem Endtag und haben das Format <p>Inhalt des Tags</p>. Endtags unterscheiden sich von Anfangstags durch ein/ (Slash).<!more>

Die wichtigsten Tags für die Bearbeitung der Vorlage sind:

  • Überschriften: <h1>, <h2>, <h3> und <h4>
  • Absätze: <p>
  • Listen: <ul>, <li>
  • Bilder: <img>

Tags können verschachtelt werden, z. B. <p><h1>Inhalt des Tags</h1></p>. Hier wird eine Überschrift (<h1>) in einen Absatz (<p>) eingebettet. Sie werden nur die Inhalte zwischen den Tags bearbeiten, nicht die Tags selbst. Einen Überblick über die Struktur des Quellcodes der Vorlage bietet Ihnen die folgende Abbildung. Die Inhalte einiger Tags wurden eingeklappt, um die Übersicht zu erleichtern.

Der HTML-Code einer Website ist immer untergliedert in einen head und einen body Bereich, der durch Tags gekennzeichnet ist. Im head (gelb hinterlegt) befinden sich Meta-Angaben zur Webseite, im body (grün hinterlegt) die im Browser sichtbaren Inhalt. Damit Sie sich im Quelltext besser zurechtfinden, haben wir den Quelltext durch Kommentare strukturiert. Diese Kommentare werden auf der Website nicht angezeigt.

Durch die Kommentare ist der body-Bereich unterteilt in den Header, die Inhaltsbereiche (Block 1-4) und den Footer. Durch Pfeile ist in der obigen Abbildung gekennzeichnet, welcher Bereich des Quelltext sich auf welchen Teil der Website bezieht.

Die wichtigsten Seitenelemente: Name, Bilder, Social-Media-Links und Text anpassen

Unserer One-Page-HTML-Vorlage ist leicht anzupassen. Sie benötigen hierfür einen einfachen HTML- oder Text-Editor. Öffnen Sie zuerst unsere Vorlage in Ihrem Editor.

Name anpassen

Suchen Sie in unserer Vorlage nach <!— HEADER —>. Zeigt Ihr HTML-Editor die Anzahl der Zeilen an, können Sie zu Zeile 414 springen. Tauschen Sie den Text MEIN NAME / FIRMENNAME durch Ihren bürgerlichen Namen oder Firmennamen.

In Zeile 8 im <title>-Tag ist der Name der Seite hinterlegt. Hier können Sie ebenfalls MEIN NAME / FIRMENNAME durch Ihren Namen oder Ihren Projekttitel ersetzen. Dieser Name wird an verschieden Stellen angezeigt: In der Titelleiste des Browserfensters und des Browsertabs, als Lesezeichen-Name und als Überschrift von Suchmaschinen-Einträgen.

Bild anpassen

Das Bild tauschen Sie, indem Sie die URL https://www.united-domains.de/beispiel-vorlage/images/profilbild.jpg durch die URL eines im Web gespeicherten Bildes tauschen. Sie können beispielsweise Ihr Profilbild aus Link-In oder Facebook nehmen. Die URL Ihres Bildes finden Sie über einen Rechtsklick auf das Bild, dass das Kontextmenü Ihres Browsers öffnet. Kopieren Sie den Link in den Zwischenspeicher, indem Sie auf Link kopieren | Copy Link klicken. Fügen Sie diese URL in die HTML-Vorlage ein.

Ist Ihr Profilbild zu groß, können Sie die Größe anpassen, indem Sie in den HTML-Code den Zusatz width="220" einfügen. Die Zahl repräsentiert die Anzahl der horizontal angeordneten Pixel und kann verändert werden.

Das ursprünglich quadratische Bild der Vorlage wird durch stark beschnittene Ecken als Kreis angezeigt. Hat Ihr Bild ein anderes Seitenverhältnis, wird das Bild elliptisch dargestellt. Sie können den Beschneidungsgrad der Ecken reduzieren, indem Sie den Prozentsatz für border-radium in Zeile 211 anpassen. Der Wert von 100% führt zu einem kreisrunden Bild, niedrigere Werte erzeugen ein eckigeres Bild mit leicht abgerundeten Ecken.

Social Media Verlinkung

Unterhalb des Codes für Name und Bild finden Sie die Verlinkung zu den populärsten Social-Media-Plattformen. Ändern Sie hier die Verlinkung auf Ihr persönliches Profil. Eine Google-Suche nach “[Social-Media-Plattform] Profil Link” zeigt Ihnen Ergebnisse, wie Sie diesen Link finden. Ein Link auf ein existierendes Profil kann folgende Form haben:

Linked-In: https://de.linkedin.com/in/vorname-nachname-073b9540

Facebook: https://www.facebook.com/vorname.nachname.15

Projekt-, Lebenslauf- und Footeranpassungen

Suchen Sie in der HTML-Vorlage nach den Passagen, die Sie ändern möchten. Ersetzen Sie dann den Text.

Die Angaben im Footer finden Sie ab Zeile 584. Alternativ können Sie einfach nach <!-- FOOTER --> suchen.

Screenshot Aug 12 09.47.22

 

Inhaltsbereiche hinzufügen und entfernen

Die Vorlage ist in vier Inhaltsbereiche, Header und Footer gegliedert. Wenn Sie einen Inhaltsbereich hinzufügen möchten, können Sie einen bereits bestehenden Bereich kopieren und zwischen zwei bestehende Bereiche einfügen. Der erste Block beginnt in Zeile 427 mit den Zeilen

<!-- ==================== -->

<!-- BLOCK 1 -->

<section id="block-1">

und endet in Zeile 481 mit dem Tag

</section>

Ändern Sie die bestehende Blockbezeichnung <section id="block-5"> damit Ihr neuer Block eine eigene ID erhält. Um diesen neuen Block über die Navigation der Website erreichbar zu machen, müssen Sie den HTML-Code der Seitennavigation ergänzen. Dublizieren Sie dazu in den Zeilen 419 – 423 eine Zeile und ändern die Block-Nummer (5) und die Bezeichnung, die das neue Element erhalten soll.

Code-Beispiel:

Vorher: <li><a href="#block-3">PROJEKTE</a></li>

Nachher: <li><a href="#block-5”>AUSZEICHNUNGEN</a></li>

Farben anpassen

Alle verwendeten Farben werden bei einer Suche nach ‘color’ im Code der One-Page-Site angezeigt. Die bestimmende Farbe bei den Design-Elemente ist Türkis (#12a8b5). Der Hintergrund wechselt sich mit einem Grauton (#eef2f5) ab. Indem Sie die Funktion ‘Suchen und Ersetzen’ des HTML-Editors verwenden, können Sie den Türkiston durch eine andere Farbe ersetzen. Auf der Seite http://html-color-codes.info können Sie den hexadezimal-Code für Ihre Farbe ermitteln. Unterschiedliche Farben, die gut zueinander passen, können Sie bei Adobe Color CC zusammenstellen.

Schriften anpassen und Icons verwenden

Die voreingestellte Schrift der One-Page-Vorlage ist Googles Open Sans. Auf der Seite von Google Fonts können Sie weitere Schriftarten auswählen. Sagt Ihnen die Schrift Roboto zu, können Sie im Code Open Sans durch Roboto ersetzen. Ihre Website wird nun vollständig in der Schriftart Robot angezeigt.

Mit FontAwesome können Sie hunderte Icons in Ihre Website einfügen. Die Icon-Übersicht zeigt Ihnen alle verfügbaren Icons. Haben Sie ein passendes Icon ausgewählt, klicken Sie auf das Icon. Auf der folgenden Seite wird Ihnen ein Code-Schnipsel angezeigt, den Sie in Ihren HTML-Code kopieren können. Möchten Sie einen Telefonhörer als Icon einfügen, müssen Sie den Code <i class="fa fa-phone" aria-hidden="true"></i> an der gewünschten Stelle im HTML-Code einfügen. Sie können den Telefonhörer mit einem Code-Zusatz sogar eine eigene Farbe zuordnen.

<i class="fa fa-phone icon-location" aria-hidden="true"></i> 08151 / 36867-0

Diese Codezeile fügt ein Symbol ein, das in der gleichen Farbe wie das Location-Icon eingefärbt wurde. Durch den Zusatz icon-location hinter dem Code fa fa-phone wird dem Symbol die bestehende Klasse für das Location-Icon und damit die gleiche Farbe zugewiesen. Sie können im CSS-Teil der HTML-Vorlage eigene Klassen für bestimmte Symbole definieren, wenn Sie für jedes Icon eine eigene Farbei definieren möchten.

Support: Bitte haben Sie Verständnis dafür, dass wir keinen Support für die Anpassung des HTML-Codes geben können. Auf selfhtml.org finden Sie eine verständliche Anleitung wie Sie HTML-Code und CSS einsetzen können.

Top