Design Editor

Distribute spacing: Under Styles → Position, select at least three objects to distribute them with equal horizontal or vertical gaps. The outer objects stay fixed; distribution uses the selection, not the full card. Groups count as one object and preserve their internal spacing. Rotated elements use their visible outer bounds. The actions are disabled if the selection contains a position lock. Existing overlaps can remain as equal overlaps; the card-edge movement limits still apply.

The Design Editor is PostPal's built-in design editor. Instead of uploading a finished print file, you design your postcard directly in the browser.

How a design is created — in two steps:

1. New design. In the dialog you set name, format and individualisation. "Weiter zum Editor" only becomes active once a name is entered and a format supported by the Design Editor is selected. Only that click creates the draft and opens the editor. Dialog inputs are not saved automatically; canceling creates no design.
2. Design Editor. The Design Editor opens in fullscreen and is your only workspace from here on. The name can also be changed directly in the Design Editor header. A name is required to finish the draft. Format and individualisation can be changed in the Design Editor too — in the right sidebar, while nothing is selected.

Additional files — fonts, logos or InDesign projects we should take into account for printing — are uploaded in the Design Editor's sidebar. They are print attachments rather than settings of the design.

Drafts save automatically in the Design Editor: PostPal saves when you finish an action — text when you leave the field, moves and resizing when you release the pointer, and uploads after processing. The cloud in the header shows the save status and lets you retry a save. The draft stays in the editor and cannot be used in campaigns or API flows yet. If saving fails when going back, the editor stays open with your changes.

Finishing ends the flow: "Design erstellen" validates the draft and makes it available to campaigns and API flows. A finished design is saved deliberately with "Design speichern". You then land on the designs list with a confirmation, or return to the campaign or API flow from which you created the new design.

You open an existing design with "Design bearbeiten" in the designs list; it opens the Design Editor directly. If your design contains vouchers and is used by active campaigns, the corresponding notice is shown in both views — including the Design Editor, where you actually change the vouchers.

Editing elements: Select an element on the card or in Layers. Styles holds the relevant position, typography, color, spacing and element-specific settings in vertical sections. Resize the sidebar to adjust its width and scroll it in shorter windows. Which of the two tabs is open is your choice — a selection never switches it, so you can work down a list of layers without clicking back in between. Use Layers to select, reorder, show, hide and delete layers. Selecting or deselecting elements keeps the workspace in place: there is no additional contextual toolbar above the card.

Words in a text field: In a text field you are editing, set individual words in bold or italic with Ctrl+B and Ctrl+I (on a Mac, Cmd+B and Cmd+I), or in another font with Typography in the right sidebar. The font style under Styles still applies to the whole element. Details are under Text fields & personalization. For static text this also works on Basic; placeholders belong to Plus.

Anton: The bundled Anton font replaces the former Display selection. The editor, thumbnail and PDF use the same font file, available in Regular. For existing Display text, explicitly select Anton or another available font.

Available fonts: The selection contains only 16 bundled font families and successfully loaded custom fonts. New text starts with Open Sans. Local system fonts such as Arial or Comic Sans are no longer offered because their font files are unavailable to the print server. If an older design uses an unavailable font, the editor flags it. Explicitly choose an available font for the affected text; no automatic substitution takes place. Saving and new PDF output remain blocked until corrected. Checks include individual text runs, the back side and every variant. A custom family becomes available only after all declared faces have loaded successfully.

Selection rectangle: Drag on an empty area or a locked background to draw a selection rectangle. Matching elements are highlighted on the card and in Layers while you drag. Shrinking the rectangle removes elements it no longer touches. Hold Shift to add to your previous selection. Locked and hidden elements are excluded from the rectangle's hits. Release to keep the selection; Escape restores the previous selection.

Resizing text fields: Side handles set the width and therefore automatic wrapping while the height follows the text. Corner handles set both width and height. Text fields without manually dragged handles remain content-sized and adjust themselves automatically.

