{"id":216,"date":"2026-06-12T18:35:55","date_gmt":"2026-06-12T18:35:55","guid":{"rendered":"https:\/\/folie.ch\/designer\/"},"modified":"2026-06-25T07:49:03","modified_gmt":"2026-06-25T07:49:03","slug":"designer","status":"publish","type":"page","link":"https:\/\/folie.ch\/en\/designer\/","title":{"rendered":"Designer"},"content":{"rendered":"<div class=\"sdx sdx-k-textil\" id=\"sdxApp\" data-product=\"0\" lang=\"en-GB\" data-side=\"front\" aria-label=\"Designer\">\n\n  <header class=\"sdx-top\">\n    <a class=\"sdx-back\" href=\"https:\/\/folie.ch\/en\/#textil\" aria-label=\"Back to overview\"><i data-i=\"arrow-left\"><\/i><\/a>\n    <a class=\"sdx-logo fdx-logo\" href=\"https:\/\/folie.ch\/en\/\" aria-label=\"folie.ch \u2013 Home page\">\n      <svg viewBox=\"0 0 210 64\" aria-hidden=\"true\"><path d=\"M8 50 L8 14 Q8 8 14 8 L44 8 L56 20 L56 50 Q56 56 50 56 L14 56 Q8 56 8 50 Z\" fill=\"#161616\"\/><path d=\"M44 8 L44 20 L56 20 Z\" fill=\"#ff6a13\"\/><text x=\"66\" y=\"44\" class=\"fdx-logo-t\">folie<tspan class=\"fdx-logo-dot\">.ch<\/tspan><\/text><\/svg>\n    <\/a>\n    <div class=\"sdx-prod\">\n      <button type=\"button\" class=\"sdx-prod-name sdx-prod-switch\" data-act=\"switch-product\" title=\"Change product \u2013 design is transferred\"><span>Design a product<\/span><i data-i=\"chevron-down\"><\/i><\/button>\n      <div class=\"sdx-prod-meta\"><button type=\"button\" class=\"sdx-colorchip\" data-act=\"pick-color\" title=\"Choose colour\"><i class=\"sdx-cdot\" aria-hidden=\"true\"><\/i><span data-bind=\"colorName\"><\/span><\/button><span class=\"sdx-dot\" aria-hidden=\"true\">\u00b7<\/span><span data-bind=\"sideName\">Front<\/span><\/div>\n    <\/div>\n    <div class=\"sdx-colors\" id=\"sdxColors\" role=\"radiogroup\" aria-label=\"Product colour\"><\/div>\n    <div class=\"sdx-top-sp\"><\/div>\n    <span class=\"sdx-savestate\" id=\"sdxSaveState\" aria-live=\"polite\"><\/span>\n    <div class=\"sdx-price\" id=\"sdxPrice\" aria-live=\"polite\"><b>\u2013<\/b><small><\/small><\/div>\n    <div class=\"sdx-menu-wrap\">\n      <button type=\"button\" class=\"sdx-iconbtn\" id=\"sdxMenuBtn\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-label=\"More actions\"><i data-i=\"dots\"><\/i><\/button>\n      <div class=\"sdx-menu\" id=\"sdxMenu\" role=\"menu\" hidden>\n        <button type=\"button\" role=\"menuitem\" data-act=\"switch-product\"><i data-i=\"arrows-exchange\"><\/i>Other product \u2013 keep design<\/button>\n        <button type=\"button\" role=\"menuitem\" data-act=\"restart\"><i data-i=\"refresh\"><\/i>Start over<\/button>\n        <button type=\"button\" role=\"menuitem\" data-act=\"help\"><i data-i=\"info-circle\"><\/i>Tips &amp; shortcuts<\/button>\n        <a role=\"menuitem\" class=\"sdx-menu-link\" href=\"https:\/\/folie.ch\/en\/designer-anleitung\/\" target=\"_blank\" rel=\"noopener\"><i data-i=\"photo\"><\/i>Illustrated guide<\/a>\n        <div class=\"sdx-menu-admin\" hidden>\n          <div class=\"sdx-menu-sep\">Admin<\/div>\n          <button type=\"button\" role=\"menuitem\" data-act=\"export-png\"><i data-i=\"file-type-png\"><\/i>PNG Druckdatei (diese Seite)<\/button>\n          <button type=\"button\" role=\"menuitem\" data-act=\"export-svg\"><i data-i=\"file-type-svg\"><\/i>SVG 1:1 (diese Seite)<\/button>\n          <button type=\"button\" role=\"menuitem\" data-act=\"export-mockup\"><i data-i=\"photo\"><\/i>Ansicht JPG (diese Seite)<\/button>\n          <button type=\"button\" role=\"menuitem\" data-act=\"save-json\"><i data-i=\"device-floppy\"><\/i>Design speichern (JSON)<\/button>\n          <button type=\"button\" role=\"menuitem\" data-act=\"load-json\"><i data-i=\"folder-open\"><\/i>Design laden (JSON)<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n    <button type=\"button\" class=\"sdx-btn sdx-btn-hot sdx-next\" data-act=\"order\">\n      <span class=\"sdx-next-l\">Next<\/span><span class=\"sdx-next-r\"><i data-i=\"arrow-right\"><\/i><span class=\"sdx-next-txt\">Sizes &amp; quantity<\/span><\/span>\n    <\/button>\n  <\/header>\n\n  <div class=\"sdx-body\">\n    <nav class=\"sdx-rail\" id=\"sdxRail\" aria-label=\"Tools\">\n            <button type=\"button\" class=\"sdx-tool sdx-mobile-only\" data-panel=\"produkt\"><i data-i=\"shirt\"><\/i><span>Product<\/span><\/button>\n            <button type=\"button\" class=\"sdx-tool\" data-panel=\"text\"><i data-i=\"typography\"><\/i><span>Text<\/span><\/button>\n      <button type=\"button\" class=\"sdx-tool\" data-panel=\"bild\"><i data-i=\"photo\"><\/i><span>Image<\/span><\/button>\n      <button type=\"button\" class=\"sdx-tool\" data-panel=\"sprueche\"><i data-i=\"quote\"><\/i><span>Slogans<\/span><\/button>\n      <button type=\"button\" class=\"sdx-tool\" data-panel=\"grafiken\"><i data-i=\"sticker\"><\/i><span>Graphics<\/span><\/button>\n      <button type=\"button\" class=\"sdx-tool\" data-panel=\"vorlagen\"><i data-i=\"layout-grid\"><\/i><span>Templates<\/span><\/button>\n      <button type=\"button\" class=\"sdx-tool\" data-panel=\"ebenen\"><i data-i=\"stack-2\"><\/i><span>Layers<\/span><\/button>\n    <\/nav>\n\n    <nav class=\"sdx-ctx\" id=\"sdxCtx\" aria-label=\"Edit selection\" hidden><\/nav>\n\n    <aside class=\"sdx-panel sdx-sheet\" id=\"sdxPanel\" aria-label=\"Tool panel\">\n      <div class=\"sdx-grab\" aria-hidden=\"true\"><\/div>\n\n      <section class=\"sdx-pane\" data-panel=\"produkt\" aria-labelledby=\"sdxH-produkt\">\n                <div class=\"sdx-pane-head\"><h2 id=\"sdxH-produkt\">Product<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <p class=\"sdx-pane-prod\">Design a product<\/p>\n        <div class=\"sdx-label\">Colour: <b data-bind=\"colorName\"><\/b><\/div>\n        <div class=\"sdx-colors sdx-colors-lg\" id=\"sdxColorsM\" role=\"radiogroup\" aria-label=\"Product colour\"><\/div>\n        <div class=\"sdx-label\">Print area<\/div>\n        <p class=\"sdx-areainfo\" data-bind=\"areaInfo\"><\/p>\n                <div class=\"sdx-row sdx-row-wrap\">\n          <button type=\"button\" class=\"sdx-btn sdx-btn-ghost sdx-btn-sm\" data-act=\"switch-product\"><i data-i=\"arrows-exchange\"><\/i>Motif on another product<\/button>\n          <button type=\"button\" class=\"sdx-btn sdx-btn-ghost sdx-btn-sm\" data-act=\"restart\"><i data-i=\"refresh\"><\/i>Start over<\/button>\n        <\/div>\n      <\/section>\n\n      <section class=\"sdx-pane\" data-panel=\"text\" aria-labelledby=\"sdxH-text\">\n        <div class=\"sdx-pane-head\"><h2 id=\"sdxH-text\">Text<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-primary sdx-btn-block\" data-act=\"add-text\"><i data-i=\"plus\"><\/i>Add text<\/button>\n        <div class=\"sdx-label\">Or start with a style<\/div>\n        <div class=\"sdx-presets\" id=\"sdxTextPresets\"><\/div>\n        <p class=\"sdx-hint\">Tip: tap a text, then change the font, colour, outline or curve.<\/p>\n      <\/section>\n\n      <section class=\"sdx-pane\" data-panel=\"bild\" aria-labelledby=\"sdxH-bild\">\n        <div class=\"sdx-pane-head\"><h2 id=\"sdxH-bild\">Image \/ logo<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <label class=\"sdx-drop\" id=\"sdxDrop\" tabindex=\"0\">\n          <input type=\"file\" id=\"sdxFile\" accept=\"image\/png,image\/jpeg,image\/webp,image\/gif,image\/svg+xml,.png,.jpg,.jpeg,.webp,.gif,.svg,.heic,.heif\" hidden>\n          <i data-i=\"cloud-upload\"><\/i>\n          <b>Upload an image<\/b>\n          <span class=\"sdx-desktop-only\">drag it here, click or paste with Ctrl+V<\/span>\n          <span class=\"sdx-mobile-only\">Choose a photo or file<\/span>\n        <\/label>\n        <ul class=\"sdx-facts\">\n          <li>PNG, JPG, WebP, GIF or SVG \u00b7 max. <span data-bind=\"maxMB\">25<\/span> MB<\/li>\n          <li>For a sharp print: at least 2000 px wide<\/li>\n          <li>You can remove a plain background afterwards<\/li>\n        <\/ul>\n        <div class=\"sdx-uploads-wrap\" id=\"sdxUploadsWrap\" hidden>\n          <div class=\"sdx-label\">Your images<\/div>\n          <div class=\"sdx-uploads\" id=\"sdxUploads\"><\/div>\n        <\/div>\n        <p class=\"sdx-hint\">Only upload images you hold the rights to.<\/p>\n      <\/section>\n\n      <section class=\"sdx-pane\" data-panel=\"sprueche\" aria-labelledby=\"sdxH-sprueche\">\n        <div class=\"sdx-pane-head\"><h2 id=\"sdxH-sprueche\">Slogans<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <div class=\"sdx-search\"><i data-i=\"search\"><\/i><input type=\"search\" id=\"sdxMotiveSearch\" placeholder=\"Search slogans\u2026\" aria-label=\"Search slogans\" autocomplete=\"off\"><\/div>\n        <div class=\"sdx-row\">\n          <select id=\"sdxMotiveCat\" aria-label=\"Category\"><option value=\"\">All categories<\/option><\/select>\n          <select id=\"sdxMotiveLang\" aria-label=\"Language\"><option value=\"\">All languages<\/option><\/select>\n        <\/div>\n        <div class=\"sdx-label\">Choose a style \u2013 then tap a slogan below<\/div>\n        <div class=\"sdx-stylepick\" id=\"sdxMotifStylePick\" role=\"radiogroup\" aria-label=\"Slogan style\"><\/div>\n        <div class=\"sdx-motives\" id=\"sdxMotiveList\" aria-live=\"polite\"><p class=\"sdx-hint\">Loading slogans\u2026<\/p><\/div>\n      <\/section>\n\n      <section class=\"sdx-pane\" data-panel=\"grafiken\" aria-labelledby=\"sdxH-grafiken\">\n        <div class=\"sdx-pane-head\"><h2 id=\"sdxH-grafiken\">Graphics<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <div class=\"sdx-search\"><i data-i=\"search\"><\/i><input type=\"search\" id=\"sdxClipSearch\" placeholder=\"Search graphics, e.g. bike, heart, dog\u2026\" aria-label=\"Search graphics\" autocomplete=\"off\"><\/div>\n        <div class=\"sdx-chips sdx-chips-scroll\" id=\"sdxClipCats\" role=\"tablist\" aria-label=\"Categories\"><\/div>\n        <p class=\"sdx-count\" id=\"sdxClipCount\" aria-live=\"polite\"><\/p>\n        <div class=\"sdx-clipgrid\" id=\"sdxClipGrid\"><\/div>\n        <p class=\"sdx-hint\">All graphics are single-colour and can be recoloured freely.<\/p>\n        <div class=\"sdx-qr\">\n          <div class=\"sdx-label\">QR code (e.g. to your website)<\/div>\n          <div class=\"sdx-row\"><input type=\"text\" id=\"sdxQrText\" placeholder=\"www.your-company.ch\" aria-label=\"QR code content\" autocomplete=\"off\"><button type=\"button\" class=\"sdx-btn sdx-btn-primary sdx-btn-sm\" data-act=\"add-qr\"><i data-i=\"qrcode\"><\/i>Paste<\/button><\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"sdx-pane\" data-panel=\"vorlagen\" aria-labelledby=\"sdxH-vorlagen\">\n        <div class=\"sdx-pane-head\"><h2 id=\"sdxH-vorlagen\">Templates<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <div class=\"sdx-search\" hidden><i data-i=\"search\"><\/i><input type=\"search\" id=\"sdxTplSearch\" placeholder=\"Search templates, e.g. hen party, club, birthday\u2026\" aria-label=\"Search templates\" autocomplete=\"off\"><\/div>\n        <div class=\"sdx-chips sdx-chips-scroll\" id=\"sdxTplCats\" hidden><\/div>\n        <p class=\"sdx-count\" id=\"sdxTplCount\" aria-live=\"polite\"><\/p>\n        <div class=\"sdx-tplgrid\" id=\"sdxTplGrid\"><\/div>\n        <p class=\"sdx-hint\">You can change all the texts of a template afterwards.<\/p>\n      <\/section>\n\n      <section class=\"sdx-pane\" data-panel=\"ebenen\" aria-labelledby=\"sdxH-ebenen\">\n        <div class=\"sdx-pane-head\"><h2 id=\"sdxH-ebenen\">Layers<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n        <div class=\"sdx-row sdx-layer-tools\">\n          <button type=\"button\" class=\"sdx-chipbtn\" data-act=\"select-all\"><i data-i=\"layout-grid\"><\/i>Select all<\/button>\n          <button type=\"button\" class=\"sdx-chipbtn\" data-act=\"multi\" aria-pressed=\"false\"><i data-i=\"stack-2\"><\/i>Select several<\/button>\n        <\/div>\n        <ul class=\"sdx-layers\" id=\"sdxLayers\" aria-label=\"Layers, top = front\"><\/ul>\n        <p class=\"sdx-hint\" id=\"sdxLayersHint\">The top of the list is in front. Drag the handle to reorder.<\/p>\n      <\/section>\n    <\/aside>\n\n    <main class=\"sdx-stage\" id=\"sdxStage\" aria-label=\"Design area\">\n      <div class=\"sdx-canvas-host\" id=\"sdxCanvasHost\"><canvas id=\"sdxCanvas\"><\/canvas><\/div>\n\n            <div class=\"sdx-sides\" role=\"group\" aria-label=\"Choose side\">\n        <button type=\"button\" class=\"sdx-side is-on\" data-side=\"front\" aria-pressed=\"true\"><canvas class=\"sdx-thumb\" width=\"168\" height=\"168\"><\/canvas><span class=\"sdx-side-l\">Front<\/span><span class=\"sdx-side-state\">empty<\/span><\/button>\n        <button type=\"button\" class=\"sdx-side\" data-side=\"back\" aria-pressed=\"false\"><canvas class=\"sdx-thumb\" width=\"168\" height=\"168\"><\/canvas><span class=\"sdx-side-l\">Back<\/span><span class=\"sdx-side-state\">empty<\/span><\/button>\n      <\/div>\n      \n      <div class=\"sdx-warn\" id=\"sdxWarn\" role=\"status\" hidden>\n        <i data-i=\"alert-triangle\"><\/i><span id=\"sdxWarnText\">Parts are outside the print area<\/span>\n        <button type=\"button\" data-act=\"fit-out\">Fit<\/button>\n        <button type=\"button\" data-act=\"glass-on\" hidden>Use perforated film<\/button>\n      <\/div>\n\n      <div class=\"sdx-empty\" id=\"sdxEmpty\" hidden>\n        <p><b>Get started!<\/b> Add text, an image or a slogan.<\/p>\n        <div class=\"sdx-empty-btns\">\n          <button type=\"button\" data-act=\"add-text\"><i data-i=\"typography\"><\/i>Text<\/button>\n          <button type=\"button\" data-act=\"open-panel\" data-panel=\"bild\"><i data-i=\"photo\"><\/i>Image<\/button>\n          <button type=\"button\" data-act=\"open-panel\" data-panel=\"sprueche\"><i data-i=\"quote\"><\/i>Slogan<\/button>          <button type=\"button\" data-act=\"open-panel\" data-panel=\"vorlagen\"><i data-i=\"layout-grid\"><\/i>Template<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"sdx-badge\" id=\"sdxBadge\" hidden><\/div>\n\n      <div class=\"sdx-stagebar\" role=\"toolbar\" aria-label=\"View\">\n        <button type=\"button\" class=\"sdx-iconbtn\" data-act=\"undo\" aria-label=\"Undo (Ctrl+Z)\" title=\"Undo (Ctrl+Z)\" disabled><i data-i=\"arrow-back-up\"><\/i><\/button>\n        <button type=\"button\" class=\"sdx-iconbtn\" data-act=\"redo\" aria-label=\"Redo (Ctrl+Y)\" title=\"Redo (Ctrl+Y)\" disabled><i data-i=\"arrow-forward-up\"><\/i><\/button>\n        <button type=\"button\" class=\"sdx-iconbtn sdx-pastebtn\" data-act=\"paste\" aria-label=\"Paste (Ctrl+V)\" title=\"Paste (Ctrl+V)\" hidden><i data-i=\"clipboard\"><\/i><span>Paste<\/span><\/button>\n        <span class=\"sdx-sep sdx-zoomonly\"><\/span>\n        <button type=\"button\" class=\"sdx-iconbtn sdx-zoomonly\" data-act=\"zoom-out\" aria-label=\"Zoom out\" title=\"Zoom out\"><i data-i=\"minus\"><\/i><\/button>\n        <button type=\"button\" class=\"sdx-zoomlabel sdx-zoomonly\" data-act=\"zoom-reset\" id=\"sdxZoomLabel\" title=\"Fit view\">100 %<\/button>\n        <button type=\"button\" class=\"sdx-iconbtn sdx-zoomonly\" data-act=\"zoom-in\" aria-label=\"Zoom in\" title=\"Zoom in\"><i data-i=\"plus\"><\/i><\/button>\n        <span class=\"sdx-sep\"><\/span>\n        <button type=\"button\" class=\"sdx-iconbtn sdx-previewbtn\" data-act=\"preview\" aria-pressed=\"false\" title=\"Preview without guides\"><i data-i=\"eye\"><\/i><span>Preview<\/span><\/button>\n      <\/div>\n\n      <div class=\"sdx-loading\" id=\"sdxLoading\" role=\"status\"><div class=\"sdx-spinner\"><\/div><span>Loading the designer\u2026<\/span><\/div>\n    <\/main>\n\n    <aside class=\"sdx-insp sdx-sheet\" id=\"sdxInsp\" aria-label=\"Properties\">\n      <div class=\"sdx-grab\" aria-hidden=\"true\"><\/div>\n      <div class=\"sdx-insp-head\"><h2 id=\"sdxInspTitle\">Properties<\/h2><button type=\"button\" class=\"sdx-done\" data-act=\"close-sheet\">Done<\/button><\/div>\n\n      <section class=\"sdx-sec\" data-sec=\"empty\" data-kinds=\"none\">\n        <div class=\"sdx-emptyinsp\">\n          <i data-i=\"arrows-move\"><\/i>\n          <p><b>Nothing selected<\/b><br>Click an element on the product to edit it.<\/p>\n        <\/div>\n                <h3>Print area <span data-bind=\"sideName\">Front<\/span><\/h3>\n        <p class=\"sdx-areainfo\" data-bind=\"areaInfo\"><\/p>\n        <h3>Good to know<\/h3>\n        <ul class=\"sdx-facts\">\n          <li>Only what is inside the dashed area is printed.<\/li>\n          <li>Printing on the back: <span data-bind=\"backPrice\">+ CHF 10.00<\/span> per item.<\/li>\n          <li data-bind=\"tierInfo\">Volume discount from 10 items.<\/li>\n          <li>Your design is saved automatically.<\/li>\n        <\/ul>\n              <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"textedit\" data-kinds=\"text\" data-title=\"Edit text\">\n        <h3><label for=\"sdxTextInput\">Text<\/label><\/h3>\n        <textarea id=\"sdxTextInput\" rows=\"3\" spellcheck=\"false\" placeholder=\"Your text\"><\/textarea>\n        <p class=\"sdx-hint sdx-warnhint\" id=\"sdxGlyphHint\" hidden><\/p>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"font\" data-kinds=\"text\" data-title=\"Font\">\n        <h3>Font<\/h3>\n        <button type=\"button\" class=\"sdx-fontbtn\" id=\"sdxFontBtn\" aria-expanded=\"false\" aria-controls=\"sdxFontList\"><span id=\"sdxFontName\">Montserrat<\/span><i data-i=\"chevron-down\"><\/i><\/button>\n        <div class=\"sdx-fontlist\" id=\"sdxFontList\" role=\"listbox\" aria-label=\"Fonts\"><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"color\" data-kinds=\"text clipart\" data-title=\"Colour\">\n        <h3>Colour<\/h3>\n        <div class=\"sdx-palette\" data-target=\"fill\"><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"style\" data-kinds=\"text\" data-title=\"Size &amp; style\">\n        <h3>Size &amp; style<\/h3>\n        <div class=\"sdx-field\"><label for=\"sdxSize\">Size<\/label><input type=\"range\" id=\"sdxSize\" min=\"6\" max=\"400\" step=\"1\"><output id=\"sdxSizeOut\"><\/output><\/div>\n        <div class=\"sdx-row sdx-seg\">\n          <button type=\"button\" class=\"sdx-segbtn\" data-act=\"bold\" aria-pressed=\"false\" aria-label=\"Bold\" title=\"Bold\"><i data-i=\"bold\"><\/i><\/button>\n          <button type=\"button\" class=\"sdx-segbtn\" data-act=\"italic\" aria-pressed=\"false\" aria-label=\"Italic\" title=\"Italic\"><i data-i=\"italic\"><\/i><\/button>\n          <span class=\"sdx-sep\"><\/span>\n          <button type=\"button\" class=\"sdx-segbtn\" data-act=\"align\" data-v=\"left\" aria-label=\"Align left\" title=\"Align left\"><i data-i=\"align-left\"><\/i><\/button>\n          <button type=\"button\" class=\"sdx-segbtn\" data-act=\"align\" data-v=\"center\" aria-label=\"Centred\" title=\"Centred\"><i data-i=\"align-center\"><\/i><\/button>\n          <button type=\"button\" class=\"sdx-segbtn\" data-act=\"align\" data-v=\"right\" aria-label=\"Align right\" title=\"Align right\"><i data-i=\"align-right\"><\/i><\/button>\n        <\/div>\n        <div class=\"sdx-field\"><label for=\"sdxLine\">Line spacing<\/label><input type=\"range\" id=\"sdxLine\" min=\"0.6\" max=\"2.2\" step=\"0.05\"><output id=\"sdxLineOut\"><\/output><\/div>\n        <div class=\"sdx-field\"><label for=\"sdxSpacing\">Letter spacing<\/label><input type=\"range\" id=\"sdxSpacing\" min=\"-100\" max=\"800\" step=\"10\"><output id=\"sdxSpacingOut\"><\/output><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"effects\" data-kinds=\"text\" data-title=\"Outline &amp; curve\">\n        <h3>Outline<\/h3>\n        <div class=\"sdx-field\"><label for=\"sdxOutline\">Thickness<\/label><input type=\"range\" id=\"sdxOutline\" min=\"0\" max=\"16\" step=\"1\"><output id=\"sdxOutlineOut\"><\/output><\/div>\n        <div class=\"sdx-palette sdx-palette-sm\" data-target=\"stroke\"><\/div>\n        <h3>Curve<\/h3>\n        <div class=\"sdx-field\"><label for=\"sdxCurve\">Curvature<\/label><input type=\"range\" id=\"sdxCurve\" min=\"-100\" max=\"100\" step=\"1\"><output id=\"sdxCurveOut\"><\/output><\/div>\n        <p class=\"sdx-hint\" id=\"sdxCurveHint\" hidden>Curves only work with single-line text.<\/p>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"quality\" data-kinds=\"image\" data-title=\"Print quality\">\n        <h3>Print quality<\/h3>\n        <div class=\"sdx-quality\" id=\"sdxQuality\"><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"group\" data-kinds=\"multi group\" data-title=\"Group\">\n        <h3>Several items<\/h3>\n        <p class=\"sdx-hint sdx-only-multi\">Selected items can be moved, rotated and resized together. \u00abGroup\u00bb keeps them together permanently.<\/p>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-hot sdx-only-multi\" data-act=\"group\"><i data-i=\"stack-2\"><\/i>Group<\/button>\n        <p class=\"sdx-hint sdx-only-group\">These items are grouped. Ungroup them to edit individual parts.<\/p>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-ghost sdx-only-group\" data-act=\"ungroup\"><i data-i=\"layers-subtract\"><\/i>Ungroup<\/button>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"shape\" data-kinds=\"image\" data-title=\"Crop &amp; shape\">\n        <h3>Crop &amp; shape<\/h3>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-ghost sdx-crop-btn\" data-act=\"crop\"><i data-i=\"maximize-off\"><\/i>Crop<\/button>\n        <div class=\"sdx-shapes\" id=\"sdxShapes\" role=\"group\" aria-label=\"Shape\"><\/div>\n        <div class=\"sdx-field\"><label for=\"sdxBorder\">Border<\/label><input type=\"range\" id=\"sdxBorder\" min=\"0\" max=\"10\" step=\"0.5\"><output id=\"sdxBorderOut\"><\/output><\/div>\n        <div class=\"sdx-row sdx-border-colors\" id=\"sdxBorderColors\" role=\"group\" aria-label=\"Border colour\"><\/div>\n        <p class=\"sdx-hint\">Tip: pick a shape, then move the frame with \u00abCrop\u00bb. A white border gives a sticker look.<\/p>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"bg\" data-kinds=\"image\" data-title=\"Remove background\">\n        <h3>Remove background<\/h3>\n        <button type=\"button\" class=\"sdx-btn sdx-ai-bg\" data-act=\"ai-bg\"><i data-i=\"sparkles\"><\/i>Remove background automatically<\/button>\n        <p class=\"sdx-hint\">For photos: people, pets, cars \u2026 Takes about 10 seconds.<\/p>\n        <label class=\"sdx-switch\"><input type=\"checkbox\" id=\"sdxBgOn\"><span><\/span>Remove plain background<\/label>\n        <div class=\"sdx-field\" id=\"sdxBgTolWrap\"><label for=\"sdxBgTol\">Tolerance<\/label><input type=\"range\" id=\"sdxBgTol\" min=\"0\" max=\"100\" step=\"1\"><output id=\"sdxBgTolOut\"><\/output><\/div>\n        <label class=\"sdx-check\" id=\"sdxBgInnerWrap\"><input type=\"checkbox\" id=\"sdxBgInner\"> Enclosed areas too (e.g. inside letters)<\/label>\n        <p class=\"sdx-hint\">Ideal for logos on a white background. Not suitable for photos of people.<\/p>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"adjust\" data-kinds=\"image clipart\" data-title=\"Adjust\">\n        <h3>Adjust<\/h3>\n        <div class=\"sdx-row sdx-row-wrap\">\n          <button type=\"button\" class=\"sdx-chipbtn sdx-img-only\" data-act=\"invert\" aria-pressed=\"false\"><i data-i=\"contrast-2\"><\/i>Invert<\/button>\n          <button type=\"button\" class=\"sdx-chipbtn sdx-img-only\" data-act=\"gray\" aria-pressed=\"false\"><i data-i=\"color-filter\"><\/i>Greyscale<\/button>\n          <button type=\"button\" class=\"sdx-chipbtn\" data-act=\"flipx\" aria-pressed=\"false\"><i data-i=\"flip-vertical\"><\/i>Mirror<\/button>\n          <button type=\"button\" class=\"sdx-chipbtn\" data-act=\"flipy\" aria-pressed=\"false\"><i data-i=\"flip-horizontal\"><\/i>Upside down<\/button>\n        <\/div>\n        <div class=\"sdx-field\"><label for=\"sdxOpacity\">Opacity<\/label><input type=\"range\" id=\"sdxOpacity\" min=\"10\" max=\"100\" step=\"1\"><output id=\"sdxOpacityOut\"><\/output><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"motif\" data-kinds=\"motif\" data-title=\"Edit slogan\">\n        <h3><label for=\"sdxMotifText\">Slogan<\/label><\/h3>\n        <textarea id=\"sdxMotifText\" rows=\"3\" spellcheck=\"false\"><\/textarea>\n        <p class=\"sdx-hint\">Press Enter for a line break \u2013 otherwise lines break automatically.<\/p>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"motifstyle\" data-kinds=\"motif\" data-title=\"Style\">\n        <h3>Style<\/h3>\n        <div class=\"sdx-stylepick sdx-stylepick-insp\" id=\"sdxMotifStyles\" role=\"radiogroup\" aria-label=\"Style\"><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"motifcolor\" data-kinds=\"motif\" data-title=\"Colours\">\n        <h3>Text colour<\/h3>\n        <div class=\"sdx-palette sdx-palette-sm\" data-target=\"motifInk\"><\/div>\n        <h3>Accent colour<\/h3>\n        <div class=\"sdx-palette sdx-palette-sm\" data-target=\"motifAccent\"><\/div>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"placeholder\" data-kinds=\"placeholder\" data-title=\"Logo placeholder\">\n        <h3>Logo placeholder<\/h3>\n        <p class=\"sdx-hint\">The placeholder is not printed. Upload your logo \u2013 it will be placed exactly here.<\/p>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-primary sdx-btn-block\" data-act=\"replace-placeholder\"><i data-i=\"cloud-upload\"><\/i>Upload logo<\/button>\n      <\/section>\n\n      <section class=\"sdx-sec\" data-sec=\"arrange\" data-kinds=\"text image clipart motif placeholder multi group\" data-title=\"Arrange\">\n        <h3>Arrange <small data-bind=\"objSize\"><\/small><\/h3>\n        <div class=\"sdx-align\" role=\"group\" aria-labelledby=\"sdxAlignLbl\">\n          <div class=\"sdx-align-head\"><span id=\"sdxAlignLbl\">Align<\/span><small data-bind=\"alignRef\">to the print area<\/small><\/div>\n          <div class=\"sdx-align-row\">\n            <button type=\"button\" data-act=\"obj-align\" data-v=\"left\" title=\"Align left\" aria-label=\"Align left\"><i data-i=\"layout-align-left\"><\/i><\/button>\n            <button type=\"button\" data-act=\"obj-align\" data-v=\"cx\" title=\"Centre horizontally\" aria-label=\"Centre horizontally\"><i data-i=\"layout-align-center\"><\/i><\/button>\n            <button type=\"button\" data-act=\"obj-align\" data-v=\"right\" title=\"Align right\" aria-label=\"Align right\"><i data-i=\"layout-align-right\"><\/i><\/button>\n            <button type=\"button\" data-act=\"obj-align\" data-v=\"top\" title=\"Align top\" aria-label=\"Align top\"><i data-i=\"layout-align-top\"><\/i><\/button>\n            <button type=\"button\" data-act=\"obj-align\" data-v=\"cy\" title=\"Centre vertically\" aria-label=\"Centre vertically\"><i data-i=\"layout-align-middle\"><\/i><\/button>\n            <button type=\"button\" data-act=\"obj-align\" data-v=\"bottom\" title=\"Align bottom\" aria-label=\"Align bottom\"><i data-i=\"layout-align-bottom\"><\/i><\/button>\n          <\/div>\n          <div class=\"sdx-align-dist\" data-bind=\"alignDist\" hidden>\n            <button type=\"button\" data-act=\"obj-distribute\" data-v=\"x\"><i data-i=\"layout-distribute-vertical\"><\/i>Distribute horizontally<\/button>\n            <button type=\"button\" data-act=\"obj-distribute\" data-v=\"y\"><i data-i=\"layout-distribute-horizontal\"><\/i>Distribute vertically<\/button>\n          <\/div>\n        <\/div>\n        <div class=\"sdx-grid-btns\">\n          <button type=\"button\" data-act=\"fit\"><i data-i=\"arrows-maximize\"><\/i>Fit to print area<\/button>\n          <button type=\"button\" data-act=\"duplicate\"><i data-i=\"stack-2\"><\/i>Duplicate<\/button>\n          <button type=\"button\" data-act=\"copy\" title=\"Copy (Ctrl+C) \u2013 then paste on another side\"><i data-i=\"copy\"><\/i>Copy<\/button>\n          <button type=\"button\" data-act=\"forward\"><i data-i=\"stack-front\"><\/i>Bring forward<\/button>\n          <button type=\"button\" data-act=\"backward\"><i data-i=\"stack-back\"><\/i>Send backward<\/button>\n          <button type=\"button\" data-act=\"other-side\" class=\"sdx-needs-back\"><i data-i=\"arrows-exchange\"><\/i><span data-bind=\"otherSide\">To the back<\/span><\/button>\n          <button type=\"button\" data-act=\"lock\" aria-pressed=\"false\"><i data-i=\"lock\"><\/i><span>Lock<\/span><\/button>\n          <button type=\"button\" data-act=\"multi\" aria-pressed=\"false\" class=\"sdx-no-multi\"><i data-i=\"stack-2\"><\/i><span>Select several<\/span><\/button>\n        <\/div>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-danger sdx-btn-block\" data-act=\"delete\"><i data-i=\"trash\"><\/i>Delete<\/button>\n      <\/section>\n    <\/aside>\n  <\/div>\n\n  <!-- Bestellschritt -->\n  <div class=\"sdx-modal\" id=\"sdxOrder\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"sdxOrderTitle\" hidden>\n    <div class=\"sdx-modal-card sdx-order\">\n      <header class=\"sdx-modal-head\">\n        <h2 id=\"sdxOrderTitle\">Sizes &amp; quantity<\/h2>\n        <button type=\"button\" class=\"sdx-iconbtn\" data-act=\"close-modal\" aria-label=\"Close\"><i data-i=\"x\"><\/i><\/button>\n      <\/header>\n      <div class=\"sdx-order-grid\">\n        <div class=\"sdx-order-prev\">\n          <figure><img id=\"sdxOrdFront\" alt=\"Front preview\"><figcaption>Front<\/figcaption><\/figure>\n          <figure id=\"sdxOrdBackFig\"><img id=\"sdxOrdBack\" alt=\"Back preview\"><figcaption>Back<\/figcaption><\/figure>\n          <p class=\"sdx-order-meta\"><span class=\"sdx-swatch-dot\" id=\"sdxOrdDot\"><\/span><span id=\"sdxOrdMeta\"><\/span><\/p>\n        <\/div>\n        <div class=\"sdx-order-form\">\n          <div class=\"sdx-order-warn\" id=\"sdxOrdWarn\" hidden><\/div>\n          <div class=\"sdx-sizes\" id=\"sdxOrdSizes\"><\/div>\n          <div class=\"sdx-tiers\" id=\"sdxOrdTiers\"><\/div>\n          <p class=\"sdx-tierhint\" id=\"sdxOrdHint\" aria-live=\"polite\"><\/p>\n          <dl class=\"sdx-sum\" id=\"sdxOrdSum\" aria-live=\"polite\"><\/dl>\n          <div class=\"sdx-order-err\" id=\"sdxOrdErr\" role=\"alert\" hidden><\/div>\n          <button type=\"button\" class=\"sdx-btn sdx-btn-hot sdx-btn-block sdx-btn-lg\" id=\"sdxOrdSubmit\"><i data-i=\"shopping-cart\"><\/i>Add to basket<\/button>\n          <p class=\"sdx-hint sdx-center\">You can still change quantities in the basket. Prices incl. VAT, plus shipping.<\/p>\n          <p class=\"sdx-hint sdx-center sdx-xsell\">Tip: in the basket you can put the same motif on more products with one click \u2013 shirts, stickers, signs, stamps.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Weiter bearbeiten? -->\n  <div class=\"sdx-modal\" id=\"sdxResume\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"sdxResumeTitle\" hidden>\n    <div class=\"sdx-modal-card sdx-small\">\n      <img class=\"sdx-resume-img\" id=\"sdxResumeImg\" alt=\"\">\n      <h2 id=\"sdxResumeTitle\">Continue editing?<\/h2>\n      <p id=\"sdxResumeText\">Your last design is still here.<\/p>\n      <div class=\"sdx-modal-btns\">\n        <button type=\"button\" class=\"sdx-btn sdx-btn-ghost\" data-resume=\"0\">Start over<\/button>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-hot\" data-resume=\"1\">Continue editing<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Best\u00e4tigung -->\n  <div class=\"sdx-modal\" id=\"sdxConfirm\" role=\"alertdialog\" aria-modal=\"true\" aria-labelledby=\"sdxConfirmTitle\" hidden>\n    <div class=\"sdx-modal-card sdx-small\">\n      <h2 id=\"sdxConfirmTitle\"><\/h2>\n      <p id=\"sdxConfirmText\"><\/p>\n      <div class=\"sdx-modal-btns\">\n        <button type=\"button\" class=\"sdx-btn sdx-btn-ghost\" data-confirm=\"0\">Cancel<\/button>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-hot\" data-confirm=\"1\" id=\"sdxConfirmOk\">OK<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Bild zuschneiden -->\n  <div class=\"sdx-modal\" id=\"sdxCrop\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"sdxCropTitle\" hidden>\n    <div class=\"sdx-modal-card sdx-crop-card\">\n      <h2 id=\"sdxCropTitle\">Crop image<\/h2>\n      <div class=\"sdx-crop-wrap\"><div class=\"sdx-crop-stage\" id=\"sdxCropStage\">\n        <img id=\"sdxCropImg\" alt=\"\" draggable=\"false\">\n        <div class=\"sdx-crop-dim\" aria-hidden=\"true\"><div class=\"sdx-crop-hole\" id=\"sdxCropHole\"><\/div><\/div>\n        <div class=\"sdx-crop-box\" id=\"sdxCropBox\"><svg class=\"sdx-crop-shape\" id=\"sdxCropShape\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path><\/path><\/svg><i data-h=\"nw\"><\/i><i data-h=\"ne\"><\/i><i data-h=\"sw\"><\/i><i data-h=\"se\"><\/i><\/div>\n      <\/div><\/div>\n      <p class=\"sdx-hint\">Move the frame or drag the corners to resize it.<\/p>\n      <div class=\"sdx-modal-btns\">\n        <button type=\"button\" class=\"sdx-btn sdx-btn-ghost\" data-crop=\"full\">Whole image<\/button>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-ghost\" data-crop=\"0\">Cancel<\/button>\n        <button type=\"button\" class=\"sdx-btn sdx-btn-hot\" data-crop=\"1\">Apply<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Hilfe -->\n  <div class=\"sdx-modal\" id=\"sdxHelp\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"sdxHelpTitle\" hidden>\n    <div class=\"sdx-modal-card sdx-small sdx-help\">\n      <header class=\"sdx-modal-head\"><h2 id=\"sdxHelpTitle\">Tips &amp; shortcuts<\/h2><button type=\"button\" class=\"sdx-iconbtn\" data-act=\"close-modal\" aria-label=\"Close\"><i data-i=\"x\"><\/i><\/button><\/header>\n      <ul class=\"sdx-facts\">\n        <li>Move elements with the mouse or your finger, resize them at the corners, rotate them with the round handle.<\/li>\n        <li>On your phone: resize and rotate with two fingers.<\/li>\n        <li>Only what is inside the dashed line is printed.<\/li>\n                <li>\u2018Preview\u2019 shows your product without guides.<\/li>\n      <\/ul>\n      <table class=\"sdx-keys\">\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>Z<\/kbd><\/td><td>Undo<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>Y<\/kbd><\/td><td>Redo<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>D<\/kbd><\/td><td>Duplicate<\/td><\/tr>\n        <tr><td><kbd>Shift<\/kbd>+click<\/td><td>Select several items<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>A<\/kbd><\/td><td>Select all<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>G<\/kbd><\/td><td>Group (with Shift: ungroup)<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>V<\/kbd><\/td><td>Paste image<\/td><\/tr>\n        <tr><td><kbd>Del<\/kbd><\/td><td>Delete selection<\/td><\/tr>\n        <tr><td>Arrow keys<\/td><td>Move (with <kbd>Shift<\/kbd> in larger steps)<\/td><\/tr>\n        <tr><td><kbd>Esc<\/kbd><\/td><td>Deselect<\/td><\/tr>\n      <\/table>\n    <\/div>\n  <\/div>\n\n  <!-- Produkt w\u00e4hlen (ohne product_id) -->\n  <div class=\"sdx-modal\" id=\"sdxChooser\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"sdxChooserTitle\" hidden>\n    <div class=\"sdx-modal-card sdx-small sdx-chooser-card\">\n      <h2 id=\"sdxChooserTitle\">What would you like to design?<\/h2>\n      <p class=\"sdx-hint\" id=\"sdxChooserHint\" hidden>Your motif is transferred to the new product \u2013 in the same size on shirts, fitted to size on stickers, signs and stamps. Your previous design stays saved.<\/p>\n      <div class=\"sdx-chooser\" id=\"sdxChooserList\"><\/div>\n      <div class=\"sdx-modal-btns\" id=\"sdxChooserCancel\" hidden><button type=\"button\" class=\"sdx-btn sdx-btn-ghost\" data-chooser-close>Cancel<\/button><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"sdx-busy\" id=\"sdxBusy\" role=\"status\" aria-live=\"assertive\" hidden>\n    <div class=\"sdx-busy-card\"><div class=\"sdx-spinner\"><\/div><b id=\"sdxBusyText\">One moment\u2026<\/b><div class=\"sdx-progress\" id=\"sdxBusyProg\" hidden><span><\/span><\/div><\/div>\n  <\/div>\n  <div class=\"sdx-toasts\" id=\"sdxToasts\" aria-live=\"polite\"><\/div>\n  <div class=\"sdx-dropcover\" id=\"sdxDropCover\" hidden><div><i data-i=\"cloud-upload\"><\/i><b>Drop image here<\/b><\/div><\/div>\n  <input type=\"file\" id=\"sdxJsonFile\" accept=\"application\/json,.json\" hidden>\n  <noscript><p class=\"sdx-noscript\">The designer needs JavaScript. Please enable JavaScript in your browser.<\/p><\/noscript>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-216","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/pages\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":1,"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/pages\/216\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/pages\/216\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/folie.ch\/en\/wp-json\/wp\/v2\/media?parent=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}