How to Build a
Website

1.1 Creating a New Website

If you are starting a brand new website, follow these steps in your hosting control panel:

1. Go to the Websites tab in your customer portal and click Get Started.
2. Choose an existing domain name, or add a new one, then click Add New Site.
3. Browse the template gallery. Use the Business Vertical dropdown to filter by industry, or click View All. Use Live Preview to see how a template looks with real content before committing.
4. Enter your business name and category, confirm your company details, and click Get Started.
5. The site opens in Edit Mode — you are now ready to build.

1.2 The Admin Interface

When you log in, you enter the Admin View — a live, editable version of your website with editing tools layered on top.

Left Menu

Icon / Label	What It Does
Build (Elements)	Drag-and-drop panel for all content elements: text, images, galleries, forms, layouts, and more.
My Add-ons	Shows add-ons you have already installed.
Options / Add-ons	Browse and install additional applications.
Pages	Manage all pages on your site — add, duplicate, delete, reorder.
Design	Change your site template to a different design.
Customize	Adjust colours, fonts, and backgrounds for the current design.
DesignPro	Advanced layout and style editor (requires installation).
Site Settings	Global settings: site title, domain, SEO, analytics, and more.

Top Menu

• Page Settings — Control page-specific options: layout, name, SEO, access control.
• Add Page — Create a new page.
• Preview — View your site at different device sizes before publishing.
• Publish — Push all changes live. The button turns green when the site is published.
• Undo / Redo — Step backwards or forwards through recent changes.

Editing Elements on the Page

Roll your mouse over any element on the page to reveal the element menu (displayed in grey). Available actions:

• Edit — Opens the element's properties panel.
• Move — Drag to a new position. Blue lines show all valid drop zones; red zones are invalid.
• Delete — Removes the element (always requires confirmation).
• Hide from viewers — Keeps the element visible in admin view but hides it from site visitors. Select Show to viewers to restore it.
• Duplicate — Creates a copy of the element.
• Select (multiple) — Select several elements at once to move, hide, or delete them together.
• Plus icon — Available on Navigation Areas, Galleries, File Areas, and Section Groups. Click to add items inside.

2.1 Choosing a Template

1. Click Design in the left menu.
2. Use the Business Vertical dropdown to filter by industry, or browse all available templates.
3. Click Live Preview to see a full preview before applying.
4. Click a template to apply it to your site.

2.2 Customising Colours & Fonts

Access via Customize in the left menu. Changes preview instantly — click Save & Close to apply.

Colour Palettes

Choose from predefined colour schemes that update logo text, page titles, menu text, and accents all at once. Click Reset to return to the template default.

Fonts (Main)

Controls body text styles: Defaults, Plain Small, Plain, and Plain Large. For each you can set: font family, colour, size, line height, and link appearance. Changing Defaults applies to all font styles site-wide.

Fonts (Titles)

Controls heading styles: Banner, Heading 1, Heading 2, Page Title, and Section Titles.

2.3 Backgrounds

Access via Customize > Background:

• Choose a stock colour or image, or upload your own.
• To use a custom image: click Edit Selected, then upload a file or provide an image URL.
• Tiling: repeat the image vertically, horizontally, or both.
• Scrolling: Fixed Position for a parallax effect, or Scroll with Content for standard scrolling.

Background Ornaments

Some designs support translucent decorative images (ornaments) overlaid on the site background. Found in the Customize panel.

2.4 Advanced Template Editing with DesignPro

DesignPro is an optional advanced editor for deeper template control. Not required for most websites.

Installing DesignPro

1. In the left menu, click Options / Add-ons.
2. Find DesignPro Editor under Tools and install it.
3. Once installed, DesignPro appears in the left menu.

Loading a Stock Design (for structural changes)

DesignPro > Reload Stock Design > Select Desired Template

Layout Editor

Modify the structural HTML layout of the template. Access via DesignPro > Layout Editor.

Style Editor

Modify CSS styling of the template. Access via DesignPro > Style Editor.

3.1 Adding a Logo

