Logo Hr Weiss
Wix Logo Wix Logo Wix Logo
Star (Full) Star (Full) Star (Full) Star (Full) Star (Half)
4,4/5 (31 Bewertungen)
Schönste Designvorlagen aller Anbieter
Größter Funktionsumfang im Test
Unendliche Gestaltungsfreiheit
HOMEPAGE TEST
1,2
10/2019
Zum Anbieter »
Go Daddy Logo Mit Rand Go Daddy Logo Mit Rand Go Daddy Logo Mit Rand
Star (Full) Star (Full) Star (Full) Star (Full) Star (Half)
4,4/5 (79 Bewertungen)
Sehr leichte Handhabung
Bearbeitung von Unterwegs mit Mobile Editor
Mehr als 16.000 Designvorlagen verfügbar
HOMEPAGE TEST
1,3
10/2019
Zum Anbieter »
Weebly Header Weebly Header Weebly Header

Weebly.com: Anleitungen & Tricks

Webseiten bauen mit Homepage-Baukästen wie Weebly mag relativ einfach sein. Dennoch kommt ab und an die eine oder andere Frage auf. Die wichtigsten findest du hier:

So meldest Du Dich bei Weebly an (Login)

Es gibt verschiedene Synonyme für den den Begriff Login. Während auf der deutschsprachigen Seite von Weebly „Anmelden“ benutzt wird, findet man auf der amerikanischen Original-Seite weebly.com den Begriff „Log In“ für die Anmeldung. Andere Anbieter verwenden teilweise auch den „Sign In“ statt "Log In“.

Aufwand im Überblick:
Mit Kosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
1 - 3 Minuten

Da für das Anmelden bei Weebly eine erfolgreiche Registrierung erforderlich ist, wird diese in den Schritten 1 und 2 dieser Anleitung beschrieben. Die Beschreibung des eigentlichen Anmeldens findest Du in Schritt 3.

1 Weebly-Startseite aufrufen und registrieren

Id 419 Bild 1 Id 419 Bild 1 Id 419 Bild 1

Gehe auf www.weebly.com und klicke auf „Registrieren“ in der oberen rechten Ecke der Weebly-Startseite.

Id 419 Bild 4 Id 419 Bild 4 Id 419 Bild 4

In dem sich öffnenden Fenster wählst Du die Methode, mit der Du Dich bei Weebly registrieren möchtest. Hierbei wird Dein Kundenkonto entweder mit Deinem Facebook- oder Google-Konto, oder mit Deiner E-Mail-Adresse verknüpft. Bei der Registrierung via E-Mail-Adresse musst Du zusätzlich Deinen vollständigen Namen und ein Passwort angeben. Bestätige den gesamten Vorgang, indem Du auf „Registrieren“ drückst.

Achtung: Wer Wert auf Datenschutz legt, sollte eher die Option „E-Mail-Adresse“ wählen, weil damit Weebly keinen Zugriff auf Dein Facebook- bzw. Google-Konto bekommt.

Hinweis: Nutzer, die sich mit ihrem Facebook oder Google+ Konto registrieren, melden sich künftig mit ihrem Facebook beziehungsweise Google+ Passwort an.


2 E-Mail-Adresse verifizieren

Dieser Schritt ist nur notwendig, wenn Du die Option „E-Mail-Adresse“ gewählt hast – und auch dann nur in bestimmten Fällen. Nachdem Du auf „Registrieren“ geklickt hast, sendet Dir Weebly oftmals eine E-Mail an die Adresse, die Du angegeben hast. Die E-Mail enthält einen Link den Du anklickst, um die Verknüpfung zwischen Deinem Weebly- und Deinem E-Mail-Konto zu bestätigen.

Hinweis: Die Nachricht mit dem Verifizierungslink kann unter Umständen in dem Ordner „Spam“ Deines E-Mail-Kontos landen.


3 Einloggen - Anmelden

Id 419 Bild 1 Id 419 Bild 1 Id 419 Bild 1

Nach erfolgreicher Registrierung klickst Du für künftige Logins auf „Anmelden“ in der oberen rechten Ecke der Weebly Startseite (www.weebly.com).

Id 419 Bild 2 Id 419 Bild 2 Id 419 Bild 2

Je nach zuvor gewählter Registrierungsmethode klickst Du entweder auf den Facebook- oder Google-Button oder trägst direkt auf Weebly Deine E-Mail-Adresse und Dein Passwort ein.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So löschst Du Deinen Weebly-Account

So einfach es klingen mag, einen Account zu löschen, zwischen all den Menüs der Homepage-Baukästen kann es sich zu einem Suchspiel entwickeln, den richtigen Button zu finden.


Zunächst solltest Du Dir noch Gedanken machen, ob du Blogbeiträge, Fotos, Videos oder Deine veröffentlichten Artikel noch abspeichern willst. Ist der Account erst einmal gelöscht, gibt es keine Möglichkeit, diese Dinge wiederherzustellen. Das ist vor allem wichtig, wenn Du zu einem anderen Anbieter wechseln möchtest.

Aufwand im Überblick:
Mit Zusatzkosten verbunden
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
2 Minuten

1 Login-Bereich

Id 420 Bild 1 Id 420 Bild 1 Id 420 Bild 1

Die Option den Account zu löschen erhältst Du mit wenigen Klicks von Deiner regulären Startseite aus.

Id 420 Bild2 Id 420 Bild2 Id 420 Bild2

Auf dieser findest Du oben rechts Deinen Benutzernamen. Rechts daneben findet man einen Pfeil, über den sich ein Dropdown-Menü öffnen lässt. Dieses zeigt nun drei verschiedene Auswahlmöglichkeiten an: Account, Support oder Abmelden. Hier wählst Du die Option Account aus und wirst automatisch auf die Seite mit den allgemeinen Daten des Profilinhabers weitergeleitet:


2 Accounteinstellungen

Id 420 Bild3 Id 420 Bild3 Id 420 Bild3

Auf der linken Seite befindet sich eine Box, in der Benutzername, Mail, Facebook- und der Google+ Account angezeigt werden. Darunter ist die Option „Ihr Weebly Konto endgültig löschen“ wählbar.


Wenn Du diese Option anklickst, öffnet sich ein neues Fenster, in dem Du gefragt wirst, ob Du Deinen Account endgültig löschen willst.

Id 420 Bild4 Id 420 Bild4 Id 420 Bild4

Hier hast Du auch die Möglichkeit, den Betreibern mitzuteilen, wieso Du den Account nicht mehr benötigst.


Hinweis: Wenn Du nicht weiterhin über die Neuerungen von Weebly informiert werden möchtest, löscht Du den blauen Haken bei „Benachrichtigen Sie mich über zukünftige Neuerungen“ und drückst danach auf bestätigen.


Danach wirst Du automatisch ausgeloggt und Dein Account ist gelöscht.


Der Autor
Tina Brandl Magazin Tina Brandl Magazin Tina Brandl Magazin
Tina Brandl
Ich studiere seit 2014 Technikjournalismus/Technik-PR. Im Studium schreibe ich für das hochschulinterne Onlinemagazin des Studiengangs und betreibe mit Kommilitonen einen satirischen Studentenblog. Meine Schwerpunkte liegen auf Social-Media-Marketing, Crossmedia und Public Relations. Sowohl mit Web-Konzeption als auch Web-Programmierung setzte ich mich privat und durch das Studium auseinander.

So führst Du ein Backup (bup) bei Weebly durch

Unter einem Backup (BUP) versteht man bei einer Website das Speichern sämtlicher Daten, um sie im Falle eines Datenverlustes so rasch wie möglich wieder herstellen zu können.


Bei Homepage-Baukästen ist es in der Regel gar nicht so einfach, ein Backup zu erstellen. Meist muss man auf Lösungen von Drittanbietern zurückgreifen, da diese Funktion in Homepage-Baukästen im Regelfall nicht vorgesehen ist. Anders allerdings beim Anbieter Weebly: Bei Weebly kannst Du die Daten Deiner Website als Sicherungsdatei auf Deinem PC speichern. Du hast aber auch die Möglichkeit, eine bestehende Weebly-Website einfach im Rahmen des Baukastens zu kopieren und dadurch zu sichern.

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

1 Eine Sicherungsdatei anlegen und am PC herunterladen

Id 421 Bild 1 2
Id 421 Bild 1 2 Id 421 Bild 1 2

Nachdem Du Dich bei Weebly mit Deinen Zugangsdaten angemeldet und gegebenenfalls auf der linken Seite das richtige Website-Projekt ausgewählt hast, klickst Du auf die Schaltfläche „Website bearbeiten“ auf der rechten Seite.

Id 421 Bild 2
Id 421 Bild 2 Id 421 Bild 2

Du gelangst in den Website-Editor von Weebly, wo Du Deine Seite bearbeiten kannst. Hier wählst Du aus der Kopfleiste den Menüpunkt „Einstellungen“ aus.

Id 421 Bild 4
Id 421 Bild 4 Id 421 Bild 4

Das Einstellungs-Fenster öffnet sich standardmäßig in der Ansicht „Allgemein“. Du musst jetzt ein wenig nach unten scrollen, bis Du zum Bereich „Sicherungsdatei“ gelangst. Hier wirst Du aufgefordert, eine E-Mail-Adresse anzugeben. Nachdem Du das gemacht hast, klickst Du rechts daneben auf den Button „E-Mail-Archiv“.

Id 421 Bild 6
Id 421 Bild 6 Id 421 Bild 6

Binnen weniger Sekunden erhältst Du eine E-Mail von Weebly mit dem Download-Link. Öffne diese Mail und klicke in ihr auf den Button „ZIP-Archiv herunterladen“.

Id 421 Bild 8
Id 421 Bild 8 Id 421 Bild 8

Es öffnet sich eine neue Seite in Deinem Browser. Dort erscheint das kleine Fenster des Explorers oder Finders in dem Du nur darauf achten musst, dass „Datei speichern“ ausgewählt ist. Bestätige mit „Ok“ und speichere so die ZIP-Datei lokal auf der Festplatte Deines Computers.

Hinweis: Sobald Du „ZIP-Archiv herunterladen“ geklickt hast, erscheint der Link zum Download der Sicherungsdatei auch bei Weebly unterhalb des Eingabefelds für die E-Mail-Adresse.


2 Deine Website bei Weebly kopieren

Id 421 Bild 10
Id 421 Bild 10 Id 421 Bild 10

Falls Du Änderungen an Deiner Website vornehmen willst, aber Dir nicht sicher bist, ob alles so funktioniert wie Du Dir das wünschst, kannst Du einfach eine Kopie Deiner Website direkt im Baukasten erstellen. Du kannst dann an der Kopie Deiner Website arbeiten, und wenn die Änderungen nicht wie gewünscht ausfallen sollten, verwirfst Du sie einfach wieder.

Wähle hierzu, nachdem Du Dich bei Weebly eingeloggt hast, zunächst links die entsprechende Website aus. Klicke als nächstes rechts auf den Button mit den drei Punkten als Symbol und wähle aus dem sich anschließend öffnenden Drop-Down Menü den Eintrag „Seite kopieren“ aus. Die Kopie Deiner Website findest Du anschließend einfach in der Liste Deiner Website-Projekte. Die Bezeichnung der kopierten Website ist dieselbe wie beim Original, anfangs um den Zusatz „Copy“ erweitert.

Id 421 Bild 12
Id 421 Bild 12 Id 421 Bild 12

Je nachdem, welche Apps Du in der Original-Website verwendet hast, kann es sein, dass Du bei der Kopie zunächst Deine Apps neu verknüpfen musst. Außerdem solltest Du beachten, dass die Kopie im kostenlosen Tarif angelegt wird. Sollte also Dein Originalprojekt auf einem der kostenpflichtigen Tarife von Weebly basieren, kannst Du bei der Kopie unter Umständen nicht alle Funktionen des Originals nutzen.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So fügst Du HTML-Code bei Weebly ein

Für Nutzer mit Programmier-Kenntnissen stellen die meisten Anbieter von Homepage Baukästen HTML- und CSS-Editoren bereit. Mit diesen Editoren kann direkt aus dem Baukasten heraus der Code ausgewählter HTML-Dokumente umgeschrieben oder um eigenen Code ergänzt werden. In den meisten Fällen ist dies allerdings nicht nötig. Durch die komfortable und auch für Laien leicht verständliche Bedienung, durch die sich Homepage Baukästen auszeichnen, lassen sich alle relevanten Einstellungen auch ohne den Einsatz von HTML-Editoren vornehmen.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Schwer
Zeitaufwand
abhängig vom Umfang der Programmierung

Achtung: HTML in den HTML-Editor korrekt einzufügen oder darin zu bearbeiten, erfordert gewisse fortgeschrittene Kenntnisse. Sicherheitshalber solltest Du die automatische Vorschau aktiviert lassen, um Deine Änderungen am HTML-Code zu überwachen. Sollte der von Dir erstellte Code nicht wie vorhergesehen funktionieren, kannst Du Deine Änderungen immer mit einem Klick auf den Button „Abbrechen“ rückgängig machen.


1 Den Weebly HTML Editor aufrufen

Id 422 Bild 1 Id 422 Bild 1 Id 422 Bild 1

Der Baukasten wird standardmäßig mit dem Bereich „Erstellen“ als Startseite geöffnet. Wähle als ersten Schritt also den Eintrag „Theme“ in der Kopfzeile des Baukastens aus.

Id 422 Bild 2 Id 422 Bild 2 Id 422 Bild 2

In der linken Seitenleiste findest Du nun ganz unten den Button „HTML / CSS bearbeiten“. Klicke diesen an. Dadurch wird der HTML-Editor aufgerufen.


2 HTML einfügen und bearbeiten

Id 422 Bild 3 Id 422 Bild 3 Id 422 Bild 3

Die Ansicht des HTML-Editors ist wie folgt aufgebaut: In der linken Seitenleiste siehst Du die Liste der Dokumente, die Du bearbeiten kannst. Die HTML-Dokumente unter ihnen haben dabei die Datei-Endung .html.

Id 422 Bild 4 Id 422 Bild 4 Id 422 Bild 4

In der Vorschau Deiner Homepage ist nun im oberen Teil zusätzlich ein schwarzer Bereich mit dem HTML Code sichtbar.


Wähle ein HTML-Dokument, das Du bearbeiten möchtest, aus der linken Seitenleiste durch Anklicken aus. In dem schwarzen Editor-Fenster wird nun der entsprechende Code angezeigt. Du kannst einfach in diesen Bereich klicken und eigenen Code einfügen oder bestehenden Code umschreiben.

Id 422 Bild 5 Id 422 Bild 5 Id 422 Bild 5

Achte darauf, dass das Häkchen vor „Automatische Vorschau“ bei der Arbeit im HTML-Editor gesetzt ist. So siehst Du jederzeit, ob der von Dir geänderte oder eingefügte Code auch richtig funktioniert. Falls nicht, kannst Du den Originalzustand jederzeit mit einem Klick auf „Abbrechen“ wiederherstellen. Deine vorgenommenen Änderungen am Code werden erst durch das Anklicken von „Speichern“ dauerhaft übernommen.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So fügst Du ein Favicon bei Weebly ein

Favicons sind ein beliebtes Mittel, um den Wiedererkennungswert einer Homepage zu steigern. Bei einem Favicon handelt es sich um ein winzig kleines, 16 mal 16 Pixel großes Symbol, das meist eine stark vereinfachte Darstellung des Logos der Homepage oder Firma ist. Ein Favicon wird ganz oben in der Titelleiste des Browsers, also beispielsweise dem Internet Explorer, links neben dem Seitentitel angezeigt. Außerdem wird es in den Favoritenlisten und Lesezeichen angezeigt. In beiden Fällen soll es die Orientierung und das Wiederauffinden der gesuchten Homepage erleichtern. Mittlerweile sind Favicons so populär, dass beispielsweise Google Websites, die kein Favicon besitzen, mit Punktabzug im Ranking bestraft werden.

Aufwand im Überblick:
Ist das mit Weebly möglich?
Ja, nur bei kostenpflichtigen Tarifen
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
2 Minuten

Achtung: Wer den kostenlosen Tarif von Weebly nutzt, kann kein eigenes Favicon einfügen.

1 Die „Einstellungen“ aufrufen

Id 425 Bild 3 Id 425 Bild 3 Id 425 Bild 3

Standardmäßig wird bei Weebly beim Öffnen des Baukastens die Seite „Erstellen“ aufgerufen. Wechsle in der Kopfzeile auf die Seite „Einstellungen“.


2 Das Favicon hochladen

Id 425 Bild 4 Id 425 Bild 4 Id 425 Bild 4

In den Einstellungen findest Du in der Rubrik „Allgemein“ den Eintrag „Favicon“. Rechts davon befindet sich der Button „Hochladen“. Klicke diesen an. Es öffnet sich ein Fenster, mit dem Du zum Speicherort Deines Favicons auf Deiner Festplatte navigieren kannst. Wähle Dein Favicon aus und lade es mit einem Doppelklick hoch.

