Skip to main content

Sites

Sites is a website builder for your business. Start from a ready-made template, edit pages in the page builder, and publish on a free subdomain or your own domain. Use it if you do not have a website yet, or want a simple, fast site with your live chat widget and links to your booking portal, without paying for a separate website builder.

Available withCRM SuiteIncluded in the Complete plan.Plans and modules

Before you start​

  • CRM Suite includes one website. To build more, add extra websites as an add-on. If you reach your limit, creating a site shows "You have reached your website limit".
  • Only admins can open Sites.

Create a site​

  1. In the main menu, open Settings > Sites (or Settings > All Settings > Sites under Website & Booking Portal).
  2. Click Create Site.
  3. In Select Template, filter with Select Category or Search templates.... Click Preview to look at a template.
  4. Click Use Template on the one you like, or Create site from Scratch.
Select Template screen with website templates, a category filter and Use Template and Preview buttons

The new site opens with three tabs: Pages, Website Settings and Domain.

Manage pages​

The Pages tab lists every page of the site.

  • To add a page, click Create Page, enter a Name and a Slug (the last part of the page link: lowercase letters, numbers and hyphens, for example about-us), and click Save. The new page opens in the page builder.
  • Click Edit Page to open a page in the page builder.
  • The More Actions menu on each page offers:
    • Visit Page to open the live page
    • Clone Page to copy a page with a new name and slug
    • Metadata to set the Page Name, Slug, Is Home Page?, SEO Meta Title, SEO Meta Description and Keywords
    • Page Versions to open, edit or delete earlier versions of the page

Edit a page in the page builder​

The page builder has three parts: the Add and Layers panel on the left, the page in the middle, and the settings of the selected item on the right.

Page builder with the Add panel of sections and elements on the left, the home page in the middle and the page settings on the right

Add blocks​

On the Add tab, drag a block onto the page, or click it to add it below the selected item. A blue line shows where it will land.

  • Sections: Header, Hero, Text, Image and text, Features, Gallery, Testimonial, Call to action, FAQ, Contact and Footer.
  • Elements: Heading, Paragraph, Button, Image, List, Quote, 2 columns, 3 columns, Box, Divider and Spacer.

Select, edit and move items​

  • Click anything on the page to select it. The toolbar on the selected item lets you Select the container, drag it (Drag to move), Move up, Move down, Duplicate or Delete it.
  • Double-click text to type, or select it and click Edit text. While typing, use Bold, Italic, Underline, Add link, Remove link and Clear formatting, then click Done.
  • The Layers tab shows the page as a tree. Click a row to select that item; this helps with items that are hard to click on the page.
Layers tab showing the page structure as a tree with a heading selected on the page

Style items​

With nothing selected, the right panel shows Page settings for the whole page: Accent color, Background color, Text color, Font and Base text size.

Select an item to change its settings, grouped in Content (link, image, alt text, heading level), Text, Background, Spacing, Size, Layout, Border and shadow and Advanced. Under Advanced, an Anchor name lets menu links such as #contact jump to that item.

A heading selected in the page builder with its Text, Spacing and Size settings in the right panel
  • Links accept a web address (https://), a page path (/about), a section (#about), mailto: or tel:.
  • Images: click Upload image to replace one (PNG, JPG, GIF or WebP, up to 5 MB), and add Alt text that describes it for screen readers and search engines.

Desktop, tablet and mobile​

Use the Desktop, Tablet and Mobile buttons at the top to see the page at that size. Styles you set follow the device you are on:

  • Desktop styles apply to all screens unless changed for tablet or mobile.
  • Tablet styles apply to tablets and phones.
  • Mobile styles apply to phones only.

Under Layout, Hide on hides an item on the current device, for example a large image on phones. Reset this item's styles clears what you set for the current device.

Undo, preview and code​

  • Undo and Redo step through your changes (Ctrl+Z and Ctrl+Y, or Cmd on a Mac).
  • Preview shows the page without the editing tools. Press Esc to leave it.
  • Edit code opens the page HTML and CSS. Change them and click Apply.

Keyboard shortcuts: Delete removes the selected item, Ctrl+D duplicates it, Enter starts typing in selected text, Esc clears the selection and Ctrl+S saves a draft.

Save and publish the page​

The header shows Unsaved changes or All changes saved.

  • Save Draft keeps your changes without publishing them.
  • Save & Publish makes this version the page's published version. Then publish the site so the change goes live.

Click Back to return to the pages list. Your earlier saves stay under Page Versions.

Plain HTML and CSS only

Website pages hold plain HTML and CSS. Scripts, event handlers (such as onclick), iframes, embeds and forms are removed when you apply code, when you save and again when the site is published. If an older page had such code, the page builder says so when it opens and saves the page without it. To add a form, link to a web form; to add chat, turn on the live chat widget in Website Settings.

Website settings​

On the Website Settings tab, under General Configuration:

  • Website Name for your reference.
  • Upload Your favicon: the small icon in the browser tab. Use a square image of at least 32 x 32 px.
  • Livechat Widget on the Website: shows your live chat widget on every page. Click Manage Live Chat Configuration to change it.
  • Enable Google Analytics: enter your Google Analytics Measurement ID (it starts with G-) to track visits.

Click Save.

Set up your domain​

Every site gets a free subdomain. On the Domain tab:

  1. Under Website Subdomain, change the Website URL if you like and click Save & Deploy.
  2. To use your own domain, turn on Enable Custom Domain under Custom Domain and enter it, for example www.serenewellness.com.
  3. Go to your DNS provider and add the DNS records shown in the table (Type, Hostname, value). Use the copy buttons to avoid typos.
  4. Wait for your domain to verify. DNS changes can take a while to reach everyone, depending on your DNS provider.
Using Cloudflare?

Set the records to DNS Only, not Proxied, or the domain cannot be verified.

Domain Configuration with the Website URL subdomain, a custom domain switched on and the DNS records to add at your DNS provider

Publish​

Click Publish Site on the site, or open More Actions in the sites list and choose Publish Site. Publishing puts every page's published version live. A Website - Deployment in Progress banner shows while it goes live. Click Visit Site to see it. To take a site offline, choose Unpublish Site in the sites list.

Last updated on