Logo Hr Weiss
Probleme mit Webnode? Jetzt die besten Alternativen kostenlos testen:


Mit Webnode die eigene Webseite erstellen

Webnode Header Webnode Header Webnode Header

Ohne Homepage können Unternehmen, Selbstständige, Vereine und andere Organisationen heute nicht mehr existieren. Um die so wichtige eigene Homepage zu bauen, ist es sinnvoll, auf einen Homepage-Baukasten wie Webnode zurückzugreifen. Der Vorteil: Die Homepage ist in kürzester Zeit aufgebaut, schnell zu individualisieren, sieht sehr professionell aus und ist enorm einfach zu Pflegen. Coding-Kenntnisse braucht man dazu längst nicht mehr.


Wenn auch Du Dich dazu entschieden hast, deine Homepage einfach und schnell mit Webnode zu bauen und vielleicht sogar einen Online-Shop zu eröffnen, stellen wir dir hier kurz die wichtigsten Funktionen vor und geben dir eine kurze Anleitung mit, damit du direkt loslegen kannst:

Videos einbauen

Durch Videos lässt sich eine Internetpräsenz sehr gut aufwerten. Etwa indem ein Unternehmens-Inhaber persönlich seinen Betrieb vorstellt, die Einsatzmöglichkeiten von neuen Produkten erklärt werden oder ein Verein die Höhepunkte der vergangenen Meisterschaft in Form eines Videos auf seine Homepage stellt.


Auf Webnode Videos einzubauen, ist mit wenig Aufwand möglich. Allerdings kannst Du sie nicht direkt in den Homepagebaukasten hochladen wie etwa ein Bild, sondern Du musst das Video woanders veröffentlicht haben. Das geht beispielsweise bei Youtube, Vimeo, Dailymotion und anderen Plattformen. Um dann nachher das Video auf Deiner Webnode-Website zu sehen, musst Du es bei Dir einbetten. Das geht mit Vimeo und Youtube sehr einfach, weil Webnode dafür die Funktion „Video“ zur Verfügung stellt. Nutzt Du eine andere Video-Plattform, ist der Weg ein wenig komplizierter. Doch mit der folgenden Anleitung ist das Einbauen von Videos kein Problem.


Unter den Punkten 1 bis 3 findest Du den Ablauf, wie generell ein Video bei Webnode eingebaut werden kann. Unter den Punkten 4 bis 5 wird der Ablauf für YouTube und Vimeo erklärt.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
einfach
Zeitaufwand
5 Minuten

1 Einbettungscode finden

Id 469 Bild1 Id 469 Bild1 Id 469 Bild1

Alle Video-Plattformen stellen einen sogenannten Einbettungscode bereit. Das ist ein HTML-Element, welches es Dir erlaubt, das Video auf Deiner Website zu zeigen, ohne dass es dort abgespeichert sein muss. Bei Dailymotion findest Du den Einbettungscode, nachdem Du auf „Teilen“ geklickt hast.

Id 469 Bild1A Id 469 Bild1A Id 469 Bild1A

Den Einbettungscode kopierst Du einfach.


2 Inhalt einfügen

Id 469 Bild2 Id 469 Bild2 Id 469 Bild2

Rufe Dein Webnode-Projekt auf und gehe zu der Seite, die das Video enthalten soll. Klicke hier auf das Pluszeichen links. Sollte es an der gewählten Stelle lediglich ein Pluszeichen in der Mitte geben, kannst Du dort nur einen Text, einen Text mit Bild oder Spalten hinzufügen. Rutsche in dem Fall mit der Maus ein Stück höher oder tiefer und schon findest Du eine Stelle mit dem Pluszeichen auf der linken Seite.

Id 469 Bild2 A Id 469 Bild2 A Id 469 Bild2 A

Klicke auf das Plus und wähle im Fenster „Inhalt einfügen“ oben rechts den zweiten Punkt.

Id 469 Bild2 B Id 469 Bild2 B Id 469 Bild2 B

Der Inhalt im Fenster verändert sich und Du siehst den Button „HTML“. Aktiviere ihn.


3 Video einbetten

Id 469 Bild3 Id 469 Bild3 Id 469 Bild3

Nach dem Klick auf den Button geht ein kleines Fenster auf, in welches Du den Einbettungscode einfügst.


Klicke dann auf „Ok“ und das Video ist auf Deiner Webnode-Website eingebettet.

Hinweis: Es kann sein, dass Du im Bearbeitungsmodus das eingebettete Video nicht siehst, aber in der Besucheransicht ist es da.


