Editor : Module Image Element Overview

This article will cover information on the Module Image element. The Module Image element is one of the Course Module-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, and click on the Course Module Element Group. or type “Module Image” in the Search Elements field.

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

Module Image 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

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. Would you please 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.

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

Size & Position

Ratio

Ratio selection will allow you to display your image in the manner you wish. When selecting one of the first four selections, an Image Size slider will open below the Ratio menu to set the size of the image in pixels.

Image Size

The Custom setting will allow you to set the image width and height manually.

Fit

The Fit setting will help align the image within the Element. Selecting “Contain” or “Scale-down” will open a secondary location setting menu to allow for a more refined placement. You can select the image location in the element box in the second menu by clicking on the dot.

Blur Image on load

When this box is selected, the image will show blurred on the initial load, then become clear within a second

Lazy loading

Lazy loading is the practice of delaying the load or initialization of resources or objects until they're actually needed to improve performance, save system resources, and speed up page loading.

Link Action or URL

Add an action or a hyperlink to a URL to the image to be triggered if a client clicks on the image.

Align

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

Padding

Top padding

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

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

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

Corners

Toggling the Corners menus will open the following settings to set the corner roundness.

Border Corners Radius

Use this border radius to set the amount of curve for the corners.

Separate Edges

Enabling will allow you to set a different radius for each corner.

Borders

Toggling the borders settings will open the following settings below:

Style

Set the style for the element text with the preset sizes or the custom choice by selecting the three dots.

Separate

Using this setting will allow you to add or remove the sides of borders as you wish.

Border Style

You will have three choices for borders: line, dash, or dotted. These will affect all borders and cannot be separated.

Color

Displays the color of the border.

Stroke Size

Select the thickness of the border.

Shadow

Toggling the Shadow setting will open the following settings below:

Style

Toggling the Text Shadowing setting will open the following settings below:

Offset-X

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

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

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

Spread

Controls the thickness of the shadow around the element.

Color

Shadow color can be assigned using this field.

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 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 custom page renderings based on the conditions set.

Collection Settings

Items per row

This option will change how many rows of blog posts will be displayed within the element.

Items per page

This option will determine how many blogs will display within the element.

Hide pagination

This option will hide the pagination within the element.

Pagination item color

This option will control the color of the numbered pages that are not currently selected as seen in the example below:

Pagination item background color

This option will control the background color of the numbered pages that are not currently selected, as seen in the example below:

Pagination border color

This option will control the color of the borders surrounding the numbered pages that are not currently selected, as seen in the example below:

Pagination active item color

This option will control the color of the number of the currently selected page, as seen in the example below:

Pagination active item background color

This option will control the background color of the numbered page that is currently selected, as seen in the example below:

Pagination active border color

This option will control the color of the borders surrounding the numbered page that is currently selected, as seen in the example below:

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.