Diese 2-Minuten-Hacks für Squarespace-Websites müsst ihr kennen!
Manchmal braucht es gar nicht viel, um einer Website ein i-Tüpfelchen zu verpassen. Wir haben unsere liebsten Squarespace-Hacks für euch rausgesucht, mit denen ihr in maximal 2 Minuten einen kleinen „Wow-Effekt“ erzeugt. Viel Spaß beim Ausprobieren!
Individuelle Squarespace Domain erstellen
Wir starten mit der ersten Sache, die wir zum Start eines neuen Squarespace-Projekts machen: die Squarespace-Domain anpassen. Mit einem Squarespace-Abo bekommt ihr automatisch eine Domain zugeordnet, die am Anfang so ähnlich aussieht:
chipmunk-olive-234v4.squarespace.com
Wusstet ihr, dass ihr den ersten Teil der Domain (eingekreist) easy anpassen könnt? So erhaltet ihr eine zu eurer Marke passende URL, ohne extra bezahlen zu müssen. Wenn ihr schnell online gehen und euch die Kosten für eine komplett individuelle Domain ohne Squarespace-Tag sparen wollt, nice to know.
Und so geht’s:
Wir starten im Squarespace Backend euer Website.
Navigiert über das Zahnrad-Icon unten links zu den Einstellungen.
Wählt im Tab „Domains und E-Mail“ die Schaltfläche „Domains“ aus.
Klickt unter „Integrierte Domain“ auf eure Squarespace-Domain.
Markiert alles im Feld „Website-ID“ und ersetzt es z. B. mit dem Namen eurer Marke.
Klickt oben rechts auf den Button „Speichern“.
Schon wird aus einer kryptischen Squarespace-Domain die erste individuelle Domain für eure Marke.
Favicon für Light- und Dark-Mode einrichten
Weiter geht es tatsächlich mit der zweiten Sache, die wir bei neuen Websites angehen: das Favicon. Falls ihr euch an dieser Stelle fragt, was genau das ist – schaut euch mal den Tab dieses Blogbeitrags im Browser genauer an. Oben links seht ihr eine kleine abgespeckte Variante unseres Logos. Das ist unser Favicon und immer zu sehen, wenn ihr unsere Website öffnet.
Super praktisch, wenn man mehrere Tabs gleichzeitig offen hat, versucht eine bestimmte Seite wiederzufinden und das Branding noch im Kopf hat. Das Favicon sollte daher zum festen Bestandteil eurer Marke gehören und stellt eine vereinfachte Variante eures Logos dar – für die Nutzung auf sehr kleinen oder engen Flächen.
Lesetipp: In unserem Blog erfahrt ihr, was ebenfalls nicht bei eurem Corporate Design fehlen darf.
Euer Favicon bzw. Logo ist von Haus aus eher dunkel und im Dark-Mode schlecht erkennbar? Kein Problem! Erstellt neben der normalen Version eures Favicons eine weitere für dunkle Hintergründe. Diese könnt ihr als Dark-Mode-Favicon hinterlegen.
Damit euer Favicon in den Tabs eurer Squarespace-Website erscheint, geht ihr wie folgt vor:
Wir starten im Squarespace Backend euer Website.
Navigiert über das Zahnrad-Icon unten links zu den Einstellungen.
Wählt im Tab „Website“ die Schaltfläche „Favicon“ aus.
Fügt im “Default”-Bereich euer Favicon für den Light-Mode ein.
Fügt im “Dark Mode”-Bereich das Favicon für den Dark-Mode ein.
Klickt oben rechts auf den Button „Speichern“.
Jetzt ist eure Marke weder im Tab-Wirrwarr noch im Dunkeln zu übersehen.
Header und Footer ausblenden mit nur einem Klick
Eine Landingpage soll Besucher:innen so lang wie möglich halten und ohne Ablenkung zum Ziel führen. Blöd also, wenn die Aufmerksamkeit eurer Nutzer:innen direkt zu eurem umfangreichen Mega-Menü oder eurem auffälligen Call-To-Action in der Navi fliegt, oder?
Da blenden wir das Menü doch lieber aus, damit eure gut durchdachte Landingpage die Aufmerksamkeit bekommt, die sie verdient. Bei Squarespace geht das ganz einfach:
Geht in die Seiteneinstellungen eurer Landingpage.
Klickt auf “Navigation”.
Deaktiviert den Header und / oder Footer eurer Landingpage mit dem entsprechenden Schalter.
Fügt einzelne Links, die ihr im Header oder Footer eurer Landingpage benötigt, manuell und dezent ein (z. B. Impressum und Datenschutz).
Easy!
Lesetipp: Manchmal tut es auch ein Onepager. In unserem Beitrag erfahrt ihr, ob diese Form der Website zu euch passt und was ein Onepager ist.
Fancy Übergänge für eure Abschnitte gestalten
Gerade Kanten als Übergang sind euch zu langweilig und Wellen, Zacken oder Bögen passen viel besser zu eurem Branding? Dann bekommt ihr Wellen, Zacken oder Bögen – ganz ohne komplizierten Code. Dafür sorgt die „Teiler“-Funktion für Abschnitte von Squarespace. Ihr könnt entweder die Grundformen nach euren Vorstellungen anpassen oder so lange den „Zufall“-Knopf drücken, bis ihr etwas Passendes gefunden habt. Gehen wir noch einmal Schritt für Schritt durch:
Geht in den Editor eurer Seite.
Wählt „Abschnitt bearbeiten“ im entsprechenden Abschnitt aus.
Aktiviert im „Design“-Tab die Option für „Teiler“ ganz unten.
Wählt und bearbeitet die „Form“ des Teilers.
Wählt und bearbeitet die „Linie“ eures Teilers.
Klickt oben links auf „Speichern“, wenn ihr mit eurer Kreation zufrieden seid.
Hier sehr ihr nur einen kleinen Ausschnitt der Möglichkeiten, die euch die "Teiler"-Funktion von Squarespace bietet.
Buttons mit unterschiedlichen Ecken gestalten
Nicht nur eure Abschnittsteiler können fancy sein – mit den Buttons ziehen wir jetzt nach. Vielleicht ist euch schon aufgefallen, dass sich unsere Buttons an das Logo anpassen und alle Ecken abgerundet sind, bis auf eine. Auch das ist bei Squarespace ganz ohne Code, allein mit den „Stil“-Einstellungen möglich. Hier findet ihr den Abschnitt „Buttons“, in dem ihr das Aussehen eures Primären-, Tertiären- und Sekundären-Buttons festlegt. Ihr habt die Wahl zwischen verschiedenen vorgefertigten „Button-Paketen“ oder ihr geht jeden Button-Typ einzeln durch und gebt ihm eure individuelle Note.
Nehmen wir den Primären-Button als Beispiel – die Anpassung aller Button-Typen funktioniert auf die gleiche Art:
Text: Wie der Name sagt, legt ihr an dieser Stelle fest, wie der Button-Text aussehen soll. Von der Schriftart bis hin zu Gewicht und Größe ist alles dabei.
Form: Das ist der ausschlaggebende Bereich für verschiedene Ecken und die Entscheidung zwischen Buttons mit oder ohne „Füllung“. Auch hier könnt ihr aus Grundformen wählen oder unter „Benutzerdefinierte Ecken“ den Radius jeder Ecke einzeln festlegen.
Kontur: Wenn eine Linie euren Button umarmen soll, seid ihr hier richtig.
Padding: Ihr habt die Wahl zwischen einem kleinen (S), mittleren (M) und großen (L) Abstand zwischen Text und Außenkante. Wer es noch individueller mag, nutzt die Einstellungen, die sich hinter den drei Punkten verstecken.
Wir empfehlen mit dem Design des primären Buttons anzufangen, das Design „Auf alle Button-Arten anzuwenden“ und danach erst Sekundären- und Tertiären-Button leicht abzuwandeln. So beruhen alle Button-Arten auf der gleichen Grundlage und die Konsistenz eures Webdesigns ist gewahrt.
Lesetipp: So nutzt ihr eure Brand-Font DSGVO-konform auf eurer Website.
Text-Blöcke mit Hintergrund erstellen
Manchmal braucht es ein bisschen Abwechslung – z. B. durch einen farbigen Hintergrund hinter Texten. Auf eurer Squarespace-Website gibt es dafür zwei Möglichkeiten:
Ihr erstellt einen Text-Block und legt einen Form-Block dahinter. Aber Achtung, hier müsst ihr in der mobilen Version eurer Website gründlicher nacharbeiten und optimieren.
Die zweite Möglichkeit ist die „Hintergrundstil“-Funktion des Text-Blocks. Mit einem Klick auf das Farbeimer-Icon gelangt ihr zum Bearbeitungsbereich. Wählt die Hintergrundfarbe, eine Konturlinie, den Eckenradius und das Padding (der Abstand zwischen Text und Außenkante) aus. Unter „Mischmodus“ und „Unschärfe“ stellt ihr ein, wie sich das Aussehen eures Text-Hintergrunds zu den Elementen dahinter verhalten soll. Probiert‘s mal aus!
Psssst: Die Hintergrund-Funktion nutzen wir übrigens auch für unsere Lesetipps im Blog. Einfach zwischen einen Text-Block ohne Hintergrund und einen mit Hintergrund einen Abstandshalter packen und schon habt ihr eine farbliche Trennung.
Suchfunktion für den Blog einrichten
Ihr habt einen Blog? Dann darf dieser Squarespace-Hack auf keinen Fall fehlen! So fügt ihr eurer Blogübersicht (oder einer Seite eurer Wahl) eine Suchfunktion für euren Blog hinzu, ohne ein externes Plugin zu benötigen:
Öffnet den Editor eurer Seite.
Klickt auf „Block hinzufügen“.
Wählt den „Suche“-Block ganz unten aus.
Klickt auf das Stift-Icon zum „Suche“-Block.
Wählt „Eine bestimmte Seite durchsuchen“ aus.
Wählt euren Blog aus.
Jetzt müsst ihr nur noch Größe und Platzierung optimieren und schon habt ihr eine Suchfunktion auf eurer Website, die nur euren Blog durchsucht.
Speichern nicht vergessen!
Formulare auf euer Branding anpassen
Mit dem nächsten Hack begeben wir uns wieder in die „Stil“-Einstellungen eurer Squarespace-Website. Im Abschnitt „Formulare“ eröffnen sich uns die vielfältigen Möglichkeiten der Formular-Gestaltung. Zugegebenermaßen ist das eine unserer Lieblingsfunktionen. Mit individuellen Formularen wird jede Kontaktaufnahme einfach zu etwas Besonderem. Schauen wir uns an, was wir hier alles anstellen können:
Formular-Pakete: Analog zu den Buttons liefert Squarespace bereits ein paar vorgefertigte Formular-Designs, aus denen wir wählen können.
Formularfelder: Hier wird das Aussehen der Felder zum Ausfüllen angepasst. Legt Form, Füllung, Rand und Padding fest.
Effekte: Jetzt wird es dynamisch – entscheidet euch, wie eure Felder beim Hovern über das Feld bzw. bei der Auswahl des Feldes aussehen sollen. Außerdem könnt ihr aus 5 verschiedenen Effekten für euren Senden-Button wählen.
Optionen zur Auswahl: Dahinter versteckt sich das Aussehen für Kontrollkästchen, Radiobuttons und Umfrage-Feldern.
Zum Schluss legt ihr fest, welche Schriftarten und Farben ihr in eurem Formular nutzen wollt und wie groß die Abstände zwischen unterschiedlichen Bereichen sind.
Ganz schön viel Auswahl. Für das Finetuning können wir durchaus mehr als 2 Minuten einplanen. Wenn ihr allerdings die Squarespace-Vorlagen nutzt, habt ihr schnell ein Design für eure Formulare, mit denen ihr euch von anderen Websites abhebt.
