WordPress Website Erstellen: Vollständiges WordPress Tutorial auf Deutsch (2019 Version)

Dafür nutzen wir eine kostenlose Software, die WordPress heißt.
Und obwohl sie kostenlos ist, nutzen es zahlreiche
professionelle Websites. Zum Beispiel nutzt es Ariana Grande, Snoop Dogg
und Toyota neben tausenden anderen Marken und Unternehmen.

Ich zeig dir wie du deine Website von Grund auf erstellst, beginnend mit
dem Domain Namen.

Zeig dir einen Top WordPress Hoster, der zudem auch noch günstig ist und deinen
Anforderungen entspricht, sodass du dir später keine Sorgen machen musst und keine
Probleme mit dem Hoster hast.

Den Installationsprozess von WordPress und die Basics, sodass du einfach selbst
Dinge ändern kannst und in der Lage bist deine WordPress Seite zu individualisieren
ohne dass du hundert andere Tutorial Videos schauen musst.

Und zum Schluss gibts noch nen Bonus, in dem wir eine Profi-Website designen mithilfe
eines Premium Themes, mit dem wir wirklich alles anstellen können.

Legen wir los mit den Voraussetzungen.

Wir brauchen

einen Domain Namen wie zum Beispiel websiteexplained.de, deinedomain.de oder google.com
die kosten nicht allzu viel – nämlich zwischen 10 bis 20 Euro im Jahr

weiters brauchen wir webhosting, und zwar mieten wir da einen teil eines Servers von einem
Webhosting Unternehmen, sodass wir die Dateien unserer Website sicher abspeichern und
hinterlegen können sowie unsere website live schalten und anderen Internet-Usern
24 Stunden am tag zugang zu unserer website geben können – das kostet normalerweise
5 bis 10 Euro im Monat, wird allerdings vorab fürs ganze Jahr vorausbezahlt

Zuguterletzt brauchen wir noch WordPress, das ist komplett kostenlos von wordpress.org
erhältlich.

Es gibt allerdings einen Unterschied zwischen wordpress.org und wordpress.com

wordpress.org ist die Open Source Software, welche vollständig anpassbar und kostenlos ist,
während wordpress.com kostenpflichtig und limitiert in Funktionalität ist.

Mit diesen 3 Dingen hast du die Möglichkeit in Windeseile eine eigene Website zu erstellen
und während du vor einigen Jahren noch alles seperat besorgen musstest, ist es mittlerweile
um einiges einfacher.

Heutzutage besorgst du dir einfach Webhosting beim Webhosting-Anbieter und der stellt dir
auch eine Domain und einen vereinfachten Installationprozess für WordPress zur Verfügung

Legen wir los mit der Schritt für Schritt Anleitung beginnend mit dem Kauf von Webhosting,
dem Installieren von WordPress und dem Anpassen sowie Individualisieren deiner Website.

Um zu starten, klick auf den ersten Link in der Videobeschreibung

 

 

//////////

Danach kommst du auf eine eine Seite die so aussieht.

gib nun den Namen ein, den die Domain deiner Website haben
soll und klick auf Verfügbarkeit prüfen. Der Domainchecker
schlägt dir nun automatisch ein paar Domainendungen (auch
TLD genannt) vor.

Eine TLD kann zum Beispiel .com, .net oder .de sein.

Sollte deine Domain nicht verfügbar sein, kannst du rumprobieren
bis du etwas passendes gefunden hast oder du klickst auf andere
verfügbare TLDs und kannst nach dem Hostingkauf nochmal überlegen

Meine Domain ist frei und da klick ich jetzt gleich mal auf
reservieren.

Sobald du auf jetzt reservieren geklickt hast, kommst du auf
GoDaddy, das ist der Hostinganbieter den wir für dieses Tutorial
nutzen.

Du fragst dich wahrscheinlich ob GoDaddy überhaupt eine gute Wahl
ist und ich kann dir beruhigt sagen, ja.

Nicht nur ich selbst nutze GoDaddy sondern GoDaddy ist weltweit der
größte Registrar für Domains und bietet euch cPanel, welches du später
noch sehen wirst, aber kurz zusammengefasst, ist es eine einfache
und übersichtliche Verwaltungsoberfläche für den Webserver und bietet
obendrein noch 1-Klick Installationssoftware für WordPress.

Übrigens werdet ihr auf ein spezielles Angebot beim Domainchecker weitergeleitet (den Link zum Angebot findet
ihr außerdem auch in der Videobeschreibung) wo ihr GoDaddy Hosting
um 85% reduziert bekommt.