Access logo options via Site Settings > Logo or click directly on the logo area in the header. You have three options:

Option 1 — Use a Site Title (Text)

Display your business name as styled text in the header — no image needed.

• Enter your business name in the Site Title field.
• Set a Delimiter to separate the site title from the page name in the browser tab (default is a dash).

Option 2 — Upload a Custom Logo

1. Change the Logo Type dropdown to Logo.
2. Upload your image via drag-and-drop, file browser, or URL.
3. Set logo size: Smart Fit (scales proportionally to available space), Actual Size, or Custom Size (set exact width/height; use the padlock icon to maintain proportions).

Option 3 — Design Your Own Logo

1. Change Logo Type to Design to open the Logo Designer.
2. Double-click the Caption to edit the main text. Set font, size, colour, style, and shadow.
3. Add a Sub-caption for a tagline or descriptor text.
4. Click Logo Icon to add an icon from the built-in library. Resize with the + and − buttons.
5. Use arrow keys for precise positioning. Hold Shift + arrow key for faster movement.
6. Enable Advanced Options for rotation and advanced shadow effects.
7. Click the Preview Mode icon to see the logo on the live page.
8. Click the Dark Grid icon if your site has a dark background.

3.2 Site Settings

Access via the Settings icon in the left menu. Always click Save after making changes.

Site Details

• Site URL — Your main domain name.
• Site Title — Appears in browser tabs and used as a fallback for SEO.
• Title Delimiter — Character separating site title from page name in browser tabs.
• Sitemap — Auto-generated by default. Uploading a custom XML sitemap disables automatic generation.
• Custom Domain — Add additional domain names pointing to your site.

Special Features

• Google Analytics / Web Analytics — Paste your tracking code to monitor visitor behaviour.
• Google Search — Embed a Google-powered search bar in your site.
• Location & Localisation — Set country, timezone, and date format.
• HTTP vs SSL — Enable SSL (HTTPS). Required for Members Login and e-commerce features.
• Site Keywords & Description — Global SEO meta tags used when per-page SEO is not set.
• Social Sharing Image — Default image when your site is shared on social media.
• Site Code — A button in the Settings tab that lets you add code to the site's header (inserted before the body) on every page — for example custom fonts, analytics scripts, or chat widgets.
• Favicon — The small icon in browser tabs. Upload a 32×32 or 64×64 PNG/ICO file.

Site Access Control

Protect the entire site with a single password — useful for staging sites.

3.3 Version Control

Access via Site Settings > Version Control.

• Preview up to 10 previous versions of your site.
• Mark up to 5 versions as favourites to keep them permanently accessible.
• Restore any previous version with one click.

4.1 Adding a New Page

1. Click Pages in the left menu, then click Add a Page.
2. Select the page type (Home, About, Services, Contact, etc.).
3. Enter a page name. The URL slug is auto-generated from the name but can be customised.
4. Optionally link the page to the main navigation menu or place it inside a folder.
5. Click Add Page to create it.

4.2 Page Settings

Click the cog icon next to any page in the Pages panel, or use Page Settings in the top menu when viewing that page.

SEO Options

• Page URL — Use short, descriptive words separated by hyphens (e.g., our-services, not page2).
• Page Title — Shown in the browser tab and Google search results. If empty, OPB uses "Site Title – Page Name".
• Keywords — Comma-separated words relevant to this page.
• Page Description — 1–2 sentence summary shown in search listings. Falls back to global site description if empty.

Appearance

• Colour Theme — Per-page colour scheme (available in some designs).
• Page Layout — Choose from available column layouts.
• Page Title Display — Toggle whether the page heading is shown on the page.

Social Sharing

Set a custom image, title, and description for when this page is shared on Facebook, LinkedIn, or other social networks.

Access Control

Restrict this page with a password or by member group (requires SSL and the Members Login add-on).

4.3 Managing Pages

Click Pages in the left menu to open the page management panel. Hover over any page to reveal actions.

