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.