Also Leute, Hosting für 1,19€ im Monat. Günstiger wirds echt nicht
außerdem bekommt ihr eine kostenlose .com Domain, also würdet ihr euch
nochmal rund 15 Euro sparen.

Ich nehm hier den Standard-Plan, der ist eigentlich mehr als ausreichend.

Klick in den Warenkorb und dann wirst du nochmal zu nem Domainchecker
weitergeleitet, wo du eine kostenlose .com Domain zum Kauf hinzufügen kannst.

Falls du lieber eine .de oder .at Domain haben möchtest, gib einfach deinen
Websitenamen mit deiner bevorzugten Domainendung ein (die bekommst du allerdings
nicht gratis)

Ich empfehle dir beim Hosting mit cPanel 12 Monate auszuwählen, so bekommst du
die vollen 85% Rabatt und es ist meiner Erfahrung nach die optimalste Dauer.

Um den Kauf abzuschließen musst du dich bei GoDaddy registrieren. Ich bin schon
Kunde bei denen, also
überspring ich den Prozess mal, notier dir einfach alle Passwörter und Codes
welche du beim Registrierungsprozess angibst und wir sehen uns gleich wieder.

 

////////////////

Sobald du deinen Kauf abgeschlossen hast, wirst du weitergeleitet auf eine Übersicht
deiner Hosting-Accounts, ich hab hier ein paar mehr stehen, weil ich noch andere
Hosting Accounts auch habe, allerdings sollte bei dir nur einer zu sehen sein

Klick also auf einrichten und nun wirst du gefragt ob du eine Domain aus deinem
Konto verwenden möchtest oder du die Domain selbst eingeben möchtest.

Es kann sein dass deine neu gekaufte Domain noch nicht im Konto aufscheint,
also geben wir jetzt mal den soeben gekauften Domainnamen selbst ein und klicken
auf weiter.

Danach kommt die Abfrage in welcher Region du das Rechenzentrum auswählen möchtest.

Kurz zur Info. Je näher dein Server geographisch zu deinen Websitebesuchern ist,
desto besser. Somit sind Ladezeiten verkürzter. Planst du also eine Website, für den
amerikanischen Markt, wähle Nordamerika. Sollte deine Website interessant für
Besucher aus Europa sein, verwende Europa – ganz easy.

Ich wähl jetzt Europa und klick auf Weiter.

Dann wird gefragt ob du eine WordPress-Seite erstellen willst.

Wollen wir zwar, aber das lassen wir vorerst weg, ich will dir nämlich den Prozess
mit dem Auto-Installer zeigen, welchen du spätere WordPress Installationen sowieso
verwenden wirst.

Nun siehst du die Übersicht deines Hostingpakets.

Wir wollen nun zum cPanel, klick also auf cPanel Administration.

So wilkommen im cPanel, hier hast du die Möglichkeit schnell und einfach
auf sämtliche Funktionen des Server zu zugreifen.

cPanel bietet zahlreiche nützliche Funktionen, wir brauchen jetzt aber
nur den Auto-Installer.

Scroll runter zu Software und klick auf Installatron Application Installer.

Nun wähl WordPress aus und klick auf insall this application.

Bei Domain kannst du noch einstellen ob deine Website mit www oder ohne erscheinen
soll.

Bei der Sprachauswahl, kannst du die Spracheinstellungen von deiner WordPress Installation
einstellen.

Die Update Einstellungen kannst du so lassen, das sollte eigentlich passen

Leg noch Usernamen und Passwort fest und speicher die Logins ab.

Die restlichen Einstellungen kannst du auch einfach so lassen wie sie sind.

Klick auf installieren und lehn dich zurück während WordPress installiert wird.

 

Sobald du nun auf auf deine Domain mitsamt des WP-Admins zum Schluss klickst wirst

du automatisch eingeloggt ( domain+ WP Admin ist übrigens auch deine Login URL
zu WordPress.)

Bei manchen Domainendungen wie zum Beispiel .de kann es allerdings noch etwas dauern

bis die Website verfügbar ist, es sollte nicht allzu lange dauern, aber ich

mach das Tutorial jetzt mal mit einer anderen Domain weiter. Prozess bleibt alles das

gleiche, kannst also guten Gewissens weiterschauen bis deine Domain erreichbar ist.

Legen wir los mit Themes. Themes sind verantwortlich für das Aussehen & Layout deiner Website.

