Wie gehe ich richtig mit dem Framework um?
Ein Framework ist ein Grundgerüst für deine Webseite. Wir haben uns dabei folgende Frage gestellt: Was ist das Mindeste, was eine inboundfähige Webseite braucht?
Dementsprechend hat unser Framework z.B. eine Startseite, normale Seiten, eine Blog-Seite, eine Kontakt-Seite, eine Impressum-Seite, Blog-Templates mit und ohne Sidebar, und sogar Bestätigungsseiten.
Das Besondere an unserem Framework ist aber, dass fast jedes Element einen Globalen Style zugeordnet hat. Diese Styles kannst du bequem und übersichtlich in einem zentralen Style Guide verändern, und sogar erweitern.
Wenn du also z.B. einen Button im Framework änderst, ändern sich alle Buttons auf allen Seiten und Templates gleich mit. Das ist ein bisschen so wie bei den einfachen Webseiten-Baukästen. Nur hast du in Chimpify die volle Kontrolle. Dadurch sparst du nicht nur Zeit, sondern bist immer zu 100% „on Brand“.
Schritt 1: Wähle das helle oder dunkle Framework und ändere ggf. den Hintergrund
Möchtest du eine Webseite mit einem weißen Hintergrund? Dann wähle „Framework (Light)“. Möchtest du eine Webseite mit einem dunklen, farbigen oder Bild als Hintergrund, dann wähle „Framework (Dark)“:
Navigiere danach in den Style Guide, wähle in der Breadcrumb Navi die Seiten-Ebene aus, achte darauf, dass der Globale Style „Seite/Template“ gewählt ist und ändere den Hintergrund (wie hier beschrieben):
Schritt 2: Ändere die allgemeine Schrift auf Seiten-Ebene
Welche Schrift (Art, Farbe, Stärke usw.) sollen deine Text-, Überschrift-, Text-Link-, Button-Elemente usw. standardmäßig haben?
Falls du dich noch nicht in der Style-Guide-Seite befindest, navigiere dorthin. Wähle dann in der Breadcrumb Navi die Seiten-Ebene aus, achte darauf, dass der Globale Style „Seite/Template“ gewählt ist. Ändere dann die Schriftart, -farbe, -stärke usw.:
Sofort ändert sich die Schrift bei allen Elementen auf allen Seiten und Templates.
Wie du Google Fonts, Adobe Fonts oder manuelle Fonts einbindest findest du hier.
Schritt 3: Gehe den Style Guide von oben nach unten entlang und ändere das Styling
Welche Linkfarbe sollen deine Links haben? Sollen deine Überschriften vielleicht eine andere Schriftart oder -farbe haben? Wie sieht’s mit der Buttonfarbe aus? Mit den Ecken der Buttons? Sollen Bilder abgerundete Ecken haben oder nicht? Was ist mit den Formularrahmen, welche Rahmenfarbe und -dicke sollen sie haben?
Gehe den Style Guide einfach von oben nach unten entlang und passe alles nach deinen Vorstellungen an:
Ich habe dafür nur 5 Minuten gebraucht und somit das komplette Styling meiner Webseite geändert.
Schritt 4: Überprüfe das Styling deiner Seiten und Templates
Wenn du z.B. deine Startseite aufrufst, sieht diese schon ganz anders aus:
Sogar die Bestätigungsseiten sind „on Brand“! 😉
An einigen Stellen musst du noch manuell nachbessern. Zum Beispiel wenn das Element keinen Globalen Style zugeordnet hat:
Klicke also kurz alle Seiten und Templates durch und schaue, ob du zufrieden bist.
Schritt 5: Verändere das Layout deiner Seiten und Templates
Zuerst kannst du Globale Styles einfach austauschen. Möchtest du z.B. einen großen oder kleinen Container? Soll er zentriert oder linksbündig sein?
Wenn du ein neues Element hinzufügst, solltest du danach den passenden Globalen Style wählen:
Außerdem kannst du Bausteine hinzufügen. Beachte hier jedoch, dass du nach dem Einfügen auch allen Elementen den passenden Globalen Style zuordnest (auch den Layout-Elementen):
Natürlich kannst du dein Framework auch um Seiten erweitern. Am besten kopierst du hierfür einfach bestehende Seiten:
Wenn du eine neue, leere Seite erstellst, achte darauf, dass du nach der Erstellung den Globalen Style „Seite/Template“ wählst:
Abschließend musst du nur noch die Texte und Bilder austauschen und kannst danach online gehen.
Und wenn du in Zukunft mal etwas ändern möchtest, einfach in den Style Guide gehen und die Sache ändern. Es werden automatisch alle Elemente auf deiner kompletten Webseite geändert.
