Everything you need to build with WUWI Sites.

Start here

WUWI Sites is one canvas with three builders on top of it. You will spend most of your time in the Page builder. The Theme builder holds the parts that repeat on every page (header, footer, popups, blog templates), and the Blog builder is where you write posts.

The screen, in 30 seconds

• Left rail — things about the page you are on: Pages, Templates, Add (sections and elements), Media.
• Right rail — things that are site-wide: Ask WUWI, Brand, Navigation, Form templates, Structure, History.
• Top bar — screen-size preview, undo and redo, Preview, the save indicator, and Update, which publishes.
• Canvas — your page. Click anything to select it; the left panel switches to its settings.

Your first five minutes

1. Open Brand on the right and set your logo, colors and fonts. Every element uses them by default.
2. Open Pages on the left and add the pages you need. Home already exists.
3. On each page, use Add → Sections to drop in ready-made blocks, then click into any text to change it.
4. Press Update to publish. Your site is live at your WUWI address immediately.

Pages & folders

A site is a list of pages. Each page has its own URL, its own SEO settings and its own sections.

Add, rename, reorder

• Add a page: Pages panel → Add page. Give it a name; the URL is made from it.
• Rename: click the page name in the list. The URL only changes if you change it under the page's SEO popup.
• Reorder: drag pages in the list. Order affects your menus only if a menu is set to follow pages.
• Duplicate or delete: open the page's menu (the three dots). Home cannot be deleted.

Folders make clean URLs

Drag a page onto a folder to give it a path like /services/lawn-care or /locations/austin. Folders also power the breadcrumb trail and help search engines understand which pages belong together.

System pages

Page not found, Coming soon and Maintenance live in the Theme builder under System pages. Design them like any page. Switch a site to Coming soon or Maintenance under Settings → Site mode.

Sections

A page is a stack of sections. A section is a full-width band with its own background, padding, and column layout. Everything you place lives inside a section.

Add a section

Add → Sections. Pick a ready-made block (hero, features, pricing, FAQ, testimonials, contact…) or a blank layout with 1–4 columns. It is inserted after the section you have selected, or at the bottom.

Layout tab

• Width — Narrow, Boxed, Wide or Full. Boxed follows your site-wide container width (see *Page width*); set a custom pixel width when one section needs to differ.
• Columns — 1 to 4 equal columns, a ratio like 1:2 or 2:1, or a horizontal slider.
• Height — automatic, a minimum height, or full screen.
• Padding and gap — space inside the section and between its children. The Phone and Tablet tabs let you set smaller values for small screens.
• Vertical align — top, center or bottom when the section is taller than its content.

Style tab

• Background — solid color, gradient, image (with overlay and optional parallax) or video.
• Ambient effect — living backgrounds like aurora, starfield, rain, snow, office, city skyline, café and more.
• Color theme — flips the section to Alternate, Light, Dark, Primary or Secondary using your brand colors, so text stays readable automatically.
• Shape divider — a wave, angle or curve at the top or bottom edge.
• Animation — how the section appears as visitors scroll (fade up, zoom, blur in…), with stagger for its children.

Boxes (groups)

A Box groups elements so they move, align and style as one piece — a card, a row of buttons, an icon next to a title.

• Add: Add → Elements → Box, or select two or more elements and press Group.
• Direction: Layout → Row or Column. Rows can wrap on small screens.
• Card look: Style → background, border, corner radius, shadow, and a hover effect like *lift* or *glow*.
• Fixed size and position: Layout → Size & position lets a box (or any element) have an exact width and height, or float at an offset from its parent — on desktop, tablet and phone separately. Width and height are independent. On Tablet or Phone, type a number for that screen only, press Auto here under a field to let that dimension follow the element's natural size on small screens, or Use desktop to go back.

Elements

Elements are the building blocks inside sections and boxes. Open Add → Elements; they are grouped by what you are trying to do.