Sehen wir uns mal an wie das aktuelle Theme aussieht. Nicht ganz mein Geschmack. Könnte besser sein

Wir wechseln nun das Theme auf eines, was ne Spur besser aussieht.

Um das Theme deiner Website zu ändern klick auf Design und dann auf Themes.

Danach wirst du weitergeleitet auf den WordPress Theme Marktplatz, auf dem dir
tausende von kostenlose Themes zur Verfügung stehen.

Um zu sehen wie ein Theme bei deiner Website aussieht, klick Vorschau

Sobald du zufrieden bist mit deiner Theme Auswahl klick installieren
und danach Aktivieren

Sieht schon viel besser aus.

Als nächstes legen wir zusätzliche Seiten für unsere Website an.

Aber vorher möchte ich noch kurz auf eine Frage eingehen, welche wahrscheinlich
manche haben:

Der Unterschied zwischen Seiten & Beiträge:

Beiträge funktionieren eher wie News-Beiträge, wohingegen Seiten in
WordPress für wichtige Zwecke verwendet werden und zum wesentlichen Bestandteil
der Website gehören wie zum Beispiel die Kontaktseite, die Über Uns Seite,

Das Impressum oder Datenschutz.

 

Sehen wir uns kurz die Beiträge an. Beiträge haben einen Author und man
kann sie kategorisieren – perfekt, falls du einen normalen Blog betreiben
möchtest.

Den Beitrag hier löschen wir erstmal weil er automatisch generiert ist und
wir den eigentlich auch gar nicht brauchen.

Danach geh zu Seiten und klick auf Erstellen

 

Gib deiner Seite einen Titel und füge den Inhalt hinzu, den du auf deiner
Seite haben möchtest.

Du kannst außerdem Bilder hinzufügen indem du auf den Datei hinzufügen Button
klickst.

Sobald du fertig bist, klick Vorschau auf der rechten Seite um zu sehen
wie deine Seite live aussieht.

Bist du zufrieden? Dann klick Veröffentlichen und deine Seite ist nun live.

Nun sehen wir uns den Customizer an indem wir auf Customize oder Anpassen
im Design Tab klicken.

 

DU kannst die Farben, die Schriftart und viel mehr ändern (natürlich abhängig
vom Theme, welches du ausgewählt hast) aber noch viel wichtiger:

du kannst die Homepage Einstellungen ändern, was nützlich ist, falls
du deine Website lieber als eine normale Business Website im Gegensatz zu
einem Blog nutzen möchtest.

Und weil wir die Website als Business Website nutzen markieren wir statische
Seite und wählen unsere neu erstellte Seite als Startseite aus.

/////////////////////

 

Jetzt ändern wir den Seitentitel und Beschreibung.

Um das zu machen, geh zum Einstellungstab und klick auf Allgemein.

Hier kannst du Seitentitel, Seitenbeschreibung und vieles mehr ändern

um die Spracheinstellungen zu ändern, klick einfach auf das Dropdown
Menü und wähl deine bevorzugte Sprache aus.

Vergiss nicht zu speichern und dann klick weiter auf Permalinks

Nun ändern wir die URL Struktur unserer Website, denn wir wollen so genannte
Pretty URLs, das ist wichtig für ein besseres Ranking in Suchmaschinen wie
zum Beispiel Google.

Was Pretty URLs betrifft, wähl Beitragsname aus, klick speichern und alles
sollte passen.

//////

 

Jetzt erstellen wir eine Kontakt-Seite und dafür brauchen wir ein
Kontaktformular-Plugin.

Geh zu Plugins und klick installieren.

Plugins geben deiner WordPress Website eine Bandbreite an Funktionalität
und die meisten sind sogar kostenlos.

Nun installieren wir ein Kontaktformular Plugin. Das bekannteste heißt

Contact Form 7 und wir werden es auch nutzen, klick also auf installieren
und aktivieren.

Danach erscheint ein neuer Reiter in der Seitenleiste namens Formulare.

Klick auf Kontaktformulare und du kommst auf eine Übersichtseite, wo du alle
Kontaktformulare sehen, bearbeiten und löschen kannst.

Neben dem Kontaktformular Titel siehst du einen Shortcode.

Ein Shortcode ist ein simpler einzeiliger Code, welcher einen
großen Haufen komplexen Code beinhaltet. Kopier also den Shortcode
und erstelle eine neue Seite namens Kontakt, füg den Shortcode
in den Text Editor ein und klick auf Vorschau.

