Divi Plugin Spotlight: Divi Accordions Plus

by | Jan 29, 2023 | Etcetera | 0 comments

Divi Accordions Plus is a third-party module for the Divi Builder that gives a brand spanking new accordion builder. Use a few Divi Accordions Plus Modules together on a single internet web page and they art work as a single accordion, so when one opens every other one closes. Style the accordions together or individually, display icons and photographs, and moderately so much further. In this publish, we’ll check out Divi Accordions Plus, see what it will do, and see how easy it’s to use to lend a hand you decide if it’s the proper product in your needs. We’ll use the Poke Eating place About Web page Structure as a backdrop for this tutorial. So for individuals who haven’t downloaded it already, you’ll grab it now along side your Divi membership.

Divi Accordions Plus Module

Divi Accordions Plus supplies a brand spanking new module to the Divi Builder. Simply add the module anywhere you want inside of your Divi layouts.

Adding Accordions Plus to layout

Accordion Submodules

The submodules create particular person accordions. Add as many as you want thru clicking Add New Products. You’ll be capable to moreover clone them, rearrange them, and delete them. They apply the settings in the main module, alternatively they’ve particular content material subject material and design settings you’ll want to use.

Add new item

Content material subject material

Add a reputation, subtitle (which you’ll disable if you want), and body content material subject material. The ones are the main portions of the accordions.

Accordion content

Products State

Products State devices the open or closed state of the accordions when the internet web page so much. It’s off thru default, so the accordions are closed. I didn’t open the accordion in this example. It opened mechanically when I enabled Products State.

Accordion active state

Divi Accordions Plus Accordion Submodules Design Settings

The Design tab for the submodules controls the settings for that one accordion. You’ll be capable to customize them in the main module’s settings if you want them to seem the equivalent, alternatively you’ll nevertheless want to use the ones settings to select the photographs and icons. Let’s check out the settings that are unique to the submodule.

See also  WP Engine Snags a Stevie Award for Excellence in Provider

Left Icon

Left Icon controls the graphical part that appears on the left of the accordion. Allow or disable it, have it rotate on open, make a choice an icon or an image, and style it with the standard Divi tools. An image or icon very similar to a symbol works great on the left. In this example, I determined on an image and enabled Rotate Left Icon (Open Toggle), so the image grew to become round when I opened the accordion.

Activating the left icon

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

Left icon styling

Right kind Icon

Right kind Icon controls the graphical part that appears at the right kind of the accordion. Allow or disable it, have it rotate on open, make a choice an icon or an image, and style it with the standard Divi tools. An icon that indicates the open or closed state of the accordion works great at the right kind.

Adding the right icon

In this example, I’ve determined on a different icon, changed the icon color, the background color, and added a styled border.

Right icon styling

Divi Accordions Plus Content material subject material Settings

The Content material subject material tab accommodates the basic Divi settings and a couple of settings that are particular to Divi Accordions Plus.

Pace

Pace controls how fast the toggles open and close. It’s set in milliseconds.

Setting the accordion's toggle speed

Mode

Mode changes the way in which by which the accordions art work.

Accordion Mode

Accordion Mode lets in you to choose from a few energetic toggles and a single energetic toggle. Multiple Vigorous Toggles pass away all the toggles open until the individual closes them. The example underneath displays Multiple Vigorous Toggles.

An example of multiple active toggles

Single Vigorous Toggles most efficient lets in for one open toggle at a time. It closes the open toggle when the individual selects a brand spanking new toggle. This example displays Single Vigorous Toggles.

Single active toggle mode, the standard mode of how accordions function

Global Accordion Mode

Global Accordion Mode is a brand spanking new eye-catching function. It lets in for a single open toggle regardless of the number of Divi Accordion Plus Modules on the internet web page. Allow Global Accordion Mode inside of every Divi Accordions Plus module on the internet web page where you want to use the Global Accordion Mode. Any modules that shouldn’t have this mode enabled will not be affected by the mode. This is specifically great for rising multi-column accordions within the equivalent Row.

See also  Methods to Disable “Unattended Upgrades” in Ubuntu

Inside the example underneath, I’ve added every other Divi Accordions Plus module and enabled Global Accordion Mode for each and every. When I open an accordion in one of the vital the most important modules, the open accordion throughout the other module closes.

