Die ultimative Anleitung zum Website erstellen [Nichtswisser Edition 2023]

Sie brauchen Hilfe mit Ihrer Website? Buchen Sie jetzt Ihren preisgünstigen Webdesigner, schon ab 200€.

Links zu Drittanbietern sind Partnerlinks. Wir erhalten eine Provision bei qualifizierten Verkäufen.

Die ultimative Anleitung zum Website erstellen [Nichtswisser Edition 2023]

von | Nov 21, 2022

Sie möchten eine Website erstellen? In diesem Tutorial lernen Sie alles, was Sie wissen müssen, damit Sie Ihre eigene Website erstellen können. Zuerst gehen wir auf die verschiedenen Begriffe ein, die man für eine Website verwendet. Dann testen wir alle der bekannten Website-Baukasten, mit denen man eine Website erstellen kann, wie zum Beispiel Jimdo, Webflow, Wix, WordPress und Divi. Danach lernen Sie, wie man eine Domain kauft auf United Domains und abschließend erstellen wir gemeinsam Ihre erste eigene WordPress Website.

Begriffserklärung

Wenn man eine Website erstellen möchte, muss man zuerst einige neue Begriffe lernen. Im Folgenden die offizielle Definition aller Begriffe, die Sie kennen müssen, entnommen vom Duden und Wikipedia.

Unterschied: Website, Webseite, Homepage

  • Die Website steht für alle hinter einer Domain (wie studentenwebdesign.de) stehenden Webseiten.
  • Die Webseite steht für eine einzelne Seite einer Website (z.Bsp. studentenwebdesign.de/blog).
  • Die Homepage ist die Startseite einer Website, also studentenwebdesign.de ist unsere Homepage.
  • Als Beispiel ist studentenwebdesign.de/blog eine Webseite von der Website studentenwebdesign.de.
  • Auch ist die Webseite studentenwebdesign.de die Homepage der Website studentenwebdesign.de.

Quelle: Duden und Wikipedia.

Da der Begriff Webseite und Website sehr ähnlich ist, werden wir hier in dieser Anleitung zu einer Webseite auch Unterseite sagen, studentenwebdesign.de/blog bezeichnen wir hier dann als Unterseite von studentenwebdesign.de.

Was ist eine Landingpage?

Eine Landingpage ist eine speziell für ein Produkt oder Dienstleistung eingerichtete Webseite, die auf eine bestimmte Zielgruppe optimiert wurde. Auf einer Landingpage steht ein bestimmtes Angebot im Mittelpunkt, welches ohne Ablenkung vorgestellt wird. Zum Beispiel unsere Landingpage https://studentenwebdesign.de/homepage-erstellen-lassen-student/, welche speziell auf Personen ausgerichtet ist, die nach einem Studenten suchen, der einem bei der Erstellung einer Website hilft.

Was ist ein One-Pager?

Das Wort One-Pager ist ein Neologismus und hat es noch nicht in ein Wörterbuch oder Wikipedia geschafft. Damit wird eine Website gemeint, auf der es lediglich eine Landingpage auf der Homepage gibt. Da jede Website im deutschen Sprachraum auch immer ein Impressum und eine Datenschutzerklärung hat, besteht eine deutsche Website immer aus mehr als nur einer Webseite. Folglich ist ein One-Pager eine Website mit nur einer Landingpage, aber sie hat immer mehrere Webseiten, wegen des Impressums und des Datenschutzes.

Da der One-Pager oft lediglich auf der Homepage gezeigt wird, bezeichnen viele ihre gesamte Website dann mit Homepage. Wenn die Website aus nicht mehr als einer Landingpage auf der Homepage besteht, kann man auch vereinfacht Homepage zu der ganzen Website sagen.

Was ist eine Domain?

  • Eine Domain ist eine Internetadresse, unter der eine Website erreichbar ist.
  • Sie besteht aus drei Teilen, der Subdomain, der Second-Level-Domain und der Top-Level-Domain
  • Top-Level-Domains sind zum Beispiel .de und .com sie stehen oft für die Sprache.
  • Die Second-Level-Domain ist bei uns studentenwebdesign und ist der Name der Domain.
  • Die Subdomain einer Domain ist zum Beispiel das www zu Beginn und es ist optional.

Quelle: Duden und Wikipedia.

Was ist ein Server?

Ein Server ist ein Computerprogramm oder Gerät, auf das über das Internet zugegriffen werden kann.

Was ist ein Webhosting?

Ein Webhosting beschreibt die Bereitstellung eines Speicherplatzes für Dateien auf einem Server, auf den vom Internet aus zugegriffen werden kann.

CMS, SaaS und Web-CMS

Im Folgenden die drei verschiedenen Techniken, mit denen Sie bei der Erstellung Ihrer Website in Berührung kommen.

  • Content-Management-System (kurz CMS) ist eine Software zur Erstellung von diigitalen Inhalten.
  • SaaS-Anwendungen sind Programme, die auf einem Server laufen und die Sie über Ihren Browser benutzen.
  • Website-Baukasten (auch Homepage-Baukasten, Internet-Baukasten, Web-Baukasten, Website-Builder, Site-Builder oder Page-Builder) ist ein Web-CMS (kurz WCMS), mit denen ganze Websites erstellt werden können.

Wir werden in dieser Anleitung alle 3 dieser Techniken mit Beispielen demonstrieren. Sie werden am Ende dieses Tutorials einen sehr guten Überblick über genau diese drei verschiedenen Techniken zur Website-Erstellung haben.

Was ist ein Blog?

Blog ist kurz für Weblog und ist ein auf einer Website geführtes öffentliches Tagebuch, auf der eine Person, der Blogger, Aufzeichnungen festhält.

Struktur einer Website

Wenn Sie jetzt Ihre eigene Website erstellen wollen, müssen Sie sich zwischen den folgenden drei Optionen entscheiden:

  • Wollen Sie nur eine Homepage, mit Impressum und Datenschutz? Das ist dann der One-Pager und besteht aus 3 Webseiten mit lediglich einer Landingpage, und zwar direkt auf der Homepage.
  • Wollen Sie auch die klassischen About, Kontakt und Leistungen Unterseiten? Dann haben Sie insgesamt 6 Webseiten.
  • Wollen Sie auch einen Blog? Dann haben Sie lediglich eine weitere Webseite. Den Blog muss man nicht extra einbauen, der ist bereits Teil jeder Website, denn alle gängigen Websites kommen mit einem CMS integriert. Sie haben dann also eine Website mit 7 Webseiten.

Was Sie machen können, ist erstmal mit der ersten Option anzufangen, also Sie erstellen erstmal nur einen „One-Pager“.

Wenn der steht, können Sie immer noch später weitere Unterseiten einbauen. Der One-Pager ist aber bereits ausreichend, um Ihr Produkt oder Dienstleistung zu bewerben, denn er enthält eine Landingpage, auf Ihrer Homepage, die für Ihre Zielgruppe optimiert ist und auf der Ihr Angebot ohne Ablenkung präsentiert wird.

Website-Builder

Es gibt sehr viele verschiedene Website-Builder, mit denen Sie Ihre Website erstellen können. Wenn man als Anfänger in die Welt des Bloggens und des Webdesigns einsteigt, ist man erstmal komplett überwältigt und weiß nicht, wo man anfangen soll.

Wenn man dann etwas im Internet recherchiert, wird man von der Vielzahl der Möglichkeiten zur Erstellung einer Webseite überflutet: WordPress, Webflow, Wix, Shopify oder Joomla, mit welchem Programm sollen Sie jetzt Ihre Website erstellen?

