Layers & Design
Three layer types, one shared toolbox for position, rotation, and opacity across all of them.
What Each Layer Type Can Do
A template is a stack of layers — Text, Image, or Rectangle. Each has its own design options, but position, rotation, and opacity work the same way on all three.
🟦 Text layers
Five bundled font families — Fira Sans, Poppins, Oswald, Playfair Display, Caveat — each in regular, bold, italic, or bold italic where available. Size is set as a percentage of the canvas height, so it scales cleanly at any resolution. Add a background color and padding behind the text, limit it to a maximum number of lines, and align it left, center, or right.
🟩 Image layers
Always a dynamic source, never a static upload: the post’s featured image, the site logo or icon, the author’s photo, any Meta Box/ACF image field, or one of the 25 bundled emoji. Position and size work exactly like any other layer.
🟧 Rectangle layers
A solid color, or a linear gradient at any angle. Corner radius is independent per corner, so a single rectangle can be rounded on some corners and square on others. Add a uniform-width border in its own color, separate from the fill.
🟥 Rotation, on any layer
Every layer — Text, Image, or Rectangle — can be rotated freely around its own center, matching how transform-origin: center works in CSS. The whole layer turns as one block: for a Rectangle, that includes its background, border, and corner radius together.
🟫 Opacity, everywhere
Every color field — text color, background, fill, border — accepts an 8-digit hex value (#RRGGBBAA), where the last two digits set that color’s own transparency. Each color on a layer can be fully opaque, fully transparent, or anything in between, independently of the others.