So fügst du deiner Website benutzerdefinierten Code hinzu

Mit seinen abstrakten Konzepten und Regeln kann sich Programmieren einschüchternd anfühlen. Websites von Grund auf neu zu erstellen und dabei Fehler zu debuggen, überfordert viele Unternehmer:innen – das ist wahrscheinlich einer der Gründe, weshalb du deine Website auf Squarespace erstellt hast. Aber es gibt einfachere Möglichkeiten, deine Website mit ein bisschen Code noch besser zu machen.

Mein Name ist Rache und ich bin Mitglied von Circle, dem Partnerprogramm von Squarespace für professionelle Webdesigner:innen. Ich habe als Website-Designerin angefangen, die Grenzen meiner Kundenprojekte auszuloten. Als mir klar wurde, dass ich dafür Code verwenden kann, gründete ich Squarestylist, eine Bibliothek mit kreativen Ressourcen, die Menschen dabei hilft, Design und Code in Websites zu integrieren, die in einem Meer von Gleichheit Bewunderung und Staunen auslösen. Hier sind ein paar Tipps und Möglichkeiten, mit denen du deine Website mithilfe von benutzerdefiniertem Code einzigartiger gestalten kannst.

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.

Warum solltest du deiner Website benutzerdefinierten Code hinzufügen?

Studien zufolge hängt der Ersteindruck den Besucher:innen von einer Website haben zu 94 % der Zeit mit dem Design zusammen. Es lohnt sich also, Mühe in die Gestaltung des Erscheinungsbildes deines eigenen digitalen Raums zu stecken.

Versteh mich nicht falsch: Ein benutzerdefinierter Code ist auf Squarespace nicht erforderlich. Reibungslose Funktionalität ist von Anfang an gewährleistet. Nichtsdestotrotz ist es von Vorteil, dir Programmierkenntnisse zunutze zu machen, um der Website Funktionen hinzuzufügen oder zusätzliche Anforderungen zu erfüllen, die noch nicht integriert sind.

Best Practices für benutzerdefinierten Code

Als autodidaktische Webdesignerin und Entwicklerin habe ich gelernt, einen Schnipsel nach dem anderen zu programmieren. Dabei arbeite ich mich von einem Problem oder Anwendungsfall zum nächsten. Wenn ich auf ein unbekanntes technisches Problem stoße, bahne ich mir einen Weg durch Online-Foren und -Gruppen und setze mein neu gewonnenes Wissen sofort in die Praxis um.

Die Wiederholung dieses Prozesses ermöglichte es mir, ein paar gute Gewohnheiten zu entwickeln, um meine Fähigkeiten weiter auszubauen.

1. Maximiere die integrierten Funktionen

Erkunde den Squarespace-Editor und zögere nicht, jeden einzelnen Schalter, den du findest, auszuprobieren. Der Builder ist leistungsfähiger, als du vielleicht denkst. In der Hälfte der Fälle geht es darum, zu wissen, wo du in den Standardeinstellungen findest, was du brauchst. In der anderen Hälfte musst du dich mit der Funktionsweise vertraut machen, um zu wissen, was du in deine Suchleiste eingeben musst.

2. Verstehe, was du hinzufügst

Sobald du online einen Code-Schnipsel gefunden hast, der für deine Website nützlich ist, kopiere und füge ihn nicht einfach in dein Bedienfeld „Benutzerdefiniertes CSS“ oder „Code einfügen“ ein. Überprüfe eine Zeile nach der anderen, um zu verstehen, wie sich der Code auf deine Website auswirkt. Notiere dir Schlüsselwörter und Muster – was glaubst du, bedeuten sie?

So habe ich es geschafft, die Sprache der Browser auch ohne formale Ausbildung fließend zu sprechen: indem ich sie so gelernt habe, wie es ein Kleinkind tut. Nähre deine Neugier und habe keine Angst vor neuen Erfahrungen. Du wirst überrascht sein, wie viel du lernen kannst.

Wenn du daran interessiert bist, einen eher angeleiteten Ansatz zum Erlernen von Code auszuprobieren, kannst du als Ausgangspunkt auf meinen kostenlosen CSS-Grundkurs zugreifen.

3. Achte auf Qualität

Natürlich ist Webdesign mehr als nur eine Frage des visuellen Geschmacks. Du musst dir später die wichtigen Fragen stellen, wenn du den DIY-Weg wählst:

• Wirkt sich dein Code unbeabsichtigt auf andere Website-Elemente aus?

• Wie reagiert deine Website auf Änderungen der Bildschirmgrößen und -ausrichtungen?

• Wie wird sie in verschiedenen Browsern angezeigt?

• Wird die zusätzliche Funktion die Website verlangsamen?

• Wie wirkt sich deine Anpassung auf die Barrierefreiheit aus?

Wenn du diese Überlegungen im Hinterkopf behältst, wirst du vorsichtig sein und denkst über die Auswirkungen deines Code über die standardmäßige Website-Vorschau hinaus nach. Wir müssen vor allem sicherstellen, dass wir auf allen Ebenen ein ansprechendes Benutzererlebnis bieten.

Code-Schnipsel zum Ausprobieren

Dein erster Ausflug in CSS muss nicht komplex sein. Ich erinnere mich, dass ich damit angefangen habe, hier und da kleine Details hinzuzufügen und im Laufe der Zeit auf meinem Code-Repository aufzubauen. 

