DiviGrid is a plugin that provides 30+ new modules to the Divi Builder. With those further modules, you’ll construct advanced layouts to show off your content material in attention-grabbing techniques. This plugin contains a number of plugins that make it simple to show content material in a grid, supreme for showcasing options, merchandise, products and services, and extra. The modules come with intensive design settings, attention-grabbing animation and hover results, and intuitive controls over the order and structure of the pieces. Moreover, the plugin has 500+ demo layouts you’ll use to jumpstart your personal designs.
On this put up, we’ll check out DiviGrid to lend a hand you make a decision if it’s the precise Divi product on your subsequent internet design venture.
Let’s get began!
Putting in DiviGrid
Ahead of you start, ensure that the Divi theme is put in and energetic for your website online.
DiviGrid can also be put in identical to every other WordPress plugin. Open the plugins web page within the WordPress dashboard, then click on Upload New.
Click on Add Plugin on the most sensible, then make a choice the plugin report and click on Set up Now.
As soon as put in, turn on the plugin.
DiviGrid Settings
As soon as DiviGrid is put in and activated, you are going to see a brand new tab for DiviGrid within the WordPress dashboard. Right here, you’ll arrange the energetic DiviGrid modules and get entry to hyperlinks to view and obtain the incorporated demo templates. Moreover, there are some at hand hyperlinks to documentation and improve.
DiviGrid Modules
DiviGrid comes with 30+ modules. Open a web page with the Divi Builder and click on the gray plus icon so as to add a brand new module. You will have to see the DiviGrid modules to be had within the listing of modules.
Let’s take a better take a look at every of the modules incorporated in DiviGrid.
Complex Blurb
With the Complex Blurb Module, you’ll create distinctive blurb designs with keep an eye on over the identify, subtitle, textual content, icon, symbol, badge, and button. It contains keep an eye on over the order of every of these things within the blurb, the power so as to add dividers between any of the content material pieces, distinctive hover results, and a variety of settings to fine-tune the design for your liking.
Right here’s Complex Blurb Demo 2 with a singular hover impact.
Complex Heading
The Complex Heading Module makes it simple to create attention-grabbing heading designs with a couple of content material fields that may be personally styled, twin textual content layouts, and dividers. Within the design choices, you’ll upload gradient and background clip styling, expose and hover results, textual content highlights, and plenty of design choices for every of the heading parts.
That is Complex Heading Demo 6, that includes two styled textual content fields and a divider styled with an icon. The textual content has a wobble impact on hover.
Complex Symbol Carousel
With the Complex Symbol Carousel Module, you’ll design charming carousels with two structure choices, every with complete design keep an eye on over the static and carousel parts. You get actual keep an eye on over sizing, navigation arrows, pagination, overlays and backgrounds, typography, buttons, slide route, autoplay and loop, and extra.
Here’s Demo Format 15, that includes slide navigation at the very left edge, textual content and a button at the left facet, and a full-height symbol at the appropriate. The carousel makes use of a pleasing slide impact at the textual content and symbol.
Complex Particular person
Subsequent, the Complex Particular person Module is excellent for appearing off staff contributors or buyer testimonials. You’ll be able to upload a identify, designation, description, button, symbol, an alternative symbol to turn on hover, badge, celebrity score, and social icons.
That is Complex Particular person Demo 5, with a spherical profile symbol that shows an alternative symbol on hover.
Complex Value Checklist
Within the Complex Value Checklist Module settings, you’ll upload person pieces for every of the elements you need to show. You’ll be able to select from an icon, symbol, identify, value price, description, icon and textual content, symbol and textual content, ordered listing, unordered listing, or button. You’ll be able to additionally upload badges to the associated fee listing and customise every of the elements with a plethora of design choices.
Complex Value Checklist Demo 10 includes a gradient background for the associated fee part, symbol, and textual content layouts to show off the pieces, and a badge on the most sensible.
Complex Tab
Now let’s check out the Complex Tab Module. You’ll be able to make a selection to expose tabs on hover or click on, upload tab expose animations, customise the structure and spacing, and customise the design of every part.
That is Demo Format 8, with crimson tabs that expose on click on with a transition animation.
Ahead of After Symbol
A before-and-after symbol can also be an interesting method to display attainable purchasers the effects you’ll be offering. With this module, you’ll drag the slider to modify between the earlier than and after photographs. You’ll be able to customise the slider controls, upload a label to the slider, and customise the design.
Here’s Ahead of After Symbol Format 1.
Weblog Carousel
With this module, you’ll upload a carousel view of your weblog posts. You’ll be able to make a choice from two structure varieties and 4 slide kinds. You’ll be able to upload a divider, exchange the article order, and keep an eye on the weather which might be proven and the design of every part.
That is Weblog Carousel Demo 3, with a slide carousel kind. It options a picture at the left, details about the put up within the middle, adopted via the weblog identify and excerpt. At the very appropriate are navigation dots.
Trade Hour
The Trade Hour Module makes it simple so as to add your working hours for your website online in a easy show. You’ll be able to upload a beginning time and finish time for your hours, customise the divider genre, personally genre every line within the module, and elegance all of the module with various design choices.
Here’s Trade Hour Format 7, that includes two Trade Hour Modules styled with colourful backgrounds and a dotted divider line.
Content material Grid
Subsequent, the content material grid is a flexible module the place you’ll create a grid structure to show playing cards with textual content, photographs, and buttons. Every grid merchandise can also be styled personally, and the Grid Module itself comes with a variety of choices to keep an eye on the structure and design of the grid.
That is Content material Grid Format 20, styled as a navigation segment for an ecommerce retailer.
Floating Symbol
With the Floating Symbol Module, you’ll create a composition with a number of photographs and upload a floating animation impact that provides movement to the segment, drawing the person’s eye.
That is Floating Symbol Instance 4. On this instance, the individual within the chair, the table, the plant, and the white circle within the background are all separate photographs positioned in combination and animated with the module settings.
Meals Menu
Subsequent is any other helpful module that gives the capability for growing simple menu layouts. For every menu merchandise, you’ll upload a identify and subtitle, set their heading ranges, upload the foreign money indicator and the associated fee, and upload a button and/or badge.
Here’s Meals Menu Format 6, with a two-column menu that includes the article identify, subtitle, value, and purchase button.
Gradient Textual content
With the Gradient Textual content Module, you’ll create attention-grabbing, crowd pleasing heading layouts. You’ll be able to upload prefix, infix, and suffix textual content and customise every with various design choices, together with gradient heading, background clip, define kinds, animation settings, hover results, and extra.
Here’s Gradient Textual content Module Instance 2. It includes a prefix and infix with gradient backgrounds and the suffix textual content with a background clip this is shifting.
Honeycomb
The Honeycomb Module is any other module that permits you to show content material in a singular structure. On this case, you’ll upload textual content, photographs, and icons to honeycomb-shaped playing cards which might be organized in a honeycomb development.
That is Honeycomb Instance 9, which shows a picture on hover.
Symbol Accordion
That is the Symbol Accordion Module. On click on or hover, the picture decided on will extend, revealing the content material. You’ll be able to merely show the picture, or you’ll upload content material like textual content, icons, photographs, or buttons to show off.
That is Symbol Accordion Demo Format 5. This can be a easy structure that finds the picture on hover with an animated border.
Symbol Caption
Subsequent is the Symbol Caption Module. With this, you’ll show a couple of photographs and show a caption on hover. There are lots of design choices to customise the styling, structure, fonts, photographs, and extra.
Here’s Symbol Caption Demo Format 8. On hover, the caption seems and the opposite photographs have a gray overlay.
Symbol Carousel
DiviGrid’s Symbol Carousel Module comes with many attention-grabbing choices you’ll use to show off your photographs, pages, merchandise, products and services, and extra. You’ll be able to upload textual content and buttons to the pictures, select from a couple of slide and navigation kinds, upload hover results, and extra.
That is Symbol Carousel Format 1, that includes the bullet-style pagination at the left. On hover, the identify and worth are published with an overlay.
Symbol Hotspot
With the Symbol Hotspot Module, you’ll upload hotspots to a picture and upload content material that shows in a tooltip on click on and/or hover. You’ll be able to make a choice from an icon, textual content, or symbol hotspot, upload hotspot animation settings, display textual content or a library structure within the tooltip, and entirely customise the design of every tooltip personally.
Here’s Symbol Hotspot Demo Format 3, with orange tooltips with icons. On click on, the tooltips open to expose details about the product.
Inline Popup
With this module, you’ll create a grid structure of things that expose an inline popup on hover. You’ll be able to upload a picture, identify, subtitle, textual content, and overlay textual content to the grid merchandise. Within the popup, you’ll display a picture, identify, subtitle, textual content content material, button, and social media icons. All of those parts can also be totally styled with the design settings.
That is Inline Popup Format 25, with a hexagon symbol wrapper and symbol zoom hover genre implemented. On click on, the inline popup seems underneath with a picture, content material, social icons, and a button.
Interactive Card
The interactive card is any other feature-rich module that permits you to show knowledge in an interesting approach. You’ll be able to upload content material that looks on click on or hover or seems along the quilt content material to create an interactive card. You’ll be able to upload a heading, subtitle, textual content content material, and a button to the entrance. At the again, you’ll additionally show this stuff, together with social media icons.
Here’s Interactive Card Instance 11, which shows a border animation on hover and divulges the again facet with textual content and a button on click on.
Justified Gallery
The Justified Gallery Module is an effective way to show photographs for your website. You’ll be able to upload overlay and hover results for the pictures, and you’ll allow a lightbox to open on click on.
That is Justified Gallery Demo Format 9. On hover, the picture zooms in at an perspective, and a border seems. On click on, you’ll view the picture in a lightbox.
Checklist Grid
Subsequent, the Checklist Grid Module is at hand for growing a listing of products and services, options, steps in a procedure, and extra. You’ll be able to upload a identify, description, badge, and symbol or icon to every listing merchandise. You’ll be able to additionally allow a connector line that may visually tie in combination your listing pieces.
That is Checklist Grid Format 32, with an icon on the most sensible and a badge at the appropriate with the quantity.
Masonry Gallery
The Masonry Gallery is an alternative choice for exhibiting your photographs in a gallery structure. You’ll be able to open photographs in a lightbox, upload pagination, follow overlay and hover results, and extra. Every part is totally customizable with the design settings.
Here’s Masonry Gallery Format 2. It includes a colourful overlay and white borders on hover.
A couple of Button
With the A couple of Button Module, you’ll upload a couple of buttons inside the module that show along every different. You’ll be able to make a selection to show buttons in a row or in a column and customise the alignment. Every button can also be personally styled, and the module contains many attention-grabbing hover results that may be added.
That is A couple of Button Module Instance Format 10. On hover, Dots seem on hover over the primary button. On the second one button, the stripes at the backside transfer on hover.
Submit Grid
This module makes it simple to show weblog posts in a customizable grid. You might have complete keep an eye on over the kind of posts that seem within the grid in addition to the weather that seem on every put up. There are lots of choices to customise the structure of the grid, the way in which the put up symbol seems, and naturally, the design of every part that you simply see within the grid.
That is Submit Grid Module Instance 14. It options the featured symbol because the background of the put up merchandise with a dismal overlay. For every put up, you’ll see the class, writer, date, identify, and browse extra hyperlink.
Scroll A couple of Symbol
Subsequent, with the Scroll A couple of Symbol Module, you’ll upload photographs to a carousel that routinely scrolls for your web page. You’ll be able to arrange a horizontal or vertical structure and customise the scroll period and spacing. Every merchandise could have a picture, identify, and outline.
That is Scroll A couple of Symbol Demo Format 7, that includes beverages in a horizontal scroll structure with the identify and worth.
Unmarried Symbol Scroll
The Unmarried Symbol Scroll Module is an effective way to show off huge photographs, equivalent to panoramic photographs, intimately. On hover, you’ll set the picture to scroll most sensible to backside, backside to most sensible, left to appropriate, or appropriate to left. You’ll be able to additionally upload a badge, identify, and outline to show along the picture.
That is Unmarried Symbol Scroll Module Instance 4, which showcases the left-to-right and right-to-left scroll choices with an overlay that disappears on hover.
Social Percentage
With the Social Percentage Module, you’ll inspire customers to percentage your web page or put up on social media. The module comes with many design choices to customise the styling of those icons, together with two other layouts, more than a few content material and design settings, and engaging hover results.
Here’s Social Percentage Demo Format 1.
Superstar Ranking
You’ll be able to use the Superstar Ranking Module to show off buyer scores on your merchandise or products and services, show testimonials, and extra. With this module, you’ll additionally show a identify, symbol, badge, subtitle, and outline along the celebrity score to create complete layouts.
Superstar Ranking Instance Format 3 shows celebrity scores along menu pieces.
Tilt Symbol Card
With the Tilt Symbol Card Module, you’ll create card designs with a picture, content material, and a button and allow a tilt impact on hover, including interactivity for your design. You’ll be able to additionally allow an technique to display the content material on hover.
That is Tilt Symbol Card Demo Format 8, with a gradient background implemented to the content material house.
The place to Acquire DiviGrid
DiviGrid is to be had within the Divi Marketplace. It prices $59 for limitless website online utilization and 1 yr of improve and updates. The associated fee additionally features a 30-day money-back ensure.
Ultimate Ideas
When you’re on the lookout for a Divi plugin that provides new modules with prolonged options and design settings, DiviGrid is a smart possibility. With DiviGrid’s modules, you’ll construct advanced layouts simply with out the desire for customized code. The entire modules be offering intensive design choices, and plenty of come with attention-grabbing hover and animation results. The instance layouts incorporated with the plugin additionally make the most of the modules and generally is a nice start line on your personal designs.
We would really like to listen to from you! Have you ever attempted DiviGrid? Tell us what you take into accounts it within the feedback!
The put up Divi Product Highlight: DiviGrid seemed first on Elegant Themes Blog.
0 Comments