Categories: Tutorials

Websites ohne Programmierkenntnisse erstellen

Eine eigene Webseite zu besitzen ist heutzutage für nahezu jedes Unternehmen, aber auch für viele Privatpersonen sehr wichtig. Unternehmen nutzen Webseiten, um ihre Firma vorzustellen und Produkte zu verkaufen. Private Leute nutzen Webseiten häufig, um über sich zu berichten oder Fotos mit der Familie oder Freunden zu teilen. Das Erstellen von ansprechenden und gut programmierten Webseiten ist nichts, was man innerhalb von einigen Tagen erlernen kann. Viele Firmen greifen daher auf externe Webdesign-Agenturen zurück. Doch gerade Kleinunternehmen oder Privatpersonen haben oft nicht das Budget einen Web Designer zu engagieren.

Glücklicherweise gibt es jedoch viele verschiedene Homepage-Baukästen im Internet. Mit diesen Online-Tools soll es möglich sein ohne Fachwissen ansprechende Webseiten zu kreieren. Ich werde beispielhaft am einem Anbieter testen, ob eine Webseite aus dem Homepagebaukasten als Alternative für professionell erstellte Webseiten angesehen werden kann. Dabei werde ich eine Webseite für ein Restaurant erstellen und Schritt für Schritt erklären wie ich vorgehe. Anbieter von Homepage-Baukästen gibt es viele, ich werde in diesem Beitrag unsere Restaurant-Webseite mithilfe von Wix, einem der weltweit größten Anbieter, aufbauen.

Nachdem ich mich bei Wix angemeldet habe, muss ich im ersten Schritt eine Kategorie für unsere neue Webseite auswählen.

Ich wähle Café & Restaurant aus und klicke auf “LOS”. Im zweiten Schritt kann ich nun aus einer Vielzahl von Vorlagen eine passende auswählen. Zum Glück sind viele dieser Vorlagen gratis. Auch die Gestaltung der meisten Vorlagen gefällt mir. Viele Vorlagen sind hübsch und sehen professionell aus.

Ich habe mich für ein Design entschieden und klicke auf “Bearbeiten”. Es öffnet sich der HTML-Editor und ein Einleitungs-Video erklärt wie ich vorzugehen habe, um meine Webseite anzupassen. Ich empfinde dieses Video als sehr hilfreich, gerade für Anfänger, die nicht wissen wie sie starten sollen.

Auf der linken Seite des HTML-Editors befinden sich mehrere Schaltflächen. Ein Klick auf “Seiten” zeigt alle verfügbaren Seiten und Unterseiten der Webseite an. Hier lassen sich auch neue Seiten hinzufügen sowie die Reihenfolge und Hierarchie der Seiten ändern. Gut gefällt mir, dass man hier sogar SEO-Einstellungen (Einstellungen für die Suchmaschinenoptimierung wie z.B. Titel und Beschreibung) für einzelne Seiten festlegen kann. Auch Seitenübergänge wie Überblenden oder horizontales Gleiten sind möglich. Außerdem lassen sich Seiten mit einem Passwort schützen, gut für interne Bereiche der Webseite.

Die zweite Schaltfläche heißt “Design”. Klickt man auf diesen Button öffnet sich ein weiteres Menü und es lassen sich Änderungen am Design durchführen. Mit einem Klick auf “Hintergrund” kann man aus vielen frei verfügbaren Hintergrundbildern eines auswählen oder aber ein eigenes Foto hochladen. Ich habe hierbei ein nützliches Feature von Wix entdeckt. Nachdem ich verschiedene Hintergrundfarben ausprobiert hatte, wollte ich zurück zu einer Farbe, die ich ganz am Anfang ausgewählt hatte. Nach kurzer Suche entdeckte ich am oberen Rand eine Werkzeugleiste, mit deren Hilfe ich die letzten Schritte rückgängig machen konnte. Neben dem “Rückgängig”-Button enthält die Leiste auch noch einen Button “Wiederherstellen”, “Kopieren”, “Einfügen”, “Gitterlinien”, “An Objekt anpassen” und “Lineale und Orientierungsleisten”.

