Element Settings: Size & Position

This article will discuss the Size and Position settings for elements on your pages. These settings control the amount of space an element will occupy on the page.

Requirements:

• An active ClickFunnels 2.0 account.
• A page with at least one of the supported elements

Table of Contents:

• Ratio
• Image Size
• Image Width
• Image Height
• Fit
• Position
• Align

Ratio:

This setting locks the aspect ratio of an image.

Important Note: Clicking on one of the preset options here will disable the individual Image Width and Image Height settings.

1. Rectangle (3:2)
   
2. Landscape (16:9)
   
3. Portrait (9:16)
   
4. Square (1:1)
   
5. None

Back to Top

Image Size:

This setting will only appear if you use one of the preset Ratio settings. Changing the Image Size will scale the image up or down to a specific size while maintaining the locked aspect ratio. You can switch between a percentage or pixel unit by clicking the unit icon.

To adjust the size, drag the slider or enter a number into the field to the right.

Back to Top

Image Width:

This setting controls the width of an image. You can switch between a percentage or pixel unit or set the width to “auto” by clicking the unit icon.

To adjust the width, drag the slider or enter a number into the field to the right.

Back to Top

Image Height:

This setting controls the height of an image. You can switch between a percentage or pixel unit or set the height to “auto” by clicking the unit icon.

To adjust the height, drag the slider or enter a number into the field to the right.

Back to Top

Fit:

This setting controls how the image should fit into the designated area defined by either aspect ratio and size or width and height.

To change the fit, click on the dropdown menu and select the desired setting.

• Fill: The image is sized to fill the designated area. If necessary, it will be stretched or squished to fit.
  
• Contain: The image is scaled to maintain its aspect ratio while fitting within the designated area.
  
• Cover: The image is sized to maintain its aspect ratio while filling the designated area. The image will be clipped to fit.
  
• Scale-down: The image is scaled to its smallest form as if either none or contain were specified. It will not scale up beyond its original size.
  

Back to Top

Position:

Depending on the Fit, there will also be an option to change the position of the image within the designated area defined by either aspect ratio and size or width and height.

To change the position, click on one of the dots.

Back to Top

Align:

Important Note: This option is only available for the Video Popup element.

This setting will determine where the placeholder image for a Video Popup element will be placed.

To change the alignment, click on one of the alignment options.

Back to Top

Supported Elements:

These settings can be found in the following Elements: 

• General Element: Image
• General Element: Video Popup
• Blog Posts Element: Image
• Download Element: Image
• Course Element: Image
• Course Lessons Element: Image
• Course Modules Element: Image
• Products Element: Image

Back to Top