Design a website with the Website Creator

The Website Creator is a drag-and-drop website builder. You place text, photos, galleries, videos and more anywhere on the page — there’s no rigid grid. Build a single page or a full multi-page site (Home, Portfolio, About, Pricing, Contact), preview it on desktop, tablet and phone, then publish. Everything you add stays fully editable.

1. Open the Creator

1. Go to your dashboard and open the Website Creator.
2. You’ll see the top toolbar (pages, add content, layouts, templates, undo/redo, device preview), the canvas in the middle (your page), and the right panel, which has two tabs: Inspector (settings for whatever you’ve selected) and Layers (a list of everything on the page).
3. More options (this help guide, reset page, exit) live under the ⋯ button at the top right.
4. The canvas opens zoomed to fit so you can see the whole page width. Use the − 100% + | Fit control in the top toolbar (or ⌘/Ctrl with +, −, 0, or ⌘+scroll) to zoom, and Fit to snap back.

The status badge (DRAFT / LIVE)

The ⛋ badge at the top-left shows your portfolio’s publish state: an amber DRAFT badge means you have edits visitors can’t see yet; click the green Publish button (top right) and it flips to a green LIVE badge — your site now matches what you see. Creating, switching, renaming or deleting portfolios happens on the My Portfolio page in the dashboard, not inside the builder.

2. Fastest start — apply a template

1. Click + Templates ▾.
2. Choose a Full website to apply a complete multi-page site (e.g. a wedding site with Home, Portfolio, About, Pricing and Contact). This replaces all your pages with the template’s pages.
3. Or choose a Single page design to replace just the current page.
4. Then edit any piece to make it yours.

Prefer to build a section at a time? Use + Layout ▾ to drop a ready-made section — Hero, Image + Text, Gallery, Video and Video + Photos, Testimonial, Pricing, Call-to-action — below the section you’re on, or a Tabbed section (in-page tabs) from the top of the menu.

3. How the canvas works

• A page is made of sections — full-width bands stacked top to bottom.
• Inside each section you place elements (text, photo, button, gallery…).
• Click an empty part of a section to select the section; click an item to select the element (outline + drag handles appear).

4. Add content

1. Click + Block ▾ (or the quick + Text / + Image buttons).
2. Pick a block. They’re grouped into Page (Header, Footer), Basic (Text, Image, Button, Shape, Line), Media (Image Grid, Album Gallery, Slideshow, Video, Instagram) and Sections (Contact Form, Testimonial, Pricing, Social Links, Newsletter, Logo Bar, Journal / Blog, Map, Accordion, Custom Code).
3. Need another band? Click + Add section at the bottom of the page.

5. Move, resize & arrange

• Move — drag it; pink guides help you align to other elements and the section center.
• Resize — drag any of the 8 handles, or type exact X, Y, W, H in the Inspector.
• Nudge — arrow keys move 1px; Shift + arrow moves 10px.
• Layer order — use Arrange (Bring to front / Send to back) to put text on top of a photo, or push a photo behind everything as a background.
• Duplicate (Cmd/Ctrl + D), Delete (Delete / Backspace), and multi-select by dragging a box or Shift-clicking.
• The Layers tab lists every element on the page — click a row to select it (handy when items overlap); it jumps you straight to that element’s Inspector. Duplicate and delete live at the top of the Inspector when something is selected.

6. Style a section (Block Settings)

Click an empty part of a section so nothing is selected. The Inspector shows Block Settings:

• Change layout — swap the whole section to a different arrangement (Hero, Image + Text, Gallery, Quote, Pricing, Call-to-action and more). Pick from the thumbnail gallery and your photos and text are kept and rearranged into the new layout.
• Color Scheme — Light, Light Accent, Accent, Dark Accent, Dark. Dark schemes flip your text to a light color automatically.
• Background image, background gradient, and an overlay (tint a background so text reads clearly).
• Full-width background — let the background stretch edge-to-edge while content stays centered (great for hero banners).
• Scroll-in animation — None, Fade in, or Slide up as visitors scroll.
• Section height, and an Anchor Link (name a section so a menu link like #portfolio jumps to it).
• Move up / down, Duplicate, and Delete the whole section — all from Block Settings (the active section shows a small label on the canvas; everything you edit is here in the panel).

7. Header & footer (shared across every page)

Your header and footer are site-wide — set them once and they appear on every page.

• Turn them on from + Block ▾ → Page → Header / Footer, then click the band to edit it.
• Logo — text or an uploaded image, with size and alignment.
• Header style — pick a desktop layout from the visual cards (Split, Grouped left, Centered, Minimal) and a separate mobile behaviour (Inline wrap, Hamburger, Stacked).
• Sticky header keeps it visible while scrolling; Transparent over hero sits it over your first section with no background.
• Footer layout — the same kind of visual cards: Centered stack, Split row (text left, links right), Columns, or One line. Plus copyright text, menu links, social icons, colors and height.

8. Navigation (a menu that follows your pages)

The header menu is page-driven: every page you create appears automatically. In the header’s Navigation list you can:

• Link source — each menu item (and dropdown sub-item) links to either an existing page (pick it from a list) or a custom URL (external link, email, or in-page anchor). Use the small Page / URL dropdown on the item to switch.
• Show / hide any page in the menu.
• Rename a menu item without renaming the page.
• Reorder items with ▲ ▼.
• Add a custom link, a button call-to-action, or a dropdown menu with “+ sub” — sub-items default to linking a page, and each can be switched to a URL.

Tabbed sections (sub-tabs within a page)

You can put tabs inside a page — for example a wedding page whose lower half has Ceremony / Reception / Party tabs, each with its own gallery. Visitors click a tab to switch what’s shown.

• Quick start — open Layouts ▾ → Tabbed section (event parts) to drop a ready-made 3-tab strip, then edit the labels and photos.
• Deleting a tab’s section — select the section (click empty canvas space in it) and use the 🗑 Delete pill on the section edge, or the Delete button at the bottom of Block Settings. In the Layers tab, sections inside a tab show the tab name (“Section 2 · Ceremony”).
• From any section — select it, then in the Inspector under In-page tabs click Make this a tabbed section. A tab bar appears above it and the section becomes the first tab.
• Add tabs with ＋ Tab; click a tab to switch to it; on the active tab use ◀ ▶ to reorder and ✕ to delete.
• Fill a tab like any section — add elements or Change layout. Need more than one section in a tab? Use “+ Add section to …” below the tab’s content.
• Style the bar (Inspector → In-page tabs): rename the tab, choose Underline / Pills / Buttons, set alignment, and turn on a Sticky bar that stays put while scrolling.
• On the live site you can deep-link straight to a tab by adding ?tab=<label> to the page URL.

9. The blocks, one by one

• Text — color (or “Auto” to match the section), size, weight, alignment, italic, line height, letter spacing, font, and 1–3 columns. Turn on Rich text to use simple HTML tags.
• Image — upload from device or pick from your albums (the picker browses album by album, with an all-photos view); click action (lightbox / link), crop (Fill or Fit), opacity, corner radius, overlay, border, and an optional caption.
• Button — label, link, style (Solid / Outline / Text), color. The link control has a mode dropdown: URL (type any address or #anchor) or Page (pick one of your pages); your choice stays shown.
• Pricing plan buttons — each plan’s enquiry button uses the same URL / Page link control as the Button block.
• Shape / Line — rectangles, ellipses and dividers.
• Image Grid (Gallery) — 2 / 3 / 4-up or Masonry, with a hover effect (zoom / fade), a lightbox (click a photo to view it full-screen with next/previous), and per-photo captions and links. The photos are hand-picked and stay as picked — or flip Images come from → From an album to bind the grid to an album so it follows it automatically.
• Album Gallery — choose one of your albums and the block stays bound to it: add or remove photos in the album and the published page follows automatically, no re-picking. Show its Photos or Videos, set columns, gap, corner radius and a max count; photos open in a lightbox.
• Slideshow — one photo at a time with a fade/slide transition, autoplay + interval, arrows and dots. Turn on Thumbnail strip (click to load) to add small images beside or below the big one — Strip position puts them Below, Left or Right, and clicking one loads it into the big block. With Autoplay on it also advances by itself; with it off the block only changes on click. Either way, clicking a thumbnail stops autoplay so the page doesn’t slide away from the photo the visitor picked. Like the grid, a slideshow can be bound to an album (Images come from → From an album) — it then always plays the album’s current photos.
• Carousel (Slideshow set to Carousel) — a sliding row with 1–5 slides in view, loop, arrows, dots and autoplay.
• Video — embed a YouTube or Vimeo link, upload a video directly (MP4/WebM, up to 100MB), or choose a video from your albums (the picker shows the albums that contain videos). Options: autoplay, loop, mute, controls and a cover image. Your own (album/file) videos play in a clean built-in player on the published site.
• Contact Form — choose which fields show (Name, Email, Phone, Message) and which are required, plus a success message. Submissions are saved to your Inquiries.
• Testimonial — a styled quote + author; add several and turn on Carousel to auto-rotate.
• Pricing / Packages — cards with a name, price, feature list, a featured highlight, and a button per plan.
• Social Links — round icons, each with its own profile URL.
• Newsletter — an email sign-up block.
• Logo Bar — a row of client/press logos with an optional grayscale look.
• Journal / Blog — automatically shows your latest published Journal posts as a grid or list (with cover, excerpt and date). New posts appear on your site without re-editing the page — choose how many and how many columns. A Journal link is also added to your site’s header menu once you’ve published a post.
• Map — a location placeholder.
• Accordion (FAQ) — expandable question + answer items you can add, edit and remove.
• Custom Code — drop in your own HTML.

10. Photos: uploading one or many

• Every photo can come from Upload from device or From albums (your library).
• For one photo, click the photo / the ⤒ button and pick an image.
• For a Gallery, Slideshow or Carousel, click ⤒ Add images to add many at once — select multiple files, tap several album photos, or open an album and press Select whole album, then Add N images. When uploading from your device you can also pick “Also add to album” so the file lands in your photo library, not just on the page.
• Reorder or remove photos in the image list, and set each one’s caption and link there.

11. Make it look right on phone & tablet

1. By default your desktop design is scaled to fit phones and tablets automatically — most sites need nothing more.
2. To hand-tune each screen size, open the Design tab and turn on Use custom tablet & mobile layouts.
3. Page side padding (Design tab) — site-wide breathing room: pads the header/footer and keeps at least that much whitespace between your content and the screen edge on smaller windows. Set 0 for flush edge-to-edge.
4. Use the screen toggle (🖥 ▭ ▯) to switch between Desktop, Tablet and Phone — then drag, resize and nudge elements right on the canvas. Each size keeps its own layout, so changes there don't affect desktop.
5. On Desktop, select an element and click Copy → Tablet & Mobile to start the smaller sizes from the desktop placement. On a smaller size, Copy from Desktop resets that one element back.
6. Tick Hide on mobile (or tablet) to drop an element on that screen size only.
7. Page structure — adding, deleting or reordering sections — is always edited on Desktop; the smaller sizes share the same sections.

12. Preview & publish

• Click Preview to see the real published version — links, galleries, lightbox, slideshows and animations all work here.
• Resize your browser window in Preview to check tablet/phone layouts.
• Use the header menu in Preview to move between your pages.
• Your edits are a private draft. Visitors keep seeing your last published version until you click the green Publish button (top right). A dot on the button means you have unpublished changes; click it to push your latest edits live. (Until you publish for the first time, your live portfolio shows the draft as before.)

Handy shortcuts

• Undo / Redo — Cmd/Ctrl + Z / Shift + Z
• Duplicate — Cmd/Ctrl + D
• Delete — Delete / Backspace
• Deselect — Esc
• Nudge — Arrow (1px) / Shift + Arrow (10px)

Good to know

• Your site is viewable from Preview today; a public web address for these sites is on the way.
• Contact-form messages are saved to your Inquiries — automatic email notifications are coming.
• Rich text uses simple HTML tags rather than a full visual editor for now.
• The Map and Instagram blocks currently show a styled placeholder.