Hinweis: Du kannst mit einem der zahlreichen kostenlosen Favicon-Generatoren wie etwa unter favicon-generator.org ein Logo in ein Favicon umwandeln oder eines von Hand erstellen. Dieses speicherst Du anschließend einfach auf der Festplatte Deines Computers.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So fügst Du ein Logo bei Weebly ein

Das Logo ist das Markenzeichen einer Homepage. Es soll in erster Linie die Wiedererkennung der Homepage erleichtern. Man findet Wort-, Bild- und Wort-Bild-Marken als Logos, wobei die Wort-Bild-Marken am auffälligsten sind.


Ein eigenes Logo zu erstellen ist nicht schwer. Es gibt zahlreiche kostenlose Logo-Generatoren im Internet, zum Beispiel unter ”https://www.graphicsprings.com” oder ”https://www.shopify.com/tools/logo-maker". Diese sind auch für Laien leicht zu bedienen, sodass das Ergebnis bereits innerhalb von 10-15 Minuten auf dem heimischen PC gespeichert werden kann. Und dies alles, ohne zusätzliche Software installieren zu müssen.

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

1 Das Logo austauschen

Id 426 Bild 14 Id 426 Bild 14 Id 426 Bild 14

Fahre mit der Maus über den Platzhalter für das Logo, in unserem Beispiel den Schriftzug „Testdemo“. Daraufhin erscheint ein Auswahlmenü, in welchem Du auf den Button „Logo“ klickst.


Hinweis: Falls Du nur den Text von „Testdemo“ auf einen eigenen Text ändern möchtest, dann klickst Du einfach in den Text „Testdemo“, solange im Auswahlmenü noch „Text“ ausgewählt ist. Es erscheint ein Cursor wie in einem Textverarbeitungsprogramm. Du kannst dann den Platzhalter-Text löschen und Deinen eigenen Text eingeben.

Id 426 Bild 15 Id 426 Bild 15 Id 426 Bild 15

Es öffnet sich nun ein Fenster, in welchem Du Dein Logo entweder von der Festplatte Deines PCs hochladen oder eine Internet-Ressource verlinken kannst. Standardmäßig ist „Mein Computer“ ausgewählt.


Um eine Bild-Datei vom heimischen PC hochzuladen, kannst Du sie mit gedrückt gehaltener Maustaste in den durch eine gestrichelte Linie umrahmten Bereich mit dem Schriftzug „Drag Foto hier“ (auf Deutsch: „Foto hierher ziehen“) ziehen. Alternativ kannst Du auch auf den grünen Button mit der Beschriftung „Foto von Ihrem Computer hochladen“ klicken. Es öffnet sich dann ein Fenster, in dem Du zu dem Speicherplatz Deines Logos auf Deiner Festplatte navigieren und es anschließend hochladen kannst.

Id 426 Bild 16 Id 426 Bild 16 Id 426 Bild 16

Um ein Logo aus dem Internet zu verlinken, musst Du zunächst im oberen Bereich des Fensters „Bilder auswählen von:“ auf den Button „Bild-URL“ klicken. Kopiere mit STRG C die Internet-Adresse des gewünschten Bildes aus der Adresszeile Deines Browsers und füge sie anschließend mit STRG V in die Eingabezeile ein. Bestätige mit einem Klick auf den Button „Einfügen“.

Hinweis: Die Bild-Dateien müssen in einem passenden Datei-Format, also .JPEG, .GIF oder .PNG, vorliegen.


2 Das Logo anpassen

Id 426 Bild 18 Id 426 Bild 18 Id 426 Bild 18

Nachdem Du das Logo erfolgreich ausgetauscht hast, kannst Du es je nach Bedarf weiter bearbeiten. Hierzu fährst Du erneut mit der Maus über das Logo. In dem nun erscheinenden Auswahlmenü sind die Buttons „Bearbeiten“ und „Löschen“ (Papierkorb-Symbol) neu hinzu gekommen.

Id 426 Bild 19 Id 426 Bild 19 Id 426 Bild 19

Durch einen Klick auf „Bearbeiten“ erscheint der Großteil der Homepage grau. Dafür wird das Logo hervorgehoben und eine Zeile mit Bearbeitungswerkzeugen und Effekten erscheint oberhalb des Logos. Du kannst die Größe Deines Logos anpassen, indem Du mit gedrückt gehaltener Maustaste die Marker in den Ecken oder den Mitten der jeweiligen Seite der Umrahmung verschiebst. Durch Verschieben der Marker in den Ecken werden Höhe und Breite unter Beibehaltung des Seitenverhältnisses gleichzeitig vergrößert oder verkleinert. Verschiebst Du einen der Marker in der Seitenmitte, so wird nur jeweils entweder die Höhe oder die Breite vergrößert beziehungsweise verkleinert. Das kann unter Umständen zu unerwünschten Verzerrungseffekten führen. Die jeweils aktuelle Bildgröße wird Dir dabei in der Zeile oberhalb der Bearbeitungswerkzeuge angezeigt. Experimentiere ruhig mit den Effekten, Werkzeugen und verschiedenen Größen.

Id 426 Bild 20 Id 426 Bild 20 Id 426 Bild 20

Wenn Du mit dem Ergebnis nicht zufrieden sein solltest, kannst Du jederzeit mit einem Klick auf „Abbrechen“ die Bearbeitung ungeschehen machen. Die Änderungen werden erst durch einen Klick auf „Speichern“ dauerhaft übernommen.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So richtest Du ein "One Page" Template bei Weebly ein

Eine klassische Website besteht aus mehreren Unterseiten – und hat beispielsweise eine Startseite, eine Über-Uns-Seite, eine Kontakt-Seite, eine Seite für Angebote, für das Impressum etc. Klickst Du in der Navigation etwa auf „Angebote“, lädt Dein Browser diese Unterseite und zeigt sie an. Bei einem Weebly One Page Template ist das anders.


Bei dieser Designvorlage gibt es keine Unterseiten, sondern nur eine einzige Seite, auf der alle wichtigen Punkte der Website untergebracht sind. Betreibst Du etwa einen kleinen Imbisswagen mit angesagtem Streetfood, könnte Deine Website mit einem Weebly One Page Template folgendermaßen aussehen: Die Seite beginnt mit einem Bild des Wagens und dem Namen. Darunter folgt ein kleiner Text über Dein Angebot, Deine Motivation oder Ähnliches. Und darunter baust Du eine Karte ein, auf welcher der Standort Deines Wagens verzeichnet ist. Zu guter Letzt gibt es eine Kontaktmöglichkeit, Buttons, die zu Facebook, Twitter usw. führen und natürlich das Impressum. So hast Du alle relevanten Infos auf einer Seite untergebracht. Doch warum dieses Vorgehen?


One Page Templates sind ideal für die Anzeige auf Smartphones. Die Website wird nämlich komplett mit einem Mal geladen. Der Nutzer muss keine neuen Seiten nachladen und braucht nur nach unten zu scrollen, um alle Infos zu erhalten. One Page Websites sind vor allem bei Internet-Auftritten von kleineren Unternehmen mit überschaubaren Inhalten überaus beliebt, weil sie in diesem Zusammenhang sehr nutzerfreundlich sind.

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

Hinweis: Unter den Begriffen „Template“ und „Theme“ versteht man Designvorlagen. Oft werden diese auch einfach als „Layout“ oder „Design“ bezeichnet. Ein One Page Template ist demnach eine Designvorlage für eine Website, auf der sich praktisch alles auf einer einzigen Seite abspielt.

1 Designvorlage wählen

Id 427 Bild 1 Id 427 Bild 1 Id 427 Bild 1

Nachdem Du Dich bei Weebly angemeldet hast, klickst Du einfach auf „Neue Website erstellen“.

Id 427 Bild 1 A Id 427 Bild 1 A Id 427 Bild 1 A

Wenn du bereits eine Website hast, dann klicke im Bearbeitungsmodus oben rechts auf „Theme“

Id 427 Bild 1 B Id 427 Bild 1 B Id 427 Bild 1 B

...und dann auf „Theme ändern“. Nun erscheint die Designvorlagen-Auswahl.


2 Persönlich wählen

Id 427 Bild 2 Id 427 Bild 2 Id 427 Bild 2

In der Rubrik „Persönlich“ findest Du jede Menge One Page Templates.

Id 427 Bild 2 A Id 427 Bild 2 A Id 427 Bild 2 A

Wähle einfach das Design, was Dir am meisten zusagt. Klicke auf „Auswählen“ und Deine Website wird von Weebly im One Page Template erstellt. Jetzt musst Du sie nur noch mit Inhalten bestücken und schon ist Deine „Visitenkarte im Internet“ fertig.


3 Andere Designvorlagen

Id 427 Bild 3 Id 427 Bild 3 Id 427 Bild 3

Gefällt Dir keines der Designs unter „Persönlich“, dann wähle ruhig ein anderes, auch wenn es mehrere Unterseiten hat.

Id 427 Bild 3 A Id 427 Bild 3 A Id 427 Bild 3 A

Lösche anschließend alle Seiten außer der Home-Seite (Start-Seite). Gehe dazu im Bearbeitungsmodus der Website auf „Seiten“.

Id 427 Bild 3 B Id 427 Bild 3 B Id 427 Bild 3 B

Klicke anschließend links auf die Seite, die Du löschen willst. Hast Du das getan, kannst Du über den Button „Löschen“ die Seite entfernen. Bestätige die Meldung, dass Du die Seite löschen willst, und verfahre genauso mit den anderen Seiten. Schon hast Du Dein One Page Template mit Weebly erstellt.


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.

So richtest Du ein Parallax Template bei Weebly ein

„Parallax“ ist einer der aktuellen Trends im Webdesign. Bei „Parallax Scrolling“ handelt es sich um ein Design, in dem verschiedene Ebenen asynchron gegeneinander geschoben werden. Dieser Effekt entsteht, wenn wir beispielsweise beim Zugfahren aus dem Fenster sehen: es bewegen sich einzelne Ebenen unterschiedlich schnell, was einen Eindruck von Tiefe entstehen lässt. Eines vorweg: Weebly selbst bietet keine eigenen, fix und fertig installierten Parallax-Templates an. Du kannst allerdings bei Weebly in den Hintergrundbildern Deiner Website einen Parallax-Effekt einstellen. Wichtig dabei ist, dass Du Design-Vorlagen auswählst, in denen dies optisch ansprechend möglich ist.

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

1 Theme wechseln

Melde Dich mit Deinen Zugangsdaten im Homepage-Baukasten von Weebly an und klicke in dem sich öffnenden Fenster auf „Website bearbeiten“, um in den Bearbeitungsbereich der entsprechenden Homepage zu gelangen.

Id 428 Weebly Theme Aufrufen Gross
Id 428 Weebly Theme Aufrufen Gross Id 428 Weebly Theme Aufrufen Gross

Beim erstmaligen Registrieren hast Du Dich in der Regel bereits für eine Design-Vorlage entschieden. Um den Parallax-Effekt auf Deiner Website gezielt einzusetzen, kann es wichtig sein, eine entsprechende Design-Vorlage als Basis dafür zu haben. Um Deine bestehende Design-Vorlage zu ändern, klickst Du im Bearbeitungsbereich Deiner Website in der oberen Menüleiste auf „Theme“.

Id 428 Weebly Theme Ändern Gross
Id 428 Weebly Theme Ändern Gross Id 428 Weebly Theme Ändern Gross

In der linken Seitenleiste öffnet sich ein neues Menü, darin klickst Du nun auf „Theme ändern“

Id 428 Weebly Designkatalog Gross
Id 428 Weebly Designkatalog Gross Id 428 Weebly Designkatalog Gross

Es öffnet sich eine Seite, auf der Du unterschiedliche Design-Vorlagen vorfindest. Wähle eine aus und fahre mit der Maus darüber. Daraufhin erscheinen die Buttons „Vorschau“ und „Auswählen“.

Id 428 Weebly Designkatalog Klein
Id 428 Weebly Designkatalog Klein Id 428 Weebly Designkatalog Klein

Interessierst Du Dich näher für die Vorlage, dann klicke auf „Vorschau“. Möchtest Du die Vorlage für Deine Website übernehmen, dann klicke auf „Auswählen“. Nachdem Du auf „Auswählen“ geklickt hast, wird das neue Theme automatisch in Deinen Baukasten übernommen.


2 Parallax-Effekt in Hintergrundbildern einstellen

Id 428 Weebly Abschnitt Hintergrund Bearbeiten Gross
Id 428 Weebly Abschnitt Hintergrund Bearbeiten Gross Id 428 Weebly Abschnitt Hintergrund Bearbeiten Gross

Im Bearbeitungsbereich von Weebly ist Deine Homepage in verschiedene, untereinanderliegende Abschnitte gegliedert. In diesen Abschnitten befinden sich verschiedene Inhaltselemente, wie beispielsweise Bilder oder Textfelder.

Id 428 Weebly Abschnitt Hintergrund Bearbeiten Klein
Id 428 Weebly Abschnitt Hintergrund Bearbeiten Klein Id 428 Weebly Abschnitt Hintergrund Bearbeiten Klein

Um einen gesamten Abschnitt zu markieren, klicke außerhalb der Inhaltselemente in den Abschnitt, so dass der gesamte Abschnitt blau umrandet ist. (Am einfachsten ist es, wenn Du dabei im Bereich des rechten oder linken Bildschirmrands in den Abschnitt klickst). Ober- oder unterhalb des Abschnitts erscheint dann zudem ein waagrechtes Kontext-Menü. Darin klickst Du auf den Button „Hintergrund bearbeiten“.

Id 428 Weebly Hintergrund Optionen Gross
Id 428 Weebly Hintergrund Optionen Gross Id 428 Weebly Hintergrund Optionen Gross

Nachdem Du auf „Hintergrund bearbeiten“ geklickt hast, öffnet sich häufig ein kleines Fenster, wo Du zwischen „Bild“, „Farbe“ oder „Video“ auswählen kannst. Klicke „Bild“ an, das oftmals von vornherein eingestellt ist. Je nach Art des Abschnitts kommst Du auch automatisch zum nächsten Schritt.

Id 428 Weebly Bild Ersetzen Gross
Id 428 Weebly Bild Ersetzen Gross Id 428 Weebly Bild Ersetzen Gross

In dem kleinen Fenster ist die Einstellung „Bild“ meist voreingestellt. Klicke auf „Ersetzen“, wenn Du das bestehende Hintergrundbild ändern oder ein neues von Deinem Computer aus hochladen möchtest. In jedem Fall macht es Sinn, ein Hintergrundbild zu verwenden, damit der Parallax-Effekt zur Geltung kommen kann.

Id 428 Weebly Bild Ersetzen Klein
Id 428 Weebly Bild Ersetzen Klein Id 428 Weebly Bild Ersetzen Klein

Nachdem Du ein Hintergrundbild hochgeladen hast, vergiss nicht im rechten oberen Bildschirmrand auf „Speichern“ zu klicken. Anschließend klickst Du in dem kleinen Fenster auf „Scrolleffekt“.

Id 428 Weebly Parallax Effekt Einstellen Gross
Id 428 Weebly Parallax Effekt Einstellen Gross Id 428 Weebly Parallax Effekt Einstellen Gross

Nachdem Du auf „Scrolleffekt“ geklickt hast, öffnet sich ein weiteres kleines Fenster mit drei Optionen. Hier klickst Du ganz einfach auf „Parallax“, und das Parallax-Scrolling ist für den entsprechenden Abschnitt eingestellt. Scrolle in der Seite nach oben und unten, um zu prüfen wie der Parallax-Effekt sich auf Dein Hintergrundbild sowie auf Deine gesamte Website auswirkt.

Gehe die einzelnen Abschnitte Deiner Website durch, stelle fest ob diese Hintergrundbilder vertragen und wenn ja, probiere unter „Scrolleffekt“ einfach „Parallax“ aus.


Der Autor
Tina Brandl Magazin Tina Brandl Magazin Tina Brandl Magazin
Tina Brandl
Ich studiere seit 2014 Technikjournalismus/Technik-PR. Im Studium schreibe ich für das hochschulinterne Onlinemagazin des Studiengangs und betreibe mit Kommilitonen einen satirischen Studentenblog. Meine Schwerpunkte liegen auf Social-Media-Marketing, Crossmedia und Public Relations. Sowohl mit Web-Konzeption als auch Web-Programmierung setzte ich mich privat und durch das Studium auseinander.

So richtest Du ein Portfolio Template bei Weebly ein

Ursprünglich bezeichnet ein Portfolio eine Sammelmappe oder auch eine Brieftasche. Heute ist der Begriff sehr weitläufig. In der Finanzwelt wird unter Portfolio eine Zusammenstellung von unterschiedlichen Vermögenswerten verstanden, während ein Marketingunternehmen seine Dienstleistungen, Produkte und Marken darunter versteht. Für Kreative bedeutet ein Portfolio die Zusammenstellung der besten und wichtigsten bisher geleisteten Arbeiten. So können sich deren Kunden ein Bild von der Arbeitsweise und Qualität machen.


Im Bereich der Websites wird der Begriff Portfolio genauso unterschiedlich verwendet. Beispielsweise zeigt ein freiberuflicher Grafiker auf seiner Internetseite seine besten Werke oder eine Werbeagentur ihre Dienstleistungen. Das Portfolio ist also immer eine Zusammenstellung von mehreren Dingen. Damit dabei die Übersicht nicht verloren geht, bietet Weebly Portfolio-Templates an. Das sind vorgefertigte Designs, die übersichtlich Grafiken, Fotos, Videos und Ähnliches präsentieren.

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

1 Portfolio-Template nach Registrierung auswählen

Id 429 Bild 2 Id 429 Bild 2 Id 429 Bild 2

Nach der Registrierung bei weebly, kannst Du Dir ein Tempalte aussuchen, was am ehesten zu Deinen Vorstellungen passt. Hast du eins gefunden, klicke auf „Auswählen“.

Id 429 Bild 2 A Id 429 Bild 2 A Id 429 Bild 2 A

Anschließend wirst Du noch gefragt, wie Deine Domain heißen soll. Hast Du noch keine eigene Domain oder willst Du erstmal Weebly testen, ohne Geld für eine Domain auszugeben, dann trage einfach in der ersten Zeile den gewünschten Namen ein. Es wird jetzt eine Subdomain erstellt, die sich aus Deinem Wunschnamen und weebly.com zusammensetzt. Eine richtige Domain in der Art „www.meinwunschname.de“ kannst Du später immer noch beantragen. Klicke auf „Weiter“. Das System erstellt ein Portfolio-Template, was Du mit Inhalten befüllen kannst.


2 Template ändern

Id 429 Bild 3 Id 429 Bild 3 Id 429 Bild 3

Hast Du bereits eine Website bei Weebly angelegt und willst sie in einem Portfolio-Template präsentieren, dann melde Dich zunächst an und gehe in den Bearbeitungsmodus der Website. In der Zeile am oberen Bildschirmrand steht der Punkt „Theme“ – was in der Praxis dasselbe wie „Template“ bedeutet. Klicke „Theme“ an.

Id 429 Bild 3 A Id 429 Bild 3 A Id 429 Bild 3 A

Jetzt erscheint auf der linken Seite eine Leiste mit verschiedenen Auswahlmöglichkeiten. Wähle gleich die Erste „Theme ändern“.


3 Portfolio-Template wählen

Id 429 Bild 4 Id 429 Bild 4 Id 429 Bild 4

Nachdem Du den Punkt angewählt hast, erscheint ein Auswahlfenster mit allen verfügbaren Themes bzw. Templates. Gehe hier auf den Link „Portfolio“ und wähle anschließend das passende Template aus.

Id 429 Bild 4 A Id 429 Bild 4 A Id 429 Bild 4 A

Willst Du kein neues Template wählen, dann kannst Du das Fenster jederzeit über die Schaltfläche „Schließen“ oben links wegklicken.


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.

So richtest Du eine Domain bei Weebly ein

Eine normale Domain setzt sich aus zwei Teilen zusammen, der sogenannten „First Level Domain“ und der „Second Level Domain“. Als First Level Domain wird die Endung einer Website bezeichnet: .de, .com, .org, .net etc. Die Second Level Domain ist der eigentliche Name der Website. Dieser leitet sich in der Regel von dem Unternehmen oder der Organisation ab, von dem die Website betrieben wird. Zum Beispiel „firmenname-xy.de“.


Es gibt auch noch eine „Third Level Domain“, die auch als Subdomain bezeichnet wird. Websites, die auf kostenlosen Homepage-Baukästen gestaltet werden, liegen auf solchen Subdomains – bei denen der Name des Baukasten-Anbieters stets im Domain-Namen enthalten ist. Also beispielsweise www.firmenname-xy.weebly.com. Möchte man eine eigene (Second Level) Domain, muss man bei jedem Homepage-Baukasten in einen kostenpflichtigen Tarif wechseln.


Beim Anbieter Weebly ist es selbstverständlich auch möglich, eine eigene Domain einzurichten. Das geht schnell und ist nicht kompliziert. Die Kosten variieren dabei je nachdem, für wie lange man sich die Domain sichern will. Für ein Jahr kostet es 18 Euro. Für zwei Jahre 30 Euro.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Ab Tarif "Starter" inklusive
Schwierigkeitsgrad?
Mittel
Zeitaufwand
15 Minuten

1 Registriere Dich bei Weebly

Id430 01 Registrieren Id430 01 Registrieren Id430 01 Registrieren

Als erstes musst Du Dich beim Homepage-Baukasten-Anbieter Weebly registrieren. Gehe auf weebly.com/de und klicke oben links auf den Button „Registrieren“. Gib nun Deinen Namen, Deine E-Mail-Adresse und ein selbst gewähltes Passwort in das Anmeldeformular ein und klicke auf den „Registrieren“-Button.


Hinweis: Du kannst Dich bei Weebly auch mit Deinem Facebook-Konto oder Deinem Google+ Konto registrieren, insofern Du bei einem dieser Dienste angemeldet bist.


2 Das Dashboard als Steuerzentrale

Id430 02 Dashboard Id430 02 Dashboard Id430 02 Dashboard

Nachdem Du Dich bei Weebly registriert hast, befindest Du Dich im sogenannten „Dashboard“ (englisches Wort für „Armaturenbrett“). Das ist Deine Steuerzentrale bei Weebly. Von hier aus kannst Du Deine Webseite(n) verwalten, Upgrades vornehmen oder eine Domain einrichten.

Id430 03 Dashboard Domains Id430 03 Dashboard Domains Id430 03 Dashboard Domains

In der oberen Navigation links findest Du die „Domains“-Schaltfläche (Button), die Du zum Einrichten Deiner Domain benötigst. Per Klick öffnet sich ein neues Fenster. Im nächsten Schritt musst Du Deine Domain registrieren. Klicke auf den Button „Registrieren“, den Du oben rechts findest.


3 Registriere Deine Domain auf Weebly

Id430 04 Domain Registrieren Id430 04 Domain Registrieren Id430 04 Domain Registrieren

Trage Deinen Wunsch-Domain-Namen in das dafür vorgesehene Feld ein. Weebly überprüft nun, ob dieser Domain-Name bereits vergeben ist oder noch verfügbar.

Id430 05 Domain Registrieren Id430 05 Domain Registrieren Id430 05 Domain Registrieren

Sollte der Domain-Name noch verfügbar sein, steht neben dem Domainnamen „purchase“ (englisch für „kaufen“ oder „erwerben“).

Id430 06 Domain Registrieren Id430 06 Domain Registrieren Id430 06 Domain Registrieren

Per Klick öffnet sich ein neues Fenster, wo Du in einem Formular Deine Kontakt-Info eingeben musst und die Domain kaufen bzw. eigentlich mieten kannst. Wähle aus, für wie lange Du Deine Domain haben willst: ein Jahr, zwei Jahre, fünf Jahre oder zehn Jahre. Je länger der Zeitraum, desto günstiger wird die Domain. Klicke auf den Button „Weiter“ unten links.


4 Bestelle Deine Domain

Id430 07 Domain Kaufen Id430 07 Domain Kaufen Id430 07 Domain Kaufen

Es öffnet sich wieder ein neues Fenster, mit einem Formular, wo die Zahlungsdetails eingetragen werden müssen. Wähle Deine favorisierte Zahlungsart (zum Beispiel per Kreditkarte oder PayPal), gib alle notwendigen Informationen ein und klicke auf den Button „Zahlungspflichtig bestellen“. Fertig! Deine Website ist mit Deiner neuen Domain sofort online.


Der Autor
Soeren Theussig Soeren Theussig Soeren Theussig
Sören Theussig
Ich arbeite seit 2012 als (fester und freier) Online- und Social-Media-Redakteur und verfasse Artikel über innovative Technologien und Web-Trends.

So änderst Du im Free-Tarif bei Weebly Deine Subdomain

Unter einer Sub-Domain, auch als „Third-Level“ bekannt, wird ein Bestandteil einer übergeordneten Domain verstanden. Mit Sub-Domains lassen sich große Internet-Auftritte in verschiedene Bereiche gliedern. Wenn die übergeordnete Domain etwa „http://meine-website.de“ lautet, dann könnte eine Sub-Domain für einen Online-Shop beispielsweise wie „http://shop.meine-website.de“ aussehen.


Gratis Homepage-Baukästen stellen ihren Nutzern aus Kostengründen auf Dauer fast ausschließlich Internet-Adressen in Form von Sub-Domains zur Verfügung. So auch Weebly. Nutzt Du den Free-Tarif dieses Baukasten-Anbieters, sieht Deine Internet-Adresse gewöhnlich entsprechend folgendem Schema aus: http://mein-domainname.weebly.com. "weebly" ist die übergeordnete Domain, „mein-domainname“ die Sub-Domain im engeren Sinn. Während Du „mein-domainname“ auch in der Gratis-Version beliebig ändern kannst, steht beim kostenlosen Tarif der Teil „.weebly.com“ unveränderbar fest.

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

1 Bei Weebly anmelden

Id 431 Grafik Einloggen 360 Id 431 Grafik Einloggen 360 Id 431 Grafik Einloggen 360

Gehe auf www.weebly.com, klicke rechts oben auf „Anmelden“ und logge Dich mit Deinen Zugangsdaten bei Weelby ein.

Id 431 Grafik Admin360 Id 431 Grafik Admin360 Id 431 Grafik Admin360

Nun bist Du eingeloggt und befindest Dich in Deinem Admin-Bereich. Klicke auf „Website bearbeiten“, damit Du an Deiner individuellen Webseite arbeiten und Deine bestehende Subdomain ändern kannst.


2 Einstellung Allgemein

Id 431 Grafik Einstellungen Id 431 Grafik Einstellungen Id 431 Grafik Einstellungen

Im Bearbeitungsbereich Deiner Website klickst Du oben in der Menü-Leiste auf „Einstellungen“.

Id 431 Weebly Allgemein Id 431 Weebly Allgemein Id 431 Weebly Allgemein

Danach sollte sich ein Fenster mit der Überschrift „Allgemein“ öffnen. Ist dies nicht der Fall, klicke in der linken Seitenleiste ganz oben auf den Menüpunkt „Allgemein“. Im Bereich Allgemein findest Du gleich oben als ersten Punkt Deine Website-Adresse – also Deine gegenwärtige Sub-Domain, beispielsweise meine-website.weebly.com. Um diese zu ändern, klicke auf den „Ändern“-Button daneben.


3 Andere Sub-Domain auswählen und bestätigen

Id 431 Neu Grafik Subdomain Id 431 Neu Grafik Subdomain Id 431 Neu Grafik Subdomain

Nachdem Du auf „Ändern“ geklickt hast, öffnet sich ein Fenster mit der Überschrift „Wählen Sie Ihre Website-Domain“, in dem Du drei verschiedene Optionen findest. Da Du lediglich Deine gratis Sub-Domain ändern willst, wähle den obersten Punkt „Eine Subdomain von Weebly.com verwenden“, in dem Du in den kleinen Ring links daneben klickst. In der Regel wird Dir dieser Bereich ohnehin automatisch vorgeschlagen und er ist, wenn er ausgewählt ist, grün hinterlegt.

Im grün hinterlegten Bereich findest Du ein weißes Textfeld mit Deinem gegenwärtigen Sub-Domain-Namen. Den Namen in diesem Textfeld kannst Du jetzt verändern. Weebly erkennt sofort, ob der neue Name noch frei ist und zeigt Dir das mit einem grünen Häkchen an. Erscheint ein rotes Kreuz, ist dieser Name schon belegt und Du kannst so lange den Namen verändern, bis Du Deine Wunsch-Sub-Domain gefunden hast. Ist dies der Fall, dann klicke auf „Weiter“. Weebly ändert Deine Sub-Domain augenblicklich. Um den Vorgang abzuschließen, klicke auf „Veröffentlichen“ rechts oben.


Hinweis: Eine Internet-Adresse mit Sub-Domain endet bei Weebly immer auf „.weebly.com“. Wenn Du eine eigene Domain besitzen möchtest, gehe auf den Menüpunkt „Neue Domain registrieren“ und folge den Anweisungen. Wie überall, ist ein eigener Domain-Name auch bei Weebly kostenpflichtig.


Der Autor
Anika Bahmann Magazin Anika Bahmann Magazin Anika Bahmann Magazin
Anika Bahmann
Hallo, ich bin Anika und habe an der Universität zu Köln Linguistik, Phonetik und Pädagogik studiert. Schon während meines Studiums habe ich bei RTL als Online Redakteurin in Teilzeit gearbeitet und habe dort die ersten Erfahrungen im SEO Texten gesammelt. Nach meinem Examen im Jahre 2011 habe ich in einem E-Commerce Unternehmen als festangestellte Online Redakteurin in Vollzeit gearbeitet und dort firmeneigene Online-Shops und Blogs mit Texten befüllt. Im Jahre 2013 habe ich den Schritt in die Selbstständigkeit gewagt und bin sehr glücklich als freiberufliche Online Redakteurin sowohl Online Shops, Agenturen und Blogger mit Texten zu versorgen.

So richtest Du eine / mehrere Subdomain(s) bei Weebly ein

Für das Betreiben einer Website ist eine Domain zwingend erforderlich. Bei Weebly hast Du zwei verschiedene Möglichkeiten, eine Domain zu erhalten: Du kannst Dir eine eigene Domain kaufen oder die kostenlosen Weebly-Subdomains verwenden. Eine Subdomain ist geeignet, um mit Deiner eigenen Website zu starten. Die Einrichtung ist in wenigen Minuten erledigt und bei Weebly.com kostenlos.


Als Subdomain werden die Unterseiten einer Hauptdomain bezeichnet, wie zum Beispiel meinewebiste.weebly.com. Die Domain weebly.com wird in diesem Fall um die Subdomain „meinewebsite“ erweitert. So können verschiedene Webseiten über den Weebly-Baukasten betrieben werden, ohne das es zu Verwechselungen kommt.


In der Regel legt man bei Weebly eine Subdomain an, wenn man mit einer neuen Website startet. Die Subdomain der Website lässt sich beliebig oft ändern. Wie man das macht, erfährst Du in der folgenden Schrit-für-Schritt Anleitung.

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

1 Website im Weebly-Editor aufrufen

Id 432 Weebly Website Bearbeiten Id 432 Weebly Website Bearbeiten Id 432 Weebly Website Bearbeiten

Melde Dich mit Deinen Zugangsdaten bei Weebly an. Du befindest Dich jetzt im Weebly Dashboard, Deinem persönlichen Verwaltungsbereich. Wenn Du bereits mehrere Websites mit Weebly erstellt hast, wähle jene Website aus bei der Du die Subdomain ändern möchtest und klicke anschließend auf „Website bearbeiten“.

Id 432 Bild1 Id 432 Bild1 Id 432 Bild1

Es öffnet sich der Weebly-Editor, hier klickst Du auf „Einstellungen“.


2 Allgemeine Einstellungen

Id 432 Weebly Subdomain Aendern Neu Id 432 Weebly Subdomain Aendern Neu Id 432 Weebly Subdomain Aendern Neu

Nachdem Du auf „Einstellungen“ geklickt hast, öffnet sich ein Fenster in dem Du verschiedene Einstellungen zu dieser Website vornehmen kannst. Gleich im ersten Untermenü „Allgemein“ findest Du den Bereich, in dem Du Deine Website-Adresse verändern kannst. Klicke also neben dem Namen Deiner Website auf „Ändern“.

Hinweis: Wenn Du Deine Weebly-Website neu erstellst, wirst Du automatisch gefragt, ob Du eine kostenlose Subdomain oder Deine eigene Domain verwenden willst. Wie Du eine Subdomain einrichtest, wenn Du eine neue Weebly-Seite erstellst, erfährst Du in Punkt "4. Subdomain bei einer neuen Website einrichten".


3 Domain auswählen

Id 432 Bild3 Id 432 Bild3 Id 432 Bild3

Nun öffnet sich ein Popup-Fenster mit drei verschiedenen Optionen. Wähle die erste Option „Eine Subdomain von Weebly.com verwenden“, indem Du auf den kleinen Kreis links neben dem Text klickst. Die Option ist nun in grün markiert und es wird ein Eingabefeld angezeigt. Wenn Du eine bestehende Subdomain hast, kannst Du diese hier mit dem neuen Namen überschreiben. Wenn dieses Feld leer ist, gibst Du einfach eine neue Subdomain ein.

Nachdem Du den gewünschten Domainnamen eingetragen hast und dieser als verfügbar angezeigt wird, klickst Du auf den Button „Weiter“. Deine Subdomain ist nun erfolgreich eingerichtet.

Hinweis: Da es sich um eine Subdomain handelt, kann die Endung „.weebly.com“ nicht geändert werden. Möchtest Du einen eigenständigen Domainnamen, musst Du Dich für eine vollständige Domain entscheiden, die allerdings wie bei jeder Homepage auch bei Weebly mit Kosten verbunden ist. Generell solltest Du einen aussagekräftigen Namen wählen, der Deine Webseitenbesucher direkt erkennen lässt, worum es auf Deiner Seite geht. Wenn Du zum Beispiel einen Blog mit Rezept-Tipps betreibst, ist eine Subdomain wie deinname-rezept-tipps.weebly.com oder kochen-mit-deinename.weebly.com gut geeignet. Zusätzlich ist es wichtig, dass die Wunschdomain noch nicht belegt ist, da jede Domain nur einmal vergeben wird. Gegebenenfalls musst Du Deinen Domainnamen etwas anpassen, um ihn zu registrieren.

Achtung! Möchtest Du mehr als eine Subdomain registrieren, musst Du mehrere Weebly-Seiten erstellen. Pro Weebly-Seite kannst Du jeweils nur eine Domain verwenden.


4 Subdomain bei neuer Weebly-Website einrichten

Id 432 Weebly Neue Website Id 432 Weebly Neue Website Id 432 Weebly Neue Website

Um eine neue Website bei Weebly einzurichten, gehe in das Dashboard. Dorthin gelangst Du automatisch, wenn Du Dich bei Weebly mit Deinen Zugangsdaten anmeldest. Du kommst auch dorthin wieder zurück, wenn Du innerhalb des Bearbeitungsbereichs Deiner Website links oben auf das „x“ klickst. Im Dashboard gehst Du auf das „+“Zeichen und im sich anschließend öffnenden Fenster klickst Du auf „Website hinzufügen“. Hast Du mehrere Webseiten bei Weebly, findest Du anstatt des „+“Zeichens einen Kreis mit einem kleinen Pfeil.

Nachdem Du auf „Website hinzufügen“ geklickt hast, führt Dich Weebly durch den Prozess der Einrichtung der Website, im Rahmen dessen Du auch den Namen der Domain bzw. der Subdomain festlegen kannst. Dazu gehst Du wie in Schritt „3. Domain auswählen“ beschrieben vor.


Der Autor
Sina Mylluks Sina Mylluks Sina Mylluks
Sina Mylluks
Online Marketing und neue Webtechnologien begeistern mich. Ich habe mich sowohl in meinem Studium (Technikjournalismus/PR und Technik-/Innovationskommunikation) als auch in der Praxis eingehend mit diesen Themen beschäftigt und in verschiedenen Positionen in Online Marketing und PR gearbeitet. Als Fachautor möchte ich mein Wissen und meine Erfahrungen nun weitergeben.

So richtest Du einen Blog bei Weebly ein

Wer heutzutage einen eigenen Blog erstellen möchte, der ist nicht mehr auf anspruchsvolle Programmierung oder die Hilfe von Webagenturen angewiesen. Weebly ermöglicht es, eine professionelle Internetpräsenz zu erstellen und das völlig ohne Vorkenntnisse im Bereich des Webdesigns oder der Programmierung.


Egal worüber Du auf Deinem Blog berichten möchtest – Weebly bietet Dir eine Auswahl von Layouts und Voreinstellungen, die Du mit nur wenigen Klicks so anpassen kannst, dass sie Dich und Deine Blogger-Themen möglichst perfekt widerspiegeln. Dabei kannst Du unter anderem Deine eigenen Artikel erstellen und layouten, Farben und Design der Oberflächen anpassen und Bilder, Videos, interaktive Karten und Grafiken einbinden. Um Deinen Blog nach und nach aufbauen und an Details arbeiten zu können, musst Du jedoch zunächst einmal grundsätzlich einen Blog bei Weebly einrichten.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Einfach
Zeitaufwand
10 bis 30 Minuten

1 Login und Einrichtung eines Blogs auf Weebly

Id 433 Bild 2 Id 433 Bild 2 Id 433 Bild 2

Rufe die Weebly Webseite (weebly.com) auf und logge Dich ein. Sobald Du eingeloggt bist, öffnet sich Deine Benutzeroberfläche und Deine bisher erstellten Webseiten (insofern vorhanden) werden angezeigt. Um eine neue Webseite bzw. einen neuen Blog hinzuzufügen, klicke auf das von einem Kreis umfasste Pluszeichen und anschließend im Feld „Meine Webseiten“ auf den Befehl „Webseiten hinzufügen“.


2 Blog Layout wählen

Id 433 Bild 3 Id 433 Bild 3 Id 433 Bild 3

Nun wird Dir eine Auswahl von Layout-Vorschlägen angezeigt. Es empfiehlt sich, die Art der Vorlagen einzuschränken und zu spezifizieren, indem Du auf „Blog“ klickst. Die Layouts, die Dir nun angezeigt werden, sind am besten für einen Blog geeignet. Entscheide Dich für eines der Dir vorgeschlagenen Designs, welches Du für Deinen Blog nutzen möchtest. Fahre dazu auf die entsprechende Layout-Vorschau und bestätige Deine Wahl, indem Du rechts unterhalb des Vorschaubildes auf „Auswählen“ klickst.

Hinweis: Du kannst das gewählte Design auch zu einem späteren Zeitpunkt noch ändern. Es empfiehlt sich jedoch, sich im ersten Schritt für ein Layout zu entscheiden und erst dann Inhalte einzuspeisen sowie Formatierungen und Details anzupassen.


3 Domain wählen

Id 433 Bild 4 Id 433 Bild 4 Id 433 Bild 4

Um eine kostenlose Domain für Deinen Blog bei Weebly zu erstellen, gib im ersten Feld Deinen gewünschten Domainnamen ein (bspw. „derersteblog“) und bestätige Deine Eingabe mit „Weiter“.

Hinweis: Wenn Deine Domain keine Werbung von Weebly enthalten, also ohne den Anhang „.weebly.com“ auskommen soll, musst Du Dich kostenpflichtig bei Weebly anmelden. Gegen einen gewissen Betrag (je nach Umfang der Funktionen zwischen 7 bis 23 Euro pro Monat) kannst Du eine werbefreie Domain auswählen.


4 Blog individualisieren

Id 433 Bild 5 Id 433 Bild 5 Id 433 Bild 5

Nachdem Du Dich für eine Domain entschieden hast, wird Dir die Bedienoberfläche angezeigt auf der Du Deinen Blog erstellen und anpassen kannst. Füge beispielsweise eigene Unterseiten hinzu, ändere die Farbgebung und die Schriftarten Deines Blogs in den allgemeinen Einstellungen, binde Bilder und Videos ein, indem Du in der Bedienleiste am linken Bildschirmrand die Funktionsfelder an die entsprechende Position ziehst oder füge einen neuen Beitrag hinzu.


5 Blog veröffentlichen

Id 433 Bild 6 Id 433 Bild 6 Id 433 Bild 6

Sobald Du alle Grundeinstellungen vorgenommen hast, der ersten Beitrag eingefügt ist und Du eine Auswahl an Bildern und anderen Medien getroffen hast, kannst Du Deinen Blog veröffentlichen. Klicke dazu am oberen, rechten Bildschirmrand auf den orange hinterlegten Befehl „Veröffentlichen“. Nun öffnet sich erneut ein Fenster in dem Du Deine zuvor gewählte Blog-Domain bestätigen (bzw. auch eine neue Domain wählen) kannst. Klicke auf „Weiter“, um Deinen Blog unter dem eingegebenen Domainnamen zu veröffentlichen.

Id 433 Bild 7 Id 433 Bild 7 Id 433 Bild 7

Anschließend öffnet sich ein neues Fenster, indem die Veröffentlichung Deines Blogs bestätigt wird. Unter der dort angezeigten Domain ist Dein Blog von nun an im Internet aufzufinden.


Der Autor
Jeanette Woelfling Magazin Jeanette Woelfling Magazin Jeanette Woelfling Magazin
Jeanette Wölfling
Im Sommer 2016 habe ich erfolgreich meinen Bachelorabschluss im Fach Journalistik absolviert. Während des Studiums konnte ich theoretische wie praktische Erfahrung in den verschiedenen Medienbereichen sammeln. Zudem war ich über ein Jahr lang für eine Webagentur in Düsseldorf tätig und habe dort Kompetenzen insbesondere im Online-Marketing (SEO-Optimierung, Content-Marketing etc.) und im Webdesign erlangt. Auch bei meiner Arbeit als Redakteurin für das Einsteins Magazin 2015 war ich in der Online-Redaktion maßgeblich für die Erstellung und Pflege der zugehörigen Webseite zuständig.

So bettest Du Youtube-Videos bei Weebly ein

Internet-Anschlüsse mit hoher Bandbreite, die in vielen Gegenden verfügbar sind, haben dazu geführt, dass auch große Dateien wie Videos über das Internet konsumiert werden. Für Musiker oder Bands bietet es sich daher natürlich an, mit Videos von Konzerten die Fans auf ihren Websites zu begeistern und das eigene Können auch im Internet unter Beweis zu stellen. Aber auch Online Shops oder Firmen nutzen Videos zur Produktpräsentation oder zu Schulungszwecken. Fast immer empfiehlt es sich, solche Videos bei YouTube auszulagern. Das schont den Speicherplatz der eigenen Homepage und öffnet einen zusätzlichen Verbreitungskanal.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
3 Minuten

Hinweis: Du musst nicht selbst Videos bei YouTube hochgeladen und veröffentlicht haben. Du kannst vielmehr jedes beliebige YouTube-Video in Deine Homepage einbinden.

1 In den Baukasten wechseln

Bild 1 Bild 1 Bild 1

Nach dem erfolgreichen Login bei Weebly wechselst Du aus dem Kundenbereich in den eigentlichen Baukasten, indem Du rechts oben auf „Website bearbeiten“ klickst.


2 Die Position des Videos auf der Website festlegen

Bild 13 Bild 13 Bild 13

Standardmäßig öffnet sich der Baukasten mit der Ansicht „Erstellen“ in der blauen Kopfzeile und der Auswahl „Elemente“ in der linken Seitenspalte. Falls Du eine andere Ansicht haben solltest, klicke zunächst auf „Erstellen“ in der Kopfzeile. Sollten dann in der Seitenleiste nicht die „Elemente“ ausgewählt sein, dann wähle sie aus. Die Darstellung auf Deinem Monitor sollte in etwa wie nebenstehend abgebildet aussehen.

Id434 Bild 9 Id434 Bild 9 Id434 Bild 9

In der Rubrik „Medien“ unter den Elementen findest Du das YouTube-Element. Sein Symbol sieht aus wie ein Play Button mit abgerundeten Ecken. Wenn Du mit der Maus über die Symbole der einzelnen Elemente fährst, erscheint außerdem jeweils deren Name, in diesem Fall also „YouTube“. Ziehe das Element bei gedrückt gehaltener Maustaste an die gewünschte Position innerhalb Deiner Website. Es erscheint zunächst ein Platzhalter, in den das YouTube-Video eingebettet wird.


3 Das YouTube Video einbetten

Id434 Bild 10 Id434 Bild 10 Id434 Bild 10

Klicke an eine beliebige Stelle innerhalb des Platzhalters des neu positionierten YouTube-Elements. Es öffnet sich daraufhin ein Fenster, wie in der nebenstehenden Abbildung.

Id434 Bild 14 Id434 Bild 14 Id434 Bild 14

Gehe nun auf YouTube (www.youtube.com) und suche das Video Deiner Wahl. Kopiere die Internet-Adresse des YouTube-Videos, das Du bei Dir auf der Homepage veröffentlichen möchtest, aus der Adress-Zeile deines Browsers mit STRG C.

Id434 Bild 11 Id434 Bild 11 Id434 Bild 11

Anschließend fügst Du die kopierte Adress-Zeile auf Deiner Weebly-Website in das Feld „YouTube Video-URL“ mit STRG V ein.

Hinweis: Bei Bedarf kannst Du hier auch Änderungen an der Position, Größe oder den Abständen des YouTube-Elements vornehmen. Im Regelfall ist dies aber nicht erforderlich.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So richtest Du ein Forum bei Weebly ein

Das Internet lebt von seiner Interaktivität – und dem gegenseitigen Austausch von Meinungen und Informationen. Internet-Foren spielen dabei seit den frühen Jahren des Internets eine entscheidende Rolle. Ein zentrales Merkmal eines Forums liegt darin, dass die Kommunikation asynchron ist. Das heißt, dass die Besucher nicht zwangsläufig in Echtzeit, wie zum Beispiel bei einem Chat, miteinander kommunizieren, sondern auch zeitversetzt aufeinander eingehen können. Wer seinen Website-Besuchern eine Diskussionsplattform bieten möchte, auf der sie sich gegenseitig austauschen können, sollte über die Einrichtung eines Forums nachdenken. Dies ist dank innovativer Homepage-Baukästen nun auch für Laien ohne große Internet-Vorkenntnisse einfach zu realisieren.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Einfach bis Mittel
Zeitaufwand
10 bis 15 Minuten

1 Vom Dashboard zum App-Center

Id 435 Neu Screenshot 11 Id 435 Neu Screenshot 11 Id 435 Neu Screenshot 11

Nachdem man sich bei Weebly mit seinen Zugangsdaten angemeldet hat, kommt man zum Website Dashboard. Klicke hier auf „Website bearbeiten“ um in den Editor-Modus zu gelangen, in dem Du Deine Website bearbeiten kannst.

Id 435 Neu Screenshot 12 Id 435 Neu Screenshot 12 Id 435 Neu Screenshot 12

Um ein Forum einzurichten, brauchst Du bei Weebly eine App. Wechsle demnach im senkrechten Menü auf der linken Seite vom Reiter „Einstellungen“ auf den Reiter „Apps“. Anschließend klickst Du auf „App Center“.


2 Forum im App-Center wählen

Id 435 Neu Screenshot 2 Id 435 Neu Screenshot 2 Id 435 Neu Screenshot 2

Es öffnet sich das App-Center von Weebly, in dem Du verschiedene Apps und Funktionen suchen und auswählen kannst. In der Kategorien-Liste am linken Rand etwas weiter unten findest Du den Menüpunkt „Social“, auf den Du klickst.

Id 435 Neu Screenshot 3 Id 435 Neu Screenshot 3 Id 435 Neu Screenshot 3

Daraufhin erscheinen automatisch weitere Auswahlmöglichkeiten, wo Du nun die Unterkategorie „Foren“ auswählst.

Id 435 Neu Screenshot 4 Id 435 Neu Screenshot 4 Id 435 Neu Screenshot 4

Es öffnet sich ein Fenster, in dem Dir Weebly zwei Apps für Foren zur Auswahl anbietet: „Pushup Social“ und „Muut“. Pushup Social bietet dabei die Besonderheit, dass Feeds von Facebook, Twitter und Instagram im Forum eingebunden werden können. Muut hingegen versteht sich als reines Forum und soll somit als Beispiel für diese Anleitung verwendet werden. Dazu wird ganz einfach auf Muut geklickt. Eine neue Seite öffnet sich daraufhin.


3 „Muut“ hinzufügen und App verbinden

Id 435 Neu Screenshot 5 Id 435 Neu Screenshot 5 Id 435 Neu Screenshot 5

Auf dieser Seite können nun noch einmal die wichtigsten Informationen zu „Muut“ angesehen werden. Damit ein eigenes Forum auf der eigenen Homepage erscheint, muss in diesem Schritt auf den blauen Button „Hinzufügen“ geklickt werden.

Id 435 Neu Screenshot 6 Id 435 Neu Screenshot 6 Id 435 Neu Screenshot 6

In dem nun geöffneten Fenster klickt man oben rechts auf den Button „Verbinden.“ Nach rechtlichen Hinweisen im neuen Fenster wird erneut auf den Button „Verbinden“ geklickt. Dieser befindet sich weiterhin in der rechten oberen Ecke.


4 Das Forum erstellen und per E-Mail bestätigen

Id 435 Neu Screenshot 7 Id 435 Neu Screenshot 7 Id 435 Neu Screenshot 7

In diesem Schritt werden, auf der neu geöffneten Seite, alle wichtigen Daten des Forums eingetragen. So der Name des Forums, der eigene Username, die E-Mail-Adresse und das Passwort. Wenn alles soweit eingetragen ist, klickt man auf den Button „Create my community!“

Id 435 Neu Screenshot 8 Id 435 Neu Screenshot 8 Id 435 Neu Screenshot 8

Daraufhin erhältst Du eine E-Mail an die bei Weebly hinterlegte Adresse, in der Du durch einen Klick auf „Confirm your Account“ nun mit „Muut“ starten kannst. Es öffnet sich eine neue Seite, welche jedoch nicht zwangsläufig beachtet werden muss.