Nun hast du ein funktionsfähiges Kontaktformular auf deiner
Seite. Ziemlich einfach oder?

Das letzte was fehlt, ist unser individuelles Navigationsmenü.

Geh also zurück ins Dashboard und klick auf Menüs im Design Tab.

Gib deinem Menü einen Namen und klick erstellen.

Jetzt fügen wir unsere Start- und Kontaktseite zum Menü hinzu.

Möchtest du Navigationselemente hinzufügen, welche nicht Teil deiner
Website sind, füg einfach einen individuellen Link hinzu. Pass allerdings
auf dass du den kompletten Link hinzufügst mitsamt http oder https, ansonsten
wirst du auf einer Fehlerseite landen.

Wähle noch Primäres oder Primary Menu aus und klick auf speichern

Nun haben wir auch ein eigenes Website-Menü

 

 

////////

So das wars eigentlich schon mit dem Basic WordPress Tutorial,
falls es dir geholfen hat, gib dem Video ein Like und lass es
mich wissen in den Kommentaren.

Solltest du irgendwelche Fragen haben, kannst du die auch in den
Kommentaren posten oder schick mir eine Nachricht und versuche
sie so gut wie möglich zu beantworten.

Wenn du noch tiefer in die WordPress Materie eintauchen möchtest,
dann bleib dran, denn wir designen jetzt gemeinsam eine Website in
weniger als 30 Minuten, bei der Agenturen bis zu 2.000 Euro verrechnen

Und glaubt mir wenn ich das sage, ich selbst hab das auch schon verrechnet.
Und zwar nutzen wir ein so genanntes Premium Theme mit einem Drag & Drop
Builder – der meiner Meinung nach, der beste am Markt ist.

Das Theme welches wir nutzen, nennt sich Divi. Ich hab nen Link
in der Beschreibung, falls ihr es euch ansehen möchtet. Weiters
haben die Developer von dem Theme manchmal Werbeaktionen, sobald
es eine Werbeaktion gibt, wird der Link aktualisiert, somit habt
ihr immer den aktuell günstigsten Preis.

 

///////

 

Nun, das Theme kommt auf den ersten Blick etwas überteuert rüber, denn
man kann entweder eine Einmalzahlung von 249 US Dollar machen, dann
bekommt man zeitlich ubegrenzt Updates und Support oder man schnappt
sich das jährliche Abo um 89 US- Dollar.

Nicht umbedingt das günstigste Theme, welches es so gibt, aber
das hat auch einen guten Grund.

Die Funktionalität und Möglichkeiten welche du mit diesem Theme hast
ist Wahnsinn. Glaub mir wenn ich das sage, das ist das einzige Theme
was du jemals brauchen wirst – garantiert. Einen Teil der Funktionen
wirst du außerdem noch in diesem Video sehen.

Nichtzuvergessen, eine Webagentur würde dir einige tausend Euro dafür
abnehmen um so eine Website zu gestalten.

Nimm dir also den Plan der dir zusagt (ich hab den Lifetime Plan
genommen, weil man nur einmal zahlt) und dann klick auf Sign Up Today

Füll deine Login und Rechnungsinformationen aus und wähl aus ob du mit
Kreditkarte oder Paypal bezahlen möchtest und klick auf Complete Registration

Sobald du Divi gekauft hast, log dich ins Dashboard ein und lad dir die
gezippte Divi Theme Datei im Memberbereich runter.

Die Zip-Datei, welche nun runtergeladen wird, laden wir jetzt in WordPress
hoch.

Nun geh zurück in dein WordPress Dashboard, klick auf Themes beim Design
Reiter.

Klick auf Theme hinzufügen und wähl Divi aus. Sobald der Upload abgeschlossen
ist klick auf aktivieren.

 

/////////////////////////////////////

Um anzufangen, geh zu Divi, danach Theme Optionen, dann
geh auf den Builder Reiter und aktiviere den Classic Editor.

Ich erklär dir jetzt mal kurz wie der Divi Builder funktioniert.

Man hat Sektionen (zB eine Standardsektion wie wir sie gerade nutzen, eine
Fullwidth-Sektion oder eine Spezialsektion, du wirst wahrscheinlich selten
eine Spezialsektion verwenden, aber zusammengefasst, gibt sie dir die Möglichkeit
komplexere Layouts zu designen).

Wir bleiben jetzt aber mal bei einer Standardsektion.