Doch zurück zu den Design-Einstellungen. Abgesehen vom Hintergrund lässt sich auch das Farbschema der Webseite auswählen. Hier kann man entweder aus einer großen Anzahl von bereits vorhandenen Schemata eines auswählen oder aber ein eigenes erstellen. Schade finde ich hierbei allerdings, dass nicht angezeigt wird, auf was sich die jeweiligen “Hauptfarben” beziehen. So musste ich teilweise auf der ganzen Seite herumsuchen, um herauszufinden, welche Teile der Webseite durch eine Farbänderung beeinflusst werden.

Mit der dritten Schaltfläche im Bereich “Design” lassen sich die Schriften der Webseite ändern. Es lassen sich hierbei für verschiedene Überschriften und Texte unterschiedliche Schriftarten, -farben und -größen definieren. Die Zeilenhöhe lässt sich hingegen leider nicht ändern.

Nachdem ich nun einen geeigneten Hintergrund, eine passende Schriftart und ein schickes Farbschema ausgewählt habe, komme ich zur nächsten Schaltfläche in der linken Leiste. Über den Button “Hinzufügen” kann man eine Vielzahl unterschiedlicher Inhalte zu seiner Webseite hinzufügen. Dazu gehören Texte, Bilder, Galerien, Medien (wie Videos oder Audiodateien), Formen und Linien, Buttons und Menüs, Blogs usw. Sogar ganze Shops lassen sich hinzufügen. Ich belasse es für meine Restaurant-Webseite bei einer Galerie, um die Gerichte des Restaurants ansprechend darstellen zu können. Die Anzahl an unterschiedlichen Gallerien ist wirklich beeindruckend. Spielerisch einfach können Slider, Collagen, Gittergallerien, Diashows und viele andere Arten zur Seite hinzugefügt werden. Das ist wirklich genial, vor allem wenn man sich mit der Materie auskennt und weiß, welche Mühen es manchmal machen kann Bildergallerien zu seiner Webseite hinzuzufügen. Mit dem Homepagebaukasten reicht ein Klick und die Gallerie kann per Drag & Drop genau dort platziert werden, wo man sie haben möchte. Das geht übrigens mit jedem Element auf der Seite. Jedes beliebige Objekt lässt sich per Klick selektieren und mit der Maus beliebig auf der Webseite platzieren und skalieren. Beim Klick auf ein Element der Webseite öffnet sich ein kleines Fenster, in dem zusätzliche speziell auf das Element bezogene Einstellungen definiert werden können. So kann man zum Beispiel bei vielen Elementen eine Animation hinzufügen. Dabei lassen sich verschiedene Arten von Animationen festlegen, z.B. Einschweben, Ausdehnen, Hereinwerfen, Drehen und viele mehr. Außerdem kann man einstellen, wie lange die Animation sein soll und nach wie vielen Sekunden sie starten soll. Es lässt sich sogar einstellen, dass die Animation nur beim ersten Aufruf abgespielt werden soll.

Mithilfe der vierten Schaltfläche lassen sich verschiedene Apps zur Webseite hinzufügen. Apps sind kleine Programme, die von Wix oder externen Anbietern erstellt wurden. So lässt sich beispielsweise ein Besucherzähler, ein Kalender, eine Suchfunktion oder ein kompletter Mitgliederbereich inklusive Registrierung zur Webseite hinzufügen.

Ich habe unsere Restaurant-Webseite nun soweit bearbeitet, dass sie mir gut gefällt. Per Drag & Drop habe ich Inhalte verschoben, skaliert oder mit der “Entfernen”-Taste gelöscht. Ich habe einige Unterseiten hinzugefügt und Inhalte hinzugefügt. Bevor ich die Webseite nun veröffentliche möchte ich erst noch herausfinden wie die Webseite auf mobilen Geräten aussehen wird. Dazu klicke ich oben links auf das Smartphone-Symbol. Die Webseite wird nun in einem Smartphone dargestellt, so sehe ich direkt wie unsere Webseite auf dem Handy aussehen wird.