5 Forum fertig einrichten

Id 435 Neu Screenshot 9 Id 435 Neu Screenshot 9 Id 435 Neu Screenshot 9

Zurück im Weebly-Bearbeitungsbereich gibt es nun einen neuen Button in der senkrechten Menüzeile auf der linken Seite. Der Button „Forum“ wird nun angeklickt, gehalten und an die gewünschte Position gezogen.

Id 435 Neu Screenshot 10 Id 435 Neu Screenshot 10 Id 435 Neu Screenshot 10

Und schon befindet sich ein neues Forum auf der eigenen Website.


Der Autor
Lennart Zech Magazin Lennart Zech Magazin Lennart Zech Magazin
Lennart Zech
Ich habe Journalistik studiert und arbeite nun als Freelancer in verschiedenen Bereichen der Kommunikationsarbeit. So schreibe ich für ZEITjUNG journalistische Texte und arbeite als freiberuflicher Fotograf. Neben eigenen Projekten mache ich auch Autragsfotografie, wie Business- oder Hochzeitsshootings. Trotz journalistischer Ausbildung arbeite ich außerdem im Bereich PR und Marketing. Zum Beispiel für die Stiftung SOFIs WORLD oder die Band "Das Kubinat". Für mich sind Webbaukästen ein Muss für selbstständige, professionelle PR-Arbeit.

So verknüpfst Du Instagram mit Deiner Weebly-Website

Um auf möglichst vielen Kanälen erreichbar zu sein, sind Privatpersonen, aber auch zahlreiche Unternehmen oder gemeinnützige Organisationen, in den sozialen Medien aktiv. Dazu zählt unter anderem der Online-Dienst Instagram. Hier kann der Nutzer eigene Bilder und Videos veröffentlichen sowie mit anderen Nutzern interagieren, indem er ihnen folgt und deren Inhalte kommentiert, teilt oder mit „Gefällt mir“ markiert.


Der Homepage-Baukasten Anbieter Weebly bietet seinen Nutzern die Möglichkeit, eine Webseite mit diversen Social Media Kanälen zu verknüpfen – dazu zählt auch Instagram. Indem ein entsprechender Button auf der Webseite eingebunden wird, kann der Besucher mit nur einem einzigen Klick auf die verbundene Instagram-Seite gelangen und sich dort weiterführend über das Angebot informieren.


Dank der zur Verfügung stehenden Social-Media-Buttons und weiterer Voreinstellungen gelingt es bei Weebly einfach und mit wenig Aufwand, einen Instagram-Account auf der Weebly-Homepage zu verlinken.

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

1 Social Media Funktion bei Weebly einbinden

Id 437 Bild 1 Id 437 Bild 1 Id 437 Bild 1

Scrolle in der Weebly-Funktionsleiste (am linken Bildschirmrand) soweit herunter, bis Dir unter dem Punkt „Mehr“ die Funktion „Social-Media-Icons“ angezeigt wird. Fahre mit der Maus auf das Bedienfeld, halte die linke Taste gedrückt und fahre an die Stelle, an der Du die Social-Media-Icons auf Deiner Webseite einbinden möchtest.

Id 437 Bild 2 Id 437 Bild 2 Id 437 Bild 2

Sobald Du die richtige Position erreicht hast, kannst Du die Maustaste loslassen und die Social-Media-Icons werden an der entsprechenden Position abgelegt und Dir angezeigt.


2 Social Media Kanäle verwalten

Id 437 Bild 3 Id 437 Bild 3 Id 437 Bild 3

Um die Reihenfolge und die Auswahl der Social-Media-Kanäle anzupassen, klicke auf das Feld mit den Icons. Nun öffnet sich ein Fenster in dem Du die Kanäle verwalten, ausrichten und den Abstand anpassen kannst. Um Dein Instagram Icon einzurichten, klicke auf „Symbole verwalten“.

Hinweis: Je nach gewähltem Design, haben die Social-Media-Icons bzw. Buttons eine andere Farbe bzw. Form und erscheinen in einer anderen Reihenfolge. Diese kannst Du beliebig anpassen.


3 Eigenen Instagram-Account hinzufügen

Id 437 Bild 4 Id 437 Bild 4 Id 437 Bild 4

Unter dem Befehl „Symbole verwalten“ werden Dir die Social-Media-Kanäle angezeigt, die bereits aktiv bzw. noch inaktiv sind. Sollte Instagram unter den inaktiven Kanälen erscheinen, klicke auf das Instagram-Bedienfeld, um Deinen Instagram-Account im Folgenden zu aktivieren.

Id 437 Bild 5 Id 437 Bild 5 Id 437 Bild 5

Die Aktivierung gelingt, indem Du bei „Einblenden“ auf den dort angezeigten Schalter klickst – dieser sollte daraufhin von der linken auf die rechte Seite springen und von grau zu blau wechseln.


Gib nun im oberen Feld Deinen Instagram-Benutzernamen (bspw. maxmustermann) nach folgendem Muster ein: instagram.com/maxmustermann

Id 437 Bild 6 Id 437 Bild 6 Id 437 Bild 6

Steht der Einblenden-Schalter auf blau und hast Du Deinen Benutzernamen eingegeben, gehe zurück auf die vorherige Ebene (nutze dazu den grauen Pfeil oben links im Fenster). Insofern die Aktivierung gelungen ist, wird Instagram nun bei den aktiven Social-Media-Kanälen angezeigt.

Hinweis: Um die Social-Media-Icons anders anzuordnen, wähle „Neu anordnen“ und ziehe die einzelnen Kanäle mit der Maus in die gewünschte Reihenfolge. Fahre dazu jeweils auf die auf der rechten Seite angezeigten drei Striche, halte sie gedrückt und ziehe sie nach oben oder unten an die gewünschte Position.

Sobald Du Deine Webseite veröffentlichst, wird der Besucher bei Klick auf den Instagram-Button auf Deine verknüpfte Instagram-Seite weitergeleitet.


Der Autor
Jeanette Woelfling Magazin Jeanette Woelfling Magazin Jeanette Woelfling Magazin
Jeanette Wölfling
Im Sommer 2016 habe ich erfolgreich meinen Bachelorabschluss im Fach Journalistik absolviert. Während des Studiums konnte ich theoretische wie praktische Erfahrung in den verschiedenen Medienbereichen sammeln. Zudem war ich über ein Jahr lang für eine Webagentur in Düsseldorf tätig und habe dort Kompetenzen insbesondere im Online-Marketing (SEO-Optimierung, Content-Marketing etc.) und im Webdesign erlangt. Auch bei meiner Arbeit als Redakteurin für das Einsteins Magazin 2015 war ich in der Online-Redaktion maßgeblich für die Erstellung und Pflege der zugehörigen Webseite zuständig.

So richtest Du Lightbox bei Weebly ein

Eine Lightbox ist ein Gestaltungsmittel für die Darstellung von Bildern auf Webseiten. Dabei wird beim Anklicken eines Bildes der Rest der Homepage abgedunkelt, wohingegen das Bild, meist etwas vergrößert, dadurch prominent hervorgehoben wird. Der Effekt erinnert an die Leuchttische in Foto- und Bildagenturen, auf denen die Filme von unten her beleuchtet angesehen und präsentiert werden. Daher auch der Name für dieses Webdesign-Element.


Da die Lightbox ein sehr populäres Design-Element ist, ist dieses natürlich auch in Homepage Baukästen zu finden.

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

Hinweis: Als Funktion steht die Lightbox bei Weebly.com standardmäßig nur bei dem Element „Bild“, nicht aber beim Element „Diashow“ zur Verfügung. Sie trägt hier auch nicht den geläufigen Namen „Lightbox“, sondern wird eingedeutscht als „Leuchtkasten“ bezeichnet.

1 Das Element „Bild“ bei Weebly einfügen

Id 440 Bild 1 Id 440 Bild 1 Id 440 Bild 1

Begib Dich in Deinem Weebly-Baukasten auf die Seite „Erstellen“ und wähle dort die „Elemente“ aus dem oberen Teil der linken Seitenleiste aus. Ziehe anschließend das „Bild“-Element mit gedrückt gehaltener Maustaste an die gewünschte Stelle Deiner Homepage. Wie das Element „Bild“ aussieht, zeigt Dir die nebenstehende Abbildung.

Id 440 Bild 2 Id 440 Bild 2 Id 440 Bild 2

Danach sollte an dieser Stelle auf Deiner Website ein Platzhalter erscheinen, der Dich zum Hochladen eines Bildes auffordert. Klicke auf „Bild hochladen“.


2 Ein Bild hochladen

Id 440 Bild 3 Id 440 Bild 3 Id 440 Bild 3

In dem sich nun öffnenden Fenster hast Du die Möglichkeit, entweder ein Bild von Deinem PC hochzuladen oder nach professionellen oder kostenlosen Bildern zu suchen. Falls Du bereits Bilder favorisiert haben solltest, kannst Du hier auch auf Deine Favoriten zugreifen. Außerdem kannst Du auch den Link zu einem Bild aus dem Internet verwenden, falls Du da fündig geworden sein solltest.

Hinweis: Bei Bildern aus dem Internet ist natürlich auf gesetzliche Bestimmungen wie das Urheberrecht zu achten. Bilderklau ist illegal.


3 Die Lightbox aktivieren

Id 440 Bild 4 Id 440 Bild 4 Id 440 Bild 4

Nachdem Dein Bild korrekt hochgeladen wurde und richtig dargestellt wird, klicke es an. In dem sich nun öffnenden Fenster kannst Du die Lightbox durch Betätigen des Schiebereglers neben „Leuchtkasten“ aktivieren. Außerdem kannst Du hier auch andere Eigenschaften der Bilddarstellung ändern oder das Bild komplett austauschen.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So richtest Du ein Anmeldeformular für den Newsletter bei Weebly ein

Ein Newsletter (englisches Wort für „Infobrief“) kann Fluch oder Segen sein – das kommt ganz auf den Inhalt solcher meist per E-Mail versandten Rundschreiben an. Ein Segen ist ein Newsletter, wenn er interessante Informationen und Mitteilungen bereithält, die für den Abonnenten/Empfänger relevant sind. Dann trägt so ein Rundschreiben beispielsweise auch zur Kundenbindung bei. Allerdings sind viele als Newsletter bezeichnete E-Mails meistens nur reine Werbe-E-Mails mit geringem Informationsgehalt. Dementsprechend nerven sie und landen oft im Spam-Ordner der Empfänger.


Solltest Du vorhaben, einen Newsletter einzurichten und zu versenden, um zum Beispiel über aktuelle Neuigkeiten oder Angebote zu informieren, dann ist eines sehr wichtig: Der Empfänger Deines Newsletters muss vorher sein Interesse für diesen Newsletter bekundet haben. Das geht am einfachsten, wenn er sich selbst in einen Newsletter-Verteiler einträgt und damit dem Erhalt zukünftiger Newsletter von Dir zustimmt. Einen solchen Verteiler, der meistens in Form eines Anmeldeformulars daher kommt, kannst Du zum Beispiel auf Deiner Website einrichten.


Mit einer Website des Anbieters Weebly ist dies nicht nur kostenfrei möglich – es geht auch noch ziemlich schnell und einfach. Dafür sorgt das integrierte Element „Newsletter“, mit dem sich die Besucher direkt auf Deiner Website anmelden können. Es bietet sich an, das Anmeldeformular für den Newsletter auf einer Unterseite (wie zum Beispiel „Über mich“) einzufügen.

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

1 Login und Bearbeitungsmodus bei Weebly

Id 441 Bild1 Id 441 Bild1 Id 441 Bild1

Nachdem Du Dich bei Deiner Weebly Website eingeloggt hast, befindest Du Dich auf dem sogenannten Dashboard. Hier klickst Du auf den Button „Website bearbeiten“. Nun bist Du im Bearbeitungsmodus Deiner Website.


Auf der linken Seite befindet sich die Bearbeitungsleiste. Du benötigst hier die Einstellung „Elemente“. Im Bereich „Basic“ findest Du verschiedene Schaltflächen (Buttons) mit Symbolen drauf. Für das Anmeldeformular des Newsletters ist das Symbol mit dem Brief das richtige


2 Newsletter-Symbol positionieren

Id 441 Bild2 Id 441 Bild2 Id 441 Bild2

Sobald Du mit dem Mauszeiger über das Briefsymbol fährst, erscheint der Text „Newsletter-Formular“. Wenn Du die Maustaste nun gedrückt hältst, verfärbt sich die Schaltfläche blau und Du kannst sie per Drag and Drop (Ziehen und Loslassen) auf Deiner Website positionieren.

Id 441 Bild3 Id 441 Bild3 Id 441 Bild3

Ziehe das Anmeldeformular nun auf eine Unterseite Deiner Website, beispielsweise auf die Unterseite „Über mich“. Es erscheint ein neues Feld mit der Bezeichnung „Zur Bearbeitung hier klicken“ und einem Feld zum Eintragen einer E-Mail-Adresse. Das ist das Anmeldeformular. Wenn Du nun auf das Feld klickst, hast Du jetzt die Möglichkeit, das Anmeldeformular nach Deinen Vorstellungen anzupassen.


3 Formularoptionen anpassen

Id 441 Bild4 Id 441 Bild4 Id 441 Bild4

So hast Du zum Beispiel die Möglichkeit, unter dem Menüpunkt „Formularoptionen“ entsprechende Änderung vorzunehmen. Ändere beispielweise den Namen des Formulars oder die Schaltfläche „Newsletter abonnieren“ in „Newsletter bestellen!“. Auch kannst Du bestimmen, wie derjenige, der das Anmeldeformular ausgefüllt hat, benachrichtigt wird – per Nachricht oder per Link etc.

Hinweis: Das Anmeldeformular des Newsletter ist nahezu identisch mit dem Element „Kontaktformular“. Dort findest Du die gleichen Optionen vor und auch die Funktionsweise ist ähnlich.


4 Formularfelder einrichten

Id 441 Bild5 Id 441 Bild5 Id 441 Bild5

Aber auch das Formular an sich kannst Du beliebig erweitern. Wenn das Formularfeld zum Bearbeiten aktiv ist, hast Du in der Bearbeitungsleiste auf der linken Seite eine große Auswahl an Formularfeldern wie „Name“, „Adresse“ oder „Telefonnummer“, die Du per „Drag and Drop“ in das Formular ziehen kannst. Wenn Du zufrieden mit Deinem Anmeldeformular für den Newsletter bist, klicke auf den „Speichern“-Button und veröffentliche Deine Website. Das Anmeldeformular kann jederzeit per Copy und Paste (Kopieren und Einfügen) auch auf andere Unterseiten eingefügt werden.

Hinweis: Weebly bietet ein zu bezahlendes E-Mail-Marketing-Tool Namens „Promote“ an. Damit hast Du die Möglichkeit, Deine Newsletter-Anmeldungen automatisch mit Deinen Kontakten zu synchronisieren. Mehr dazu findest Du hier: promote.weebly.com.


Der Autor
Soeren Theussig Soeren Theussig Soeren Theussig
Sören Theussig
Ich arbeite seit 2012 als (fester und freier) Online- und Social-Media-Redakteur und verfasse Artikel über innovative Technologien und Web-Trends.

So fügst Du ein Video-Hintergrund bei Weebly ein

Sicher hast Du auch schon mal eine Website besucht, bei der der Seitenhintergrund aus einem Video bestand. Das Video läuft dann im Hintergrund, während die Schrift und das Navigationsmenü der Website im Vordergrund, also auf dem Video liegt. Wenn Du nicht weißt, was gemeint ist, dann schau doch mal auf coverr.co.


Ein Video im Hintergrund ist – vorausgesetzt natürlich, es ist ein gut gemachtes Video – ein interessantes Webdesign-Element. Durch die Bewegung lässt das Video eine Website dynamischer erscheinen und zieht sofort die Aufmerksamkeit der Besucher auf sich. Allerdings gibt es hier einige wichtige Regeln zu beachten, damit die positiven Effekte eines Background-Videos nicht aufgehoben werden. So sollte das Video kurz und knapp sein (nicht länger als 30 Sekunden), im Loop (automatische Wiederholung) laufen und vor allem: ohne Ton abgespielt werden. Grundsätzlich ist ein schlichtes Video von Vorteil, das einfach und schnell zu verstehen ist und als Designelement zur Website passt.


Es ist möglich, bei einer Website von Weebly ein Video als Hintergrund kostenfrei einzurichten. Allerdings ist das nicht ganz banal: Grundkenntnisse in HTML und CSS sind dafür notwendig, da das Video über HTML- und CSS-Code in die Seite eingefügt wird.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad?
Mittel bis schwierig
Zeitaufwand
20 Minuten

