4 Beliebte Beispiele für benutzerdefinierten Code für Squarespace

Squarespace ist eine zuverlässige Plattform mit Anpassungsoptionen, die auf unterschiedliche stilistische und professionelle Bedürfnisse zugeschnitten sind. Die erstklassigen Funktionen lassen sich an eine Vielzahl von Anwendungsfällen anpassen, was es für viele Unternehmer:innen und Kreative wie dich attraktiv macht. Aber wenn du auf Sonderfälle stößt, für die diese integrierten Funktionen keine Lösung bieten, ist es hilfreich, ein bisschen Codemagie einzusetzen.

Ich heiße Rache und ich habe Squarestylist gegründet, eine Bibliothek mit kreativen Ressourcen, die es dir ermöglicht, Design und Code in Websites zu integrieren, die für Bewunderung und Staunen sorgen werden. Im Folgenden erkläre ich, wie man vier der gefragtesten Webseitenanpassungen mit einem kleinen bisschen Code bewerkstelligen kann. 

Bevor wir loslegen, lies am besten unseren vorherigen Blogeintrag darüber, wie du deiner Squarespace-Website benutzerdefinierten Code hinzufügst. Das wird dir helfen, beim Hinzufügen dieses Codes die Best Practices im Hinterkopf zu behalten – Schnipsel für Schnipsel. 

Hinweis: Dieser Inhalt wurde von einem Mitglied des Squarespace Circle erstellt und entspricht keiner offiziellen Empfehlung von Squarespace. Da sich das Squarespace-Produkt ständig weiterentwickelt, kann sich der Squarespace-Code jederzeit ändern und Squarespace kann nicht garantieren, dass die folgenden Codebeispiele dauerhaft funktionieren. Die Kundenserviceteams sind nicht in der Lage, Probleme im Zusammenhang mit benutzerdefiniertem Code zu lösen, der zu Squarespace-Websites hinzugefügt wurde. Ein Teil des folgenden Codes wird durch „Code einfügen“ hinzugefügt, was nur in bestimmten Squarespace-Abos verfügbar ist.

1. Einen „Nach oben scrollen“-Button hinzufügen

Die „Nach oben scrollen“-Funktion ist eine praktische Ergänzung für deine Squarespace-Website, besonders für längere Seiten. Durch sie gelangen Benutzer:innen einfach zurück zum Seitenanfang, um das Menü oder die Navigationselemente zu nutzen. 

Befolge diese Schritte, um einen barrierefreien „Nach oben scrollen-Button im Markendesign hinzuzufügen. 

1. Scrolle zum Ende deiner Seite und bearbeite deinen Website-Footer.

2. Füge ein Bild zu einem beliebigen Teil deines Footers hinzu. Dieses Bild wird dein „Nach oben scrollen“-Button. Du kannst also passend zu deiner Markenführung ein beliebiges Bild oder eine beliebige Grafik auswählen. Damit die Funktion klar ist, solltest du einen Pfeil oder den Text „Nach oben scrollen“ hinzufügen.

3. Lege als Alternativtext „Nach oben scrollen“ fest, um für Barrierefreiheit zu sorgen.

4. Lege als Link „#top“ fest und stelle sicher, dass der Schalter „Link in einem neuen Tab öffnen“ aus ist.

5. Um die Funktion hinzuzufügen, bei der der Button nur beim Scrollen der Seite angezeigt wird, füge das erste der folgenden Code-Schnipsel unter Seiten > Website-Tools > Code-Einfügen > Footer hinzu.

6. Um deinen „Nach oben scrollen“-Button zu gestalten, kannst du etwas CSS-Code unter Seite > Website-Tools > Benutzerdefinierte CSS hinzufügen.

Code: Schritt 5

<script>

document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});

</script>

Code: Schritt 6

html.fe-block.scroll-to-top a@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-topbody.is-scrolled .fe-block.scroll-to-top abody:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-topbody:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections
.fe-block.scroll-to-top {
right:2vw;
bottom:2vw;
width:100px;
height:100px;
}

2. Farbänderung der Header-Navigation auf nur einer Seite

Das Anpassen der Farbe der Header-Navigation für eine bestimmte Seite ist ein häufiger Wunsch. Dies ist oft bei Seiten erforderlich, die einen einzigartigen Hintergrund oder ein einzigartiges Farbschema haben. Bevor du einen benutzerdefinierten Code anwendest, wollen wir uns die integrierten Funktionen von Squarespace ansehen, die speziell auf diese Anforderung zugeschnitten sind.

1. Klicke auf Website-Header bearbeiten und gehe zu deinem Design-Tab.

2. Unter Farben findest du Stil-Optionen, darunter auch „Adaptiv“.

3. Mit der Option „Adaptiv“ passt sich dein Header an das Farbschema deines ersten Abschnitts an und sorgt so für einen guten Kontrast.

Du kannst auch die Optionen „Einfarbig“ oder „Verlauf“ ausprobieren, um deinen Header auf allen Seiten einheitlich zu gestalten.

Wenn diese integrierten Optionen nicht deinen Bedürfnissen entsprechen, kannst du auf benutzerdefinierten Code zurückgreifen, um die Farben deines Headers und seiner Elemente noch spezifischer festlegen zu können:

1. Rufe die Seite auf, bei der du die Farbe des Headers ändern möchtest.

2. Klicke auf das Einstellungen-Symbol neben dem Seitennamen.

