Platform documentation

Step-by-step guide to Markup Studio — from your first account to a published website with pages, theme, navbar, footer, templates, and AI tools.

Create accountSign inDashboard

Overview

Markup Studio is a visual website builder. You create a website (project), add pages, design each page in the page editor, and configure site-wide theme, navbar, and footer. Your live site is served on your custom domain when configured.

Everything you design is stored as structured data (not hand-written HTML files). You edit in the dashboard and visitors see the published version on your domain.

Steps

  1. Create an account → Sign in → Dashboard
  2. Create website → Add pages → Open page editor
  3. Configure theme, navbar, footer, and SEO
  4. Save pages → Preview → Publish on your domain

Create an account

Go to Sign Up from the homepage or `/signup`. Fill in first name, last name, email, and password (6–16 characters). Confirm the password in the second field.

Steps

  1. Open `/signup`
  2. Enter your details and matching passwords
  3. Submit — on success you are redirected to Sign In after a short message
  4. If the email is already registered, you will see an error toast

Tips

  1. Use a strong password you do not reuse elsewhere.
  2. The form includes a hidden honeypot field for bots — leave it empty.

Sign in & sign out

Use Sign In at `/signin` with your email and password. After login you are taken to the Dashboard (`/dashboard`).

Steps

  1. Open `/signin`
  2. Enter email and password → Sign In
  3. From the navbar, use Dashboard anytime while logged in
  4. Use Logout in the navbar to end your session

Tips

  1. If the session expires while you work, save-related actions show “Session expired” — sign in again.

Forgot & reset password

If you forgot your password, use Forgot password on the sign-in page (`/forgot-password`). Enter your email to receive a reset link.

Steps

  1. Submit your account email on the forgot-password form
  2. Open the link in the email (reset URL with token)
  3. Set a new password on `/reset-password`
  4. Sign in with the new password

Dashboard

The dashboard (`/dashboard`) shows all your websites. At the top you get summary tiles (sites, new messages, visits in the last 30 days) and a Needs your attention list that flags sites with new messages, an ending trial, a missing domain, near-full storage or a reached streaming cap.

Each site card shows the name, domain, subscription status and a 30-day pulse (visits and messages), plus the main actions: Edit pages, Inbox (with a badge for new messages), Settings and Visit.

Steps

  1. Click Create Website to start a new project
  2. Use the filters to show all sites or only the ones that need attention
  3. Click an item in Needs your attention to jump to that site's card
  4. Open Settings on a card to reach site info, theme, navbar, footer, SEO and blog through tabs
  5. Turn Daily summary email on or off from the dashboard (see Daily summary email below)
  6. Follow DNS settings on the dashboard when connecting a custom domain

Related

Open dashboardCreate website

Create a website

Creating a website registers your project in Markup Studio. You can set a display name, optional custom domain, and favicon (.ico only).

Steps

  1. Dashboard → Create Website (`/dashboard/website/create-website`)
  2. Enter website name (required)
  3. Optionally add custom domain and favicon file
  4. Submit — you return to the dashboard; open Pages for that site to add content

Tips

  1. If automatic domain connection fails, the site may still be created — you can retry from website settings later.
  2. Storage limit applies to all page content and uploads for that website.

Update website info

Change name, domain, or favicon from Update website (`/dashboard/website/update-website?uuid=…`). Open it with Settings on your site card.

All site settings pages share the same tabs at the top: Site info, Theme, Navbar, Footer, SEO & tracking and Blog, so you can move between them without going back to the dashboard.

Steps

  1. Open Settings on the site card
  2. Edit fields and save
  3. Use the tabs to switch to another settings page

Manage pages

Each website has one or more pages (home, about, contact, etc.). Open Manage website pages from the site row (`/dashboard/website/page?uuid=…`).

Steps

  1. View all pages for the site
  2. Create page — set title, SEO fields, homepage flag, and optional template
  3. Update page — edit title and meta fields without opening the visual editor
  4. Open Build / editor for visual design
  5. Delete or duplicate pages when available

Related

Page templates (jump)

Create a page

When creating a page you choose metadata and optionally a ready-made template. Templates pre-fill the editor with sections you can still change completely.

Steps

  1. Pages list → Create page (`/dashboard/website/page/create-page?uuid=…`)
  2. Enter title, meta description/keywords if needed
  3. Mark homepage only for one page per site (the main URL `/`)
  4. Under Start from a template, pick a layout or Blank
  5. Submit — you are sent to the page editor for that page

Tips

  1. Only active templates appear for regular users.
  2. Homepage conflicts show an error if another homepage already exists.

Page editor (build-page)

The visual editor (`/dashboard/website/page/build-page?uuid=…&pageId=…`) is where you design the page. The canvas shows your content; the left sidebar has Blocks, AI, Style, and Layout tabs.

The top toolbar has device preview (mobile/tablet/desktop), Theme link, Templates, Save, and Preview.

Steps

  1. Back — return to the pages list
  2. Devices — switch breakpoint; styles are per device
  3. Theme — open site-wide color and font settings
  4. Templates — replace page content with another template or blank (confirm required)
  5. Save — store your page design and fonts
  6. Preview — open authenticated preview in a new tab (`/preview/{pageId}`)

Tips

  1. The site navbar and footer are not drawn on the canvas — configure them separately; see them in Preview or on the live domain.
  2. Always Save after large changes. Template apply saves automatically.

Blocks tab — add content

Drag elements from Blocks onto the canvas or into sections. Use Ready to use for full sections (hero, about, services, FAQ, contact form, gallery, slider, reviews, team, etc.).

Steps

  1. Expand categories in the Blocks panel
  2. Drag a block or section into the drop zone
  3. Click an element to select it; use toolbars for special types
  4. Double-click icons and images/videos to open pickers
  5. Double-click gallery / slider / grid / reviews for dedicated toolbars

Tips

  1. Contact forms need a receiver email saved in form settings.
  2. Review cards should use the review-stars element, not typed star characters.

Style & Layout tabs

Style — typography, colors, spacing, borders, shadows, display/flex/grid, animations (Animate.css), and scroll animations (AOS) for the selected element.

Layout — sortable tree of all elements; reorder or select nested items.

Steps

  1. Select an element on the canvas or in the Layout tree
  2. Style tab: edit properties; changes apply to the current device breakpoint
  3. Use hover toggle when editing hover pseudo-styles
  4. Layout tab: drag rows to reorder sections

Tips

  1. Flex-child options in Other appear only when the parent uses flex display.
  2. Clear scroll animation name to reset related AOS fields together.

Page templates

Templates are pre-built page layouts maintained by the platform. You can use them when creating a page or later via Templates in the editor toolbar.

Steps

  1. On create: pick a card or Blank → create page → editor opens with that content
  2. In editor: Templates → choose layout → Apply → confirm (replaces current design)
  3. Choose Blank to clear the page to an empty canvas

Tips

  1. Applying a template cannot be undone except by applying another template or manual editing.
  2. A template's fonts are written to your site's Design theme, so they apply to the whole site. Colors always come from the theme.

AI Page Composer

The AI tab generates page sections from your business brief using ready-made presets only (no raw HTML from the AI). You can generate a full page or regenerate one section.

Steps

  1. Open the AI tab in the page editor
  2. Full page: fill business name, offer, audience, style, goal, highlights, language; optional colors and “include contact”
  3. Run generate → review plan → confirm to replace canvas content
  4. One section: pick a section from the dropdown, add a short prompt, regenerate

Tips

  1. After you generate a page or section, stock photos are added automatically where the layout needs them (hero, about, services, gallery, slider, team, and similar blocks).
  2. If generation fails or times out, wait a moment and try again with a shorter brief.
  3. AI output is destructive — confirm dialogs warn before replace.
  4. You can still edit every block afterward in Blocks, Style, and Layout like any other content.

Site theme (colors & fonts)

Design theme (`/dashboard/website/design-theme?uuid=…`) is the single place for your site's colors and fonts. Every page, ready-made section, navbar and footer reads from it, so changing one color updates the whole site.

Each color picker has a short hint explaining where that color is used (buttons, text, backgrounds, cards, borders).

Steps

  1. Open Settings on the site card → Theme tab
  2. Adjust the color pickers and the primary/secondary font
  3. Save — the theme applies to the editor, preview and live site
  4. In the editor toolbar, Theme opens the same settings

Tips

  1. Fonts are set only in the Design theme — there is no per-page font override.
  2. Pick a primary color with enough contrast against the background; text on buttons is chosen automatically for readability.

Navbar settings

The navigation bar is site-wide, not part of page content. Configure it at `/dashboard/website/navbar-settings?uuid=…`.

Steps

  1. Enable/disable navbar
  2. Upload logo (image file, not SVG) and set its height in pixels
  3. Position on the page: scrolls away, sticks to the top, or transparent over the hero
  4. Desktop layout: link placement, bar height, boxed or full width, and the bottom edge
  5. Call-to-action button: one highlighted link such as "Book now"
  6. Choose layout: drawer left or drawer right on mobile
  7. Hide pages from nav or add custom links (paths like `/about` or anchors `#section-id`)
  8. Theme colors for navbar background/text or custom hex values
  9. Save — verify on Preview or live site

Tips

  1. A Blog link appears automatically when you have at least one published blog post.
  2. Navbar does not appear inside the build-page canvas by design.
  3. Transparent over the hero only suits a page whose first section is a dark image or colour. It applies to the home page only unless you turn that off, blog pages always keep a solid bar, and the transparent link colour is set under Colors.
  4. In transparent mode the first section shows through the bar. Give it top padding of at least the bar height, or its heading will sit underneath the links.
  5. The preview at the bottom of the page is the real navbar component, so what you see there is what visitors get.

Footer settings

The footer is site-wide, like the navbar. Configure it under Settings → Footer (`/dashboard/website/footer-settings?uuid=…`).

The same page controls the floating contact buttons (WhatsApp and call) shown on every page of the live site.

Steps

  1. Enable/disable the footer
  2. Upload a footer logo (separate from the navbar logo)
  3. Edit brand text, columns, link groups, and social links (allowed platforms only)
  4. Set footer colors
  5. Contact buttons: enter a WhatsApp number and/or a call number in international format (starting with `+` or `00`), an optional WhatsApp greeting message, and the side of the screen
  6. Save — changes appear on all published pages and blog views

Tips

  1. The Built with Markup Studio badge can be hidden on paid plans.
  2. If saving fails, a message tells you which field needs fixing (for example an empty social link row).
  3. Social URLs from the footer are also used in your site's SEO schema.

SEO & tracking

Settings → SEO & tracking (`/dashboard/website/seo-settings?uuid=…`) controls search indexing, Google Search Console verification and optional marketing trackers. Per-page title and meta description are set on each page's create/update forms.

Trackers (Google Analytics 4, Google Tag Manager, Meta Pixel, TikTok Pixel) load only after the visitor accepts the cookie banner. Without any tracker ID, no banner is shown.

Steps

  1. Set Allow search engines to index on or off
  2. Search Console: paste the verification code from Google (the `content` value of the HTML tag) and save, then click Verify in Search Console
  3. Optionally add your GA4 (`G-…`), GTM (`GTM-…`), Meta Pixel or TikTok Pixel ID
  4. Choose the visitor language — used for the cookie banner, the note under forms and the privacy page
  5. Privacy policy: enter your business name and a contact email. Your site then gets an automatic privacy page at `/privacy`, written from your real settings. Already have your own policy? Paste its link instead
  6. Save — on the live domain, `/sitemap.xml` and `/robots.txt` are generated automatically

Tips

  1. Visitors can reopen their cookie choice via Cookie settings in the footer.
  2. If you use trackers, mention them in a privacy policy page on your site.
  3. Sitemap requires a configured custom domain. Preview URLs stay noindex and are not listed.

Google Business Profile

A free Google Business Profile puts your business on Google Maps and in the box next to Google search results. For local businesses it often brings more customers than the website itself.

Open Settings → Google Business for a 12-step checklist. Google requires you to sign in and verify there, so you do the steps on Google — the guide gives you every value to paste (business name, website link, phone, a description draft) and saves your progress.

Steps

  1. Search Google Maps first — claim an existing listing instead of making a duplicate
  2. Create or claim the profile with a business Google account
  3. Use your real business name and the most specific category
  4. Paste the website link from the guide: it ends in `?utm_source=google_business`, so those visits show as Google Business Profile in Statistics
  5. Verify (usually a short video), then add hours, description and photos
  6. Ask your first customers for reviews and post an update every month

Tips

  1. Don't add keywords or city names to the business name — Google can suspend the profile for that.

Blog

Blog posts are separate from page builder content. Manage them at `/dashboard/website/blog?uuid=…`.

Steps

  1. Create post — title, slug, excerpt, body, cover image, template (classic or split), publish flag
  2. Edit or delete posts from the list
  3. Published posts appear at `https://your-domain.com/blog` on the live site
  4. Preview posts at `/preview/blog?uuid=…` while logged in

