Media Accordion

Author: Jimmy 232 views

Introducing our revolutionary Media Accordion element—a dynamic and versatile solution designed to elevate your content presentation! Seamlessly combining the power of images and videos, the Media Accordion offers an engaging and interactive user experience. Effortlessly showcase your visual content in a sleek, accordion-style format that captivates your audience’s attention.

1. Content

1.1 Banner items

You can add, duplicate or remove banner items here, each items have these options:

Media: Choosing the source as an Image, Custom video link, or Uploaded video.
Content: Allow you to change the Heading and Sub Heading text.
Button: Options for the button like the button label, button link or ID and icon.

1.2. General

We have the option to choose whether the item is open on hover or by clicking, setting the space between the items, or showing the media type button. When the “Show media type button” is clicked, these options will be present:

Video button icon: Allow you to change the video button icon.
Video button label: Allow you to change the video button label.
Image button icon: Allow you to change the icon button icon.
Image button label: Allow you to change the image button label.
Open lightbox when click into: You can choose to have the lightbox open for the whole item or only for the media button.
Full width on mobile: This will make the accordion switch to a full width slider with navigation to switch between the items.

2. Design

All the Design options are relatively the same with Desigon options like:

Alignment: You can flexibly change the position of the text.
Width: The width of the button can be set here.
Typography: Change the style of the text.
Text Shadow: Choose a color > Adjust the position of the shadow using the horizontal and vertical attributes.
Box Shadow: Set the shadow for the text/button content.

You are also allowed to change Image fit, Overlay, CSS Filters, Width, text color, background, border, border radius, and spacing for both Normal and Hover.