Page Builder Styling
Control spacing, sizing, typography, backgrounds, borders, effects, and responsive design in Workfile Canvas.
Every widget in Workfile Canvas has a Style tab that gives you full control over its appearance — spacing, sizing, colors, typography, borders, shadows, and more. This guide covers the complete styling system.
The Style tab controls the visual appearance of a widget via CSS. The Content tab controls what the widget displays (text, images, settings). Both work together — Content defines what, Style defines how it looks.
How styling works
When you select a widget and open the Style tab, you'll see sections for different style categories. Each change generates scoped CSS that only affects that specific widget.
Key concepts:
- Responsive — every style value can be different on desktop, tablet, and mobile
- States — colors and effects can change on hover, focus, and active states
- Inheritance — tablet inherits from desktop, mobile inherits from tablet (unless overridden)
- Units — numeric values support px, %, em, rem, vw, vh
Responsive breakpoints
Use the device toggle at the top of the Style tab to switch between breakpoints:
| Breakpoint | Screen width | Icon |
|---|---|---|
| Desktop | 1024px and above | 🖥️ |
| Tablet | 768px – 1023px | 📱 |
| Mobile | Below 768px | 📱 |
Values cascade downward:
- Set a value on Desktop → it applies to all devices
- Override on Tablet → applies to tablet and mobile (desktop keeps its value)
- Override on Mobile → applies only to mobile
Design desktop-first, then check tablet and mobile. Most layouts only need 1-2 mobile overrides (like reducing padding or switching to single-column).
Spacing
Control the space around and inside a widget.
| Property | What it does | Example |
|---|---|---|
| Margin top | Space above the widget | 32px |
| Margin bottom | Space below the widget | 32px |
| Margin left | Space to the left | 0px |
| Margin right | Space to the right | 0px |
| Padding top | Inner space at the top | 24px |
| Padding bottom | Inner space at the bottom | 24px |
| Padding left | Inner space on the left | 16px |
| Padding right | Inner space on the right | 16px |
Each value supports units: px, %, em, rem, vw, vh.
Use % for padding on sections to create proportional spacing that scales with screen size. Use px for precise control on smaller elements.
Sizing
Control the dimensions of a widget.
| Property | What it does | Example |
|---|---|---|
| Width | Widget width | 100%, 400px, auto |
| Height | Widget height | auto, 300px, 50vh |
| Min width | Minimum width | 200px |
| Min height | Minimum height | 100px |
| Max width | Maximum width | 1200px |
| Max height | Maximum height | 500px |
Most widgets default to width: 100% and height: auto. Only override these when you need a specific size — like a fixed-width card or a hero section with a set height.
Typography
Control text appearance. These settings apply to all text within the widget.
| Property | Options | Example |
|---|---|---|
| Font family | System fonts + Google Fonts | Inter, Playfair Display |
| Font size | Any size with units | 16px, 1.2rem |
| Font weight | 100–900 | 400 (normal), 700 (bold) |
| Font style | Normal, italic, oblique | Italic |
| Line height | Spacing between lines | 1.5, 24px |
| Letter spacing | Space between characters | 0.5px, 0.1em |
| Text align | Left, center, right, justify | Center |
| Text transform | None, uppercase, lowercase, capitalize | Uppercase |
| Text decoration | None, underline, line-through | Underline |
| Color | Any color (supports hover state) | #1a1a1a |
Hover states for text
Text color supports hover state — set a different color that appears when the customer hovers over the widget. This is especially useful for links and buttons.
Background
Control the widget's background. Multiple background types are available:
| Type | Description |
|---|---|
| None | Transparent background |
| Color | Solid color (supports hover state) |
| Gradient | Linear, radial, or conic gradient |
| Image | Background image with positioning and sizing |
| Pattern | Decorative pattern presets |
| Video | Background video (with fallback image) |
Background image options
| Setting | Options |
|---|---|
| Position | Center, top, bottom, left, right, custom |
| Size | Cover, contain, auto, custom |
| Repeat | No repeat, repeat, repeat-x, repeat-y |
| Attachment | Scroll, fixed (parallax effect) |
| Filters | Blur, brightness, contrast, saturate, grayscale, sepia |
Background overlay
Add a color or gradient overlay on top of background images to improve text readability:
| Setting | Description |
|---|---|
| Color | Overlay color (e.g., black at 50% opacity) |
| Opacity | How transparent the overlay is (0–100%) |
| Blend mode | How the overlay blends with the image |
A dark overlay (black at 40-60% opacity) on a background image makes white text readable on any photo. This is the standard pattern for hero sections.
Border
Control the widget's border and corner rounding.
| Property | Options | Example |
|---|---|---|
| Width | Per-side or uniform | 1px, 2px |
| Style | Solid, dashed, dotted, none | Solid |
| Color | Any color (supports hover state) | #e5e7eb |
| Radius | Per-corner or uniform | 8px, 50% (circle) |
Use border-radius: 50% on a square widget to make it circular. Use large values like 24px for pill-shaped buttons.
Effects
Visual effects that add depth and interactivity.
| Property | Description | Example |
|---|---|---|
| Opacity | Widget transparency (supports hover) | 100% default, 80% on hover |
| Box shadow | Drop shadow (supports hover) | 0 4px 12px rgba(0,0,0,0.1) |
| Text shadow | Shadow behind text | 0 2px 4px rgba(0,0,0,0.3) |
| Backdrop blur | Blur content behind the widget | 8px (frosted glass effect) |
| Mix blend mode | How the widget blends with content below | Multiply, overlay, screen |
Hover effects
Box shadow and opacity support hover states — create interactive cards that lift on hover:
- Default:
box-shadow: 0 1px 3px rgba(0,0,0,0.1) - Hover:
box-shadow: 0 8px 24px rgba(0,0,0,0.15)
Combined with a transition (see below), this creates a smooth lift effect.
Transform
Move, rotate, scale, or skew a widget.
| Property | Description | Example |
|---|---|---|
| Translate X | Move horizontally | 10px, -50% |
| Translate Y | Move vertically | -20px |
| Rotate | Rotation in degrees | 45deg |
| Scale | Size multiplier | 1.1 (10% larger) |
| Skew X/Y | Slant the widget | 5deg |
Transforms support hover states — create effects like "scale up on hover" for interactive cards.
Transitions
Smooth animations between states (default → hover).
| Setting | Description | Example |
|---|---|---|
| Property | What to animate | All, opacity, transform, box-shadow |
| Duration | How long the animation takes | 200ms, 300ms |
| Easing | Animation curve | Ease, ease-in-out, cubic-bezier |
| Delay | Wait before starting | 0ms, 100ms |
Add transition: all 200ms ease to any widget with hover effects. This makes color changes, shadows, and transforms animate smoothly instead of snapping instantly.
Layout
Control how the widget positions itself and its children.
| Property | Options |
|---|---|
| Display | Block, flex, grid, inline-flex, none |
| Position | Static, relative, absolute, fixed, sticky |
| Z-index | Stacking order (higher = on top) |
| Overflow | Visible, hidden, scroll, auto |
Flexbox (when display = flex)
| Property | Options |
|---|---|
| Direction | Row, column, row-reverse, column-reverse |
| Justify content | Start, center, end, space-between, space-around |
| Align items | Start, center, end, stretch, baseline |
| Wrap | No wrap, wrap, wrap-reverse |
| Gap | Space between flex items |
Grid (when display = grid)
| Property | Options |
|---|---|
| Template columns | Column definitions (e.g., 1fr 1fr 1fr) |
| Template rows | Row definitions |
| Gap | Space between grid items |
| Justify items | Horizontal alignment of items |
| Align content | Vertical alignment of content |
Visibility
Control when a widget is visible:
| Setting | Description |
|---|---|
| Hide on desktop | Widget hidden on screens ≥1024px |
| Hide on tablet | Widget hidden on 768–1023px screens |
| Hide on mobile | Widget hidden on screens <768px |
Use visibility to show different content per device. For example, show a detailed table on desktop but hide it on mobile and show a simplified card layout instead.
Entrance animations
Add animations that play when a widget scrolls into view:
| Animation | Effect |
|---|---|
| Fade | Fades in from transparent |
| Slide up | Slides up from below |
| Slide down | Slides down from above |
| Slide left | Slides in from the left |
| Slide right | Slides in from the right |
| Scale | Grows from smaller size |
| Rotate | Rotates into position |
| Blur | Unblurs from blurry |
Each animation has:
- Duration — how long it takes (200ms–2000ms)
- Delay — wait before starting
- Easing — animation curve
- Distance/Scale/Rotation — how far it moves
Entrance animations only play once — when the widget first scrolls into the viewport. They don't repeat on subsequent scrolls.