What Is The Image Module?
We make it easy to add images anywhere on your landing page! Simply select the image module, choose from the images you have uploaded to the asset manager & there you have it! Image modules can be placed in any column of a Row on your landing page, and their size will be adjusted to fit.
How to add the Image Module
Add an image to your page by clicking the grey (+) module button. The Settings box will automatically appear. Here you have the option to either enter an image URL or upload an image from your Asset Manager.
The content options of your image module consist of 3 sections:
Add your image URL or Upload an image from your Asset Folder
Add a lightbox to your image or link the image to a URL. The lightbox will only display if padding is added under the Design Settings.
If you added a link in the above option, always have the link open in a new window so that the client is navigating away from your site. You can have the image work as a button that will link to another page on your site.
The design options will allow you to change the appearance of your image module to match the appearance and tone being used on your landing page. You’ll be able to make changes to the following aspects of your module:
Set your image9s) to align the left, center or right of your row. You can also choose how your images will appear on a mobile screen.
Images will automatically size to the full width of the module. However, their size can be adjusted using the slider.
Here you can choose to add spacing below your pictures automatically or opt to set custom margins (the spacing on the outside of the image) or custom padding (the space directly around the image).
By clicking on the mobile phone next to margin or padding, you can set these options specifically for mobile, desktop or tablet devices.
Here you can choose to set rounded corners on your image, or pick a border style, color and width.
Select what type of shadow (if any) you would like displayed behind your image.
Define your color saturation, the contrast of light and dark areas, add a sepia filter or blur your image. Lots of options for filters in this section. Blend Mode allows you to modify how your image blends with any other layers beneath it. Choose “normal” to return to the default option.
Pick an animation style to enable animations for your image module. Each animation will allow you to customize it further, controlling duration, direction and intensity.
Want to make some changes that may require some additional coding? Look to the advanced tab to make changes to the way your image is being seen by your visitors.
CSS ID and Classes
Add additional CSS Styling by using IDs or classes. These can also be used to create links to particular sections of your page.
The Advanced tab also allows for you to further design your blurb module by adding custom CSS that you can enter based on the field of depth options available to you (Before, Main Element, and After).
Here you can define the HTML ALT text for your image using a short description. This section can also be beneficial for leveraging SEO Content.
This option allows you to control which devices can view your image. You can decide to disable the visibility for phones, tablets, and browser windows by checking the box next to the devices you’d like to exclude.