Order Bump Element Overview

Robert Paisley

This article will cover information on the Order Bump element. The Order Bump element is one of the Product-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 Product Element Group or type Order Bump in the Search elements Field.

Screenshot_of_ClickFunnels_-_Sites__15_.jpg

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

Order Bump Element Menu
Screenshot_of_ClickFunnels_-_Sites__16_.jpg

  • Move
    Screenshot_of_ClickFunnels_-_Sites__3_.jpg
    Clicking and holding the move icon will allow you to drag the element to a new location on the page.
  • Element Name
    Screenshot_of_ClickFunnels_-_Sites__17_.jpg
    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
    Screenshot_of_ClickFunnels_-_Sites__5_.jpg
    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
    Screenshot_of_ClickFunnels_-_Sites__6_.jpg
    The clone Icon will duplicate the currently selected element and place it below the current element.
  • Trash
    Screenshot_of_ClickFunnels_-_Sites__7_.jpg 
    Clicking on the trash icon will delete the element from the editor.
  • Coding
    Screenshot_of_ClickFunnels_-_Sites__85_.jpg
    Screenshot_of_ClickFunnels_-_Sites__2_.jpg
    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. Would you please submit a request for help in the Coding section of our Community or reach out to the code provider for support?

Order Bump Element Settings

Layout Path

Screenshot_of_ClickFunnels_-_Sites__18_.jpg

This section of the settings will tell you where the current element is located within the page's layout.

Element title

Screenshot_of_ClickFunnels_-_Sites__19_.jpg

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

Screenshot_of_ClickFunnels_-_Sites__40_.jpg

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
Screenshot_of_ClickFunnels_-_Sites__41_.jpg

Top margin
Screenshot_of_ClickFunnels_-_Sites__9_.jpg
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. 

Advanced Settings
Screenshot_of_ClickFunnels_-_Sites__22_.jpg

Animation
Screenshot_of_ClickFunnels_-_Sites__23_.jpg

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

  • Style
    Screenshot_of_Headline_Element_Overview.jpg
    You can select the style of animation to be applied to your element from the dropdown list. 
  • Trigger 
    Screenshot_of_Headline_Element_Overview__1_.jpg
    Select the trigger type that will start the animation.
  • Duration
    Screenshot_of_ClickFunnels_-_Sites__48_.jpg
    Duration is the amount of time it will take for the animation from start to completion in milliseconds. 
  • Delay
    Screenshot_of_ClickFunnels_-_Sites__49_.jpg
    Delay is how long after the trigger will it take for the animation to start. 
  • Animate Once
    Screenshot_of_ClickFunnels_-_Sites__3_.jpg
    This check box will stop the animation from being triggered multiple times. 
  • Preview Animation
    Screenshot_of_ClickFunnels_-_Sites__50_.jpg
    Clicking on the Preview animation Button will allow you to see the animation in the editor.

Views and Trash

Screenshot_of_ClickFunnels_-_Sites__45_.jpg

  • 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.