Achtung: Das Einfügen eines Videos als Hintergrund geschieht auf eigener Verantwortung. Sollten dadurch Störungen auf Deiner Website auftreten, werden diese nicht vom Weebly-Support-Team behoben. Kopiere vorsichtshalber Deine gesamte Seite und ändere den Code erstmal auf Deiner Seiten-Kopie. Wenn Du trotzdem ein Video als Hintergrund auf Deiner Seite ausprobieren willst, dann erfährst Du in diesem Artikel, wie das geht. Es wird vorausgesetzt, dass eine Website beim Anbieter bereits existiert.

1 Login-Bereich und Bearbeitungsmodus

Id 443 01 Dashboard Id 443 01 Dashboard Id 443 01 Dashboard

Nachdem Du Dich auf Deiner Website bei Weebly eingeloggt hast, befindest Du Dich im Dashboard, sozusagen dem Verwaltungsbereich Deines Webauftritts. Hier findest Du den Button „Website bearbeiten“ oben rechts. Per Mausklick darauf gelangst Du in den Bearbeitungsmodus. Im Bearbeitungsmodus müssen wir in den „Theme“-Bereich. Dorthin gelangen wir über den „Theme“-Button in der Navigationsleiste ganz oben.


2 HTML/CSS bearbeiten

Id 443 03 Code Editor Id 443 03 Code Editor Id 443 03 Code Editor

Im Theme-Bereich gibt es in der linken Bearbeitungsleiste ganz unten die Schaltfläche „HTML/CSS bearbeiten“. Ein Mausklick darauf öffnet den Weebly Code-Editor, wo wir nun die Möglichkeit haben, den Code unserer Website zu ändern und Dateien hochzuladen.


3 Video bei Weebly hochladen

Id 443 04 Objekte Id 443 04 Objekte Id 443 04 Objekte

Und genau das müssen wir zunächst auch tun: Die Video-Datei hochladen. Dafür klicken wir in der Bearbeitungsleiste beim Menüpunkt „Objekte“ auf das „+“-Symbol. Es öffnet sich ein Drop-Down-Menü. Ein Klick auf den Menüpunkt „Hochladen von Datei(en)…“ öffnet den Hochladen-Dialog Deines Rechners. Wähle Deine Video-Datei (z. B. „hintergrund.mp4“) und klicke auf „Öffnen“. Die Datei wird hochgeladen. Der Name der Datei wird auch im HTML-Code verwendet.

Hinweis: Versuche die Video-Datei so klein wie möglich zu halten (idealerweise unter 5 MB). Dann benötigt Deine Website keine lange und nervende Ladezeit. Auch ein kurzer Name des Videos ist bei der Arbeit mit dem Code später von Vorteil. Du kannst den Namen nach dem Hochladen auch ändern.


4 HTML- und CSS-Code einfügen

Id 443 05 Landing Html Id 443 05 Landing Html Id 443 05 Landing Html

Füge folgenden HTML-Code im Body-Bereich der HTML-Datei „landing.html“ ein:


<video playsinline autoplay muted loop id="bgvid"> <source src="hintergrund.mp4" type="video/mp4"> </video>

Id 443 06 Main Style Css Id 443 06 Main Style Css Id 443 06 Main Style Css

Damit sich das Video auf die Bildschirmgröße anpasst, füge folgenden Code [1] in die CSS-Datei “main_style.css“:

video#bgvid {

position: fixed;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

-ms-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

background-size: cover;

}


Quelle: [1] „Create Fullscreen HTML5 Page Background Video“, http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video, 06.09.2016.


5 Speichern

So weit so gut. Das wäre es schon. Wenn Du nun oben rechts auf den „Speichern“-Button klickst, hat Deine Website ein Video als Hintergrund. Aber lass Dir noch einen Hinweis mit auf den Weg geben: Ein Video als Hintergrund einer Website ist ein starkes Design-Element. Aber nur weil man die Technik beherrscht und die Möglichkeit des Einfügens bei Weebly besteht, sollte man dennoch dieses Element überdacht einsetzen.


Der Autor
Soeren Theussig Soeren Theussig Soeren Theussig
Sören Theussig
Ich arbeite seit 2012 als (fester und freier) Online- und Social-Media-Redakteur und verfasse Artikel über innovative Technologien und Web-Trends.

So richtest Du das Navigationsmenü bei Weebly ein

Ein Navigationsmenü, englisch auch als Navigation Bar bezeichnet, ist ein zentrales Element jeder Homepage. Wenn es gut durchdacht ist, erleichtert es den Besuchern der Website, sich auf dieser zurecht zu finden. Mit einem Homepage-Baukasten ist ein Navigationsmenü innerhalb weniger Minuten erstellt. Voraussetzung ist natürlich, dass man sich bereits im Vorfeld Gedanken über die Struktur seiner Website, die künftigen Inhalte und damit auch die Einträge für das Navigationsmenü gemacht hat.


Das Menü sollte bei einer horizontalen Ausrichtung stets einzeilig bleiben. Mehr als ca. fünf Einträge oder auch Einträge mit sehr langen Namen finden aber selten in einer Zeile Platz, zumal im Navigationsmenü die Buchstaben eine größere Schriftgröße haben. Bei einem senkrechten Menü können zwar mehr als fünf bis sieben Einträge sichtbar sein, doch auch hier sollte es nicht zu unübersichtlich werden. Thematisch zusammengehörende Einträge vorerst zu verbergen und erst beim Überfahren des übergeordneten Menüpunktes mit der Maus ausklappen zu lassen, ist in den meisten Fällen sinnvoll.


In einem Navigationsmenü wird, bis auf Ausnahmen, auf die einzelnen Unterseiten, aus denen sich die Homepage zusammensetzt, verlinkt. Um einen Eintrag für das Navigationsmenü zu erstellen, muss also vorher die jeweilige Seite angelegt werden. Das Erstellen der Inhalte der jeweiligen Seite kann zu einem beliebigen späteren Zeitpunkt geschehen. Nur über die Art der Seite, also ob es sich beispielsweise um eine Standard-Seite oder eine Blog-Seite handelt, sollte man sich im Vorfeld im Klaren sein.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
10-15 Minuten

1 In den Baukasten wechseln

Id 444 Bild 1 Id 444 Bild 1 Id 444 Bild 1

Klicke nach erfolgreichem Login bei http://weebly.com in der rechten oberen Ecke auf den Button „Website bearbeiten“. Dadurch wirst Du aus dem Kundenbereich in den eigentlichen Baukasten weitergeleitet.


2 Eine Seite anlegen

Id 444 Bild 2 Id 444 Bild 2 Id 444 Bild 2

Klicke im Baukasten in der blauen Kopfzeile auf den Button „Seiten“. Dadurch öffnet sich links eine Seitenleiste mit den Konfigurationsmöglichkeiten für Seiten.

Id 444 Bild 3 Id 444 Bild 3 Id 444 Bild 3


Im Kopfbereich der Seitenleiste findest Du, farblich hervorgehoben, den Eintrag „Seiten“ und ein „+“-Zeichen. Durch klicken auf das „+“-Zeichen kannst Du eine neue Seite anlegen.

Hinweis: Bei der Erstellung musst Du keine feste Reihenfolge beachten. Die einzelnen Seiten werden in Schritt 3 in die gewünschte Reihenfolge und Hierarchie gebracht.

Id 444 Bild 4 Id 444 Bild 4 Id 444 Bild 4

In dem sich nun öffnenden Menü kannst Du die gewünschte Art der Seite festlegen. Zur Auswahl stehen unter anderem „Standard“, „Blog“ oder „Shop“. Es ist allerdings auch möglich, mittels „Externe Seite“ einen externen Link in der Navigation zu platzieren. Und den Eintrag „Nonclickable Menu“ kannst Du für Menüpunkte verwenden, die in der Hauptnavigation zwar erscheinen, aber keine eigenen Inhalte beziehungsweise keine „echte“ Seite haben. Dann wird bei Überfahren des Menüpunktes mit der Maus lediglich das Untermenü ausgeklappt, wohingegen bei einem Klick auf den Hauptmenüpunkt nichts geschieht.

Id 444 Bild 5 Id 444 Bild 5 Id 444 Bild 5

Nach der Auswahl des Seitentyps kannst Du in den folgenden Einstellungen den Namen der Seite vergeben. Dieser erscheint sowohl im Navigationsmenü als auch in der Registerkarte des Browsers ganz oben. Neben den Optionen für die Größe der Kopfzeile kannst Du unter „Sichtbarkeit“ festlegen, ob die Seite öffentlich, mit Passwortschutz oder nur für bestimmte Mitglieder oder Gruppen sichtbar sein soll. Unter „SEO“ kannst Du für Suchmaschinen relevante Informationen wie die Seitenbeschreibung oder Meta-Keywords hinterlegen.


Nachdem Du die Eingaben vorgenommen hast, klicke auf „Speichern“ (Pfeil 2) in der Kopfzeile der Seitenleiste.


3 Das Navigationsmenü ordnen

Id 444 Bild 6 Id 444 Bild 6 Id 444 Bild 6

Nachdem Du mehrere Seiten angelegt hast, kannst Du sie in die gewünschte Reihenfolge und Hierarchie bringen. Dazu klickst Du den gewünschten Eintrag an und ziehst ihn mit gedrückt gehaltener Maustaste an die Position, an der er in der Navigation erscheinen soll. Hauptmenüpunkte stehen linksbündig und Menüpunkte, die in einem Untermenü erscheinen sollen, werden unter den übergeordneten Menüpunkten eingerückt. Das Bild zeigt die Menüstruktur mit zwei Hauptmenüpunkten und einem Untermenüpunkt beim zweiten Hauptmenüpunkt.

Id 444 Bild 7 Id 444 Bild 7 Id 444 Bild 7

Dieses Bild zeigt die „normale“ Darstellung der Navigation auf der Homepage.

Id 444 Bild 8 Id 444 Bild 8 Id 444 Bild 8

Hier ist Navigation mit dem ausgeklappten Untermenü dargestellt.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So richtest Du Dir eine eigene E-Mail-Adresse bei Weebly ein

Die E-Mail ist einer der ältesten und nach wie vor einer der wichtigsten Dienste im Internet, da nahezu jeder Internetnutzer E-Mails für seine tägliche Kommunikation verwendet.


Wenn man eine eigene Website betreibt, sei es für geschäftliche oder für private Zwecke, dann kann man bei vielen Homepage-Baukasten-Anbietern auch eigene E-Mail-Adressen mit dem Domainnamen (also beispielsweise "www.firmenname.de") einrichten. Vor allem bei einer professionellen Unternehmenswebsite oder einer Vereinswebsite hinterlässt eine eigene E-Mail-Adresse wie etwa "kontakt@firmenname.de" einen deutlich seriöseren Eindruck als eine Adresse wie z. B. "firmenname@freemail-anbieterxy.com". Dazu kommt, dass man mit einer eigenen E-Mail-Adresse, immer wenn man ein Mail schreibt, auch seine Website bewirbt.


Beim Anbieter Weebly ist es ebenfalls möglich, eigene E-Mail-Adressen einzurichten. Das funktioniert über Googles G Suite. Man hat dabei 15 Tage Zeit diesen E-Maildienst und viele weitere Dienste von Google mit seiner eigenen E-Mail-Adresse kostenfrei zu testen. Danach kostet es 6 Dollar (ca. 5,20 Euro) pro Monat. Es einzurichten geht schnell und ist nicht sonderlich kompliziert. Allerdings muss man zuvor eine Domain registrieren. Das kostet um die 18 Euro pro Jahr.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Ja, ab ca. 3,50 Euro pro Monat, eigene Domain Voraussetzung
Schwierigkeitsgrad?
mittel
Zeitaufwand
20 Minuten

1 Login und Dashboard

Id 445 01 Dashboard Id 445 01 Dashboard Id 445 01 Dashboard

Nachdem Du Dich bei Weebly eingeloggt hast, befindest Du Dich im Dashboard Deiner Website. In der oberen Navigation findest Du links die „G Suite“-Schaltfläche (Button), die Du zum Einrichten Deiner E-Mail-Adresse benötigst. Per Klick öffnet sich ein neues Fenster.


2 Bei G Suite registrieren

Id 445 02 Google Apps Id 445 02 Google Apps Id 445 02 Google Apps

Im nächsten Schritt musst Du Dich mit deiner Domain (der Name Deiner Website) bei G Suite (früher Google Apps) registrieren. Du hast dann 15 Tage Zeit, diesen Dienst kostenlos zu testen. In dieser Testphase hast Du Zugriff auf alle Dienste der Google Suite (Gmail, Kalender, Kontakte etc). Klicke auf den Button „Register a Domain“.


3 Domain registrieren

Id 445 03 Domain Registrieren Id 445 03 Domain Registrieren Id 445 03 Domain Registrieren

Trage Deine Domain in das dafür vorgesehene Feld ein. Weebly überprüft dann, ob die Website-Domain noch verfügbar ist oder bereits vergeben. Wenn Sie noch verfügbar ist, steht neben dem Domainnamen „purchase“ (übersetzt „kaufen“ oder „erwerben“).

Id 445 04 Domain Registrieren Id 445 04 Domain Registrieren Id 445 04 Domain Registrieren
Id 445 05 Domain Registrieren Id 445 05 Domain Registrieren Id 445 05 Domain Registrieren

Per Klick öffnet sich ein neues Fenster, wo Du in einem Formular Deine Kontakt-Info eingeben musst und die Domain kaufst. Nachdem Du Deine Domain erworben hast, kannst Du mit der freien 15-tägigen Testphase mit Google Apps beginnen.


4 15-tägige Testphase mit Google Suites

Id 445 06 Kostenfreie Testphase Id 445 06 Kostenfreie Testphase Id 445 06 Kostenfreie Testphase

Gib dafür Deine gewünschte E-Mail-Adresse in die dafür vorgesehenen Felder ein und wähle ein Passwort aus. Dann klicke auf den Button „Start Your 15 Day Free Trial“. Es öffnet sich die Übersicht von G Suite, wo Du nun weitere E-Mail-Adressen hinzufügen kannst.


5 E-Mails verwalten

Id 445 07 Go To Inbox Id 445 07 Go To Inbox Id 445 07 Go To Inbox

Deine E-Mails verwalten, schreiben und empfangen kannst Du jetzt über Gmail, dem E-Mail-Programm von Google. Log Dich dafür ein auf mail.google.com/a/dein-domainname.de (bitte eigenen Domainnamen hier einsetzen!) oder im Übersichtsbereich Deiner Website per Klick auf den Link „Go To Inbox“ oben rechts.


Der Autor
Soeren Theussig Soeren Theussig Soeren Theussig
Sören Theussig
Ich arbeite seit 2012 als (fester und freier) Online- und Social-Media-Redakteur und verfasse Artikel über innovative Technologien und Web-Trends.

So richtest Du einen Chat bei Weebly ein

Neben dem Telefon- und E-Mail-Support haben sich in den letzten Jahren vermehrt Chats als Kommunikationsmittel zwischen Website-Betreibern und interessierten Besuchern etabliert. Ob Stromanbieter, Mobilfunkprovider oder Online Shop – neben dem reinen Support ist ein Chat auch hervorragend als Marketing Instrument geeignet. Kunden, die eine Homepage besuchen und sich über ein Produkt informieren möchten, erhalten durch einen Chat unmittelbar auf der Homepage selbst eine mehr oder weniger direkte Einladung zu einem Beratungs- und Verkaufsgespräch. Die einstige Domäne des Fachhandels ist im Internet angekommen. Solch ein Chat mit persönlicher Beratung ist ein sehr niederschwelliges Angebot für potentielle Kunden.


Obwohl ein Live-Chat im Regelfall nicht zu der Grundausstattung von Homepage-Baukästen gehört, arbeiten die Anbieter von Homepage-Baukästen mit Drittanbietern spezieller Chat-Apps und Widgets zusammen. Durch die enge Vernetzung zwischen Baukasten- und Drittanbieter ist gewährleistet, dass die jeweilige App auch problemlos in dem entsprechenden Baukasten funktioniert.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Ja, abhängig von der gewählten App
Schwierigkeitsgrad
Mittel
Zeitaufwand
5 bis 15 Minuten

Achtung: Dieses Beispiel führt exemplarisch durch die Installation einer Chat App. Der Installationsverlauf kann je nach gewählter App extrem variieren. Am besten probierst Du zunächst Apps, die eine kostenlose Testphase haben. Schon bei der Installation wirst Du merken, ob die App Deinen Vorstellungen entspricht.

1 Das App-Center in Weebly aufrufen

Id 446 Bild 1 Id 446 Bild 1 Id 446 Bild 1

Du hast Dich bei Weebly angemeldet und befindest Dich im Bearbeitungs-Modus für Deine Website. Da Du für den Chat eine spezielle App benötigst, musst Du zunächst das App-Center aufrufen. Klicke dazu in der Kopfzeile des Baukastens auf „Erstellen“ und wähle im oberen Bereich der linken Seitenleiste „Apps“ aus. Unmittelbar darunter findest Du den Button „App-Center“.


2 Eine geeignete App finden und zum Baukasten hinzufügen