Action	Description
Publish / Unpublish	Globe icon per page. Orange = unpublished (hidden from visitors).
Set as Home Page	The first page visitors see at your domain. Only one page can be the home page.
Set as 404 Page	Loads when a visitor tries an invalid URL. Only one page can be the 404 page.
Move to Folder	Organise pages into folders. Pages in folders have different URL structures.
Duplicate	Create an identical copy of the page.
Delete	Remove permanently. OPB prompts to replace or remove broken navigation links.

301 Redirects

1. In the Pages panel, click Add Redirect.
2. Enter a name and the old URL path.
3. Choose destination: Internal Link or External Page.
4. Click OK. Redirects take effect immediately without republishing.

4.4 AI-Generated Pages New

Available on AI-powered designs. OPB generates fully structured, SEO-optimised pages based on your keywords.

1. Go to Pages and click Add a Page.
2. Select an AI page type: About Us, Services, Products, or Contact Us.
3. Preview available thumbnail layouts before selecting.
4. Enter keywords or a short description of your business and the page topic.
5. Review, personalise, and update the generated content before publishing.

5.1 Adding Elements to a Page

All content elements are in the Build tab of the left menu. Browse by category, filter using the Show dropdown, or use the search bar.

1. Find the element in the Build tab.
2. Drag it onto the page. Blue rectangles = valid positions; red = invalid.
3. Edit when prompted, or hover and click the settings icon.
4. Click outside the element to save.

5.2 Text & Images

The Text & Images element combines formatted text with an optional image in a single block — the most commonly used element.

Formatting Text

• Style dropdown — Apply predefined styles matched to your design (Heading 1, Heading 2, Plain, etc.).
• Bold / Italic / Underline / Strikethrough — Select text and use the toolbar or keyboard shortcuts (Ctrl/Cmd + B, I, U).
• Alignment — Left, right, centre, or justified.
• Lists — Numbered, alphabetical, or bulleted.
• Indentation — Move paragraphs left or right.
• Superscript / Subscript — Smaller text above or below the baseline.
• Clear Formatting — Removes all styles and resets to plain text.

5.3 Adding Images

Images can be added inside a Text & Images element, or as a standalone Single Image element.

Upload Methods

• Drag and drop from your desktop or directly from a web page.
• Click Browse to upload from your computer.
• Paste an image URL and click Set URL.
• Use the Image Library for royalty-free stock photos.

Image Options

• Size — Set width/height; use the padlock icon to maintain proportions. Click Reset for original size.
• Alt Text / Mouse-over Caption — Descriptive text for accessibility and SEO. Always fill this in.
• Alignment & Text Wrap — No wrapping, left wrap, or right wrap.
• Spacing — Add padding around the image (top, bottom, left, right in pixels).
• Border — Custom colour and width.
• Image Effects — Instant Photo, Reflex, and others.
• Mouse-over Image — Upload a second image that swaps on hover, with Fade-in or Dissolve transition.
• Link — Make the image clickable (internal page, external URL, or lightbox).

Built-in Image Editor

Click Edit on any image to open the image editor: crop, resize, rotate, flip, and apply limited special effects.

5.4 Image Galleries

Add via Build > Gallery. Upload images from your device, URL, drag-and-drop, or the Free Images stock library. Upload up to 200 images per batch (ZIP files not supported).

Gallery Types

Type	Description
Thumbnails	Grid of thumbnails; clicking opens a larger view.
Slideshow	Auto-rotating full-width image with transitions.
Filmstrip	Large main image with a scrollable thumbnail strip below.
Mosaic	Pinterest-style variable-height grid.
Slider	Horizontally scrollable image strip.
Grid	Three sub-types: Responsive, Masonry, or Fixed Columns.

Gallery Settings

• Image Size — Custom width and height for thumbnails.
• Crop Image — Forces images to exact dimensions. Uncheck to preserve original aspect ratio.
• Show Caption — Display caption text below each image.
• Effects — Polaroid, Grayscale, Sepia, and more — applied to all images.
• Shapes — Display images as circles, hexagons, diamonds, etc.