Jeder gibt einem einen anderen Ratschlag und irgendwann ist man sich gar nicht mehr sicher, was auch wirklich guter Ratschlag ist. Deshalb gehen wir in dieser Anleitung über sämtliche bekannten Homepage-Baukasten und erläutern mit Screenshots und Schritt-für-Schritt-Anleitungen, welche Optionen Ihnen zur Verfügung stehen und wie Sie diese Werkzeuge benutzen.

Vom Anfänger zum Profi.

Homepage-Baukasten Statistiken

Auf dieser Seite: https://w3techs.com/technologies/details/cm-wordpress werden Statistiken bezüglich der am meisten verwendeten Web-Baukasten veröffentlicht. Dort wird folgendes über die momentane Marktsituation gesagt:

WordPress is used by 64.2% of all the websites whose content management system we know. This is 43.0% of all websites.

https://w3techs.com/technologies/details/cm-wordpress

Und einmal auf Deutsch:

WordPress wird von 64,2 % aller Websites verwendet, deren Content-Management-System wir kennen. Das sind 43,0 % aller Websites.

https://w3techs.com/technologies/details/cm-wordpress

Alle Website-Baukasten sind auch CMS-Systeme, das sind alles die Anwendungen, die für Sie infrage kommen würden, um Ihre Website selbst zu erstellen und von all denen ist WordPress die führende Software.

Katy Perry benutzt WordPress

Es gibt eine ganze Liste von bekannten Firmen und Personen, die WordPress benutzen, wie zum Beispiel Katy Perry, Salesforce, MTV, New York Times, Vogue, Etsy und Yelp.

Als Beispiel schauen wir uns die Website von Katy Perry genauer an: https://www.katyperry.com/

Wenn Sie die Website von Katy Perry in einen WordPress-Detektor eingeben, wie zum Beispiel diesen hier: https://whatwpthemeisthat.com/ sehen Sie folgendes Resultat:

Kate Perry benutzt also ein selbst gehostetes WordPress mit einem selbst erstelltem Theme. Falls Sie also so erfolgreich wie Katy Perry wären, dann würden Ihre Team-Kollegen Ihnen auch dazu raten, Ihre Website mit WordPress zu erstellen.

Wir auf Studenten Webdesign empfehlen Ihnen ebenfalls WordPress zu benutzen. Wir werden auf WordPress als Letztes in diesem Beitrag eingehen und erklären Ihnen Schritt für Schritt, wie Sie es einrichten können.

Vorher werden wir aber noch über die Alternativen von WordPress gehen, damit Sie sich ein Bild davon machen können, was die anderen Optionen wären.

WordPress.com und WordPress.org

Sie haben bestimmt schon irgendwo die Anzeigen für Wix gesehen. Die bewerben Ihr Produkt damit, dass Sie mit Wix Ihre Website mühelos selbst erstellen können. Auch andere Blogger raten oft dazu, mit Wix Ihre erste Website zu erstellen, angeblich soll das leichter sein als WordPress. Das ist aber nicht ganz korrekt, denn es gibt WordPress in zwei unterschiedlichen Versionen, und eine davon ist ebenfalls auf Anfänger ausgerichtet. Es gibt diese zwei Versionen:

Sie sehen, das Ende des Domainnamen ist anders. Da steht einmal .com und einmal .org.. Die erste Version, mit dem .com ist eine Abkürzung für Commercial, also kommerziell und dabei handelt es sich um ein WordPress, bei dem sich ein Team von Programmierern im Hintergrund um Ihre Website kümmert.

Es ist ein kostenpflichtiges WordPress, aber es enthält ebenfalls eine Gratis-Version zum Testen, genau wie Wix. Diese Version ist äußerst vereinfacht, aber auch beschränkt mit kostenpflichtigen Upgrades, genau wie Wix.

Die zweite Version mit dem .org ist eine Abkürzung für Organisation und wurde damals für Non-Profit Organisationen verwendet, also für Firmen oder Vereine, die nicht auf Profit aus sind. Dabei handelt es sich um ein kostenfreies WordPress, dass Sie selbst kontrollieren, das ist dasselbe WordPress wie das von Katy Perry und auch das, was die meisten benutzen.

Man nennt das WordPress.org häufig einfach nur WordPress. Sie werden nur die Unterscheidung sehen zwischen WordPress und WordPress.com. Also nur bei der .com Version erwähnt man die Endung auch, bei WordPress.org können Sie das org einfach weg lassen. Wenn Sie aber WordPress.com benutzen, müssen Sie das immer explizit erwähnen.

WordPress.com Website erstellen Anleitung

Wir werden jetzt zuerst einmal zeigen, wie Sie eine Website mit WordPress.com erstellen. Sie müssen dies jedoch nicht nachmachen, das dient nur zur Veranschaulichung, damit Sie einen Überblick haben und damit Sie auch den Unterschied zwischen WordPress.org und WordPress.com kennen.

Um jetzt eine Website auf WordPress.com zu erstellen, muss man zuerst auf diese URL gehen: https://wordpress.com/de/

Dann muss man auf den blauen Knopf klicken.

Dann sieht man das hier.

Man kann sich dort jetzt ganz einfach mit seinem Google Mail oder seinem Apple Account mit einem Klick anmelden.

Wenn man beides nicht hat, kann man auch einfach nur mit einer E-Mail ein Account erstellen.

So sieht es aus, wenn Sie einen Account per E-Mail machen.

Dann klickt man auf Konto erstellen und im nächsten Schritt kann man nach einem Domainnamen suchen. Dann muss man aufpassen, dass man auf die gratis Version von WordPress klickt und nicht auf die kostenpflichtige.

Hier der Screenshot, wo man da klicken müssen:

Die ersten zwei Optionen darf man nicht wählen. Klicken Sie auf die dritte Option, da, wo kostenlos steht.

ACHTUNG: Klicken Sie auf keinen Fall auf die ersten zwei Optionen, selbst wenn da jetzt nur 18 € steht. Sie werden dadurch sehr viele Probleme haben, wenn Sie dann später zu Ihrem eigenen WordPress wechseln wollen. Dann bekommen Sie Ihren Domainnamen nicht mehr so leicht von WordPress.com weg, der liegt dann bei WordPress.com und dann müssen Sie einen Domain-Umzug machen, was sehr aufwändig ist. Falls Sie das Tutorial hier nachmachen, dann dürfen Sie das bitte nicht falsch machen oder Ihr Wunschdomainname ist erstmal weg und Sie können sich einen neuen überlegen.

Also bitte richtig klicken.

Klicken Sie nur auf das Kostenlos.

Im nächsten Schritt sehen Sie dann das hier. Dort müssen Sie wieder aufpassen, klicken Sie auf den kleingedruckten Link oben rechts.

Ignorieren Sie alles, was da unten steht,

Sie müssen auf das ganz kleine „starte mit einer kostenlosen Website“ oben rechts klicken.

Da es wirklich schwer zu sehen ist, noch einmal denselben Screenshot mit einem größeren Kreis.

Sie brauchen diesem Tutorial nicht folgen, aber, falls Sie das machen und diese zwei Klicks jetzt richtig gemacht haben, dann haben Sie den schwierigsten Teil bereits hinter sich.

Jetzt können Sie im nächsten Schritt einfach auf Weiter klicken, Sie müssen da nichts auswählen.

Im nächsten Schritt können Sie das Thema Ihres Blogs wählen. Sie erhalten dadurch ein passendes Design für Ihre Webseite vorgeschlagen.

Ich habe jetzt Webdesign als Thema gewählt, nun kann ich mein Design auswählen.

Wenn Sie etwas runterscrollen, sehen Sie noch mehr Vorlagen.

