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)“:

framework waehlen

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):

framework hintergrund aendern

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.:

framework schriftart aendern

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:

framework style guide entlang gehen

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:

framework startseite nach bearbeiten

Sogar die Bestätigungsseiten sind „on Brand“! 😉

framework bestaetigungsseiten nach bearbeiten

An einigen Stellen musst du noch manuell nachbessern. Zum Beispiel wenn das Element keinen Globalen Style zugeordnet hat:

framework manuell nachbessern

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?

framework globalen style aendern

Wenn du ein neues Element hinzufügst, solltest du danach den passenden Globalen Style wählen:

framework element globalen style zuordnen

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):

framework bausteine hinzufuegen

Natürlich kannst du dein Framework auch um Seiten erweitern. Am besten kopierst du hierfür einfach bestehende Seiten:

framework seite kopieren

Wenn du eine neue, leere Seite erstellst, achte darauf, dass du nach der Erstellung den Globalen Style „Seite/Template“ wählst:

framework leere seite globaler style waehlen

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.

(Der Header wird momentan noch nicht unterstützt.)

Brandneu

Neues Theme-Framework 🎉

Chimpify

Plattform

Powered by Chimpify