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. Start your site and open the Creator

1. In the dashboard, open My Portfolio and click Create portfolio. You land on Start your site: every design, with the pages it comes with listed under its picture (“5 pages · Home · Portfolio · About · Pricing · Contact”). The pills above the grid narrow the designs to the kind of work you do.
2. Click a design to see it first — the real site, page by page, with a phone view in the corner — then Use this design. Hover a design’s picture and it fades to its second page, so you can see more than the front. Or take Start from a blank page: one section with a headline, a line under it, a photo and a button, ready to change.
3. Next comes Make it yours, with your home page shown live on the right, gently scrolling. Three things, and you can skip any of them:
   • Studio name — filled in from your account. It goes in your header and footer.
   • Your photos — Choose an album and its photos drop into the design’s photos one after another, top to bottom, in the album’s own order. If the album is longer than the design, the rest carry on into the other pages; if it is shorter, the design keeps its own pictures in the places left. Change picks a different album. Swap any single photo later in the Creator.
   • Look — nine font pairings, each written in its own heading face, and eight colours. The design’s own look is picked to begin with (As designed when it is not one of the nine or the eight). A font pairing sets the fonts on every page; a colour paints the filled buttons and anything that was in the design’s own colour.
4. Press Open my site. That is the moment your portfolio is made — named after the design (rename it from the toolbar) — and the Creator opens in its own tab with it saved as a draft. Nothing is online until you publish it. A blank page opens with its headline already selected, so you can start typing your own. To come back later, click Edit on the portfolio in My Portfolio.
5. You’ll see the dark top toolbar, the canvas in the middle (your page), and the right panel, which has three tabs: Edit (settings for whatever you’ve selected), Design (fonts, colours, page padding, phone layout) and Everything on this page (a list of every section and block, each with a small picture of it). With nothing selected the panel folds into a slim strip on the right so the page gets the room; click anything on the page — or one of the strip’s three buttons — and it opens again. Close at the end of its tabs folds it away.
6. Left to right, the toolbar reads: ← Exit · your portfolio name ▾ (switch or rename) · the page ▾ you are editing · ＋ Section · ＋ Block · Design · Templates ▾ (switch the whole site to a different template at any time). In the centre sits the zoom control and the Grid toggle. On the right: the Desktop / Phone switch (Tablet is behind its small ▾), then ⟲ History, the Saved chip, the Live chip, Publish and ⋯. On a narrow window the bar tightens its spacing, but every button keeps its word; Desktop and Phone are the two picture buttons beside History (hover for the name).
7. More options (this help guide, Preview my draft, Earlier versions…, Replace with a template…, reset page, exit) live under the ⋯ button at the top right.
8. 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 Live chip and Publish

The Live chip next to Publish says how your public site stands against this draft, page by page: ◍ Live · up to date (grey) means visitors see exactly what you see; ◍ Live · 3 pages changed (gold) counts the pages whose content changed — a page that is only new or only removed is named as such instead, ◍ Live · 1 new page or ◍ Live · 1 page removed (or header & footer changed when only those did); Not published yet means nothing is online at all. It re-checks a moment after every save, and greys out while a save is still on its way. Click the chip for Draft vs Live: where your site is live, when you last published, one row per page (changed, no changes, NEW — not online yet, or removed from your draft with the address that will stop working), and a Restore on any changed page that puts the live version back into your draft — undoable from the toast.Preview my draft ▸ and Open my live site ▸ sit at the top of that panel.

When the builder can name every change, the chip counts them instead: ◍ Live · 6 changes behind (on a smaller screen, Live · 6 behind). Draft vs Live then reads Home · 3 changes with the changes listed under it in plain words — “Section 1 background changed”, “‘Authentic, heartfelt…’ edited”, “Section 4 ‘Pricing’ removed”, “Placed Section 3 by hand on Phone” (the same words History uses) — six at most, then “and 3 more”; the header & footer row lists its own (“Menu order changed”), and the publish sheet says 3 changes beside each page. The number is always the total of those lines; if any page’s changes can’t be put into words, the chip goes back to counting pages rather than guess.