Typing a size: Styles → Layout → Dimensions shows the selection's width (W) and height (H) in millimetres, as in Figma. A typed value applies straight away and keeps the top-left corner in place, rotated elements included. In a multi-selection every element takes the value; when their sizes differ, the field reads "Mixed". A group is scaled as a whole: its members move and grow in proportion, while font sizes stay unchanged. Images keep their aspect ratio while the toggle beside W and H is active; turn it off to drag or enter width and height independently. Circles and QR codes keep their aspect ratio, QR codes snap to the allowed print sizes, and for text fields only H sets a fixed height. For locked layers, W and H are greyed out, like X and Y.

Locking positions: The padlock next to the eye in Layers locks a layer's position; click again to unlock it. For groups, it toggles all members together. On the canvas the Design Editor ignores locked layers: no hover frame, no click, no selection frame — a click on one reaches whatever lies beneath. A locked layer is selected only under Layers; there its content, color and size remain editable, but dragging, arrow keys, X/Y fields and alignment cannot move it. If a selection moved together contains a locked layer, the entire selection stays in place. Locks are saved per card side with the design and do not change printed output.

Locking the background: The background's row carries the same padlock — except that it starts closed. A freshly uploaded design sits fixed on the side: it cannot be dragged, scaled from its corners or cropped by double-click, and the fields under Position are greyed out. One click on the padlock releases the background, another locks it again. Locking snaps nothing back: the background keeps whatever placement you gave it. Selecting it under Layers, opacity, the 90° turns and both "Design austauschen" and "Design entfernen" keep working while the padlock is closed; on the canvas a locked background can neither be clicked nor shows a hover frame. Existing designs also come back with a locked background; one click makes it movable again.

Showing and hiding layers: Every row in Layers carries an eye — elements and groups alike. One click hides the layer: it disappears from the card and is not printed either, the way the same control works in Figma or Canva. The row stays where it is, only dimmed, and a second click brings the layer back. Hidden layers cannot be selected or moved, but can still be deleted and reordered. With a multi-selection active, the eye switches the whole selection. A group counts as hidden only once everything under it is — one click hides the whole block, the next brings all of it back. The state is saved with the design and survives a reload. Two things follow: the postal zone notice ignores hidden layers, and a front left with nothing but hidden layers counts as empty and prints blank without a background. The design can still be saved.

Changing the layer order: Which element sits in front of which is set either by dragging the rows in Layers or straight on the selection. For a selection, the Layers section in the sidebar follows Position and holds four buttons: "In den Hintergrund" (Cmd/Ctrl + Alt/Option + [), "Eine Ebene nach hinten" (Cmd/Ctrl + [), "Eine Ebene nach vorne" (Cmd/Ctrl + ]) and "In den Vordergrund" (Cmd/Ctrl + Alt/Option + ]). The section appears for a single element just as for a group or a multi-selection. A group travels as one block: its members keep their order among themselves while the group as a whole moves in front of or behind the other elements. Once you have stepped into a group by double-clicking, the ends are that group's own — "In den Vordergrund" then means the front of the group, not of the card. When the selection already sits at that end, the matching button is greyed out. Hidden layers keep their place in the order, and the order is saved with the design.

View: bottom left, − and + zoom in and out in steps; for continuous zoom use Ctrl/Cmd with the mouse wheel or a two-finger gesture on the trackpad. Pan the view by holding space with the left mouse button, or with the middle mouse button. The percentage between the two buttons is relative to the fitted view: 100% is what you see when you open the design — in every format and at every window size. Clicking the number takes you back there.

Canvas settings: with no selection, Styles describes the card itself and lets you change it, without opening the settings:

• Individualisierung — Plus (unlimited variables, €0.01 per contact) or Basic. Basic lays out the card freely — text, static images, lines, rectangles and QR codes with a fixed link — it just prints the same card for everyone. Plus adds whatever varies per recipient: variables in text, greetings, voucher codes, API markdown, API images and QR codes with a variable target URL. Those tools stay visible and clickable on Basic; clicking one offers you the switch to Plus. Switching to Basic removes exactly the elements that would differ per recipient, from every variant — everything else stays, uploaded backgrounds included. PostPal asks first when something would actually be lost. Going from Basic to Plus needs no confirmation, because nothing is lost.
• Format — the same format list as when creating, narrowed to the formats the Design Editor can draw. It applies to the open variant; a change removes only that variant's content and uploaded designs, so it is confirmed first as well. The other variants stay.
• Below it, the print geometry of the current format: finished size, data size, bleed and safety margin in millimetres.

