Styling Elements

Every element in your template can be customized through the styling options in the right panel. This guide covers all available styling options.

Accessing Styles

Select an element on the canvas (click it)
The right panel shows styling options for that element
Different element types show different options

Dimensions

Control the size and position of elements.

Property	Description
W (Width)	Element width in pixels
H (Height)	Element height in pixels
X	Horizontal position from the left edge
Y	Vertical position from the top edge

Note: Some elements have constraints:

Containers, headers, and footers are always full-width
These elements can only be resized vertically

Typography

Available for text elements and table cells.

Font Family

15 fonts are available, organized by style:

Modern Sans-Serif

Inter
Roboto
Open Sans
Lato
Montserrat
Source Sans Pro
IBM Plex Sans

Classic Serif

Times New Roman
Georgia
Merriweather
Playfair Display

Monospace

Courier New

System

Arial
Helvetica
Verdana
Tahoma

Font Weight

Weight	Name
300	Light
400	Regular
500	Medium
600	Semibold
700	Bold

Text Color

Click the color picker to choose any color. You can:

Use the color picker interface
Enter a hex code directly (e.g., #333333)

Text Alignment

Four alignment options:

Left - Text aligns to the left edge
Center - Text is centered
Right - Text aligns to the right edge
Justify - Text stretches to fill the full width

Fill

Control the background of elements.

Background Color

Click the color picker to set a solid background color. Leave transparent for no background.

Opacity

Slider from 0% (invisible) to 100% (fully opaque). Affects the entire element including its content.

Border

Add borders around elements.

Border Mode

All Sides Apply the same border to all four edges. Simple and consistent.

Per Side Set different borders for each edge (Top, Right, Bottom, Left). Useful when you only want a border on specific sides.

Border Properties

Property	Description
Width	Thickness in pixels (0 for no border)
Style	Solid, Dashed, Dotted, Double, Groove, Ridge, or None
Color	Border color
Radius	Corner rounding in pixels (0 for square corners)

Padding

Control the inner spacing between an element’s edge and its content.

Padding Mode

All Sides Same padding on all four edges.

Per Side Different padding for Top, Right, Bottom, and Left.

Padding values are in pixels.

Safe Margins

Available only when the page/wrapper is selected.

Define the safe printing area for your document:

Property	Description
Top	Top margin in millimeters
Right	Right margin in millimeters
Bottom	Bottom margin in millimeters
Left	Left margin in millimeters

Content within these margins is guaranteed to print correctly on standard printers.

Styling by Element Type

Not all styling options are available for every element. Here’s what’s available for each:

Element	Dimensions	Typography	Fill	Border	Padding
Text	Full	Yes	Yes	Yes	Yes
Image	Full	No	Yes	Yes	No
Table	Full	No	Yes	Yes	No
Table Cell	No	Yes	Yes	Yes	Yes
Container	Height only	No	Yes	Yes	Yes
Header	Height only	No	Yes	Yes	Yes
Footer	Height only	No	Yes	Yes	Yes

Tips

Consistency Use the same fonts, colors, and spacing throughout your template for a professional look.

Contrast Ensure text is readable against its background. Dark text on light backgrounds works best for body content.

Hierarchy Use larger, bolder text for headings and smaller, lighter text for secondary information.

White Space Don’t crowd elements together. Adequate padding and margins make documents easier to read.

Test Print If your PDFs will be printed, test them to ensure colors and margins look correct on paper.

Next Steps

Components - Learn about each element type
Tables - Detailed table styling
Data Binding - Add dynamic content