Ich habe jetzt einfach direkt das zweite genommen.

Die Seite wird jetzt automatisch erstellt.

Das Grundgerüst steht jetzt.

Sie können jetzt oben Links auf den Website-Titel klicken.

Und dann müssen Sie oben Rechts auf das „zur Website“ klicken.

Jetzt klicken Sie auf „Website veröffentlichen“.

Und jetzt sehen Sie fast dasselbe wie vorher, nur ist diesmal die gratis Option ganz nach unten verschwunden. Scrollen Sie also ganz nach Unten bis ans Ende.

Und dort sehen Sie ganz unten versteckt die gratis Option, ganz um Ende der Seite. Dort klicken Sie auf „Kauf überspringen“.

Und jetzt sehen Sie wieder denselben Bildschirm von davor. Sie müssen jetzt wieder auf „starte mit einer kostenlosen Website“ obe Rechts klicken. Das kennen Sie ja bereits.

WordPress.com Website ist live

Und jetzt ist Ihre Website live. Sie können jetzt auf „Zur Webseite“ oben rechts klicken.

Und dort sehen Sie Ihre Website. Jetzt können Sie einfach die URL oben aus der Adresszeile kopieren.

Und dann können Sie die URL Ihrem besten Freund in WhatsApp schicken. Hier ist der Link meiner WordPress.org Website: https://studentenwebdesignblogger.wordpress.com/

Und auch die WhatsApp Nachricht, die ich Stolz einem Freund geschickt habe.

Sie haben jetzt quasi eine Testversion von WordPress, die ähnlich wie Wix gemacht ist.

Sie können jetzt nichts mehr falsch machen, die Website ist bereits live und Sie müssen nichts bezahlen.

Sie könnten diese Website als Spielwiese benutzen, aber wir werden in diesem Tutorial auch später zeigen, wie Sie direkt Ihre richtige Website machen können.

Wix Website erstellen Anleitung

Jetzt zeigen wir Ihnen, wie Sie mit Wix Ihre Website erstellen können.

Wie gesagt, müssen Sie bis jetzt noch nichts nachmachen. Falls Sie es trotzdem tun, müssen Sie als Erstes auf diese Seite gehen: https://de.wix.com/

Und dort dann auf „Eigene Website erstellen“ klicken.

Dort können Sie sich dann registrieren, Sie haben aber diesmal andere Registrierungsoptionen als bei WordPress.com. Sie können sich auf Wix nur mit Google oder Facebook anmelden. Bei WordPress.com konnten Sie sich mit Google und Apple anmelden, also schonmal ein Unterschied.

Schonmal etwas gelernt.

Hier nochmal zum Vergleich, wie es bei WordPress.com aussieht.

Ich habe mich jetzt mit meinem Google Account angemeldet und dann kommt als Nächstes dieser Bildschirm.

Ich klicke jetzt auf Business Website.

Jetzt können Sie Ihre Branche wählen.

Ich nehme jetzt mal Coach.

Dann müssen Sie einen Namen wählen.

Ich muss jetzt die Features meiner Webseite aussuchen.

Ich hatte ja vorher Coach ausgewählt, jetzt werden mir aber trotzdem nicht passende Optionen angezeigt. Tischreservierungen und Essensbestellungen sind jetzt nicht wirklich passend zum Coach.

Als Start würde ich nur den Blog empfehlen, denn alles andere klingt nach kostenpflichtigen Zusatzoptionen. Der Blog sollte umsonst sein.

Jetzt muss ich meinen Erfahrungsgrad angeben, ich wähle keine Erfahrung.

Ich kann jetzt meine Website mit Wix ADI erstellen lassen oder mit dem Wix Editor. Was die ADI ist wird nicht erklärt, aber die Größe des Buttons zwingt mich ja dazu, das zu wählen.

Jetzt muss man erstmal die Kontaktangaben machen.

Jetzt kann man das Design auswählen, ich nehme mal minimalistisch.

Gut, es waren nur zwei Fragen, jetzt kann ich das Design auswählen.

Ich nehme das Dark Mode Template in der Mitte, passt ja zu unserem Blog hier.

Jetzt muss ich noch die Unterseiten auswählen.

Ich habe jetzt einfach alles ausgewählt. Jetzt komme ich zum Editor.

Ich habe jetzt einfach auf Veröffentlichen oben rechts geklickt und dann kommt das hier.

Technischer Fehler. Aber sowas ist normal bei jeder Art von Website-Builder. Das kann immer vorkommen, das heißt nichts Schlimmes, wenn man es nochmal probiert klappt es dann meistens.

Ich versuche es jetzt mal über den „Speichern“-Knopf.

Jetzt kann ich auswählen, ob kostenfrei oder nicht, erstmal kostenfrei.

Das Speichern hat schonmal funktioniert.

Jetzt sehe ich das hier.

Jetzt habe ich auf „Veröffentlichen“ geklickt und diesmal hat es geklappt.

Jetzt kann ich meine eigene kostenfreie Wix-Seite sehen, indem ich auf „Website ansehen“ klicke.

Und dann komm ich hier hin,

Und hier ist der Link zu meiner neuen kostenfreien Wix-Website:

https://studentenwebdesign.wixsite.com/studenten-webdesign

Fazit-Tabelle: Wix & WordPress

WordPress.com
AnmeldeoptionenGoogle-Login, Apple-Login
AnmeldezeitSehr kurz und einfach
Werbe-AggressivitätExtrem hoch, aufpassen!
Erster EindruckSehr edel mit Apple Login und Account-Erstellung war sehr einfach.
Linkhttps://studentenwebdesignblogger.wordpress.com/
Bewertung5 Sterne

Wix.com
AnmeldeoptionenGoogle-Login, Facebook-Login
AnmeldezeitEin bisschen länger und komplizierter als bei WordPress.com
Werbe-AggressivitätNicht vorhanden, alles kostenfrei ohne Probleme.
Erster EindruckEin paar unnötige Fragen und kein Apple Login nur Facebook. Für deutsche ist das nicht optimal.
Linkhttps://studentenwebdesign.wixsite.com/studenten-webdesign
Bewertung5 Sterne

Wenn Sie sich jetzt mal das Ergebnis der beiden Seiten anschauen, sieht es bis jetzt so aus. Das hier ist die WordPress-Website: https://studentenwebdesignblogger.wordpress.com/

Und das hier ist die Wix-Website: https://studentenwebdesign.wixsite.com/studenten-webdesign

Webflow Website erstellen Anleitung

Jetzt erstellen wir eine Website mit Webflow. Sie melden sich dazu hier an.

Dann haben Sie die Option, sich mit Google oder mit E-Mail anzumelden. Also bis jetzt hatte WordPress.com die besten Login-Methoden. Ich wähle hier wieder den Google Login.

Jetzt müssen Sie ein paar Fragen beantworten, ähnlich wie bei Wix.

Es gibt diesmal ein paar mehr Fragen als bei Wix sogar.

Sie können die Fragen einfach wahrheitsgemäß beantworten, da gibt es keine versteckten Kostenfallen wie bei WordPress.com.

Man wird jetzt direkt erst einmal durch ein Tutorial geführt, absolut wichtig bei Webflow.

Webflow ist der komplizierteste Website-Builder, den Sie finden können, sehr anspruchsvoll.

Es wird einem diesmal eine ordentliche Einführung gegeben.

Webflow.Websites sind sehr kompliziert, sie kosten sehr viel Zeit, für Anfänger nicht zu empfehlen.

Ich verlasse das Tutorial jetzt und nehm eine Abkürzung.

Nachdem Sie das Tutorial verlassen haben, können Sie auf „Made in Webflow“ klicken.