• Basics: heading, text, button, image, video, icon, divider, spacer, list, badge.
• Media & embeds: gallery, carousel, logo marquee, embed, map, HTML.
• Layout & navigation: tabs, accordion, table of contents, navigation menu, breadcrumbs.
• Docs & content: documentation (this page is one element), quote, callout, code block, comparison table.
• Marketing & social proof: feature cards, card gallery, testimonials, ratings, counters, pricing table, countdown, progress tracker, share buttons, icon list.
• Interactive: quiz, spin-to-win wheel, before/after slider, flip card, typewriter, image hotspots, timeline, marquee text.
• Games & fun: Flappy game, Runner game, Snake, Memory match — with your own character.
• Forms & tools: forms, seat calculator.

Every element has three tabs

• Content — what it says or shows.
• Layout — width, alignment, spacing, size and position.
• Style — colors, corners, borders, shadow, hover effect, animation, and typography for text elements.

Fonts, sizes and colors fall back to your Brand settings unless you change them on the element.

Quick toolbar

Selecting an element shows a small toolbar on the canvas: duplicate, move, delete, and the most-used style controls. Double-click a heading or text to edit it in place.

How do I add a header?

The header belongs to the whole site, so it lives in the Theme builder, not on a page.

1. Click Theme builder in the top bar.
2. Choose Header in the left list. A starter header with a logo and a menu is already there.
3. Click the logo element to upload your logo, or leave it on the Brand logo so it updates everywhere at once.
4. Click the menu element and pick which menu it shows (see *Navigation*).
5. Press Update to publish the header to every page.

Header settings

Select the header itself to find:

• Sticky — stays at the top while scrolling, with a blurred backdrop.
• Float over the page — the header takes no space and sits transparently over the first section (great over a hero image).
• Background color — a solid color for the header band.

Variants

Need a different header on some pages? Create a second header variant and assign it to selected pages. Everything else keeps the default.

How do I control page width?

There are two width settings, and it helps to know which one you want.

Site-wide width (most people want this)

Right rail → Brand → Layout → Container width. This is the maximum width of content on every *Boxed* section across the whole site. Common values: 1160 px (roomy), 1280 px (default), 1440 px (wide). Change it once; every page follows.

One section only

Select the section → Layout → Width. Choose Narrow, Boxed, Wide or Full, or enter a custom pixel width for that section alone. Use this for a narrow reading column or a full-bleed photo strip.

Related

• Canvas size — the screen size you *edit at* (1920 × 1080 by default) is under Settings → Default screen size. It does not change how the site renders.
• Phone and tablet — the device icons at the top of the panel switch which screen you are editing for. Values you set there apply only to that screen size.

Text, headings & fonts

Editing text

Double-click any heading or paragraph to edit it in place. Select words to make them bold, *italic*, underlined, or a link. Press Escape when you are done.

Headings and SEO

Every page should have exactly one H1 — usually the hero title. Use H2 for section titles and H3 inside them. The publish checks warn you if a level is skipped or a page has two H1s.

Sizes, weights and line height

The Brand → Typography panel sets sizes for H1–H6, paragraphs and small text, with separate phone sizes. Pick a preset (Balanced, Compact, Airy) or edit each level. Individual elements can override any of this under Style → Typography, including a different font.

Eyebrow labels

A small uppercase label above a heading is a text element with: font size small, uppercase on, letter spacing wide, and your accent color.

Special text elements

• Typewriter — a heading whose highlighted words type and retype from a list.
• Marquee text — an endless scrolling ticker.
• Counter — a number that counts up when scrolled into view ("500+", "98%").

Buttons & links

