Design & Customise Your Site Pages

• 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. Customise 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

• 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 customising 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 general 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

1. To upload a custom font on any website or funnel, open your website or funnel page in the editor

2. To change fonts site-wide for headings or content:

   • Click the Typography icon at the top

   • Select Headline Font or Content Font

   • Click [Upload Font] > [Upload from Device]

   • Use the .woff2 file format (convert online if needed) and ensure you own the license

   • Select your uploaded font to apply it​

3. To change the font for a specific element only:

   • Click the element (e.g. button or text block)

   • Choose Custom Font, then select the font name > [Upload Custom Font] > Upload from Device and upload a .woff2 font file​

4. Click Save to apply changes.

Note: If you are adding a custom (non-Google) font, you are only able to upload .woff2 files - .ttf, .otf, .woff files are not accepted. Using anything other than .woff2 files will result in an invalid file type error or you may see a red  icon besides the unsuccessful font types.

• 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 customise. 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: Customise 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

• 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 colour 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 Styles > 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

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

You can remove sections or elements on Ivorey websites if you don't need them by either deleting it, or simply hiding it. Inside the website/funnel builder, click on the section or element you want to hide and you'll see the settings panel appear on the right. Under Styles > Visibility you can toggle the desktop/mobile icons on or off to determine the visibility. Watch this video to learn how.

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 .

• Global Section: These save at site level only, meaning they do not sync across websites and funnels, only within the website or funnel it is added too. Any changes made to a Global Section will automatically update any other pages where the global section is also added

• Template: These save the section as a 'copy' and can be used anywhere as a template. Any changes made to a section template, do not affect the same section added to other pages

• Universal Section: These save at account level, meaning any changes made in one section, will automatically update and sync across all websites and funnels that the universal section is added to

To create a universal section or element that saves and updates at an account level, meaning that the changes you make to the section or element on your website page, will also update the section or element pulled into your funnel page for example, please follow the steps below:

1. Hover over the section or element you want to create as a universal section/element > then click the [Save] icon

2. Name your section/element (e.g., “US - Top Menu Bar”)

3. Select Universal Section/Element to keep it synced across all sites the section/element is pulled into > then click [Save]

4. To use the Universal Section/Element on another page:

   • Click the [+] icon at the top left of your page

   • Select 'Saved Assets' > then click 'Universal Sections' or 'Universal Elements'

   • Drag and drop your universal section/element onto your site page

   • Then hit [Save] to apply it​

5. Any edits made to this section or element will automatically update across all site pages where it is added

This is a great feature for sections like your menu's and footers, or elements like your buttons and forms, where you want to keep all changes updated in both your Websites and Funnels. Watch this video to learn how.

No, global sections are only available within the same funnel or website. If you need the same menu for a website and a funnel, please save the menu section as a Universal Section instead, and add the universal section to the funnel or website.

To get your popup to show, 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

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. Watch this super quick 1 minute video explaining the change and how to update it.

To change the button border colour, please click on the button element > then click on the [Styles] tab on the right-hand menu > scroll down to the Border tab and click on the colour icon next to Border Colour to select your preferred brand colour.

In all of our website templates, we have built them using Global Sections for some areas, the most common sections you can expect to find set as a global section in your website are:

• Website Menu

• Website Footer

• The 'About Me' section on the Home Page is set as a global section, and also added to the About Page

• The 'Free Resource' section on the Home Page

• The 'Newsletter' section on the Home Page

You can tell if a section is a global section or not by hovering over the whole section, if the section highlights green, this means the section is a standard template and can be customised without affecting the same section on other pages, if the section highlights a deep purple colour, this means the section is a global section and any updates made to this section will update any pages this section is added as well.

If you would like to use a global section on multiple pages, but do not want your edits on one page to overwrite the section on another page, follow the steps below:

1. Hover over the global section and click the double square icon to duplicate the section

2. Next, delete the original global section entirely

3. You’ll now have a duplicated section with a green outline, which means it’s no longer global and can be safely edited without impacting other pages

Watch this video for a guided walkthrough on how to turn a global section into a standard section.

To ensure your Terms and Conditions (T&C) and Privacy Policy are accessible on all pages of your website, follow these steps:

1. Create Separate Pages: First, create separate pages for your T&C and Privacy Policy on your website.

2. Add Links to Footer: Add these pages to the footer of your website. If your footer is a global section, this will ensure the links appear on all pages where the footer is present.

3. Link the Pages: Copy and paste the URLs of your T&C and Privacy Policy pages into the footer as hyperlinks. This means you should hyperlink the words 'Privacy Policy' and 'Terms and Conditions' in your footer to their respective pages.

4. Publish the Pages: After linking, make sure to publish both your Policy Page and Terms and Conditions Page. This step is crucial to ensure the updated links are live when your website goes live.

   
   By following these steps, you can ensure that your legal documents are easily accessible to all visitors on your website.

To add FAQs to your funnel page, you can drag and drop the FAQ element from the left-hand builder. Once added, click on the element and you'll see the settings panel appear in the right where you can manage each question.

You might be seeing a different design to a team member (for your website, funnel, pages, course, email, form, etc.) because of cached data or viewing the page in admin mode.

• Please try hard refreshing the page (Windows: Ctrl + Shift + R / Mac: Cmd + Shift + R), then log out and back into the account.

• If the issue persists, open the page in an incognito/private browser window or a different browser to bypass cached data.

• Double-check that you’re not viewing the page in Admin Mode, as this can sometimes display an outdated version if recent changes were made.

Your website/funnel text formatting may look different after publishing, if you copy text directly from an external source and paste it into the Ivorey editor. Often hidden formatting code from the original source overlaps or overrides settings in Ivorey, causing text, colours, spacing, or font settings to change once the content goes live.

To avoid this, paste your text into a plain text editor (e.g. Notepad or TextEdit) or to a Google Doc using "Paste without formatting" (Ctrl+Shift+V or Cmd+Shift+V). Then, copy that "clean" text and paste it into the site builder. This strips away the hidden code and ensures your text displays perfectly every time.

Portrait (vertical) videos are placed inside a landscape-style container in the builder, which enforces a minimum width of around 300px. This is why adjusting padding or margins alone won’t make the video smaller, the height expands to maintain the aspect ratio.
​
A solution is to place the video inside a 1-column section and set a max width of 360-420px, then center it. Alternatively, you could use a landscape (16:9) version of the video instead.