Divi Accordions Plus is a third-party module for the Divi Builder that provides a brand new accordion builder. Use more than one Divi Accordions Plus Modules in combination on a unmarried web page and so they paintings as a unmarried accordion, so when one opens some other one closes. Taste the accordions in combination or in my view, show icons and pictures, and rather a lot extra. On this submit, we’ll take a look at Divi Accordions Plus, see what it could do, and notice how simple it’s to make use of to lend a hand you make a decision if it’s the proper product to your wishes. We’ll use the Poke Restaurant About Page Layout as a backdrop for this educational. So in case you haven’t downloaded it already, you’ll seize it now along with your Divi club.

Divi Accordions Plus Module

Divi Accordions Plus provides a brand new module to the Divi Builder. Merely upload the module any place you wish to have inside your Divi layouts.

Accordion Submodules

The submodules create person accordions. Upload as many as you wish to have via clicking Upload New Merchandise. You’ll additionally clone them, rearrange them, and delete them. They observe the settings in the principle module, however they have got particular content material and design settings you’ll want to use.

Content material

Upload a name, subtitle (which you’ll disable if you wish to have), and frame content material. Those are the principle parts of the accordions.

Merchandise State

Merchandise State units the open or closed state of the accordions when the web page so much. It’s off via default, so the accordions are closed. I didn’t open the accordion on this instance. It opened routinely once I enabled Merchandise State.

Divi Accordions Plus Accordion Submodules Design Settings

The Design tab for the submodules controls the settings for that one accordion. You’ll customise them in the principle module’s settings if you wish to have them to seem the similar, however you’ll nonetheless want to use those settings to make a choice the photographs and icons. Let’s take a look at the settings which might be distinctive to the submodule.

Left Icon

Left Icon controls the graphical component that looks at the left of the accordion. Permit or disable it, have it rotate on open, make a selection an icon or a picture, and elegance it with the usual Divi gear. A picture or icon similar to an emblem works nice at the left. On this instance, I decided on a picture and enabled Rotate Left Icon (Open Toggle), so the picture circled once I opened the accordion.

For this case, I’ve adjusted the background and icon colour.

Proper Icon

Proper Icon controls the graphical component that looks at the proper of the accordion. Permit or disable it, have it rotate on open, make a selection an icon or a picture, and elegance it with the usual Divi gear. An icon that signifies the open or closed state of the accordion works nice at the proper.

On this instance, I’ve decided on a distinct icon, modified the icon colour, the background colour, and added a styled border.

Divi Accordions Plus Content material Settings

The Content material tab contains the fundamental Divi settings and a few settings which might be particular to Divi Accordions Plus.

Pace

Pace controls how briskly the toggles open and shut. It’s set in milliseconds.

Mode

Mode adjustments the way in which the accordions paintings.

Accordion Mode

Accordion Mode allows you to make a choice from more than one lively toggles and a unmarried lively toggle. More than one Lively Toggles go away the entire toggles open till the person closes them. The instance under presentations More than one Lively Toggles.

Unmarried Lively Toggles most effective lets in for one open toggle at a time. It closes the open toggle when the person selects a brand new toggle. This situation presentations Unmarried Lively Toggles.

International Accordion Mode

International Accordion Mode is a brand new fascinating function. It lets in for a unmarried open toggle irrespective of the choice of Divi Accordion Plus Modules at the web page. Permit International Accordion Mode inside each and every Divi Accordions Plus module at the web page the place you wish to have to make use of the International Accordion Mode. Any modules that don’t have this mode enabled might not be suffering from the mode. That is particularly nice for developing multi-column accordions in the similar Row.

Within the instance under, I’ve added some other Divi Accordions Plus module and enabled International Accordion Mode for each. After I open an accordion in one of the vital modules, the open accordion within the different module closes.

Divi Accordions Plus Design Settings

The Design settings keep an eye on the default kinds for the entire accordions. Those settings are overwritten via the person submodule settings.

Header

Header controls the background colour, the open toggle background colour, spacing, borders, and field shadow. On this instance, I’ve modified the background colours for the open and closed toggle.

Left Icon

Left Icon controls the icon colour, icon open toggle colour, background colour, open toggle background colour, spacing, border, and field shadow for all of the accordion module. If you wish to have uniformity in styling, it’s best possible to arrange the colours of the icon right here, after which in my view make a choice your icon for each and every toggle within the accordion. On this instance, I’ve added and styled a border across the icons to make it extra seamless with the background colour.

Proper Icon

Proper Icon controls the icon colour, icon open toggle colour, background colour, open toggle background colour, spacing, border, and field shadow. Within the instance, I’ve adjusted the open toggle colours, the border, and altered the icon colour on open toggle.

Identify

Identify controls the name background colour, open toggle background colour, spacing, border, and field shadow.

Frame

Frame controls the article frame, spacing, border, and field shadow. I’ve adjusted the border on this instance.

Header Textual content

Header Textual content controls the open toggle textual content and lets you keep an eye on the name and subtitle independently from the similar menu. It contains the entire same old textual content controls. I’ve adjusted the colours of the titles and subtitles, modified the name font measurement, and set it to daring within the instance under.

Frame Headings

Frame Headings contains the entire same old textual content controls for the frame headings that you simply’ve specified within the content material space. Within the instance under, I’ve added each an H2 and H3 heading tag to the frame content material. I modified the font weights and colour for each the headings throughout the frame content material.

Frame Textual content

Frame Textual content contains the entire same old textual content controls for the frame textual content within the content material space. On this instance, I’ve modified the font, made it italic, modified the colour, and altered the font measurement.

Ultimate Demo with Divi Poke Eating place

That is what the overall accordion seems like throughout the About Us Web page Format for the Divi Poke Eating place Format Pack.

Divi Accordions Plus Demos

Divi Accordions Plus comes with seven demos to get you began.

Demo 1

The primary demo features a multi-column accordion with multi-colored icons. The accordions have a unmarried border, and the content material is bordered on either side.

Demo 2

Our 2nd demo gifts the accordion in one column with blue highlights and field shadows. The icons have blue backgrounds.

Demo 3

Our 1/3 demo makes use of a two-column format and makes use of other colours for each and every of the accordions.

Demo 4

The fourth demo makes use of a single-column accordion with heat colours and light-weight borders.

Demo 5

Demo 5 makes use of pink titles and icons and contains tan backgrounds for the frame and inexperienced backgrounds for the headers. The accordions are positioned in two columns.

Demo 6

The 6th demo makes use of gentle blue header backgrounds with a darker blue for the name textual content and icon background for the open accordion.

Demo 7

Demo seven presentations each and every of the accordion’s parts independently with field shadows for each and every component.

Acquire Divi Accordions Plus

Divi Accordions Plus is available in the Divi Marketplace for $19. It contains limitless utilization, a 30-day money-back ensure, and 12 months of fortify and updates.

Finishing Ideas

That’s our take a look at Divi Accordions Plus. It is a easy module, however it contains a large number of options for accordions. I particularly like that it really works with more than one modules at the similar web page. I discovered the settings intuitive and each and every atmosphere I sought after to regulate used to be there. In the event you’re inquisitive about a formidable accordion builder that’s simple to make use of, Divi Accordions Plus is value a glance.

We wish to pay attention from you. Have you ever attempted Divi Accordions Plus? Tell us what you take into consideration it within the feedback.

The submit Divi Plugin Highlight: Divi Accordions Plus seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more