Intro
Image Accordion Widget for Elementor Page Builder will allow you to show-off multiple images with an accordion effect. It is fully responsive and contains a lot of customization options so you can control the widget in a way that
Click here to check Image Accordion Widget demo.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Accordion
- Display Options
1. Accordion
- Images: You can add multiple images at a time to display using the image accordion.
- Upload Image: Upload the image or you can use any image from the media library.
- Size: Set the size of the image. You can choose from the following 4 options:
- Auto
- Contain
- Cover
- Custom: Set the width of the image manually. You can drag the bar/slider to set the width or you can enter it as a value. Also, you can choose from PX, EM, %, or VW.
- Position: Set the position of the image. You can choose from the following options:
- Center Center
- Center Left
- Center Right
- Top Center
- Top Left
- Top Right
- Bottom Center
- Bottom Left
- Bottom Right
- Repeat: Set the repeat option if you don’t want the image to be cropped. You can choose from the following options:
- Repeat
- No-Repeat
- Repeat-X
- Repeat-Y
- Content: (Enable/Disable) This option allows you to add an Icon, Title, and Description to each image separately.
- Content Type: This content will be visible when the visitor hovers on image. Select an existing Elementor template, or you can select Custom Content.
- Elementor Template:
- You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
- You can also select an existing Elemntor templates.
- Custom Content:
- Icon: (Enable/Disable) Add an icon from a list of Font Awesome icons.
- Title: Add a title to the image.
- Description: Add a brief description of the image.
- Custom Position: Set the content position [Icon, Title, and Description] within the image area.
- Horizontal Offset: Set the horizontal offset of the content. You can drag the bar to set the offset or enter the value. You can choose from PX, EM, or %.
- Vertical Offset: Set the vertical offset of the content. You can drag the bar to set the offset or enter the value. You can choose from PX, EM, or %.
- Link: Add a custom link or select an existing page link.
- Link Type: Select the link type, choose between URL or Existing Page.
- Link: Add the URL in the text box.
- Link Title: Add the link title.
- Whole Image link: [Enable/Disable] The whole image will be linked.
2. Display Options
- Hovered By Default Index: Set the index for the image to be hovered by default on page load, the index starts from 1.
- Direction: Set the accordion direction of the images, horizontal or vertical.
- Skew Images: Enable or disable skew images option. Click here to check the 3rd section in the demo page.
- Skew Direction: Set the skew direction, left or right.
- Image Height: Set the height of the image. Drag the bar to set the height or enter the value. You can choose from PX, EM or VW.
- Content Vertical Position: Set the verticle position of the content, top or middle.
- Content Alignment: Set the alignment of the content to be centered, aligned right or left.
- Hide Description Below Width (PX): Set screen width below which the description will be hidden
Style
- Images
- Content
- Link
- Container
1. Images
Set the image style as normal or hover.
- Overlay Color: Add the overlay color of the image. You can also set the opacity of the overlay color.
- Overlay Hover Color: Add the overlay color of the image on mouse hover. You can also set the opacity of the overlay color.
- CSS Filters: Apply CSS filters. You can use the following options:
- Blur
- Brightness
- Contrast
- Saturation
- Hue
2. Content
There are three tabs in the content i.e. icon, title, and description. You can click on any of these tabs to adjust the styling of the particular property.
- Icon: Customize the icons you used in the Image Accordion Widget like color, hover color, background color, background hover color, box-shadow, etc. You can also set the icon size, border styling, width, height, padding, margin, etc.
- Title: Customize your title from this tab as you can set the color, typography, text shadow of the title. You can also adjust the margin and padding from here.
- Description: This tab has the same styling options as the title tab.
3. Link
Set the styling of the link from this tab. You can set the link color, hover color and its typography.
4. Container
Adjust the container style from here. It contains different options such as border type and radius, box-shadow and margin.