Tips

  1. Slug `blog` is reserved — do not use it for a regular page slug.

Images & videos

Each website has an image library and video library from the site row. In the editor, double-click images or videos to choose from your library or set a URL.

Steps

  1. Open the image or video manager from the site row → upload files
  2. In the page editor, double-click an image or video block to update it
  3. Use video settings in the popup for playback options (controls, poster, and source)

Tips

  1. Storage meter on the dashboard includes your page designs and uploaded media.
  2. User images are not SVG for security reasons.

Forms on the published site

Contact forms you add in the editor work on your live site, including platform subdomains. Visitors see a success or error message, and the message is emailed to the receiver email set on the form — or to your account email if none is set.

The receiver email is never shown in the public page. Every message is also saved in your site's Inbox.

Under every form, visitors see a short note with a link to your privacy policy (set it up under Settings → SEO & tracking). The footer links to it too.

Steps

  1. Add a contact form section or form elements in the editor
  2. Optionally set a receiver email in the form settings, then save the page
  3. After publishing, visitors submit — messages arrive by email and in the Inbox

Tips

  1. Test forms on the live site. Preview mode does not send real submissions.

Inbox (form messages)

The Inbox keeps every form message from your site in one place, so nothing is lost in email. Open it with Inbox on the site card; the badge shows how many messages are new.

Messages are stored encrypted and are deleted automatically after the retention period you choose.

Steps

  1. Open a message to read it; see which page and traffic source it came from
  2. Set a status: New, Contacted, Customer or Closed
  3. Export messages to CSV (opens in Excel)
  4. Choose how long to keep messages: 3, 6, 12 or 24 months
  5. Delete a single message or all messages when needed

Tips

  1. Keep messages only as long as you need them — this helps you meet privacy rules such as the GDPR.
  2. Building sites for clients? Their visitors' messages belong to them. Agree with each client whether you may keep their messages; if not, switch off Save messages in this Inbox for that site — messages are then only emailed to the form's receiver and the site's privacy page says so automatically.
  3. For a client's site, put the client's business name and contact email under Settings → SEO & tracking → Privacy policy, so the privacy page names them as responsible.

Statistics

Every site has built-in Statistics: visits, page views, top pages and traffic sources for the last 7, 30 or 90 days. It works without cookies and stores only aggregated counts, so no cookie banner is needed for it and it does not slow your site down.

Steps

  1. Click the 30-day visits line on the site card to open Statistics
  2. Switch the range between 7, 30 and 90 days
  3. Check Sources to see where visitors came from (Google, Instagram, Facebook, WhatsApp, direct…)

Tips

  1. Add `?utm_source=instagram` (or another name) to links you share, so those visits are labeled correctly.
  2. Bots are filtered out; preview visits are not counted.
  3. Monthly report: at the bottom of Statistics. On the 1st of every month you get an email with last month's visits, messages, sources and top pages, in the language you choose (English, Nederlands or Arabic). Add your client's email to send them their own copy (their replies go to you). Use Send me last month's report now to see it.

Daily summary email

Once a day you receive a short email listing new messages from the last 24 hours and anything that needs your attention across your sites. If there is nothing new, no email is sent.

Steps

  1. Use the Daily summary email switch on the dashboard to turn it on or off

Live website & domain

Visitors open your site on the custom domain you configured. Pages are resolved by path; homepage is the page marked as homepage.

Steps

  1. Add custom domain in website settings
  2. Point DNS as shown in dashboard DNS settings
  3. Publish content by saving pages — no separate “publish” button for pages
  4. Subscribe/renew via billing actions on the site row when required

Tips

  1. Suspended sites return an error on the public URL until subscription is restored.

Storage & subscription

Each website has a storage quota (MB). Saving large pages or many media files increases usage. Subscription status and renewal appear on the dashboard site row.

Steps

  1. Watch the storage bar on the site row
  2. If save fails with storage error, delete unused media or pages
  3. Use Subscribe when the trial or period is ending
  4. Click Payment & invoices on the site card to change your card, download invoices or update billing details — this opens Stripe's secure page
  5. If a payment fails, the card shows Update payment: replace the card there to keep the site online

Tips

  1. Card details are handled by Stripe only; Markup Studio never sees or stores them.