Large Image Viewer (Lightbox)

• Dim Lights — Semi-transparent black background behind the enlarged image.
• Zoom — Allow visitors to zoom in on the image.
• Size — Fixed size or full browser window.

5.5 Layouts (Section Groups)

Layouts structure page content into multi-column or tabbed areas. Add via Build > Layouts.

Layout Type	Best Used For
Columns	Side-by-side content. Ideal for feature highlights, service descriptions, team profiles.
Rows	Stacked sections. Good for step-by-step processes.
Tabs	Compact tabbed panels — one visible at a time. Good for FAQs or product variations.
Accordion	Collapsible sections — one open at a time. Great for FAQs.
Collapsible Rows	Sections users can expand/collapse individually.
Vertical Tabs	Side-by-side tab navigation. Good for category breakdowns.

5.6 Container Elements New

Pre-styled full-width sections with background images. Ideal for hero banners, call-to-action blocks, and feature highlights.

1. In the Build tab, browse Container Elements.
2. Hover over a preset and click the dotted rectangle icon.
3. Drag to the desired position (blue lines show valid positions).
4. Customise background image, scroll behaviour, and container type.

Container Settings

• Background Image — Change, edit, or remove. Use the position grid to set focal point.
• Scroll Behaviour — Scroll (moves with the page) or Fixed (parallax effect).
• Background Colour — Only visible without a background image.
• Container Type — Fluid (full page width) or Fixed (crops to content area).

5.7 Reusable Content New

Create a content block once and display it on multiple pages. Edit it once and all instances update automatically — ideal for contact details, opening hours, promotional banners, or footer content.

Creating a Reusable Content Block

1. Go to Build > Layouts > Reusable Content and drag it to the page.
2. Hover and click the cog (settings) icon.
3. Select { New Preset } and give it a descriptive name.
4. Click Save, then Update.
5. Add any content inside the container — text, images, etc.

Reusing on Another Page

1. On the other page, add a new Reusable Content element.
2. In settings, select the existing preset name from the dropdown.
3. Click Update.

5.8 Forms

Add forms via Build > Forms. Choose from pre-built templates or build your own.

Available Field Types

• Text Field — Single-line input (text, password, hidden, file*)
• Text Area — Multi-line input for longer responses
• Select Field — Dropdown or list selection
• Checkboxes — Multiple selectable options
• Radio Buttons — Single-choice option group
• Submit / Reset Button — The call-to-action to submit the form

*File upload fields require linking to a database. Email file links expire after 30 days.

Form Submission Settings

• Send to Email — Deliver submissions to one or more email addresses (plain text or HTML format; optional custom template).
• Confirmation Email — Automatically reply to the visitor on submission.
• Send to Database — Store submissions in the Database Editor.
• Next Page — Redirect visitors to a specific page after submission (e.g., a "Thank You" page).

5.9 Tables

Add via Build > Tables and Lists, or via the inline text editor (Insert Table icon). Tables start with 1 row and 2 columns.

• Add/remove rows and columns by clicking inside a cell and using the table toolbar.
• Set table width as a percentage (responsive) rather than fixed pixels.
• Set individual cell background colours via the colour picker.

5.10 Horizontal Lines

Horizontal lines visually separate content sections, improving readability and page structure. There are two ways to add them:

Method 1 — Inside a Text & Images Element

1. Enter edit mode on an existing Text & Images element.
2. Place the cursor where the line should appear.
3. Click the Horizontal Line icon in the right-side menu.

Method 2 — As a Standalone Element (more control)

1. Open the Build tab and navigate to Buttons & Shapes.
2. Drag the Horizontal Line element onto the page.
3. Access the Horizontal Line Properties panel on the right to customise.

Customisation Options

• Line Style — Choose from available line styles (solid, dashed, dotted, etc.).
• Ornament — Add a decorative element or custom text on top of the line. Choose from pre-made ornaments or enter a custom caption.
• Ornament Alignment — Left, centre, or right.
• Padding — Adjust top and bottom spacing around the line.

