Image Accordion Overview

Getting Started

The recent invention of the DiviFlash has introduced the Divi image accordion module to make designers’ tasks more manageable. This Module is considered one of the most imperative inclusions to the Diviflash plugin. Now, creating an image accordion along with various interactive effects is super easy under the Diviflash plugin. The Divi image accordion module is discovered with several interesting features like child item, accordion & animation setting, great typography, overlay, and suchlike. Moreover, the child item brings various extraordinary features, which work on a particular item. However, the features of the global setting are applicable for the whole container.

Add New Item

Before jumping into the deep discussion of image accordion global features like content, design, and advanced settings, let’s get to know the Child Item first. Child Item written as Add New Item has some attractive features that only decorate certain image items. The design attributes of the child item are separated into three categories like global item-

+ Content Option
+ Design Option
+ Advanced Option

Child Item Content Tab

The Content tab of the Diviflash image accordion child item is a combination of the initial features. Under the content tab, a designer gets each element required to define an image, text, title & subtitle in a specific item of the image accordion module. Don’t get puzzled; today, we will have a deep discussion about all the features in detail.

Image

The image attribute of Add New Item Content Tab is a way to provide a background image, color, and color gradient. Also, with this feature, you can background image size, position, and Image Repeating effect.

Content

The content setting of the child item is a great way to provide title, subtitle, description, title & subtitle tag, and button text & URL on the item. Nevertheless, it authorizes you to define whether the button URL opens in a new window or not.

Admin label

Admin Label of the child item provides the opportunity to modify the item name as you wanted. Remember, the title is taken as the item default name, and the admin label only works when there is no title.

Child Item Design Tab

The Design Tab of the child item helps you embellish each element of a particular item with an extraordinary view. In addition, the child item design tab possesses several exclusive and highly supportive design features. For instance, content, title & subtitle, description, button, custom spacing, border, and filter attributes are remarkably noticeable. It sounds like extremely complicated features, right? But it’s super easy to conduct; follow the instructions explained below.

Content

The content feature of the Add New Item design tab is responsible for fixing the content position vertically, like top, center, or bottom. Besides that, you can define the content alignment, whether the content remains on the left side, middle, or right side.

Title

The title feature of the Add New Item allows designers to decorate the title of a child item. Under this setting, designers can modify the title font-weight & style, title text alignment, color, size & shadow. Even more, the title’s letter-spacing & line height can be controlled with this title attribute.

Subtitle

Every bit of customization facilities you get in the title feature is also available under the subtitle feature.

Description

Every bit of customization facilities you get in the title feature is also available under the subtitle feature.

Button

Under the button setting, you achieve all the functionalities like fixing the button alignment, background color & Image, and button corner with rounded effect. Further, the button’s border can be designed over various styles, widths, colors, and box-shadow effects.

Custom Spacing

Having extreme control over the distance between ingredients of the container is everyone’s desire. The child item’s custom spacing feature helps designers put padding and margin over the content and button from every direction.

Spacing

Divi provides the spacing setting as a default feature for the whole Module. Under this, you will find two basic margin and padding options with top, bottom, left, and right directions.

Border

Child item border setting is all about styling the border of a particular item. The border setting has a complete process of changing the border style, width, and color. Also can throw an effect of border corner rounding to the item.

Filter

The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the child item. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your items. So, increase or decrease the value of these effects as you want them to your design.

Child Item Advanced Tab

All you want to achieve is possible under the Content and Design tab, so take the convenience as much as you can. However, the Add New Item Advanced tab has an innovative intention to create something extraordinary for the item. Here, designers can precisely play with each element added to the item by implementing Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.

Global Features of Image Accordion Module

So, at this moment, let’s find out how the global features of the Divi Image Accordion module work? Unlike any other Divi modules, the Diviflash image accordion features are split into three categories,

+ Content Option
+ Design Option
+ Advanced Option

Image Accordion Module Content Tab

The Content tab of the Diviflash image accordion module is invented with numerous sophisticated features. The attributes imported under the image accordion content tab are considered the foundation of all design processes. No worries, today we will be having a proper discussion about all the features like accordion and animation settings in detail.

Accordion Setting

Accordion Setting is invented as the initial feature that controls every type of accordion effect. The Accordion feature allows designers to make a selection of accordion-type and event types. Also, this attribute stands for activating the accordion vertical mode for mobile functionality. Under this setting, you can define which item will be visible for the first time while opening the website. Besides that activating the Close Item on Click Outside will shut down the accordion effect. Finally, here you are authorized to control the size of the image accordion module.