Global toggle

Divi Accordions Plus Design Settings

The Design settings regulate the default varieties for all the accordions. The ones settings are overwritten thru the individual submodule settings.

Header

Header controls the background color, the open toggle background color, spacing, borders, and box shadow. In this example, I’ve changed the background colors for the open and closed toggle.

Item header background colors

Left Icon

Left Icon controls the icon color, icon open toggle color, background color, open toggle background color, spacing, border, and box shadow for all the accordion module. If you want to have uniformity in styling, it’s very best to prepare the colors of the icon proper right here, and then individually make a selection your icon for every toggle throughout the accordion. In this example, I’ve added and styled a border around the icons to make it further seamless with the background color.

Styling the left icon

Right kind Icon

Right kind Icon controls the icon color, icon open toggle color, background color, open toggle background color, spacing, border, and box shadow. Inside the example, I’ve adjusted the open toggle colors, the border, and changed the icon color on open toggle.

Styling the right icon

Establish

Establish controls the identify background color, open toggle background color, spacing, border, and box shadow.

Setting the title background color

Body

Body controls the article body, spacing, border, and box shadow. I’ve adjusted the border in this example.

Accordion body styling

Header Text

Header Text controls the open toggle text and allows you to regulate the identify and subtitle independently from the equivalent menu. It accommodates all the standard text controls. I’ve adjusted the colors of the titles and subtitles, changed the identify font size, and set it to bold throughout the example underneath.

Header text styling

Body Headings

Body Headings accommodates all the standard text controls for the body headings that you just’ve specified throughout the content material subject material area. Inside the example underneath, I’ve added each and every an H2 and H3 heading tag to the body content material subject material. I changed the font weights and color for each and every the headings within the body content material subject material.

Body headings styling

Body Text

Body Text accommodates all the standard text controls for the body text throughout the content material subject material area. In this example, I’ve changed the font, made it italic, changed the color, and changed the font size.

See also  Test Home windows 11 Wi-Fi Sign: 4 Easy Strategies

Body text styling

Final Demo with Divi Poke Consuming position

That’s what the overall accordion turns out like within the About Us Internet web page Construction for the Divi Poke Consuming position Construction Pack.

Final result with header, footer and page layout

Divi Accordions Plus Demos

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

Demo 1

The principle demo includes a multi-column accordion with multi-colored icons. The accordions have a single border, and the content material subject material is bordered on each and every facet.

Divi Accordions Plus Demos

Demo 2

Our second demo pieces the accordion in a single column with blue highlights and box shadows. The icons have blue backgrounds.

Divi Accordions Plus Demos

Demo 3

Our 0.33 demo uses a two-column construction and makes use of different colors for every of the accordions.

Divi Accordions Plus Demos

Demo 4

The fourth demo uses a single-column accordion with warmth colors and light-weight borders.

Divi Accordions Plus Demos

Demo 5

Demo 5 uses red titles and icons and accommodates tan backgrounds for the body and green backgrounds for the headers. The accordions are located in two columns.

Divi Accordions Plus Demos

Demo 6

The sixth demo uses gentle blue header backgrounds with a darker blue for the identify text and icon background for the open accordion.

Divi Accordions Plus Demos

Demo 7

Demo seven presentations every of the accordion’s portions independently with box shadows for every part.

Divi Accordions Plus Demos

Achieve Divi Accordions Plus

Divi Accordions Plus is to be had within the Divi Market for $19. It accommodates countless usage, a 30-day money-back be certain that, and 300 and sixty 5 days of enhance and updates.

Completing Concepts

That’s our check out Divi Accordions Plus. This is a simple module, however it accommodates numerous choices for accordions. I specifically like that it truly works with a few modules on the equivalent internet web page. I found out the settings intuitive and every environment I wanted to keep an eye on was there. Should you occur to’re enthusiastic about an excellent accordion builder that’s easy to use, Divi Accordions Plus is worth a look.

We wish to listen from you. Have you ever ever tried Divi Accordions Plus? Let us know what you imagine it throughout the comments.

The publish Divi Plugin Spotlight: Divi Accordions Plus seemed first on Chic Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!