So richtest Du ein Parallax Template bei Weebly ein

Weebly Header Weebly Header Weebly Header

„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.