Idealerweise hast du für deine Homepage ein design beim Team White Labels eingereicht und sie haben dieses für dich erstellt. Wenn du schon länger an deiner Website arbeitest, kann es sein, dass du hier Dinge anpassen möchtest oder dass du selbst anderen Seiten mehr Layout geben willst.
Wichtig, bevor du beginnst
Kopiere immer den Quellcode der Seite und speichere ihn irgendwo auf deinem eigenen Computer, bevor du Änderungen an deiner Seite vornimmst. Wenn beim Anpassen etwas schiefgeht, kannst du den Originalcode jederzeit wieder in den Quellcode einfügen, um eine funktionierende Seite zu haben. Speichere den bestehenden Code also zuerst irgendwo ab, damit du ihn jederzeit wiederherstellen kannst. Verschicke außerdem immer eine Testmail, um zu prüfen, ob alles richtig funktioniert.
In dieser Anleitung erklären wir die folgenden Dinge:
Text erstellen
Auf jeder Seite brauchst du Text. Im CMS kannst du Texte ganz einfach selbst schreiben und hast viele Schaltflächen, die dir helfen. Wenn du mit der Maus über ein Symbol fährst, erscheint darunter die Erklärung.
Mit diesen Schaltflächen kommst du schon ein ganzes Stück weiter! Aber wir erklären gerne noch ein wenig mehr.
1.1 Schaltflächen
Ein Text besteht oft aus verschiedenen Absätzen mit Überschriften darüber. Diese Überschriften dienen der SEO und der Ordnung auf deiner Seite. Die wichtigste Überschrift ist deine „H1-Überschrift“, die du meistens schon ausgefüllt hast. H1 steht für Heading 1. Es darf nur eine H1 pro Seite geben, auch auf der Startseite.
Die Absätze, die unter die H1 kommen und eine Überschrift haben, erhalten eine H2-Überschrift, und Absätze, die zum Thema der H2 gehören, erhalten eine H3-Überschrift. Davon kann es mehrere pro Seite geben. Du kannst die Überschrift ganz einfach als H2 oder H3 festlegen, indem du die richtige Überschrift auswählst:
Auf deiner Website sieht das je nach deinem Styling so aus:
Wenn du auf die Schaltfläche „Quellcode“ klickst, siehst du es auf diese Weise:
Anmerkung
Die Verwendung von H1, H2 oder H3 dient nicht nur dem Styling, sondern der logische Aufbau ist auch wichtig für die SEO. Du kannst also nicht einfach eine H3 verwenden, nur weil sie gut aussieht, wenn dies zu einem unlogischen Aufbau führt.
1.2 Absätze
Absätze findest du im Quellcode als Text zwischen
und
.1.3 Links
Manchmal verweist du in deinem Text auf eine andere Seite deiner Website oder auf eine Seite außerhalb deiner Website. Du kannst einen Link hinzufügen, indem du den Text markierst und auf das „Link“-Symbol klickst.
Es öffnet sich dann das folgende Fenster:
Link zu einer Seite auf der eigenen Website
Hier gibst du die URL ein, zu der du verlinkst. Wenn es sich um eine Seite auf deiner eigenen Website handelt, musst du nur den Teil ab dem ersten Schrägstrich (/) ausfüllen.
Link zu einer anderen Website
Wenn du auf eine Seite außerhalb deiner Website verlinkst, zum Beispiel zu Briefmarken von PostNL, klickst du anschließend auf den Tab „Zielseite“. Dort kannst du wählen, ob der Link in einem neuen Tab im Internet geöffnet werden soll, damit dein Kunde deine Website nicht verlässt. Wähle dann „Neues Fenster (_blank)“.
Link zu einem Abschnitt auf derselben Seite
Du kannst auch zu einem Abschnitt auf derselben Seite verlinken. Dies funktioniert über „Anker-Tags“. An der Stelle, zu der du verlinken möchtest, fügst du im Quellcode diesen Teil ein: .
Jetzt kannst du hierher verlinken. Dafür gibt es 2 Möglichkeiten:
- Das funktioniert immer: Gib bei dem Wort, das du mit dem Abschnitt auf der Seite verlinken möchtest, dies bei der URL ein: #TEXT
- Dies funktioniert nur, wenn sich beide Abschnitte im „Seiteninhalt“ oder beide Abschnitte im „Seiten-Footer“ befinden. Klicke auf das Link-Symbol, woraufhin sich das folgende Fenster öffnet:
Link-Typ
Wähle bei „Link-Typ“ die Option „Link zu Anker im Text“.
Anker auswählen
Hier wählst du den richtigen Anker-Tag aus. Bei „Element-ID“ musst du nichts ausfüllen.
Wenn du auf „OK“ klickst, wird der Link erstellt.
Tipp
Überprüfe immer kurz auf der Seite, ob die Links funktionieren.
1.4 Aufzählungen
Du kannst ganz einfach Aufzählungen mit den folgenden Schaltflächen einfügen:
Du musst hier jedoch noch eine Formatierung hinzufügen, da diese je nach Shop unterschiedlich ist. Auf deiner Seite /styleguide kannst du sehen, wie der HTML-Code lautet. Zum Beispiel:
Formatierung aus dem Styleguide
Wenn du jetzt beim Bearbeiten deiner Seite zum Quellcode gehst, siehst du auch dieses HTML, nur ohne das Stück ‚class=“…“‚. Wenn du dieses Stück bei deinem
- oder
- einfügst, wird die Formatierung korrekt angezeigt.
Du kannst auch ohne die Schaltflächen für Aufzählungszeichen direkt den HTML-Code, den du auf /styleguide findest, in den Quellcode kopieren und dann anpassen. Anstelle von „List item 1“, „List item 2“ usw. füllst du deine eigenen Texte ein.
1.5 Spalten
Auf deiner Website möchtest du nicht alles untereinander stehen haben, sondern manchmal auch nebeneinander. Für deine Startseite wurde dies bereits schön von Sparkles gestaltet. Wenn du so etwas auch auf anderen Seiten machen möchtest, schau zuerst nach, ob der Code bereits auf /styleguide steht.
Anpassen und Code
Wenn du später etwas anpassen möchtest, ist es hilfreich zu wissen, wie es genau funktioniert.
Die Breite deiner Spalten wird anhand einer Zahl bestimmt. Die standardmäßige volle Breite ist 12, die halbe Breite ist 6 und 1/3 Breite ist 4. Mit diesen Zahlen kannst du bestimmen, wie Text oder Blöcke auf Laptop, Tablet und Handy angezeigt werden.
Im Code siehst du wahrscheinlich so etwas wie das hier:
<div class=“xs-12 xsm-12 sm-6 md-6 lg-6″>
Hier siehst du die Zahlen wieder. Jede Abkürzung davor hat mit einer anderen Bildschirmbreite zu tun.
- xs = Handy
- xsm = breites Handy
- sm = schmales Tablet
- md = Tablet
- lg = Desktop
Im obigen Beispiel steht das Element auf dem Handy also auf voller Breite, aber auf dem Tablet und Desktop in 2 Spalten.
Bilder einfügen
Wenn du deine Seiten mit Bildern gestalten möchtest, denke zum Beispiel an Navigationsblöcke mit einem Bild von Geburtskarten für Jungen darin, dann musst du diese Bilder zuerst auf der Website hochladen und dann auf der entsprechenden Seite einbinden.
2.1 Bild hochladen
Im CMS unter > Dateiverwaltung speicherst du die Bilder, die du im Shop verwendest. Das Speichern eines Bildes erfolgt durch „Hochladen“. Lade das Bild so klein wie möglich hoch.
Das bedeutet:
- Verwende Abmessungen, die nicht größer sind als die Anzeige des Bildes auf der Website auf einem großen Bildschirm
- Komprimiere das Bild so weit wie möglich, bevor du es hochlädst
Bild komprimieren
Wenn du das Bild hochlädst, kannst du die Option wählen, das Bild vom System komprimieren zu lassen. Damit macht es das Bild etwas kleiner, indem bestimmte Pixel entfernt werden, die unser Auge nicht wahrnimmt.
Anmerkung
Wenn du dies bereits selbst mit einem anderen Tool wie tinypng.com getan hast, solltest du diese Funktion besser deaktivieren.
Rechts siehst du die Daten des Bildes. „Datei-URL“ zeigt die URL des Bildes an. Diese benötigst du, um das Bild auf Seiten einzufügen.
2.2 Bild einfügen
Wenn du ein bestimmtes Bild auf einer Seite anzeigen möchtest, musst du den folgenden Link verwenden:
/media/DATEINAME
Für das Bild der „Broers & Zus“-Karten mit dem Namen „03-blok_broerzus.png“ lautet der Link also: /media/03-blok_broerzus.png
Um Bilder auf einer Seite einzufügen, sind HTML-Kenntnisse erforderlich. Du musst dies nämlich über den Quellcode eingeben. Viel HTML findest du auf /styleguide.
Klappt es nicht? Dann schalte den Support von White Labels ein.
Blöcke und Buttons
Du hast mit Sparkles besprochen, wie deine Website aussehen soll. Dazu gehören auch Blöcke und Buttons, zum Beispiel auf der Startseite. Idealerweise wird dir dies vollständig fertig geliefert.
Styleguide
Wenn deine Website wächst, kann es sein, dass du auch auf anderen Seiten Blöcke oder Buttons hinzufügen möchtest, und wenn du schon eine Weile dabei bist, möchtest du vielleicht Texte oder Bilder von Blöcken und Buttons ändern. Deshalb erstellt Sparkles für dich einen Styleguide. Diesen findest du unter /styleguide.
Anmerkung
Wenn du dies bereits selbst mit einem anderen Tool wie tinypng.com getan hast, solltest du diese Funktion besser deaktivieren.
Html
Im Styleguide findest du alles, was mit dem Styling deiner Website zu tun hat, auch über Blöcke und Buttons. Du siehst immer ein Beispiel und darunter steht der entsprechende HTML-Code. Diesen kannst du kopieren, auf deiner Seite einfügen und dort anpassen.
Buttons
Was musst du anpassen?
- Text im Block / Button
- Alt-Text beim Bild
- Link zum Bild
- Link zur Seite, auf die der Block / Button verweist. Dies ist im Code auf /styleguide mit einem „#“ angegeben. Dies ersetzt du durch den Seitenlink ab dem ersten Schrägstrich, wie zum Beispiel „/geboortekaartjes“.
Beispiele:
Block:
Button:
