Before You Dive In
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 site, 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
Step 1: The Building Blocks of Websites: Sections, Rows, Columns and Elements
Click here for the written version
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. 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
Step 2: Adjusting The Elements: Editing Fonts, Colours, Images, Alignment, Padding and More
Click here for the written version
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 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
Step 3: How To Upload and Apply Custom Fonts
Click here for the written steps
Click here for the written steps
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.
Step 4: Setting The Functionality: Buttons, Forms, Pop-Ups, Social Icons and Menu Links
Click here for the written steps
Click here for the written steps
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
Step 5: Optimise Your Site For Mobile
Click here for the written steps
Click here for the written steps
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
Next Steps
If you’ve completed the steps above, head back to the Master Help Guide on Websites to move onto the next phase.
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.
Frequently Asked Questions
How can I create a navigation menu on a website or funnel page?
How can I create a navigation menu on a website or funnel page?
Drag a Section (Green) onto your page if you don’t have one already
Inside the section, add a Row (Blue) with one column for a full-width menu
Click on the section and set it to Full Width to stretch across the screen
Add an Element and scroll down to find the Navigation Menu
Drag the Navigation Menu into the row
On the right hand column, you can adjust the menu styling, page names and links that each menu item will link out to
Watch this video to learn how
How can I hide a section or element from desktop, mobile or both?
How can I hide a section or element from desktop, mobile or both?
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.
How can I make a collapsible menu with drop-down pages under it?
How can I make a collapsible menu with drop-down pages under it?
Drag and drop the "Navigation Menu" element onto your page
Click on the menu, and you'll see its settings open on the right hand side
You can add each menu item and the styling in the settings panel
Drag one menu item under another to nest it (indent it slightly to the right)
This will create a drop-down menu under the parent menu item
You can move and rearrange items easily by dragging them
Watch this video to learn how .
What's the difference between a template, and global and universal section?
What's the difference between a template, and global and universal section?
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
How to create universal sections and elements to use across multiple website or funnel pages
How to create universal sections and elements to use across multiple website or funnel pages
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:
Hover over the section or element you want to create as a universal section/element > then click the [Save] icon
Name your section/element (e.g., “US - Top Menu Bar”)
Select Universal Section/Element to keep it synced across all sites the section/element is pulled into > then click [Save]
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
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.
Can I use the same global menu across different funnels and websites?
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, please save the menu section as a Universal Section instead, and add the universal section to the funnel or website.
Why is my popup not showing when I click the button?
Why is my popup not showing when I click the button?
To get your popup to show, you just need to:
Click on the popup icon of your top menu bar
Then click on the [Popup Settings] button at the top of your popup
Next on the right hand side you'll see a settings menu > scroll down to Disable Popup
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?
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. Watch this super quick 1 minute video explaining the change and how to update it.
How do I change the button border colour?
How do I change the button border colour?
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.
How do I make a global section a normal section instead?
How do I make a global section a normal section instead?
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:
Hover over the global section and click the double square icon to duplicate the section
Next, 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.
How can I ensure my Terms and Conditions and Privacy Policy are accessible on all pages of my website?
How can I ensure my Terms and Conditions and Privacy Policy are accessible on all pages of my website?
To ensure your Terms and Conditions (T&C) and Privacy Policy are accessible on all pages of your website, follow these steps:
Create Separate Pages: First, create separate pages for your T&C and Privacy Policy on your website.
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.
By following these steps, you can ensure that your legal documents are easily accessible to all visitors on your website.
How do I add and edit FAQs on my website or funnel page?
How do I add and edit FAQs on my website or funnel page?
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.
Need Help?
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 🤍