Design pages and reusable feed components

The Layers panel uses one tree for the whole selected section. Page elements appear at the first level. Expanding a feed reveals three reusable canvases:

• Feed container holds content that appears before the term and post loop.
• Term container designs category and subcategory headings.
• Loop item designs every post card or row.

Add and arrange elements

1. Open PDF designs and edit a design.
2. Open Layers.
3. Select a page, feed, component, or existing child layer.
4. Select Add element beside the intended parent.
5. Choose text, image, rectangle, ellipse, dynamic field, feed, icon, or allergen icons as available for that context.
6. Drag the new element anywhere in its canvas.
7. Use the corner handle to resize it and the top handle to rotate it.
8. Use the arrow controls in the tree to change its layer order.

The Feed container, Term container, and Loop item each have their own height. Choose Fixed for an explicit value or Auto height to measure the distance between the upper edge of the first rendered child and the lower edge of the last rendered child. This measurement is performed independently for every term or post. A dynamic image or field whose value is empty and whose fallback chain is also empty does not create a box or reserve height for that record. Their effective width is inherited from the feed frame and its calculated columns. Their children use free positioning, so a loop item can place an image on the left, title and description on the right, a dotted title leading toward a price, and allergen icons below. Editing that shared loop-item canvas refreshes every item instance across every preview page.

When a component is isolated for editing, every contextual value is a representative placeholder; it never borrows a real term or post. Text, images, taxonomy images, prices, and icons therefore remain visible without making the design depend on current content. The isolated Loop item has the same calculated width that each item has in the complete feed, so resizing does not change meaning when returning to the page preview.

Fixed text can be mixed with dynamic fields. For example, add fixed explanatory text between a dynamic title and description, or add a fixed image above a term heading.

Text elements include inline bold, italic, link, and unlink controls. Components and their child boxes can also receive an explicit background colour.

When a page uses a header or footer, both appear as expandable component branches in Layers. Open either branch to isolate its full-page coordinate canvas, then add fixed images, text, icons, or page-context dynamic fields such as the site logo, date, and page number.

Repetition and hierarchy

Feed-container elements can appear only on the first feed page or repeat on every feed page. Term elements can appear once per term or on every continuation fragment. Term elements can also target a particular hierarchy depth so top-level terms, subterms, and deeper terms use different spacing and styles.

Select the Term container itself to enable Each new term starts on a new page independently for top-level, second-level, third-level, and fourth-level terms.

Spacing

Every child element has four-edge margin and padding controls in the inspector. Large vertical spacing increases the reusable component's measured height and can move following content to the next page. Verify deliberately large spacing in the generated PDF as well as the editor preview.

Canvas zoom

Use the Zoom selector in the top toolbar to choose an exact canvas scale. Press Command + Plus or Command + Minus on macOS, or Control + Plus and Control + Minus on other systems, to move through those same zoom levels. Holding Command or Control while scrolling up or down changes the editor zoom as well. These shortcuts affect the PDF canvas and leave the browser zoom unchanged.

CSS selectors

The inspector lists selectors for the current element. Enable Show selectors on canvas to display them over the preview. Feed output exposes stable feed, term-depth, featured-item, allergen, block, and field classes. Enter rules in Custom CSS (live) directly below the selectors, or in the left CSS panel. Both fields edit the same document stylesheet, which is applied to the live canvas and generated PDF.