Lade dir unser kostenloses Handbuch herunter, das dir bei der Gestaltung deiner Website helfen wird.
Die eingegebene E-Mail-Adresse ist ungültig.
Vielen Dank für deine Anmeldung.
Mit der Angabe deiner E-Mail bestätigst du, dass du unsere Datenschutzerklärung gelesen und verstanden hast und einverstanden bist, Marketing-E-Mails von Squarespace zu erhalten.
Du denkst darüber nach, deine Website zu aktualisieren und einige Anpassungen am Design vorzunehmen, aber du hast das Gefühl, dass du bereits jede Option, jede Stil-Anpassung, jeden Blocktyp und jede Funktion gründlich durchdacht hast?
Squarespace aktualisiert und erweitert sein solides Angebot an Tools ständig, um neue Optionen für die Anpassung und Personalisierung deiner Website anzubieten. Dieser Artikel informiert über einige Möglichkeiten, auf die du vielleicht noch nicht gestoßen bist, die aber genau die richtigen Tools sein könnten, um das Erscheinungsbild deiner Website zu optimieren.
Diese Tools bieten auch einen großartigen Einstieg, um die weiterführenden Funktionen der Plattform zu erkunden und dich auf einen brandneuen kreativen Weg zu führen.
Seitenabschnitte ändern
Seitenabschnitte sind die verschiedenen Komponenten, die den Inhalt einer Webseite ausmachen, etwa eine Einführung oder eine Auflistung der von dir angebotenen Dienstleistungen. Lass uns einen Blick auf einige der verfügbaren Designoptionen werfen, mit denen du deine Seitenabschnitte aktualisieren kannst.
1. Abschnittsunterteilung
Abschnittsunterteilungen sorgen für besser sichtbare Umbrüche zwischen Seitenabschnitten. Du kannst entweder eine richtige Linie ziehen, wofür dir verschiedenen Stile wie eine Wellenlinie oder einer Diagonale zur Verfügung stehen, oder den Hintergrund oder das Hintergrundbild eines Abschnitts zuschneiden, um den Umbruch zu markieren.
So kannst du Inhalte visuell trennen, damit jeder Abschnitt seinen eigenen Bereich hat, ohne dass eine neue Seite erstellt werden muss. Dadurch entsteht ein dynamischeres Design. Mit Abschnittsunterteilungen lassen sich Seiten-Layouts auf verschiedene Arten unterteilen. Du kannst zum Beispiel:
einen Umbruch zwischen den Abschnitten „Über uns“ und „Unser Team“ auf einer einzigen Seite einfügen und so zwei potenzielle Seiten zu einer zusammenfassen
eine besser strukturierte einseitige Website erstellen
den Inhalt deiner Hauptseite vom Footer deiner Website trennen
Abschnittsunterteilungen hinzufügen
2. Abschnittshintergrundbilder und -videos
Füge den Seitenabschnitten einzigartige Hintergründe hinzu, um die Aufmerksamkeit von Besucher:innen direkt zu fesseln, sobald sie auf deiner Website gelandet sind. Verwende sie als Alternative zu einem Hintergrundvideo, um Abschnitte voneinander abzugrenzen, oder als visuelle Einführung in eine beliebige Seite deiner Website.
Du kannst zum Beispiel in den ersten Abschnitt der Startseite deiner Website ein Hintergrundvideo einbinden, um einen Überblick über dein Produkt, deine Dienstleistung oder dein Werk zu geben. Du kannst Abschnittshintergrundbilder auch verwenden, um bestimmten Abschnitten auf einer Seite eine individuelle Optik zu verleihen.
Profi-Tipp: Je nach Verbindungsgeschwindigkeit und Browserversion werden Hintergrundvideos möglicherweise nicht für alle Besucher:innen geladen. Es ist hilfreich, ein Ersatzbild für Mobilgeräte hinzuzufügen, das angezeigt werden kann, wenn das Video nicht funktioniert.
Creative Backgrounds für Abschnitte hinzufügen
3. Auto-Layouts
Wenn du Hilfe benötigst, um mit der Gestaltung eines Seitenabschnitts zu beginnen, oder wenn du eine Template hast, mit der du arbeiten kannst, sind Auto-Layouts ein guter Ausgangspunkt. Auto-Layouts präsentieren Inhaltsgruppen in kuratierten Designs. Die Designs beinhalten Layouts für verschiedene Zwecke, wie Spalten und Zeilen, Karussells oder Slideshows.
Sie eignen sich perfekt für die Pflege einfacher Seiten mit Inhalten, die regelmäßig aktualisiert werden müssen, wie z. B. aktuelle Produktbilder, Projekte und Teammitglieder. Diese Inhalte erscheinen in voreingestellten Layouts, aber du kannst zusätzliche Abschnitte erstellen, um das Design individuell anzupassen.
Auto-Layouts auf deiner Website verwenden
4. Creative Backgrounds
Abschnittshintergrundbilder sind zwar eine großartige Möglichkeit, die Aufmerksamkeit von Besucher:innen zu fesseln, aber du kannst einen Seitenabschnitt auch mit Creative Backgrounds noch individueller gestalten. Creative Backgrounds erlauben es dir, mithilfe von Farben, Mustern und Formen, die auf der Squarespace-Plattform generiert wurden, einen einzigartigen Look zu kreieren.
Das ist eine tolle Möglichkeit, um thematisch voneinander abgegrenzte Abschnitte auf einer einzigen Seite zu erstellen: Du kannst zum Beispiel eine Schulwebsite in Abschnitte für die einzelnen Klassenstufen unterteilen oder eine textlastige FAQ-Seite optisch verbessern.
Blöcke
Blöcke sind Designelemente, die auf Squarespace-Seitenabschnitten platziert werden können, wie ein Text-Block, ein Formular-Block oder ein Bild-Block. Im Folgenden findest du einige Arten von Blöcken und Funktionen, die du bisher vielleicht noch nicht ausprobieren konntest.
5. Scrolling-Blöcke
Scrolling-Blöcke sind ein einzigartiger Blocktyp, um Text anzuzeigen, der horizontal über die Seite scrollt. Das hat eine ähnliche Funktion wie die Anzeigetafel eines Theaters oder ein Nachrichtenticker. Du kannst die Geschwindigkeit und Form des Bildlaufs steuern.
Das ist eine großartige Möglichkeit, das Design deiner Website lebendiger zu gestalten und den Fokus der Besucher:innen auf wichtige Informationen zu lenken.
Du kannst Scrolling-Blöcke für Folgendes nutzen:
Sales, Produkteinführungen oder beliebte Produkte hervorheben
einen Ticker mit bevorstehenden Events erstellen
Kundenbewertungen und Referenzen anzeigen
Deiner Website Scrolling-Blöcke hinzufügen
6. Form-Blöcke
Mit Form-Blöcken kannst du deinen Seitenabschnitten verschiedene einfarbig gefüllte Formen hinzufügen. So ist es möglich, Seiten-Layouts zu variieren und vielfältigere Designs zu erstellen.
Du kannst Form-Blöcke auch mit anderen Arten von Blöcken überlappen, um optisch noch ansprechendere Layouts zu kreieren. Platziere zum Beispiel Formen hinter Bildern auf deiner Website, damit sie auf der Seite besonders ins Auge fallen oder sich in einer Galerie von anderen Inhalten abheben.
Hier sind noch einige weitere Verwendungsmöglichkeiten für Form-Blöcke:
eine Kundenreferenz mit einem sternförmigen Block hinterlegen, um das 5-Sterne-Erlebnis dieser Person hervorzuheben
den Seitenabschnitt, in der Geburtstagskuchen-Backservice detailliert beschrieben wird, mit Form-Blöcken in verschiedenen Farben einrahmen, um eine besonders festliche Atmosphäre zu schaffen
Mehr über die Verwendung von Form-Blöcken erfahren
7. Akkordeon-Blöcke
Akkordeon-Blöcke zeigen Text in einklappbaren, anklickbaren Abschnitten an. Mit ihnen kannst du deine Seite kurz halten und das Scrollen für deine Besucher:innen reduzieren. Akkordeon-Blöcke können helfen, textlastige Seiten wie FAQs oder Produktlisten besser zu strukturieren.
Verwende zum Beispiel einen Akkordeon-Block, um wichtige Informationen über eine Dienstleistung deines Unternehmens anzuzeigen. Hier können die Kund:innen auf klar unterteile Abschnitte klicken, um mehr zu lesen. Als Hochzeitsfotograf:in könntest du einen Akkordeonblock verwenden, um den Ablauf der Arbeit mit den Kund:innen in Akkordeonabschnitte zu unterteilen, z. B.: Kennenlernen, Auswahl eines Pakets, Verlobungsshooting, Treffen vor der Hochzeit, Hochzeitstag, nach dem großen Tag.
Deiner Website Akkordeon-Blöcke hinzufügen
8. Blöcke anheften
Du kannst jede Art von Block an einen Seitenabschnitt anheften. Dadurch bleiben sie stationär, während die Besucher:innen durch die restlichen Inhalte im gleichen Abschnitt scrollen.
So lässt sich auch sicherstellen, dass wichtige Informationen und Inhalte stets sichtbar bleiben, egal, wohin man scrollt. Du kannst beispielsweise:
den Geschäftsstandort und deine Öffnungszeiten anheften, damit sie sichtbar bleiben, während Besucher:innen durch deine Produkte scrollen
dafür sorgen, dass dein Bild zentriert im Vordergrund bleibt, während du deine Erfolge oder Dienstleistungen präsentierst
bei Bedarf einen Haftungsausschluss hervorheben
dafür sorgen, dass dein Kontaktformular oder deine Newsletter-Anmeldung immer zu sehen ist
Textformatierung
Die Gestaltung des Textes auf deiner Website, kann sich darauf auswirken, worauf die Besucher:innen der Website achten und woran sie sich erinnern. Hier sind einige Optionen und Funktionen für die Textformatierung, mit denen du das Beste aus deinen Worten herausholen kannst.
9. Text-Markierungen
Nutze die Markierfunktion für Texte, wenn du möchtest, dass ein bestimmter Text besonders ins Auge fällt. So kannst du wichtige Informationen auf einer Seite hervorheben oder bei Bedarf für mehr Übersichtlichkeit sorgen.
Für das Markieren von Texten gibt es die folgenden Stil-Optionen:
Animation: Animiere deine Markierungsform, um durch Bewegung mehr Aufmerksamkeit auf den Text zu lenken.
In den Vordergrund stellen: Damit sorgst du dafür, dass deine Markierung den Text überlappt, sodass sie einer Markierung auf Papier ähnlicher sieht.
Farbe: Ändere die Farbe deiner Markierung, damit sie auffällt oder sich besser in das Design deiner Website einfügt.
Endkappen: Passe die Form der Enden deiner Markierung so an, dass sie abgerundet oder eckig ist.
Dicke: Passe die Dicke der Markierungslinie an.
Das ist eine tolle Option, um Folgendes zu erreichen:
Kundenbewertungen hervorheben
wichtige Teile eines Blogeintrags betonen
auf bestimmte Elemente einer Info-Seite aufmerksam machen
Mehr über das Markieren von Text
10. Text skalieren
Durch Textskalierung kannst du deinen Text an die Breite eines Blocks anpassen. Es ist eine schnelle Methode, die Größe deines Texts ohne Zeilenumbrüche schnell anzupassen, unabhängig von der Browsergröße. Wir empfehlen diese Funktion für kurze Titel oder Überschriften. Außerdem eignet sie sich prima für Folgendes:
Inhalte mithilfe von Überschriften in Abschnitte unterteilen
präzise Listen erstellen
wichtige Zitate aus größeren Textteilen hervorheben
Formatierung von Bildern
Die Art und Weise, wie du deine Bilder gestaltest und formatierst, kann deiner Website mehr Charakter verleihen und sie interessanter machen.
11. Animationen und Effekte für Bild-Blöcke
Du kannst Bild-Blöcken Effekte hinzufügen, um Bildern ein individuelleres und einzigartiges Aussehen zu verleihen. Bei einigen Optionen wird eine Animation hinzugefügt, z. B. eine dezente Welle oder ein statischer Effekt, um den visuellen Stil deiner Website zu unterstreichen. Andere Effekte erscheinen nur, wenn ein:e Besucher:in durch den betreffenden Abschnitt deiner Website scrollt.
Das ist eine großartige Möglichkeit, um:
einen ansonsten statischen Bereich einer Website lebendiger zu gestalten
bei Standbildern für Bewegung zu sorgen, ohne ein Video zu verwenden
sicherzustellen, dass wichtige Bilder immer die Aufmerksamkeit auf sich ziehen
Bild-Blöcken Animationen und Effekte hinzufügen
12. Bildformen und Masken
Du kannst Bild-Blöcken auch eine Form geben, um das Aussehen der einzelnen Bilder auf einer Seite zu verändern. Zu den verfügbaren Optionen für das Formen von Bildern gehören:
die Eckenradius-Einstellungen verwenden, um die Ecken eines Bilds abzurunden
eine Form festlegen, z. B. einen Kreis oder ein Dreieck
Die eingestellte Form legt sich wie eine Maske über das Bild, wodurch es eine neue Form erhält. Mach deine Fotogalerie durch eine Reihe interessanter Formen zu etwas ganz Besonderem oder präsentiere dein Produktangebot mit Bildern, die alles andere als Standard sind, um garantiert Aufmerksamkeit zu erregen.