Innerhalb von Sektionen, hast du Zeilen, auch Rows genannt, welche einspaltig
sein können, allerdings auch bis zu 6 Spalten besitzen, je nach Einstellung
versteht sich.

Wir fügen jetzt einfach mal eine 2 spaltige Zeile hinzu. Jetzt wo wir
eine 2 spaltige Zeile haben, sehen wir 2 Container, in denen wir Module
einfügen können.

Wir adden jetzt mal einen Text. Hier seht ihr alle Module, welche euch
Divi zur Verfügung stellt. Wir wollen nur n bisschen Text, also nehmen
wir das Text-Modul.

Wie du siehst, kommt das Textmodul mit dem Standard Texteditor, den du
bereits vom normalen Seitenerstellen kennst.

Fügen wir nun ein paar Wörter hinzu.

Jedes Modul kommt außerdem mit einem Design & Advanced Reiter

Zum Beispiel kannst du im Design Tab die Schriftart ändern, du
kannst die Größe und Farbe ändern und das heruntergebrochen auf jedes
Element, welche das Modul enthält.

Ich kann dir das leider für jedes Modul einzeln zeigen, das würde schlichtweg
zu lange dauern, also lassen wir es jetzt mal so wies is.

Im Advanced Reiter für Fortgeschrittene, kannst du außerdem Klassen und IDs
definieren, sowie benutzerdefiniertes CSS hinzufügen. Falls du keine
Ahnung hast was ich gerade gesagt hab, dann lass den Advanced Reiter
vorher aus, für einen Neuling macht es definitiv Sinn erstmal nur im
Design-Reiter sich auszutoben.

Klick auf speichern sobald du fertig bist und gut is.

 

/////////////////////

 

Nun wollen wir n Bild hinzufügen, also runterscrollen und auf Image klicken

Hier hast du wieder ein paar Einstellungen fürs Bild, aber wir wollen jetzt
erstmal nur eins hochladen, also auf Upload Image klicken, hochladen und speichern
klicken.

Schauen wir uns mal an wie das jetzt aussieht. Ok, sieht eigentlich echt hässlich
aus. Aber Divi hält für uns zum glück vorgefertigte Templates bereit. Geht zurück
in den Editor und klickt Layout laden.

Beim Premade Layouts Reiter hast du nen Haufen von richtig gutaussehenden Layouts
welche zur freien Verwendung stehen. Für dieses Tutorial nutzen wir das Agency
Layout Pack. Klick aufs Layout Pack und such dir das Layout raus, welches du
verwenden möchtest. Ich nutz jetzt mal das Home Layout, klick auf replace
existing content und wähl das Home Layout aus.

Das fügt jetzt einige Sektionen, Zeilen und Elemente zum Divi Builder hinzu.
Und da das wirklich viele sind, sehen wir uns die mal mit dem visuellen Builder
an.

Speicher den Entwurf auf der rechten Seitenleiste und klick auf Use Visual Builder

Sieht eigentlich schon echt nett aus, wenn du mich fragst.

Möchtest du allerdings etwas ändern, geht das ziemlich einfach, indem
du einfach auf das Element klickst.

Möchtest du zum Beispiel den Text hier verändern? Kein Problem.

Du möchtest die Spaltenstruktur der Zeile ändern? Klick auf das Spaltensymbol
der Zeile und änder die Spalteneinstellung.

Klick einfach drauf und änder was du ändern willst.

Du kannst außerdem alles einfach duplizieren. Klick einfach auf das
Duplizieren-Icon und nun hast du eine Kopie. Du möchtest was löschen?
Klick auf das Mülleimer-Symbol.

Zieh etwas wo anders hin und fertig. Der Visual Builder ist ziemlich
intuitiv.

Der Divi Builder hat hunderte Funktionen. Ich möchte dir aber nicht nur
zeigen wie man vorgefertigte Layouts reinlädt, sondern auch wie man
selbst etwas nachbaut oder gestaltet.

Machen wir nun also selbst eine Seite die ähnlich wie diese aussieht.

Wir sind zurück hier im Divi Builder und designen jetzt die Seite nach.

Klick also auf Clear Layout und dann fangen wir schon von Neu an.

Wir nehmen jetzt eine einspaltige Zeile und fügen ein Call To Action Modul
ein.

Jetzt fügen wir einen Titel, einen Button Text und etwas Beschreibung hinzu,
sodass die Leute wissen was wir eigentlich genau machen.

Als nächstes kommt der Button Link dran, da wir aber noch kein Linkziel haben
lassen wir das mal weg und speichern erstmal.