Animation Setting

Enabling the Animation setting brings a couple of features like animation type, duration, delay, and timing functions. Moreover, you get the stagger option to display the title, subtitle, and button frequently one after one.

Background

The Divi Image Accordion Module background setting has multiple facilities for better presentation, such as background color, gradient color, Image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the whole Module.

Admin Label

Admin Label of Divi Image Accordion Module provides the opportunity to modify the module name as you want. So, it doesn’t have to be the Module’s actual name that generally shows on the wireframe view.

Divi Image Accordion Module Design Tab

The Design Tab of the Diviflash image accordion module is a platform that helps to decorate each element with a splendid look. The design tab is made with numerous advanced and super supportive designing attributes. For instance, overlay, item, content, title, subtitle, description, button, and custom spacing are the most striking features. Sounds like a massive functionality process, right? But it’s super easy to conduct: just follow the instructions below.

Overlay

The overlay setting of the image accordion design tab commonly works to import the background color & gradient to the child item. This attribute provides background color & gradient on both the active & inactive items.

Item

The item feature is only applicable for the child items that are included under the image accordion module. This setting is responsible for importing the item corner rounding, item border style, width & color, and item box-shadow impacts. Remember, the entire process here will affect every child item at once.

Content

The content attribute of the image accordion global design tab is invented to put an impact on the content section of every child item at once. Through this feature, a designer can define content alignment horizontally or vertically. Besides that, the content feature helps designers to determine whether the content background color, gradient, or Image is compatible with a particular design. Even though, under this feature, you can modify the border style, width & color with box-shadow. Finally, don’t forget to play over the content corner with a rounding impression.

Title

The title setting is discovered of having the purpose of modifying the title font-weight, style, & alignment, text color, size & shadow. Besides that, the title letter-spacing & line-height can be decorated under this setting. Remember, the entire process here will affect the title of every child item at once.

Subtitle

Each feature available under the title option is also included in the subtitle setting. Remember, the entire process here will affect the subtitle of every child item at once.

Description

Each feature available under the title option is also included in the description settings. So, learn less but design vastly. Remember, the entire process here will affect the description of every child item at once.

Button

The button option is situated within the Diviflash image accordion module design tab. Under this attribute, you can change the button alignment & background, button font-weight & style, text alignment, color & size. Also, you can determine button letter spacing & height, border style, width & color, along with the box-shadow effect. Last but not least, the corner-rounding effect is also imported in the button setting.

Custom Spacing

Under the custom spacing setting, two categories of features are presented for padding and margin functionalities,
Item: The item feature allows you to put margin and padding over all the items at once. Also, here you can provide the margin for the first & last item separately.
Content: The content feature of the custom spacing setting gives the authorization to put the margin for title, subtitle & description. Moreover, you can apply both margin & padding on the content area & button.

Sizing

As a designer, you would love to control an image accordion module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. Even you can set a min or max height & width of the image accordion.

Spacing

Divi makes the spacing setting a default feature for the whole Module. Therefore, you will find two common margins and padding settings that work the same for all Divi modules in this function.

Border

The Border feature of the Diviflas image accordion module can provide a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see it’s easier than you thought.

Box shadow

This Box shadow affects the entire Divi image accordion module and has six distinct shadow effect styles.

Transform

The transform feature of the Divi image accordion module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your image accordion will give you better control over the section.

Animation

Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.

Divi Image Accordion Advanced Tab

All you want to achieve is possible under the Content and Design tab, so take the convenience as much as possible. However, Divi Image Accordion Module Advanced tab intends to quench the designer’s thirst to control the Module. Designers can precisely play with each element of the image accordion by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.

CSS ID & Classes

CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or styling the Module.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.

Custom CSS

There are three custom CSS areas in the Diviflash image accordion module, and here you can target and set your custom CSS code. There is a sign “?” in each CSS input box that will tell you which class has been targeted.

Visibility

The advanced setting’s visibility option allows designers to hide the image accordion section for a particular device.

Transitions

You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.

Position

Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same for all.

Scroll Effects

If you wish to give a scroll effect to your image accordion module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get a Sticky position, Scroll Transform effects, enable vertical motion, and motion effect trigger functions.

NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.

Submit a Comment

Your email address will not be published.