This article is one step from our Master Help Guide: All About Websites. We recommend starting with the visual walkthrough video and examples inside the Master Help Guide before diving into the technical breakdown below.
Each Master Help Guide acts as your project plan – teaching you the feature, laying out the steps in the right order, and linking to every resource you’ll need along the way.
This guide is perfect if you want to:
Understand the foundational structure of your website or funnel, including sections, rows, columns, and elements
Customise fonts, colours, images, spacing, and overall styling to match your brand
Set up functional elements like buttons, forms, menus, and pop-ups for a fully interactive site
Optimise your pages for mobile and make layout adjustments that won’t affect desktop
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 (Dark Purple / “GS”): These auto-update across every page in the site - if you change the section on one page, it updates on all the website pages. These save at site level only, meaning they do not sync across separate websites and funnels, only within the website or funnel it is added to. Perfect for things like your menu, header and footer. If you’re 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 Global Section: Click the save icon on the box of any section > [Save Section] > mark it as Global
Template Sections (“TEM”): These save the section as a 'copy' and can be used anywhere as a template. These are page-specific and don’t sync elsewhere (any changes made to a section template do not affect the same section added to other pages)
Universal Sections or Elements (Bright Purple / “US“): These save at the account level, meaning any changes made in one section or element will automatically update and sync across all websites and funnels that the universal section or element is added to
To create a Universal Section or Element: Click the save icon on the box of any section or element > name your section or element (e.g. US - Top Menu Bar) > select Universal Section/Element > then click [Save]
To use a Universal Section or Element on another page: Click the [+] icon at the top left of your page > select [Saved Assets] > click [Universal Sections] or [Universal Elements] > drag and drop the section/element onto your site page > and click [Save] to apply it
Watch this video for a walkthrough of creating and using Universal Sections and Elements
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
To upload a custom font on any website or funnel, open your website or funnel page in the editor
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
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
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
To create a new navigation menu: Drag a Section (green) onto your page (set it to Full Width to stretch across the screen) > add a Row (blue) to the section (with one column for a full-width menu) > drag a Navigation Menu element into the row > and adjust the menu styling, page names and links that each menu item will link out to - watch this video for a walkthrough
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
To hide a section or element for a specific device type, 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. You can also remove sections or elements on Ivorey™ sites if you don't need them by either deleting it, or simply hiding it for both desktop and mobile. Watch this video for a walkthrough.
To create a drop-down menu, follow the steps above to add a new navigation menu. To nest a menu item under another, simply drag it below the parent menu item and pull slightly to the right (you will see it indent to the right). You can move and rearrange items easily by dragging them. Watch this video for a walkthrough.
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 any funnel or website.
If a popup is not displaying when your button is clicked, double-check your popup settings. To do this, click on the popup icon of your top menu bar > click the [Popup Settings] button at the top of your popup > and check the Settings Menu, on the right hand side, to ensure Disable Popup is toggled OFF.
If changes are only showing one device type and not the other (e.g. only showing on desktop but not mobile), this is likely due to the section or element’s visibility settings.
Even if you see the same section on mobile, it‘s likely 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 a button’s border colour, click on the button element > 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, duplicate the section and delete the original global section entirely. 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:
Create Separate Pages: First, create separate pages for your T&C and Privacy Policy on your website - our templates come with these pages included.
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.
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.
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.
Now your legal documents are easily accessible to all visitors on your website.
To add FAQs to your site page, you can drag and drop the FAQ element onto your page > click on the element to open the settings panel on the right > and edit each question.
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/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.
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 (Ctrl/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 (e.g. for a course), as this can sometimes display an outdated version if recent changes were made.
Hit the support chat widget inside Ivorey™ - we can:
Upload the templates to your account
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 🤍
