Chapter 3: Adding and Editing Elements

Elements are the content pieces that make up your scenes. This chapter covers the fundamentals of working with elements in FX Express.

Understanding Elements

“Element” and “layer” mean the same thing here: one item in a scene’s stack. FX Express supports these layer types:

Layer type	Description	Chapter
Text	Text content with formatting options	4
Image	Static images (PNG, JPG, SVG, …)	5
Video	Video clips with trimming and playback options	6
Shape	Rectangle, circle, triangle, line	7
Table	Data tables with rows and columns	8
List	Bulleted or numbered lists	8
Smart Object	Programmable canvas graphics	14
Group	Several layers transformed as one	this chapter
Scene Layer	A read-only snapshot of a scene from another template	16
Adjustment	No content; its effects grade every layer below it	21
Audio	Timeline audio — a file or a text-to-speech script	22
Volume Adjustment	No sound; ducks the mix below it	22

Audio and volume-adjustment layers never draw on the canvas — they exist only in the timeline and the layer stack.

Adding layers

Layer ▸ New has every layer type, including the ones that have no palette button: Adjustment Layer, and the three audio items under Audio. The new layer lands on the canvas ready to position.

The toolbar above the canvas doubles as an add palette. With nothing selected it shows labelled buttons — Text, Image, Video, Shape, Data, Audio, Smart Object; while a layer is selected it collapses to a compact + Add popover so the element toolbar has room.

Two ways to use it:

Click a button — the layer appears on the canvas.
Drag a button onto the canvas — the layer lands where you drop it.

Shape, Data, and Audio open a popover with their sub-types.

From the Media tab

Drag a file from the Media browser onto the canvas to create an image or video layer, and drag an imported-scene card onto the canvas to create a scene layer.

The canvas shows “Drop elements here” when empty to guide you.

Selecting Elements

Single Selection

Click on any element to select it. Selected elements show:

A blue border
Resize handles on corners and edges
A drag handle icon on the left side

Multiple Selection

To select multiple elements:

Shift+Click: Add elements to selection
Click and drag: Draw a selection box around elements
⌘A / Ctrl+A: Select all elements

Deselecting

Click on an empty area of the canvas
Press Escape

Moving Elements

Drag to Move

Select the element
Click and drag anywhere on the element (or use the drag handle)
Release at the new position

Precise Positioning

Use the Properties panel for exact positioning:

Select the element
Open Properties panel
Enter X and Y values (as percentages)

Keyboard Nudging

Use arrow keys to nudge selected elements:

Arrow keys: Move by small increments
Shift + Arrow keys: Move by larger increments

Resizing Elements

Drag to Resize

Select the element
Drag any of the resize handles:
- Corner handles: Resize proportionally
- Edge handles: Resize width or height only

Precise Sizing

Use the Properties panel:

Select the element
Enter Width and Height values (as percentages)

Understanding Percentage-Based Sizing

FX Express uses percentage-based positioning and sizing:

X/Y Position: Percentage from top-left (0-100%)
Width/Height: Percentage of canvas size (0-100%)

This ensures your design looks correct at any output resolution.

Element Labels

Elements are automatically given descriptive labels based on their content:

Text elements: The first 20 characters of text content
Image elements: The source filename (e.g., “sunset” from “sunset.jpg”)
Video elements: The source filename
Shape elements: Color name and shape type (e.g., “Guardsman Red Rectangle”)
Groups: “Group” with child count
Scene layers: The imported scene’s name

These labels appear in the timeline and in the track matte source dropdown. You can override an automatic label by setting a custom Name on the element.

Locking Elements

Locked elements are fully protected from accidental edits:

Lock from the timeline: Click the lock icon next to the visibility eye on each element row
Lock from context menu: Right-click an element and choose Lock
When locked, the Properties panel shows a “Locked — unlock to edit” banner and all inputs are disabled
Locked elements cannot be moved, resized, rotated, or deleted
Unlock the element from the same lock icon or context menu to resume editing

The Properties Panel

The Properties panel shows all settings for the selected element. Open it by:

Clicking “Properties” in the top toolbar
Double-clicking an element in the timeline
Selecting an element (it may open automatically)

Transform Properties

All elements have these transform properties:

Property	Description	Unit
X	Horizontal position from left	%
Y	Vertical position from top	%
Width	Element width	%
Height	Element height	%
Rotation	Rotation angle	degrees
Opacity	Transparency (0-100)	%
Z-Index	Stacking order	number

Timing Properties

Control when elements appear:

Property	Description	Unit
In Time	When element appears	seconds
Duration	How long element is visible	seconds