To see a change rather than read about it, press Compare beside a changed page in Draft vs Live (or Compare with live at the top of it). The page opens full-window with the live version on the left and your draft on the right, both drawn exactly as a visitor’s browser draws them; scrolling one side scrolls the other. Every section that changed is outlined in gold on both sides with its changes written on it — a section you removed appears only on the left, a new one only on the right. The two pages are pictures: links, buttons and forms on them do nothing. Pick another changed page from Page, and press Close or Esc when you are done. Nothing in Compare changes your draft or your live site; to take the live version back, use Restore in Draft vs Live.

The Publish button says what it will do: Publish when there is something to put online, Nothing new to publish when the live site already matches, and Save first while a save is still on its way or has failed. Clicking it never publishes straight away — it opens a sheet listing what is Going online (changed and new pages, header & footer) and Going offline (pages you removed, with the address that stops working). If another portfolio is live, a ⚠ line says it will go offline. The button then reads Publish 4 pages; when only one page changed the sheet opens as a single line, 1 change · Home (or 3 changes · Home when its changes are named), with the button already focused. While it runs nothing else moves; when it is done you see ✓ Published at 12:41 pm with Open ▸, Put back the old version and Done, and the chip turns grey. The same panel tells you whether a copy of the version you replaced was kept — Put back the old version only appears when it was. If it fails, the sheet turns red, keeps its list and tells you which version your visitors still see — it ends with Nothing changed. Switching and renaming portfolios is under the portfolio name ▾ at the top-left; creating, deleting and choosing which portfolio is live happens on the My Portfolio page.

⟲ History

⟲ History in the toolbar (or Cmd/Ctrl + Y) opens a list of everything you did on this page, newest first, in plain words — “Moved the photo”, “Changed Section 2 to Dark”, “Removed Section 4 ‘Pricing’”. A drag counts once, however long it took; a click that moves nothing doesn’t count at all; a run of arrow-key nudges is one step, and so is a burst of typing. Between the steps sit Saved 11:58 and Published 11:12 rows: the server keeps a version of the page on every save and on every publish, so they are still there after you reload or open the builder on another computer. Saves that follow within a couple of minutes share one row (its time is the time of the latest save it holds), except that removing a section or a block always keeps its own Saved row, so the page as it was just before the removal is never lost. The last twenty Saved rows are kept. Click any row tolook at that version — the page dims and a bar reads “Viewing 12:01 — 7 steps back” — and nothing changes until you press Restore this version. A restore is itself a step, so Cmd/Ctrl + Z takes it back. The fine steps live in this browser tab, and only while the server has the page they led to: after a reload, or if a save never got through and you left anyway, the list says so and the Saved and Published rows carry on.

Earlier versions — the route back

Every time you publish, that version of your site is kept. ⋯ → Earlier versions… lists them newest first (“14 Sept, 4:20 pm · 5 pages · Home, Portfolio, About”), with the one visitors are seeing marked Live now.Preview ▸ opens that version in a new tab exactly as visitors saw it. Restore asks first, then puts your live site back to that version — and if a different portfolio was live at the time, the question names it and it goes back to being the live one too. The same is true of Put back the old version after a publish: it puts back exactly what visitors saw a moment before, including which portfolio was live. Your current draft is never touched, so you can keep editing and publish again whenever you like. The newest 30 versions of each portfolio are kept.

The Saved chip

Every edit saves on its own; the Saved chip beside History tells you whether the server actually has it.Saved · just now (grey) means it does. Saving… means your change is on its way.Not saved — retrying (amber) means a save didn’t get through and the builder is trying again by itself.Not saved · 4 changes waiting (red) means it gave up — click Retry when you’re back online. Your changes stay in this tab the whole time; after half a minute of red a bar under the toolbar reminds you not to close it.

