The Imager(called “Image box” in the Selection pack) widget allows you a quick and easy way to create custom animated boxes with images or photos as well as display post category or WooCommerce products. Along with this, you can manage the box display layout according to your needs by ordering or adding/deleting elements. The plugin supports text overlay on an image and has all appropriate settings to build a responsive block with animated info boxes. This lightweight tool can present your content on your website in a quality and professional way.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
On the Content tab of the Imager widget, you can manage the basic settings of the box such as the number of columns, source, image box layout, display style and more.
General
The section with basic settings of the image block.
Columns
Specify the number of columns to display in one row for different devices. Available values from 1 to 10 columns.
Source
Select which type of source you want to use for the info box:
- Custom – an option allows you to create custom image/info box with the necessary content for each of them. Once you select this source, a new “ImageBox” section with settings is displayed on the Content tab, where you can add and configure the required number of elements.
- Posts – an option that allows you to display posts of a certain category as the animated info boxes. To do this, you need to create posts, fill in the appropriate fields and assign it to a specific category. After that, select the category in the current settings.
- WooCommerce – an option that allows you to display WooCommerce products of a certain category as the animated info boxes. To do this, you need to create products, fill in the appropriate fields and assign it to a specific category. After that, select the category in the current settings.
Type
The option allows you to choose different display styles for the image box:
- Overlay – an option allows content to be displayed over the image.
- Card – an option allows content to be displayed below the image as a regular card.
Animation block settings
- Image Hover – an option allows you to add hover animation to the image. There are more than 10 types of animation provided. Each of the types (except for the Default one) has additional settings where you can adjust the Animation Duration, Animation Delay or Transform Origin.
- Text Hover – an option allows you to add hover animation to the content of the image box(Overlay type). There are four types of animation provided. Each of the types (except for the Default one) has additional settings where you can adjust the Animation Duration or Animation Delay.
- Tilt on hover – a toggle to enable/disable tilt on hover feature.
Link Type
The option allows you to apply a link to a specific box element. The available types are Box, Title. Select Note to disable the link.
Layout
The section where all elements of the image box layout can be added, configured and ordered.
Alignment
Manage elements alignment of the box layout for different devices.
Priority
Add layout elements and order them according to your needs.
To add a new box element, click “Add Item” and select one of the available item types: Image, Title, Description, Price, Date, Category.
ImageBox
Add and manage the box with the necessary content. The section is available when the source “Custom” is selected in the general Imager widget settings.
To add a new box, click “Add Item” and fill or edit all the fields.
- Choose Image – select image from media library for a new info box
- Title – a field to enter the title of the info box
- Description – a text area to enter the description of the info box
- Date – specify the date by choosing in the calendar
- Show category – a toggle to enable/disable the category field.
- Show link – a toggle to enable/disable the link field where you can enter the URL link
Style tab
On the Imager widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Grid
The section of the Imager widget with general box styles that will be applied for the entire box layout of the current block. To configure separate box elements like title, description or other, go to the appropriate settings section.
- Column spacing – specify the column spacing for the items of the info box.
- Row spacing – specify the row spacing for the items of the info box.
- Margin – the setting allows managing the margin of the box elements in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the box elements in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Title/Description/Category/Date
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Image
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- CSS filter – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
Advanced Tab
The settings in the advanced tab of the Imager widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.