• Add: Add → Elements → Button. Set the text and the Link to field: a page (pick from the list), a URL, an email (mailto:), a phone (tel:), or a section anchor (#pricing).
• Variants: Primary, Secondary, Outline, Ghost, Glass (for photo backgrounds).
• Shape: Style → Corner radius. Full gives a pill. Brand → Buttons sets the default for the whole site.
• Hover: lift, scale or glow.
• Dropdown: a button can carry a short list of sub-links revealed on hover — handy in headers.
• Open in new tab / nofollow: under the link settings.

Images, video & media

Images

Add → Elements → Image, then Upload or choose from Media on the left rail. Set alt text for accessibility and SEO. Options: corner radius, shadow, a phone or browser frame around a screenshot, a link, or a lightbox that opens the image full-size.

Uploads are optimized automatically. Recommended: JPG or WebP for photos, PNG or SVG for logos, under 2 MB.

Video

Paste a YouTube or Vimeo link, or upload an MP4. For background video on a section, use Style → Background → Video: it autoplays muted and loops, with an optional dark overlay so text stays readable.

Galleries and carousels

• Gallery — a grid or masonry of images with an optional lightbox.
• Carousel — one slide at a time with arrows, dots and autoplay.
• Before / after — two images with a drag handle.
• Hotspots — pins on an image that open a tooltip.

Media library

The Media panel (left rail) lists everything you have uploaded. Delete what you no longer need; deleting a file removes it from any element that used it.

Brand

Brand is the one place for everything site-wide about the look. Change it once and every page follows.

• Logo & icon — logo, a dark-background logo, and the favicon. Try Suggest from logo to pull a palette from it.
• Colors — primary, secondary, tertiary; backgrounds (main, alternate); heading and paragraph text; links and link hover; button background and text; borders. Contrast hints tell you when text will be hard to read.
• Typography — a font pairing, plus the type scale for H1–H6, paragraphs and small text, with phone sizes.
• Buttons, Images, Layout — default shape, shadow, corner radius and the site-wide container width.
• Custom code — CSS, plus scripts for the page head and the end of the body.
• Share brand — export the brand as a file and import it into another site.

How brand colors reach the page

Elements use brand colors by default. A section's Color theme swaps the whole palette (Alternate, Light, Dark, Primary, Secondary) so you never hand-pick colors to keep text readable. Only set a color directly on an element when you want it to ignore the theme.

Navigation & menus

Menus are saved once and reused anywhere.

1. Right rail → Navigation → Add menu (a *Main menu* is created from your header automatically the first time).
2. In the popup, add items: pick a page or type a URL. Drag to reorder.
3. Turn an item into a Dropdown (a list of sub-links) or a Mega menu (columns with headings and short descriptions).
4. Press Publish on the menu. Visitors see it after you publish; your canvas shows it immediately.
5. On any Navigation element — header, footer, sidebar — choose which menu it shows.

Header, footer & theme parts

The Theme builder holds everything that repeats: header, footer, announcement bar, popups, system pages (Page not found, Coming soon, Maintenance, legal pages) and the blog templates.

• Edit any part like a page, then press Update to publish that part alone.
• Announcement bar — a slim bar above the header for a promotion or notice, dismissible by visitors.
• Popups — choose a trigger (delay, scroll depth, exit intent) and how many days to stay hidden after a visitor closes it.
• Variants — create a second header or footer and assign it to specific pages.
• History — every saved draft of every part is on the right rail. Restore any version.

Tablet & phone

Every site is responsive automatically: columns stack, text scales, menus collapse into a phone menu. You can still fine-tune.

• The device icons at the top of the settings panel switch the screen you are editing for. Anything you change there applies only to that screen size and smaller.
• Placeholders show the value inherited from desktop, so you always know what you are overriding.
• Use Show on to hide an element on phones (or only show it there).
• The Phone size column in Brand → Typography sets smaller heading sizes for small screens site-wide.
• Preview any size with the screen-size buttons in the top bar.

Animation & effects

• Section animation — Style → Animation on any section: fade up, fade in, zoom in, slide in, blur in, rotate in; add a delay and stagger so children appear one after another.
• Hover effects — lift, scale or glow on boxes, cards, buttons and images.
• Parallax — Style → Background → Parallax on image backgrounds.
• Ambient backgrounds — aurora, starfield, rain, snow, grain, sunrise, sunset, lightning, and environments like office, city skyline, store, café, restaurant, clinic, workshop, forest, ocean and stage lights.
• Counters, typewriter, marquee — elements built around motion.

Keep it purposeful: one animated hero and staggered cards read as polished; animating everything reads as noisy. Visitors who prefer reduced motion see the site without it.

Forms & leads

1. Add → Elements → Form, or open Form templates on the right rail for contact, quote, booking and newsletter starters.
2. Add or remove fields: text, email, phone, textarea, select, checkbox, date, file upload. Mark fields required.
3. Set the success message or a page to redirect to.
4. Under Settings → Forms every submission is stored. Turn on email notifications or a webhook to forward them to your inbox, CRM or Zapier.

Spam protection is on by default. Submissions are kept even if you later delete the form.

Blog

Open the Blog builder from the top bar.

• Write a post — title, featured image, category, excerpt and a body made of headings, paragraphs, images, lists and callouts.
• SEO per post — click the SEO icon next to the post for title, description, focus keyword, share image, canonical and robots. Generate with AI drafts them from the body.
• Templates — the single-post page, the post card and the archive are designed once in the Theme builder. Change them and every post updates.
• Categories — tag a post; it appears in the right filter and on the category's own archive page.
• Reading time, author, date, breadcrumbs — elements you place in the post template; the values come from the post.
• Comments — approval-only. Nothing is public until you approve it under Settings → Comments.

SEO

Every page and post has an SEO popup — the icon next to it in the Pages or Posts list.

What is in the popup

• A live score against WUWI's on-page guidelines and a Google-style preview.
• Title (under 60 characters) and description (70–160 characters).
• Focus keyword, checked against the title, description, headings and first paragraph.
• Share image and titles for social networks.
• Robots (index/noindex, follow), canonical URL, schema type and a breadcrumb title.
• Generate with AI writes title, description and keyword from the page's own content. Edit, then save.

What is automatic

Sitemap.xml, robots.txt, canonical tags, breadcrumbs, and structured data (WebSite, BlogPosting, FAQPage for FAQ sections, LocalBusiness from your business profile).

The publish gate

Eight checks run when you press Update: one H1, heading order, non-empty content, title and description length, a valid canonical, indexability, sitemap presence and a reachable robots.txt. Real problems block publishing and tell you the fix; warnings let you publish anyway.

Publishing & history

• Nothing is live until you press Update. Drafts save automatically as you work — watch the *Saved* indicator in the top bar.
• Preview opens the current draft in a new tab exactly as visitors would see it.
• Unpublish a page from the Update menu to take it offline without deleting it.
• History (right rail) lists every saved draft of the page or theme part you are on. Restore any version; restoring creates a new draft, so nothing is lost.

Domains & hosting

• Your site is hosted the moment you publish, at yourname.wuwisites.com. Change that free address under Settings → Site details → Free address — it must be unused, and the old address stops working right away.
• To use your own domain: Settings → Domain, enter the domain, and point one DNS record at WUWI as shown. Verification usually completes within an hour; SSL is issued automatically. A custom domain is $5 a month.
• Keep the domain at your current registrar. You can point it elsewhere any time.
• Redirects — Settings → Redirects lets you send an old URL to a new one (301 or 302), and import a list from a .htaccess file when moving from another host.

Analytics & integrations

• Page views are counted for every published page and shown under Settings → Analytics — no cookie banner required for that.
• To add Google Analytics, a Meta pixel, a chat widget or any other script, paste the snippet under Brand → Custom code (head or end of body).
• Cookie consent — turn on the consent banner under Settings when you use tracking scripts; scripts marked as tracking load only after consent.
• Search Console — verify your site by pasting the verification meta tag in the head code, then submit /sitemap.xml.

Team & roles

A workspace is the home for your sites and the people who work on them. Every account gets one; on the Business plan you can bring others in.

Inviting someone

1. Open the avatar menu (top right) and choose Organization settings.
2. In Team, type their email, pick a role, and press Send invite.
3. They get an email with a link that works for 14 days and only for that address. They sign in with WUWI ID and land in your workspace.

If email isn't reaching them, press the copy icon next to the pending invite and send the link yourself. You can re-send or revoke it any time.

Seats

Business includes 3 seats — you plus two more. A pending invite holds a seat until it is accepted or revoked, so revoke invites you no longer need.

What each role can do

• Owner — everything, including renaming or deleting the workspace and handing ownership over. A workspace always keeps at least one owner.
• Admin — everything an owner can do except deleting the workspace: sites, publishing, domains, the team.
• Editor — edit and publish sites. Can't change the team, domains or billing.
• Viewer — can open every site and look around, but nothing they change is saved. Good for a client who wants to follow along.

Your account & workspace

Your account

Your name, email, photo and password live in WUWI ID — one account for every WUWI app. Open the avatar menu → Account to see your profile, a link to manage it in WUWI ID, and Sign out. Signing out of WUWI Sites doesn't sign you out of the other WUWI apps.

More than one workspace

If you belong to several workspaces (your own plus a client's, say), a switcher appears in the header. Account also lists every workspace you're in, with Open and Leave. The only person who can't leave is the last owner — hand ownership to someone first, or delete the workspace.

Organization settings

• Workspace — rename it (owners and admins), see your plan and what it includes, and — owner only — delete the workspace by typing its name. Deleting removes every site in it and takes them offline immediately. There is no undo.
• Team — see above.
• WUWI Core — connect your workspace to Core so your sites' domains and business profile become verified facts there.

Custom code

Brand → Custom code takes three things:

• CSS — applies to the whole site. Use it for small tweaks the panels do not cover.
• Head code — scripts and meta tags placed in the page head.
• Body code — scripts placed at the end of the body.

Paste snippets exactly as the provider gives them. Example, Google Analytics in the head:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

For a single element, the HTML element embeds raw markup in place, and every element's Style tab has a Custom CSS field that applies to that element only.

Games & interactive elements

Fun elements keep visitors on the page longer. Each is a single element with a settings panel; visitors play on the published site, and best scores are remembered in their browser.

• Flappy game, Runner game, Snake — pick your own character (an emoji or an uploaded image), colors and speed.
• Memory match — choose the card faces.
• Quiz — "which one are you?" quizzes where each answer votes for a result, or trivia with right answers and score tiers. Each result can have its own button and link.
• Spin to win — a prize wheel with a message per slice (a coupon code, what happens next) and an optional one-spin-per-visitor rule.
• Countdown, progress tracker, before/after, flip card, hotspots, timeline — for launches, campaigns and product pages.

Keyboard shortcuts

• Undo / Redo: ⌘Z / ⌘⇧Z (Ctrl on Windows).
• Duplicate the selected section or element: ⌘D.
• Delete the selected item: Backspace.
• Deselect: Escape.
• Save happens automatically; Update publishes.
• Arrow buttons on a section handle move it up or down.

Troubleshooting

• My change is not on the live site. Drafts are not public until you press Update. Check the top bar: if it says *Unpublished changes*, publish.
• "Changed elsewhere — reload". The page was saved from another tab. Reload this tab; nothing was lost.
• The publish gate blocks me. Read the message: it names the page and the rule. The usual fixes are a second H1 (make it an H2), a missing description (fill it in the SEO popup) or an empty page.
• Text is hard to read on a colored section. Use the section's Color theme instead of setting colors by hand.
• A section looks wrong on phones. Switch the panel to the phone icon and adjust padding, font size or stacking there only.
• The header covers my first section. Turn off *Float over the page* on the header, or add top padding to the section.
• Video does not autoplay. Background video must be an uploaded MP4 (not a YouTube link) and is always muted.