Customizing your Funnel or Website Builder is essential for creating a professional and engaging user experience. Each element in the builder comes with various settings that allow you to adjust appearance, structure, and behavior. This guide will walk you through the General and Advanced settings available for managing sections, rows, columns, and elements.

Accessing Settings #

There are three ways to access settings for any section, row, column, or element:

• Click on the Settings icon attached to each area box (GREEN, BLUE, LILAC, and ORANGE).
• Click on the element itself.
• Use the Show Settings button to open the settings panel.

All these methods direct you to the Settings Panel, which is divided into General Settings and Advanced Settings for Sections and Rows, and General, Animation, and Advanced for Elements.

General Settings #

This is where the majority of the edits are made.

• Element Name/Title: Here you will see the default name/title of the Edit option you are working on. You can decide to leave it at that or rename it.
• Margin: Adjust the top or bottom margin of your content using toggle bars.
• Padding: Move content left, right, top, or bottom by adjusting the four padding toggle bars.
• Background Color: To change the background color of a specific edit option, such as the Section, Row, Column, or Element, simply click on the content that you want to adjust the background of.
• Sticky: You can use the Sticky option to choose whether your Sections will remain at the top or bottom of the page when you scroll down.
• BG Media Type: You can select between image and video type here.
• BG Media: To add a background image, click on the image button on the right side of the BG image box, upload or select an image, and copy the URL from the right upper corner of the page to add it.
• Allow Row to Take the Entire Width: Toggle this button to activate the full width for the Row option.

Advanced Settings #

In advanced settings, you will have options for borders, visibility, custom classes, and CSS selectors.

• Box Shadow: Adding a box shadow can also make the border visible on a box.
• Border Option: Customize borders by selecting style, width, color, and radius.
• Style: Choose the type of border (e.g., solid, dashed).
• Width: Adjust the thickness of the border.
• Color: Select a color for the border.
• Visibility: To customize the visibility of an Edit option, select the icon to highlight either mobile devices, desktops, or both.
• Custom Class: You can also input your custom class in the Custom Class field.
• CSS Selector: If you need to copy the Custom CSS, select the Copy icon located on the right side of the reference code.

With the right tools at your fingertips, tailoring your funnel or website to perfection is easier than ever. Dive into General and Advanced Settings to tweak spacing, borders, visibility, and more, ensuring every detail reflects your brand’s unique style. These customization options let you craft a polished, professional design that not only looks great but also delivers an exceptional user experience.

Frequently Asked Questions #

How do I open the settings for an element? #

You can click the Settings icon on the area box, click the element itself, or use the Show Settings button. All three open the Settings Panel.

What is the difference between General and Advanced Settings? #

General Settings handle most edits like naming, spacing, background, and sticky behavior, while Advanced Settings cover borders, visibility, custom classes, and CSS selectors.

How do I make a section stay in place while scrolling? #

Use the Sticky option in General Settings to keep a section pinned to the top or bottom of the page as users scroll.

Can I show or hide elements based on the device? #

Yes. The Visibility option in Advanced Settings lets you display an element on mobile, desktop, or both.

How do I adjust spacing around my content? #

Use the Margin toggle bars to control space outside the element and the Padding toggle bars to control space inside it.

How do I apply custom CSS to an element? #

Enter a class name in the Custom Class field, or copy the element’s CSS Selector using the Copy icon next to its reference code.