Id 446 Bild 2 Id 446 Bild 2 Id 446 Bild 2

Im App-Center findest Du eine passende App am einfachsten, indem Du den Suchbegriff „chat“ in das Suchfeld eingibst.

Id 446 Bild 9 Id 446 Bild 9 Id 446 Bild 9

Du erhältst eine Trefferliste wie nebenstehend ausschnittsweise abgebildet. Wähle zunächst am besten eine kostenlose App mit „Free Trial“ aus. In unserem Beispiel haben wir uns für die App „Tidio Chat“ entschieden. Du kannst Dich hier auch an den Bewertungspunkten (1-5 Sterne), die andere Nutzer der App gegeben haben, orientieren. Zur Detailansicht einer App klickst Du diese an.

Id 446 Bild 4 Id 446 Bild 4 Id 446 Bild 4

In der Detailansicht einer App findest Du deren genaue Beschreibung samt Funktionsumfang, einige ausgewählte Kundenrezensionen sowie einen Screenshot der App. In der rechten Leiste kannst Du auf „Hinzufügen“ klicken, falls Dir die App gefällt. Falls nicht, kannst Du zur Liste der Suchergebnisse zurückkehren und die verschiedenen Apps weiter miteinander vergleichen.


3 Einen Chat installieren

Id 446 Bild 5 Id 446 Bild 5 Id 446 Bild 5

Nachdem Du den Tidio Chat zu Deinem Baukasten hinzugefügt hast, möchte sich die App zunächst mit Deiner Homepage verbinden. Damit sie korrekt funktionieren kann, musst Du ihr gewisse Rechte gewähren. Schließe anschließend diesen Teil der Installation mit einem Klick auf „Verbinden“ in der rechten oberen Ecke des Fensters ab.

Id 446 Bild 6 Id 446 Bild 6 Id 446 Bild 6

Nun wirst Du automatisch wieder in den Weebly-Baukasten weitergeleitet und dort von der noch abzuschließenden Installationsroutine empfangen. Zunächst möchte die App, dass Du Deinen Namen einträgst. Dieser Name wird benötigt, damit Deine Chat-Partner wissen, mit wem sie es zu tun haben. Anschließend klickst Du auf den Button „Get started“.

Id 446 Bild 7 Id 446 Bild 7 Id 446 Bild 7

Als nächstes kannst Du die Farbe der Sprechblase wählen, in der Deine Chat-Nachrichten erscheinen sollen, sowie ein Bild, das stellvertretend für Dich neben dieser Sprechblase erscheint und die Sprache Deines Chats. Nachdem Du Deine Auswahl getroffen hast, klickst Du auf „Next Step“.


4 Die Installation abschließen

Id 446 Bild 8 Id 446 Bild 8 Id 446 Bild 8

Fast fertig! Der letzte Schritt fordert Dich auf, Deine Homepage nun zu veröffentlichen, damit die Änderungen und der neue Chat auch für die Besucher Deiner Homepage sichtbar werden. Also klickst Du auf „Go To Panel And Publish“ und veröffentlichst anschließend Deine Homepage wie gewohnt mit einem Klick auf „Veröffentlichen“ in der rechten oberen Ecke des Baukastens. Damit ist der Chat auf Deiner Website installiert!


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So richtest Du einen Online Shop bei Weebly ein

E-Commerce ist längst nicht mehr nur für große Versandhäuser wie Amazon ein Thema. Auch kleine Unternehmen oder Dienstleister können mit einem eigenen Online Shop ihr Angebot – zumindest theoretisch – weltweit vermarkten.


Das Anlegen eines Shops mit Weebly ist an sich bereits ab dem kostenlosen Einsteiger-Tarif möglich. Allerdings wird bereits für die essenzielle Funktion „Produkt hinzufügen“ der Tarif „Starter“ benötigt. Mit diesem vergleichsweise günstigen Tarif ist es möglich, bereits große Teile eines eigenen Online Shops zu realisieren. Für erweiterte Funktionen wie „Versand“ oder „Steuern“ ist allerdings der Tarif „Business“ Pflicht.

Aufwand im Überblick:
Ist das mit Weebly möglich?
Ja, aber erst ab Tarif „Starter“
Mit Zusatzkosten verbunden?
Für bestimmte Funktionen
Schwierigkeitsgrad:
Einfach bis mittel
Zeitaufwand:
Ab 30 Minuten

1 Einen Online Shop bei Weebly anlegen

Id 448 Bild 2 Id 448 Bild 2 Id 448 Bild 2

Logge Dich zunächst bei Weebly.com ein. Unmittelbar nach dem Einloggen kommst Du ins Dashboard von Weebly, wo Du Deine verschiedenen Website-Projekte verwalten kannst. Hier klickst Du auf das „+“-Symbol bzw. auf „+ Website hinzufügen“, um mit der Gestaltung Deines eigenen Online-Shops zu beginnen.

Hinweis: Je nachdem, wie viele unterschiedliche Webseiten Du mit Weebly betreibst, ist das „+ Website hinzufügen“-Symbol nicht immer auf den ersten Blick zu finden. Schaue Dir auf der linken Seite unter dem Navigationsmenü an, was Dir angezeigt wird. Falls Du bereits ein einziges Website-Projekt gestartet hast, steht hier der Name dieses Projekts und rechts daneben das „+“-Symbol. Klicke darauf, um eine neue Website bzw. einen Webshop zu gestalten. Falls Du mehrere Projekte angelegt hast, findest Du hier den Namen Deiner aktuellen Website und daneben einen kleinen, nach unten zeigenden Pfeil. Über diesen öffnest Du ein Drop Down Menü mit der Liste Deiner Website-Projekte. Hier wählst Du den ersten Eintrag „Website hinzufügen“.

Id 448 Bild 3 Id 448 Bild 3 Id 448 Bild 3

Hast Du auf das „+“-Symbol bzw. auf „+ Website hinzufügen“ geklickt, folgt eine Auswahl der häufigsten Einsatzzwecke für eine neue Homepage. Wähle hier den ersten Eintrag „Online Shop“.

Id 448 Bild 4 Id 448 Bild 4 Id 448 Bild 4

Nun kannst Du in das Eingabefeld den Namen Deines Shops eintragen und mit einem Klick auf „Weiter“ fortfahren. Alternativ kannst Du diesen Schritt mit einem Klick auf den Link links vom „Weiter“-Button überspringen.

Id 448 Bild 5 Id 448 Bild 5 Id 448 Bild 5

Als nächster Schritt folgt die Auswahl einer passenden Design-Vorlage für Deinen Shop. Während Du mit der Maus über die verschiedenen Vorschaubilder fährst, erscheint in deren rechten unteren Ecke jeweils ein Button „Vorschau“. Klicke diesen an, wenn Du Dich für eine bestimmte Design-Vorlage interessierst.

Id 448 Bild 6 Id 448 Bild 6 Id 448 Bild 6

Es folgt eine bildschirmfüllende Vorschau der Vorlage. Falls Du bei Deiner Wahl bleibst, brauchst Du nur noch auf die Schaltfläche „Mit der Bearbeitung beginnen“ rechts oben zu klicken, und der Online Shop wird als neues Projekt angelegt.


2 Deine Shop-Seite mit einer Domain verknüpfen

Id 448 Bild 7 Id 448 Bild 7 Id 448 Bild 7

Dein neuer Shop mit der gewählten Design-Vorlage öffnet sich im Bearbeitsungsbereich, wo Du zunächst von einem Pop Up Fenster begrüßt wirst. In diesem Fenster musst Du Deinen Shop mit einer Internet-Adresse verknüpfen, damit er im Web auch gefunden werden kann. Zur Auswahl stehen Dir die Optionen für eine kostenlosen Weebly Sub-Domain, eine eigene neue Domain oder aber eine eigene Domain, die Du bereits besitzt.


3 Die Übersichts-Seite der Shop-Verwaltung

Id 448 Bild 8 Id 448 Bild 8 Id 448 Bild 8

Nachdem Du Deinen Shop mit einer Domain verknüpft hast, klickst Du in der oberen Kontrollleiste des Bearbeitungsbereichs auf „Shop“.

Id 448 Bild 9 Id 448 Bild 9 Id 448 Bild 9

Daraufhin öffnet sich standardmäßig die Übersichts-Seite der Shop-Verwaltung. In dem großen Inhaltsbereich findest Du hier zunächst einen Überblick der wichtigsten Funktionen wie „Ein Produkt hinzufügen“ oder die Einstellungen für die Zahlungsmöglichkeiten Deines Shops.

Hinweis: Falls Du bis hierher den kostenlosen Tarif genutzt haben solltest, wirst Du bei einem Klick auf „Produkt hinzufügen“ zunächst zu einem Upgrade Deines Tarifs bei Weebly aufgefordert. Produkte können erst ab dem Tarif „Starter“ zum Shop hinzufügt werden.

Id 448 Bild 16 Id 448 Bild 16 Id 448 Bild 16

Links neben dem Inhaltsbereich findest Du das Navigationsmenü für die Shop-Verwaltung. Hier kannst Du über die Unterpunkte des Menüs die verschiedenen Bearbeitungsmöglichkeiten aufrufen. Klicke hier auf „Produkte“ um in Deine Produktverwaltung zu gelangen.


4 Produkte in Deinen Webshop einpflegen

Id 448 Bild 11 Id 448 Bild 11 Id 448 Bild 11

In der Produktverwaltung findest Du alle Deine Produkte nacheinander aufgelistet. Über die Funktion „Suche“ kannst Du ein bestimmtes Produkt rasch unter einer Vielzahl an Produkten herausfiltern.


Der wichtigste Bereich innerhalb der Produkt-Verwaltung befindet sich rechts oben. Hier kannst Du Dich zwischen den Buttons „Produkt hinzufügen“ oder „Produkte importieren“ entscheiden. Du hast also die Wahl, ob Du Deine neuen Produkte von Hand einpflegen willst oder ein bereits angelegtes Produktverzeichnis importieren möchtest.

Id 448 Bild 12 Id 448 Bild 12 Id 448 Bild 12

Klickst Du auf „Produkt hinzufügen“, dann öffnet sich eine Eingabemaske, in der Du die Merkmale Deines Produkts eintragen kannst. So hast Du zum Beispiel die Wahl zwischen den wichtigsten Produktklassen im Bereich E-Commerce, nämlich materielle Güter, Dienstleistungen oder digitale Waren, die Du zum Download anbieten kannst. Hier fügst Du auch ein Produktbild ein, legst den Preis fest und vieles mehr.

Id 448 Bild 13 Id 448 Bild 13 Id 448 Bild 13

Solltest Du Deinen Warenkatalog bereits mit Excel, Etsy oder Shopify erfasst haben, klickst Du hingegen auf „Produkte importieren“ und wählst die entsprechende Option im Auswahlfenster für den Import aus.


5 Zahlungsmöglichkeiten und allgemeine Einstellungen festlegen

Id 448 Weebly Shop Einrichten Kasse Id 448 Weebly Shop Einrichten Kasse Id 448 Weebly Shop Einrichten Kasse

Die hierzu erforderlichen Einstellungsmöglichkeiten findest Du entweder direkt auf der Übersichts-Seite der Shop-Verwaltung mit einem Klick auf den Button „Zahlung einrichten“. Oder Du klickst im seitlichen Navigationsmenü der Shop-Verwaltung zuerst auf „Einrichten“ und anschließend auf „Kasse“.

Id 448 Bild 10 Id 448 Bild 10 Id 448 Bild 10

Im Prinzip stehen Dir zwei externe Dienste als Bezahloptionen für Deinen Webshop zur Auswahl: Stripe und Paypal. Stripe kannst Du bereits ab dem Tarif „Starter“ einsetzen, allerdings berechnet dann Weebly eine Bearbeitungsgebühr von 3 %, die zusätzlich zu den Bearbeitungsgebühren von Stripe fällig werden. Willst Du diese Gebühr von Weebly vermeiden, musst Du auf den Tarif „Business“ upgraden. Gleiches gilt, falls Du Paypal als Bezahloption in Deinem Shop anbieten willst, da PayPal erst ab dem Tarif „Business“ für Deinen Shop zur Verfügung steht.

Id 448 Bild 15 Id 448 Bild 15 Id 448 Bild 15

Zu guter Letzt werfen wir noch einen Blick auf die wichtige Seite „Einrichten“ aus dem Navigationsmenü der Shop-Verwaltung. Hier trägst Du nicht nur Deine Kontaktdaten als Shop-Betreiber ein, sondern legst auch die allgemeinen Einstellungen wie die zu verwendenden Maß- und Währungseinheiten (zum Beispiel Zentimeter und Euro), das grundlegende Layout (ein- oder mehrspaltig) oder Social Media Verknüpfungen fest.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So baust Du Happy Wheels auf Deiner Weebly-Website ein

Neben PC-, Konsolen- und Mobile Games existieren seit vielen Jahren auch sogenannte Browser Games, für die man neben einem starken Rechner lediglich eine gute Internet-Verbindung benötigt. Diese haben den Vorteil, dass sie nahezu plattform- und betriebssystemunabhängig funktionieren, solange auf dem Gerät ein Browser wie der Internet Explorer installiert ist und einige andere technische Voraussetzungen erfüllt sind. Browser Games sind dazu in der Regel Free to Play, das heißt es entstehen keine Anschaffungskosten. Falls man besonderen Gefallen an einem Spiel gefunden hat, kann man gegen Geld je nach Spiel Dinge wie Premium Fähigkeiten, Waffen oder Fahrzeuge freischalten, die einem im Spiel gewisse Vorteile verschaffen.


Da Browser Games naturgemäß wie eine Website auch im Browser angezeigt und gespielt werden, liegt der Gedanke nahe, sie in die eigene Website einzubinden. Das kann besonders für Betreiber von Clan- oder Gamer-Homepages interessant sein.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
Ca. 5 Minuten

Hinweis: Was in unserem Beispiel mit Happy Wheels funktioniert, funktioniert mit vielen anderen Browser Games auch, solange der Anbieter damit einverstanden ist und den sogenannten HTML Embed Code bereitstellt.

Der Anbieter Games68.com stellt auch für Happy Wheels, so wie für viele andere Browser Spiele, einen HTML Embed Code zur Verfügung. So ist es ohne Probleme möglich, sie in die eigene Website einzubinden.


Achtung: Da die Spiele zum Großteil darauf angewiesen sind, dass Adobe Flash auf dem Endgerät installiert ist, kann es unter Umständen vorkommen, dass sie nicht auf jedem Gerät funktionieren


1 Vorbereitung

Id 450 Bild 10 Id 450 Bild 10 Id 450 Bild 10

Logge Dich in Deinen Weebly Baukasten ein. Standardmäßig sollte die Seite „Erstellen“ mit Deiner Homepage erscheinen, in der linken Seitenleiste sollten die „Elemente“ ausgewählt sein. Solltest Du Dich gerade an einer anderen Stelle Deines Baukastens befinden, navigiere zu dieser Position.


Öffne eine zweite Internet-Seite und rufe die Homepage von Happy Wheels unter games68.com/games.php?id=17635 auf.


2 Den Code zum Einbetten kopieren

Id 450 Bild 1 Id 450 Bild 1 Id 450 Bild 1

Scrolle auf der Seite bis ganz nach unten. Dort findest Du einen farbig unterlegten Kasten, über dem der Schriftzug „This game on your Website / Blog for free ? Here is the embed HTML code !“ steht. Klicke in den Kasten mit dem Code, sodass er blau markiert wird. Kopiere ihn in die Zwischenablage Deines PCs indem Du STRG C drückst.


3 Das HTML Widget aktivieren

Id 450 Bild 2 Id 450 Bild 2 Id 450 Bild 2

>>>>>>>>>>>>>>>>>>>>

Id 450 Bild 3 Id 450 Bild 3 Id 450 Bild 3

4 Den kopierten Code einfügen

Id 450 Bild 4 Id 450 Bild 4 Id 450 Bild 4

Klicke nun in den Platzhalter des HTML Widgets. Daraufhin öffnet sich über oder unter dem Paltzhalter ein Fenster wie nebenstehend abgebildet. Klicke hier auf den Eintrag „Benutzerdefinierte HTML bearbeiten“.

Id 450 Bild 5 Id 450 Bild 5 Id 450 Bild 5

Nun wird der ursprüngliche Platzhaltertext aktiviert. Du erkennst das daran, dass er blau unterlegt ist. Du kannst ihn nun bearbeiten.

Id 450 Bild 6 Id 450 Bild 6 Id 450 Bild 6

Drücke STRG V, um den zuvor bei Happy Wheels kopierten Code einzufügen. Das Ergebnis sollte in etwa wie auf unserem Screenshot aussehen.


5 Die Änderungen speichern

Id 450 Bild 7 Id 450 Bild 7 Id 450 Bild 7