Consistent element frames: Every element uses the same 1-pixel solid frame. It stays transparent at rest, uses the primary color when selected and the lighter primary color on hover. Text, API text and voucher codes use the same square frame shape as images, QR codes and lines; images and QR codes additionally show resize handles only while selected. A closed group shows only its shared frame. After double-clicking to enter the group, its individual elements show their own hover frames again. Escape leaves this mode. The finished-format preview has no editing frames.

A circle carries the same two sections as a rectangle, minus the corner radii — it has no corners. For rectangles, the sidebar shows Fill and Border, with Border collapsed by default. Corner radii can be linked or edited individually. Lines and rectangles also have an Opacity control from 0 to 100 percent. Fill Color edits the fill colour; use Opacity to control transparency. Choose the line style using the symbol next to the border width. The button beside Radius opens four inputs arranged like the corners: top left/right, then bottom left/right.

Grouping elements: Select two or more elements on one side and choose "Gruppieren" under Styles → Aktionen (Cmd/Ctrl + G). The group then behaves as a single object: clicking any member selects the whole group, it gets one shared outline, and dragging as well as aligning move it as one block — the members keep their relative offsets. When exactly one complete group is selected, the same spot offers "Gruppierung aufheben" (Cmd/Ctrl + Shift + G); only one of the two actions is ever shown.

Editing individual members: Double-click to enter one level of a group. You can select its elements and subgroups there; another double-click enters the next subgroup. Escape moves back one level and selects the group you just left as a whole.

Duplicating elements: Styles → Aktionen carries a "Duplizieren" button next to the grouping one (Cmd/Ctrl + D). It applies to any selection — a single text field, a variable, an API Markdown area, an image, a QR code, a line, a rectangle, a circle or a whole group. The copy lands slightly offset on the same side and is selected right away; if the offset would push it past the edge, it moves back into the printable area. A duplicated group stays a group. Duplicated API Markdown areas, API QR codes and API images are given a fresh API field name, so the original and the copy cannot overwrite one another in the API call. The same section also holds "Auswahl löschen". Shortcut labels follow the keyboard you are on: Cmd on macOS, Strg on Windows and Linux.

When inserting or duplicating images, their field names also avoid existing Markdown and QR field names. New Markdown and QR fields likewise avoid existing image field names.

Rotating elements: Every placed element can be rotated — text fields, API Markdown, images, QR codes and lines. With exactly one element selected, a round grip with a rotation arrow floats above it. Drag it and the element turns about its own centre, with the current angle shown at the grip while you drag. On its own the drag is free to one decimal place (90.1°, 90.2°, 90.3° …). Hold Shift and it snaps in 45° steps — 45°, 90°, 135°, 180° and so on.

A group rotates the same way. With exactly one complete group selected, it takes the grip its members give up: the group turns as one object about its shared centre, the members keep their relative offsets, and each keeps whatever angle of its own it brought along. The block as a whole is held on the finished card area.

A group has an angle of its own. It counts from the moment you grouped the elements, so a fresh group reads 0° even when its members already sit at an angle. That is the angle the field under Rotation shows, and it can be typed in there directly. Double-click into the group to rotate an individual member or a complete subgroup; the outer group's own angle is unaffected.

The same angle can be typed in the right sidebar under Styles → Rotation, for a single element and for a group alike. Next to the field sit three buttons for the common cases: a quarter turn left, a quarter turn right, and a reset to 0°. The rotation is saved with the design and printed exactly as the Design Editor shows it.

