Let’s brand dein neues Website-Template – was wichtig ist und wo du es in Squarespace findest

Foto von Rassilya Zakiyeva auf Unsplash ‍

Vielleicht hast du dir bereits ein Website-Template gekauft oder du denkst darüber nach, es zu tun. Als Brand- und Webdesignerin ist es mir ein Anliegen, dir zu zeigen, wie du dein Squarespace Website-Template wirklich zu deinem eigenen Zuhause machst. Website-Templates sind oft durchdacht und wunderschön gestaltet, aber ihnen fehlt noch der entscheidende Funke: deine einzigartige Handschrift. Es braucht dein Brand Design, das dich authentisch zeigt, deine Idealkundin mühelos anzieht und deine Werte sowie deinen Kern klar kommuniziert. Das ist die Konsequenz, die du bereits auf deinen anderen Kanälen lebst.

Was du in diesem Artikel zu lesen bekommst, ist eine einfache, feine Anleitung dein Website-Template zu ändern, damit es nach deinem Markendesign aussieht. Dafür brauchst du gar nicht das Layout zu verändern. Es geht grob um die Wahl der Farben, Schriften, Gestaltung der Buttons und selbstverständlich euer Logo einzusetzen. Natürlich auch deine Bilder und Texte einzufügen, in dem Schritt kann es sein, dass du das Layout vielleicht leicht anpassen musst. Aber auch das ist möglich und leicht machbar.

Vorbereitung ist alles, also hol dir deine Brand Guidelines, das ist meist ein PDF in dem die Anwendung deines Logos, deine Farben und Schriften festgelegt sind. Du kannst dir auch eins selbst erstellen, damit dein Auftritt einheitlich und konsequent ist. Dafür kannst du dir auch etwas in Canva anlegen. Die Farben benötigst du in Hex-Codes, das fängt mit einer Raute an und danach folgen sechs Zahlen oder Buchstaben, also so zum Beispiel #50650A. Wenn du also Schriften für die Überschrift und Absatztext und alle Farben in Hex-Code bereit hast, geht es weiter.

In Squarespace kannst du fünf Farben als Farbpalette unter Website-Stile festlegen, aktuell findest du es unter dem Pinsel-Symbol oben rechts. Wähle den Bereich Farben aus und bearbeite die Farbpalette. Für mich ist es die einfachste Lösung, wenn man die Farbpalette von links hell nach rechts ganz dunkel anlegt. Überlege dir welche deiner Markenfarben plus ein Weißton, ein sehr heller Ton für Abschnitte und ein Schwarz- oder Grauton du möchtest. Falls du diese nicht bereits in deinem Brand Guidelines definiert hast. Und dann lege sie eine nach der anderen in deiner Farbpalette an.

Unter Website-Stile kannst du auch die Schriften wählen für deine Website. Wähle oder schau in deine Brand Guidelines, welche Schrift du für die Überschriften und welche für die Absatzschriften möchtest. Es kann auch beides die gleiche sein. Überschriften können etwas auffälliger, markanter sein. Die Absatzschrift sollte gut mit den Überschriften harmonieren und gut lesbar sein. Stelle gerne auch die verschiedenen Überschriften und Absätze, Größen und Schnitt (regular, bold, kursiv usw.) ein.

Konsistenz erhältst du auch noch zusätzlich durch das markenkonforme Gestalten deiner Buttons. Das Template ist wahrscheinlich in sich stimmig und schön gestaltet. Sobald du anfängst etwas zu ändern, braucht es etwas Zeit und Geduld bis alles wieder harmonisch wirkt. Hier kannst du bewusst wählen, welche Form zu deinem Brand Design passt und eine Akzentfarbe aus deiner Farbpalette wählen. Guck welche Form dein Logo hat, deine Werte, Zielgruppe und triff dann die Wahl. Es macht so viel aus, die vielen Elemente auf deine Marke anzupassen.

Bilder sind ein weiteres wichtiges Puzzleteil. Die Bilder des Templates solltest du alle austauschen. Und durch deine eigenen Fotos, entweder hast du einige professionelle Portraits von dir machen lassen oder suchst dir eine einfache, gute Lösung. Schön rund macht es, wenn alle Bilder eine gemeinsame Bildsprache passend zu deiner Marke sprechen. Wirken sie passend zueinander, wie aus einem Guss und geben sie deine Marke wieder? Super!  

