Professionelle Website erstellen: Beispiele, Anleitung & Kosten

Nicht zuletzt wegen seinem großen Angebot an professionell erstellten Website-Designs ist WIX* der beliebteste Homepage-Baukasten-Anbieter. Der Baukasten ist darüber hinaus sehr einsteigerfreundlich und lässt sich intuitiv nutzen.

Bei WIX* findest du Design-Vorlagen (Templates/Themes) zu vielen unterschiedlichen Themenbereichen und Branchen. Die Templates dienen dir als Grundgerüst, um deine Website so zu erstellen, dass sie zu deiner Firma oder deinem Verein passt. 

Hast du dir ein Theme ausgewählt, erhältst du mit dieser Basis eine Grundstruktur für dein Website-Layout, die Navigation und zur Auswahl passende Unterseiten wie eine „Über mich“-Seite. Das Template ist dabei so flexibel, dass du es nach deinen Wünschen gestalten kannst. Dazu fügst du z. B. Bilder, Videos, Buttons und Texte hinzu.

Darüber hinaus stehen dir weitere – teils kostenpflichtige – Apps und Funktionen zur Verfügung. Du findest etwa Anwendungen für das Marketing, einen Live-Chat oder Analyseoptionen.

Vorteile WIX:

• Einsteigerfreundlich, flexibel und intuitiv nutzbar
• Über 800 Design-Vorlagen und 300 App-Erweiterungen
• Monatlich kündbar

Nachteile WIX:

• Template-Wechsel im Nachhinein umständlich
• Ladezeiten nicht für hohe Besucherzahlen optimiert

Kosten von WIX:

• Kostenloser Tarif zum Testen verfügbar
• Professioneller Website-Tarif ab 11,90€ / Monat (Spare 50% mit meinem Tipp – siehe Box unten)

Du kannst auch einen Blog oder einen Online-Shop (mehr Informationen zu WIX eCommerce findest du hier) in deine mit WIX erstellte professionelle Homepage einbinden lassen.

Squarespace* bietet ausschließlich hochwertige stylische Templates. Deshalb erfreut sich der Homepage-Baukasten großer Beliebtheit bei Fotografen und Designern – und ist eine gute Wahl für die Erstellung von professionellen Websites.

Unter den 100 professionellen Designs für verschiedene Website-Arten wirst du ganz sicher fündig. Außerdem kannst du die flexiblen Designs ganz nach deinen Wünschen anpassen.

Squarespace* hat auch umfangreiche Möglichkeiten an Bord, wenn du einen Blog oder einen E-Commerce-Shop planst.

Allerdings ist Squarespace* etwas teurer als die Konkurrenz.

Einen Gratis-Tarif gibt es nicht. Du hast aber die Möglichkeit, den Homepage-Baukasten 14 Tage lang kostenlos zu testen.

Vorteile Squarespace:

• Mehr als 100 besonders hochwertige Design-Vorlagen
• Blogging- und E-Commerce-Funktionen an Bord

Nachteile Squarespace:

• Kostenloser Test nur 14 Tage lang möglich

Kosten von Squarespace:

• Professioneller Website-Tarif ab 11,00€ / Monat

Wie WIX bietet dir auch Squarespace die Möglichkeit, Blogging- oder E-Commerce-Funktionen in deine professionell erstellte Website einzubinden (mehr Informationen dazu findest du hier).

Etwa die Hälfte aller im Internet erreichbaren Websites basiert auf dem CMS (Content Management System) WordPress. Auch wir bei WebsiteWissen.com nutzen das populäre System.

WordPress bietet dir viele Erweiterungs- und Gestaltungsmöglichkeiten über Widgets, Plugins und den Zugriff auf HTML- und CSS-Code. Damit lässt sich eine Website ganz individuell verändern.

Einsteigern rate ich aber von der Verwendung von WordPress eher ab. Denn die Vielfalt und Flexibilität hat ihren Preis: deine Zeit, um den Funktionsumfang zu erlernen.

Zudem musst du einen Hosting-Anbieter einschalten, um deine eigene WordPress-Instanz betreiben zu können. Solltest du dich grundsätzlich fit genug fühlen, um dich an die Herausforderung WordPress zu wagen, empfehle ich dir die Nutzung eines WordPress-Webhosting-Anbieters. 

Am besten geeignet ist meiner Erfahrung nach der deutsche Anbieter IONOS WordPress Hosting*. Hier steht dir WordPress mit vollem Funktionsumfang zur Verfügung. Eine eigene Domain sowie die E-Mail-Adresse sind im Paket schon enthalten – beste Voraussetzungen, um sich eine professionelle Website selbst zu erstellen.

In puncto Security und Datenschutz bist du mit einem Anbieter wie IONOS, dessen Server in Deutschland stehen, auf der sicheren Seite. Zudem nimmt IONOS WordPress* Backups und Updates automatisch vor und du musst dich darum nicht kümmern.