A turned element is measured by the area it actually covers: a text field set at an angle reaches further than its upright frame does. If that takes it past the finished card area, the Design Editor moves it back far enough to sit fully on the card while keeping the angle you set. For the same reason the reserved-zone notice also reports a corner that only swings into the franking, addressing or coding zone once the element is turned. A single element or one complete group can be rotated. Rotate a loose multi-selection together with the quarter-turn controls in the right sidebar; it turns about its combined centre.

What to know about groups:

• Groups can be nested: grouping an existing group with another element or group creates a new outer group and preserves its subgroups. You can also create subgroups inside a group you have entered.
• Layers shows the hierarchy as an expandable tree. Groups receive names such as “Gruppe 1”, which are saved with the design.
• A group always lives on one side and needs at least two members. If you delete members until only one remains, the group dissolves. An outer group holding only one subgroup also dissolves, moving that subgroup up a level. When saving, each group must contain at least two direct elements or subgroups. A wrapper around a single subgroup is rejected with a validation message.
• In Layers the members stay one contiguous block: the order can be moved, but a group cannot be split by another element. If the members were not already next to each other, grouping pulls them together — to the position of the topmost member, with anything that sat between them ending up below the block. That order stays in place after ungrouping. If the members were already adjacent, grouping changes nothing.
• When copying or duplicating, fully copied groups and their copied subgroups are preserved. If the parent is not copied, the copied subgroup lands at the top level. Individual copied members remain ungrouped. Pasting switches the selection to the top level so the copy can be edited as a whole.
• During the side swap, groups travel with their elements.
• Groups are saved with the design and are available unchanged the next time you open it.

What you design in the Design Editor:

• Text fields & background of the postcard. Text fields can contain static text and optional variables such as {{first_name}}.
• API Markdown for API flows, with content supplied per recipient through the API. Designs with Markdown areas are not available for regular campaigns.
• QR codes as URL QRs or API QRs. URL QRs store their target URL in the design; API QRs define API field names whose values are supplied per API request through qr_codes.
• Images that you place individually on the card, resize and crop.
• Lines and simple layout elements.

Upload design: uploading initially places your design on the side as before — and locks it there. Open the padlock on the background's row under Layers first. After that you can move the background or resize it proportionally with its corner handles. Double-click opens the same crop mode as an image: the frame and visible cutout can be edited separately. Enter or a click outside keeps the crop; Escape discards the change. The existing rotation and opacity settings remain available and keep working while the padlock is closed.

Each side has at most one background, which always sits below the other elements. PDF uploads remain supported. Position, size and crop are saved with the design and applied in print. Existing designs retain their appearance until you edit the background. The uploaded file itself remains unchanged. Use Text to add content that appears over the design or changes per recipient.

The Design Editor is format-aware: it knows bleed, address zone and whether a format is two-sided. It keeps your elements on the finished card area — anything in the bleed is trimmed off. Deutsche Post reserved areas you may use: the Design Editor points it out at the top, and we check every design before sending. You can still upload a finished print file instead.

Placing images: use "Bild" in the toolbar to upload a PNG, JPEG or SVG file up to 25 MB (SVG up to 10 MB). It is then placed on the card as its own element — up to 30 per side, independent of the background, which still exists.

API images with Plus: Select a placed image and enable “Parameterize” below it or under API in the right sidebar. On Basic, the click first offers an upgrade to Plus. The field name gets the first available number starting at image_url_1. The uploaded picture then serves only as a preview; each request must supply a public HTTPS image URL without redirects under the matching images key. Only that request image is printed, whole and centred proportionally inside its rectangular frame (Fit/contain), without cropping or stretching. Even a design containing only API images is personalized per recipient. Switching to Basic removes API image elements completely; static uploaded pictures stay. The REST API guide describes image formats and limits.

A design with API images in shippable variants or variants needed by pending entries is exclusively for API flows. From the first API entry, added or removed API images, renamed fields or a switch to Basic must not change its image contract. A 0% variant without pending entries stays editable.