Dort können Sie komplett fertig erstellte Webflow-Websites finden. Die können Sie einfach kostenfrei klonen. Es gibt auch kostenpflichtige Templates, aber die Gratis Templates reichen erstmal.

Ich klicke jetzt auf „Cloneable sites only“.

Wenn man mit der Maus über das Fragezeichen fährt, kommt der kleine Hinweis.

Frei für kommerzielle Zwecke nutzbar, und auch umsonst. Na dann mal schauen.

Webflow Templates sind sehr eindrucksvoll.

Ich klicke jetzt auf „Animation“, dann auf „Most liked“ und dann auf „Clonable sites only“ und nehme das zweite Template.

Das kenne ich von TikTok.

Das ist das Template, dass die ganzen Webflow-Webdesigner auf TikTok immer zeigen. Also erstellen wir jetzt die Webflow TikTok Website

Webflow TikTok Website erstellen

Einfach draufklicken und dann runterscrollen.

Mit „Open live site“ können Sie sich die Seite vorab anschauen.

Mit „Open in Webflow“, können Sie sich das Backend im Detail anschauen.

Um es jetzt zu benutzen, muss man auf „Clone in Webflow“ klicken.

Und dann muss man auf „Create site“ oben rechts.

Ein cooler Name wird mir direkt vorgeschlagen, ist halt ein Luxus-Produkt mit Liebe zum Detail. Dann einfach auf „Create site“ klicken.

Jetzt einfach ganz oben rechts auf „Publish“ drücken.

Und schon steht die Seite: https://studenten-webdesign-blog.webflow.io/

Gerne mal testen, hoch animiert, vor allem diesen Bildschirm kennt man von TikTok:

Man muss da ein paar mal draufklicken, um den Block zu brechen, fast wie ein Computerspiel.

Kann man auf TikTok auf jeden Fall noch einen oder zwei Follower bekommen.

Übrigens fällt mir gerade auf, dass die Subdomain mit dem Namen Studenten Webdesign bereits belegt ist, von uns sogar: https://studenten-webdesign.webflow.io/

Von vor fast 3 Jahren sogar.

Wie die Zeit vergeht.

Webflow Fazit

Webflow ist der Über-Page-Builder, damit können Sie die besten Websites überhaupt erstellen.

Webflow erstellt auch komplett sauberen Code, der sich als HTML und CSS exportieren lässt.

Sie bekommen da keinen Code mit unnötigen Überresten von einem Page-Builder, sondern das ist alles sehr ordentlich gemacht.

Der Nachteil ist halt, dass es höchst kompliziert und teuer ist. Webflow wirbt damit ein „No-Code“ Website-Builder zu sein.

Das wird bei Webflow in dem Sinne verstanden, dass Sie bei Webflow absolut alles machen können, dass Sie auch mit Code machen könnten und daher wirklich keinen Code mehr brauchen, es gibt da für alles eine Option.

Da ist quasi jeder Programmierbefehl, den es gibt, in Einstellungen mit Knöpfen und Reglern umgesetzt wurden.

Deshalb ist es das Super-Tool, wenn Sie bereits programmieren können. Es ist fast wie programmieren, Sie erstellen das Design mit derselben Logik, als wenn Sie es mit HTML und CSS schreiben würden.

Wenn Sie aber nicht programmieren können, dann müssten Sie die Logik erstmal durch Webflow lernen.

Für Programmierer absolut zu empfehlen, Sie sind dann quasi Webflow Experte ab Tag 1 und müssen nichts wirklich dazu lernen. Sie kennen die Logik dann schon. Es ist dann so, als ob Sie das Design mit CSS-Code schreiben würden, aber ohne dass Sie den Code ausschreiben müssten.

Der Zeitaufwand ist dadurch aber auch riesig und Webflow Seiten fangen oft bei 8000 € an, wenn Sie dafür einen Freelancer beauftragen.

Das Geld ist aber auch nötig, weil der Freelancer sehr lange dafür brauchen wird. Abkürzungen gibt es da kaum, selbst kleine Änderungen bedürfen viele Klicks.

Webflow einmal zu testen kann man aber auf jeden Fall.

Webflow hat zu Beginn einen merkwürdigen Überraschungseffekt. Zuerst haben Sie vielleicht das Gefühl, es ungefähr zu verstehen, und nach den ersten 4 bis 8 Stunden werden Sie dann erst merken, dass Sie die ganze Zeit die Website eigentlich nur zerstört haben.

Es fällt einem erst sehr spät auf, wie hoch kompliziert die Sache eigentlich ist. Die Website von Grund auf selbst zu programmieren, mit HTML und CSS, ist garkeine schlechte Alternative zu Webflow.

Fazit-Tabelle: Wix, WordPress.com, Webflow

WordPress.com
AnmeldeoptionenGoogle-Login, Apple-Login
AnmeldezeitSehr kurz und einfach
Werbe-AggressivitätExtrem hoch, aufpassen!
Erster EindruckSehr edel mit Apple Login und Account-Erstellung war sehr einfach.
Linkhttps://studentenwebdesignblogger.wordpress.com/
Bewertung5 Sterne

Wix.com
AnmeldeoptionenGoogle-Login, Facebook-Login
AnmeldezeitEin bisschen länger und komplizierter als bei WordPress.com
Werbe-AggressivitätNicht vorhanden, alles kostenfrei ohne Probleme.
Erster EindruckEin paar unnötige Fragen und kein Apple Login nur Facebook. Für deutsche ist das nicht optimal.
Linkhttps://studentenwebdesign.wixsite.com/studenten-webdesign
Bewertung5 Sterne

Webflow.com
AnmeldeoptionenGoogle-Login, E-Mail
SchwierigkeitNur für Experten – Unmöglich für Anfänger
ErstellungszeitWie von Hand programmiert.
Werbe-AggressivitätNicht vorhanden, alles kostenfrei ohne Probleme.
Erster EindruckHöchster Luxus nur für besondere Seiten.
Erstellte Webseitehttps://studenten-webdesign-blog.webflow.io/
Bewertung5 Sterne

Domain Kauf

Ihre erste Domain

Im Gegensatz zu anderen Website-Baukasten ist WordPress dauerhaft kostenfrei, Sie müssen aber für den Domainnamen und das Webhosting seperat zahlen.

Wenn Sie das direkt von einer Hosting-Firma kaufen, erhalten Sie es zum günstigsten Preis, den Sie bekommen können.

Die Software zum erstellen der Website, also das WordPress selbst, ist dauerhaft kostenfrei.

Das heißt auch, dass Sie bei WordPress nicht erst auf eine gratis Version beschränkt sind, sondern Sie erhalten sofort die Vollversion.

Es gibt da keine gratis Test-Version zum testen, deshalb fangen Sie bei dem Erstellen einer WordPress-Website als allererstes direkt mit dem Kauf Ihres Domainnamens an.

Bedeutung Ihres Domainnamens

Ein kurzes Zitat von Wikipedia, was eine Domain genau ist:

Ein im Internet weltweit einmaliger und eindeutiger und unter gewissen Regeln frei wählbarer Name.

https://de.wikipedia.org/wiki/Domain_(Internet)

Das Besondere an einem Domainnamen ist, dass er nur von einer Person einmal gewählt werden kann und dieser Person gehört der Domainname dann so lange, wie sie ihn nicht explizit kündigt.

Das hat jetzt sehr große Auswirkungen.

Man findet oft den Vergleich, dass ein Domainname ähnlich wie eine Immobilie ist.

Ein Domainname, den Sie kaufen, gehört Ihnen und nur Ihnen. Niemand kann Ihnen diesen wegnehmen und Sie können auch keinem anderen den Domainnamen entziehen.