Was mir direkt auffällt, ist der Menü-Button. Die Navigation wurde automatisch in ein fürs Smartphone optimiertes Menü umgewandelt. Außerdem fällt auf, dass die Schaltflächen links sich geändert haben. Über “Seiten” kann man nun festlegen, welche Seiten im Menü der mobilen Webseite angezeigt werden sollen. Über “Design” kann man den Hintergrund der Webseite auf Smartphones ändern und ein paar Einstellungen fürs mobile Menü machen. Die dritte Schaltfläche nennt sich nun “Mobile Elemente hinzufügen”. Hier lässt sich eine mobile Aktionsleiste (eine Leiste mit Kontaktinformationen) und ein “Zurück nach Oben”-Button hinzufügen. Sehr praktisch finde ich außerdem, dass man ein beliebiges Element auf der Seite anklicken und es dann per Klick auf mobilen Geräten ausblenden kann. So lassen sich Inhalte, die für mobile Nutzer irrelevant sind, verstecken. Über die vierte Schaltfläche lässt sich eine mobile Ladeanzeige festlegen und es kann definiert werden, ob mobile Besucher der Webseite die fürs Smartphone optimierte Webseite angezeigt bekommen oder nicht.

Zu guter Letzt schaue ich mir noch einmal die von mir erstellte Webseite an und klicke oben rechts auf “Veröffentlichen”. Die Webseite ist nun öffentlich abrufbar und ich kann mich daran machen, mir eine geeignete Domain zu reservieren.

Fazit: Die Vielzahl an Möglichkeiten bei der Benutzung des Baukastens ist beeindruckend. Innerhalb von wenigen Minuten ist man in der Lage eine Webseite aufzubauen, das Design an seine Ansprüche anzupassen und die Seiten mit Inhalten zu befüllen. Das ganze ist so einfach, dass auch ein Laie kein Problem mit der Benutzung haben wird. Für alle, die eine eigene Webseite haben möchten, sich aber keinen Web Designer leisten können und selber nicht über das erforderliche Know-How verfügen, sind Homepagebaukästen wie Wix perfekt. Ich war im Vorhinein etwas skeptisch, was die Funktionalitäten einer Webseite, die mit einem Baukasten erstellt wurde, angeht. So hielt ich es nicht für möglich, Shopping-Funktionen oder Mitgliederbereiche zu erstellen. Ich wurde jedoch eines besseren belehrt, denn mithilfe der Apps ist all das kein Problem. Ich bin beeindruckt von den Möglichkeiten, die ein Webseitenbaukasten bietet. Es scheint als wurde an wirklich alles gedacht. Die Geschwindigkeit, mit der sich eine ansehnliche Webseite erstellen lässt, ist erstaunlich. Der manuelle Aufbau einer vergleichbaren Webseite würde auch bei Profis viel mehr Zeit in Anspruch nehmen.

Jeder Baukasten hat jedoch irgendwo seine Grenzen. Wer eine auf die eigenen Bedürfnisse zugeschnittene Webseite mit speziellen Funktionen und einem einmaligen Design benötigt, der sollte sich an einen Web Entwickler wenden. Allerdings muss er dann natürlich auch das nötige Kleingeld für die Umsetzung zur Verfügung haben. Für wen hingegen eine einfache Webseite für sein Unternehmen oder als persönliches Portfolio ausreichend ist, für den lohnt sich ein Baukasten sicherlich.

Chris @Lingulocom

I am a frontend and backend web developer who loves building up new projects from scratch. In my blog "Lingulo" me and some guest authors regularly post new tutorials, web design trends or useful resources.

Recent Posts

The Best Programming Languages for Enterprise Software Development

Over the last decade, both enterprises and the world of programming have witnessed big changes. With the introduction of new…

4 years ago

Why Small Businesses Are Creating Their Own Apps

No matter the size of your company, developing the right app with the right team can have an outsized return…

4 years ago

3 Exceptional PR Campaigns to Inspire Your Business

The best PR campaigns are memorable and distinctive. They can go viral, get press coverage, and, ultimately, help your brand…

4 years ago

How COVID-19 has changed the restaurant delivery app industry

2020 has been dubbed “the year of change” and it’s quite easy to see why that is. COVID-19 has put…

4 years ago

What are the Best Programming Languages to Learn for a Career in FinTech?

If you’re thinking about a career in FinTech, then you’ll also need to know the best programming languages to learn.…

4 years ago

How to Create a Catchy Logo for Your Website?

If you want to create a catchy logo for your website, then you are in the right place because today,…

4 years ago