GOBI – Website Funnel Builder Overview

The navigation menu is located at the upper section of the interface in light blue.

• The “Back” button at the upper left corner will take you outside of the builder and back into the GOBI.
• “Desktop” and “Mobile” toggle switches are available to ensure that your website or funnel is designed for both desktop and mobile users.
• The “Settings” button opens up a submenu with various settings options:
  • “SEO metadata”: Customize your SEO data which includes information like the page title, description, keywords, author, and social image.
  • “Tracking code”: Add your tracking codes, like Google Analytics, pixels, etc.
  • “Custom CSS”: Insert custom CSS if you’re working with a designer who knows CSS.
  • “Background”: Set a big background image.
  • “Typography”: Change the default typography for your site.
• “Pop-up” section allows for editing of pop-up forms or content.
• “Undo” and “Redo” buttons help when you want to revert or redo certain actions.
• “Preview Custom HTML and JavaScript” button helps you preview the code you have written.
• “Sections”, “Rows”, “Columns”, and “Elements” are foundational components of your page.
• “Versions” button lets you see different iterations of a page.
• “Preview” button opens up a new browser to show you what your page looks like live.
• The “Save” button is crucial to ensure you don’t lose any work created.
• “Grid” button shows you all the individual pages that you can toggle through on the builder.

Your page is made up of sections, rows, columns, and elements:

• “Section”: A big part of the page that extends from one side to another. You can choose the width (full, wide, medium, or small) and it has many customizable options like spacing, title, padding, margins, background color, shadow, and image.
• “Rows” and “Columns”: You can have one column, like for a headline, or multiple columns if you want to have content on the left and right side simultaneously.
• “Elements”: Elements like headlines, buttons, forms, images, videos, etc. are dragged into the different sections to start making up your page.

• Each section and element comes with its own customizable options on the left sidebar. You can change things like the font size, colors, padding, and more.
• “Manage” button allows you to manage your sections, rows, and columns. You can adjust padding, margins, and move things around freely.

Congratulations! By following this in-depth tutorial, you’ve learned how to effectively navigate and use the Builder to create a funnel or website. You’ve learned how to build a page, edit sections, and ensure your site is optimized for desktop and mobile interfaces. Keep experimenting with these tools, and don’t be afraid to play around with the settings to create a website that best represents you or your brand. 

Now you’re ready to continue building and customizing your website or funnel to your liking. Remember, practice makes perfect, so keep exploring and building!