SVG files are printed as vector artwork and stay sharp at any size. On upload, the Design Editor checks an SVG the way it will be printed and refuses anything the print cannot reproduce, telling you what to change: convert text to paths first, export styles as presentation attributes instead of <style>, no filters, masks or patterns, colours as hex or RGB. Embedded images must be PNG or JPEG. The Design Editor does not check their resolution, so an SVG never shows "Auflösung zu gering" — make sure they are large enough yourself. Files over 10 MB or with more than 50,000 elements are better uploaded as PNG or JPEG.

A static uploaded image has two modes, the way you know them from Figma or Canva:

• Placing (the normal state): dragging moves the image, the four corners change its size on the card.
• Cropping (double-click the image, or "Zuschneiden" in the bar above the design): the whole file is shown dimmed and the visible cutout bright. The handles on the frame reveal or hide more of it, you move the image freely underneath, and the small bar on the image zooms in steps or resets the cutout. Enter or a click next to it keeps the change, Escape discards it.

Frame and image stay separate: the corners decide how large the image is on the card, cropping decides which part of the file is visible inside it. The uploaded file is never modified.

In the right sidebar, click the image row to open its compact image popover. Hover the preview and choose "Upload from computer" to replace the source file while keeping the element's frame and rotation. For static images, Fill offers Fill, Fit and "Crop"; choose "Crop" to enter crop mode. The adjacent button turns the image by 90 degrees at a time.

An image may extend beyond the edge of the card — like every other element. Whatever hangs over is trimmed in print; while the element is selected the Design Editor shows the overhang faded, otherwise it cuts it off at the card edge. It cannot be moved off the card entirely. In Deutsche Post reserved areas the same rules apply as to every other element: you may place an image there and save the design, but the Design Editor points it out at the top.

If a file is too coarse for the chosen size — below 300 dpi — the Design Editor marks the image with "Auflösung zu gering". A separate notice at the top right, next to the reserved-zone notice, also counts affected images. Click it to list their file names and card sides, then select an entry to select that image. The notice blocks nothing, it only tells you that this image would print blurry. A static uploaded image without an API field name is static content: it is the same for every recipient and does not make a design personalized. API images supplied by a request must pass the print-resolution check before the request is accepted.

Swapping front and back: in two-sided formats, a swap button sits between the "Vorderseite" and "Rückseite" switches. It exchanges both sides completely — background, text fields, variables, Markdown areas, QR codes, lines, images, along with their sizes and stacking order. A second swap restores the previous state exactly; in the Design Editor, that is the undo for a swap.

In every two-sided format, exactly one of the two sides carries Deutsche Post reserved areas — franking, addressing and coding zones in the postcard formats, the address imprint area in the letter formats. A swap can therefore move elements into an area that should stay clear. When it would, the Design Editor asks first and names the affected areas. The swap itself moves nothing — your elements stay where they are. Afterwards the Design Editor opens the affected side and selects those elements for you.

You can save with elements in one of these areas; the notice at the top of the Design Editor lists them for as long as they sit there. For static text, the notice checks occupied line rectangles, including text that overflows an authored height. Blank lines and unused text-area corners do not count. Circles and circular image crops use their round shape; lines and rotated rectangles use their painted geometry. Text checks use line rectangles, not individual glyph contours. Missing font metrics retain the frame check. Transparent image pixels, rounded rectangles, dashed gaps and bordered ellipses are still assessed conservatively using their frame or a continuous stroke.

For variable text and API Markdown, later content is unknown. The text frame therefore remains marked as a possible overlap: an empty example corner does not guarantee that it stays empty for every recipient. We manually check the actual content before sending.

The clipboard is cleared by a swap, because its contents point at a side that no longer exists in that form.

While the Design Editor is still working, the swap button is disabled: while a background is uploading or rendering, while a color is being converted to CMYK, and while a font is being registered. This keeps an in-flight change from landing on the wrong side.

Additional content such as variables, static text and lines is stored in CMYK for printing. For PDF backgrounds, the preview applies the ISO Coated v2 / FOGRA39 softproof, so colors — especially K100 black — may look less vivid than pure RGB. PNG and JPEG backgrounds remain in their source sRGB color space so added colors, especially black, match the artwork in the editor.