TikTok zum Beispiel ist auch nur ein Domainname, die volle Internetadresse heißt TikTok.com. Wenn Sie mal schauen, dann kommen Sie durch https://www.tiktok.com/ direkt auf die Seite von TikTok.

Gute Domainnamen zu finden ist sehr wertvoll, denn Domainnamen sind einmalig, nur eine Person kann einen bestimten Domainnamen haben.

Sie können den nicht mit jemanden teilen, das ist ihr alleiniger Besitz und die Anzahl der Domainnamen ist limitiert.

Bei Domainnamen gilt, wer zuerst kommt, malt zuerst. Sie müssen sich die guten Domainnamen sichern, bevor jemand anderes das macht.

Wenn Sie einen guten kurzen Domainnamen haben, dann kann es sein, dass Ihr Geschäft nur dadurch gut läuft, dass Sie als Erstes den guten Domainnamen gekauft haben und Sie einfach schneller waren als jemand anders.

Das ist oft bereits das einzige Erfolgsgeheimnis.

Sich als Erstes den besten Domainnamen zu nehmen, kann bereits der Grund sein, wieso Ihr Geschäft überhaupt erfolgreich ist.

Die Konkurrenz kann da nichts mehr machen. Es ist nicht möglich eine ungefähr passende Alternative zu nehmen, die wirken alle etwas falsch und es gibt immer nur die eine richtige schreibweise.

Manche Domainnamen sind daher teurer als Immobilien. Zum Beispiel der Domainname beer.io kostet fast 200.000 €

Können Sie verstehen, wieso dieser Domainname 200.000 € kostet? Wenn Sie jetzt in dem Geschäft tätig wären, dann hätten Sie allein durch den Besitz dieser Domain einen unschlagbaren Vorteil gegenüber Ihrer Konkurrenz. Einen Vorteil, den die Konkurrenz mit keinen Mitteln kompensieren kann.

Denn der Domainname beer.io ist sehr einprägsam, äußerst einfach zu schreiben und sie werden sich an das Beispiel bestimmt noch in 10 Jahren erinnern.

Diese Vorteile hat man nur mit genau diesem Domainnamen (falls Sie Bier verkaufen natürlich).

Wenn Sie jetzt einen anderen Namen hätten, wie zum Beispiel timosbeer.io dann verlieren Sie all diese Vorteile und die Firma, die die Domain beer.io hat, wird Ihnen bei allen Marketingmaßnahmen für immer überlegen sein.

Sie haben keine Chance dagegen anzukommen, und das alles nur wegen des Namens der Domain.

Wenn man diesen Vorteil jetzt in Profit ausdrückt und dann für die nächsten 10 Jahre berechnet, dann werden Sie auch mit den 200.000 €, die Sie da investieren würden, falls Sie Bier verkaufen würden, tatsächlich Profit schlagen können.

Der Domainname ist tatsächlich 200.000 € Wert, das Geld kann eine Firma in dem passenden Bereich wirklich allein aus dem Namen der Domain wieder reinholen.

Nicht alle Domains sind so teuer, nur die, die bereits von jemanden gefunden und gekauft wurden. Diese Personen „Parken“ die Domains dann und warten, bis jemand sie abkauft.

Es gibt immer noch zahlreiche Domainnamen, die auch 200.000€ Wert wären, die aber noch keiner gefunden hat, weshalb man sie dann für einen Kleinstpreis kaufen kann.

Eine Domain, die noch nicht von jemanden gekauft wurde, kostet sogar manchmal nur 2€, zum Beispiel die folgende: biertrinken.one.

Niemand hat sich den Domainnamen gekauft, der ist quasi noch „frei“. Frei bedeutet, dass Sie den Domainnamen dann für einen Kleinstbetrag bekommen in dem Fall hier für knapp 2€.

Domainnamen worauf achten

Bei einem Domainnamen müssen Sie auf folgende zwei Dinge achten:

  • Er sollte keine Bindestriche enthalten
  • Er muss so kurz wie nur möglich sein

Wenn Sie sich mal die Domainnamen anschauen, die Sie kennen, dann sind das zum Beispiel diese hier:

  • Facebook.com
  • YouTube.com
  • TikTok.com
  • Instagram.com

Ja, das sind alles Domainnamen.

Ihnen fällt jetzt auf, dass es fast immer genau zwei kurze Wörter sind, alle ohne Bindestrich. Also Face und Book ist Facebook. You und Tube ist YouTube, so sehen perfekte Domainnamen aus. Ihr sollte auch so aussehen, oder so nah dran wie möglich.

Im deutschen Sprachraum gibt es eine kleine Ausnahme, dass die Wörter etwas länger sein können, weil deutsche Wörter generell länger sind. Sie sollten aber versuchen es so kurz wie nur möglich zu halten, manchmal geht es aber nicht kürzer. In dem Fall sollten Sie dann einfach die Bindestriche vermeiden.

Ihren Ruf schützen

Ich rate immer allen meinen Kunden dazu, zuerst den Vor- und Nachnamen jeweils mit dem .de und dem .com am Ende und ohne Bindestrich zu kaufen.

Der Grund hat weniger damit zu tun, dass wir zu einem persönlichen Branding raten würden oder nicht, sondern eher damit, dass Sie dadurch Ihren Ruf schützen.

Sie müssen damit keine Wesbite erstellen, aber es ist wichtig, dass Ihnen der Domainname mir Ihrem Namen gehört.

Wie Sie vielleicht wissen, googlen viele nach den Namen von Personen, über die Sie mehr erfahren möchten.

Sie wissen auch jetzt schon, dass jeder Domainname nur einmal genommen werden kann von nur einer Person.

Das heißt, falls Sie einen Namen haben, den irgendeine Person auf der Welt auch haben könnte, dann kann nur einer von Ihnen die Domain mit Ihrem Namen haben, und zwar die Person, die am schnellsten ist.

Sie können da nichts machen, wenn jemand Ihren Namen als Domain vor Ihnen kauft, ist er für immer weg.

Wenn Sie jetzt Ihren eigenen Vor- und Nachnamen nicht als Domain kaufen, dann wird es wahrscheinlich früher oder später jemand anderes mit dem gleichen Namen tun.

Diese Person kann dann mit der Domain, die Ihren Namen hat, alles machen, was sie will.

Wenn jemand dann nach ihrem Namen in Google sucht, wird immer nur die andere Person angezeigt werden und manche Leute, die Sie noch nicht kennen, werden dann denken, das wären Sie.

Sie haben dann keine Möglichkeit mehr, dass Sie unter Ihrem Namen gefunden werden.

Die richtige Schreibweise

Die richtige Schreibweise und den korrekten Domainnamen mit genau Ihrem Namen gibt es nur einmal, und es gibt keinen Trick, wie man das kompensieren könnten. Die richtige Schreibweise Ihres Namens als Domain ist die Folgende:

  • vornamenachname.de

und besser ist es, wenn Sie auch die .com Version nehmen, also:

  • vornamenachname.com

Zum Beispiel, wenn Ihr Name Paul Meier ist, dann wären die richtigen Domains:

  • paulmeier.de

und

  • paulmeier.com

Nur das ist die richtige Schreibeweise. Die Version mit dem Bindestrich wäre schon die schlechtere Version, denn bei Bindestrichen lässt sich die Domain als E-Mail-Adresse nicht mehr richtig benutzen.

Wegen des Bindestriches kann Ihre E-Mail auf zwei Zeilen gebrochen werden, wodurch man diese dann nicht mehr richtig kopieren kann. Das stellt dann ein Hindernis für andere dar sie zu kontaktieren und Sie können so Kontaktanfragen verlieren.

