WordPress Tutorial 2018

WordPress Website/ Homepage erstellen

WordPress Tutorial > WordPress Website/ Homepage erstellen

Jetzt gestalten wir die Website, mein umfangreiches YouTube Tutorial hilft dir hoffentlich dabei! 🙂

Video-Gliederung (Sprungmarken):

 

Allgemeines & Setup

Seite erstellen: Startseite

  • Seiten erstellen (00:21:19)
  • Statische Startseite & Beitragsseite einstellen (00:22:56)
  • Vollbild-Slider einstellen (00:24:33)
  • Überschrift einfügen (00:25:35)
  • Unterüberschrift einfügen (00:25:44)
  • Hochauflösende Hintergrundbilder herunterladen (00:26:02)
  • Call-to-Action Button bearbeiten (00:28:42)
  • Hauptnavigation/-menü erstellen (00:30:23)
  • Designfarbe einstellen (00:32:13)
  • Logo/ Favicon erstellen & einfügen (00:34:00)
  • Buttons erstellen (00:37:14)
  • Widgetbereich erstellen (00:49:14)
  • Neueste Beiträge Widget einfügen (00:50:15)
  • Kontaktinformationen Widget einfügen (00:51:19)
  • Individuelles Menü einfügen (Impressum, Datenschutz etc.) (00:52:14)
  • Social Media Buttons einfügen (00:58:06)
  • Copyright Hinweis einfügen (01:04:06)
  • Weiterer Call-to-Action Button einfügen (01:06:27)
  • Call-to-Actions Buttons stylen (01:07:33)
  • Schriftart verändern (01:10:30)
  • Hintergrundfarbe Kopfzeile ändern (01:14:51)
  • Kopfzeile: Link Styling (01:15:24)
  • Fußzeile: Link Styling (01:16:21)
  • Kopfzeile: Box-Shadow hinzufügen (Google Design) (01:17:04)

 

Seite erstellen: Über mich

  • Seite gestalten: Über mich (01:19:16)

 

Seite erstellen: Leistungen

  • Seite gestalten: Leistungen (01:35:26)

 

Blog erstellen

 

Seite erstellen: Kontakt

  • Seite gestalten: Kontakt (02:10:08)
  • Kontaktformular einfügen (02:16:20)
  • E-Mail Account bei Siteground anlegen (02:22:54)

 

Fertig!

Dateien zum Video: Demo-Inhalt zum WordPress Tutorial herunterladen!

Hier kannst du dir kostenlos den Ordner mit hilfreichen Dateien zum Tutorial herunterladen. Mit diesen kannst du die Seite aus dem Tutorial ganz einfach nachbauen und anschließend mit deinen eigenen Inhalten wie z.B. Texte und Bilder ersetzen.

Im Ordner enthalten sind:

  • die hochauflösenden, lizenfreien Fotos aus dem Tutorial (optimiert und komprimiert)
  • Logo/Favicon und alle Icons
  • Platzhaltertexte
  • Der Custom JavaScript Code für zweiten Button im Slider
  • Alle Custom CSS Dateien für weiteres Styling
  • Credits für Fotos und Logos

Jetzt anmelden! 🙂

Meine Inhalte und Anleitungen werden stetig erweitert und verbessert. Registriere dich für den WP Wizard Newsletter und bleibe auf dem neusten Stand.

„Durch Angabe deiner E-Mail-Adresse und Anklicken des Buttons „Anmelden“ erklärst du dich damit einverstanden, dass ich dir regelmäßig Informationen und Produkte rund um WordPress, Webseiten und Online Marketing per E-Mail zusende. Meine Einwilligung kann ich jederzeit widerrufen.“

Gefällt dir das Tutorial?

Dann gebe meiner Anleitung doch eine positive Bewertung. 😉

WordPress Website/ Homepage erstellen
5 (100%) 1 vote

Oder teile es mit deinen besten Freunden! Ich würde mich sehr freuen!


Hast du noch weitere Fragen, Tipps oder sonstige Anregungen? Hinterlasse mir ganz einfach einen Kommentar! 🙂

2 Kommentare

  1. regi sagt:

    lieber patrick, vielen dank für das super tutorial. das hat mir den einstieg ins wordpress extrem erleichtert. 🙂

    eine frage: ich möchte gerne, dass der header-bereich zwar nicht den schatten hat, dafür aber zu 100% undurchsichtig ist – dass das bild also beim scrollen der seite nach oben nicht unter dem balken sichtbar ist. ich habe festgestellt, dass bei einigen macs von freunden, das bild auf auf alllen seiten schon zur hälfte unter dem balken sichtbar ist, also nicht bündig mit dem balken anfängt – dies möchte ich natürlich unbedingt verhindern.

    versucht habe ich es so:
    .site-header {
    opacity: 1 !important;
    }

    das hat aber leider nicht funktioniert … kannst du mir vielleicht weiterhelfen?
    vielen dank und herzliche grüsse
    regi

    • Patrick sagt:

      Hallo Regi,

      da hast du Recht, das ist mir vor kurzem auch schon aufgefallen. Das muss durch ein Sydney Update geändert worden sein, dass der Header leicht durchsichtig ist.

      Nein dein Code funktioniert so leider nicht, das stimmt. 😉

      Versuche es doch einfach damit:

      .site-header {
      background-color: #56c1ff;
      }

      und evenutell noch zusätzlich diesen Code (Schmaler Header beim herunterscrollen):

      .site-header.float-header {
      background-color: #56c1ff;
      }

      ..und die Farbe natürlich noch eventuell anpassen.

      Beste Grüße
      Patrick

Schreibe einen Kommentar

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