# Designer ## Allgemeines - Die ersten Schritte Mit dem Designer erstellst du in erster Linie Design-Templates (Vorlagen). \ Verwendest du das erste Mal den Designer, so musst du zunächst ein neues Template anlegen. Dies kannst du ganz einfach über den Plus-Button oben rechts.\ Hast du nun dein Design-Template soweit fertig, musst du dieses im letzten Schritt nur noch deinem Form zuweisen. Gehe also auf "Meine Forms" und leg unter "Aktuelles Design" dein vorher erstelltes Template an. ## Global Design ![Design-Einstellungen Global](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01hKkZ6mkyhmSPxpUH%2F-M01hpVAs0nC_kdjwWV_%2Fglobal.PNG?alt=media\&token=16b3437f-2a65-4369-9d09-cf18d69f4bb6) ### Hintergrund personalisieren Personalisiere den Hintergrund deines Anfrageformulares und passe es an deiner Corporate Identity an. \ Über die Farb-Icons hast du die Möglichkeit die **Hintergrundfarbe**, **Titelfarbe**, sowie die Farbe des **Beschreibungstextes** zu bestimmen. \ Du möchtest einen **Rand**? Lege erst die Dicke des Randes fest und anschließend die Randfarbe. \ Über den **Radius** kann festgelegt werden, ob der Hintergrund runde Ecken haben soll oder nicht.
## CSS Schatten Personalisieren Es besteht die Möglichkeit, den allgemeinen Schatten des Hintergrundes zu personalisieren, aber auch den Schatten der einzelnen Icons. ![](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01hKkZ6mkyhmSPxpUH%2F-M01jHU_aAWL0RxbKw1u%2Fhadow.PNG?alt=media\&token=1fc4eb36-31e3-446b-bacb-5c7f6d8e2f2a) Gebe für den Schatten Werte in folgender Form ein: \ \&#xNAN;*"10px 10px 15px black"* oder *"10px 10px 10px **10px** black".*\ Auch Eingaben wie diese *"0 0.125em 0.313em rgba(50,50,93,.09)"* werden erkannt*.* #### Beispiel Schatten für den Hintergrund Die gleichen Schatten kannst du auch für die Icons verwenden. ![Hintergrundschatten: "0 0.125em 0.313em rgba(50,50,93,.09)"](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01hKkZ6mkyhmSPxpUH%2F-M01lVoCRZTqVR-gvYF0%2Fschatten1.PNG?alt=media\&token=42378b11-2931-495c-9dd2-5bc96b479b3e) ![Hintergrundschatten: "0 2px 6px #0000000A"](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01hKkZ6mkyhmSPxpUH%2F-M01lxJ901d-P9lTpxHq%2FSchatten2.PNG?alt=media\&token=5ae0601b-c6e4-484b-8e8c-5e2d1b6a1435) ![Hintergrundschatten: "0 5px 5px silver"](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01hKkZ6mkyhmSPxpUH%2F-M01mBYfxSm363bTfMMO%2Fschatten3.PNG?alt=media\&token=dd64c68a-96a8-4be4-8b01-42a7f3729450) ## Icon Card Design ![Design-Einstellungen für die Icon-Card](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01mHHkXuh5KPt29Cz3%2F-M01nnT94pz_JT-G2FFM%2Ficonscard.PNG?alt=media\&token=983f4539-2ad1-4237-8ca9-ac61e3815e7b) **Farbe/ Hintergrundfarbe/ Schriftfarbe**\ Lege über das Farb-Icon deine individuelle Icon-Farbe fest. Darunter kann die Schriftfarbe der Icon-Boxen festgelegt werden. Die Hintergrundfarbe wird über die dritte Fläche festgelegt. **Schatten**\ Festlegung wie weiter *oben gezeigt* (Bitte hochscrollen). **Rand**\ Lege hier einen Rand für die Icon-Boxen fest. Dieser hat aktuell nur die Voreinstellung mit der Farbe Schwarz. **Größe der Icons**\ Lege ganz einfach fest, wie groß deine Icons seinen sollen. **Radius - Rundung**\ Hier kannst du festlegen, ob deine Icon-Boxen runde Ecken haben sollen oder nicht. ## Text Card Desgin ![Design-Einstellungen Textfeld](https://2660822716-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvkMROOYupgOSfYJoE3%2F-M01mHHkXuh5KPt29Cz3%2F-M01oynXcjXUPTYDMbeE%2Ftextfeld.PNG?alt=media\&token=05c012c2-8b90-4098-a09c-6aa0e45eeb6a) **Farben**\ Mit der **Hintergrundfarbe** legst du den Hintergrund des Textfeldes fest. Über die **Hoverfarbe** legst du fest, welche Farbe das Textfeld annehmen soll, wenn man mit der Maus über dieses drüber geht. Wird ein Text eingegeben und das Textfeld aktiv, so erscheint die **Focusfarbe**. Die **Standardfarbe** legst du über den Reiter "Farbe fest". **Variante und Layout**\ Lege über die ersten beiden Felder das spezifische Design fest, um dieses anschließend farblich anpassen zu können.