Before you start
Your editor link is in your Gumroad receipt email, along with your license key. Each key opens the editor for the design you bought.
- 1Open the editor link from your receipt.
- 2Paste your license key and press Unlock. Your browser remembers it, so you only do this once per browser.
- 3Choose Start a new website the first time. Next time you’ll also see Continue where I left off.
Use Chrome or Safari (or Edge, Firefox, Samsung Internet). If the link opens inside Instagram, Facebook, Messenger or TikTok, open it in your browser instead: inside those apps you can’t download your save file, and your work stays inside the app. The editor shows a button to do this.
A computer is the most comfortable, but the editor works on phones and tablets too.
Get your words ready first. The free PDF The Portfolio That Gets You Hired shows what clients look for and how to write each part of your site, and comes with a worksheet for your “about” text, services, case studies, testimonials and photos. With it filled in, the editor is mostly copy and paste.
Finding your way around
The editor has three parts: the sections of your site (Hero, About, Services…), the boxes for the section you’re in, and a live preview that changes as you type.
- Preview size: switch between Desktop, Tablet and Phone above the preview to see how your site looks on each.
- Undo and Redo: the arrow buttons at the top, or Ctrl+Z / Ctrl+Y (⌘Z / ⇧⌘Z on a Mac).
- Optional boxes are marked. Everything else is needed before you can publish.
- Lists (services, case studies, testimonials…) have Add, move up / down and Remove buttons.
- Colors and fonts: each design comes with ready-made color presets and font pairings. Pick one and the preview changes at once.
On a phone or tablet
- Use the Edit / Preview tabs to switch between the boxes and your site.
- The section button at the top (“Section 3 of 12 · About”) opens the list of sections.
- Download, Load saved file and Help are in the ⋯ menu.
Filling in your site
Go through the sections one by one. Once you’ve visited a section, anything still needed there shows as a count beside its name, and the editor lists what’s left when you download or publish.
- Every design needs at least one case study (portfolio project). A sample project is fine to start with.
- Clearing a box clears it on your site too, so an empty optional box simply doesn’t show.
- Your name in Site & SEO is what search engines and shared links show. Left blank, your hero name is used.
Photos
- Upload a photo from your device, or paste a link to one. Big photos from phones are made lighter automatically, so your site stays fast.
- Pasting a Google Drive or Dropbox link? Set the file’s sharing to “Anyone with the link can view”, or visitors won’t see it.
- A photo box has a Remove button when you want it gone.
Videos
Opal, Noir and Midnight can show videos in case studies: paste a YouTube, Vimeo, Loom, Google Drive or Dropbox link. Google Drive and Dropbox videos also need “Anyone with the link can view”.
Saving your work
While you work, the editor keeps a draft in this browser, on this device. It’s there when you come back (choose Continue where I left off), but it isn’t anywhere else.
Download my site gives you a zip file. That zip is your save file and a complete copy of your website.
- A small dot on the Download button means you have changes since your last download.
- To carry on later or on another device, open your editor link, choose Edit an existing website (or Load saved file) and pick the zip.
- On iPhone and iPad the zip goes to the Files app, in Downloads. On Android it goes to Downloads.
- To move to another device, email the zip to yourself or save it to Google Drive.
Clearing your browser’s data, or using a private window, removes the draft. Download whenever you’ve done a good chunk of work.
Your published site is not your save file. Always keep your latest zip.
Putting your site online (Publish)
Your site lives on Netlify, a free website host, in your own Netlify account, so it’s always yours. Netlify now calls sites “projects”: it’s the same thing.
- 1Press Publish. If something needed is still empty, the editor lists it first.
- 2Press Connect my Netlify account. Netlify opens in a new window or tab: log in, then press Authorize. Come back to the editor tab.
- 3Check the Netlify account shown is yours, and choose your site’s address (yourname.netlify.app). If it’s taken, the editor suggests another.
- 4Press Publish. In a few seconds you’ll see You’re live! with your address. Your site is public, and Netlify’s “Powered by Netlify” badge is removed for you.
- 5Download your site from that screen too, to keep your save file up to date.
No Netlify account yet?
Choose I don’t have a Netlify account yet. Sign up (it’s free), verify your email, then come back to the editor tab and press Connect. Netlify asks you to log in with the email and password you just made, then to Authorize. It’s fine if the email link opens inside Gmail: just come back to the editor tab afterwards.
Updating your site
- Change anything, then press Publish again → Update yourname.netlify.app? → Update. Netlify keeps your earlier versions.
- When nothing has changed, the button says Up to date.
- You connect to Netlify once per visit; the editor never stores your Netlify login.
- Opened your save file on another device? It remembers your site, so Publish updates the same one.
- Already published this site before but your file doesn’t know it? On the address screen, choose Already published this before? Choose it.
Changing your address
On the Update screen, choose Change address. Your site moves to the new address at once, and the old one stops working, so links you’ve shared to it will break.
Your own domain (like mariasantos.com)
After publishing, press Set it up in Netlify on the success screen. Netlify walks you through adding a domain you own, or buying one.
Several Netlify teams?
If your Netlify account belongs to more than one team (for example a client’s), the editor asks which team your site goes into. Choose your own: everyone in a team can see and change its sites.
Netlify’s free plan comfortably covers publishing a few times a month. Each publish uses a little of your monthly allowance.
The manual way: Netlify Drop
Prefer not to connect your account? You can put the downloaded site online yourself, on a computer.
- 1Download your site (Download my site in the editor). You don’t need to unzip it.
- 2Go to app.netlify.com/drop and drag the zip onto the page.
- 3Press Claim website, then log in to Netlify, or sign up. A new account asks you to confirm your email first: click the link in Netlify’s email, then log in again.
- 4You’ll see Your project is ready! Your site has a random address, like verdant-puffpuff-9aca89.netlify.app. Under Domain, press Edit and change it to your own name, for example mariasantos (your address becomes mariasantos.netlify.app).
- 5Under Who can access your live project, keep Public, then press Make public. Until you do, the site is “visible only to your team”: anyone else sees “This site is private”.
- 6Done: the screen now says Your site is available at your address. Open it in a private window to check that everyone can see it.
Closed that screen too soon? You can still do both in Netlify. Make it public: your site → Project configuration → General → Visitor access → Project visibility → Public. Rename it: Project configuration → General → Project details → Change project name.
Optional: remove the “Powered by Netlify” badge (Project configuration → General → Powered by Netlify badge → off).
To update it later, drag your new zip onto your site’s Deploys page in Netlify.
Your zip includes pagemelo-data.json, your save file. Dragging the whole zip puts it online too, where anyone who knows its address could read it, including anything you typed in sections you’ve hidden. To leave it out: unzip, delete pagemelo-data.json from the folder (keep your zip as it is), and drag the folder instead. Publishing from the editor always leaves it out.
Notes for each design
Opal
Up to 6 case studies, each with up to 8 photos or videos. 7 color presets and 5 font pairings.
Noir
Up to 6 case studies, each with 1 video and up to 4 photos. YouTube videos open on YouTube; the others play right on your site. 8 color presets and 5 font pairings.
Midnight
Up to 6 projects, each with up to 8 photos or videos. For Google Drive and Dropbox links, choose whether it’s a photo or a video. Loom and Google Drive videos look best with a Video cover image. 8 color presets and 6 font pairings.
White Pearl, Black Pearl and Pearl Switch
Up to 6 case studies, each with a cover photo and up to 7 more photos (photos only, no videos). 10 color presets and 5 font pairings.
Pearl Switch shows its light or dark look to match each visitor’s device, with a button to switch. In the editor, the Light / Dark switch above the preview lets you check both.
If something goes wrong
- My license key isn’t accepted. Each key works only for the design you bought: check the editor link says that design. Copy the key straight from your receipt, with no spaces.
- My work is gone. The draft lives only in the browser where you made it. Open the editor in that same browser, or load your latest zip.
- People need a Netlify login to see my site. Your site is private: see “Make it public” in the manual way.
- The Netlify window didn’t open. Press the Open Netlify button the editor shows, or allow pop-ups for pagemelo.com.
- “Log in with Google” doesn’t work. Google doesn’t allow it inside apps like Instagram or Facebook. Open the editor in Chrome or Safari.
- Publishing failed. Your live site doesn’t change when a publish fails. Read the message, try again, and use Copy details or Email us if it keeps happening.
- My old address shows “Not found”. You changed your address: your site is at the new one.
Still stuck? Email hello@pagemelo.com with what you were doing and what you saw.
Your work and your privacy
- PageMelo doesn’t store your website or anything you type. Your draft stays in your browser, and your zip stays with you.
- When you publish, your site goes straight from your browser to your own Netlify account.
- Your Netlify login is used only during your visit, and never saved.
