Einführung in den Designer

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

Leftbar

Auf der linken Seite findest du die Leftbar:

Fullscreen 12 07 19 09 46

Sie ist ein zentrales Navigationselement. Hier kannst du alle deine CTAs sowie Seiten (und Templates) verwalten. Dabei ist es egal, welche Seite (oder Template) du gerade offen 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:

Fullscreen 12 07 19 09 46a

CTAs

Wenn du auf das CTA-Icon klickst, bekommst du eine Übersicht all deiner CTAs (Calls-to-Action):

Fullscreen 12 07 19 09 47

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

ctagif

Außerdem kannst du mit einem Klick auf das Plus-Icon einen neuen CTA anhand einer Vorlage erstellen und danach reinziehen:

ctaneugif

Lerne hier mehr darüber: CTAs (Calls-to-Action) bearbeiten, erstellen und verwalten

Seiten & Templates

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

Fullscreen 12 07 19 09 48

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

seitegif

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

seiteneugif

Lerne hier mehr darüber: Seiten (und Templates) bearbeiten, erstellen und verwalten

Hilfe

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

Fullscreen 12 07 19 09 49

Topbar

Oben findest du die Topbar:

Fullscreen 12 07 19 09 51

Typ & Name

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

Fullscreen 12 07 19 09 52

Geräte-Icons

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

Fullscreen 12 07 19 09 52a

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.

Lerne hier mehr darüber: Seiten (und Templates) für verschiedene Bildschirmgrößen anpassen

Icons & Button

Auf der rechten Seite findest du einige Icons:

Fullscreen 12 07 19 09 53

Gehen wir sie mal kurz durch:

  • Revisionen - Hiermit kannst du dein Design auf einen älteren Zustand zurücksetzen, der schon ferner in der Vergangenheit liegt.

  • Undo - Hiermit kannst du deine letzten Änderungen rückgängig machen. (Alternativ: Strg + Z bzw. ⌘ + Z)

  • Redo - Hiermit kannst du die Schritte, die du rückgängig gemacht hast, wiederholen. (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:

Fullscreen 12 07 19 09 55

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

Fullscreen 12 07 19 09 56

Selector

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

Fullscreen 12 07 19 09 56a

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

Fullscreen 12 07 19 09 57

Element-Styling

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

Fullscreen 12 07 19 09 57a

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

schriftgif

Oder du änderst den Außenabstand:

abstandgif

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:

Fullscreen 12 07 19 09 59

Oder das Linkziel eines Buttons ändern:

Fullscreen 12 07 19 09 59a

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

Fullscreen 12 07 19 10 00

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

Fullscreen 12 07 19 10 10

Elemente & Bausteine

Hier findest du eine Übersicht aller Elemente und Bausteine, die du zur Verfügung hast:

Fullscreen 12 07 19 10 09

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

elementgif

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

Anders als Elemente sind Bausteine designbezogene Bereiche, die bereits fertig gestaltet sind. Eigene Bausteine sind Bereiche, die du selbst gestaltet hast und öfter verwenden möchtest.

Element-Hierarchie

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

Fullscreen 12 07 19 10 01

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

hierarchiegif

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:

Fullscreen 12 07 19 10 02

Kleine Icons

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

Fullscreen 12 07 19 10 03

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:

Fullscreen 12 07 19 10 13

Jedes Element kannst du per Drag and Drop verschieben:

elementverschiebengif

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:

Fullscreen 12 07 19 10 13a

Globale Elemente

Rot markierte Elemente sind Globale Elemente:

Fullscreen 12 07 19 10 14

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

globalgif

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:

textgif

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

textmarkierengif

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:

bildgif

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:

kommentaregif

So. Das war jetzt eine Menge Holz! Wenn du noch Fragen hast, beantworten wir dir diese gerne im Chat oder via E-Mail.

© 2012-2018 by Chimpify UG (haftungsbeschränkt)