The Code element lets you add your own custom code to a webpage, including unique custom components. It gives you more flexibility when designing your site, so you can create an experience that fits your needs and vision.
General Settings
Element Name/Title
In General Settings, you can see the default name for the element you're currently editing and rename it if you'd like. This is handy when you're working with several elements in your funnel and need to tell them apart quickly.
Open Code Editor
Use the Open Code Editor button to add your custom code to an element. Clicking it opens a pop-up where you can type or paste your code. This lets you customise the look and behaviour of your elements to suit your specific needs.
Spacing Option
There are several spacing options for adjusting your content. The settings only apply to the element you're currently editing. For example, if you're editing a particular Row (the blue box), only the content in that row will be affected by your settings.
- Padding Left, Right, Top, and Bottom: These four toggle bars move the content left, right, up, or down depending on which you adjust.
- Margin Top and Bottom: Adjust the relevant toggle bars to change the top and bottom margins of your element.
Advanced Settings
Visibility
Visibility lets you control whether specific elements appear on mobile, desktop, or both, by selecting the relevant icon. This lets you tailor your page to your audience and optimise the experience for each device.
Custom Class
Add a custom class to your page by entering your class name in the field provided. This lets you apply custom styles to specific elements by linking them to definitions in a stylesheet.
CSS Selector
Copy the CSS selector code by clicking the copy icon on the right side of the reference code. This saves time when you need to use the same selector across your page.
The Code element gives you full control over your site. Tweak designs, adjust spacing, and add your own code to make it work exactly the way you want.