3. Auf dem Tab „Erweitert“ findest du den Bereich zum Einfügen des seitenspezifischen Codes.

4. Füge den folgenden Code ein und achte darauf, dass du die öffnenden und schließenden Style-Tags mit einfügst.

Code

<style>
:root {
--headerbg: #F4BAB5;
--headerText:#12294C;
}
/
*Change Header Background Color */
@media (min-width: 800px) and (hover: hover), (min-width: 1025px) {
.header-border {
    background: var(--headerbg);
}
}
/*Change Color  Header Nav Links on Desktop */
.header-display-desktop nav.header-nav-list a {
    color: var(--headerText) !important;
}
/*Change Color Header Nav Elements on desktop */
.header-display-desktop a.user-accounts-text-link.header-nav-item {
color: var(--headerText) !important;
}
 .header-display-desktop .header-title-text a {
color: var(--headerText) !important;
}
 .header-display-desktop .header-actions-action.header-actions-action--social svg {
fill: var(--headerText) !important;
}
 .header-display-desktop .Cart-inner path {
fill: var(--headerText) !important;
stroke: var(--headerText) !important;
}
 .header-display-desktop span.sqs-cart-quantity {
color: var(--headerText) !important;
}
</style>

Dieser Code verwendet CSS-Variablen für eine einfache Farbanpassung. Du kannst die Farbcodes sowohl für Hintergrund- als auch für Textfarben ändern. 

Achte beim Zuweisen der Farben immer auf Barrierefreiheit, indem du für einen ausreichenden Kontrast zwischen der Farbe der Header-Elemente und der Hintergrundfarbe des Headers sorgst. Der obige Code wurde sorgfältig so erstellt, dass er nur die Desktop-Ansicht zu beeinflusst, was wahrscheinlich dein beabsichtigtes Ziel ist.

3. Website-Titel auf der Startseite ausblenden

Manchmal möchtest du vielleicht deinen Header-Titel oder dein Logo auf einer bestimmten Seite verbergen, in der Regel auf der Startseite. Das ist nützlich, wenn du im ersten Abschnitt ein markantes Logo hast und Wiederholungen vermeiden möchtest.

So verbirgst du den Website-Titel auf einer bestimmten Seite:

1. Wähle die Seite aus, auf der du den Titel verbergen möchtest.

2. Klicke auf das Einstellungen-Symbol neben dem Seitennamen.

3. Gehe zum Tab „Erweitert“.

4. Füge den folgenden Code im Bereich Seite Header Code einfügen hinzu.

Code

<style>
.header-display-desktop .header-title {
    display: none;
}
</style>

4. Ein benutzerdefiniertes Cursorbild verwenden

Das Hinzufügen eines benutzerdefinierten Cursors kann deiner Website etwas Einzigartiges verleihen. Um ein gutes Nutzererlebnis zu gewährleisten, musst du ihn jedoch mit Sorgfalt einbinden. So fügst du deiner Squarespace-Website einen benutzerdefinierten Cursor zu hinzu.

1. Bereite dein Cursorbild vor.

• Es sollte kleiner als 128 Pixeln in der Breite und Höhe sein (30 bis 50 Pixel sind in der Regel sinnvoll).

• Verwende wenn möglich eine SVG-Datei, um eine verpixelte Darstellung zu vermeiden. Ein kleines PNG ist auch in Ordnung.

2. Lade dein Cursorbild hoch.

• Erstelle eine temporäre Seite im Abschnitt Nicht verlinkt auf deiner Website.

• Füge einen Text-Block hinzu und füge dein Cursorbild als verknüpfte Datei ein.

• Speichere und klicke auf den Link, um den Dateipfad zu erhalten.

3. Füge das benutzerdefinierte CSS hinzu.

• Gehe zum „Benutzerdefiniertes CSS“-Menü.

• Füge den im Folgenden bereitgestellten Code ein und setze deinen Dateipfad zwischen die Anführungszeichen.

Code

body:not(.sqs-edit-mode-active) {
  cursor:url(" "), auto;
}

Dieser Code ändert standardmäßig nur den Standard-Cursor. Bei Links und Buttons wechselt er zum üblichen Zeiger-Cursor. Wenn du auch für den Mouseover-Status einen benutzerdefinierten Cursor möchtest, verwende den folgenden Code und lade ein separates Bild für den Mouseover-Status hoch.

Code

body:not(.sqs-edit-mode-active) {
  a:hover, button:hover {
    cursor:url(""), pointer; 
  }
}

Benutzerdefinierte Cursor können deiner Website eine einzigartige Note verleihen. Setze sie jedoch mit Bedacht ein, um das vertraute Navigationserlebnis deiner Benutzer:innen nicht zu stören.

Mehr als nur kopieren und einfügen

Es ist zwar praktisch, diese Code-Schnipsel einfach zu kopieren und einzufügen, aber ich empfehle immer, dir klar zu machen, wie sie funktionieren. Dieses Wissen ist entscheidend für die erfolgreiche Fehlerbehebung und um individuelle Änderungen an deiner Squarespace-Website vorzunehmen.

Wenn es dich interessiert, sieh dir meinen kostenlosen CSS-Grundkurs für Squarespace-Nutzer:innen an. Er behandelt CSS-Grundlagen, gängige Anwendungsfälle für Squarespace-Code und wo du Hilfe findest. 

Ich hoffe, diese Ressource hat dich dazu inspiriert, an deiner Website durchdachte Anpassungen vorzunehmen. Viel Spaß beim Programmieren!