Wie du sehen kannst, haben wir nen Titel mit Beschreibung, allerdings fehlt
der Button.

Das liegt dran, da wir das Linkziel nicht ausgefüllt haben.

Das ändern wir jetzt also.

Wir fügen jetzt mal noch eine Sektion mit einer Zeile hinzu und geben
der Zeile eine ID. Wenn wir nämlich einem Element eine ID geben, können
wir später mit dem Button zum jeweiligen Element springen (in dem Fall
diese Zeile grad).

Kopier die ID und füg sie beim Button-Link ein mitsamt eines Raute oder Hashtag
Zeichens.

Würden wir jetzt auf den Button klicken, springen wir automatisch
zur Sektion.

 

///////////////////////////

Um den nächsten Teil der Website zu gestalten, nehmen wir ne Sektion mit
einer 3-spaltigen Zeile. Also erstellen wir ne Sektion und fügen
ihr eine Zeile mit 3 Spalten hinzu.

Das Modul was jetzt in die Spalten reinkommt nennt sich Blurb und besteht
aus nem Icon oder Bild, nem Titel und etwas Text.

Ich kopier einfach mal den Text von der Beispielseite. Möchtest du
ein Icon verwenden klick auf custom Icon, wähl das Icon aus
welches dir gefällt und klick auf speichern.

Das kopiern wir jetzt zwei mal und klicken auf Vorschau um zu sehen wies
aussieht.

 

Der nächste Teil besteht aus nem Bild und wieder aus nem Call To Action

Also neue Sektion erstellen, 2spaltige Zeile hinzufügen und das Bild Modul
hinzufügen.

Für die zweite Hälfte dieser Zeile, nutzen wir wieder ein Call To Action
Modul.

Füg dem Modul wieder Titel, Text, Button-Text und Linkziel hinzu und klick
speichern.

Weiters fügen wir gleich noch ein Kontaktformular hinzu, aber hierfür
verwenden wir ne einspaltige Zeile.

Wenn du du dich noch erinnern kannst, haben wir ja ganz am Anfang eine Sektion
mit ner einspaltigen Zeile erstellt und der Zeile eine ID gegeben.

Also verwenden wir gleich diese Zeile und fügen ihr das Kontaktformular Modul
hinzu.

Das coole daran ist, dass jemand nun automatisch zum Kontaktformular gelangt,
sollte man auf den Kontaktieren Button klicken.

Wir individualisieren jetzt mal unser Kontaktformular.

Gib dem Kontaktformular einen Titel und einen Button Text wie zum Beispiel
Jetzt Anfrage senden, Absenden, etc.

Vergiss allerdings nicht auf die Email Einstellungen, denn du willst ja
Nachrichten erhalten, welche vom Kontaktformular abgesendet werden.

Also beim Kontaktformular runterscrollen bis zum Email Bereich und füg
alle Email-Adressen hinzu, welche Nachrichten von diesem Kontaktformular
erhalten sollen.

 

 

//////////////////

 

Jetzt da wir alle Sektionen, Zeilen und Module haben, die wir brauchen
wirds Zeit diese auch noch zu designen, weil ungestylt macht das ganze
jetzt noch wenig her.

Speicher also deine Seite und klick auf visual Builder. Wir starten jetzt
mal mit dem obersten Bereich, also geh zum Call To Action Modul
und entferne die Hintergrundfarbe.

 

Danach gehts zu den Einstellungen der Sektion, welche den Call To Action
enthält, geh zu den Hintergrund Optionen und klick auf die Bildauswahl.

Wähl das Bild aus welches dir gefällt und geh zum Gradient Tab bei den
Hintergrund Optionen.

Aktivier noch die Place Gradient Over Background Image Option und nun hast
du die Möglichkeit transparente Farben übers Bild zu legen, indem
du auf die Farben klickst und mit dem rechten Regler die Transparenz
einstellst.

Wenn du auf den Rand einer Sektion oder Zeile klickst, kannst du den
Abstand vom Inhalt dieser Sektion oder Zeile ändern, indem dass du den
Rand herumschiebst.

Jetzt ändern wir noch die Inhalte vom Call To Action.
Wir wollen den TItel etwas dicker und größer, also klicken wir bei
Title Font Weight auf Ultrabold beim Design Tab.

Danach ändern wir die Größe mit dem Größenregler.

Die Beschreibung ändern wir auch noch, sodass es leichter zu lesen ist.

 

