This article will cover information on the Custom JS / HTML element. The Custom JS / HTML element is one of the General-type elements in the page editor. When crafting your site, you may wish to include a Custom JS / HTML (Javascript / Hypertext Markup Language) element. This element, which allows the use of on-page custom code, can allow for functions that do not exist as part of the core ClickFunnels tool suite.
Because of the unpredictable ways that custom code can interact with existing tool suite code, ClickFunnels cannot provide support for custom code and recommends working with a developer when creating or troubleshooting code.
This element can be found in the Elements menu by mousing over a current element on the page and clicking on the orange “Add Element” button. You can scroll through the menu to locate it, click on the General Element Group, or type “Custom” or “Custom JS” in the Search Elements field.
You can click and hold the element to drag it into position.
Custom JS / HTML Element Menu
Move
Clicking and holding the move icon will allow you to drag the element to a new location on the page.
Element Name
This is the name of the currently selected element. The name given will be the default name of the element. You can change the name in the CSS info of the Coding menu.
Settings
Clicking on this gear icon will open the individual settings of the element. Each element has specific settings based on its functions. Please check the Settings section below for further information.
Clone
The clone icon will duplicate the currently selected element and place it below the current element.
Coding
Custom CSS can help you extend the design of each section on your page to meet your needs both visually and functionally. As the code requires, you can add coding to one of three areas: CSS, Header, or Footer.
The CSS Info for the element is on the right of the CSS window. The title of the element can be changed in the title field to allow for easier identification.
Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes. Instead, you can submit a request for help in the Coding section of our Community or reach out to the code provider for support.
Trash
Clicking on the trash icon will delete the element from the editor.
Custom JS / HTML Element Settings
Layout Path
This section of the settings will tell you where the current element is located within the page's layout.
Element title
The current element's title is located at the top left of the settings. The element's title can be changed via the coding button.
Coding button
The Coding button will open the page coding menu. Opening the coding menu will allow you to add codes to your pages and change the element's title for easier searching.
Settings Menu
Top margin
The top margin slider is used to set the spacing between the top of the current element and the bottom of the element above it. Entering a negative number in the field will cause the lower element to overlap the top element.
Open Code Editor
Clicking this will open a Text Editor Popup where you can insert your code.
Text Editor Popup (Also known as the “Code Editor”)
You can insert your code within the Text Editor Popup.
Text Editor/Code Editor Popup Expander
Located within the Text Editor Popup, on the right-hand side and shaped like two diagonal arrows pointing away from each other. Clicking on the expander will make the popup full screen for more visibility when entering code.
Text Editor/Code Editor Popup Minimizer
Located within the Text Editor Popup when it is fully expanded, on the right-hand side, and shaped like a minus sign. Clicking on the minimizer will make the editor smaller to the size of the original popup.
Text Editor/Code Editor Popup Exiter
Located within the Text Editor Popup, both when it is fully expanded or not, on the right-hand side and shaped like an X. Clicking on the exiter will close the Text Editor Popup and return you to the ClickFunnels Page Editor.
Advanced Settings
Animation
The animation section of the settings will allow dynamic movement to be added to a page.
Style
Select the style of animation to be applied to the element from the dropdown list.
Trigger
Select the trigger type that will start the animation.
Time Function
This option will change the timing of the animation.
Play Direction
This option will change the direction in which the animation will play.
Duration
Duration is the time it will take for the animation from start to completion in milliseconds.
Delay
Delay is how long after the trigger is set to begin the animation.
Animate Once
This check box will stop the animation from being triggered multiple times.
Loop
This option will loop the animation of the element.
Preview Animation
Clicking on the “Preview animation” button will allow the animation in the editor to be seen.
Advanced
Dynamically populated
Dynamically populated allows the use of variables in double curly brackets like {{blog.url}} or {{course.url}}.
Advanced CSS
Position
The position of the CSS added to the element can be changed here.
Z Index
The Z index of the CSS added to the element can be adjusted here by moving the slider to the left or the right, or by entering a number to the right of the slider.
Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes or code within the coding windows.
If assistance in coding is required, please submit a request for help in the Coding section of our Community or reach out to the code provider for support.
Render Conditions
Adding conditions to a section, row, or element will allow for custompage renderings based on the conditions set.
Custom Attributes
This setting will allow for creating custom attributes or adding data-title attributes for sections, rows, and elements. Using a data-title is a reliable way to make reusable custom code for both CSS and JS to affect the page.
Views and Trash
-
The All icon sets the element to be visible on both Desktop and Mobile versions of the page.
-
The Desktop icon will set the element to only be visible on the desktop version of the page.
-
The Mobile icon will set the element to only be visible on the page's mobile version.
-
The Eye with a Line icon will hide the element on all views. The Layout Menu in the editor can be used to locate hidden elements.
-
The Trash icon will delete an element from the page.
If you have any questions about this, please contact our Support Team by clicking the Submit a Request button at the top right-hand corner of this page and then the Help button at the bottom left of the ClickFunnels Page.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article