5.11 Downloadable File Areas

Add a file download section via Build > File Area.

• Maximum file size: 120 MB per file.
• Blocked file types: .exe, .dll, .bat, .sys.
• Each file gets a permanent URL that remains the same even when the file is updated.
• Files can be individually password-protected.
• Display options: file icons, descriptions, size, upload date, list or column layout.

5.12 Header Slideshow

1. In Page Settings (top menu), find Page Image and select Image Slideshow.
2. Click Add New Images to upload slides one at a time (ZIP not supported).
3. Reorder slides by dragging thumbnails. Delete using the trash icon on hover.
4. Click the settings icon on a slide to add a link or caption text.
5. Position captions by dragging them on the slide. Use Top/Left fields for precision.
6. Set Caption Animation per slide or globally.
7. Set global Slide Transition: Fade, Slide, Zoom In, Zoom Out, or Zoom In and Out.

5.13 HTML Snippets

Embed custom HTML, JavaScript, or CSS into a page. Common uses: YouTube videos, Google Maps, chat widgets, booking widgets, social feeds, Google AdSense.

1. In the Build tab, find HTML Snippet and drag it to the page.
2. Hover and click the settings cog.
3. Enter a descriptive label and paste the code.
4. Click Update.

6.1 Understanding Navigation Areas

Each design has one main navigation and up to three secondary navigations. The main navigation supports sub-menus and full styling options. Secondary navigations (header top-right, footer) have limited settings.

6.2 Main Navigation Settings

Hover over the main navigation and click the grey edit icon:

• Submenu Animation — Slide down, fade in, or no animation.
• Menu Alignment — Left, right, or centre (horizontal menus only).
• Menu Type — Text-based (default) or flash-based.
• Submenu Layout — Horizontal or vertical arrangement of sub-items.

6.3 Adding Navigation Items

1. Hover over the navigation area (or the grey Empty Navigation box).
2. Click the plus icon (Add More) in the top right of the navigation area.
3. Configure the navigation item properties.

Property	Description
Caption	The text label shown in the menu.
Sub-caption	Smaller secondary text below the caption (some designs).
Link Type	No Link, New Page, Internal Link, External Page, or Email.
Link To	Target page (internal) or full URL (external).
Open Behaviour	Same window, new window, or Lightbox. Internal defaults to same; external defaults to new.
Search Engines Nofollow	Tells search engines not to follow this link.
Mouse-over Tooltip	Tooltip shown on hover. Defaults to caption if left empty.

6.4 Sub-Navigation Items

Sub-menus are available only for the main navigation.

1. Hover over a main navigation item to reveal its sub-navigation area.
2. Click the plus icon in the sub-navigation area.
3. Configure the sub-item properties as you would a standard item.

6.5 Per-Page Navigation

Displays a different navigation set on specific pages — useful for product sections or documentation areas.

To create a per-page navigation:

1. Hover over the per-page navigation area on the page.
2. Click the edit icon and select { New Preset } from the dropdown.
3. Enter a name and click Update.
4. Use the plus icon to add items to this navigation.

To reuse on another page:

1. On the other page, hover over its per-page navigation area.
2. Click edit and select the existing preset name from the dropdown.
3. Click Update.

6.6 Linking Between Pages

1. Select the text you want to link.
2. Click the Link icon in the text toolbar.
3. Choose: Internal Link, External Page, or Email.
4. Set whether the link opens in the same window or a new tab.

7.1 Installing & Managing Applications

1. Click Options in the left menu.
2. Browse or search for the application. Filter by category if needed.
3. Toggle the switch to install. Choose Lite (free) or Premium where applicable.
4. Once installed, the app appears in the Build tab and can be dragged onto any page.

7.2 AI Assistant New

Pre-installed on designs from the 5th series onwards. Improves your written content quickly — no copywriting experience needed.

1. Hover over any text element on the page.
2. Click the AI Assistant icon in the right-hand options menu.
3. Select an action per paragraph: Improve (rewrites for clarity), Personalise (inserts your business details), or Spell Check.
4. Click Apply to save changes.

