Image Accordion Widget Tutorial

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 fits your needs.

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
Image Accordion Widget for Elementor
Image Accordion Widget for Elementor

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.
    • 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.
Premium Accordion Image Widget Settings for Elementor
Available Options in Elementor Image Accordion Widget Tab

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
Elementor Accordion Image Display settings
Elementor Image Accordion Widget Display Options
Skew Option for Elementor Image Accordion Widget
Skew Option for Elementor Image Accordion Widget

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
Premium Accordion Image Widget for Elementor
Elementor Accordion Image Widget Images Styling options

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.
Content Style Options Accordion Image for Elementor
Content Style Options Accordion Image for Elementor

3. Link

Set the styling of the link from this tab. You can set the link color, hover color and its typography.

Link Styling Options for Elementor Image Accordion Widget
Elementor Image Accordion Widget Link Styling Options

4. Container

Adjust the container style from here. It contains different options such as border type and radius, box-shadow and margin.

Elementor Image Accordion Widget Container Styling Options
Elementor Image Accordion Widget Container Styling Options

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.