Sites give you the ability to create client-facing websites within Topline OS. Create that perfect home page for your business. Whip up a landing page to capture more leads. The possibilities are endless.
Within Topline OS, we have two types of Site Builders; while they are similar they do have different functionality. Let’s review each type of Site.
Funnels - In general, funnels have a very direct sequence of pages, which is why we offer split testing on funnels only. Funnels are a step-by-step series of web pages, generally used for a specific purpose like capturing leads or booking appointments.
Websites - A place to build web pages for any use case, such as a homepage for your business. There is generally no path of progression that contacts are led through, which is why we do not offer split testing on websites.
Though you can use Websites for much the same reasons as funnels, websites are different in some small ways.
In all but a few ways, Funnels and Websites are the same. They both house a group of webpages and they can be used for various purposes despite which one you choose. What matters is if you want to use a Split Testing feature on a web page and the page views UI.
Split Testing in Funnels - You can only split test on Funnels. Split Testing in funnels is when you create a variation of a page to see which is better.
eCommerce (Online Store) - Only websites can create and utilize the eCommerce (Online Store) feature.
Page View UI - There are different page view UI depending on if you are in the funnel or website views.
When you go to create a new site, you will have the option to choose from hundreds of templates. Once you have selected a template, you can edit any or all of the parts when you have selected it. We encourage you to check out them all.
After selecting the template it will load the template. If you aren’t already, navigate into one of the pages by clicking “Edit” page to open up the site builder to edit a specific page.
The same functionality and hierarchy of elements exist in both the Funnel and Site Builder. Let's hop in and check out our Site Builder and how you use it to create sites.
Site Builder Navigation Bar
The site builder navigation bar lives at the top of the builder and allows you to toggle between all of the various features. We will review each of these tabs below.
Rows and columns are the building blocks of your site and are used to house elements. To add an element, like an image, you need at least one section, one row, and one column. Then you will be prompted to add an element. There are many elements, each element is unique.
Now let’s add an element to your site. In the top right of your site editor, you can select "add element" to see your options for what objects can be added to your site. Once you have chosen the element you would like to add, click and drag the element to the area you prefer.
Every element on a webpage requires a section. Within this section, you need to have at least one row. This row needs to have at least one column. Adding all three of these (Section > Column > Row) we are then able to add an element from the "+Add Element" bar.
From largest to smallest, we have:
Sections (Green) > Rows (Blue) > Columns (Pink) > Elements (Orange)
About sections, rows, and columns...
You cannot add a section within a section. Nor can you add a Row within a row or a column within a column. You also cannot add an element within an element.
You can add multiple rows into a section. Within a row, you can add multiple columns. Within a column, you can add multiple elements.
You must have at least one section, one row, and one column to add an element.
To edit a specific section, row, column, or element, hover over the element then click on the gear setting icon that appears. In addition, clicking on any part of the element will also automatically open the pop-out settings menu on the right.
Within these settings, you can add padding, margin, change visibility, and much more. Also, note the "General" and Advanced Tabs which offer more settings you can use to make your site great.
When you want to move or put space between an element on your webpage - you are going to be adjusting the Padding or Margin. This is done within the object settings, clicking on the object will pop out this settings menu on the right.
Padding - This will add space WITHIN a section, row, column, or element. Padding will add space from the outside of the object inward.
Margin - This will add distance OUTSIDE of a section, row, column, or element. Giving space between other objects.
You can move an object by using the up or down arrows seen when hovering over the object. This will shift the element up or down based on the elements around it. In addition, you can move an object by hovering over the object, and then clicking and holding the move icon. This will let you move the object. Release the held click to drop it into its new place.
Option 1: Up/Down Arrows – will move the object up or down based on the objects around it.
Option 2: Click and Drag – will allow you to click and drag it where you want it.
Hovering over any object will give you the ability to clone that object and everything within it. All settings and objects within the cloned section will be duplicated and then added below. This is great when you have a format or object that you want to use again or somewhere else on the site page.
If you need to delete or remove an object, hover over the object then select the trash can symbol. This will delete the object. You can use the Undo/Redo to add it back if you need to.
Layers help you view all of the various objects and how they are nested within the Website Object Hierarchy. Helpful when you have misplaced an object or hidden it from both mobile and desktop view.
View and navigate to other web pages within your Funnel or Website from the pages tab. Giving you the ability to quickly move between web pages when editing multiple web pages. You can access this tab from both the right and middle site builder navigation bar.
In the event you would like to add a tracking code to the header or footer of your webpage, you can do so from this Tracking Code page.
When you want to add custom CSS to your website to your website, you can from the custom CSS tab. You can consult a developer for how to use and create a code for your unique needs.
You can change the default font for your webpage headlines and content as well as your text and link colors within the typography.
To change the default background image or background color of your webpage you can select the Background tab. This will add a background behind your sections. If you have a background image or color set on a section, row, column, or element, it will be behind this.
Most users dislike pop-ups, but the sad fact is that they still convert rather well, despite their bad rap. When you want to add a popup, you can do so from the Pop Up. After selecting it, you will use the pop-out setting menu on the right to edit the properties.
You can show a pop-up by adding a button and then have the button action deploy the pop-up. You can also use the pop-up settings to “Show Popup on” Exit or time delays - select the popup then see the settings on the right-hand side.
Here, you can edit the SEO metadata, this will show up in search engine results when searched. In addition, it will show in the tab settings of your browser, when you share your site link and more. It might seem small but having your SEO settings set up is important - it helps search engines find your site and when sharing a link, it helps users trust the link.
If you have custom code on your site, providing it was installed successfully, this button loads this custom code so you can see it within the builder. Another option is previewing the page. If your custom code is not working as planned, please consult a developer.
When you are using the builder you can choose to have the right pop out lay over top of the webpage or you can set it to two-column mode, which will push the webpage into two columns. The first column is the webpage, the 2nd is the settings tag that pop out on the right.
When you open and begin editing your site, you may find the need to undo a change you made. You can undo or redo your actions at the top right of your site builder navigation bar.
*This will only work for your current session, meaning when you reload or leave the page, you may not be able to undo or redo it as a new session will begin. The versions, outlined below, are great for restoring previous versions of the site.
In the top right-hand side of your site builder, you will locate versions, preview, and save buttons. Let’s go through each of them below.
Versions - selecting versions will take you to previously saved versions of your site. Helpful when you want to view or revert previously saved versions of your site.
Preview - create a preview version of your site page for you to see as if it is a live site. Great for testing and seeing what your recent edits look like for a live visitor.
Save - you can click the save button to save an unpublished version of your site. This same version will be overwritten after every save. This is different from the published live version of your site. This means your site visiting will not see any of the changes made on this version until they are published.
Publish - Publishing will activate the current saved version of your site to be posted live to the internet. Now site viewer will see the most recent published version of your site.
Now that we are done exploring all of the parts of our site builder, let’s learn how to edit the mobile view of our site.
Every site builder has both a mobile and desktop view. Unless you edit an object, the desktop and mobile views will be identical. When you go to review your mobile view of your site, you will likely find some aspects of your site you wish to change or adjust for your mobile viewers. This makes sense, mobile and desktop screens are different sizes. So we will need to adjust how the mobile view looks to best suit mobile viewers. Let’s learn how to edit your mobile view below.
At the top of your editor, you will see a button for Desktop Mode and another called Mobile Mode. Selecting the “Mobile Mode” will toggle to the mobile view editor of your site.
All Website objects by default are mobile and desktop visible. However, you can change this, which will help greatly in some circumstances.
More than likely, you will find you need to create a unique section, row, column, or element for mobile view only. You can edit the visibility of your elements with the visibility setting. Select any object, go to settings, then advanced settings. This is very helpful when optimizing the look and feel of your desktop or mobile views for your site.
After toggling, you will only be able to see the elements based on how you toggle them. So if you removed Desktop, you would only see the element on the mobile editor view on the live mobile view of a website.
Within your object settings, you will see mobile responsive toggles that allow you to edit an object's settings unique to mobile or desktop. For example, the image below shows an image element alignment settings. This means you can change how this element looks on the desktop view, then toggle to the mobile view and edit the mobile settings to be unique from the desktop view.
You will find mobile responsive settings like this on several object settings. We are always working to add in more.
There are a number of of tips and tricks to learn when editing your mobile site, let’s check out a few:
Finish Desktop Mode First
More often than not, completing a full version of your desktop view of your site makes it easier to edit your mobile view. So get that desktop view looking stellar THEN start working on your mobile view after your desktop view is the way you like it.
Mobile Navigation Menus
If you have a site navigation menu, create a Global Section with Mobile-only visibility. This can be added to the mobile version of each of your pages for a clean and consistent look. You can do the same for the Desktop Navigation menu.
Duplicate an Object and Change Visibility
If you cannot get a section or object to look good on mobile without editing the desktop view, create a mobile-specific section. You can do this easily with the “duplicate” function. Which will create a copy of the object. Then you can change the visibility of one to desktop only and the new one to mobile only. Now we can edit the mobile one without messing up the desktop. This is great for images.
Learn how to see the Mobile View of your Site on Your Desktop
Did you know… you can see the mobile view of your site from your computer?
Now that we have a kill desktop and mobile view of our site, it’s time to finalize some backend settings as we go LIVE.
Now that your site is built let’s review the backend settings of our site. Let’s walk through each of the backend site settings together.
This is where all of the pages or steps of your site live. You can edit or preview a page from here. We land here before entering into the Site Builder. Upon exiting the Site Builder, we also land here.
To use order forms on your site, you must attach a product you have created in Topline OS to your specific page. Products need to be added to the page a viewer will use to checkout and purchase your product.
On Websites, you click the three dots on the top right of the page, then select products. For funnels, you select the step, then select products in the top right tab.
After arriving on the Products tab for a page, we will need to add the Topline OS Product. If one isn’t created in your Sub-Account already, you will need to create one.
Stats will give you insights into the number of page views and opt-ins you have had on your site. In addition, you can see the number of sales and even earnings. Learn more about stats and what they count here: Understanding Stats.
Reveals each transaction that has occurred on your sites. For Version 2 sites, we have moved this to the Payments Tab > then select Orders and Transactions tabs.
Site settings give you the ability to attach your domain, update the default path, add a favicon, and more! Let’s unpack each of these together.
Name - is the name you give your site. This does not appear to your customer, this is for internal use only.
Domain - is the domain you choose to assign to your website. For example: https://topline.com/ is our domain we attach to our Site. Without a domain, people will be unable to visit your site. Unless you use a preview link, but these are uncustomizable and not recommended.
Path - is the default path or extension for your site. It looks like this when used, https://company.topline.com/about-us/ → the “/about” is the path. Each page on a funnel or website will have its own path, and no two pages can be directed to the same path.
Favicon - is the small icon that appears at the top of your browser tabs when someone opens and views your site. You must add a shareable image URL here, after being added, it will load the favicon for all of the pages of your site.
Head tracking code - installs a site-wide tracking code into the header.
Body tracking code - installs a site-wide tracking code into the body.
Payment mode - if you have products attached to your site, then you can automatically switch your payment mode to test or live. Test, allows you to use Stripe testing cards` to fill out the form and then run a test. Great for testing your funnel. However, as you get closer to launch, a live purchase is encouraged - you can always refund yourself.
Image Optimization - will automatically adjust your images to load faster. It is on by default and is generally not recommended to disable it as faster loading times result in a superior page experience for viewers.
Optimize Javascript - Javascript is custom code you can install to run special operations on your sites. Oftentimes, JavaScript can impact loading speeds, enabling this will assist in page loading. The External Javascript will be lazy hydrated for better page load performance.
GDPR Complaint Fonts - depending on your legal needs, GDPR complaint fonts can be enabled, removing all of the fonts, so your site can work to become more compliant with laws and regulations. Always consult a lawyer to ensure you are fully compliant.
Chat Widget - Your chat widget can be customized and set up under Sites > Chat Widget. Enabling this will deploy this chat widget to all of your websites. To deploy on specific webpages, keep this disabled then copy the code to the specific pages you want the widget on. Learn more about your chat widget here: How to Customize the Chat Widget Window on a Website.
To change the name of a step or site as well as the path or extension… In the site builder, you can click the three dots then select settings. Within the funnels, you select the funnel step then select the “Publishing” tab.
From here you can edit the step/site name as well as the path. The path for your a page/site goes at the end of a URL. For example: https://company.topline.com/about-us/ → the “/about” is the path. You can set these, otherwise, we will provide a random one. If the path already exists or is being used on your domain, it will add numbers as you cannot have repeat paths.
We are now ready to publish and use our site! Great job!
Now that we have build our sites and updated all the settings, we are ready to use it to Level Up our business!
A: Global sections are saved sections that you can use across multiple pages. They are unique in that you can use the same section across multiple pages. Further, making any changes to a global section, after saving, will automatically update it to all pages the Global Section is used on. A great example of a scenario to use a global section would be the Header/Footer of your website. Using a Global section as a footer or header enables you to have the same header across all of your pages.
All we need to do is have a section we like, such as a header for our page, then hover over the object, click the Save Icon, name it, select “Global Section,” then click Save. Now we can add this same global section to all of our pages.
Remember, any changes to this Global section, after saving, will update this section in all of the pages it was used. Further, global sections are not automatically placed, you must add them.
To add a Global section, click the “+Add Element” Icon in the top right of your builder. Then select > Global Section > Select your global section.
A: Similar to a Global Section (see above), a Template Section can be saved and then added later within the same webpage or another webpage. Changes made to these sections saved to the Template Section in use will not update the templates or other places the template was added.
A: The term funnel in marketing means a series of websites used to capture leads. Funnels have “steps” that allow you to visualize a series of websites that a potential customer will visit. For example, in a booking funnel, I might have 3 Funnel Steps.
Step 1: Landing Page - where you can offer something for contacts to download in exchange for their contact information.
Step 2: Booking Page - After a contact fills out a form, you will want to thank them but then schedule a call with them. So you have your booking calendar on this step.
Step 3: Thank you Booking Page - After a client booked the call, they will land on this page, showing them the next steps and thanking them for booking.
Funnels usually serve a specific purpose, like offering a lead magnet or booking an appointment. There are many use cases for creating funnels. Whatever the reason, Funnels are a useful way to create a series of websites that contacts navigate through.
A: When editing your site, you may find you want to see the mobile view of your website. Did you know you can see the mobile view of any website on your desktop? Simply right click on the loaded webpage, click inspect, then toggle the view from desktop to mobile. See the red arrow and the images below.