Id 469 Bild4 Id 469 Bild4 Id 469 Bild4

Willst Du ein YouTube- oder Vimeo-Video einbetten, dann musst Du nur dessen URL (den Link zum Video) kopieren. Du findest diesen oben in Deinem Browser.

Hinweis: Alternativ kannst Du in YouTube auch auf „Teilen“ klicken und dann die Video-URL herauskopieren. Bei Vimeo findest Du die Video-URL, nachdem Du auf das kleine Flugzeug geklickt hast. Es erscheint rechts im Videofenster, wenn Du mit der Maus auf das Video gehst.


5 Youtube- oder Vimeo-Video einbetten

Id 469 Bild5 Id 469 Bild5 Id 469 Bild5

Zum Einbetten des YouTube- oder Vimeo-Videos gehst Du so vor, wie unter 2. beschrieben. Mit einem Unterschied: Nachdem das Fenster „Inhalt einfügen“ aufgegangen ist, kannst Du direkt auf den Button „Video“ klicken.

Id 469 Bild5 A Id 469 Bild5 A Id 469 Bild5 A

Im neuen Fenster fügst Du einfach den Video-Link ein, klickst auf „Ok“ und fertig.


Der Autor
Thomas Kirsche Magazin Thomas Kirsche Magazin Thomas Kirsche Magazin
Thomas Kirsche
Meine erste Website entwarf und programmierte ich im Jahr 2001. Damals faszinierten mich HTML und vor allem Flash und natürlich ansprechende Inhalte. Seit 2006 arbeite ich als freier Autor und Journalist. Dabei liebe ich es, unterschiedliche Themenfelder zu bearbeiten. Beim Blick über den Tellerrand sprießen nämlich nur so die Ideen. Schwerpunkte meiner Arbeit sind neben „SEO-Texten“, „Ratgebern“, „Produkttests“ auch „Bloggen“ und „Podcasting“ – ein wieder neu aufflammendes und spannendes Medium.

Javascript einfügen

Javascript ist eine Programmiersprache, mit der kleine Programme geschrieben werden können. Sie wurde entwickelt, damit Nutzer mit Internetseiten interagieren können. So können dank Javascript auf Webseiten Fotos bearbeitet oder Texte beliebig verändert und abgespeichert werden. Auch Werbebanner werden in der Regel durch Javascript erstellt und die Vorschläge bei der Eingabe von Suchbegriffen sind ebenfalls durch die Programmiersprache generiert. Die Funktionsvielfalt von Javascript ist also immens.


Für Deine Website ist aber sicherlich am wichtigsten, wie Du einen Cookie-Hinweis darauf einbauen kannst. Mit ihm erklärst Du dem Besucher, dass Deine Website Cookies verwendet und was mit den gesammelten Daten geschieht. Du kannst auf der Website von silktide.com über „Tools“ unter dem Punkt „Cookie Consent“ einen eigenen Hinweis-Cookie erstellen. Es lässt sich dazu aber auch der Javascript-Code verwenden, der in dieser Anleitung weiter unten hinterlegt ist.


Anhand dieses praktischen Beispiels lernst Du, wie Du bei einer über Webnode erstellten Website Javascript einfügst. Das Vorgehen lässt sich dann auf andere Javascript-Anwendungen übertragen.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
mittel
Zeitaufwand
10 Minuten

1 Code kopieren

Kopiere diesen Code mit STRG C:


<script type="text/javascript">

window.cookieconsent_options = {"message":"Diese Webseite nutzt Cookies, um bestmögliche Funktionalität bieten zu können.","dismiss":"Zustimmen","learnMore":"Mehr Infos","link":"http://de.webnode.com/datenschutzerklaerung/","theme":"dark-bottom"};

</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js"></script>


Wenn es notwendig sein sollte, kannst Du die URL "http://de.webnode.com/datenschutzerklaerung/“durch einen Link zu Deiner eigenen Datenschutzerklärung ersetzen.


2 Inhalt einfügen

Id 464 Bild1 Id 464 Bild1 Id 464 Bild1

Gehe jetzt im Webnode-Bearbeitungsbereich auf Deine Start-Seite und klicke auf das Pluszeichen links („Inhalt einfügen“).

Id 464 Bild1 A Id 464 Bild1 A Id 464 Bild1 A

Wählen im Fenster oben den zweiten Punkt.

Id 464 Bild1 B Id 464 Bild1 B Id 464 Bild1 B

