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.

Multiple portfolios (and your live one)

You can keep several portfolios — for example a current site and a draft redesign — but only one is “live” (the published one). Use the Portfolios menu (top-left, ⛋):

• Switch between portfolios — each has its own pages and its own header/footer.
• Save as… — make a full copy of the current portfolio (all pages + styling) as a new draft to experiment in, without touching your live site.
• New portfolio — start a fresh one.
• Set as live — promote a draft to be the live one (the green LIVE badge shows which it is).
• Rename / Delete.

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 Layouts ▾ 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 + Add ▾ (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, 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 + Add ▾ → Page → Header / Footer, then click the band to edit it.
• Logo — text or an uploaded image, with size and alignment.
• Sticky header keeps it visible while scrolling; Transparent over hero sits it over your first section with no background.
• Footer: 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.
• 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 albums; 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. Buttons can link to another page, an anchor, or any URL.
• 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.
• Slideshow — one photo at a time with a fade/slide transition, autoplay + interval, arrows and dots.
• 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, point to a direct file, 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, or tap several album photos and press Add N images.
• 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. 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.
4. 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.
5. Tick Hide on mobile (or tablet) to drop an element on that screen size only.
6. 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.