Der Website Video Guide

Exklusiv für alle Besucher meines Website Videos auf YouTube:

Du findest hier alle Infos und Ressourcen die ich in dem Video zur Erstellung dieser Website verwendet habe. Der Guide soll dir das Lernen erleichtern und Probleme lösen!

Du kannst alle Ressourcen aus diesem Guide für dein eigenes Projekt nutzen. Wenn du Fragen hast kannst du unten einen Kommentar schreiben.

Viel Spaß, dein Jonas

Hier findet Ihr übrigens den Code der Demo Website die ich in dem Video erstellt habe. Einfach den Code unter folgendem Link kopieren und mittels des Classic Mode im Visual Composer einfügen. Dann wechselt Ihr wieder zum Backend Mode und die Website erscheint.

1. Web Hosting einrichten

Mit gutem Gewissen empfehle ich dir All-Inkl Hosting für deine Website. Es ist der schnellste Hoster für Websites den ich kenne. Alle meine persönlichen Projekte hoste ich bei diesem Anbieter.
Schon mit dem kleinsten Paket hast du 3 Inklusiv-Domains, beim größten sogar 20 Domains!!.

Der Support reagiert schnell und ist wirklich professionell. Bei allen Paketen hast du sogar telefonischen Support, das heißt du kannst die Mitarbeiter von All-Inkl jederzeit persönlich nerven 🙂

Über diesen Link kommst du direkt zur Produktseite von All-Inkl. Oft gibt einen guten Einsteiger Rabatt für die ersten 3 Monate. Zusätzlich kannst du mich mit dem Kauf direkt unterstützen. Wenn du willst.

  • Nach der Registrierung bekommst eine Email in der alle Zugangsdaten für deinen Account enthalten sind. Für den Kunden-Login, für das KAS (Kunden Administrations System) und für FTP.

Über diesen Link kannst du dich bei All-Inkl einloggen, wenn du ein Hosting Paket abgeschlossen hast: All-Inkl Login

2. WordPress installieren

Bei All-Inkl im KAS (unter Vertragsverwaltung -> KAS Login), unter der Rubrik „Software Installation“ kannst du bei Blog -> WordPress auswählen und installieren.

  1. Wähle WordPress aus (unter Blog)
  2. Wähle die Domain aus auf der du WordPress installieren willst.
    • Der Domain Pfad wird automatisch erstellt, da musst du nichts mehr machen
  3. Nun legst du ganz einfach eine Datenbank an
    • Behalte die Option „neue Datenbank anlegen“
    • Verwende einen Kommentar der deine Website eindeutig bezeichnet (ggf. lasse den Kommentar so wie er ist)
  4. Im Schritt 4/4 musst du dir Login Daten überlegen (Email + Passwort)
    • Trage die Login Daten ein
    • Überprüfe deine Angaben
    • Setze bei beiden Kästchen ein Häckchen
    • Starte die Installation
  5. WordPress wird innerhalb weniger Sekunden installiert
    • Nun wird dir die Login Adresse (../wp-admin) präsentiert
    • Merke dir deine Login Daten gut
    • Logg dich ein in deine neue Website 🙂

3. WordPress Theme aussuchen

In diesem Abschnitt werden wir das Layout unserer Website mit einem WordPress Theme optimieren. Das geht ganz einfach.

Alles was wir dafür brauchen ist ein starkes Theme, das gut aussieht aber auch flexibel genug ist, damit wir alle Elemente selbst einstellen können.

impreza theme

Ich empfehle dir absolut dir das Impreza Theme zuzulegen. Ich verwende es im Website Video und damit kannst du garantiert nichts falsch machen. Als wenn das Theme allein nicht genug ist, bekommst du noch Lizenzen für die folgenden Premium Plugins dazu:

  • Visual Composer
  • Visual Composer Ultimate Addons
  • Revolution Slider 5 (Slider Revolution)

Hier kannst du eine Lizenz für Impreza bekommen: IMPREZA THEME

4. Theme installieren und einrichten

Wenn du dir eine Lizenz gekauft hast, kannst du mit einem Klick alle Dateien herunter laden die du benötigst:

  • Das Haupt Impreza Theme
  • Das Impreza Child Theme

In WordPress kannst du das Theme ganz leicht installieren.

Dazu navigierst du in der Seitenleiste zu „Design -> Themes“. Hier klickst du ganz oben auf Installieren.

Anschließend klickst du oben auf Theme hochladen. Wähle nun die heruntergeladene Datei Impreza.zip aus und lade sie hoch. Das gleiche machst du mit der Impreza-Child.zip.

Jetzt hast du erfolgreich Impreza auf deinem WordPress installiert.

Farbeinstellungen für das Theme

Die Style Einstellungen für Farben etc. kannst in den Theme Optionen unter „Styling“ verändern.

Hier sind die Farben die ich verwendet habe:

