The Code element empowers you to integrate your personalized code into your webpage, adding unique custom components. This versatile feature allows for greater flexibility and creativity when designing your site, ensuring a tailored user experience that aligns with your needs and vision.

General Settings #

Element Name/Title #

Within the General Settings feature, you can access the default name/title of the Edit option you are currently working on and choose to rename it if you prefer. This feature is particularly useful when you are working with multiple elements in your funnel and need to distinguish them quickly.

Open Code Editor #

You can utilize the Open Code Editor button to input your custom code for your element. By clicking on this button, a pop-up window will appear, allowing you to type in or paste your code with ease. This feature provides you with the flexibility to add custom coding to your web page, enabling you to tailor the look and functionality of your elements to suit your specific needs.

Spacing Option #

There are different spacing options available for adjusting your content. Depending on the Edit option you are working on, the settings will only apply to that option. For example, if you are editing a particular Row (the BLUE box), only the content in that Row will follow the settings you make.

• Padding Left, Right, Top, and Bottom: These four toggle bars move the content to either the left, right, top, or bottom, depending on the toggle bar you click on.
• Margin Top and Bottom: Toggle the respective toggle bars to adjust the margins on the top and bottom of your element.

Advanced Settings #

Visibility #

The Visibility feature allows you to control the visibility of specific Edit options on mobile devices, desktops, or both by selecting the corresponding icon. This feature enables you to tailor your web page to your target audience and optimize the user experience for each device type.

Custom Class #

You can add a Custom Class to your web page by inputting your desired class name into the dedicated field. This feature helps you apply custom styles to specific elements of your web page by linking them to style definitions in a stylesheet.

CSS Selector #

You can easily copy the Custom CSS code by clicking on the “copy” icon located on the right side of the reference code. This feature saves time and makes it straightforward to replicate and implement your CSS Selector code across your web page.

With the Code element, your website becomes a canvas for creativity. This feature puts you in the driver’s seat, letting you tweak designs, adjust spacing, and add custom code to make your site truly your own.

Frequently Asked Questions #

What is the Code element used for? #

It lets you integrate your own custom code into a webpage to add unique components and tailor functionality beyond the standard elements.

How do I add my custom code? #

Click the Open Code Editor button to open a pop-up window where you can type or paste your code.

Can I rename the Code element? #

Yes. Use the Element Name/Title field in General Settings to rename it for easier identification among multiple elements.

How do I control where the Code element appears? #

Use the Visibility feature to display it on mobile, desktop, or both, and use the spacing options to position it.

Can I apply custom CSS styling to the Code element? #

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

How do I adjust spacing around the Code element? #

Use the Padding toggle bars to move content and the Margin Top and Bottom bars to adjust the space above and below the element.