Wenn Sie aber nicht kontaktiert werden möchten, dann ist ein langer Domainname mit vielen Bindestrichen vorteilhaft. Sie werden dann nie gefunden und nie angeschrieben werden. In manchen Situationen macht sowas sogar auch Sinn. In Ihrem Fall sollte der Domainname aber kurz und ohne Bindestrich sein.

Domain-Verfügbarkeit prüfen

Um jetzt die Verfügbarkeit Ihres Domainnamens zu prüfen, klicken Sie hier.

Wir empfehlen United Domains für die Domainsuche. Es gibt eine gigantische Liste an Hostingfirmen, das ist ein hart umkämpfter Markt. Wir haben viele verschiedene Webhostings getestet und United Domains ist gefällt uns am besten. Die Firma gibt es schon seit 22 Jahren und hat den Sitz in Deutschland, die haben sich erprobt und sind weit bekannt.

Auf United Domains können wir auch direkt das WordPress.org im nächsten Schritt installieren, also Sie haben da alles, was Sie brauchen werden.

Schauen Sie jetzt erstmal, ob Ihr Vor- und Nachname noch verfügbar ist, Sie können aber auch noch weitere Ideen für Domainnamen eingeben, die Sie vielleicht haben.

Um jetzt nach mehreren Namen auf einmal suchen zu können, müssen Sie auf die Mehrfachsuche klicken.

Jetzt können Sie dort Ihre verschiedenen Ideen eingeben.

Mit einem Klick auf die Eingabe-Taste können Sie auf die nächste Zeile springen, um dort den nächsten Domainnamen einzugeben.

Geben Sie einen Domainnamen pro Zeile ein. Als Beispiel habe ich jetzt meinen Namen mit den zwei Kürzeln und eine weitere Geschäftsidee eingegeben.

Jetzt einfach auf die Lupe klicken.

Und bei mir ist alles schon vergeben, wenn nichts angezeigt wird, ist alles schon weg.

Aber ist auch verständlich, TikTik.com ist auch super viel Wert. Viele Leute landen auf TikTik, weil Sie TikTok falsch schreiben.

Sie können dort jetzt ein paar verschiedene Variationen ausprobieren, hier habe ich welche gefunden, das sind aber nicht die guten, die sind nicht interessant.

Sie können auch einmal die Einfachsuche testen, da erhalten Sie noch mehr Vorschläge. Hier nochmal als Beispiel mit der Einfachsuche und meinem Namen. Hier kommen Sie wieder zu der Suche zurück.

Meinen Namen habe ich aber schon vorher gekauft.

Ich hab meinen Namen jetzt wie gesagt auch in beiden Versionen genommen, also .de und .com.

Wenn Sie jetzt nach Ihrem Namen gesucht haben, können Sie auf den Warenkorb klicken.

In der Mehrfachsuche sieht es so aus.

Und in der Einfachsuche sieht es so aus.

Fügen Sie alle wichtigen Namen hinzu, also Ihren eigenen Namen und vielleicht noch die Geschäftsideen, die Sie haben. Dann klicken Sie auf Weiter.

Im nächsten Schritt müssen Sie das Webspace-Paket wählen, das E-Mail-Paket brauchen Sie erstmal noch nicht. Das Webspace-Paket ist aber auch optional. Falls Sie erstmal nur die Domains kaufen wollen geht das auch.

Klicken Sie jetzt auf weiter, Sie kommen dann zum Warenkorb.

Falls Sie noch nicht mit der Auswahl Ihrer Domains fertig sind, können Sie oben Links wieder zu der Suche zurückkehren.

Wenn Sie dann alle Domainnamen im Warenkorb haben, klicken Sie immer auf Weiter, bis Sie zum Check-out kommen.

Dort gehen Sie jetzt einfach durch den Check-out, wie bei jedem Online-Shop.

WordPress Website erstellen Anleitung

WordPress Anleitung

Jetzt gehen wir drauf ein, wie Sie mit WordPress Ihre Website erstellen können. Wir werden nun Ihr WordPress installieren. Sie müssten dafür das Webspace-Paket genommen haben.

Sie müssen jetzt eine Kleinigkeit machen, bei der Sie fortgeschrittene Werkzeuge verwenden, aber Sie kriegen das hin, einfach nachmachen.

  1. Laden Sie ein SFTP-Programm runter:
  2. Installieren Sie jetzt das Programm und öffnen es.

Sie müssen jetzt in das SFTP-Programm folgende drei Sachen eintragen, Sie bekommen die Informationen in United Domains und wir zeigen es im nächsten Schritt.

  1. Host name
  2. User name
  3. Passwort

In United Domains müssen Sie jetzt zu Webspace gehen.

Dort müssen Sie jetzt zuerst das Passwort für Ihr SFTP Programm wählen. Das Passwort Ihres SFTP-Programms ist nicht dasselbe wie das Passwort Ihres United Domains Accounts, Sie müssen das SFTP-Passwort noch neu wählen, das gibt es quasi noch nicht.

Nachdem Sie Ihr SFTP Passwort gewählt haben, tragen Sie Ihre Daten in Ihr SFTP-Programm ein und verbinden sich, so sollte es dann aussehen, falls Sie auf Windows sind.

Jetzt laden Sie das WordPress runter von hier: https://wordpress.org/latest.zip

Entpacken Sie das WordPress und ziehen Sie dann den gesamten WordPress-Ordner in Ihr SFTP-Programm in das Fenster von Ihrem Server, also bei WinSCP ist es das rechte Fenster.

Jetzt lädt das WordPress hoch. Es wird ca. 10 Minuten dauern. Wenn alles hochgeladen ist, sollten Sie einen WordPress Ordner auf Ihrem Server haben.

Sie können den Ordner jetzt umbenennen, zum Beispiel zu dem Namen Ihrer Webseite. Wenn Sie einen Rechtsklick auf den Ordner machen, sehen Sie die Option zum Umbenennen.

Jetzt gehen Sie wieder zurück zu United Domains zu der Webspace Option.

Jetzt scrollen Sie runter bis zu Punkt 3.

Dort können Sie dann Ihre Domain mit dem Ordner verbinden, den Sie in dem Schritt davor hochgeladen haben. Sie müssen dazu den Namen des Ordners hier eintragen.

Und dann können Sie auf Verknüpfen klicken.

Geben Sie jetzt den Namen Ihrer Domain in Ihre Browserleiste ein, also öffnen Sie Ihre Website quasi.

Sie sollten jetzt diesen Bildschirm sehen.

Gehen Sie dazu noch einmal zurück zu United Domains.

Scrollen Sie runter zu dem Punkt MySQL Datenbanken.

Dort können Sie eine Datenbank erstellen und die Zugangsdaten der Datenbank dann in das WordPress Ihrer Website eingeben. Also hier:

Und dann haben Sie es geschafft.

In dem WordPress können Sie jetzt einfach Ihren Seitentitel, Ihren Nutzernamen und Ihr Passwort eintragen, dann müssen Sie sich damit direkt einloggen und dann landen Sie in Ihrem WordPress-Dashboard.

Ab jetzt müssen Sie sich mit nichts Kompliziertem mehr befassen, alles ab jetzt ist super einfach.

Sie haben es quasi geschaft und den Härtetest bestanden!

Es gab nur einmal diesen kürzen Test, mit dem Sie aber jetzt einen der besten Hostings haben, denn nur Personen, die in der Lage sind, so etwas zu machen, sind auch auf dem Server.

Eine Person, die das nicht schaffen konnte, kann diesen Server nicht benutzen. Dadurch sind andere Nutzer auf dem Server sehr Ressourcenschonend mit deren Webseiten und es wird zu weniger Problemen führen. Sie werden sich langfristig mit weniger Problemen befassen müssen.