In the color picker you switch between CMYK and RGB. The picker opens on CMYK, because that is where the print inks are: enter Cyan, Magenta, Yellow and Black directly as 0 to 100 percent, and exactly those values are stored and printed. In RGB you pick the color via its hex value; the Design Editor converts it to CMYK when you apply it. Your browser remembers the choice.

API Markdown shows stored example content in the editor. This example text is only for layout and preview; it is not used as fallback content for real API mailings. The actual Markdown content must be submitted through the matching API content key. Design Editor variables such as {{first_name}} are not allowed inside Markdown areas.

You can use emoji anywhere text is printed: in static text, in variables such as {{first_name}} and in API Markdown. PostPal prints them as colour Google Noto graphics — in the preview exactly as in the final print PDF. An emoji is never printed as a question mark.

The emoji catalogue ships with PostPal and cannot yet contain very recent characters. A character that is not supported yet is therefore rejected on save when it sits in static text or in Markdown example content, so you can swap it right away. Values that only arrive per recipient through the API cannot be checked at save time: there the preview shows a matching notice, and in print only that one recipient is skipped and reported while every other recipient prints normally.

When adding a QR code, you choose between URL QR and API QR. A URL QR is for CSV, Klaviyo, fixed links or URL templates; its target URL lives in the design and can contain known placeholders. When you choose an account voucher in the right-hand panel, PostPal inserts its dynamic placeholder (for example {{voucher_1}}) into the URL and resolves it to the generated voucher code for each recipient at print time. An API QR is for API flows. It receives its own API field name, and the placeholder for that field name becomes the exact QR content, for example {{voucher_url_1}}. The actual value is later submitted per recipient through the matching API qr_codes key and must be a complete HTTP(S) URL. Multiple newly inserted API QRs are numbered automatically in the Design Editor, for example voucher_url_1, voucher_url_2.

A URL QR with a fixed target is shown as a scannable QR code directly in the editor, regardless of whether the general preview is enabled. URL templates are resolved with example data in the QR preview. The QR preview also lets you open the currently displayed target URL directly.

QR codes have no outer padding. White areas inside the pattern remain opaque. The selection frame and four corner handles sit directly on the QR pattern. Leave a clear, light margin of at least four modules around it in your design. Test scanning at the actual printed size; patterns, text or dark areas directly beside it can interfere with scanning.

When your design contains API Markdown areas, API QRs or API images, use API-Beispiel in the Design Editor to generate a current example payload and matching cURL request. The output uses the API field names and Markdown example content from the current editor state, including the images field names for API images. The flow ID, API token and idempotency key are deliberate placeholders. URL QRs and other non-API-bound elements are not emitted as dynamic API fields.

Magnetic alignment guides help when you move an element: an edge or center snaps when it approaches an edge or center of another element or the finished card. Red dashed lines show the alignment. The safety-margin boundaries (6 mm) and the edges of the grey coding, addressing and franking zones also serve as alignment targets. Postal zones remain advisory and do not block placement. Groups and multiple selections align as a whole, preserving their internal spacing. Closed groups provide their combined frame as a target; inside an entered group, its elements and subgroups provide the targets. Rotated elements use their enclosing horizontal and vertical bounds. Hold Alt/Option to temporarily move freely. Guides disappear when you release the pointer and are never printed. Bleed edges, resizing, rotation and arrow-key movement do not receive additional magnetic alignment.

Measurements while moving: As soon as a magnetic alignment guide snaps, the gaps in pixels to the elements beside it appear on the guide itself — no extra key. Every element the guide runs through is measured: with three elements on one edge you get both gaps, the one to the nearest and the one to the element beyond it, each edge to edge over whatever lies between. A gap is measured across the guide: a vertical guide means the elements sit above each other, so you read the gap upwards or downwards. Where an element overlaps your selection across the guide, there is no gap to show for it. Nothing is ever measured against the artboard: the card edge, the safety margin and the postal zones serve as alignment targets but never get a number. This works the same for every element, images and multiple selections included. The measurements disappear when you release the pointer and are never printed.