Vorteile IONOS WordPress:

• „Echtes“ WordPress mit allen Funktionen
• Hauptdomain und E-Mail-Adresse sind dabei
• Automatische Backups und Updates

Nachteile von IONOS WordPress:

• Etwas komplexer als ein Homepage-Baukasten
• Kein Gratis-Tarif, kein Testzeitraum

Kosten von IONOS WordPress

• 1€ / Monat im ersten Jahr, danach 8€ / Monat

Mit dem Homepage-Baukasten von WIX kannst du auch einen professionellen Online-Shop erstellen. Das „eCommerce“-Paket ist dabei sowohl für kleine Firmen und Vereine wie auch für große Marken geeignet.

WIX eCommerce bietet über 500 speziell für Online-Shops erstellte professionelle Websites-Designs. Die E-Commerce-Templates kannst du einfach per Drag & Drop nach deinen Vorstellungen anpassen.

Alle für einen Online-Shop notwendigen Funktionen sind an Bord. Du kannst einen eigenen Mitgliederbereich einrichten und mit einem zahlungspflichtigen Abo verbinden. Auch in puncto abmahnsichere Texte und den zu erhebenden Steuern greift dir das System unter die Arme.

Zahlungen kannst du z. B. mit Giropay abwickeln oder einen Zahlungsanbieter wie Paypal, Sofort by Klarna oder Stripe integrieren. Um Professionalität auszustrahlen, ist es empfehlenswert, deinen bei WIX* erstellten Online-Shop mit einer eigenen Website-Domain zu verbinden. Außerdem kannst du verschiedene weitere Vertriebskanäle wie Facebook, eBay, Instagram oder Amazon Shops nutzen.

Weitere Vorteile umfassen die Möglichkeit, den Shop SEO-optimiert zu gestalten und deine Produkte über automatisierte Facebook- oder E-Mail-Kampagnen bekannt zu machen.

Den Überblick über alle Shop-Aktivitäten behältst du dank der sogenannten Owner-App. Hier kannst du deinen Bestand in Echtzeit bearbeiten und dich per Push-Benachrichtigungen über wichtige Ereignisse informieren lassen.

Kosten von WIX eCommerce:

• Premium-Tarif „Business Basic“ ab 20€ / Monat (Spare 50% mit meinem Tipp – siehe Box unten)

Auch Squarespace bietet mit „Commerce“ eine Online-Shop-Integration für professionell erstellte Websites an. Bei dem US-Anbieter steht insbesondere das Design der Websites im Vordergrund. Zielgruppe sind E-Commerce-Interessierte, die einen unverwechselbaren Online-Shop erstellen wollen, der bei den Kunden im Gedächtnis bleibt.

Bei Squarespace* finden sich verschiedene E-Commerce-Templates zu Bereichen wie Fotografie, Restaurant, Reisen, Vereine, Beratung oder Technik. Die Funktionen umfassen neben typischen Online-Shop-Features auch die Möglichkeit, Termine zu vereinbaren oder Events zu bewerben. Auch ein Blog lässt sich einbinden.

Du kannst physische sowie digitale Artikel oder Dienstleistungen anbieten. 

Bei dem Website-Builder mit E-Commerce-Funktion kannst du dir eine eigene Domain auswählen. Ebenfalls möglich ist es, den Shop und die einzelnen Produkte für das Auffinden in Suchmaschinen zu optimieren (SEO).

Bei Squarespace kannst du die Zahlungsanbieter Stripe, Apple Pay und PayPal verwenden. Die Option „Jetzt kaufen, später zahlen“ bindest du über Anbieter wie Clearpay oder Afterpay ein, wenn du willst.

Squarespace unterstützt dich bei Versand- und Steuerfragen. Auch beim Marketing greift dir die Plattform unter die Arme. Die iOS-Version der Squarespace-App kannst du auch unterwegs – etwa auf Märkten oder Messen – um via Square Bar- oder Kartenzahlungen anzunehmen.

Kosten von Squarespace Commerce:

• Professioneller E-Commerce-Tarif ab 24,00€ / Monat (Basis)

Wenn du doch keine Lust oder Zeit hast, eine professionelle Website selbst zu erstellen, kannst du dir die Seite auch erstellen lassen. Dazu greifst du am besten auf einen professionellen Dienstleister zurück.

Für die Erstellung einfacher professioneller Websites für ein kleines Unternehmen oder einen Verein kannst du aus verschiedenen Dienstleister-Pools wählen – mit entsprechend großen Unterschieden bei den Kosten.

Für deine Zwecke kommen am ehesten folgende Dienstleister in Frage, bei denen du dir eine professionelle Homepage erstellen lassen kannst:

• Lokal verfügbare Webdesigner oder Freelancer
• Online-Dienstleister mit einer Vielzahl an Kunden
• Werbeagenturen (eher kleinere)