Primary Color: #f97352
Top Area Text Color: #666666
Main Menu Text Color: #ffffff

UnterFußzeilen Farben

Hintergrundfarbe:  #3d4045
Alternative Hintergrundfarbe:  #222222
Überschriftfarbe:  #ffffff
Textfarbe:  #999999
Linkfarbe:  #cccccc

Fußzeilen Farben
Hintergrundfarbe:  #43474d
Textfarbe:  #8c8e91

Im Video habe ich angekündigt euch den Script Code für den Copyright Bereich im Footer zur Verfügung zu stellen:

Also, in den Theme Einstellungen im Bereich „Footer“ habt Ihr die Möglichkeit den Inhalt für die Copyright Leiste zu definieren. Wie Ihr das wahrscheinlich kennt schreiben wir dann meist © Copyright 2016, also mit dem aktuellen Jahr.

Dann müssten wir uns Anfang jeden Jahres hinsetzen und die Jahreszahl aktualisieren. Aber in Zeiten moderner Technik wäre das doch wohl ziemlich lame!!

Mit diesem Mini Script wird die Jahreszahl immer automatisch angepasst:

<script>document.write(new Date().getFullYear())</script>

5. Logo Einstellen

In Impreza 3 gibt es mittlerweile mehrere Möglichkeiten ein Website Log zu integrieren. Es ist auch erstmals möglich Logo und Text zusammen einzustellen. Das ist z.B. für Suchmaschinen sehr wichtig.

Du navigierst du „Impreza -> Theme Optionen -> Header Builder„. Dort bearbeitest du dann das Text Element auf der linken Seite in der zweiten Zeile. Du kannst einen Text als Seiten Titel eintragen. Z.B. „Meine Website“.

Zusätzlich kannst du ein Symbol aus einer Font Library (Bibliothek) verwenden. Such dir vielleicht ein Symbol von Font Awesome aus und kopiere dir da die Symbolbezeichnung: z.B. „fa-globe„, dann erhälst du:

Unter dem Reiter „Sizes“ kannst du die Darstellung dieses Textes und Symbols genau definieren.

Wenn du allerdings ein eigenes Logo als Bild verwenden möchtest, dann musst du anstatt des Text Elementes ein Bild Element benutzen.

Du klickst auf das Plus und fügst ein Bild Element ein. Hier kannst du dann eine Bilddatei auswählen, hochladen und ebenfalls die Größe einstellen.

6. Titelbild einfügen

wordpress website erstellen wordpress tutorial

Ganz oben auf der Startseite soll als erstes ein großes Titelbild eingefügt werden, dass den ganzen Bildschirm einnimmt. Dafür brauchst du natürlich ein schönes Bild. Normalerweise sind hochauflösende Bilder von Stockseiten wie Shutterstock etc. ziemlich teuer.

Zum Glück kenne ich den Geheimtipp Unsplash.com. Hier könnt Ihr viele sehr schicke Bilder finden und kostenlos herunterladen und auf eurer Website verwenden. Eine Lizenz braucht Ihr dafür nicht.

Sucht euch ein passendes Bild für eure Website aus. Ich habe für die Demo Website z.B. dieses Foto genommen.

Bevor Ihr das Bild auf eurer Homepage verwenden könnt, solltet Ihr es allerdings erst komprimieren. Das ist wichtig, damit eure Website schnell bleibt und für Besucher zügig geladen werden kann.

Ihr solltet das Bild mit Photoshop o.ä. auf eine Dateigröße von max. 120kb und 1920 x 720px bringen.

7. Hauptmenü anlegen

In diesem Abschnitt lernst du wie du ein Menü in WordPress anlegen kannst. Das ist wie fast alles sehr sehr einfach! 🙂

Du navigierst zu „Design -> Menüs„. Etwa in der Mitte, rechts klickst du auf „erstelle ein neues Menü„. Dieses Menü nennst du z.B. „Hauptmenü“.

Links siehst du dann alle existierenden Seiten deiner Website aufgelistet. Markiere die Seiten die du im Menü haben möchtest und klicke „Zum Menü hinzufügen„.

Du kannst die Seiten dann einfach in deine gewünschte Reihenfolge ziehen.

Im linken Bereich unter der Kategorie „Links“ hast du auch die Möglichkeit Verknüpfung zu einer beliebigen Website zum Menü hinzuzufügen.

Nachdem du ein Menü erstellt hast musst du unten noch die Position definieren, in der das Menü auf deiner Website erscheint:

  • Hauptmenü
  • Fußzeilen Menü

8. Favicon implementieren

Was ist überhaupt FavIcon? Das ist das kleine Symbol das sich in der Ecke eines Browserfensters oder Tabs einer Website befindet. Wie z.B. bei YouTube das rote Viereck mit dem Pfeil.

Es ist wichtig, dass deine Website ein Favicon hat, so ist der Wiedererkennungswert viel größer. Es ist Teil des grundlegenden Layouts einer Homepage.

