WordPress Tutorial 2018

WordPress Website erstellen und gestalten

Teil 1:

WordPress Website erstellen

 

Im ersten Video zeige ich dir, wie du eine Website mit WordPress erstellst. Dazu werden wir mehrere beispielhafte Seiten erstellen, damit du die wichtigsten Funktionen kennen und zu benutzen lernst.

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)
    • Hinweis: Das individuelle Menü wurde in „Navigationsmenü“ umbenannt. Die Funktion hat sich nicht verändert.
  • 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!

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

Teil 2:

Eine FAQ Seite erstellen und hinzufügen!

 

In diesem Video zeige ich dir, wie du deine Website um eine FAQ Seite mit schicken „Akkordeon“ Elementen erweitern kannst!

Gliederung

  • Benötigte PlugIns (00:40)
  • Seite erstellen (01:03)
  • Überschrift erstellen & Hintergrundbild einstellen (02:30)
  • Akkordeon Bereich erstellen (05:36)
  • Akkordeon Farbe ändern (10:45)
  • Responsive Design (13:08)
  • Seite zum Hauptmenü/ zur Hauptnavigation hinzufügen (13:41)

Teil 3:

Erweitere deine Website um eine Karte von Google Maps!

 

In einem neuen Video zeige ich dir, wie du eine Google Maps/ Karte mithilfe eines API Schlüssels und den SiteOrigin Widgets auf deiner WordPress Website einbinden kannst!

Gliederung

  • Benötigte PlugIns (00:15)
  • Google Maps einbinden (00:44)
  • API Key/ API Schlüssel anfordern (02:04)
  • Standort eingeben (03:36)
  • Steuerelemente und Zoom ausschalten (04:04)
  • Design anpassen (04:42)
  • Responsive Design (06:53)

Benötigte PlugIns:

Page Builder by SiteOrigin (kostenlos)
SiteOrigin Widgets Bundle (kostenlos)

 

Verwendetes Theme

Sydney Theme (kostenlos)

Suchmaschinenoptimierung

In meinem umfangreichen und kostenlosen SEO Tutorial erfährst du, wie du deine Website für Besucher und Google optimierst!

Patrick Ruh

Melde dich jetzt zu meinem Newsletter an 🙂

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 in unregelmäßigen Abständen Informationen und Produkte rund um WordPress, Webseiten und Online Marketing per E-Mail zusende. Meine Einwilligung kann ich jederzeit widerrufen.“

Weitere Informationen: Datenschutzerklärung

Gefällt dir das Tutorial?

Dann gebe meiner Anleitung doch eine positive Bewertung. 😉

WordPress Website und Homepage erstellen
5 (100%) 6 votes

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! 🙂

13 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

  2. Andreas sagt:

    Hallo Patrick,

    ich bin mal wieder vor einem Problem: kann man im Sydney-Theme irgendwie erreichen, dass man logo UND Titel/Untertitel in die oberste Reihe mit main menu bringen kann?
    Wenn nicht, wie bekomme ich eine Grafik frei positioniert auf der Hauptseite (als dirty trick, sozusagen)?

    vielen Dank für Deine Antwort

    Gruß

    Andreas

    • Patrick sagt:

      Hallo Andreas,

      du könntest ja einfach versuchen ein Logo mit integriertem Text zu erstellen. Ich selbst habe es noch nicht ausprobiert, aber das könnte funktionieren.
      Ich hoffe, dass ich dein Problem richtig verstanden habe, falls nicht kannst du mir es auch ausführlicher in einer Mail beschreiben.

      Beste Grüße

      Patrick

      • Andreas sagt:

        Hallo Patrick,

        Nein – hast Du schon richtig verstanden, die Idee kam mir dann auch :-/
        Ich dachte nur, dass ich die Option nicht gefunden habe, logo UND Titel/Untertitel in dem theme erscheinen zu lassen. Aber es geht wohl tatsächlich nur eines von Beiden.

        Danke und Gruß

        Andreas

  3. Mohsen sagt:

    Hallo Patrik,
    dies WordPress Tutorial finde ich sehr gut. Ich bin dabei nach deinem Video ein Homepage er zu stellen, bin dort gelangt, wo du die „@Copyright“ auf det Seydny-Theme geändert hast. Leider habe unter „WP-Design“ kein EDITOR wie vorgehens das zu ändern. habe ich andere möglichkeit dies kleine Zeile „Stolz präsentiert von WordPress | Theme: Sydney by aThemes“ zu ändern und meine eigenes zu schreiben.
    Ich habe die Kostelose Theme Seydny Version 1.49 benutzt.
    Vielen Dank für Deine Bemühungen.

    • Patrick sagt:

      Hi,

      versuche Mal als erstes ein Child Theme zu erstellen. Hierzu habe ich erst vor ein paar Tagen eine Anleitung erstellt. 🙂
      Hier der Link: https://wp-wizard.de/wordpress-child-theme-erstellen/

      Falls der Editor danach noch nicht verfügbar sein sollte musst du in der wp-config.php eine Kleinigkeit ändern.

      Und zwar:

      define(‚DISALLOW_FILE_EDIT‘, true);

      in

      define(‚DISALLOW_FILE_EDIT‘, false);

      Ich hoffe, dass ich dir weiterhelfen konnte!

      Beste Grüße
      Patrick

  4. Adolf Becker sagt:

    Hallo Patrik,
    tolles Tutorial,bin fast fertig mit meiner Webseite,habe aber gerade festgestellt,dass bei mir das „Neueste Betraege“ Widget in Footer 1 auf der Seite nicht angezeigt wird,obwohl als ich es eingefuegt hatte,es sichtbar war.

    • Patrick sagt:

      Super, dass es dir gefällt. Hast du bereits Beiträge erstellt? Falls nicht, können natürlich noch keine im Widget angezeigt werden. Das ändert sich automatisch, sobald du deine ersten Beiträge veröffentlichst. =)

      Beste Grüße
      Patrick

      • Adolf Becker sagt:

        Vielen Dank fuer die schnelle Antwort/
        Bin mir noch nicht sicher,aber am ueberlegen ob ich fuer meine Webseite nicht doch das „Ashe“ Theme nehmen sollte,das es sich fuer mein Thema (Ernaehrung/Rezepte) meiner Meinung nach besser eignen wurde als „Sydney“,was sagst Du dazu,und ist es aehnlich wie Sydney?, oder sollte ich es besser lassen.

        MfG. Adolf!

  5. Adolf Becker sagt:

    Hallo Patrick,
    hab mich jetzt doch entschieden auf „Sydney“ zu bleiben,ist einfach ganz toll und mit etwas Uebung ganz leicht zu bedienen.Hab jetzt nur noch eine Frage: wie fuege ich die von mir,mit „WP Ultimate Recipe“ (Pugin) erstellten Rezepte in meine Rezepte Seite ein,komm echt nicht drauf 🙂

    MfG. Adolf!

Schreibe einen Kommentar

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