Adding and Arranging Design Elements

PDFDraft provides a flexible drag-and-drop interface for building custom PDF documents. You can add text, images, tables, dates, dividers, and dynamic WordPress data fields to your design, then position and arrange them freely on the canvas.

This guide covers how to add elements to your PDF design and arrange them using positioning, alignment, and layering tools.

Prerequisites

PDFDraft plugin installed and activated

A PDF design created or opened in the editor

Adding Elements to Your Design

Available Element Types

PDFDraft offers several element types in the Elements panel:

Text — Add paragraphs, headings, or custom text content

Image — Upload and position images

Date — Insert formatted date fields

Divider — Add horizontal or vertical lines

Table — Create structured data tables

WP Data Fields — Insert dynamic WordPress content like site name, user information, or post data

How to Add an Element

Open the Elements panel on the left sidebar

Locate the element you want to add

Drag the element from the panel onto the canvas

Drop it in your desired location

The element will appear on the canvas and can be immediately edited or repositioned.

Searching for Elements

If you have many elements available, use the search bar at the top of the Elements panel to filter by name or type.

Working with Text Elements

Adding and Editing Text

Drag a Text element onto the canvas

Click the element to select it

Double-click or click the moveable:click area to enter edit mode

Type your content directly into the rich text editor

Changes are auto-saved.

Text Formatting Options

When a text element is selected, a toolbar appears with formatting controls:

Selective Font family and weight selection

Font size adjustment

Bold, italic, underline, and strikethrough

Text Color

Text alignment (left, center, right, justify)

Bullet and numbered lists

Link insertion and editing

Working with Images

This element is usable once per design.

Adding an Image

Drag an Image element onto the canvas

Click the upload area or existing image

Select an image from the WordPress media library

The image will be inserted and can be resized or repositioned.

Image Editing Options

When an image is selected, the toolbar provides:

Crop tool — Enter cropping mode to adjust the visible area

Border controls — Add and style borders

Border radius — Round the corners

Replace — Swap the image with a different one

Remove — Delete the image from the element

Cropping an Image

Select the image element

Click the crop button in the toolbar

Adjust the crop area by dragging the handles

Use the zoom and rotation sliders if needed

Click Apply to save the crop

A new cropped version of the image is generated and saved.

Working with Tables

Adding a Table

Drag a Table element onto the canvas

The table appears with default rows and columns

Editing Table Content

Double-click a cell to select it

Edit the cell content inline

Click outside the cell to deselect

Resizing Table Cells

Drag the resize handles on cell borders to adjust column widths and row heights.

Table Configuration

When a table is selected, the toolbar provides:

Border width dropdown

Cell padding adjustment

Number of rows and columns

Text alignment options

Positioning Elements

Manual Positioning

Click and drag any element to move it freely on the canvas. The element can be positioned anywhere within the page boundaries.

Precise Positioning with the Properties Panel

Select the element you want to position

Click the Settings button in the top bar

The Properties panel opens on the right

Enter exact X and Y coordinates in millimeters

Adjust width and height values as needed

Changes apply immediately to the element.

Resizing Elements

When an element is selected, drag the corner or edge handles to resize it. Hold Shift while dragging to maintain the aspect ratio.

Rotating Elements

Drag the rotation handle (located at the bottom edge midpoint of the element) to rotate it. The rotation angle is displayed in an overlay during the operation.

Aligning Elements

Using Alignment Controls

Select one or more elements

Right-click to open the context menu

Hover over the Alignment submenu

Choose an alignment option

Available alignment options include left, center, right, top, middle, and bottom alignment relative to the canvas or selection.

Alignment from the Properties Panel

The Properties panel also includes alignment buttons for quick positioning. Select an element and click the desired alignment button to snap it into place.

Arranging Elements (Layering)

Understanding Layers

Elements are stacked in layers. Elements added later appear on top of earlier elements. You can change the stacking order to control which elements appear in front or behind others.

Changing Layer Order

Select the element you want to reorder

Right-click to open the context menu

Choose a layer arrangement option

Available options:

Bring to Front — Move the element to the top of the stack

Bring Forward — Move the element up one layer

Send Backward — Move the element down one layer

Send to Back — Move the element to the bottom of the stack

Using the Layers Panel

Open the Layers panel on the right sidebar

Elements are listed in stacking order (top to bottom)

Drag elements in the list to reorder them

The Layers panel also provides context menu actions for layer management.

Grouping Elements

Creating a Group

Select multiple elements by holding Shift and clicking each one, or by dragging a selection box

Click the Group button in the top bar or use CTRL + G to group all selected elements.

The elements are now grouped and move together as a single unit.

Ungrouping Elements

Select the grouped element

Click the Ungroup button in the top bar or use CTRL + SHIFT + G to ungroup.

The group is dissolved and elements can be edited individually again.

Duplicating and Deleting Elements

Duplicating an Element

Select the element

Click the Duplicate button in the top bar, or right-click and choose Duplicate

A copy of the element appears slightly offset from the original.

Deleting an Element

Select the element

Click the Delete button in the top bar, or press the Delete key

The element is removed from the canvas.

Visual Guides and Snapping

For this you need to have enabled pixel guide from the settings sidebar.

Distance Overlays

When moving an element, distance overlays appear showing the gap between the element and the canvas edges. This helps with precise positioning.

Snap Guides

As you drag elements, snap guides appear to help align them with other elements or the canvas boundaries. Elements will snap to these guides for easier alignment.

Keyboard Shortcuts

PDFDraft supports keyboard shortcuts for faster editing:

Ctrl/Cmd + C — Copy selected element

Ctrl/Cmd + V — Paste copied element

Ctrl/Cmd + D — Duplicate selected element

Delete or Backspace — Delete selected element

Ctrl/Cmd + Z — Undo

Ctrl/Cmd + Shift + Z — Redo

Arrow keys — Nudge selected element by 1 pixel

Shift + Arrow keys — Nudge selected element by 10 pixels