Divi Den Pro – Layout Library is a third-party plugin with an enormous library of predesigned Divi components that can assist you construct web sites quicker. It features a distinctive person interface that’s searchable and sortable, making the layouts simple to seek out. In this put up, we’ll check out Divi Den Pro – Layout Library that can assist you determine if it’s the suitable product in your Divi design toolbox.
Installing Divi Den Pro – Layout Library
Installing Divi Den Pro – Layout Library was easy. It works the identical as importing any plugin, however you’ll should be signed in to your Divi Marketplace Account for it to be obtainable inside Divi. First, to put in, go to:
- Plugins
- Add New
- Upload Plugins
- Choose File
- Install Now
Next, as soon as the plugin is put in, activate it as traditional, and also you’ll see a brand new menu added to your dashboard.
- Activate Plugin
Layout Library Content
The Divi Den Pro – Layout Library comes with 2615 library objects. This contains 1988 sections and modules, 631 layouts, 39 menus, and 18 full web site designs. All of the objects are pre-styled. The layouts are labeled, examined, and optimized for various display sizes.
There are a number of methods to make use of them in your Divi layouts. You’ll discover the layouts within the Divi Den Pro DM menu and within the Divi Theme Builder. The Divi Den Pro DM menu is the simplest approach to make use of them. You can search them by key phrase and class and import them to your Divi Library.
Divi Den Pro DM Menu
You’ll discover a new menu merchandise in your WordPress dashboard referred to as Divi Den Pro DM. The menu contains a lot of hyperlinks, which you’ll additionally discover as tabs throughout the menu itself.
Layout Finder
The first tab is the Layout Finder. This features a search field with filters on the left and the outcomes on the suitable. It additionally contains tabs so you may view all layouts, solely the free layouts, or simply the professional layouts. The filters present the variety of layouts in that sort. They’re divided into layouts, sections, modules, classes, collections, Divi Theme Builder, and Plugin Theme Builder.
The outcomes space reveals a thumbnail of the structure. The thumbnail will scroll on hover if the structure is bigger than the container. You can view the structure in one other tab, save the structure to your Divi Library, or obtain the structure to your pc as a JSON file.
Selecting a filter opens it to point out the choices. I’ve opened Collections, which reveals the names of layouts from Divi Den. Selecting one reveals the layouts inside that assortment within the space on the suitable.
I clicked to view a structure and it opened the demo on the Divi Den web page in one other tab. The web page reveals a number of layouts, sections, and so on. I’m hovering over the picture within the high heart to point out its hover results.
Latest
The Latest tab reveals the most recent posts from the Divi Den weblog. This is an efficient approach to be taught what’s new within the Layout Library.
Tutorials
The Tutorials tab contains all the tutorials that train tips on how to use Divi Den Pro – Layout Library. They embrace embedded movies that present if you click on on a tutorial, so you may be taught instantly from the Divi Den dashboard with out leaving WordPress. This helps with usability, so if there’s one thing you need assistance with, you’ll discover it right here.
Theme Builder
The Theme Builder tab divides the layouts into Divi Theme Builder and Plugin Theme Builder. It reveals the collections, web page sorts, and so on. These are additionally added to the Divi Theme Builder. You also can launch the Theme Builder from right here.
The Plugin Theme Builder has a hyperlink to open the Theme Customizer.
The Theme Customizer provides three new customizer tabs for web page, weblog, and international settings. This contains added options comparable to a popup customizer, a sticky bar, extra icons, the back-to-top button, a coming quickly web page, template customizations, and plenty extra.
Custom CSS Files
The Custom CSS Files tab offers the customized CSS from the Divi Den layouts which you could copy and modify. Clicking one opens the CSS in one other tab. An embedded video reveals tips on how to use the customized CSS.
Advanced
The Advanced tab contains the White Label tab and the More Options tab. White Label permits you to rebrand the plugin to match your model.
The More Options tab permits you to transfer the Divi Den Pro tab throughout the Divi Builder components. This is enabled by default.
Divi Den Pro Layout Library within the Divi Builder
A tab for the Divi Den Pro – Layout Library is added to the Modules modal.
Selecting the tab opens the menu the place you may select the structure you need. The layouts are downloaded as JSON information, so that you’ll have to add them to pages and posts if you wish to use them.
Divi Den Pro Layout Library within the Divi Theme Builder
The Divi Den Pro – Layout Library interface can be added to the underside of the Divi Theme Builder display. It works the identical because it does within the WordPress dashboard.
It works the identical approach within the Theme Builder because it does on pages and posts.
Divi Den Pro Layout Library Examples
Now that we’ve seen tips on how to use the Divi Den Pro – Layout Library interface, let’s have a look at a couple of examples. We’ll have a look at a couple of of every sort.
Layouts
Next, we’ll have a look at a couple of layouts. I’ll load them into the Divi Theme Builder. Once you’ve saved the layouts to your Divi Library, they’re obtainable in your layouts. Search them and choose classes on the left.
Shop Landing Page V3 Ragnar
This is the highest portion of Shop Landing Page V3 Ragnar. It features a hero part with an e-mail CTA. A store part reveals featured merchandise and contains an animated overlay that scrolls a message in massive textual content on hover.
Here’s the underside portion of Shop Landing Page V3 Ragnar. Extra-large photographs create store CTAs and embrace animated buttons. A singular weblog part shows the featured picture behind the textual content that seems on one aspect.
Careers Page V1 Tina
This is the highest portion of Careers Page V1 Tina. It features a hero picture with an overlapping title, an introduction with a callout, and two columns of textual content. Following it is a part of open positions displayed as playing cards.
This is the underside portion of Careers Page V1 Tina. Blurbs with hover animations present info adopted by a CTA to ship a CV and a piece of firm perks.
Old Times Blog Page
This instance is the highest portion of the Old Times Blog Page. It features a hero part with a message over a background picture and a button with a hover animation. A weblog part reveals a weblog put up with a big, featured picture on the left and posts with a smaller featured picture as a sidebar on the suitable. A yellow line separates the weblog part from the hero part. All of the weblog playing cards embrace tilt animations.
This is the underside portion of the Old Times Blog Page. It additionally makes use of yellow strains for separation and contains two three-column weblog sections, a big e-mail kind, and a footer.
Menu Page Layout Jamie
Here’s the highest portion of the Menu Page Layout Jamie. It features a hero part with icons that hyperlink to the varied meals menu classes. They embrace hover animations. A two-column meals menu follows this with a picture on the left and an outline on the suitable. The meals is split into classes.
Menu Page Layout Jamie
This is the underside half of the Menu Page Layout Jamie. It continues the meals menu and contains contact info with a full-width map.
Showreel Home Page Layout
This is the highest portion of the Showreel Home Page Layout. The hero part features a button that performs an embedded video and a number of other blurbs over a full-screen background picture. Following it is a set of tabs to show info. Large photographs with animated overlays hyperlink to the companies.
This is the underside portion of the Showreel Home Page Layout. It continues the massive photographs and contains one other part of photographs for companies with tilted overlay animations. It additionally contains styled quantity counters, an e-mail kind, and a footer.
Visual Progress Bar Page Freddie
This one is Visual Progress Bar Page Freddie. It has a sublime structure, however the primary component I need to present is the progress bar. This is the hero part of the structure. A menu sits on the backside of the display. When you scroll, the menu attaches to the highest of the display and reveals the progress by way of the structure.
The part on this instance is case research. The progress bar reveals yellow for each part that I’ve scrolled previous. The photographs for this part embrace tilt results.
Sections
If you’ve gotten Divi Den Pro – Layout Library sections saved to your Divi Library, a Divi Den Pro DM tab is added to your Section modal.
Greatest Hits Music Module Freddie
Greatest Hits Music Module Freddie offers a styled audio participant part with a black background and yellow hover results.
Styling Gallery Demo
Styling Gallery Demo offers an attention-grabbing picture gallery with completely different border shapes and a block of colour to separate the pictures.
Lintang Process Grace
Styling Gallery Demo offers an inventory of steps. They’re positioned horizontally and embrace formed photographs or colours, and hover results.
Thunderbolt Product Freddie
Thunderbolt Product Freddie is a product part that shows a product slider on one aspect and styled info on the opposite.
Alula Timeline Grace
Alula Timeline Grace creates an alternate vertical timeline with photographs on one aspect and knowledge on the opposite.
Modules
The Modules possibility within the dashboard reveals buttons. Here are a couple of that I downloaded.
I’ve added all of the buttons I downloaded to a single web page. Each of the buttons contains partaking hover animations.
Where to Purchase Divi Den Pro Layout Library
Divi Den Pro – Layout Library is on the market within the Divi Marketplace for $189. It contains limitless web site utilization, one 12 months of assist and updates, and a 30-day money-back assure.
Ending Thoughts on Divi Den Pro Layout Library
That’s our have a look at Divi Den Pro – Layout Library. There are loads of layouts on this library. The person interface is easy. Searching, sorting, importing, and downloading the layouts is intuitive. I discovered the hyperlink on the sections and modules to be restricted greater than the dashboard, as soon as the layouts are within the library, they’re obtainable by choosing the Add from Library choices. If you’re enthusiastic about including a number of thousand professionally designed layouts to your Divi Library, Divi Den Pro – Layout Library is price a glance.
We need to hear from you. Have you tried Divi Den Pro – Layout Library? Let us know what you concentrate on it within the feedback.