Die Seiten einer Website bestehen aus mehreren Abschnitten, die oft durch unterschiedliche Hintergrundfarben oder Linien voneinander getrennt werden. Hier kannst du bei dem Stil und der Farbe es auf dein Brand Design anpassen. In Squarespace hast du die Auswahl zwischen verschiedenen Teilern, die du beim Bearbeiten des Abschnitts einstellen kannst.

Ein kleiner Effizienz-Tipp von mir: speichere deine Abschnitte. Das geht in Squarespace über das Herz-Symbol, wenn du in dem Abschnitt Bearbeitungsmodus bist. Du kannst es für diese Website oder für dein Konto speichern. Letzteres bedeutet, falls du mehrere Websites hast, kannst du von einer anderen Website aus auch auf die gespeicherten Abschnitte zugreifen. Der Vorteil des Speicherns von Abschnitten: garantierte Konsistenz in der Gestaltung und es dient auch als eine Art Sicherheitskopie. Bevor du in einem Anschnitt etwas experimentieren willst, speichere es ab, dann hast du es als Sicherheit. Du kannst gespeicherte Abschnitte wiederverwenden, in dem du auf das Plus-Symbol gehst und einen neuen Abschnitt erstellen lässt. In dem neuen Fenster, gehst du dann auf „Gespeicherte Abschnitte“. Und voila stehen dann dort alle gespeicherten für dich bereit.

Der obere Teil der Website, der Header und die Navigation sind weitere Bereiche die du branden kannst, damit es stimmig ist als Ganzes. Du kannst hier aus unterschiedlichen Anordnungen wählen, ob sie fest an einem Ort bleibt, verschwindet, der Hintergrund sich anpasst und mehr. Fahre dafür über diesen Bereich und wähle „Bearbeiten Header“ aus, wenn es erscheint. Ich fühle mich hierfür gut ein in die Zielgruppe und die gewünschte Erfahrung. Hier kannst du dein Logo einfügen und die Größe einstellen, einfach den „Seitentitel & Logo“ auswählen und auf das Stiftsymbol gehen. Über das kleine Fenster „Design bearbeiten“ und dann „Design“ kannst du noch mehr einstellen. Die mobile Navigation deiner Website sieht natürlich anders aus, auch hier kannst du sie für deine Brand Design passend machen, über das Handy-Symbol oben rechts. Dann im Header die Änderungen vornehmen.

Der Footer: ein Megatool, um alles Mögliche unterzubringen. Nutze ihn gut für dich! Du kannst ihn bearbeiten, in dem du drüberfährst und bearbeiten wählst, ähnlich wie beim Header. Schau dir einige gute Footer auf anderen Websites an. Ich rate dir vorher eine Liste anzulegen, was du alles unterbringen möchtest. Brande den Footer mit deiner Farbe. Das ist der perfekte Ort, um Social-Media-Links, Menu, Impressum, Datenschutz, Logo in Weiß, Newsletter, Kontakt und mehr unterzubringen.

Als vorletztes kommen noch Formular und Newsletter-Anmeldung: du kannst Farben, Flächen, Linien, Abstände und mehr anpassen. Wähle dafür das Formular/Newsletter-Block aus und gehe dann links auf das „Stift-Symbol“. Dort kannst du unter Design Änderungen vornehmen. Unter Inhalt kannst du Elemente entfernen, hinzufügen oder den Text der Bestätigungsnachricht umschreiben. Die Inhalte und Texte kannst du passend zu deinem Tone-of-voice und was du brauchst, ändern. Über Website-Stile und Schriften unter dem Pinsel-Symbol kannst du auch an der Schrift noch etwas schrauben. Dort findest du sie, wenn du die Lupe zum Suchen nach Formular oder Newsletter benutzt.

Die SEO-Einstellungen sind nicht direkt Design, aber Teil deines Brandings. Du kannst dort unter SEO-Titel und Meta-Beschreibungen für konsistente Texte in Suchmaschinen sorgen.

Zusammenfassend ist es wichtig konsistent aufzutreten in Farbe, Schriften, Texten, Grafiken und Bilder. Sowohl durch Abschnitte Speichern effizient und sicher zu arbeiten.

Du kannst mich gerne auch buchen, falls ich diese Umsetzung für dich übernehmen kann. Deine Zeit brauchst du vielleicht doch eher für dein Business und deine Kunden. Melde dich gerne mit einer kurzen E-Mail!

Alles Liebe

Alejandra

Ich liebe es, Websites mit Bewusstsein und Wertschätzung zu gestalten – wie Dankbarkeit meinen Blick auf mein Business und Leben geprägt hat, kannst du hier lesen.