Help Center /

Einführung: Designer

Der Chimpify Designer ist unser Drag-and-Drop-Baukasten. Mit diesem kannst du Seiten, Templates, Formulare sowie E-Mails pixelgenau erstellen und bearbeiten.

Leftbar

Auf der linken Seite findest du die Leftbar:

Sie ist ein zentrales Navigationselement. Hier bekommst du eine Übersicht aller Elemente und kannst alle deine Formulare sowie Seiten (und Templates) verwalten. Dabei ist es egal, welche Seite (oder Template) du gerade geöffnet hast.

Zurück zum Backend

Wenn du den Designer wieder verlassen möchtest, navigiere einfach mit deinem Mauszeiger über das Chimpify-Logo. Es erscheint ein Pfeil. Mit einem Klick darauf landest du wieder im Backend:

Elemente

Mit einem Klick auf das Plus bekommst du eine sortierte Übersicht aller Elemente:

Diese kannst du per Drag and Drop in deinen Canvas ziehen:

Alternativ kannst du einfach auf das Element klicken. Dann wird er automatisch in den Canvas hinzugefügt. Entweder unten drunter oder in das ausgewählte Element.

Formulare

Wenn du auf das Formular-Icon klickst, bekommst du eine Übersicht all deiner Formulare:

Diese kannst du einfach per Drag and Drop in deinen Canvas ziehen:

Außerdem kannst du mit einem Klick auf das Plus-Icon ein neues Formular anhand einer Vorlage erstellen und danach reinziehen:

Seiten & Templates

Wenn du auf das Seiten-Icon klickst, erhältst du eine Übersicht all deiner Seiten (und Templates):

Die geöffnete Seite (oder das Template) ist farblich markiert. Um eine Seite (oder Template) zu öffnen, klicke auf den Namen:

Außerdem kannst du mit einem Klick auf das Seiten-Plus-Icon eine neue Seite (oder Template) anhand unserer Vorlagen erstellen:

Hilfe

Mit einem Klick auf das Hilfe-Icon öffnet sich die Design-Kategorie unseres Help Centers. Hier kannst du immer wieder nachlesen:

Topbar

Oben findest du die Topbar:

Typ & Name

Auf der linken Seite siehst du, ob du eine Seite oder ein Template geöffnet hast, und wie der jeweilige Name lautet:

Geräte-Icons

Manchmal musst du dein Design für die verschiedenen Bildschirmgrößen anpassen. Klicke dafür auf das jeweilige Icon:

Der Canvas wird kleiner. Jetzt kannst du das Styling (z.B. weniger Innenabstand beim Smartphone) ändern. Die Anpassungen die du hier vornimmst, gelten für die ausgewählte Bildschirmgröße und für alle kleineren Größen. Außerdem ist es wichtig, dass du nicht die Elemente und Inhalte veränderst. Diese würden sich sonst auf allen Größen ändern.

Icons & Button

Auf der rechten Seite findest du einige Icons:

Gehen wir sie mal kurz durch:

Zeitmaschine - Hiermit kannst du dein Design auf einen älteren Zustand zurücksetzen, der schon ferner in der Vergangenheit liegt.
Rückgängig - Hiermit kannst du deine letzten Änderungen rückgängig machen. (Alternativ: Strg + Z bzw. ⌘ + Z)
Wiederherstellen - Hiermit kannst du die Schritte, die du rückgängig gemacht hast, wiederherstellen. (Alternativ: Strg + Umschalt + Z bzw. ⌘ + Umschalt + Z)
Vorschau - Hiermit öffnest du den aktuellen (meistens nicht gespeicherten) Stand in einem neuen Tab.
Speichern - Hiermit speicherst du den aktuellen Stand deines Designs. Klar, oder? 😉

Auf der rechten Seite hast du die Sidebar:

Hier hast du ganz oben einige Reiter, mit denen du zwischen den einzelnen Bereichen wechseln kannst:

Selector

Gleich unter den Reitern findest du den Selector. Dort siehst du, welches Element du gerade ausgewählt hast:

Siehst du hier ein rotes Viereck mit einem Globus, bedeutet das, dass es sich um ein Globales Element handelt:

Element-Styling

Hier hast du viele Möglichkeiten, um deine Elemente zu gestalten:

Zum Beispiel kannst du die Schriftgröße und Schriftfarbe ändern:

Oder du änderst den Außenabstand:

Vielleicht willst du den kompletten Hintergrund eines Bereichs ändern? Dann schaue mal hier vorbei: Hintergrund stylen

Mit der Styling Sidebar kannst du dich richtig austoben. Deiner Kreativität sind hier wirklich kaum Grenzen gesetzt. Und du kannst alles ganz genau so gestalten, wie du es haben möchtest.

Spiele am besten ein bisschen damit herum, um selbst ein Gefühl dafür zu bekommen.

Element-Einstellungen

Bei fast allen Elementen kannst du bestimmte Einstellungen vornehmen.

So kannst du z.B. den Typen einer Überschrift ändern:

Oder das Linkziel eines Buttons ändern:

Vielleicht willst du auch einen Bereich global machen? Das machst du auch dort:

Wenn du für eine gesamte Seite, ein gesamtes Template oder einen Formular-Bereich die Element-Einstellungen öffnest, werden die Einstellungen nicht in der Sidebar, sondern über die Leftbar angezeigt:

Element-Hierarchie

Hier siehst du, wie die Elemente verschachtelt sind, die sich in deiner Seite (oder Template) befinden:

Diese kannst du per Drag and Drop hin und her schieben:

Das ist manchmal ganz nützlich, wenn du ein kleines Element im Canvas nur schwer greifen kannst.

Oder dir ist nicht klar, warum sich ein bestimmtes Element falsch verhält. Meistens ist es einfach nur falsch verschachtelt.

Außerdem kannst du nur über diesen Weg die gesamte Seite bzw. das gesamte Template anklicken. Danach kannst du z.B. die Schriftart für die gesamte Seite bestimmen:

Kleine Icons

Weiter unten findest du zwei kleine Icons. Dort kannst du den HTML-Code ändern bzw. das Stylesheet erweitern:

Canvas

Generell besteht dein komplettes Design aus Elementen. Diese werden an verschiedene Stellen platziert, ineinander verschachtelt und individuell gestylt.

Normale Elemente

Wenn du mit dem Mauszeiger über ein Element gehst, erscheint eine Markierung. Dadurch weißt du, was es für ein Element ist:

Jedes Element kannst du per Drag and Drop verschieben:

Probiere es gerne einmal aus!

Mit einem Klick auf das Element wird der Reiter sichtbar. Hier kannst du das ausgewählte Element löschen oder duplizieren:

Globale Elemente

Rot markierte Elemente sind Globale Elemente:

Sie verhalten sich genau wie normale Elemente. Nur mit einer Ausnahme: Wenn du hier eine Änderung durchführst, wird diese in allen Seiten (und Tempaltes) vorgenommen, wo das Globale Element ebenfalls vorkommt.

Deshalb musst du diese zuerst mit einem Doppelklick entsperren, wenn du sie bearbeiten und stylen möchtest (da du bei diesen Elementen immer ein bisschen vorsichtig sein musst):

Falls du jetzt nur Bahnhof verstehst, schaue bitte unbedingt hier vorbei: Wie hängt alles zusammen?

Elemente bearbeiten

Mit einem Doppelklick auf ein Text-Element, kannst du dieses bearbeiten:

Wenn du einen Text markierst, kannst du ihn zusätzlich formatieren und einen Link setzen:

Einige Text-Elemente (z.B. in einem Template) kannst du so jedoch nicht bearbeiten, da es sich um dynamische Elemente handelt. Hier mehr dazu.

Mit einem Doppelklick auf ein Bild-Element, kannst du dieses austauschen bzw. ein neues hochladen:

Sub-Elemente

Bei manchen Elementen (z.B. beim Kommentar-Element) kannst du ein Element in diesem Element anklicken, indem du einen Doppelklick darauf machst. Danach kannst du dieses Sub-Element stylen: