Editor : Icon Element Overview

Robert Paisley

This article will cover information on the Icon element. The Icon element is one of the General type elements in the page editor.

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 Group, or type Icon in the Search Elements Field.

 

Icon element menu in editor

 

You can click on and hold the element to drag it into position.

Icon Element Menu

 

  • Move

    Move icon

    Clicking and holding the move icon will allow you to drag the element to a new location on the page.

  • Element Name

    Element name icon

    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

    settings icon

    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

    Clone icon

    The clone icon will duplicate the currently selected element and place it below the current element.

  • Coding

    Custom Coding Element icon

    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

    Trash Icon

    Clicking on the trash icon will delete the element from the editor.

Icon Element Settings

  • Layout Path

    Element Settings tab image

    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

    Icon picker menu


    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.

Icon

  • Icon Picker

    This field is used to pick the icon before or after your text.

  • Link to action

    Icon size fields for desktop and mobile

    This field is used to pick the icon before or after your text.

  • Icon Size and Icon Size Mobile

    Set the icon size for both desktop and mobile viewing with these sliders. If you wish the mobile icon size to be different than the desktop icon size, click the link icon to separate the two settings.

Padding

  • Top padding

    Top padding slider and field

    The top padding slider is used to set the space from the top of the element box to the materials displayed in the element box.

  • Bottom padding

    Bottom padding slider and field

    The bottom padding slider is used to set the space from the bottom of the element box to the materials displayed in the element box.

  • Left + right padding

    Left and right element space slider and field

    The side padding slider is used to set the space from the left and right sides of the element box to the materials displayed in the element box.

Typography

  • Icon Color

    Icon color selector

    Displays the normal font color in the element. Setting a color here overrides the general text typography settings.

  • Align

    Icon Alignment selector

    Select the alignment of the text within the element box, left margin, centred, or right margin alignment.

  • Opacity

    Icon opacity slider and field

    Opacity will allow you to set the transparency of the text from invisible to full strength.

  • Background Color

    Icon element background color selector

    Displays the bold font color in the element. Setting a color here overrides the general text typography settings.

Text Shadow

 

Text Shadow Setting toggle

Toggling the text shadowing setting will open the following settings below.

  • Offset-X

    X axis shadow offset slider and field

    Set the shadow from directly beneath the text and move to the right. You can enter negative numbers in the field to have the shadow move to the left.

  • Offset-Y

    Y axis shadow offset slider and field

    Set the shadow from directly beneath the text and move it below. You can enter negative numbers in the field to have the shadow move above the text.

  • Blur

    Blur shadow slider and field

    The sharpness of the shadow can be set sharp to blurred using this slider.

  • Color

    Shadow color selector

    Shadow color can be assigned using this field.

Advanced Settings

 

Animation Toggle

Animation

The animation section of the settings will allow you to add dynamic movement to your page.

 

Style

Animation style drop menu

You can select the style of animation to be applied to your element from the dropdown list.

 

  • Trigger

    Duration  slider and field

    Select the trigger type that will start the animation.

  • Duration

    Duration is the amount of time it will take for the animation from start to completion in milliseconds.

  • Delay

    Delay slider and field

    Delay is how long the animation will start after the trigger is set.

  • Animate Once and Preview Animation

    Animate one check box and preview animation button

    This check box will stop the animation from being triggered multiple times. Clicking on the “Preview animation” button will allow you to see the animation in the editor.

Advanced

  • Dynamically populated

    Dynamically Populated toggle

    This setting allows the use of variables in double curly brackets like {{blog.url}} or {{course.url}}.

  • Render Conditions

    Conditions Settings image

    Adding conditions to a section, row, or element will allow for custom page renderings based on the conditions set.

  • Icon Action

    On click icon action menu

    Set the icon element's “On Click” action to link the button to one of the following actions:

  • Submit Order / Submit Form
    Captures input field information and moves to the next page in the funnel.

  • Open the pop-up
    This action opens the pop-up on the page.

  • Show or Hide

    Hide and show drop menus

    Shows or hides the elements you select.

  • Scroll to Page Section
    Scrolls the current page to a designated section, row, or element of the current page.

  • Go to another page
    This directs customers to another page. Be sure to use https:// URL or Custom Action Link.

    • Open in new window
      Select this option if you would like the next page to be displayed in a new window.

  • Close the Pop-Up
    Closes the pop-up on the page.

  • Custom Attributes

    Custom Attributes Menu

    This setting will allow for creating custom attributes or to be able to add data-title attributes for sections, rows, and elements. The use of a data title is a reliable way to make reusable custom code for both CSS and JS to affect the page.

Views and Trash

 

Visibility menu selector
  • 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 mobile version of the page.

  • The Eye with a Line icon will hide the element on all views. You can use the Layout Menu in the editor 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.