Um den Button zu ändern navigier zu Button und aktivier Use Custom Style
For Button.

Änder den Hintergrund, ich nehm da jetzt mal hellgrün.

Was den Border, also Rand betrifft, nehm ich jetzt mal keinen, also kommt
hier ne 0 rein.

Weiter gehts mit dem Radius des Buttons. Ich will, dass mein Button
pillenförmig aussieht, deswegen stellen wir hier den Radius maximal ein.

Du hast noch zahlreiche andere Möglichkeiten den Button anzupassen.

Möchtest du zum Beispiel beim Herüberfahren des Buttons ein Icon anzeigen
lassen kannst du das hier machen.

So speichern und fertig.

 

Weil wir das gleiche Call To Action Modul, welches wir grad designt haben weiter
unten in der 2 spaltigen Zeile verwenden, kopieren wir das jetzt mal
und ziehen es runter in die 2 spaltige Zeile.

Einfach Text kopieren in den kopierten Call To Action, Schriftfarbe
ändern und fertig.

Da wir es so aussehen lassen wollen wie auf der Beispielseite, klick
auf die Zeileneinstellungen, aktivier die Make This Row Fullwidth
Funktion und stell die Custom Gutter Width auf 1. Denn jetzt
haben die Spalten keinen Abstand mehr zueinander.

Problem ist nur, dass das jetzt ziemlich merkwürdig aussieht, deswegen
fügen wir jetzt mal einen Padding Abstand in die 2. Spalte ein.

Geh also noch mal zu den Zeileneinstellungen im Designtab und scroll runter
bis Spacing, und füg 8% oben und unten, sowie 6% Abstand links und rechts
bei der Column 2 Custom Padding Sektion ein.

Mit den Prozentwerten passt sich das immer der Displaygröße an.

Fehlt nur noch die Hintergrundfarbe. Also zurück zu den Zeileneinstellungen,
danach navigier zur Column 2 Background Sektion und wähl die Hintergrundfarbe
aus die dir gefällt.

Sollten die Spalten nicht gleich hoch ausfallen, geh in den Designeinstellungen
der Zeile auf Sizing und aktivier „Equalize Column Heights“

 

/////

Nun stylen wir unser Kontaktformular so wie das auf der Beispielseite.

Klick auf die Einstellungen des Kontaktformulars, dann klick auf die
Feldeinstellungen und geh zum Design Reiter.

Aktivier „Make Fullwidth“ und wiederhol das mit dem Email Feld.

Um das Captcha zu entfernen, scroll runter zu Elemente und deaktivier

das Display Captcha Feld.

Dann geh zum Design Reiter, des Kontaktformulars, scroll runter zum Button,
aktivier wieder die Custom Styles und übernimm die gleichen Einstellungen
des Buttons wie beim Call To Action.

Jetzt ändern wir den Hintergrund der Kontaktformular Sektion.

Wir nehmen wieder ein Bild als Hintergrund, und stellen die Hintergrundfarbe
der Zeile auf weiß. Pass nun den Abstand der Zeile an mittels Drag & Drop oder
gib die Abstände im Spacing Bereich des Design Tabs der Zeile ein.

Solltest du einen Rand um die Eingabefelder wollen, geh zu den Kontaktfeld-
Einstellung des Kontaktformulars und weiter zur Border-Sektion im Design
Tab, wo du dem Eingabefeld eine individuelle Randbreite geben kannst.

Danach geh zum Field-Text Bereich, und gib dem Eingabefeld eine eigene
Hintergrundfarbe.

Das gleiche machst du jetzt für alle anderen Eingabefelder auch.

////////////////////

Es wird Zeit, dass wir die Seite finalisieren. Ich beheb nur noch schnell
ein paar Fehler bei den Abständen und dann gehts hoch zur Icon Sektion.

Wir passen jetzt die Icons an, sodass sie zum Design der Website passen.

Geh zu den Einstellungen und Aktivier Circle Icon und pass die Hintergrundfarbe
an.

Stell die Größe des Textes so ein, dass es gut lesbar ist und richte den Text
mittig aus via Text Orientation, noch 2 mal kopieren und fertig.

Ich pass jetzt nur noch schnell die Kontaktformular Sektion an, da ich noch
nicht wirklich zufrieden bin mit dem Ergebnis.

Du kannst mir entweder dabei zusehen wie ich das umstyle oder einfach 30 Sekunden
vorwärtsspulen, wo ich dir zeige, wie man Layouts und globale Elemente effektiv
nutzt, um extrem viel Zeit zu sparen beim Designen.

 