Element-Specific Properties

Each element type has additional properties. See the respective chapters for details:

Copy and Paste

Copying Elements

Select the element(s)
Press ⌘C (Mac) or Ctrl+C (Windows/Linux)

Pasting Elements

Press ⌘V (Mac) or Ctrl+V (Windows/Linux)
The element appears slightly offset from the original

Duplicate

For quick duplication:

Select the element
Press ⌘D (Mac) or Ctrl+D (Windows/Linux)

Deleting Elements

To delete selected elements:

Press Delete or Backspace
Or use the context menu (right-click)

Z-Index and Layering

Elements stack on top of each other based on their Z-Index:

Higher Z-Index = on top
Lower Z-Index = behind

Changing Layer Order

Select the element
In Properties, adjust the Z-Index value

Or use keyboard shortcuts:

⌘] / Ctrl+]: Bring forward
⌘[ / Ctrl+[: Send backward
⌘⇧] / Ctrl+Shift+]: Bring to front
⌘⇧[ / Ctrl+Shift+[: Send to back

Element Alignment and Distribution

Alignment Tools

When multiple elements are selected, right-click to access alignment tools:

Alignment	Effect
Align Left	Aligns all elements to the leftmost edge
Align Center	Centers all elements horizontally
Align Right	Aligns all elements to the rightmost edge
Align Top	Aligns all elements to the topmost edge
Align Middle	Centers all elements vertically
Align Bottom	Aligns all elements to the bottommost edge

Distribution Tools

Distribute elements evenly across space:

Distribution	Effect
Distribute Horizontal	Spaces elements evenly left to right (first and last stay in place)
Distribute Vertical	Spaces elements evenly top to bottom (first and last stay in place)

To use distribution:

Select 3 or more elements
Right-click for the context menu
Choose Distribute and the direction

Snapping and Guides

When moving or resizing elements, snap guides appear to help align:

Canvas edges: Snap to 0% and 100% boundaries
Canvas center: Snap to 50% horizontal and vertical center
Other elements: Snap to edges and centers of sibling elements
Visual snap lines appear in blue when alignment is detected
A small magnetic resistance keeps elements snapped until you drag past the threshold

Grouping Elements

Group multiple elements together to move, resize, and manage them as a single unit.

Creating a Group

Select multiple elements (Shift+Click or marquee select)
Right-click and choose Group from the context menu
The selected elements become a group

Group Behavior

Moving a group moves all children together
Resizing a group proportionally scales all children (including font sizes)
Groups appear as a single entry in the timeline
Nested groups are automatically flattened when re-grouping

Ungrouping

Select the group
Right-click and choose Ungroup
Children return to individual elements with their absolute positions restored

Context Menus

Right-click on elements, scenes, or the canvas for context-sensitive actions:

Copy / Paste / Duplicate / Delete
Lock / Unlock element (locked elements cannot be moved, resized, or edited in the Properties panel)
Group / Ungroup elements
Align and Distribute tools (multi-select)
Bring Forward / Send Backward (z-index)
Bring to Front / Send to Back

Paste copied elements
Select All elements

Add Scene / Duplicate Scene / Delete Scene
Scene Settings / Scene Sounds

Undo and Redo

FX Express tracks your editing history:

Undo: Press Cmd+Z (Mac) or Ctrl+Z (Windows/Linux)
Redo: Press Shift+Cmd+Z (Mac) or Shift+Ctrl+Z (Windows/Linux)
History stores up to 50 steps
Consecutive text edits within the same element are grouped into a single undo step

Timeline Integration

Every element appears in the Timeline:

View element timing visually
Drag to adjust in/out times
Expand for keyframe animation

See Chapter 10: Timeline Editor for details.

Best Practices

Organize Your Elements

Use meaningful names when possible
Group related elements together
Keep Z-Index values organized

Design for Flexibility

Use percentage-based sizing for responsive layouts
Leave margins from edges
Consider different output resolutions

Optimize Performance

Use appropriately sized images
Limit the number of video elements
Simplify complex scenes

Maintain Consistency

Use themes for consistent styling
Align elements to a grid mentally
Keep spacing uniform

Troubleshooting

Element Won’t Select

It may be behind another element
Try clicking on a visible edge
Use the Timeline to select by name

Element Disappeared

Check if it’s positioned off-canvas (X/Y values)
Check if opacity is set to 0
Check if In Time is after current playhead position

Can’t Resize Element

Some elements have minimum sizes
Check if the element is locked
Try selecting it again

← Previous: Working with Scenes | Next: Text Elements →