Wenn Du nun auf eine beliebige Stelle außerhalb des HTML Widgets klickst, sollten das Fenster für „Benutzerdefinierte HTML“ und der eingefügte Code wieder verschwinden. An Stelle des Platzhalters und des Codes sollte ein kleiner Schriftzug von Games68.com als Platzhalter für das Game Happy Wheels erscheinen.

Id 450 Bild 8 Id 450 Bild 8 Id 450 Bild 8

Hinweis: Dass das Spiel nicht bereits jetzt schon startet, beziehungsweise innerhalb des Baukastens funktioniert, ist normal. Es wird nur auf Deiner Weebly-Homepage richtig funktionieren, nicht jedoch innerhalb des Baukastens. Lass Dich dadurch nicht verunsichern.


Schließe das Einbinden von Happy Wheels auf Deiner Homepage ab, indem Du diese veröffentlichst. Klicke hierzu wie gewohnt auf den Button „Veröffentlichen“ in der rechten oberen Ecke Deines Baukastens.

Id 450 Bild 9 Id 450 Bild 9 Id 450 Bild 9

Melde Dich ab bzw. gehe in der Besucher-Ansicht auf Deine Homepage. Darauf sollte jetzt an der gewünschten Stelle das eingebundene Spiel Happy Wheels erscheinen. Viel Spaß!


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So integrierst Du das Newsletter Widget bei Weebly

Newsletter sind besonders für Betreiber professioneller Homepages wie Online Shops oder Veranstalter mit wechselnden Kursen und Programmangeboten ein wichtiges Werkzeug zur Kundenbindung. Die Möglichkeit sich für einen Newsletter anzumelden, wird hauptsächlich auf der eigenen Website angeboten: Sei es prominent auf der Startseite oder als zusätzliche Option beim Abschluss eines Bestellvorgangs: Stets handelt es sich hierbei entweder um ein eigenständiges Formular oder zumindest, so im Falle des Häkchens für „Newsletter abonnieren“ am Ende eines Bestellformulars, um ein Formularfeld.


Weebly bietet für die am häufigsten auftretenden Anwendungsbereiche vorgefertigte Bausteine. Daher gibt es auch spezielle Newsletter Widgets, so dass sich der Nutzer des Baukastens das Formular nicht erst selbst aus einzelnen anderen Elementen zusammenstellen muss.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
3 Minuten

Achtung: Das Newsletter Widget dient lediglich als Anmeldeformular, in das künftige Newsletter-Abonnenten ihre E-Mail-Adresse eintragen können. Für das Organisieren und Versenden von Newslettern hingegen benötigt man eigene Programme, wie zum Beispiel MailChimp.

1 Das Newsletter Widget bei Weebly auswählen

Id 452 Bild 8 Id 452 Bild 8 Id 452 Bild 8

Standardmäßig wird im Weebly Baukasten bereits die erforderliche Seite als Startseite geladen. Falls Du Dich gerade auf einer anderen Seite des Baukastens befindest, klicke in der Kopfzeile auf „Erstellen“ und gegebenenfalls auf „Elemente“ in der linken Seitenleiste. Die Darstellung sollte nun in etwa der in dem nebenstehenden Screenshot entsprechen. Das Newsletter Widget findest Du unter der Rubrik „Basic“. Es ist mit einem Briefumschlag als Symbol gekennzeichnet und die Beschriftung „Newsletter Formular“ erscheint, wenn man Du mit dem Mauszeiger darüber schwebst.

Id 452 Bild 1 Id 452 Bild 1 Id 452 Bild 1

Ziehe das Newsletter Widget bei gedrückt gehaltener Maustaste an die gewünschte Stelle innerhalb Deiner Homepage.


2 Das Newsletter Widget konfigurieren

Id 452 Bild 9 Id 452 Bild 9 Id 452 Bild 9

Klicke nun in oder neben den Schriftzug „Zur Bearbeitung hier klicken“. In der rechten oberen Ecke des Newsletter Widgets erscheinen nun drei Buttons. Außerdem wird das Widget hervorgehoben, indem der Rest der Homepage dunkler wird.

Weiterhin kannst Du Deine E-Mail-Adresse eintragen, an die Du eine Nachricht geschickt bekommst, sobald ein Besucher Deinen Newsletter abonniert hat.

Sobald Deine Besucher das Newsletter Formular ausgefüllt und auf den „Newsletter abonnieren“-Button geklickt haben, verschwindet das Formular auf der Website. An seiner Stelle erscheint nun eine Bestätigung. In den Optionen kannst Du festlegen, ob diese Bestätigung eine Nachricht sein soll oder ein Link. Standardmäßig ist als Nachricht der Text „Vielen Dank. Ihre Informationen wurden erfolgreich übermittelt“ eingestellt, aber Du kannst ihn natürlich auch ändern. Der Link wiederum kann zu einem Deiner Blog-Beiträge, Seiten oder Produkte auf Deiner Homepage führen – je nachdem, was Du einstellst.


Unter „Schaltfläche“ kannst Du die Ausrichtung des „Newsletter abonnieren“-Buttons innerhalb des Newsletter Widgets bestimmen, also zum Beispiel ob er links- oder rechtsbündig angezeigt wird. Auch die Beschriftung des Buttons, also „Newsletter abonnieren“, kannst Du hier, wenn gewünscht, neu vergeben.


Nachdem Du alle Optionen nach Deinen Wünschen eingestellt hast, klicke auf „Speichern“ in der rechten oberen Ecke des Widgets (Pfeil 3).

Id 452 Bild 10 Id 452 Bild 10 Id 452 Bild 10

Klicke auf den Button „Formularoptionen“ (Pfeil 1). Es öffnet sich nun ein Fenster (Pfeil 2), in dem Du als erstes die Möglichkeit hast, den Namen des Formulars neu zu vergeben. Standardmäßig ist hier „Newsletter-Formular“ eingestellt.

Id 452 Bild 2 Id 452 Bild 2 Id 452 Bild 2

Solange Du im Bearbeiten-Modus des Newsletter Widgets bist, werden in der linken Seitenleiste zum Teil andere Elemente angezeigt. Als erste Rubrik erscheinen nun die sogenannten Formularfelder. Da es sich bei dem Newsletter Widget ja auch um ein Formular handelt, kannst Du diesem auch weitere Felder hinzufügen. So kannst Du zum Beispiel die Elemente „Name“ oder „Telefonnummer“ mit gedrückt gehaltener Maustaste in das Newsletter Widget ziehen, und dort werden automatisch die entsprechenden Eingabefelder erzeugt.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So führst Du ein Upgrade Deines Tarifs bei Weebly durch

Wer anspruchsvollere Projekte wie einen Online Shop bei Weebly realisieren möchte, der wird seinen zunächst kostenfreien Tarif auf einen der kostenpflichtigen umstellen müssen. Bei einem Tarifwechsel in eine höhere Preisklasse mit größerem Funktionsumfang spricht man von einem Upgrade, bei einem Wechsel in eine günstigere Preisklasse mit kleinerem Funktionsumfang von einem Downgrade. Während Upgrades nahezu jederzeit durchführbar sind, müssen für einen Downgrade die jeweiligen Vertragslaufzeiten beachtet werden.


Weebly bietet zur Zeit Tarife in drei Preisklassen an. „Starter“ ist das günstigste der drei Pakete, „Pro“ stellt die Mittelklasse dar, während „Business“ der teuerste Tarif mit dem umfangreichsten und leistungsfähigsten Baukasten ist. Abgesehen davon, dass man bei einem Upgrade in eine höhere Tarifstufe wechselt, entstehen dabei keine zusätzlichen Kosten.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr leicht
Zeitaufwand
2 Minuten

1 Upgrade starten

Id 453 Bild 7 Id 453 Bild 7 Id 453 Bild 7

Melde Dich mit Deinen Zugangsdaten bei Weebly an und klicke danach im Bearbeitungsbereich auf den Button „Upgrade“ in der rechten oberen Ecken neben „Website bearbeiten“.


2 Den neuen Tarif auswählen

Id 453 Bild 8 Id 453 Bild 8 Id 453 Bild 8

Wähle Deinen künftigen Tarif. Wenn Du Dich bereits zuvor über die einzelnen Tarife informiert hast und bereits eine Entscheidung getroffen hast, kannst Du hier direkt den gewünschten Tarif anklicken.

Id 453 Bild 10 Id 453 Bild 10 Id 453 Bild 10

Alternativ klickst Du oberhalb der Liste auf „Tarifvergleich“.

Id 453 Bild 12 Id 453 Bild 12 Id 453 Bild 12

Informiere Dich über die einzelnen Tarife im Detail und triff Deine Auswahl zwischen den angebotenen Möglichkeiten, indem Du in der Spalte des gewünschten Pakets auf „Auswählen“ klickst.


3 Zahlungsmethode wählen

Id 453 Bild 9 Id 453 Bild 9 Id 453 Bild 9

Nachdem Du Dich für einen Tarif entschieden hast, wählst Du Deine Zahlungsmethode. Zur Auswahl stehen diverse Kreditkarten sowie der Online Dienst Paypal. Trage die erforderlichen Daten ein, falls du mit Kreditkarte zahlen möchtest, oder wähle Paypal aus.


4 Bestellung abschließen

Id 453 Bild 11 Id 453 Bild 11 Id 453 Bild 11

Schließe Deine Bestellung ab, indem Du auf „Zahlungspflichtig bestellen“ klickst. Falls Du Paypal als Zahlungsmethode gewählt hast, wirst Du zu Paypal weitergeleitet. Dort wird ein weiterer Schritt innerhalb Deines Paypal-Kontos zur Verifizierung der Zahlung erforderlich sein. Bei Kreditkartenzahlung ist der Bestellvorgang nach dem Klick auf „Zahlungspflichtig bestellen“ abgeschlossen.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.

So verknüpfst Du Google Analytics mit Deiner Weebly-Website

Google ist die wohl bekannteste und meistgenutzte Suchmaschine der Welt. Aber Google bietet noch sehr viel mehr Dienstleistungen an, die mit der Datensuche im Internet verbunden sind. So zum Beispiel auch Google Analytics. Das ist ein sehr mächtiges Werkzeug zur Analyse von Webseiten.


Von einfachen Website-Statistiken – wie zum Beispiel: Wie viele Personen haben sich meine Website angeschaut und aus welchen Ländern kommen sie – bis hin zu wichtigen Leistungskennzahlen (sogenannten KPI), mit denen man etwa die Leistungen eines Online Shops messen kann: Mit dem Webanalyse-Tool Google Analytics hat man zahlreiche Möglichkeiten zur Analyse seines Webauftritts und zur Messung des Website-Verkehrs (auch Traffic genannt). Und das Beste: Google Analytics bietet nicht nur einen Mehrwert in Sachen Suchmaschinenoptimierung und Marketingaktivitäten. Es ist dabei auch noch völlig kostenfrei und auf fast jeder Website nutzbar.


Natürlich ist es auch möglich, Google Analytics auf einer Website von Weebly zu implementieren. Dafür benötigt man zum einen eine Website bei Weebly und zum anderen ein Konto bei Google Analytics. Beides zu erstellen, ist relativ schnell erledigt und kinderleicht.

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad?
Mittel
Zeitaufwand
20 Minuten

1 Registrierung und Login bei Weebly

Als erster Schritt muss eine Seite beim Homepage-Baukasten-Anbieter Weebly erstellt werden. Dafür gehen wir auf www.weebly.com und registrieren uns mit unserem Namen, einer E-Mail-Adresse und einem Passwort.


Hinweis: Eine Registrierung bei Weebly ist auch mit einem Facebook-Konto oder einem Google+ Konto möglich.

Id 455 01 Vorlagen Id 455 01 Vorlagen Id 455 01 Vorlagen

Im nächsten Schritt müssen wir eine Vorlage für unsere Seite auswählen. Handelt es sich um einen Online-Shop oder eher um einen Blog? Keine Sorge: Diese Vorlage kann auch später wieder schnell geändert werden.

Id 455 02 Vorlage Auswaehlen Id 455 02 Vorlage Auswaehlen Id 455 02 Vorlage Auswaehlen

Suche Dir ein Design aus dem umfangreichen Angebot aus und klicke auf den Button „Auswählen“.

Id 455 03 Website Domain Id 455 03 Website Domain Id 455 03 Website Domain

Es öffnet sich ein Fenster mit der Wahl des Domain-Namens. Das ist die Adresse, unter der Deine Website online gefunden wird. Bei der kostenlosen Version hat Deine Website immer die Domain-Endung „weebly.com“ (zum Beispiel: www.meine-website.weebly.com). Fülle das entsprechende Feld aus und klicke auf „Weiter“.

Id 455 04 Bearbeitungsmodus Id 455 04 Bearbeitungsmodus Id 455 04 Bearbeitungsmodus

Herzlichen Glückwunsch: Deine Weebly-Website ist nun bereit, von Dir bearbeitet zu werden. Sie befindet sich im Bearbeitungsmodus.


2 Registrierung bei Google und Anmeldung bei Google Analytics

Id 455 05 Google Anmeldung Id 455 05 Google Anmeldung Id 455 05 Google Anmeldung

Um Google Analytics nutzen zu können, wird ein Konto bei Google benötigt. Über dieses Google-Konto erhältst Du mit Deinem Nutzernamen und Deinem Passwort auch Zugriff auf Produkte wie Gmail oder YouTube. Das Google-Konto erstellst Du hier: accounts.google.com/signup.

Id 455 06 Ga Id 455 06 Ga Id 455 06 Ga

Nachdem Du Dein Google-Konto erstellt hast, meldest Du Dich mit Deiner E-Mail-Adresse und Deinem Passwort bei Google Analytics an unter marketingplatform.google.com/about/


3 Google Analytics Konto erstellen und Tracking-ID abrufen

Id 455 07 Tracking Id Id 455 07 Tracking Id Id 455 07 Tracking Id

Nun musst Du bei Google Analytics ein Konto erstellen und die sogenannte Tracking-ID für Deine Website abrufen. Vergib dafür einen Kontoname (zum Beispiel „meine-website“) und fülle alle Felder (Website-Name, Website-URL, Branche etc.) aus. Klicke dann auf den Button Tracking-ID abrufen. Es öffnen sich die Google-Analytics Nutzungsbedingungen. Nach sorgsamer Lektüre klickst Du auf „Ich stimme zu“.

Id 455 08 Ga Tracking Id Id 455 08 Ga Tracking Id Id 455 08 Ga Tracking Id

Auf der nächsten Seite erhältst Du den Tracking-Code. Dieser wird benötigt, um Google Analytics mit der Weebly-Website zu verknüpfen. Kopiere dafür den gesamten Code.


4 Google Tracking Code in Deine Website einfügen

Id 455 09 Seo Id 455 09 Seo Id 455 09 Seo

Gehe zurück in den Bearbeitungsmodus Deiner Weebly-Website. Im Menü oben rechts gibt es den Menüpunkt „Einstellungen“

Id 455 10 Code Einfuegen Id 455 10 Code Einfuegen Id 455 10 Code Einfuegen

In den Einstellungen gibt es den Menüpunkt „Suchmaschinenoptimierung“. Hier hast Du mehrere Felder, die für die Suchmaschinenoptimierung Deiner Website von großer Bedeutung sind. Um Google Analytics mit Deiner Weebly-Website zu verknüpfen, füge den kopierten Tracking-Code in das Feld „Fußzeilen-Code“ und klicke unten rechts auf den Button „Speichern“.

Es ist nun fast soweit. Jetzt muss Deine Website nur noch „online“ gehen und Google wird anfangen, den Verkehr auf Deiner Website zu messen. Die Website wird veröffentlicht, indem Du oben rechts im Hauptmenü auf den orangefarbenen Button „Veröffentlichen“ klickst.


Achtung: Bitte beachte, dass es 24 – 48 Stunden dauern kann zwischen dem Einfügen des Tracking-Codes auf Deiner Website und der Verfügbarkeit der Statistiken in Google Analytics.


Der Autor
Soeren Theussig Soeren Theussig Soeren Theussig
Sören Theussig
Ich arbeite seit 2012 als (fester und freier) Online- und Social-Media-Redakteur und verfasse Artikel über innovative Technologien und Web-Trends.

Weiterführende Infos zu Weebly und zum Thema "Website erstellen"

Hier findest du einen Leitfaden zum Thema "Website erstellen" und einen Vergleich von Homepage-Baukästen, mit dessen Hilfe du im Handumdrehen den passenden Anbieter für dein Website-Vorhaben finden kannst. Einen umfangreichen Testbericht zu Weebly gibt es hier.


Der Autor
Avatar Avatar Avatar
Lorenz Graubner
Hallo, ich heiße Lorenz. Ich beschäftige mich seit vielen Jahren mit der Erstellung von Websites und bin der Meinung, dass der Weg zur eigenen Website nie einfacher war als heute. Wie das geht, möchte ich dir hier zeigen.
7leads GmbH hat 4,76 von 5 Sternen | 564 Bewertungen auf ProvenExpert.com