Je nach Erfahrungslevel und Zielgruppe der Dienstleister können die Kosten der Erstellung einer professionellen Website zwischen ein paar Hundert und mehreren 10.000 Euro betragen.

Wenn du dir im Vorhinein schon sehr klar darüber bist, welche Art von Website du haben willst und vorbereitete Texte und Bilder zur Hand hast, kannst du die Kosten gering halten.

Sei nicht überrascht, wenn die Dienstleister selbst eines der hier beschriebenen Systeme (Homepage-Baukasten, WordPress oder Shop-System) nutzen. Für dich hat das den Vorteil, dass du später – nach entsprechender Einarbeitung – die Seite selbst betreuen und aktualisieren kannst.

Auf einem Portal wie „BetterBusiness“ kannst du die Angebote von Website erstellenden professionellen Dienstleistern vergleichen.

Die Planung der Website-Struktur ist das A und O bei der Erstellung einer professionellen Homepage. Für eine effektive Planung rate ich dir zur Visualisierung der Struktur deiner Website in einer Sitemap.

Du kannst die Sitemap einfach auf einem Blatt Papier aufzeichnen. Du kannst aber auch deinen Computer dazu nutzen.

Die Website-Struktur sollte ungefähr so aussehen:

• Auf der Ebene 1 planst du deine Startseite ein.
• Die Ebene 2 nutzt du für 5 bis 7 Hauptmenüpunkte. Das können eine „Über mich“-, eine „Produkt“- oder eine „Kontakt“-Seite sein.
• Die Ebene 3 dient weiteren Detailseiten. Hier bringst du etwa ausführliche Beschreibungen von Produkten unter.

Bei der Planung einer mehrsprachigen Website – das empfiehlt sich etwa für Online-Shops – solltest du mehrere Sitemaps entwerfen. Ein eigener Menüpunkt ist dann zum Umschalten zwischen den Sprachen da.

In den Homepage-Baukasten deiner Wahl überträgst du dann die in deiner Sitemap visualisierte Website-Struktur – also die verschiedenen Ebenen und das Hauptmenü.

Nachdem du die Website-Erstellung in der Theorie schon beherrschst, steigen wir jetzt in die praktische Gestaltung deiner Homepage ein.

Um deine Website selber zu erstellen, kannst du auf die zahlreichen, von professionellen Designern erstellten Templates zurückgreifen. Die Vorlagen sorgen dafür, dass alle Seiten deiner Website in einem einheitlichen Design erstrahlen und alle Funktionen beinhalten.

Die Design-Vorlagen kannst du ganz nach deinen Vorlieben gestalten, etwa indem du ein Logo und passende Bilder einfügst. Mit ein paar Mausklicks lassen sich auch das Farb- und Schriftdesign ändern.

Die Templates sind dabei so flexibel, dass sie sich ganz auf deine Anforderungen anpassen lassen, was Design und Funktionen betrifft. Die Vorlage muss dir also nicht von Anfang an komplett zusagen.

Unter den folgenden Links kannst du dich in den Theme-Bibliotheken der von mir empfohlenen Anbieter umschauen:

• WIX* (Klicke unter „Website“ im Hauptmenü auf „Website-Templates“)
• Squarespace* (Klicke im Hauptmenü auf „Website-Templates“)
• WordPress (Themes-Bibliothek)
• WIX eCommerce* (Klicke unter „Business“ im Hauptmenü auf „Online-Shop“ -> dann unter „Starten“ auf „Templates“)
• Squarespace Commerce* (Klicke unter „Produkte“ auf „E-Commerce-Übersicht“ -> dann ein wenig herunterscrollen und auf „Templates durchsuchen“)

Du hast dein Wunsch-Theme gefunden? Super! Dann zeige ich dir jetzt, wie du dieses Theme anpassen kannst.

Die virtuellen Assistenten der Homepage-Baukästen von WIX* oder Squarespace* unterstützen dich bei der Erstellung deiner professionellen Website. Hast du dich für eine der vorgeschlagenen Designs mit den passenden Funktionen entschieden, startest du mit der Gestaltung der Seiten.

Am besten fängst du mit der Website-Struktur an. Hier kommt die vorbereitete Sitemap ins Spiel. Wie dort geplant, fügst du deiner Website Seiten wie „Über uns“ oder „Produkte“ hinzu.

Anschließend fügst du die vorbereiteten Texte und Bilder an die entsprechenden Stellen ein. Vergiss nicht zu speichern und schau dir das Zwischenergebnis regelmäßig über den Vorschau-Button an. Behalte auch die mobile Ansicht für Smartphones im Auge.

In einem eigenen Kapitel meiner ausführlichen Anleitung zur Website-Erstellung gehe ich näher auf die Anpassung von Design-Vorlagen ein.