Design-Features auf der neuen Squarespace-Startseite, die eigentlich nicht Squarespace-eigen sind

Squarespace ist eine großartige Plattform für den Durchschnittsnutzer, um qualitativ hochwertige, professionelle Websites zu erstellen, und erfordert dabei nur geringe Kenntnisse in Design oder Code. Mit den integrierten Designelementen und zahlreichen Anpassungsoptionen kann jeder eine beeindruckende Seite für sein Unternehmen, einen Freund, einen Kunden usw. erstellen. Leider erfordern einige der auf der neuen Squarespace-Homepage vorgestellten Funktionen sehr viel mehr UX-Erfahrung und angepassten Code als das, was tatsächlich auf Basisniveau angeboten wird. Werfen wir einen Blick auf einige dieser schönen, aber letztlich schwer zu realisierenden Designelemente, die nicht wirklich in Squarespace enthalten sind.

Inhaltsverzeichnis im Detail Ausblenden

Bewegungselemente

Wenn Sie die Squarespace-Startseite öffnen, sehen Sie als erstes die Grafik eines Laptops, der die Animation einer scrollenden Squarespace-Musterwebsite abspielt. Dies ist keine Idee, die Sie nur mit nativen Squarespace-Anpassungen replizieren könnten. Es ist zwar eine sehr schöne Funktion, aber für den durchschnittlichen Benutzer mit begrenzter Design- und Code-Erfahrung wäre es ziemlich kompliziert, sie zu kopieren.

Eine Alternative wäre die Verwendung des eingebetteten Codeblocks, um ein Video anstelle einer Animation hinzuzufügen. Damit würde ein Video angezeigt, das automatisch abgespielt wird, wenn jemand Ihre Website besucht. Dies ist zwar nicht so "minimalistisch" wie die Videoanzeige auf der Squarespace-Startseite, aber Sie haben einige kreative Optionen zur Verfügung, wenn Ihnen die Anzeige eines Videos oder einer Animation zusagt.

Klebriger Text

Wenn Sie weiter durch die Homepage scrollen, sehen Sie großen Text, der am Hintergrund haften bleibt, während das nächste Bildsegment nach oben scrollt. Der Text verschwindet schließlich und taucht nicht wieder auf, wenn Sie über dieses Segment hinaus gescrollt haben. Sticky Text ermöglicht es Ihnen, den Text oben auf Ihrer Website zu halten, egal wie weit nach unten gescrollt wird, und obwohl es eine übliche Funktion für moderne Website-Stile ist, erfordert es benutzerdefinierten Code, der in eine Squarespace-Website eingefügt wird.

Mit dem Mauszeiger über ein Wort fahren, um ein Bild anzuzeigen

Im Beispiel "Vorlagen für jeden Zweck" sehen Sie eine Liste von Texten, die Sie mit dem Mauszeiger verschieben können, um Bilder auf der rechten Seite des Bildschirms anzuzeigen. Squarespace bietet von Haus aus die Möglichkeit, mit dem Mauszeiger über den Text zu fahren, um ein Bild einzublenden, allerdings füllt das Bild den gesamten hinteren Teil des Bildschirms aus. Auch hier ist ein benutzerdefinierter Code erforderlich, um die Art der Platzierung auf der Website widerzuspiegeln.

Keine Änderung der Textausrichtung 

Obwohl Sie Abstandshalter hinzufügen können, um die Ausrichtung/Platzierung von Textfeldern anzupassen, verfügt die Squarespace-Homepage über einen Code, der sicherstellt, dass der Text neben den vorgestellten Bildern auf elegante und saubere Weise an seinem Platz bleibt.

Eine Möglichkeit, dies zu umgehen, ist die Verwendung des HTML-Codes. Gehen Sie im Squarespace-Editor auf die Registerkarte Code und wählen Sie "HTML". Geben Sie dann den Code für die Ausrichtung ein, die Sie verwenden möchten, und klicken Sie auf "Speichern". Sie können auch die Schriftart, Größe und Farbe Ihres Textes anpassen. 

Text Folie

Eines der schönsten Designelemente der Homepage ist die Funktion des gleitenden Textes, bei der sich zwei Textzeilen beim Herunterscrollen aufeinander zubewegen und an Ort und Stelle verbleiben, sobald die gesamte Anzeige erreicht ist. Es gibt keine einfache Möglichkeit, diese Art von Textschieber in Ihre Website einzubauen, ohne dass Sie eine eigene Codierung vornehmen müssen. Möglicherweise könnte man einen iframe verwenden, aber das ist für jemanden ohne viel Designerfahrung etwas zu kompliziert.

Hinzufügen mehrerer Frames auf einer Seite 

Das Hinzufügen mehrerer Bilder zu einem Bildblock ist keine native Funktion. Auf der Homepage wurde dies als zwei Bilder angezeigt, die an ihrem Platz blieben, aber beim Scrollen zum anderen übergingen. Sie können eine eingeschränktere Version dieser Funktion ausprobieren, indem Sie den Diashow-Block verwenden. Gehen Sie dazu im Squarespace-Editor auf die Registerkarte Blöcke und wählen Sie "Diashow". Geben Sie dann die URL der Website ein, die Sie einbetten möchten, und klicken Sie auf "Hinzufügen". 

Sollten Sie bei Squarespace bleiben?

Auch wenn es ein wenig irreführend ist, Designs zu zeigen, die mehr Design-Erfahrung erfordern, als der beworbene Benutzer im Allgemeinen hat, sind diese Beispiele doch ein Beweis dafür, was man schaffen kann und welche Art von Schönheit mit der Squarespace-Plattform möglich ist. Benutzerdefinierte Codes können eine größere Herausforderung darstellen, aber sie sind es wert, erforscht zu werden, wie die eleganten Beispiele zeigen, die wir gerade durchgegangen sind. Auch wenn diese Prozesse kompliziert zu sein scheinen, sind sie manchmal benutzerfreundlicher als man denkt.

Wenn Sie mehr Hilfe benötigen, um fortgeschrittene Squarespace-Techniken zu verstehen, oder wenn Sie einfach nur als Anfänger anfangen wollen, können Sie in unserem kostenlose Anleitungen Tricks und Tipps, die Sie bei der Entwicklung Ihrer Fähigkeiten voranbringen können.

Und für mehr Design- und SEO-Hilfe besuchen Sie unseren Kanal hier.