Image
Element Overview
You can upload or select an image from the WordPress Media Library using this Element. Included in the Image Element are options to set the image size, resize for high-resolution displays, style (default, rounded, circle, thumbnail), alignment, and link/label.
Element Options
Image
1. Click “Add Image”; a modal window displaying the WordPress Media Library of your website will appear. Choose an image from the library of media currently uploaded to the site, or drag-and-drop a new one into the library.
2. Click on any image displayed here to edit the Title, Caption, Alt Text, or Description.
3. Click “Use this Image” to save your selection.
This functionality is available not only in the Image Element, but also as part of the functionality of several other Elements, such as Row, Gallery, and Map. Whenever you see a button labeled “Add Image”, follow the same above steps to choose an image.
Image Size
Choose the size of your image. By default, images will display using the “Medium” size.
Full
The “Full” Image Size will output the image using the full size and resolution of the original image. Be careful of using this option if you are using a very high resolution image with a large file size, as those types of images can take longer to load.
Thumbnail (WordPress Default)
The “Thumbnail” Image Size is a WordPress default and can be customized on a per-site-basis. Check the Settings > Media page from within the WordPress dashboard of your site to find what size images are changed to when using this Image Size. The Thumbnail Image Size includes an option to crop the image to exact dimensions on the Settings > Media page.
Medium (WordPress Default)
The “Medium” Image Size is a WordPress default and can be customized on a per-site-basis. Check the Settings > Media page from within the WordPress dashboard of your site to find what size images are changed to when using this Image Size.
Large (WordPress Default)
The “Large” Image Size is a WordPress default and can be customized on a per-site-basis. Check the Settings > Media page from within the WordPress dashboard of your site to find what size images are changed to when using this Image Size.
Hi Res
The “Hi Res” Image Size takes the “Full” Image Size and downsizes it to 2560px wide while maintaining the original aspect ratio of the image.
Mobile
The “Mobile” Image Size takes the “Full” Image Size and downsizes it to 640px wide while maintaining the original aspect ratio of the image.
Button
Use the button option to add an external or internal link to the image. This will in essence allow the gallery item to have the same functionality as the Button Element in terms of its ability to link to content.
Learn More About Adding Buttons
Element Advanced Options
High Resolution Image
Check this option to output the image at 2x resolution. Use on logos and icons to make images high resolution display-ready. Dimensions will be half the size of the uploaded image.
Image Style
This options allows you to select from four different options for styling the presentation of the image.
Default will display the image using its original shape. For example, if it’s a .jpg, it will be squared off. If it’s a transparent .png, the shape of the .png will be maintained as long as it wasn’t cropped using the Image Size or Image Size (custom) options.
Rounded will display the image with rounded corners.
Circle will display the image cropped within a circle.
Thumbnail will display the image with a light grey border with rounded corners surrounding it.
Image Alignment
By default, images will remain left-aligned. Use this option to control the alignment of the image if you’d like it to be center- or right-aligned instead.
Element Style Options
Every Element has a standard set of style options available to it that allow for margins, padding, background color, CSS classes, and more to be set.