7.3 Contact Information App

Displays your business contact details and social profiles in a clean, configurable widget.

• Click the Contact Info section and check the boxes for details to display.
• For social networks: enter your username (found in your profile URL) for Instagram, Twitter, Facebook, and Pinterest.
• For LinkedIn: enter your profile URL path; tick Company Profile for company pages.
• For WhatsApp: enter your phone number with country code.
• Adjust colour scheme, alignment, and icon size in Additional Options. Drag icons by the handle to reorder.

7.4 Appointment Scheduler App Premium

Lets visitors book appointments online 24/7. Eliminates back-and-forth scheduling emails.

1. Setup — Customise the "Book Online Now" button (text, alignment, icon).
2. Business Hours — Set working hours and public holidays.
3. Services — Add each service with name, description, duration, and price.
4. Staff — Add staff members, assign services, set individual schedules and vacation periods.
5. Notifications — Configure email alerts, optional manual confirmation requirement, HIPAA mode, booking window limits, and cancellation time limits.

Managing Appointments

Click the Appointment Scheduler element → select Manager from the top-right menu. View by status (scheduled, completed, requested, rejected), filter by date or staff, and add manual appointments to prevent double-booking of phone/email bookings.

7.5 Online Payments App Premium

Integrates PayPal buttons for selling products or accepting donations.

Button Type	Best Used For
Buy Now	Single item purchases at a fixed price.
Add to Cart	Multiple items — visitors build a cart before checking out.
View Cart	Shows the visitor's cart. Place on any page.
Donate	Fixed or visitor-entered donation amounts.

7.6 Members Login App

Creates a password-protected members area. Member credentials stored securely in a database.

1. Build a registration form with fields for username, email, and password. Link to Database Editor.
2. Add the Members Login element. Configure layout and link to the correct database fields.
3. Optionally set a post-login redirect page.
4. Restrict pages via Page Settings > Access Control > By Member Group.

7.7 News & Events App

Displays a news feed or event listings — a simpler alternative to a full blog.

• Data source: RSS URL (auto-updates) or manually entered items.
• Display settings: number of items, description truncation, date filter (all/past/future), sort order, calendar icons, featured images, "Show more" link.
• Manual entries: title, link, image, date, and an Active checkbox to temporarily hide individual items.

7.8 Media Library App

A searchable file download section that also functions as an audio/video player. Visitors download; only administrators can upload.

• Each file entry includes: name, icon, description, display order, and date.
• Configuration: library name, header title, search toggle, description toggle, items per page.

7.9 Daily Deals & Gift Certificates App Premium

Daily Deals

Time-limited discounts with a countdown timer. Features: price vs. value display, expiry date, quantity limits, fine print. Payment via PayPal. Lite: max 10 active deals.

Gift Certificates

Digital gift certificates via PayPal. Up to 5 preset amounts plus optional custom. 3 built-in designs. Partial redemption supported. Lite: max 10 active certificates.

7.10 Database Editor App

Create, import, and manage structured data on your site. Integrates with forms, News & Events, Media Library, and Appointment Scheduler.

• Lite: read-only with CSV import/export. Premium: inline cell editing.
• Column types: Text, Number, Dropdown, Multi-choice, Date, Rich Text, File, Preview, and more.
• Set columns as Unique to prevent duplicate entries.

7.11 Page Rating & Voting Poll App

Page Rating: Floating star-rating widget at the bottom-right of every page. No registration required. View statistics and reset ratings via Admin View.

Voting Poll: Single poll question with multiple options and live results. Configure question, answer choices, results format, visibility, and colour theme.

7.12 Financial Calculators App

Five embeddable calculator widgets: Loan Payment, Mortgage, Net Worth, Automobile Loan, and Retirement Savings. Visitors input parameters and can print amortization schedules. Ideal for financial services, real estate, or auto dealer websites.

7.13 SalesForce Lead Form App

