Element Settings: Course Lesson Image Settings

In this article, we will talk about the Course Lesson Image settings. The Course Lesson Image element loads the image associated with that specific lesson, and these settings will help you set some attributes to it, such as adding a link or setting the horizontal alignment. 

Requirements: 

• An active ClickFunnels 2.0 account
• A ClickFunnels course
• The Course Lesson Image element

Table of Contents:

• Blur image on load
• Lazy loading
• Quality
• Resize width
• Link action or URL
• Target
• Align

Blur image on load:

When the Blur image on load box is selected, the image will show blurred on the initial load, then become clear as soon as it completely loads.

Back to Top

Lazy loading:

The Lazy loading feature delays the image load or initialization of resources or objects until they're needed to improve performance, save system resources and speed up page loading.

Back to Top

Quality:

The Quality setting allows you to set a specific image quality to load. It is based on a percentage compared to the original image and can help improve page performance if set.

Back to Top

Resize width:

The Resize width feature allows you to set a maximum width to generate the image. 

Back to Top

Link action or URL:

The Link action or URL feature lets you turn the image into a clickable link that opens the specified URL. This can be a link to an external website by including the full URL with “http” or “https,” e.g., “https://www.google.com/.” Or it can be a custom action sent to the active page, e.g., “#top.”

Back to Top

Target:

The Target setting determines if the Link Action or URL specified will open in the same window or a new web browser tab.

Important Note: This setting is only available if a  value is typed into the Link Action Or URL field.

• Same Window: This will have the Link Action or URL open in the same browser window and same tab.
• New Tab: This will make the Link Action or URL open in a new web browser tab.

Back to Top

Align:

The Align setting controls where the image will be placed along the horizontal space within its container (row or column).

Important Note: The image width must be smaller than the container’s width to see the effect.

Back to Top

Supported Elements:

This setting can be found in the following Elements: 

• Course Lessons Element: Image

Back to Top