Design WordPress
the way it should feel.
This whole page was built in Vantage — a real, live layout, not a slideshow. Scroll through it to watch every element come alive, and read the exact steps that made it. Learn by seeing.
Add a Section, set its Fill to a deep near-black (#0a0a12), and turn on Style → Grain for a filmic texture.
Drop two big circular Frames, fill each with a radial-gradient glow, and give them Effects → Loop → Float. Position them off the edges — those are the orbs.
In a centered Stack add a glass Badge (Style → Glass), a Heading with Effects → Split text = Words, then a second Heading whose Fill is an image-clip gradient.
Add two Buttons: the first with a gradient Fill + soft shadow, the second with Glass on.
Drop an Image, open Interactions → Scroll transform and add THREE channels — Move Y 70→−30, Scale 0.94→1, Blur 6→0 — for the parallax you feel while scrolling.
Chapter 1 · The canvas
Structure & layout
Everything in Vantage is a box inside a box. Sections are full-width bands; Frames (Stacks) arrange their children in a row or column with gap, padding and alignment. Master these four properties and you can build any layout.
Resize the window — this row becomes a column on mobile.
Resize the window — this row becomes a column on mobile.
Resize the window — this row becomes a column on mobile.
Drag a Section from the toolbar — the full-width band that holds everything.
Inside it drop a Frame and set Layout → Direction = Row, Gap = 18 so children sit side by side.
Add three Frames as children; give each a dashed Border and 22px Padding.
In the Row’s Responsive tab set Mobile → Direction = Column, so the cards stack on phones.
Between blocks drop a Spacer (fixed height) and a Divider — both are real elements.
Chapter 2 · Words
Typography & rich text
Headings and Text elements share the same type controls: family, size, weight, line-height, letter-spacing and colour. Save a combination once and it becomes a reusable Text Style in the Assets panel. For paragraphs with links or emphasis, switch a Text element to Rich Text.
Display / 48 / Bold
Heading / 28 / Semibold
Drop a Heading, then in Typography set Size 46, Weight 800, Letter-spacing −0.02em.
Add a second Heading at Size 28 / Weight 700 for the next step in the scale.
Add a Text element and toggle it to Rich Text to type bold, italic and inline links.
Open Assets → Text styles and Save the heading as a style — reuse it everywhere for consistency.
Set link + emphasis colours once in Assets → Rich text; they apply across the whole site.
Chapter 3 · Colour
Colour, variables & dark mode
Colours are not typed per element — they are Variables defined once in Assets and referenced everywhere. Give a variable a light value and a dark value, turn on the dark-mode switch, and the whole page adapts. That is exactly how this tutorial handles theming.
Vector shapes — Rectangle, Ellipse, Line, Gradient — live in the same toolbar.
Open Assets → Colours and create Variables: Brand, Ink, Surface, Line — each with a light AND a dark value.
Select any element and set its Fill to a variable (e.g. Brand) instead of a raw hex.
For the gradient bar, add a Frame and set Fill = Linear gradient with two colour stops.
Drop Rectangle and Ellipse vector shapes for accents — they take Fill and Radius like any box.
Turn on Colour mode → Dark switch; the sun/moon toggle now swaps every variable to its dark value.
Chapter 4 · Interaction
Buttons, icons & states
A Button is a styled link with three states you can design independently: normal, hover and pressed. Icons are inline SVG (baked, so the front-end stays dependency-free). You can even make any element draggable.
Drop a Button and set its Fill = Brand. In its Hover state tab, change the Fill a shade darker.
In the Pressed state tab add Transform → Scale 0.96 so it depresses on click.
Give a second Button an outline: transparent Fill + 1px Border, then restyle the border on Hover.
Type a Tooltip string in the button’s properties — it is a property, not a separate element.
For the draggable pill, select a Frame and set Interactions → Drag = Horizontal.
Chapter 5 · Media
Images, before/after & sliders
Images come from the WordPress Media Library and take object-fit, radius and shadow like any box. Beyond a plain image, Vantage ships a before/after Compare slider and a swipeable Slider carousel — both real elements, both zero-config.
Drop an Image and pick a picture from the WordPress Media Library; set Radius and Object-fit = Cover.
Add a Compare element and set its Before and After images — it builds the drag handle for you.
Add a Slider, then drop a few Frames (each wrapping an Image) inside as slides.
In the Slider properties set Autoplay = 3.5s; arrows, dots and swipe come for free.
Chapter 6 · Reuse
Cards & components
Design one card, then turn it into a Component. Every copy stays in sync — edit the master and all instances update. Grids arrange cards responsively: three across on desktop, one on mobile.
Fast by default
Clean HTML + CSS output means PageSpeed scores in the 90s with no extra work.
Design tokens
Colours, type and spacing are variables — restyle the whole site in seconds.
Direct manipulation
Drag, nest, resize and align on a real DOM canvas — what you see ships.
Design ONE Card: a Frame with an icon chip, a Heading and a Text.
Select it and choose Create Component — every copy now stays in sync with the master.
Wrap the cards in a Frame set to Layout → Grid, 3 columns.
In Responsive set Tablet = 2 columns and Mobile = 1 column.
Give the grid Effects → Entrance = Slide-up, Trigger = On scroll, so cards reveal as you arrive.
Chapter 7 · Motion
Animation & scroll effects
Motion is a property, not a plugin. Any element can reveal on scroll, loop forever, or transform continuously as you scroll past it. Text can even split and reveal word by word.
This headline reveals word by word.
Select an element, open Effects, and set Entrance = Slide-up with Trigger = On scroll.
For endless motion set Loop = Float; for hover set Hover = Grow.
For scroll-linked motion use a Scroll effect (e.g. 3D tilt) or the Scroll transform channels.
On a Heading, set Split text = Words so each word springs in one after another.
Pick an Easing — try Spring (bouncy) for that lively, physical feel.
Chapter 8 · Proof
Counters & marquees
Numbers land harder when they animate. A Text element with "Count up" enabled tallies from zero when it scrolls into view. A Marquee scrolls its children forever — perfect for a logo strip.
Add a Text element with a number, then turn on Count up — it tallies 0 → value on scroll.
Line several counters up in a Row for a stat band.
Add a Marquee element and drop text or logos inside it as children.
Set the Marquee’s Speed and enable Pause on hover.
Chapter 9 · Organise
Tabs & accordions
When content outgrows the screen, group it. Tabs swap panels in place; an Accordion expands one answer at a time. Both are single elements — you just drop content inside.
Design visually
Drag elements onto the canvas and style them in the right-hand inspector — no code.
Add motion
Give any element an entrance, loop or scroll effect from the Animation section.
Publish clean HTML
Hit publish and Vantage renders semantic HTML + CSS straight to WordPress.
Does Vantage ship JavaScript to the front-end?
Only a tiny, opt-in runtime for interactions like sliders and reveals. Static pages ship pure HTML + CSS.
Can I use my WordPress theme header and footer?
Yes — or design your own in Vantage and set them as the site header/footer, replacing the theme chrome.
Is the output SEO-friendly?
Every element renders as semantic HTML with real headings, alt text and clean markup.
Add a Tabs element; each child Frame becomes one tab (its name is the tab label).
Put the panel content inside each tab Frame.
For the FAQ, add Accordion elements — the accordion’s own text is the question.
Drop a Text inside each accordion as the answer; it expands on click.
Chapter 10 · Micro-widgets
Rating, progress & share
Small dynamic pieces round out a page: a star Rating, a circular Progress ring, and Share buttons that link to social networks. Each is a drop-in element with one or two properties.
Add a Rating element and set its value (e.g. 5 stars).
Add a Progress-ring element; set the percentage and Colour = Brand.
Add a Share element and list its networks (twitter, linkedin, facebook).
Drop each widget into its own card Frame for a clean row.
Chapter 11 · Capture
Forms & inputs
Forms are first-class. Combine Input, Textarea, Select, Checkbox, Radio and Switch inside a Form element; submissions are stored in WordPress under Vantage → Form submissions. Validation and multi-step wizards are built in.
Drop a Form element — it wraps the fields and handles the submission.
Inside, add Input fields (set type Text / Email and mark them required).
Add a Select with option children, a Textarea, plus a Checkbox, a Switch and two Radios sharing one name.
Add a submit Button at the bottom.
On the live site every entry is saved under Vantage → Form submissions (or emailed to you).
Chapter 12 · Go further
Commerce & code
Selling? The Products element renders a live WooCommerce grid. Need something bespoke? The Code element drops raw HTML/embeds in — while the rest of the page stays clean and visual.
Product 1$19.00Add to cart
Product 2$29.00Add to cart
Product 3$39.00Add to cartAdd a Products element and set the count — on a live store it renders your real WooCommerce products.
Add a Code element and paste raw HTML or an embed for anything bespoke.
Use Code sparingly — everywhere else Vantage keeps the output clean, semantic and fast.
Chapter 13 · Scroll magic
Scroll animation that feels alive
This is what makes people stop scrolling. A Scroll transform ties any property — position, scale, rotation, opacity, even blur — to how far an element has travelled through the viewport. Stack several channels, each with its own range, for rich, physical parallax.
Move + fade
This chip drifts up and fades in as it scrolls through the viewport.
Scale + blur
It starts small and blurred, then sharpens to full size.
Rotate
A gentle rotation that tracks your scroll position exactly.
Select the element and open Interactions → Scroll transform.
Click “+ Add scroll transform” and pick a property — Move Y, Scale, Rotate, Opacity or Blur.
Set From and To (e.g. Move Y From 80 To −20 pushes it up as you scroll past).
Add MORE channels on the same element to combine them — e.g. Scale 0.6→1 plus Blur 10→0.
Use Start % / End % to limit a channel to a slice of the scroll (e.g. blur only in the first 60%).
Pin a section.
As you scroll, this section stays fixed on screen while its stages advance — the Apple-style sticky story.
Cross-fade the stages.
Each stage is a Frame with a Scene-stage number. Vantage cross-fades them by scroll progress, automatically.
Ship it clean.
It compiles to a sticky pin plus one tiny script — no heavy libraries, no janky scroll-hijacking.
Chapter 14 · How it was made
The pinned scene, step by step
Add a Section and turn on Interactions → Scroll scene (pin). Set Scene stages = 3.
Add one Frame per stage and give each a Scene-stage number (0, 1, 2).
Put a headline + text inside each stage Frame; Vantage cross-fades them as you scroll.
You don’t size anything — Vantage makes the section tall enough to pin automatically.
The full toolbox
Everything you can drag in
This page used 35+ elements and dozens of properties — and there is still more waiting in the library.
Now build your own.
You just read a page that Vantage built — every section, every animation, made in the editor. Open it, drop a Section, and design. Everything you saw is one drag away.
The Vantage Tutorial — a self-documenting page that teaches the editor by being built in it.
© 2026 Vantage — designed in Vantage.
Light / Dark · Zero-JS output