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.
Erhalte 10% Rabatt auf das meistverkaufte WordPress Theme.
Das meistverkaufte WordPress Theme!
WordPress Tutorial 2024
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.
Seite erstellen: Startseite
Seite erstellen: Über mich
Seite erstellen: Leistungen
Blog erstellen
Seite erstellen: Kontakt
Fertig!
Hosting:
WordPress Hosting von Siteground*
PlugIns:
Black Studio TinyMCE Widget
Contact Form 7
Page Builder by SiteOrigin
SiteOrigin Widgets Bundle
TC Custom JavaScript
Kostenlose hochauflösende Fotos:
Unsplash
Kostenlose Logos erstellen:
Logomakr
Trage dich in meinen Newsletter ein und erhalte als Bonus den Ordner mit hilfreichen Dateien zum Tutorial kostenlos dazu. 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:
Kein Spam, versprochen. Du kannst dich jederzeit wieder abmelden. Weitere Informationen in der Datenschutzerklärung.
Bonus 1:
In diesem Video zeige ich dir, wie du deine Website um eine FAQ Seite mit schicken „Akkordeon“ Elementen erweitern kannst!
Benötigte PlugIns:
Page Builder by SiteOrigin (kostenlos)
SiteOrigin Widgets Bundle (kostenlos)
Optionales PlugIn (Visual Editor):
Black Studio TinyMCE Widget (kostenlos)
Verwendetes Theme
Sydney Theme (kostenlos)
Bonus 2:
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!
Benötigte PlugIns:
Page Builder by SiteOrigin (kostenlos)
SiteOrigin Widgets Bundle (kostenlos)
Verwendetes Theme
Sydney Theme (kostenlos)
Bringe deine WordPress Webseite auf das nächste Level!
Im Blog findest du weitere Artikel rund um das Thema WordPress.
Melde dich jetzt zum Newsletter an und erhalte als Dankeschön den Downloadlink zum Demo Ordner!
Kein Spam, versprochen. Du kannst dich jederzeit wieder abmelden. Weitere Informationen in der Datenschutzerklärung.
Demo Dateien herunterladen
Zum Newsletter anmeden und Demo Dateien herunterladen.
Angebot des Monats!
Spare jetzt über 10% auf das Divi Premium Theme.
Die Seite „WP-Wizard.de“ soll dir bei der Erstellung deiner eigenen Website helfen. Dabei soll sie dich Schritt für Schritt an dein Ziel führen. Mit Anleitungen, Tipps & Tricks sowie hilfreichen Video-Tutorials sollen dir qualitativ hochwertige Inhalte rund um WordPress zur Verfügung gestellt werden.
* = Werbelinks
© 2024 WP Wizard. Alle Rechte vorbehalten.
WordPress Hosting von SiteGround* | Page Builder von Elementor* | Backups von UpdraftPlus*
Notwendige Cookies sind für das einwandfreie Funktionieren der Website absolut notwendig. Diese Kategorie umfasst nur Cookies, die grundlegende Funktionalitäten und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.
Analytische Cookies werden verwendet, um zu verstehen, wie Besucher mit der Website interagieren. Diese Cookies helfen dabei, Informationen über Metriken wie Besucherzahl, Absprungrate, Verkehrsquelle usw. zu liefern.
53 Kommentare
Hallo Patrick
wie kann ich in der footer.php einen Link einfügen, also z.B. den Link auf die Impressum-Seite. Ich möchte dies dort tun, weil mir das Footer Widget zu mächtig ist, und ich es so vermeiden möchte. Danke, wenn du mir dazu noch einen Tipp geben könntest. Im Moment steht zwar der Text „Impressum“, aber ohne Link.
Hallo Margarete,
nimm einfach den Code aus dem Ordner, entferne das Copyright by und ersetze den Text „WP Wizard“ durch „Impressum“ und ändere den Link in den deines Impressums.
Beste Grüße
Patrick
Hallo Patrick,
Eine ganz tolle Anleitung, vielen Dank! Mit der aktuellen Version von WP und Sidney sind gewisse Funktionen etwas anders, aber soweit hat alles gut geklappt.
Nur eine Frage zum Footer hätte ich noch: Gibt es eine Möglichkeit, diesen Bereich kleiner zu machen, also weniger hoch, und die Überschriften etwas kleiner. Also z.B. neueste Beiträge, Suchen, Informationen etc. So dass alles etwas feiner/dezenter wird und wirkl?
Vielen Dank für einen allfälligen Tipp!
Beste Grüsse
Barbara
Hallo Barbara,
mit Custom CSS geht alles. 🙂
Beste Grüße
Patrick
Es wäre schön, wenn das nicht nur beim Video bleibt, was Klasse ist, doch die Ordner für das Design sind hier nicht vorhanden. Oder muss man hier Unterzwang E-Mail Kontakt für Newsletter einreichen? Das habe ich getan, doch die Briefkästen werden meistens geleert da ich tot geworfen werde und mittlerweile die ganzen Newsletter nerven. Ich spende lieber eine Kleinigkeit, als mich immer von allen Voll Müllen zu lassen, da es so und so nicht mein Thema meistens ist ,was mich interessiert.
Hallo Andreas,
hier wird keiner vollgemüllt. Gerne kannst du mir aber unter https://www.paypal.me/patrickruh etwas spenden. Dann schicke ich dir den Ordner zu, ganz ohne Newsletteranmeldung.
Beste Grüße
Patrick
Hallo Patrick,
du hast mir mit deinem Tutorial sehr geholfen. Besten Dank!
Jetzt habe ich allerdings noch ein Problem, und zwar steht oben in der Browser Suchzeile Nicht sicher. Wie bekomme ich die Seite denn sicher??
LG
Christian
Hallo Christian,
vielen Dank!!
Dann ist auf deiner Webseite noch kein SSL Zertifikat installiert.
Falls du Siteground gewählt hast, kannst du das deinem Account unter „Websites > SSL“ mit einem Klick installieren.
Beste Grüße
Patrick
Wunderbar ! Dank dir habe ich nun eine für mich schöne und übersichtliche Webseite.
Bei mir funkt es nicht, ich habe den Header etc. nicht also keine Bilder nichts. Und wenn ich dem Sldier Bilder einfüge ändert sich auch nicht 🙁
Die Farbe noch anpassen genau,.. aber echt Hammer Easy hier . Ich finde es toll, das deine Seite mir so einfach geholfen hat. Andere verlangen richtig Geld dafür und hier bei dir war es GRATIS. DANKE für all die Infos.
Super, das freut mich doch!
Hallo Patrick, vielen Dank für Dein tolles Tutorial, echt Klasse gemacht. Ich kämpfe mit dem Teil 3-Spalten support-responsive-social media. Bei mir sind die Texte unterschiedlicher Länge, wodurch die 3 Zellen unterschiedlicher Höhe und damit die Buttons nicht in einer Linie. Wie kriege ich die Buttons oben bündig? Grüße Gabi
Hi Gabi,
ich weiß was du meinst. Leider gibt es meines Wissens hierfür keine vorgesehene Einstellung. Hier musst du wahrscheinlich mit dem Text oder mit verschiedenen Top-Margins arbeiten.
Beste Grüße
Patrick
Hallo Patrick,
vielen Dank für das Tutorial! Es hat mich ermutigt, noch mal mit Sidney die Website zu gestalten.
Allerdings hänge ich an drei Problemen. Das Titelbild ist grau hinterlegt, das möchte ich nicht.
Ich finde auch nich mehr den Punkt, wo ich CSS – Code eingeben kann. Und zuletzt, wenn ich meine Seite bearbeiten will öffnet sich immer ein anderer Editor (weißes WordPress Logo oben Links), als bei dir im Video.
Hi André,
das mit dem grau hinterlegten müsste ich sehen. Ist aber bestimmt lösbar. 🙂
Custom CSS kannst du unter den „Customizer“ Einstellungen finden. Das Problem mit dem WordPress Editor könnte wahrscheinlich das Classic Editor Plugin ganz einfach lösen.
Wie ich sehe bist du aber bereits schon auf ein anderes Theme umgestiegen. Viel Erfolg!
Beste Grüße
Patrick
Hallo
Das Tutorial ist super. Nur leider habe ich 2 kleine Probleme: Mich stört das „proudly presented by wordpress – theme sydney“ und ich bekomme es nicht weg. Und das andere: ich habe genau nach Anleitung gearbeitet, der Slider mit dem Begrüssungstext erscheint nicht mehr, obwohl er gemäss Anleitung erfasst wurde und im Customizer auch noch da steht. (lern-zimmer.ch)
Danke für einen Hinweis
Hi,
sorry für die verspätete Rückmeldung, wie es aussieht konntest du die Probleme aber bereits lösen, oder? 🙂
Hallo,
ich habe deine YouTube-Anleitung bis Minute 26 durchgesehen und alle Schritte befolgt… aber ein Problem… das Sydney-Theme habe ich installiert und aktiviert, aber im Anschluss auf der Seite nicht die Demo-Bilder gesehen, sondern eine Demo-Seite komplett ohne Bilder. Dabei habe ich mir zunächst nichts gedacht und bin dann auf Design -> Customizer -> Header Bereich -> Header-Slider gegangen. Dort war das Demobild und auch Slider 2, 3, usw. nicht vorinstalliert bzw. voreingestellt. Ich habe dann aus der Galerie ein Bild angezeigt, trotzdem wird in der Vorschau und auch nach der Aktivierung kein Bild angezeigt. Ich bin davon ausgegangen, dass dies evtl. an den Bildmaßen oder ähnliches liegt und das gleiche dann mit deinem Wüste-Bild aus dem Demo-Ordner versucht. Aber auch hier keine Änderung…. Die Seite sieht im Prinzip wie folgt aus: Ganz oben auf der Seite ist ein kleiner schwarzer Kasten, den nur der Administrator sieht, um in das Dashboard o.ä. zu kommen. Dadrunter kommt ein etwas größerer blaugrauer Kasten, wo nur die Überschrift bzw. der Titel der Homepage und der Untertitel zu sehen ist. Rechts steht in roter Farbe „Erstelle Dein Menü hier“. Und dadrunter dann wieder ein gräulicher Kasten mit „Stolz präsentiert von WordPress | Theme: Sydney by aThemes“. Der Rest der Seite (ca 3/4 der ganzen Seite) ist weiß. Keine Bilder, nicht zu sehen. Woran liegt das?
Hi, kannst du mir einen Link oder einen Screenshot per Mail schicken?
Gruß Patrick
Hallo, ich habe alles so gemacht und war auch zufrieden.
Jetzt wollte ich aber auf der Startseite Support usw.. wieder entfernen. Ich komme aber nie auf diese Builderseite so wie Sie in Ihrem Video. Bei mir sieht das immer alles ganz anders aus. Bei mir tauchen die Kästen nicht auf, wo ich etwas bearbeiten könnte. Habe schon alles ausprobiert.
Seiten bearbeiten und ich komme nie auf die Kästen. Bin voll am verzweifelt.
Hallo,
am Besten mal das „Classic Editor“ Plug-in installieren. Dann sollte alles funktionieren! 🙂
BG Patrick Ruh
Classic Editor bringt mich zwar auf eine Möglichkeit, Text oder Datei einzufügen, aber ich kann auch keine Zeilen hinzufügen (Da wo Sie die drei Icons auf der Startseite haben). Man kann auch nirgendwo ein Plugin in eine Box ziehen, Ich habe das Video wieder und wieder angesehen, da fehlt etwas, wenn man der Anleitung folgt
Hallo Karsten,
hast du den SiteOrigin Page Builder installiert?
Beste Grüße
Patrick
Lieber Patrick!
Ich finde das Thema ‚Sydney‘ nicht – möchte aber gerne – da sehr gut beschrieben –
damit arbeiten.
Kannst du mir helfen?
vlDank
Albert
Hallo Albert,
das Sydney Theme ist immer noch in der WordPress Theme Bibliothek vorhanden. Ich habe allerdings die Erfahrung gemacht, dass ab und zu die Suchfunktion bei WordPress spinnt. Einfach 2-3 mal versuchen. 😉
Beste Grüße
Hallo Patrick
Danke für deine aufmunternden Zeilen – nur ich probiere es schon seit einem halben Jahr,
immer wieder – ohne Erfolg!
Aber ich werde weiter versuchen…
lg und alles Gute
Albert
Hallo Albert,
das ist wirklich sehr merkwürdig.
Alternativ kannst du es auch auf der offiziellen WordPress Seite herunterladen und per zip Datei hochladen.
https://de.wordpress.org/themes/sydney/
Beste Grüße
Patrick
Lieber Patrick,
danke für Dein großartiges Tutorial!
Damit ist es Dir gelungen einem älterem Herrn (Uhu) beizubringen, wie man mit WordPress eine gute Webseite erstellen kann.
Bevor ich Dein Tutorial gefunden habe sind mir grauenhafte Beispiele begegnet, denen ich kaum länger als 3 Minuten folgen konnte ohne eine Krise zu entwickeln.
Deiner angenehmen Stimme und der verständlichen Ausdrucksweise kann man stundenlang zuhören.
Du zeigst die einzelnen Schritte so, dass man Deinem Mauszeiger folgen kann.
Du weißt nicht nur wie es funktioniert, sondern kannst es auch weitergeben!
Ich habe keine Fragen mehr an Dich, weil Du mich auf den Weg gebracht hast, auf dem ich mich selbst zurechtfinde. Dabei hat mir etwas geholfen, dass ich schon vorher gewusst habe was „html“ und „css“ ist und „was es macht“.
Wenn Du mal schauen möchtest: https://matthias-martinsohn.de
Herzlichen Dank
Matthias
Hallo Matthias,
vielen Dank für deinen Kommentar!
Das freut mich wirklich sehr. Die Webseite sieht echt spitze aus! Die Layouts hast du schon sehr schön und strukturiert hinbekommen, klasse!
Beste Grüße und weiterhin viel Spaß mit deiner Website!
Patrick
Hallo Patrick,
ich habe folgendes Problem,
auf meiner Startseite ist der Headerbereich über die ganze Seite sichtbar. Der Widgetbereich allerdings nicht. Den teil mit ERSTELLE DEINE EIGENE WEBSITE konnte ich verstellen, wie geht das auf dem Rest der seiten?
Gruß
Thorsten
Hi Thorsten,
Bitte schicke mir doch eine Mail mit 1-2 Screenshots zu deinem Problem. 😉
Beste Grüße
Patrick
Hallo Patrick
ist es wohl möglich, die Höhe des Footers so zu reduzieren, dass praktisch nur eine Zeile angezeigt wird, also einfach nur ca. 2 cm hoch?
Plan B: ich mache den Hintergrund weiss, und würde dann aber gerne eine Textzeile so weit unten haben, dass sie quasi über dem Copyright-Bereich steht.
Wäre schön, wenn sich eine Variante realisieren liesse.
Besten Dank
Kathrin
Hi Kathrin,
am Besten schickst du mir eine Mail mit einem Link zu deiner Website und vielleicht 2-3 Screenshots die dein Vorhaben veranschaulichen.
Beste Grüße
Patrick
Hallo Patrick,
vielen Dank für dein Tutorial. Es hat mir bei der Erstellung meiner Website extrem weitergeholfen.
Ein Problem habe ich jedoch noch bei meiner Website und ich wollte fragen, ob du mir dabei evtl. auch weiterhelfen könntest.
Laut Internet soll es sich bei dem Theme Sydney um ein responsives Design handeln.
Allerdings habe ich das Problem, dass meine Website auf kleineren Bildschirmen und in anderen Browsern teilweise anders dargestellt wird, wie auf meinem Macbook.
Die Bilder haben dann eine andere Größe. Die Schrift lappt teilweise über.
Könntest du mir dabei weiterhelfen, wie ich es einstellen kann, dass das Design auf allen Geräten korrekt angezeigt wird?
Über eine Antwort würde ich mich sehr freuen.
Viele Grüße,
Laura
Ja das Sydney Theme ist komplett responsive. Gerne kannst du mir eine Mail mit deinem Problem schicken, damit ich es mir anschauen kann. 🙂
Beste Grüße
Patrick
Bei mir wird leider nicht das Individuelle Menü widget Angezeigt (video 55:52) Was kann ich machen damit ich es angezeigt bekomme?
Hallo Christian,
siehe Hinweis: Das individuelle Menü wurde in „Navigationsmenü“ umbenannt. Die Funktion hat sich nicht verändert.
Beste Grüße
Patrick
Hi Patrick,
danke für Dein super Tutorial!!! Bin noch mitten drin. Ein vermisse ich jedoch…., wie installiert man diesen Pop Up cookie für Datenschutz, der vor Benutzung der Website abgekllckt werden muss? Kannst Du mir einen Hinweis auf einen Wiget oder Plugin geben…. oder braucht es einfach nur einen Script mit dem Editor??? Wäre super einen Hinweis zu bekommen.
Danke noch einmal für Deine umfangreiche Anleitung.
Herzliche Grüße
Hi,
super dass es dir gefällt!
Ich nehme an du möchtest einen einfachen Cookie Hinweis einbinden. Das funktioniert auf beide Arten, ich persönlich hab es mit einem Script und etwas CSS gelöst.
Die wohl einfachere und schnellere Methode ist die Umsetzung mit einem PlugIn.
Ein recht simples PlugIn ist beispielsweise dieses:
https://de.wordpress.org/plugins/cookie-notice/
Beste Grüße
Patrick
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!
Ich bin mir sicher, dass es bestimmt über das Einfügen von Shortcodes funktioniert.
Beste Grüße
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.
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
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!
Das ist absolut Geschmacksache. Wenn du allerdings absoluter Anfänger sein solltest und meinem Tutorial folgen möchtest, empfehle ich dir das Sydney Theme. 😉
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.
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
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
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
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
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
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