Embeds a web-to-lead form that submits data directly to a Salesforce CRM account. Requires a Salesforce account and reCAPTCHA API key pair.

7.14 WhatsApp New

Adds a WhatsApp chat bubble to the bottom-right corner of your site.

• Required: Phone number with country code.
• Optional: Display name, logo image, and greeting message text.
• Appearance: Light/dark theme, bubble colour, background colour. All changes preview in real time.

7.15 Other Notable Add-ons

Add-on	Description
Local Promotions	Umbrella app combining Daily Deals and Gift Certificates with a shared management interface.
Email Marketing	Build a subscriber list and send email campaigns directly from OPB.
Google Maps	Embed an interactive map showing your business location.
Open Hours	Display business opening hours in a clean, structured format.
AddThis / Social Share	Add social sharing buttons to pages and blog posts.
Page Usher	Create URL redirects and track click statistics.

8.1 Per-Page SEO

Set SEO information for each page via Page Settings > SEO Options:

Field	What to Enter	Limit
Page URL	Short descriptive words, hyphen-separated. E.g. web-design-services	Under 60 characters
Page Title	Describes page content. Shown in Google results. E.g. Web Design Services | Your Company	50–60 characters
Keywords	Comma-separated terms your audience searches for.	5–10 keywords
Page Description	Clear summary of the page. Shown under the title in Google results.	150–160 characters

8.2 Global Site SEO

Set fallback SEO values used when a page has no individual SEO data:

Site Settings > Special Features > Site Keywords & Description

8.3 Image SEO

Every image should have Alt Text set. This helps search engines understand the image, aids screen readers, and enables ranking in image search results. Set alt text in the image properties panel when uploading. Keep it descriptive and specific.

8.4 URL Best Practices

• Use lowercase letters only.
• Use hyphens (not underscores): about-us not about_us.
• Keep URLs short and descriptive.
• Avoid stop words (the, and, a, of) where possible.
• Never change a page URL after Google has indexed it — always set a 301 redirect.

8.5 Sitemap

OPB auto-generates a sitemap. Submit it to Google Search Console to speed up indexing of new pages. Access the sitemap URL via Site Settings > Site Details.

8.6 Google Analytics

1. Create a Google Analytics account and property at analytics.google.com.
2. Get your Measurement ID (format: G-XXXXXXXXXX).
3. In OPB: Site Settings > Special Features > Google Analytics.
4. Paste your Measurement ID and save.

8.7 SEO Best Practices

9.1 Step-by-Step Launch Process

1. Add your domain — In Site Settings > Site Details, enter your domain name in the My Domain field (e.g., www.yourbusiness.com).
2. Save settings — Click the green Save button in the Site Settings panel.
3. Publish the site — Click Publish in the top-right. The button turns green when the site is live.
4. Check the live site — Open a browser and navigate to your domain. Use an incognito / private window or clear your cache to avoid seeing old cached versions.

9.2 Pre-Launch Checklist

Content & Pages

• All pages proofread — no spelling or grammar errors
• All placeholder/template text replaced with real content
• All images have alt text set
• Contact details (phone, email, address) are correct
• All links work — no broken links
• Correct page set as the home page
• A 404 page has been configured

SEO

• Every page has a unique Page Title and Page Description
• Page URLs are clean and descriptive
• Global site keywords and description set in Site Settings
• Google Analytics tracking code added

Design & Functionality

• Site looks correct at desktop, tablet, and mobile (use Preview mode)
• Logo displays correctly
• Navigation menus work and link to the right pages
• All forms tested — submissions received correctly
• Booking / payment / members features tested end-to-end
• SSL (HTTPS) enabled if using payments, forms, or member login

Settings

• Favicon uploaded
• Social sharing image set
• Correct domain entered in Site Settings

10.1 Structure & User Experience (UX)

10.2 Content Best Practices