Wähle anschließend den Punkt „HTML“.


3 Javascript einfügen

Id 464 Bild2 Id 464 Bild2 Id 464 Bild2

Füge im folgenden Fenster den Code aus Punkt 1. ein und bestätige mit „Ok“.

Id 464 Bild2 A Id 464 Bild2 A Id 464 Bild2 A

Schon erscheint auf deiner Website ein Hinweis darauf, dass Cookies verwendet werden.


4 Schritte wiederholen

Da der Hinweis-Cookie auf jeder Seite erscheinen sollte, musst Du die Schritte 2 bis 4 auf jeder Unterseite Deiner Website wiederholen. Entsprechend diesem Beispiel kannst Du unterschiedlichen Javascript-Code auf allen Seiten Deiner Website einfügen.


Der Autor
Thomas Kirsche Magazin Thomas Kirsche Magazin Thomas Kirsche Magazin
Thomas Kirsche
Meine erste Website entwarf und programmierte ich im Jahr 2001. Damals faszinierten mich HTML und vor allem Flash und natürlich ansprechende Inhalte. Seit 2006 arbeite ich als freier Autor und Journalist. Dabei liebe ich es, unterschiedliche Themenfelder zu bearbeiten. Beim Blick über den Tellerrand sprießen nämlich nur so die Ideen. Schwerpunkte meiner Arbeit sind neben „SEO-Texten“, „Ratgebern“, „Produkttests“ auch „Bloggen“ und „Podcasting“ – ein wieder neu aufflammendes und spannendes Medium.

Online-Shop einrichten

Du hast ein eigenes Unternehmen gegründet und möchtest Deine Produkte auch über das Internet anbieten? Dann ist ein Online-Shop genau das richtige Instrument für Dich, um Kunden zu akquirieren. Mit dem Homepage-Baukasten von Webnode kannst Du Dir in wenigen Minuten einen eigenen E-Shop aufbauen, wobei keinerlei Programmierkenntnisse vonnöten sind. Die Benutzeroberfläche lässt sich einfach und intuitiv bedienen.


Bereits ab 9,95€ pro Monat kannst Du bei Webnode Deinen eigenen Online-Shop betreiben und Produkte einstellen. Damit Du nun endlich loslegen kannst mit Deinem E-Shop, folgst Du am besten dieser Schritt-für-Schritt-Anleitung, die Dir fünf der wichtigsten Funktionen zum Start anschaulich erklärt.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Leicht
Zeitaufwand
Ca. 15 Minuten

Mit Webnode stehen Dir unzählige Möglichkeiten, Deinen E-Shop zu gestalten, zur Verfügung. Für den Anfang empfehlen wir Dir, zuerst die nächsten fünf Einstellungen vorzunehmen, da es sich dabei um essentielle Bestandteile handelt, über die ein Online-Shop verfügen sollte. Alles Weitere kannst Du nach und nach hinzufügen.


1 Vorlagenauswahl

Id 473 1 Schritt Id 473 1 Schritt Id 473 1 Schritt

Wenn Du noch keinen Webnode-Account und keine Website hast, registriere Dich bitte erst. Wenn Du nach der Art deiner Onlinepräsenz gefragt wirst, wähle Online-Shop aus, wenn Du einen reinen Shop möchtest. Ansonsten erstelle eine Homepage und gehe dann wie als nächstes beschrieben vor.


Füge Deiner Website eine neue Seite hinzu und wähle die Option Online-Shop aus. Wenn diese Option nicht angezeigt wird, ist die Funktion noch nicht für Deine Vorlage verfügbar. Hieran wird gearbeitet und weitere Vorlagen sollen schon bald folgen. Nun suchst Du Dir eine der angebotenen Vorlagen aus, die zum Grundgerüst Deines E-Shops werden soll. Bestätige mit Klick auf den "Auswählen"-Button. Eine kurze Anleitung zum Erstellen eines Online-Shops wird angezeigt. Klicke am Ende auf "Shop eröffnen", um mit der Bearbeitung Deines Shops loslegen zu können.


2 Produkte hinzufügen

Id 473 2 1 Schritt Id 473 2 1 Schritt Id 473 2 1 Schritt

Um Deinen Online-Shop zu gestalten, wird die Bearbeitungsleiste, die sich ganz oben auf der Seite befindet, zu Deinem wichtigsten Handwerkzeug. Über den ersten Button oben rechts mit dem Namen "Produkte" kannst Du Produkte und Online-Shop-Kategorien erstellen. Erstere sind für einen Online-Shop natürlich essentiell. Mit einem Klick auf „Produkte“ erscheint ein Feld, in das alle wichtigen Daten zum Produkt eingegeben und Bilder dazu hochgeladen werden können.