Publish waits for the server — it is greyed out (“Save first”) until the chip is grey again.Exit and switching pages also wait for the last save, and if it cannot get through you’ll be asked what to do:Try again, Leave anyway (your unsaved edits are lost), or Copy my changes, which puts this page’s content on your clipboard so nothing is lost even if you have to leave.

2. Fastest start — apply a template

1. Click Templates ▾ in the toolbar (or ⋯ → Replace with a template…) at any time. It replaces every page, so it asks first.
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 + Section ▾ 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.

The builder opens in its own tab, so your albums, leads and bookings stay where they were. Each portfolio gets exactly one tab: clicking Edit on a portfolio you already have open brings that tab forward instead of opening another.

3. How the canvas works

• A page is made of sections — full-width bands stacked top to bottom.
• Inside each section you place blocks (text, photo, button, gallery…).
• Click an empty part of a section to select the section; click an item to select the block (outline + drag handles appear).
• Three words, one job each: a section is a band of the page, a block is one thing inside it, and a layout is how either of them is arranged.

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 / Divider, Badge), Media (Photo grid, Album gallery, Slideshow, Video, Instagram) and Ready-made (Contact form, Testimonial, Pricing, Service cards, Numbers, 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 blocks and the section center.
• Resize — drag any of the 8 handles, or open Position at the bottom of the panel and type exact numbers (its folded line already shows them, e.g. “x 90 · y 60 · 460 × 440”). On Phone, Position appears once the block’s section is placed by hand; while the section stacks into one column, the phone decides where each block goes.
• Nudge — arrow keys move 1px; Shift + arrow moves 10px.
• What sits on top — press and hold Arrange ▤ near the bottom of the panel: a strip of everything in that section appears, top of the pile first, each as a small picture. Keep holding, slide onto the place you want and let go. A plain click opens the strip too — then drag the highlighted picture, or use the arrow keys. Use it to put text on top of a photo, or push a photo behind everything.
• Duplicate (Cmd/Ctrl + D, or the Duplicate button near the bottom of the panel), Remove (Delete / Backspace, or the red Remove photo text at the very bottom of the panel), and multi-select by dragging a box or Shift-clicking. Removing is instant — a small note at the bottom of the screen names what went and offers Undo for 8 seconds. A duplicate (or a paste onto the same section) lands directly below the original — the section grows if it has to — never hidden behind it.
• A block can never be lost off the edge. Drag it as far as you like: it stops with a sliver still inside the section and the edge flashes red. Drag it over another section instead and that section lifts and shows a gold line reading “Move to Section 3” — let go and the block lands there, exactly where you dropped it.
• A new block lands where you are looking — in the middle of the part of the active section that is on screen, already selected.
• Grid — the ▦ Grid toggle in the toolbar (or Cmd/Ctrl + ') lays a light alignment grid over every section (8 / 10 / 20 / 40 px); while it is on, drags and resizes snap to the grid unless a pink block guide catches them first. The grid is an editing aid only — it never publishes.
• Shapes as cards — drop text, a button or an image on top of a shape and drag the shape: everything sitting inside it comes along, so a panel moves as one thing. Hold Alt to move just the shape. Turn this off per shape in its panel (The shape → “Move blocks placed on this shape with it”).
• Everything on this page lists every section and block, top of each pile first — each row has a small picture of the thing, its name and a 👁 Shown / Hidden switch for the device you are looking at. Click a row and the page scrolls to it and its outline pulses twice, so you can find it even when things overlap.
• Several things at once — Shift-click or drag a box around them. The panel says what you have (“3 photos”) over small pictures of them, then: Align (Left, Centre, Right, Top, Middle, Bottom — each lines them up on the edge or centre of the group), Space evenly (Across or Down — with three or more, the gaps become equal), Match size (Same width, Same height, or Both — always to the largest). When they are all the same kind, that kind’s main settings apply to all of them at once (one Fill / Fit for three photos). Swap all photos opens the picker to choose several — they go in in the order you click them. Lining up works within one section; things in different sections can still be matched in size. On Phone, a section that still stacks into one column has no positions of its own to line up, so Align, Space evenly and Match size wait until you place that section by hand on phones (drag a block on the phone view).

How every panel reads

Every panel on the right follows the same pattern, whatever you have selected. It opens on the thing itself — the real photo, a small picture of the section or the form as it will look — never on its position. Below that are groups you can fold and unfold; a folded group always shows a grey line saying what is inside it (“Fill · 12px corners · described”), so you never have to open one to check. The builder remembers which groups you leave open. A setting that could do nothing right now is simply not shown — “Darken the background” only appears when there is a photo, video or gradient to darken. On phones is always next to last and Position (the exact numbers) is always last and folded. Rarely needed extras live under ⋯ More at the top. Removing is the red text at the very bottom, and it happens at once with an 8-second Undo.

When the canvas shows Phone or Tablet, sizes that can differ on phones say so in their group’s name (“Look — on phones”). The box shows the phone size, a line underneath says what Desktop keeps (“Desktop stays at 42px.”), and ↺ Same as Desktop puts the phone back to the Desktop size. 👁 Not on phones, inside every block’s On phones group, leaves that block off the phone version of the page.

6. Style a section

Click an empty part of a section. The panel opens on a small picture of that section exactly as it will publish, with Change layout → under it:

• Change layout → — swap the whole section to a different arrangement (Hero, Image + Text, Gallery, Quote, Pricing, Call-to-action and more). Each card is a picture of that layout as it really looks, and under it one line says what of this section it keeps — for example “Keeps your headline and 1 photo.” Your photos and text are kept and rearranged into the new layout; anything the layout has no place for stays where it was in the section, and the line tells you how many.
• Look — four picture tiles choose the background: Colour, Photo, Video or None. Under Colour are five swatches tinted with your brand colour, each showing “Aa” in the ink it uses (dark swatches flip your text to light automatically), and four gradient chips, each named under its swatch: Dusk, Peach, Deep sea and Blush. Photo opens your albums; Video opens your videos — or use “paste a video link instead” under the tiles. With a photo, video or gradient behind the section you also get Darken the background and its Tint colour, so text on top stays readable; a video also has How much the video shows. The background image doubles as a video’s loading picture.
• Size & space — the height, Full-width background (edge to edge while the content stays centred) and Fill the screen top to bottom. On Phone, a section that stacks into one column grows to fit its blocks, so there is no height to set until you place it by hand on phones.
• On phones — whether the section stacks by itself into one column on phones, and which devices show it at all.
• Extras — the scroll-in animation (None, Fade in, Slide up), a scroll-down cue, an anchor name so a menu link like #portfolio jumps here, and in-page tabs.
• ⋯ More → Advanced holds the raw gradient code, for anyone who wants to type their own.
• Move up, Move down and Duplicate sit at the bottom (Move up is not shown on the first section), with Remove section as red text under them. The active section shows a small label on the canvas — “Section 2 · Welcome”, named from its first text block — and the same name heads the panel and the page list. Removing a section is instant, with an 8-second Undo note that says what it held (“it had your intro and 3 photos”).

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, Hamburger ☰, Minimal) and a separate Phone behaviour (Inline wrap, Hamburger, Stacked). Choosing the desktop Hamburger card puts your links behind a menu button at every screen size; picking any other card puts the link row back.
• Logo — Text, Image, or Both (your mark beside the studio name). An image logo gets its own height control, in the header and in the footer.
• 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.
• Contact details — switch on Show contact details in the footer to add a phone number, email and address; phone and email become tap-to-call / tap-to-write links on the live site.
• Your own social icons — every social row has an ⤒ icon button to upload your own logo image in place of the letter ring, and a custom network for anything not in the list.

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.
• Removing a tab’s section — select the section (click empty canvas space in it) and use Remove section at the bottom of its panel. In Everything on this page, sections inside a tab show the tab name (“Section 2 · Ceremony”).
• From any section — select it, then in its panel under Extras → 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 blocks or Change layout. Need more than one section in a tab? Use “+ Add section to …” below the tab’s content.
• Style the bar (the section panel → Extras): rename the tab, choose Underline / Pills / Buttons, set alignment, and keep the tab bar on screen 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; any colour box left unset shows an AUTO tag, and the Auto button beside a set colour returns it to Auto), size, weight, alignment, italic, line height, letter spacing, font, and 1–3 columns. Turn on Rich text to use simple HTML tags.
• Photo — the panel opens on the photo itself: click it (or Replace photo) to choose another from your albums or your device, or drop a file straight onto it. Under it, “From: Goa 2025 · IMG_8841.jpg” says which of your photographs it is. The photo group has Fill and Fit drawn with this photo in this box, Rounded corners, Darken for text with a live strip of the photo so you can see the result, a Caption, and Describe it for screen readers (it helps Google, and blind visitors). When someone clicks it is one of three: Nothing happens, Open it larger, or Go to a page or link. Tint & border keeps the finer controls: how solid the photo is, tint amount and colour, and a border. To use a web address instead of a photo, choose ⋯ More → Use a link instead.
• 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. Lines now have a Style (solid, dashed, dotted, double), a Length slider and Opacity — proper customizable dividers.
• Badge — a small pill label (“NEW”, “LIMITED”) with fill, size and letter-spacing controls; blank fill uses your brand accent.
• Testimonials — three formats: One at a time (optionally auto-rotating), Cards to show every testimonial at once in 1–4 columns, and Large quote mark. Each testimonial can carry a role or company line and a star rating.
• Contact form — the panel opens on a picture of the form. What it asks for lists its questions: drag a row to reorder (or focus it and press Alt with an arrow key), ✕ Remove takes one off, and tapping a row opens it in place — rename it (Name, Email, Phone and Message can be renamed), switch Required on or off, and see what kind of answer it takes. ＋ Add a question offers the ones not asked yet: Phone, Event date (a real date picker), Subject, Company, Location, Budget and Number of guests. What it says holds the heading, the button and the thank-you line shown after they send. Where it goes (every enquiry lands in your Inquiries) and Look (font, heading size, button colour, one or two columns) are folded with a summary.
• Numbers — a row of headline figures (“120+ weddings”) with per-item value + label, sizes, accent colour and optional dividers.
• Text can now carry an Underline and a whole-block Link — a direct text link with no button chrome. The Font menu offers a full library (serif, sans, display, mono families) that loads on the published site automatically.
• Buttons have a Hover effect (Dim, Lift + shadow, Underline) on the published site, and their own Font, Weight, Tracking and UPPERCASE controls — a button no longer has to inherit the body font.
• Shapes can carry text — a label, a stat, a callout — with its own font, size, weight, colour (Auto contrasts with the fill) and alignment, plus fill, border and an Opacity slider.
• Logos accept SVG as well as PNG/JPG — crisp at any size. (Scripts and interactive bits inside an SVG are stripped on upload; the drawing is kept.)
• Accordion — “One open at a time” closes the other items when a new one opens, and question/answer text sizes are adjustable.
• Full width — a Slideshow can span edge-to-edge on the published site (checkbox in its settings), the way section backgrounds already could.
• Background video — a section can play a muted, looping MP4/WebM behind its content (Section settings → Background video); the background image doubles as the loading poster. It plays in the builder as well as on the published site, so you can position text over it while you work. Video opacity dims the footage itself — usually quicker than layering an overlay tint when all you need is for the text on top to stay readable.
• Move to another section — just drag it there. As the pointer crosses into the other section it lifts and shows a gold “Move to Section 3” line; let go and the block lands where you dropped it.
• Service cards — card backgrounds can be a solid colour, transparent (outlined), blurred frosted glass over the section behind, or an image.
• Photo grid — 2 / 3 / 4-up or Masonry, with a hover effect (zoom / fade), Open it larger on click (the photo fills the 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 larger when clicked.
• 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.
• 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 (or click Design in the toolbar) and keep Reflow for tablet & phone on.
3. Page side padding (Design tab) — site-wide breathing room: pads the header/footer, keeps at least that much whitespace between your content and the screen edge on smaller windows, and sets the side margin of the single-column phone layout (the default 24 gives phones their usual 18px). On a wide desktop screen the 1200px design is already centred with wider margins, so you will see no change there. Set 0 for flush edge-to-edge.
4. Press Phone (top right) and your page appears in a phone outline beside the Desktop page. It is not a picture: it is your page as a phone draws it, so it is always up to date — it rearranges itself into one column. Click something on either side and it is selected on both, joined by a thin gold line; the panel on the right works as usual.
5. Above the phone, ↗ Check it for real opens your draft in a phone-sized window, where links, menus, galleries and tabs all work. Open on my phone ▸ shows a code to scan with your phone's camera, and the link to copy — sign in on the phone to see the draft.
6. Every section on the phone starts Stacked automatically — the small grey label in its top-left corner — and simply follows whatever you do on desktop. To position blocks yourself for phones, drag one on the phone: once it has moved a few pixels that section, and only that section, becomes Placed by hand, starting exactly from what was on screen so nothing jumps. A message says Section 2 now keeps your phone layout with ⟲ Undo (typing a position in the panel does the same), and a bar under the section says it too. The arrow keys only move blocks in a section that is already placed by hand — they never switch one over.
7. ↺ Back to automatic — on the label, on that bar, or the Stacked automatically card in the panel's On phones group — hands a section back to the automatic column. A message confirms it with ⟲ Undo, and it is a step in History.
8. Tablet is behind the small ▾ beside Phone. On a tablet nothing rearranges: every block stays where you put it for tablets, so you can drag, resize and nudge there directly. Copy from Desktop (in the block's Where it sits on tablets group) puts one block back where it sits on Desktop. On Phone the same button appears in a section placed by hand — on a block's panel for that block, on the section's panel for every block in it — shrunk to the phone's width. On Desktop, Copy → Tablet & Phone gives both smaller sizes a block's Desktop position. Each is one step in History.
9. 👁 Not on phones (in a block's Where it sits on phones group) drops that block from phones only. On the phone it shrinks to a small grey marker where it stood, with its name — click the marker to bring it back. A section hidden on phones (Show this section on) becomes a thin grey strip on the phone; click it to show the section again.
10. Page structure — adding, deleting or reordering sections — is always edited on Desktop; the smaller sizes share the same sections.
11. Select several blocks (shift-click, or drag a box around them) and you can Duplicate or Remove them together, or drag them all into another section in one go.
12. Copy (⌘C) and Paste (⌘V) move content between pages: copy on one page, switch page, paste. The copy lasts as long as the browser tab.
13. Sizes are per screen size for text, buttons, badges, stats, testimonials and service-card spacing — change one on Phone and the desktop keeps its own. Leave a size untouched on a smaller screen and it inherits the desktop value.
14. On a phone, multi-part blocks collapse to one column on their own — Service cards, Pricing and Stats — and small blocks like Buttons and Badges size to their label instead of stretching across the screen.

12. Preview & publish

• Click the Live chip → Preview my draft ▸ (also under ⋯) to see the real published version of your draft — links, galleries, photos opening larger, slideshows and animations all work here.
• Resize your browser window in the preview to check the Tablet and 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 Publish (top right). The button only reads Publish when there is something new; otherwise it says Nothing new to publish, and Save first while a save is still on its way. (Until you publish for the first time, your live portfolio shows the draft as before.)

Handy shortcuts

• Undo / Redo — Cmd/Ctrl + Z / Shift + Z (the tooltip names the step: “Undo: moved the photo”)
• History — Cmd/Ctrl + Y, or ⟲ History in the toolbar
• Duplicate — Cmd/Ctrl + D
• Remove — Delete / Backspace (instant, with Undo for 8 seconds)
• Deselect — Esc
• Nudge — Arrow (1px) / Shift + Arrow (10px)
• Alignment grid — Cmd/Ctrl + '

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.