Greife auf das CSS-Menü zu, in dem du deinem Squarespace-Konto benutzerdefinierten Code hinzufügen kannst. Klicke dazu auf Website > Website-Tools unten in der Seitenleiste und dann auf Benutzerdefiniertes CSS. Du kannst mit ein paar dieser Schnipsel beginnen, deine Website zu optimieren.

1. Lege eine Akzentschrift fest

Du musst nicht die übliche Kursivschrift nutzen, um bestimmte Wörter oder Ausdrücke auf deiner Website hervorzuheben. Mit dieser Funktion kannst du eine Displayschrift als Akzentschriftfestlegen – eine, die du sparsam verwenden kannst, um die Aufmerksamkeit der Besucher:innen auf dich zu ziehen.

1. Weise den Stil der Schrift „Verschiedenes“ zu, die uns als Akzentschrift dienen wird. Gehe dazu zu Website-Style > Schriftarten > Verschiedenes. Wähle die Schriftfamilie deiner Wahl und passe die Schrifteigenschaften an.

2. Füge deine Codezeile hinzu, indem du zu Website > Website-Tools > Benutzerdefiniertes CSS gehst. Kopiere den Code unten und füge ihn ein. Falls es einen bestehenden Code gibt, achte darauf, ihn nicht zu löschen. Füge einfach den zusätzlichen Code in die nächste verfügbare Zeile ein.

3. Füge einem beliebigen Abschnitt deiner Website einen Text-Block mit den Elementen Überschrift 1, Überschrift 2 oder Überschrift 3 hinzu. Wähle ein Wort oder eine Gruppe von Wörtern aus und weise das Kursivformat zu, indem du im Pop-up des Textmenüs auf den I-Button drückst. Die Akzentschriftart wird auf die kursiv geschriebenen Wörter angewendet.

CSS-Code

Zur Website hinzufügen > Website-Tools > Benutzerdefiniertes CSS

h1 em, h2 em, h3 em {
font-family:var( --meta-font-font-family);}

Sieh dir Raches Präsentation zu benutzerdefiniertem Code vom Squarespace Circle Day an

2. Füge Linienverzierungen hinzu

Mit dünnen Linien als visuelles Merkmal kannst du jeder minimalistischen Website einen Hauch Eleganz verleihen. Vielleicht verwendest du bereits den vorhandenen horizontalen Linien-Block im Squarespace-Editor. Um vertikale Linien hinzuzufügen, füge einfach ein paar Codezeilen in das CSS-Menü ein.

1. Füge einen leeren Abschnitt hinzu. Um das Platzieren von Elementen zu vereinfachen, mache das Raster des Kreativen Editors sichtbar, indem du auf deiner Tastatur auf G drückst.

2. Klicke oben links im Abschnitt auf den Button „Block hinzufügen“ und wähle „ Form-Block“.

3. Öffne die Formblock-Einstellungen, indem du auf den Block doppelklickst.

4. Öffne das Form-Drop-down und wähle die letzte Formoption (Trapez).

5. Navigiere zu Website > Website-Tools > Benutzerdefiniertes CSS. Kopiere den folgenden Code und füge ihn in die letzte Leerzeile des Menüs ein.

6. Nach dem Einfügen des CSS wird der Trapez-Formblock zu einer vertikalen Linie. Du kannst seine Farbe ändern, indem du unter den Formblock-Einstellungen die Option Strich aktivierst und eine Farbe aus dem Farbauswahl auswählst.

7. Auf Mobilgeräten wird die vertikale Linie in eine horizontale Linie umgewandelt. Passe die Platzierung des Blocks entsprechend an. Dies hat keinen Einfluss auf die Desktop-Ansicht.

CSS-Code

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"] {

&::before {

width: 1px;

content: ''; height: 100%; background-color: var(--shape-block-stroke-color); position: absolute;} svg {display: none !important;}.sqs-shape > * {stroke-width: 0 !important;}

}

@media screen and (max-width: 767px) {

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"]::before {

height:1px;

width: 100%;

}

}

3. Zeige Bildeffekte beim Mouseover

Dynamische Bewegungen können deine Website-Layouts auch visuell interessanter machen. Hier ist ein Beispiel, das 3D-Bildeffekte jedes Mal aktivieren kann, wenn der Cursor auf einem ausgewählten Bild landet. Das ist ein perfektes Beispiel für die Nutzung integrierter Funktionen. Du verwendest nur Code, um für weniger Ablenkung zu sorgen und die Interaktivität deiner Website zu steigern.

1. Füge einen Bild-Block hinzu oder wähle einen bestehenden aus.

2. Wähle unter den Bild-Block-Einstellungen Bildeffekte und wähle einen Effekt aus.

3. Standardmäßig ist der Bildeffekt beim Laden der Seite sichtbar. Damit er schon bei einer Interaktion mit dem Mauszeiger angezeigt wird, gehe zu Website > Website-Tools > Benutzerdefiniertes CSS und füge den folgenden Code ein.

CSS-Code

.sqs-block-image .design-layout-fluid .fluid-image-container {img {visibility: visible !important;}}.imageEffectContainer {opacity: 0;transition:0.5s;}.sqs-block-image:hover .imageEffectContainer {opacity: 1;}

Ich hoffe, dieser Beitrag ermutigt dich, deine Komfortzone zu verlassen und in der Sandbox deines Code-Editors zu experimentieren, falls du das nicht schon getan hast. Viel Spaß beim Programmieren!

Bist du bereit, deine Website zu erstellen und anzupassen?