Meist macht es Sinn wenn du das Logo deiner Firma oder eben deiner Website als Favicon verwendest. Allerdings gibt es bestimmte Anforderungen an die Datei die du dafür verwendest.

Das Favicon muss quadratisch sein und über eine Größe von 512 x 512 px verfügen. Das ist zwar wahnsinnig riesig, aber die Auflösung der Datei braucht dafür nicht so groß zu sein. Der Dateityp sollte png oder jpeg sein.

Das Favicon kann farbig oder nur schwarz sein, das ist dir überlassen.

Im Video Tutorial habe ich einfach nur ein Font Icon kopiert und in eine png umgewandelt. Hier kannst du es dir herunterladen: Download Favicon

9. Footer Widgets einstellen

In diesem Abschnitt erstellen wir die Inhalte für den Footer am Ende jeder Seite. Das können wir sehr komfortabel mit den WordPress Widgets machen. Diese findest du unter Design -> Widgets

Das erste Footer Widget
In das erste Widget ganz links werden wir ein Bild einfügen. Wir können dazu einfach das Standard Text Widget verwenden, da dieses auch HTML Code versteht. Aber keine Angst der Code den wir dazu verwenden, ist ganz simpel.

Wir erstellen ein Image Element und fügen als „Src“ Attribut den Pfad zum gewünschten Bild ein. Den Pfad zu ein Bild kannst du in den Details eines Bildes in der WordPress Mediathek finden.

Damit sich das Bild auch genau in der Mitte des Widget Bereiches befindet, ummanteln wir das Bild Element mit einem Div Container. Diesem Container geben wir dann ein Style Attribut von „Text-Align: Center“ um das Bild zu zentrieren.

Hier ist der Code für das erste Widget:

Das zweite Footer Widget
Im zweiten Widget werden wir die letzten 5. Blogbeiträge auflisten. Das ist ein Standard Feature von WordPress. im Widgetbereich kannst du einfach das passende Widget in den zweiten Footer Bereich ziehen.

Hier wählen wir noch aus, dass kein Datum angezeigt werden soll und nur die letzten 5 Beiträge gezeigt werden sollen.

Das dritte Footer Widget
Im dritten Footer Bereich sollen die Seiten der Website verlinkt werden. Mit Impreza kann man Menüs als Widgets darstellen.

Wir können also direkt das Main Menu was wir auch in der Haupt Navigation verwenden im Menu Widget auswählen.

Das vierte Footer Widget
Der vierte Bereich wird meine Kontaktinformationen zeigen. Hier habe ich auch etwas leichtes HTML verwendet. Benutzt einfach den Code hier oder tragt eure eigenen Informationen ein:

141 Kommentare. Hinterlasse eine Antwort

  • Hallo Jonas das Theme das su hier empfiehlst ist eigentlich ok habe es gekauft da du wirklich gute Erklärungen bringst leider funktionieren bei mit die Permalinks für User nicht wieso auch immer denke für neueinstiger ist das Theme leider nichts
    https://thebbq.ch/
    die Privacy führt automatisch zum Star Bild und auch unter Partner ist es das selbe für alle die es anklicken
    gibt es benutzerfreundliche Theme die du empfehlen könntest ?

    Antworten
  • Hier ist der fehlende Code für das erste Widget:
    🙂

    Antworten
  • Super Erklärungen… ich bastel jetzt seit 2 Monaten an unserer Radio Webseite rum.. endlich verstehe ich warum ich was eingeben muss…

    Antworten
  • Hallo Jonas, ich bin dank Deiner Videos gut mit der Aktualisierung meiner Webseite voran gekommen. Jetzt habe ich eine 301-Weiterleitung in SEO eingerichtet. Jedoch wird immer noch ein 404-Fehler angezeigt. Habe es auch über ein Plugin versucht. Deshalb meine Frage: Wie lang kann es dauern, bis die Weiterleitung greift, wenn man zuvor längere Zeit an der Seite nichts getan hat? Oder sollte ich die 301 zusätzlich noch bei meinem Domain-Anbieter in der htaccess-Datei ändern?? Freue mich auf schnelle Antwort. Schon mal Danke – Kerstin

    Antworten
  • Hallo Jonas,
    Super Videos ! 🙂
    Gibt es auch kostenfreie Alternativen zu Impreza bzw. Visual Composer ?
    Danke 🙂

    Antworten
  • intressiere mich für webdesign und du machst gute tutorials

    Antworten
  • Hi Jonas,
    spitze Video. Ich möchte mit dem Aufbau eigener Webseite anfangen. Ich werde deine Schritte folgen, ich habe nur eine Frage:

    Wie kann man die TYPING EFFECT auf der ersten Seite installieren?
    Die sind sehr modern jetzt :))

    Antworten

Schreibe einen Kommentar zu jonas schindler Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Menü