Ich hab nun eine Testseite erstellt, welche wir für unsere Über Uns Seite nutzen.

Außerdem hab ich eine Über Uns Seite erstellt, allerdings fehlt hier noch der Inhalt.

Wir füllen jetzt die Über Uns Seite mit dem Inhalt von der Testseite mittels der
Layout laden Funktion, klick also auf Load Layout, dann auch Your Existing Pages
und lad die Testseite rein.

Divi speichert nämlich autoatisch alle Layouts von deinen Seiten, was ziemlich praktisch
ist, wenn du immer einfach schnell die aktuellste Version einer Seite wiederverwenden
möchtest.

Solltest du allerdings ein Layout extra speichern wollen ohne dass es sich automatisch
aktualisiert, klick einfach auf Save To Library und gib dem Layout einen Namen.

 

Wie du sehen kannst, sieht die Über Uns Seite nun aus wie die Testseite.

 

Nun zeig ich dir wie Globale Elemente funktionieren und wie man sie einsetzt.

Globale Elemente können Sektionen, Zeilen und Module sein, die sich automatisch
auf jeder Seite aktualisieren auf deren sie verwendet werden, wenn sie
bearbeitet werden

Das ist ziemlich praktisch wenn du Teile deiner Website öfters verwendest, aber
nicht jedes mal jede Seite einzeln aktualisieren möchtest.

Wir ändern jetzt die 2-spaltige Zeile, also speichert diese Sektion mal als Globales
Element auf der Testseite, dann spring rüber zur Über Uns Seite und lad das Layout
der Testseite nochmal neu rein.

Wie du sehen kannst. Ist die Sekton mit der 2-spaltigen Zeile jetzt hellgrün markiert.
Das heißt, dass dieses Element jetzt ein Globales Element ist.

Ändern wir den Titel des Call To Action Moduls innerhalb der Globalen Sektion, klick
auf speichern und update die Seite.

Dann zurück zur Testseite und aktualisier das Fenster. Wie du sehen kann, hat
sich der Titel des Call To Action Moduls aktualisiert, ohne dass wir das Modul
auf der Testseite aktualisieren müssen.

 

///////

Zu guter letzt ändern wir das Logo und das Menü, geh zurück ins Dashboard und uploade
das Logo bei den Theme Optionen unter dem Divi Reiter, klick speichern

und fertig.

Nun geh zum Menü unter dem Design Reiter und füg die Startseite sowie die Über Uns Seite
hinzu.

Wir wollen es unseren Website-Besuchern extra einfach machen, dass sie uns erreichen,
also fügen wir einen Link ins Menü hinzu, bei dem man sofort zum Kontaktformular
springt, sobald man draufklickt.

Füg also einen Individuellen Link hinzu, und gib als Linkziel Schrägstrich Vorwärts ein,
dass gibt an dass es sich um die Homepage handelt und danach das Raute Zeichen mit Contact,
denn falls du dich noch erinnern kannst, ist das die gleiche ID, welche wir fürs
Kontaktformular verwendet haben.

Wähl noch primäres Menü aus und klick auf speichern.

Nun schau dir das Logo an mit dem neuen Menü.

Klick man nun auf den Kontaktlink im Menü, springt man automatisch zum
Kontaktformular.

So, das wars mit dem Tutorial, ich hoffe es hat dir dabei geholfen deine
eigene Website zu machen, lass ein gefällt mir da, falls es dir gefallen hat
und solltest du irgendwelche Fragen haben, schreib sie einfach in die Kommentare
und ich versuch mein bestes sie so schnell wie möglich zu beantworten.

Bis bald und viel Erfolg

 

///// EDIT IM NACHTRAG

 

Vergesst außerdem nicht noch ein Impressum und Datenschutz als Seite hinzuzufügen,
denn wir haben Impressumspflicht.

Ich hab euch auf der websiteexplained.de Website 2 Links hinterlegt, welche euch
zum Impressums & Datenschutzgenerator von E-Recht24 weiterleiten.

Dort könnt ihr einfach eure Daten eingeben, den Gesetztestext kopieren & auf die
neu erstellten Seiten einfügen.

Wo ihr die Seiten dann einfügt, bleibt euch überlassen, allerdings sollten diese 2
Unterseiten auf jeder Seite eurer Website verfügbar sein. Fügt sie entweder in einem
Footer Menü hinzu oder unter Kontakt im Hauptmenü.