• Write for your audience, not yourself. Use the language your customers use. Avoid jargon unless your audience expects it.
• Keep paragraphs short. 2–4 sentences per paragraph. Use bullet points and headings to break up text.
• Lead with benefits, not features. Answer "what's in it for me?" first.
• Use high-quality images. Blurry or poorly cropped images undermine trust.
• Show social proof. Testimonials, reviews, client logos, and case studies reduce hesitation.
• Keep the homepage focused. It should clearly explain who you are, what you do, who you serve, and what visitors should do next.

10.3 Mobile-First Design

Over 60% of web traffic comes from mobile devices. Always preview on mobile before publishing.

• Use large, readable text. Minimum 16px body text for mobile.
• Make buttons easy to tap. Minimum 44×44 pixels. Avoid placing clickable elements too close together.
• Avoid horizontal scrolling. Content should fit within the screen width.
• Optimise images for mobile. Large images slow loading on mobile networks significantly.
• Test forms on mobile. Forms should be easy to fill in on a touchscreen.

10.4 Performance & Speed

A 1-second delay in page load time can reduce conversions by 7%.

• Compress images before uploading. Use JPEG for photos at 70–80% quality. Use PNG only for images needing transparency. Target under 200KB per image.
• Avoid large video files. Use YouTube or Vimeo embeds via HTML Snippets instead of uploading video directly.
• Limit third-party scripts. Every external script (chat, ads, social) adds loading time. Only include what is essential.
• Keep pages lean. Split very long pages into multiple focused pages.

10.5 Conversion Optimisation

10.6 Accessibility

• Always add Alt text to every image.
• Ensure sufficient colour contrast between text and background (minimum 4.5:1 ratio).
• Do not rely on colour alone to convey information.
• Use proper heading hierarchy (H1 → H2 → H3) — do not skip levels.
• Ensure all links have descriptive text — avoid "click here" without context.
• Make sure forms have clear labels for each field.

11.1 Safe Mode

If a broken HTML snippet disables your editing controls, use Safe Mode to regain access:

1. In the browser address bar, find your admin URL (ends in something like /ADMIN/home.html).
2. Add /safe_mode to the end of the URL and press Enter.
3. The page reloads with all HTML snippets disabled.
4. Find and remove or fix the problematic snippet.
5. Remove /safe_mode from the URL and reload to return to normal editing.

11.2 Common Issues & Solutions

Problem	Likely Cause	Solution
Can't edit part of the page	HTML snippet conflict	Use Safe Mode to disable snippets and find the problem.
Site looks different from editor	Cached old version	Open in incognito window or clear browser cache.
Logo not showing correctly	Wrong format or size	Use PNG with transparent background. Check size settings in Logo Manager.
Page not found after URL change	No redirect set up	Add a 301 redirect from the old URL to the new one.
Form submissions not arriving	Wrong email in form settings	Check the email address in Form Settings and test with a submission.
File download links broken	File Area was moved	Avoid moving File Areas after publishing. If moved, re-share the new URLs.
Template change removed content	Switched design after building	Check the Clipboard — moved content is stored there temporarily.
Site is slow to load	Large uncompressed images	Re-upload images compressed to under 200KB. Use JPEG for photos.
Members login not working	SSL not enabled	Enable SSL (HTTPS) in Site Settings before using Members Login.

11.3 Quick Reference — Key Tasks

Task	Where to Find It
Change site design/template	Left menu → Design
Customise colours and fonts	Left menu → Customize
Add or change logo	Site Settings → Logo (or click logo in header)
Add a new page	Left menu → Pages → Add a Page
Set page SEO (title, description, URL)	Pages panel → cog icon → SEO Options
Add an element to a page	Left menu → Build → drag element to page
Add an application	Left menu → Options → install → drag to page
Change global site settings	Left menu → Site Settings
Add Google Analytics	Site Settings → Special Features → Google Analytics
Publish the site	Top right → Publish button
Preview on mobile	Top menu → Preview → select mobile icon
Restore a previous version	Site Settings → Version Control
Fix page broken by HTML snippet	Add /safe_mode to the admin URL
Add a domain	Site Settings → Site Details → My Domain
Create a 301 redirect	Pages panel → Add Redirect