[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"help-article-\u002Fde\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element":3},{"id":4,"title":5,"body":6,"category":382,"description":383,"extension":384,"keywords":385,"meta":392,"navigation":393,"order":394,"path":395,"published":396,"rawbody":397,"seo":398,"stem":399,"updated":400,"__hash__":401},"helpDe\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element.de.md","Checkbox-Input-Feld erstellen: Element ein- und ausblenden lassen",{"type":7,"value":8,"toc":375},"minimark",[9,22,25,46,51,187,196,200,205,284,301,305,310,345],[10,11,12,13,17,18,21],"p",{},"Im ",[14,15,16],"place",{},"Template-Editor"," legst du mit einem Checkbox-Input-Feld fest, dass Nutzer im ",[14,19,20],{},"Design-Generator"," ein Element ein- und ausblenden können, zum Beispiel ein Logo oder einen Hinweis. Setzen sie das Häkchen, ist das Element zu sehen, sonst nicht.",[10,23,24],{},"Das geht in drei Schritten:",[26,27,28,35,41],"ol",{},[29,30,31,32,34],"li",{},"Erstelle das Checkbox-Input-Feld im ",[14,33,16],{},".",[29,36,37,38,34],{},"Konfiguriere das Input-Feld im ",[14,39,40],{},"Input Fields View",[29,42,43,44,34],{},"Teste das Input-Feld im ",[14,45,20],{},[47,48,50],"h2",{"id":49},"checkbox-input-feld-erstellen","Checkbox-Input-Feld erstellen",[26,52,53,77,89,124,172],{},[29,54,55,59,60,63,64,34,68,71],{},[56,57,58],"click",{},"Klicke"," in der ",[14,61,62],{},"Toolbar"," oben auf das Quadrat mit dem Plus. Das ist das Werkzeug ",[65,66,67],"strong",{},"Create Input Field",[69,70],"br",{},[72,73],"img",{"alt":74,"src":75,"width":76},"Toolbar mit markiertem Werkzeug Create Input Field.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic",894,[29,78,79,81,82,85,86,34],{},[56,80,58],{}," auf das Element, das Nutzer ein- und ausblenden sollen. Das geht auf dem ",[14,83,84],{},"Canvas"," oder im ",[14,87,88],{},"Layers-Panel",[29,90,91,92,118,120,121,123],{},"Je nach Element geht es so weiter:",[93,94,95,113],"ul",{},[29,96,97,100,101,103,104,34,107,109],{},[98,99],"right",{}," Für einen Text, ein Bild oder eine Form: Ein Popup öffnet sich. ",[56,102,58],{}," darin auf ",[65,105,106],{},"Select Custom Property",[69,108],{},[72,110],{"alt":111,"src":112,"width":76},"Popup für einen Text mit markiertem Button Select Custom Property, rechts eine Vorschau des Input-Felds.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14",[29,114,115,117],{},[98,116],{}," Für eine Gruppe oder Maske: Es öffnet sich kein Popup. Mach direkt mit Schritt 4 weiter.",[69,119],{},"Auf dem ",[14,122,84],{}," steht jetzt der Hinweis „Select a property to connect a field.“",[29,125,126,128,129,132,133,136,137,140,141,144,145,148,149,165,167],{},[56,127,58],{}," im ",[14,130,131],{},"Properties-Panel"," im Abschnitt ",[65,134,135],{},"Appearance"," auf die Eigenschaft ",[65,138,139],{},"Visibility",". Sie steht ganz unten im Abschnitt, neben ",[65,142,143],{},"Opacity",", und zeigt „true“. Ein Popup ",[65,146,147],{},"Create Field"," öffnet sich.",[150,151,153],"trouble",{"symptom":152},"Visibility ist nicht zu sehen?",[10,154,155,156,158,159,161,162,164],{},"Bei Gruppen und Masken ist der Abschnitt ",[65,157,135],{}," zugeklappt. ",[56,160,58],{}," auf ",[65,163,135],{},", um ihn aufzuklappen.",[69,166],{},[72,168],{"alt":169,"src":170,"width":171},"Abschnitt Appearance eines ausgewählten Rechtecks mit markierter Eigenschaft Visibility neben Opacity.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-show-or-hide-element-01\u002Fpublic",938,[29,173,174,161,176,179,180,182],{},[56,175,58],{},[65,177,178],{},"Checkbox",". Das Checkbox-Input-Feld ist jetzt erstellt und mit der Sichtbarkeit des Elements verbunden.",[69,181],{},[72,183],{"alt":184,"src":185,"width":186},"Popup Create Field für die Eigenschaft Visibility mit den Feldtypen Select und Checkbox.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-checkbox-input-fields-01\u002Fpublic",504,[188,189,190],"tip",{},[10,191,192,193,195],{},"Mehrere Elemente auf einmal ein- und ausblenden: Fasse sie zu einer Gruppe zusammen und verbinde die ",[65,194,139],{}," der Gruppe mit dem Checkbox-Input-Feld.",[47,197,199],{"id":198},"input-feld-konfigurieren","Input-Feld konfigurieren",[10,201,12,202,204],{},[14,203,40],{}," siehst du alle Input-Felder deines Templates und konfigurierst sie.",[26,206,207,226,237,247,252,263,271],{},[29,208,209,211,212,161,214,217,218,148,220,222],{},[56,210,58],{}," oben rechts in der ",[14,213,62],{},[65,215,216],{},"Input Fields",". Der ",[14,219,40],{},[69,221],{},[72,223],{"alt":224,"src":225,"width":76},"Toolbar oben rechts mit markiertem Button Input Fields.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic",[29,227,228,232,233,236],{},[229,230,231],"look",{},"Schau"," ganz unten in der Liste nach deinem neuen Input-Feld. Es heißt ",[65,234,235],{},"Toggle",". Sein Häkchen zeigt, ob das Element gerade sichtbar ist. Das ist der Standardwert, mit dem Nutzer starten.",[29,238,239,161,241,243,244,246],{},[56,240,58],{},[65,242,235],{}," und tippe eine Überschrift ein, die sagt, worum es geht, zum Beispiel „Logo anzeigen“. Nutzer sehen sie im ",[14,245,20],{}," über der Checkbox.",[29,248,249,251],{},[56,250,58],{}," auf das Zahnrad rechts im Input-Feld. Die Einstellungen öffnen sich.",[29,253,254,258,259,262],{},[255,256,257],"type",{},"Gib"," bei ",[65,260,261],{},"Label"," den Text ein, der neben der Checkbox stehen soll. Das Label ist optional.",[29,264,265,161,267,270],{},[56,266,58],{},[65,268,269],{},"Done",". Die Einstellungen schließen sich.",[29,272,273,275,276,280,281,283],{},[56,274,58],{}," oben rechts auf ",[277,278,279],"close",{},"×",", um den ",[14,282,40],{}," zu schließen.",[285,286,287],"warning",{},[10,288,289,290,292,293,295,296,298,299,34],{},"Der ",[14,291,40],{}," ist keine Vorschau. Setzt oder entfernst du hier das Häkchen, ändert das den Standardwert dauerhaft. Dasselbe gilt für das Auge im ",[14,294,88],{},": Blendest du das Element dort aus, startet die Checkbox im ",[14,297,20],{}," ohne Häkchen. Teste Input-Felder im ",[14,300,20],{},[47,302,304],{"id":303},"input-feld-im-design-generator-testen","Input-Feld im Design-Generator testen",[10,306,289,307,309],{},[14,308,20],{}," ist die Seite, auf der Nutzer dein Template ausfüllen und ihr Design exportieren können. Hier kannst du das Input-Feld gefahrlos testen: Was du dort auswählst, ändert dein Template nicht dauerhaft.",[26,311,312,330,340],{},[29,313,314,315,275,318,321,322,325,326,329],{},"Wenn du mit deinen Input-Feldern fertig bist, ",[56,316,317],{},"klicke",[65,319,320],{},"Share"," und dann auf ",[65,323,324],{},"Publish Template Link",". Hast du das Template schon veröffentlicht, heißt der Menüpunkt ",[65,327,328],{},"Open Template Campaign",". Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.",[29,331,332,161,334,337,338,148],{},[56,333,58],{},[65,335,336],{},"Copy URL"," und öffne den Link in einem neuen Browser-Tab. Der ",[14,339,20],{},[29,341,342,344],{},[56,343,58],{}," auf die Checkbox. Prüfe, ob das Element verschwindet und beim nächsten Klick wieder erscheint.",[346,347,348],"related",{},[93,349,350,357,363,369],{},[29,351,352],{},[353,354,356],"a",{"href":355},"\u002Fde\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields","Wie Elemente, Eigenschaften und Input-Felder zusammenhängen",[29,358,359],{},[353,360,362],{"href":361},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements","Elemente gruppieren: zusammen bewegen und anordnen",[29,364,365],{},[353,366,368],{"href":367},"\u002Fde\u002Fhelp\u002Finput-fields\u002Fcheckbox-input-fields","Checkbox-Input-Felder",[29,370,371],{},[353,372,374],{"href":373},"\u002Fde\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-if-else-logic","IF \u002F ELSE-Logik: zwischen zwei Ergebnissen umschalten",{"title":376,"searchDepth":377,"depth":377,"links":378},"",2,[379,380,381],{"id":49,"depth":377,"text":50},{"id":198,"depth":377,"text":199},{"id":303,"depth":377,"text":304},"input-fields","Lass Nutzer im Design-Generator mit einer Checkbox entscheiden, ob ein Element im Design zu sehen ist.","md",[178,139,386,387,388,389,390,235,106,261,391],"Sichtbarkeit","einblenden","ausblenden","anzeigen","verstecken","optional",{},true,14,"\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element.de","2026-10-13","---\ntitle: \"Checkbox-Input-Feld erstellen: Element ein- und ausblenden lassen\"\ndescription: \"Lass Nutzer im Design-Generator mit einer Checkbox entscheiden, ob ein Element im Design zu sehen ist.\"\ncategory: input-fields\norder: 14\nkeywords: [\"Checkbox\", \"Visibility\", \"Sichtbarkeit\", \"einblenden\", \"ausblenden\", \"anzeigen\", \"verstecken\", \"Toggle\", \"Select Custom Property\", \"Label\", \"optional\"]\n---\n\nIm :place[Template-Editor] legst du mit einem Checkbox-Input-Feld fest, dass Nutzer im :place[Design-Generator] ein Element ein- und ausblenden können, zum Beispiel ein Logo oder einen Hinweis. Setzen sie das Häkchen, ist das Element zu sehen, sonst nicht.\n\nDas geht in drei Schritten:\n\n1. Erstelle das Checkbox-Input-Feld im :place[Template-Editor].\n2. Konfiguriere das Input-Feld im :place[Input Fields View].\n3. Teste das Input-Feld im :place[Design-Generator].\n\n\n## Checkbox-Input-Feld erstellen\n\n1. :click[Klicke] in der :place[Toolbar] oben auf das Quadrat mit dem Plus. Das ist das Werkzeug **Create Input Field**.\n\n   ![Toolbar mit markiertem Werkzeug Create Input Field.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic){width=\"894\"}\n\n2. :click[Klicke] auf das Element, das Nutzer ein- und ausblenden sollen. Das geht auf dem :place[Canvas] oder im :place[Layers-Panel].\n3. Je nach Element geht es so weiter:\n\n   - :right Für einen Text, ein Bild oder eine Form: Ein Popup öffnet sich. :click[Klicke] darin auf **Select Custom Property**.\n\n     ![Popup für einen Text mit markiertem Button Select Custom Property, rechts eine Vorschau des Input-Felds.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14){width=\"894\"}\n\n   - :right Für eine Gruppe oder Maske: Es öffnet sich kein Popup. Mach direkt mit Schritt 4 weiter.\n\n   Auf dem :place[Canvas] steht jetzt der Hinweis „Select a property to connect a field.“\n4. :click[Klicke] im :place[Properties-Panel] im Abschnitt **Appearance** auf die Eigenschaft **Visibility**. Sie steht ganz unten im Abschnitt, neben **Opacity**, und zeigt „true“. Ein Popup **Create Field** öffnet sich.\n\n   ::trouble{symptom=\"Visibility ist nicht zu sehen?\"}\n   Bei Gruppen und Masken ist der Abschnitt **Appearance** zugeklappt. :click[Klicke] auf **Appearance**, um ihn aufzuklappen.\n   ::\n\n   ![Abschnitt Appearance eines ausgewählten Rechtecks mit markierter Eigenschaft Visibility neben Opacity.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-show-or-hide-element-01\u002Fpublic){width=\"938\"}\n\n5. :click[Klicke] auf **Checkbox**. Das Checkbox-Input-Feld ist jetzt erstellt und mit der Sichtbarkeit des Elements verbunden.\n\n   ![Popup Create Field für die Eigenschaft Visibility mit den Feldtypen Select und Checkbox.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-checkbox-input-fields-01\u002Fpublic){width=\"504\"}\n\n::tip\nMehrere Elemente auf einmal ein- und ausblenden: Fasse sie zu einer Gruppe zusammen und verbinde die **Visibility** der Gruppe mit dem Checkbox-Input-Feld.\n::\n\n## Input-Feld konfigurieren\n\nIm :place[Input Fields View] siehst du alle Input-Felder deines Templates und konfigurierst sie.\n\n1. :click[Klicke] oben rechts in der :place[Toolbar] auf **Input Fields**. Der :place[Input Fields View] öffnet sich.\n\n   ![Toolbar oben rechts mit markiertem Button Input Fields.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic){width=\"894\"}\n\n2. :look[Schau] ganz unten in der Liste nach deinem neuen Input-Feld. Es heißt **Toggle**. Sein Häkchen zeigt, ob das Element gerade sichtbar ist. Das ist der Standardwert, mit dem Nutzer starten.\n3. :click[Klicke] auf **Toggle** und tippe eine Überschrift ein, die sagt, worum es geht, zum Beispiel „Logo anzeigen“. Nutzer sehen sie im :place[Design-Generator] über der Checkbox.\n4. :click[Klicke] auf das Zahnrad rechts im Input-Feld. Die Einstellungen öffnen sich.\n5. :type[Gib] bei **Label** den Text ein, der neben der Checkbox stehen soll. Das Label ist optional.\n6. :click[Klicke] auf **Done**. Die Einstellungen schließen sich.\n7. :click[Klicke] oben rechts auf :close[×], um den :place[Input Fields View] zu schließen.\n\n::warning\nDer :place[Input Fields View] ist keine Vorschau. Setzt oder entfernst du hier das Häkchen, ändert das den Standardwert dauerhaft. Dasselbe gilt für das Auge im :place[Layers-Panel]: Blendest du das Element dort aus, startet die Checkbox im :place[Design-Generator] ohne Häkchen. Teste Input-Felder im :place[Design-Generator].\n::\n\n## Input-Feld im Design-Generator testen\n\nDer :place[Design-Generator] ist die Seite, auf der Nutzer dein Template ausfüllen und ihr Design exportieren können. Hier kannst du das Input-Feld gefahrlos testen: Was du dort auswählst, ändert dein Template nicht dauerhaft.\n\n1. Wenn du mit deinen Input-Feldern fertig bist, :click[klicke] oben rechts auf **Share** und dann auf **Publish Template Link**. Hast du das Template schon veröffentlicht, heißt der Menüpunkt **Open Template Campaign**. Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.\n2. :click[Klicke] auf **Copy URL** und öffne den Link in einem neuen Browser-Tab. Der :place[Design-Generator] öffnet sich.\n3. :click[Klicke] auf die Checkbox. Prüfe, ob das Element verschwindet und beim nächsten Klick wieder erscheint.\n\n::related\n- [Wie Elemente, Eigenschaften und Input-Felder zusammenhängen](\u002Fde\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields)\n- [Elemente gruppieren: zusammen bewegen und anordnen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements)\n- [Checkbox-Input-Felder](\u002Fde\u002Fhelp\u002Finput-fields\u002Fcheckbox-input-fields)\n- [IF \u002F ELSE-Logik: zwischen zwei Ergebnissen umschalten](\u002Fde\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-if-else-logic)\n::\n",{"title":5,"description":383},"help\u002Finput-fields\u002Fshow-or-hide-element.de","2026-10-22","Xy69Q_X1XJYGuVpPHILFnKIuMR8rCcwGBuHRDdVVsHs",1792680564108]