Top Tool Bar in the Funnel Builder
The top tool bar of the FG Funnels funnel and website builder holds the tools that you will need for the funnel page over all. This tool bar is split into three rows. This article covers the functions of each feature broken down by row. This is not meant to be a comprehensive tutorial for each feature. Instead, if there is a further tutorial for an icon, it will be linked in the related icon.
In This Article:
Top Row
Back
The Back button brings you back to the funnel or website overview page with a list of all of the pages. By clicking the Back button, you are leaving the funnel builder.
Last Saved
The Last Saved text is to the right of the back button and indicates the last time the page was saved.
Preview
The Preview, represented by the eye icon, is the left most icon on the right side. It represents a preview. Clicking this icon will save the page and 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
The save button saves the funnel page with the most recent changes you have made. These changes will not be published to the live site unless you hit the publish button to the right. This means your site visitors will not see any of the changes made on this version until they are published.
The save button is helpful for when you are making a lot of changes, need someone else to review them or need to come back to them. This saves changes but does not affect the live site view before you are ready.
Publish
The publish button pushes your changes and adjustments to your page to the live site. If you do not have a domain attached to your funnel, the publish button will ask you to select a domain.
After clicking publish, all changes/additions/deletions you have made to your page will be reflected on your live site.
Middle Row
Left Side
Add Element
The Add Elements icon is a plus sign which brings up a panel that allows you to add sections, rows, and elements. You can also access your global sections and section templates from Add Elements.
Finally, you can view prebuilt sections and pre-styled versions of some elements from Add Elements.
Layers
Layers help you view all of the various objects and how they are nested within the website object hierarchy.
The layers icon is three squares on top of each other. This brings up the layers panel which allows you to see a list of all of your sections, rows, columns and elements on the page.
The layers panel also shows whether the item is visible only on desktop or mobile, visible on all devices or hidden all together. This is helpful when you have misplaced an object or hidden it from both mobile and desktop view.
You can use the layers panel to hide items, select items, clone items, delete items and save sections by clicking the three dots to the right of the item name.
Pages
The pages icon looks like a piece of paper with lines of writing on it. Clicking the pages icon will bring up the pages panel. The pages panel allows you to view the names and order of all of the pages in your funnel or website.
Clicking on a different page name will open that page in the builder. This gives you the ability to quickly move between pages.
Tracking Code
The tracking code icon looks like two arrows with a slash through them. This is where you can add tracking code from third parties like Facebook or Google Analytics that need to go on one specific page in your funnel either in the header or footer. There is more information about tracking codes in this article, Tracking Scripts/Pixel Code.
Custom CSS
The Custom CSS icon is represented by a paintbrush. Clicking the icon will bring up the custom CSS panel where you can add new custom CSS or edit existing Custom CSS.
Typography
The typography panel is represented by a T inside of a square. The typography panel will let you specify a headline font for the page and a content font for the page. It will also let you specify the default text color and the link color.
Background
The background icon looks like three circles overlapping in the shape of a triangle. The background icon will open a background panel where you can set a background image or color for the whole page that goes behind any section, row or column backgrounds you have set.
Popup Settings
The popup settings icon looks like a square with a horizontal line about 1/3 of the way down the icon. This will bring up the popup for the page where you can build the popup and adjust settings.
For more information about popups you can visit this article - COMING SOON.
SEO Metadata
The SEO metadata icon looks like a piece of paper with a magnifying glass in the bottom right hand corner.
This is where you can set the page title, description, custom meta tags, and social image for use on social media and for search engines. In addition, your page title will show in the tab of your browser, when you share your link and more.
More information can be found in the article, SEO Meta Data.
Preview Custom Codes
The Preview Custom Codes button is a square icon with an arrow and a line inside. 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.
Cookie Consent
The cookie consent icon looks like a partially eaten cookie. Clicking this icon will allow you to turn on a cookie consent banner and adjust the cookie consent banner to your liking.
Mode Switcher
The mode switcher icon looks like a square with a vertical line down the middle. When you are using the builder you can choose to have the right options panel 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 options panel on the right.
Middle
Page Name and Page Switcher
The page name and page switcher displays the name of the current page. Clicking on the name of the page will bring up the page panel which lists the other pages in your funnel or website. Clicking on one of the other page names will open that page in the builder.
Desktop Mode
The desktop mode icon is selected by default and shows the builder in desktop mode to show how the page will look on computers and large devices. Any device specific settings that are set in this view will apply to larger devices.
Mobile Mode
The mobile mode icon can be selected to show the builder in mobile mode to approximate how the page will look on phones and other small devices. Any device specific settings that are set in this view will apply to smaller devices and phones.
Please note that mobile mode does not apply any mobile Custom CSS so the view in the builder may not match the view on an actual device. We recommend previewing your page on an actual mobile device before making any substantial changes on mobile view.
All FG Funnels templates have varying degrees of mobile CSS in them so if you see that the mobile view looks off in the builder please preview it on a mobile device before making any changes so you can see the effects that the CSS has.
Right Side
Versions
The versions icon looks like a clock with an arrow point up at the 3 o'clock position. Clicking the revisions icon will open the versions panel. The versions panel will allow you to look back at previously saved versions of your site and restore if needed.
If the page is attached to a domain, the live version will have a green Live badge to the right showing you what version is showing on the domain. This is a great way to see if changes aren't appearing because you haven't pushed them live.
If you do choose to restore an old version, know that the whole page will be replaced and any changes made since more recently than the time of the old version will be removed.
Undo
The undo icon looks like an arrow circling back to the left and allows you to undo the most recent change you made.
*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 version feature, described above, is great for restoring previous versions of the site.
Redo
The redo icon looks like a arrow circling back to the right and allows you to redo the most recent undo you made.
*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 version feature, described above, is great for restoring previous versions of the site.
Options
The options/setting icon looks like two bar sliders on top of each other. This icon allows you to open or close the right hand options/setting panel.
Bottom Row
The bottom row of the toolbar shows the domain that is currently connected to the page and the path directly to the page. If there is no domain connected to the funnel, an FG Funnels preview link will display.
The circle before the domain will be fully blue if the page is connected to a domain and will have a blue outline and a white center if the domain is not connected.
If a domain is not connected, there will be a Connect Domain button next to the preview link that will allow you to attach the domain.