Drag
Go
Academy
DragGo Academy
Master DragGo visually.
Every section below is built out of the thing it teaches — including the editor under this text. That is not a screenshot: it is drawn with DragGo frames, and you can select any part of it.
Drag
Go
▾
T
✎
▶
Publish
Designs
Layers
Assets
Page
Desktop
Tablet
Phone
↶
↷
⟲
−
38%
+
☀
⛶
Design
✦ Agent
PAGE
Template
⌄
Page type
Standalone page
Canvas
⌄
Desktop
1200
Laptop
1100
Tablet
810
Mobile
390
Effects
⌄
Scroll progress
Yes
No
Back-to-top
Yes
No
01 · Getting started
Six regions. That is the whole editor.
Look at the editor above — that is it. Learn where these six live once and you stop hunting for controls.
Top toolbar
The logo menu, the insert and draw tools, Preview and Publish.
Left panel
Designs, Layers and Assets — three tabs, one rail.
Canvas
Infinite. Every breakpoint side by side.
Right inspector
Every property of whatever is selected, and nothing else.
Floating toolbar
Tools, undo, history, zoom, theme, fullscreen.
Command palette
Cmd/Ctrl + K. Press ? for the full shortcut sheet.
Tip
Cmd/Ctrl + K opens the command palette — it is real, and it is the fastest way to reach anything. Then press ? for every shortcut.
02 · Top toolbar
Five tools and two buttons.
The whole top bar. On the left: the logo opens the app menu, then insert, frame, text and pen. On the right: preview, and publish.
Drag
Go
▾
T
✎
▶
Publish
The real top toolbar — drawn with frames, not screenshotted
Logo ▾
The app menu: grid, rulers, Figma import, SEO, redirects, templates, canvas effects, localization, shortcuts.
+ Insert
The element library. Every node type DragGo has.
▣ Frame
Draw a frame. Press F.
T Text
Drop a text block. Press T.
✎ Pen
Draw a vector path. Press P.
▶ Preview
The real rendered page, before anyone else sees it.
Publish
It becomes a WordPress page. Permalinks, menus, SEO plugins — all still work.
Mobile overrides
A badge in the inspector telling you this breakpoint has its own values.
04 · The Insert panel
80 elements. Every one of them real.
Press + or hit the insert tool. These are the actual categories and the actual counts — read out of the element library, not remembered.
Search
BASIC
Layout
8
›
Navigation
1
›
Text
6
›
Media
8
›
Icons
1
›
Vectors
4
›
Utility
2
›
COMPONENTS
Forms
13
›
Social
6
›
Shaders
8
›
Creative
9
›
Interactions
11
›
Commerce
1
›
DATA & CODE
Code
1
›
CMS
1
›
Basic
The primitives — everything else is built from these. Sections, frames, stacks, rows, grids, text, headings, buttons, images, icons, vectors, dividers.
Components
Ready-made and wired: 13 form parts, 6 social, 8 shaders, 9 creative, 11 interactions, 1 commerce.
Data & code
A collection that runs a real WordPress query, and a raw code block for the times nothing else will do.
Tip
Search beats browsing. Type "accordion" and it is one Enter away — or use Cmd/Ctrl + K without opening the panel at all.
05 · Designs, Layers, Assets
Three tabs. One rail.
Every design on the site, the tree of the page you are on, and your whole design system — in that order.
Designs
Layers
Assets
DESIGNS
Home
About
Pricing
Blog
Designs — every page on this site
Designs
Layers
Assets
Desktop
Phone
Page
Nav
Hero
Heading
Button
Footer
Layers — the tree behind the canvas
Designs
Layers
Assets
COLOURS
Primary
Secondary
Accent
Heading
TEXT STYLES
Display
Heading 1
Body
Assets — your design system
Tip
Designs and the dashboard are the same list — every design is a real WordPress page with its own URL. There are no sub-pages inside a design, and that is deliberate.
06 · Canvas & the floating toolbar
Infinite space, and the bar that steers it.
Not a page you scroll — a space you fly around. Every shortcut below is real; try each one as you read it.
Desktop
Tablet
Phone
↶
↷
⟲
−
38%
+
☀
⛶
The canvas: dot grid, artboards per breakpoint, floating toolbar
Cmd/Ctrl + = − 0
Zoom in, out, fit
Shift + 1 / 2
Zoom presets
Space + drag
Pan — the canvas is infinite
Enter / Escape
Step into a child / back out
Shift + click
Multi-select
Arrows / Shift
Nudge 1px / 10px
Cmd/Ctrl + D
Duplicate
Cmd/Ctrl + G
Group
Cmd/Ctrl + L / ;
Lock / hide
Cmd/Ctrl + ] [
Bring forward / send back
Shift + R
Rulers
Shift + A / F
Hug contents / fill width
Common mistake
Cmd/Ctrl + A selects the siblings, not the whole page. That is deliberate — it is what you want nearly every time.
07 · The right inspector
It only ever shows what applies.
Select nothing and you get page settings — template, canvas widths, effects. Select an element and you get its thirteen property groups. Nothing else is in your way.
Design
✦ Agent
HERO
Hero
SECTION
Layout
⌄
Gap
24
Padding
48
Size
+
W
Fill
H
Hug
Fill
+
Border
+
Effects
+
Position
+
Transform
+
Visibility
+
Interactions
Click, hover, press, scroll-into-view — nine actions each.
Link
Where it goes. Internal, external, anchor, or a CMS field.
Layout
Stack or grid, direction, gap, alignment, wrap, padding.
Size
Fixed, Fill, Hug. Min/max. Aspect ratio. Overflow.
Fill
Colour, gradient, image. A variable, ideally.
Border
Width, style, colour, radius — and gradient borders.
Style
Typography, shadows, blend, opacity.
Position
Static, absolute, sticky. Pin it and it stays.
Transform
Move, scale, rotate, skew, origin.
Effects
Blur, backdrop, filters, the lot.
Accessibility
Role, label, tab order. Not optional.
Visibility
Hide per breakpoint, per orientation, or on a condition.
Advanced
Custom id, classes, raw attributes.
Tip
A section is collapsed until it has something in it. That is why the panel looks short at first and grows as you work — it is showing you what you actually set.
08 · Frames, stacks & sizing
These are live. Select any of them.
A frame is a box. Give it a direction and it is a stack — its children arrange themselves, and keep arranging themselves when the screen changes.
Row · gap 12
A
B
C
flexDirection: row · gap: 12px
Fill vs Hug
Fill
Hug
Fill: flexGrow 1 · Hug: width 'auto'
Grid · 3 columns
1
2
3
4
5
6
display: grid · repeat(3, 1fr)
Space between
←
→
justifyContent: space-between
Best practice
Reach for Fill and Hug before you type a pixel. Shift+F fills, Shift+A hugs. Fixed widths are the thing that breaks on a phone.
09 · Typography & text styles
This is the scale. Not a list of it.
Every line is rendered at the size it names. These five are real text styles on this page — open Assets → Text styles, change Heading, and every heading here changes with it.
Display
52px / 700
Master DragGo visually.
Heading
34px / 700
Build once. Change everywhere.
Lead
18px / 400
Clean HTML and CSS. Zero JavaScript on the frontend.
Paragraph
15px / 400
A frame is a box. Give it a direction and it becomes a stack — its children arrange themselves, and keep arranging themselves when the screen changes.
Caption
12px / 600
DRAGGO ACADEMY
10 · Variables & assets
Change one value. Watch the page follow.
These swatches are the actual variables driving this tutorial. Open Assets → Variables, change Brand, and every button, link, eyebrow and accent on this page moves with it — including the ones you already scrolled past.
Brand
--dg-v-brand
Active
--dg-v-brandActive
Text
--dg-v-text
Muted
--dg-v-muted
Surface
--dg-v-surface
Line
--dg-v-line
Soon
--dg-v-soon
Every variable has a dark value
Set it once and dark mode is done. All ten here have one — flip the theme and watch.
Text styles
Display, Heading, Lead, Paragraph, Caption. Edit the style; every text using it updates.
Components & media
Your saved components and the WordPress media library, in the same rail.
11 · Components
These three buttons are one component.
Not a diagram — three live instances of the same master, each on a different variant. Select one: the inspector shows its master, its variant, and everything you can override.
Primary
Secondary
Ghost
One master · three variants · three live instances
componentId: ac-btn · variant: default | ac-btn-secondary | ac-btn-ghost
Master
The original. Edit it, every instance follows. Cmd/Ctrl + Alt + K makes one from your selection.
Variants
One component, many states. Switch per breakpoint, or on a click.
Properties
Expose text, image, colour, link or an action so instances differ without breaking sync.
Overrides
Change the text on one instance only. The others stay as they are.
Sync
Edit the master; every instance on every page updates.
Detach
Cut the link, keep the pixels. Useful once, permanent after.
Best practice
Make a component the second time you copy something, not the first. Two uses proves a pattern; one is just a shape.
12 · Responsive
Resize this window. Right now.
The four cards below are in a row. Narrow the browser past 767px and they become a column — no media query typed by hand, no second design. Desktop is the base; each smaller breakpoint inherits until you change something.
base
Desktop
What you design first. Everything inherits from here.
≤ 1200px
Laptop
Tighten spacing, drop a grid column.
≤ 1024px
Tablet
Two columns instead of three or four.
≤ 767px
Mobile
Rows become columns, automatically.
This row is the demo
responsive.mobile: { flexDirection: 'column' } — set once, on the row
Tip
The nav at the top of this page is the same lesson: on a phone its menu becomes a real mobile menu, not a hidden one.
13 · Animations
Hover these. They are not pictures.
Each tile is running the animation it names — set from one dropdown in the inspector. Nothing here was coded.
Lift
hover: lift
Glow
hover: glow
Tilt
hover: tilt
Shine
hover: shine
Grow
hover: grow
Push
hover: push
Border draw
hover: border-draw
Colour pop
hover: color-pop
Float
loop: float — always running
Pulse
loop: pulse
Bounce
loop: bounce
Swing
loop: swing
And the reveal you have been watching all along
animation: { entrance: 'slide-up', trigger: 'scroll' } — on nearly every element on this page
Best practice
One idea per section. Motion should point at the content, never compete with it.
14 · What a builder cannot do
Move your mouse. Then scroll slowly.
This is the chapter that answers "why not just use a page builder". Every effect here is running — the pointer follows you, six properties scrub off one scroll, text splits into characters. None of it was coded, and none of it exists in a builder.
The pointer drives these. Hover the stage, do not click.
Magnetic
Magnetic
pointer: 'magnetic' — it reaches for the cursor
Tilt in 3D
Tilt
pointer: 'tilt' — it leans toward the cursor
Spotlight
Spotlight
pointer: 'spotlight' — light follows the cursor
Pointer parallax
Parallax
pointer: 'parallax' — depth from mouse position
Scroll scrub — six properties, tied to your scroll position
Not "play once when it appears". These interpolate as you scroll, forwards and backwards, and each channel can run over its own slice of the sweep. Scroll up and down over this row — it follows you.
Rotate + scale
scrubs: [rotate 0→180, scale 0.6→1]
Blur + fade, staged
scrubs: [blur 10→0 over 0–0.5, opacity 0.2→1]
Slide across
scrubs: [x -60→60, rotate -12→12]
Text that splits itself
Every character, on its own timeline.
That heading did not fade in. It was cut into characters and each one ran on its own delay.
animation: { splitText: 'chars', staggerOrder: 'forward' } — also 'words' and 'lines'
Layers at different speeds
Depth
Three layers, three speeds, one scroll
scrollEffect: 'parallax-down' 40 · 'parallax-up' 22 · 'parallax-up' 8
Click actions — no code, and they really fire
Click: scroll to the end
Click: back to chapter 1
Four triggers × nine actions
Click, hover, press, scroll-into-view — each can toggle, set a variant, open, close, scroll to, navigate, open a tab, or go back.
Best practice
These two buttons are the whole point: an interaction is a dropdown, not a script. Nothing on this page has a line of JavaScript you wrote.
14 · Interactive elements
Click these. They work.
Accordions, forms, ratings, rings, marquees — real node types, dropped from Insert, running right here with no code.
Accordion
Does DragGo ship JavaScript to my visitors?
Only when you use something that needs it. A page with no interactions ships zero JavaScript — measured at 56 KB total.
Do I need to know how to code?
No. Everything on this page was made from the canvas and the inspector.
Is my page a real WordPress page?
Yes. Permalinks, menus, SEO plugins and your existing content all keep working.
This accordion is also SEO
DragGo emits FAQPage schema from accordions automatically — nothing to author
Form — this one really posts
Real, not a mock-up
formHandler: 'store' — submissions land in WordPress. 'email' mails them instead.
rating · 4.5 out of 5
progressRing · progress 78%
Frames
Stacks
Variables
Components
Animations
CMS
marquee · scrolls forever
16 · The rest of the box
Tabs, timelines, before/after, sliders — running.
Everything the other chapters had no room for. Same rule: these are the real nodes, on this page, not pictures of them.
Tabs — click them
A frame is a box. Give it a direction and it lays its children out.
Four breakpoints. Desktop is the base; the rest inherit until you change one.
Thirteen entrance animations, thirteen hover, thirteen loop. No code.
tabs · one node, one child per panel
Compare — drag the handle
compare · two children: before, after
Timeline
Design
Draw it on the canvas.
Publish
Clean HTML, zero JavaScript.
Grow
Bind it to your real content.
timeline · one child per entry
Slider — swipe or drag
slider · one child per slide
And the rest of the library
Shaders · 8
Aurora, glow, stripes and a mesh that drift; a grid, rays and a dot texture that hold still. CSS and your own colours, so there is no image to load.
Creative · 9
Split text, count-up, logo tickers, gradient and outline text, scroll scenes.
Social · 6
Share buttons and embeds that do not phone home until clicked.
Vectors · 4
The pen tool. Real bézier paths, boolean ops, stroke and fill.
Lottie & Spline
JSON animation and 3D scenes. The Lottie player is bundled and self-hosted — no CDN.
Video & audio
Native players. A hover-to-play video costs a few lines of runtime, and only on that page.
Overlay & lightbox
Modals, drawers, image lightboxes — no plugin, no jQuery.
Code
The escape hatch. Raw HTML when nothing else will do.
Localization
App menu → Localization. A language switcher, and per-language text.
Page effects
Preloader, custom cursor, scroll progress, back-to-top, announcement bar, scroll-spy dots, page transitions.
Interactions
Four triggers — click, hover, press, scroll-into-view — times nine actions. Set variants, scroll to, toggle, open, play.
Scroll scrub
Tie up to six properties to scroll position at once. Opacity, scale, rotate, blur, x, y.
Tip
Every one of these is one node from the Insert panel. If you can find it there, it renders as clean HTML — there is no "pro" tier hiding half of them.
15 · CMS
Those are your real posts, below.
Not placeholders. A collection node running a real WordPress query against this site — the same thing you get by dropping a collection and picking a post type.
Getting started with DragGo
A quick tour of designing your first page on the canvas.
Designing responsive layouts
Desktop, tablet and mobile — one design that adapts everywhere.
Building a design system
Tokens, components and variants keep your site consistent.
A real query, bound to real fields
collection: { postType: 'post', orderby: 'date' } · binding: { text: 'title' } · { src: 'featured_image' }
Bind anything
Title, excerpt, content, date, author, permalink, featured image — or meta:<key>, or acf:<key>.
Filter & sort
By taxonomy and term, by meta key. Newest, oldest, title, menu order, random.
Search & paging
Built in, and they work on the live site.
Detail templates
Design one post layout, bind it to a post type, every post uses it.
Conditions
Show an element only when a field has a value. Empty states, handled.
Still WordPress
A real WP_Query — permalinks, menus and SEO plugins keep working.
17 · SEO & social
Per design, and out of the way.
App menu → SEO & social. Title, description, social image, canonical, noindex. If Yoast or Rank Math is active, DragGo steps aside entirely and lets them own the head — no two plugins fighting over one tag.
SEO & SOCIAL
Title
DragGo Academy
Description
Learn DragGo by scrolling.
Canonical
https://…
OG type
website
Twitter card
summary_large_image
noindex
Yes
No
Seven fields
Title, description, social image, canonical, OG type, Twitter card, noindex. That is all a page needs.
FAQ schema, free
Every accordion on a page becomes FAQPage structured data automatically. The accordion two chapters up is already doing it.
Site parts stay out of the index
Your header, footer and 404 designs are page parts, not pages. DragGo keeps them out of the sitemap and marks them noindex — even when an SEO plugin is running.
AI crawlers read it all
GPTBot, ClaudeBot and PerplexityBot do not run JavaScript. A DragGo page is HTML, so 100% of it is readable — that is a hard advantage over any builder that renders client-side.
18 · Publishing
Clean HTML. Zero JavaScript.
Publish and you get a normal WordPress page — semantic HTML and class-based CSS. No framework, no runtime, nothing to hydrate. JavaScript ships only when you use something that needs it.
0 KB
JavaScript on a page with no interactions
56 KB
Total weight of that page
100%
Readable by AI crawlers — they do not run JS
Preview
The real rendered page, before anyone else sees it.
Publish
A WordPress page. Permalinks, menus, SEO plugins and your existing content all keep working.
Header, footer, 404, templates
A design can be a site part instead of a page — set it once and it appears everywhere, on any theme.
Tip
A design attached to a WordPress page is edited with "Edit with DragGo". The page keeps its URL and its place in your menus.
19 · Coming soon
What we are building next.
Everything above this line is in DragGo today — you have been using it while reading. Everything below is not. We would rather tell you than let you go looking.
🚀 Coming Soon
AI Builder
Generate layouts and copy from a prompt.
🚀 Coming Soon
Cloud
Your designs, synced across sites.
🚀 Coming Soon
Marketplace
Buy and sell templates, components and themes.
🚀 Coming Soon
Extensions
Add to the editor — the WordPress connector first.
🚀 Coming Soon
Settings
Site-wide preferences in one place.
🚀 Coming Soon
Realtime collaboration
Two cursors, one canvas.
🚀 Coming Soon
Team workspaces
Shared component libraries.
🚀 Coming Soon
Version history
Scrub back to any point.
🚀 Coming Soon
Comments
Feedback pinned to the element.
🚀 Coming Soon
Community assets
Free components from everyone.
🚀 Coming Soon
Animation timeline
Keyframes, on a track.
🚀 Coming Soon
Developer API
Build on top of DragGo.
Tip
The Agent tab in the inspector is a preview of the AI work — the panel is there, the model is not. That is why its input is disabled. Plugins and Settings say SOON in the app menu for the same reason.
Drag
Go
You made it
Congratulations — you know DragGo.
Nineteen chapters, one scroll. Every demo you touched was the real feature — and this whole page, editor mock-ups included, was built with the tools you just learned.