3 Navigation bearbeiten

Id 473 3 Schritt Id 473 3 Schritt Id 473 3 Schritt

Über den "Seiten"-Button lässt sich die Struktur Deines E-Shops umgestalten. Mit einem Klick auf "Seiten" kannst Du eine neue Seite anlegen, beispielsweise "Über mich". Diese füllst Du dann mit Angaben zu Deinem Unternehmen aus. Dabei kannst Du natürlich noch Unterseiten hinzufügen und Deinen Online-Shop so aufbauen, wie Du ihn Dir vorstellst.


4 Texte und Bilder einfügen

Id 473 4 1 Schritt Id 473 4 1 Schritt Id 473 4 1 Schritt

Damit Deine Seite anschaulicher wird, solltest Du zusätzlich zu Deinen Produkten Texte, Bilder oder multimediale Inhalte einfügen, die mehr über Deinen Online-Shop verraten. Dazu wählst Du in der Bearbeitungsleiste den Button "Texte und Bilder" oder ziehst diesen an denjenigen Ort auf Seite, auf der Du Dich momentan befindest, um ihn gleich richtig zu platzieren.

Id 473 4 2 Schritt Id 473 4 2 Schritt Id 473 4 2 Schritt

Nun klickst Du auf "Text bearbeiten" und fügst denjenigen Text ein, der auf der Seite erscheinen soll.

Id 473 4 3 Schritt Id 473 4 3 Schritt Id 473 4 3 Schritt

Für Bilder, Dateien, Links oder Videos wählst Du "+ Einfügen" und schon werden diejenigen Inhalte angezeigt, die Du präsentieren möchtest.


Hinweis: Unter "E-Shop bearbeiten" kannst Du natürlich viele weitere Einstellungen vornehmen. Durchforste dazu einfach die Bearbeitungsleiste, die Dir ohnehin auf einen Blick verrät, was du alles hinzufügen kannst, seien es Formulare, Umfragen etc.


5 Versandarten festlegen

Id 473 5 1  Schritt Id 473 5 1  Schritt Id 473 5 1  Schritt

Als Online-Shop musst Du bestellte Waren natürlich an den Kunden versenden. Um gewünschte Versandarten anzulegen, wählst Du aus der oben rechts befindlichen Editor-Leiste die Option "Einstellungen", dann "Online-Shop" in der erschienenen linken Leiste und klickst in der jetzt erscheinenden Liste auf "Versandarten".

Id 473 5 2 Schritt Id 473 5 2 Schritt Id 473 5 2 Schritt

Nun werden Dir bereits aktive Möglichkeiten angezeigt. Setze nun bei denjenigen Vorgaben, die Du siehst und nicht anbieten möchtest, einen Haken und klicke auf "Löschen" oben rechts. Über "Neue Versandart" kannst Du Deine favorisierten Transportvarianten eingeben.


Hinweis: Die Zahlungsarten kannst Du ebenfalls über "Online-Shop-Einstellungen" bearbeiten.


Der Autor
Avatar Avatar Avatar
„Homepage-Ratgeber.de“-Redaktion
Wir von „Homepage-Ratgeber.de“ sind ein Team von Technologie-Enthusiasten und immer auf der Suche nach den neuesten Software-Trends. Bereits seit 2013 beobachten wir den deutschen und internationalen Markt für Homepage-Baukästen intensiv und haben seither mit unseren Anleitungen, Tipps und Vergleichen mehreren tausend Privatpersonen und kleinen Firmen dabei geholfen, ihre eigene Website selbst zu erstellen.

Besucherzähler einbauen

Beim Aufbau eines eigenen Online-Shops kommt es in erster Linie auf die angebotenen Produkte und deren Darstellung an. Nach und nach kann man dann verschiedene Gadgets einfügen, die kleine, aber feine Funktionen beinhalten. Dazu gehört in jedem Fall der Besucherzähler: Er gibt Hinweise darauf, wie viele Nutzer bereits Deinen Online-Shop aufgerufen haben und zeigt diesen zugleich an, wie beliebt Dein Shop ist.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Einfach
Zeitaufwand
5-10 Minuten