Website erstellen mit Twenty Twenty Two

Wenn Sie sich jetzt in Ihrem Dashboard befinden, können Sie zuerst einmal die Seite auf Deutsch stellen.

Klicken Sie einfach auf Settings, Sie landen dann direkt bei General.

Dort können Sie Ihre Seite auf Deutsch stellen.

Sie haben verschiedene Arten von Deutsch.

Ich bleibe gerne bei dem Sie. Sie können es aber frei wählen.

Jetzt müssen Sie runterscrollen und auf dann „Save Changes“ klicken.

Dann müssen Sie mit Ihrer Maus oben Links über den Menü-Eintrag „Dashboard“ fahren und dann auf „Aktualisierungen“ klicken.

Und jetzt müssen Sie ganz unten auf „Übersetzungen Aktualisierungen“ klicken.

Erst dann wird auch die gesamte Übersetzung für Ihr Deutsch heruntergeladen. Jetzt sehen Sie, dass da noch einiges nachgeladen wurde.

Das wird auch Text-Umbrüche auf der mobilen Version korrigieren und der Bindestrich setzt sich dann richtig bei deutschen Wörtern, falls es auf den Bildschirm nicht passt.

Jetzt können Sie oben Links auf das Haus klicken.

Und dann sehen Sie Ihre Startseite.

Wenn Sie mal ein bisschen in Ihrem WordPress rumklicken, dann merken Sie vielleicht, wie schnell Ihre Website ist.

Das Theme, das Sie jetzt installiert haben, nennt sich Twenty Twenty Two, es ist ein gratis Theme.

Das ist ein sehr neues Theme mit einem komplett neuen Bearbeitungsmodus.

Wir bei Studenten Webdesign sind ein absoluter Fan von Twenty Twenty Two.

Es ist sehr fortgeschritten, Sie brauchen erstmal nichts anderes, Sie können damit jede Website erstellen, die Sie möchten.

Klicken Sie jetzt auf das „Website bearbeiten“ ganz oben.

Dann öffnet sich der brandneue WordPress-Pagebuilder, ein absoluter Geheimtipp.

Jetzt klicken Sie auf das kleine Dreieck.

Und jetzt auf alle Templates durchsuchen.

Und dort können Sie die Layouts auf einer globalen Ebene anpassen, quasi das Design-Template, in dem der Inhalt der Seite angezeigt wird.

Als Beispiel passe ich mal die Startseite an.

Jetzt klicken Sie oben Links auf die 3 Striche.

Und dann öffnet sich die Seitenstruktur.

Wenn Sie jetzt mal auf die kleinen Dreiecke klicken, sehen Sie das hier.

Das ist die gesamte Seite in kleinste Einzelteile gegliedert und Sie können jedes Detail anpassen.

Selbst die Seitennummerierung ist in drei Teile gestückelt. Aber das dient nur zur Veranschaulichung, damit wollen Sie sich gar nicht befassen, besser Sie klicken jetzt hier auf das blaue Plus.

Dort klicken Sie jetzt auf Vorlagen.

Jetzt laden verschiedene Vorlagen.

Hier können Sie jetzt durchscrollen und Sie sehen dann verschiedene Webseiten-Teile.

Sie können auch oben die Suche benutzen und dann einfach das eingeben, was Sie möchten, zum Beispiel „Header“.

Wenn Sie ganz ans Ende scrollen, finden Sie die brandneuen Blocks.

Das sind kleine Mini-Plugins, die ganz spezifische Elemente darstellen. Damit können Sie die Seite ohne Probleme mit allen möglichen Funktionen erweitern. Bei den Headern, können Sie jetzt einen wählen.

Sie sehen, selbst die deutsche Beschreibung der verschiedenen Header ist sehr elegant.

Ich klicke jetzt auf einen Header und warte ein paar Sekunden.

Der Header war ganz nach unten gerutscht.

Also muss ich den Header hoch bewegen, Sie wissen ja schon, Ihre neuen besten Freunde sind diese zwei Buttons.

Sie können einfach beide mal klicken, um zu schauen, welcher die Navigation öffnet. Es waren jetzt die 3 Striche.

Sie können jetzt einfach Drag und Drop machen. Quasi das Element an die richtige Stelle ziehen.

Und schon ist der Header oben. Das Problem ist jedoch, dass es kein richtiger Header ist, es enthält das Menü nicht.

Sie sehen, der Header ist unter dem Cover. Was Sie jetzt machen können, ist auf den Header zu klicken und dann auf ersetzen.

Jetzt öffnen sich wieder Header-Templates, aber diesmal werden die direkt mit Ihrem Header ausgetauscht.

Da sind super schöne Header jetzt mit Vögeln.

Sie müssen erstmal den falschen Header entfernen, klicken Sie einfach auf die drei Punkte und dann auf entfernen.

Und jetzt habe ich nur meinen neuen Header.

Das mit dem Ersetzen funktioniert mit allen Sektionen. Wenn Sie einmal auf den Body klicken kommt wieder das Ersetzen.

Dort können Sie jetzt mit den Pfeilen ein Layout auswählen.

Mit dem Footer geht dasselbe, da können Sie auch auf Ersetzen klicken.

Da sind wieder richtig schicke dabei.

Wenn Sie Probleme haben, das Element richtig anzuklicken und das „Ersetzen“ nicht erscheint, dann können Sie auch wieder Links in der Navigation das Hauptelement auswählen, dann erscheint das „Ersetzen“.

Momentan habe ich noch keine Beiträge, deswegen sieht es etwas leer aus, aber Sie können schonmal oben rechts auf speichern klicken.

Jetzt können Sie sich Ihre Webseite anschauen. Entweder Sie klicken links auf Dashboard oder öffnen Ihre Seite in einem neuen Tab.

Im Dashboard kommen Sie ansonsten oben Links wieder zu Ihrer Website.

Und hier ist meine neue Seite.

Noch nicht viel drauf, Sie können jetzt auf das Neu oben im Browser fahren und dann auf Beitrag klicken.

Jetzt öffnet sich der Blogger Modus. Sie können einfach auf das X klicken oder Sie schauen sich die Einführung an.

Und hier können Sie jetzt Ihre Beiträge schreiben. Ich hab jetzt einfach mal einen Beitrag mit Lorem Ipsum veröffentlicht. Und so sieht es jetzt aus.

Ist für einen privaten Blog okay, die Sache lässt sich aber noch beschleunigen, falls Sie es denn möchten.

Divi Website erstellen Anleitung

Falls Sie etwas Zeit haben, sich mit dem WordPress Editor zu beschäftigen, kriegen Sie damit auch jedes Layout hin.

Das Twenty Twenty Two Theme, das Sie jetzt haben, ist momentan das beste WordPress-Theme auf dem Markt. Es wurde von WordPress selbst geschrieben und Sie haben ja gesehen, wie einfach es ist dort etwas anzupassen.

Sie haben da bis ins letzte Detail die volle Kontrolle wie bei Webflow und es ist unbegrenzt kostenfrei. Selbst bekannte WordPress-Themes haben gar nicht so eine Detailkontrolle, das ist neu und einzigartig nur bei diesem Theme.

Das ist das beste Setup, dass Sie nur haben könnten, mit dem geringsten Preis.

Wenn Sie aber bereit sind etwas zu investieren, dann können Sie die Sache stark beschleunigen.

Ich gehe einmal die Schritte durch, was Sie dafür machen müssten, und dann können Sie selbst entscheiden, ob Sie bei dem momentanen Gratis Theme bleiben, oder mal Divi ausprobieren. Hier bekommen Sie DIvi.

