Skip to main content

All About Websites: A Master Help Guide

We release brand new website templates every single month for our members - here's where to find and use them!

Grace from Ivorey™ avatar
Written by Grace from Ivorey™
Updated today

Websites Visual Walkthrough

Watch a visual walkthrough to explore building your website on Ivorey™ below:

How To Import A Premium Website Template From The Template Library

All websites in our premium collection includes templates for:

→ Home

→ About

→ Resources
→ Services
→ Contact

→ Privacy Policy
→ Terms and Conditions

→ Link In Bio

Click here to preview the 12 available collections ✨

  • The Wanderer: She's adventurous, earthy and boho.

    → View the template here

  • The Sensual: She's feminine, sensual and luxurious.

    → View the template here

  • The Visionary: She's bold, sophisticated and ambitious.

    → View the template here

  • The Alchemist: She's intuitive, spiritual and mystic.

    → View the template here
    ​

  • The Healer: She's grounded, nurturing and holistic.

    → View the template here
    ​

  • The Creative: She's fun, playful and colourful

    → View the template here
    ​

  • The Romantic: She's soft, elegant, and timeless

    → View the template here
    ​

  • The Minimalist: She's mindful, spacious and calm

    → View the template here
    ​

  • The Professional: She's timeless, luxurious and confident

    → View the template here
    ​

  • The Rebel: She's edgy, unique and unconventional

    → View the template here
    ​

  • The Sunseeker: She's coastal, playful and glowing

    → View the template here
    ​

  • The Playful: She's energetic, colorful and expressive

    → View the template here

We also have matching funnel templates for all collections! ✨

To import the matching funnel, follow the same steps as below except go into the "Funnels" tab instead of "Websites" and select + Create New Funnel!

Get To Know Ivorey™ Websites

Walkthrough of Website Settings

Click here for the written version

  1. Pages Tab: Shows all the individual pages in your website. These are just placeholders — you can rename or repurpose them however you like (e.g. change “Services” to “Work With Me”).
    ​

  2. Stats Tab: Once your site is live, this tab will show page views, opt-in conversions, and order rates. It updates automatically as traffic comes in.
    ​

  3. Sales Tab: Displays any sales made through your website pages.
    ​

  4. Settings Tab: Controls global settings that apply to all pages within this website project.
    ​

    • Website Name & Domain: Add your site name and connect a domain when you're ready to go live. Don’t connect your domain too early if it’s already active elsewhere.
      ​

    • Path: This is a required field but mostly irrelevant — it won’t affect the site link.
      ​

    • Favicon: Upload a small image to your media library, grab the URL, and paste it here to show a custom browser tab icon.
      ​

    • Head & Body Tracking Codes: Add Google Tag Manager, Google Analytics, Meta Pixel, or other tracking scripts here. These will apply across all pages.
      ​

    • Chat Widget: Enable this if you want a pop-up chat box on your site. Can be used for live chat or lead capture. Chat widget must first be setup under Site Pages > Chat Widget.
      ​

    • Payment Mode: Toggle between Test and Live mode depending on whether you’re testing checkouts.
      ​

    • Image Optimisation: Speeds up page load times by compressing images — may reduce image quality. Turn off if you see unexpected blurriness.
      ​

    • JavaScript Optimisation: Recommended to leave ON unless a developer advises otherwise.
      ​

    • GDPR Font Compliance: If enabled, Google Fonts will be disabled and replaced with system fonts. Only turn this on if required for compliance.
      ​

  5. Saving Changes:
    Always hit Save after updating any settings to apply your changes.

Walkthrough of Page Settings

Click here for written version

Once you're inside of a web page, let's go through the various settings you'll see in your top toolbar:

  • Autosave: Turn this on to avoid losing any work.
    ​

  • Preview: Opens a live preview of the current page in a new tab.
    ​

  • Save: Manually save changes (not required if autosave is on).
    ​

  • Publish: Pushes changes live to your connected domain. You can make and save changes without publishing them until you're ready.

  • Add Elements: Lets you drag and drop new content blocks (text, images, buttons, etc.) into your layout.
    ​

  • Layers: Displays all the sections and rows on the page. You can click, rename, or rearrange elements here easily.
    ​

  • Pages: Switch between different pages of your website without going back to the main menu.
    ​

  • Tracking Code: Add header/footer tracking code specific to this page (separate from global site tracking).
    ​

  • Custom CSS: Add or edit page-specific CSS (our templates usually include some already — you don’t need to change this unless customising).
    ​

  • Typography: Set your global fonts and text/link colours for the page.
    ​

  • Background: Adjust the background colour or image for the entire page.
    ​

  • Pop-ups: Create a pop-up form (e.g. newsletter, lead magnet, offer). Pop-up settings are managed on the right panel.
    ​

  • SEO Metadata: Update page title, description, keywords, social share image, and more. Helps with search rankings and social link previews.
    ​

  • Cookie Consent: Toggle cookie consent banner on or off (helpful for GDPR compliance).
    ​

  • Desktop / Mobile View: Switch between views to design for both devices.
    Note: Some elements may be shown on one version and hidden on the other (check the Advanced > Visibility settings for each element).
    ​

  • Undo Button: Use this to quickly undo changes made in your current session.
    ​

  • Version History: Access previously saved versions of your page and restore if needed — even after publishing.

How To Design Your Website on Ivorey™

The following trainings are using one of our premium collection templates, which we do suggest using as they give you such a huge head start on your site. However, if you wish to design your website from scratch, all the same principles apply so please continue to follow along.

Before you start building, head to Marketing → Brand Boards and make sure you've set up your fonts and brand colors. Once that’s done, you’re ready to dive into your template or build from scratch.

1. The Building Blocks of Websites: Sections, Rows, Columns and Elements

Click here for the written version

  • Sections (Green): These are your main content blocks. Always start with a section. Use separate sections for different parts of the page (e.g. hero, testimonials, offers) so buttons can scroll to them.
    ​

  • Rows (Blue) and Columns (Purple): Each section contains rows — one column, two-column, etc. You must add a column onto a section before you can use the elements.
    ​

  • Elements (Orange): Add text, images, buttons, etc. by dragging them into columns. Customize layout, spacing, and alignment easily by clicking each column or element.
    ​

  • Use the Layers tab to see and rename your layout at a glance. You can delete, duplicate, and re-arrange anything with the drag handle icon or in the layers panel.
    ​

  • Global Sections (Purple / “GS”): These auto-update across every page - e.g. if you change the section on one page, it updates on all the website pages. Perfect for things like your menu, header and footer. If your using our templates, many of the sections are Global Sections. You'll see them with a purple box when you hover over the section, and also named "GS". To create your own, click the save icon on the box of any section → “Save Section” → mark it as Global.
    ​

  • Template Sections (“TEM”): These are page-specific and don’t sync elsewhere. You can still reuse them manually across other pages if needed.

2. Adjusting The Elements: Editing Fonts, Colours, Images, Alignment, Padding and More

Click here for the written version

  • Typography: Change your headline and content fonts for the whole page in one click. You can also set default text color and link color here.
    ​

  • Suggested Approach: Start by customizing one thing at a time (e.g. do all colors first), rather than getting distracted by every small detail.
    ​

  • Logos & Images: Swap logos or template images with your own or browse free images using Unsplash from the image selector.
    ​

  • Text Edits: Click directly on text to change it. Don’t feel restricted by placeholders—repurpose sections (like offers or team) to suit your business needs.
    ​

  • Buttons & Layouts: Duplicate or delete buttons, drag elements into new positions, and resize fonts using the drag handle. Use the column layout options to align text to the top, middle, bottom, or space evenly.
    ​

  • Image Display Options: Choose how images display—centered, parallax, 100% width, fill, or repeat—for responsive designs and scroll effects.
    ​

  • Text Settings: Adjust alignment, spacing, font weight, font type (headline/content/custom), and colors. Use advanced settings for line height and text transformation (e.g. uppercase, lowercase, title case).
    ​

  • Padding vs Margin: Padding controls space inside an element; margin controls space outside it. Use these to create clean, intentional spacing between elements.

3. Setting The Functionality: Buttons, Forms, Pop-Ups, Social Icons and Menu Links

Click here for the written version

  • Button Actions: Every button must have a set action. You can link it to another page on your site, a specific URL (like your sales funnel), scroll to a section on the same page, or open a pop-up.
    ​

  • Pop-up Settings: Each website page comes with a built-in pop-up you can customize. You can switch the form to any form in your account (opt-in, newsletter, contact, etc.) or add anything else you like here. Pop-up's can be set to show after x seconds, when someone clicks a button, or when someone attempts to exit the page on desktop. You can also disable them all together.
    ​

  • Form Actions: If your pop-up or site page includes a form, you need to define what happens on submission. Click on the form and then set the "Submit Actions" on the right hand settings panel that opens up.
    ​

  • Menus: Customize your navigation menu by editing or removing any links. You can add new ones and choose whether they link internally or to external URLs. Click on the menu to see the settings panel open on the right.

  • Logos: Logo areas (e.g. where it says the template name) use images, not text. If you want to change the logo, just swap the image for your own.

4. Optimise Your Site For Mobile

Click here for the written version

  • Mobile Layout Inheritance: Your mobile layout automatically inherits changes made on desktop. If you add padding or spacing on desktop, it will apply to mobile too—unless you override it. Changes made on desktop affect mobile, but changes made on mobile do not affect desktop. This lets you tweak mobile layout without breaking the desktop design.
    ​

  • Mobile-Only Changes: Look for the mobile icon next to settings—those changes apply only to mobile. No icon means it’s a universal setting (applies to both views). For example, you can adjust spacing on mobile without affecting desktop but changes like background color or font style (without the mobile icon) apply across both views.
    ​

  • How To Have Different Versions Between Mobile and Desktop: To create different content for desktop vs mobile, duplicate the element and set one to show on desktop and the other on mobile under the Advanced > Visibility settings.
    ​

  • If you're making a change on desktop but its not showing on mobile, its usually because a duplicate section was intentionally made so that mobile could have it's own unique version. Click on the element and check the Visibility settings in the settings panel on the right. This will show if its a mobile-only element.
    ​

  • Mobile Preview: Use the preview link to test your page on your phone before publishing, by copy-pasting the link into a mobile device.
    ​

  • Final Step: Once your mobile view is ready, hit save to lock in your changes.

5. Connect Your Domain & Publish Your Site

Access our All About Domains guide when your site is ready to go live - it will walk you through each step 🎉

Frequently Asked Questions about designing Websites and Funnel pages on Ivorey

How to create a navigation menu on a website or funnel page

  1. Drag a Section (Green) onto your page if you don’t have one already.

  2. Inside the section, add a Row (Blue) with one column for a full-width menu.

  3. Click on the section and set it to Full Width to stretch across the screen.

  4. Add an Element and scroll down to find the Navigation Menu.

  5. Drag the Navigation Menu into the row.

  6. On the right hand column, you can adjust the menu styling, page names and links that each menu item will link out to.

  7. Watch this video to learn how
    ​

How can I make a collapsible menu with drop-down pages under it?

  1. Drag and drop the "Navigation Menu" element onto your page.

  2. Click on the menu, and you'll see its settings open on the right hand side.

  3. You can add each menu item and the styling in the settings panel.

  4. Drag one menu item under another to nest it (indent it slightly to the right).

  5. This will create a drop-down menu under the parent menu item.

  6. You can move and rearrange items easily by dragging them.

  7. Watch this video to learn how

How to create global sections to use across multiple website or funnel pages

  1. Click on the section (green box) you want to save as a global section.

  2. Click the save icon.

  3. Name it (e.g., “GS - Top Menu Bar”).

  4. Select Global Section (not template) to keep it synced across multiple pages.

  5. Once saved, the section outline will turn from green to purple, indicating it is now a global section.

  6. To use the Global Section on another page:

    • Add a new Section.

    • Click Global Sections.

    • Drag in your saved menu.

    • Hit Save to apply it.

  7. Any edits made to this section will automatically update across all pages where it is used.

  8. Watch this video to learn how

What's the difference between a template section and global section?

  • Global Section: Updates everywhere when you change it e.g. on a website, you would typically save the menu and the footer sections as global sections and apply them to all pages. If you update the menu on one page, it then updates everywhere across the site.

  • Template: Saves the design but creates a new copy each time, so changes to one do not affect others.

  • NOTE: Global sections and templates are only saved within the website or funnel that you create it in - not ALL websites/funnels in your Ivorey account.

Can I use the same global menu across different funnels and websites?

  • No, global sections are only available within the same funnel or website.

  • If you need the same menu for a website and a funnel, create a separate Global Section for each.

Do I need a menu in my funnel?

  • Usually not, because funnels are designed to guide users through a specific journey without distractions.

  • Menus are mainly for websites, where users need to navigate multiple pages.

What's the difference between a website and a funnel?

Use a website when:

  1. You want visitors to freely explore multiple pages and offerings

  2. You need a central hub for your brand with various sections (e.g., home, about, resources, contact)

  3. You want to showcase your overall business and so viewers can explore all your offerings

Use funnels when:

  1. You want to guide visitors through a specific journey (e.g. they must go through a specific set of pages in an exact order)

  2. You want to track analytics and optimise your pages for increased sales conversions

  3. You're selling a standalone product, course, or service

  4. You want to include strategic elements at the checkouts like bump offers and upsells

Funnels are especially great for:

  • Promoting a freebie

  • Promoting a paid offer

Remember, you can use both! Your website can be your main hub, and then lead off into your different funnels for individual offers!

Can you host your website and funnels on the same domain in Ivorey?

Yes, you can host both your website and funnels on the same domain in Ivorey. Here's how it works:

  1. If you're building a website on Ivorey, you can use your main domain (e.g. yourdomain.com) for it.
    ​

  2. You can use this same domain for all your funnels, online store, and blog - as long as they're built in Ivorey.
    ​

  3. When publishing funnels, you can simply create different URL paths under your main domain. For example, yourdomain.com/funnel-name.
    ​

  4. Alternatively - if your main domain is already being used on an external platform (not Ivorey) and you want to keep it live, then you can use a subdomain like offers.yourdomain.com for your Ivorey website and funnels.

Does Ivorey have Link in Bio Templates?

Yes! And we are so excited to introduce you! Click here to access our guide on how to customise our link in bio templates so you can make those first impressions count!

How do I add a pop up page in a website?

  1. First you will need to create the form you want to add to the popup inside your website page (e.g contact form) You can use one of our Form templates, or you can build your own from scratch by going to [Site Pages] > [Forms] > [Builder] you can follow our forms guide here to create your form.

  2. Once you have created your form, navigate back to your website page > and click the Popup Icon located on the top menu bar of your website builder > then click the + icon on the popup screen to add your 'row'

Why is my Popup not showing when I click the button?

To get your popup to show in your funnels, you just need to:

  1. Click on the popup icon of your top menu bar

  2. Then click on the [Popup Settings] button at the top of your popup

  3. Next on the right hand side you'll see a settings menu > scroll down to 'Disable Popup'

  4. Make sure this is toggled OFF so that your popup will show when your button is clicked.

Why are my desktop changes not showing on mobile?

This is likely because the particular section thats not showing, has been set to be visible on desktop only. Even if you see the same section on mobile, it would be a duplicate we've added to the template and set to mobile only because it needs a slightly different layout. Here is a super quick 1 minute video explaining the change and how to update it 👇

What is the difference between the padding and margin settings?

The 'padding' is for internal spacing, and the 'margin' is for external spacing. For best practice, adjust the internal padding settings to format spacing between your elements.

Please note: Even when the margin settings are showing 0 or auto you may still need to manually adjust values manually to 0 to reset any spacing automatically created.

To adjust your margin and/or padding settings, click on the element directly > then click on the 'Styles' tab on the right-hand menu > and scroll to 'Margin & Padding'

Need Help?

Hit the support chat widget inside Ivorey - we can:

  • Drop the templates directly into your account if you can't find them

  • Walk you through any of the steps

  • Troubleshoot anything that’s not working

We’re here and ready to help via the chat widget in the bottom right of your Ivorey™ account. Or if you are looking for done-for-you support, you can browse our current services here 🤍

Related Articles
All About Forms: A Master Help Guide
All About Sales Funnels: A Master Help Guide
All About Domains: A Master Help Guide
All About Opt-In Funnels: A Master Help Guide
All About Surveys: A Master Help Guide
Did this answer your question?