Du kannst den Besucherzähler zwar nicht direkt von Webnode beziehen, doch der Homepage-Baukasten liefert Dir einen Link zu einem externen Anbieter. Natürlich gibt es auch andere Dienstleister, die Besucherzähler zur Verfügung stellen – in den meisten Fällen sogar kostenlos.


1 E-Shop bearbeiten aufrufen

Id460 1  Schritt Id460 1  Schritt Id460 1  Schritt

Logge Dich auf Deiner Webnode-Seite ein, wähle das Projekt, das Du bearbeiten möchtest – also Deinen Online-Shop – und klicke auf der rechten Seite unter dem Abschnitt "Schneller Überblick" auf den Menüpunkt "E-Shop bearbeiten".


2 Besucherzähler für Webnode auswählen

Id460 2  Schritt Id460 2  Schritt Id460 2  Schritt

Bevor Du fortfahren kannst, suchst Du Dir zunächst einen Besucherzähler aus. Öffne dazu ein neues Fenster in Deinem Browser und füge beispielsweise diese URL-Adresse ein: http://www.counter-zaehler.de/. Suche Dir den Besucherzähler aus, der Dir am besten gefällt und drücke auf den "Will ich!"-Button.


Hinweis: Der angebotene Link ist ein Vorschlag von Webnode selbst. Natürlich kannst Du den Besucherzähler auch von einem anderen Dienstleister beziehen – der Vorgang bleibt dabei gleich.


3 Code kopieren

Id460 3  Schritt Id460 3  Schritt Id460 3  Schritt

Kopiere den HTML-Code, der dir nun angezeigt wird, indem Du einfach auf den "Code kopieren!"-Button klickst. Nun kannst Du die Seite wieder schließen und mit den Einstellungen auf Deiner Webnode-Seite fortfahren.


Hinweis: Manchmal kann es vorkommen, dass der Code trotz Klick auf den entsprechenden Button nicht kopiert wird. Deshalb empfehlen wir Dir, auf Nummer sicher zu gehen: Markiere den Code und drücke entweder Strg+C bei Windows, Cmd+C bei Mac OS X oder entscheide Dich für Rechtsklick > Kopieren bei beiden Betriebssystemen, um den Code zu kopieren.


4 "Embed-Code" öffnen

Id460 4  Schritt Id460 4  Schritt Id460 4  Schritt

Zurück auf Deiner Online-Shop-Seite wählst Du in der Bearbeitungsleiste oben die Option "Mehr". Nun klappt sich eine kleine Liste auf, wobei Du auf den Punk "Embed-Code" klickst.


5 HTML-Code einfügen

Id460 5  Schritt Id460 5  Schritt Id460 5  Schritt

In das nun offene Fenster "Neues Widget: Benutzer-Widget" fügst Du den kopierten HTML-Code in das Feld "Embed-Code" ein. Bevor Du auf "OK" drückst, kannst Du noch entscheiden, ob der Besucherzähler auf Deiner Webnode-Seite links, mittig oder rechts ausgerichtet werden soll. Wähle jetzt "OK" und schon hast Du einen Besucherzähler auf Deiner Online-Shop-Seite eingefügt.


Hinweise: Das Einfügen des HTML-Codes nimmst Du entweder über Strg+V bei Windows, Cmd+V bei Mac OS X oder über Rechtsklick > Einfügen bei beiden Betriebssystemen vor.

Id460 6  Schritt Id460 6  Schritt Id460 6  Schritt

Wichtig: Möchtest Du, dass der Besucherzähler auf allen Seiten Deines Webnode-E-Shops angezeigt wird, musst Du oben in der Bearbeitungsleiste auf "Webseiten Template" klicken und "Einstellungen für erfahrene Benutzer" wählen. Anschließend folgst Du einfach der soeben beschriebenen Anleitung.


Der Autor
Avatar Avatar Avatar
„Homepage-Ratgeber.de“-Redaktion
Wir von „Homepage-Ratgeber.de“ sind ein Team von Technologie-Enthusiasten und immer auf der Suche nach den neuesten Software-Trends. Bereits seit 2013 beobachten wir den deutschen und internationalen Markt für Homepage-Baukästen intensiv und haben seither mit unseren Anleitungen, Tipps und Vergleichen mehreren tausend Privatpersonen und kleinen Firmen dabei geholfen, ihre eigene Website selbst zu erstellen.
betterbusiness GmbH Deutschlands größtes Beratungsportal zum Thema "Online-Auftritt" hat 4,76 von 5 Sternen 566 Bewertungen auf ProvenExpert.com