Sie können es hier herunterladen

Wir haben auch die Lifetime membership.

Wenn Sie das Divi Theme heruntergeladen haben, klicken Sie hier.

Dann auf Theme hinzufügen.

Dann auf die Folgenden drei Buttons und laden Sie das Divi Theme hoch.

Jetzt ist Divi aktiv und Sie haben eine ganze Reihe weiterer Optionen.

Jetzt können Sie auf Neu und dann auf Seite klicken.

Dort klicken Sie dann auf Divi-Builder aktivieren. Der alte Editor, denn Sie davor genutzt haben, funktioniert auch weiterhin, Sie können den mit Divi problemlos mischen.

Jetzt klicken Sie auf „Start building“.

Jetzt klicken Sie auf die Mitte.

Jetzt sehen Sie die Layouts.

Jede Woche kommen neue hinzu und sogar welche, die vollkommen für Online-Shops ausgerichtet sind.

Also die integrieren sich bestens mit WooCommerce und Sie haben da Produktseiten, Warenkorb Seiten und so weiter, also der volle Online-Shop.

Zum Beispiel hier ein Print Designer Shop.

Und das ist ein echter Shop, wenn man WooCommerce nicht installiert hat, also das Shop-Plugin von WordPress, welches auch kostenfrei ist, dann wird bei dem Template nichts angezeigt, weil die echten Produkte fehlen. Super!

Divi ist bekannt für deren Layouts, und Sie finden dort immer ganz frische, die noch niemand benutzt hat.

Wenn Sie eins ausgewählt haben, müssen Sie Ihren Key eingeben.

Sie erhalten den Key auf der Elegant Themes Seite in Ihrem Account.

Wenn Sie den Key eingegeben haben, lädt das Layout.

Ich habe jetzt was ganz Cooles genommen, hier ist das Beispiel in live und auch als Screenshot: https://studentenwebdesign.de/beispiellayout/

Das ist kein Wix oder Webflow, auch kein WordPress.com, die Seite gehört komplett mir, das ist quasi mein Layout.

Ich kann alles bis ins letzte Detail ändern, da gibt es keine Beschränkungen, ich hab quasi den vollständigen Code auf meiner Seite und kann den jetzt frei anpassen, das ganze Ding ist jetzt meine richtige Seite komplett ohne Beschränkung und ich kann damit machen, was ich will.

Und hat nur 5 Minuten gedauert, auf jeden Fall deutlich schneller als mit dem Twenty Twenty Two Theme. Falls Sie es nochmal brauchen, hier nochmal der Link zu Divi.

Fazit

Wir haben Ihnen jetzt 4 verschiedene Website-Builder gezeigt, wie Sie dort einen Account erstellen und alles so einrichten, dass es dauerhaft umsonst ist und Sie diese einfach ausprobieren können. Sie haben auch gesehen, wie man eine Domain kauft und WordPress auf einen Server hochlädt. Zum Schluss haben Sie eine Einführung in WordPress einmal mit dem Twenty Twenty Two Theme und einmal mit dem Divi Theme gesehen.

Als Bonuskapitel erkläre ich Ihnen noch, wie Sie WordPress lokal auf Ihrem Rechner installieren, vielleicht brauchen Sie das einmal irgendwann.

WordPress lokal installieren

Nur falls Sie es irgendwann mal brauchen, einmal die Erklärung, wie Sie WordPress auf Ihrem Rechner lokal installieren.

Die schnellste Methode, wie Sie WordPress lokal installieren können, die wir kennen, ist mit einer Software namens Laragon und einem Windows Rechner.

Wenn Sie ein MacBook haben, dann gibt es Laragon leider nicht für Ihr Betriebssystem. Wir werden versuchen eine Alternative für MacBooks zu finden, momentan ist die Anleitung nur für Windows.

Also zuerst laden Sie Laragon hier runter: https://laragon.org/download/index.html

Dann öffnen Sie die Datei und klicken immer auf Weiter und lassen alle Einstellungen wie sie sind.

Es installiert ziemlich zügig.

Dann müssen Sie einmal neu starten.

Nach dem Neustarten finden Sie Laragon unter Ihren Anwendungen.

Sie müssen dann Rechtsklick auf die Anwendung machen und dann mit der Maus über das „More“ fahren und dort dann „Run as administrator“ auswählen.

Ansonsten schafft es Laragon nicht durch Ihre Firewall und es passiert nichts.

Jetzt läuft Laragon.

Schließen Sie zuerst das Fenster.

Dann sehen Sie unten rechts in Ihrer Taskleiste den grünen Button.

Dort einmal mit Rechtsklick draufklicken.

Dort klicken Sie jetzt zuerst auf „Start All“.

Und dann kommt die Firewall Warnung, klicken Sie auf „Allow access“.

Und dann wird das Icon blau.

Jetzt machen Sie wieder Rechtsklick auf das blaue Icon und fahren dann mit der Maus über das Quick App und dann klicken Sie auf WordPress.

Jetzt müssen Sie Ihrer Webseite einen Namen geben.

Und dann ist alles hoch automatisiert.

Hat nicht einmal 10 Sekunden gedauert.

Jetzt können Sie einfach auf den Link oder das Visit site klicken.

Und schon ist Ihr WordPress installiert. Wählen Sie jetzt einfach die Sprache.

Und dann den Seitentitel, Username und Passwort

Und das war es auch schon.

Sie können sich dann direkt anmelden.

Und da ist ihr voll eingerichtetes, lokal installiertes WordPress.

Sie müssen mit Laragon absolut nichts mehr machen. Sie müssen keine Passwörter von Datenbanken eintragen, sie müssen nicht wissen, was das Passwort von Root ist, sie müssen nicht herausfinden, wo die php.ini liegt.

Laragon hat sich bereits um alles gekümmert und Sie haben es nicht einmal bemerkt, dass irgendwo eine Datenbank angelegt wurde. Auch das Passwort und den Nutzernamen der Datenbank kennen Sie nicht, es wurde alles automatisiert erstellt, bis ins letzte Detail.

Mit Laragon können sie eine frische lokale WordPress Installation in einer Minute kurz herzaubern, dann wieder zerstören und eine neue eben mal herzaubern.

Sie sparen damit Stunden an Arbeit. Das lokale Installieren einer WordPress-Anwendung kostet Sie jetzt nur noch eine Minute,

Es gibt leider keine Alternative zu Laragon auf MacBook, das ist die einzige Software, die das kann. Wenn Sie auf einem MacBook sind, dann haben Sie bedauerlicherweise keine Anwendung, die so schnell ist.

Sie werden aber ähnliche Anwendungen finden können, Sie sind nicht viel komplizierter, aber Sie müssen dann schon abwägen, ob es sich lohnt.

Mit Laragon ist der Zeitaufwand halt auf jeden Fall minimal, mit einer Alternative auf Mac haben Sie das Risiko, dass es vielleicht doch etwas länger dauert.

Links zu Drittanbietern sind Partnerlinks. Bei einem Produktkauf nach einem Klick auf meinen Link erhalte ich vom Hersteller Provision. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen. Das hat keinen Einfluss auf Ihren Preis. Ich empfehle nur Produkte, hinter denen ich auch wirklich stehe.

0 Kommentare

Einen Kommentar abschicken

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

Studenten Webdesign

Sie brauchen Hilfe mit Ihrer Website? Buchen Sie jetzt Ihren preisgünstigen Webdesigner, schon ab 200€.

Links zu Drittanbietern sind Partnerlinks. Wir erhalten eine Provision bei qualifizierten Verkäufen.