DiviGrid is a plugin that gives 30+ new modules to the Divi Builder. With the ones additional modules, you’ll assemble difficult layouts to blow their own horns your content material subject matter in interesting ways. This plugin accommodates a variety of plugins that make it easy to turn content material subject matter in a grid, preferably suited to showcasing choices, products, products and services and merchandise, and further. The modules include extensive design settings, interesting animation and hover effects, and intuitive controls over the order and construction of the items. Additionally, the plugin has 500+ demo layouts you’ll use to jumpstart your own designs.
In this put up, we’ll take a look at DiviGrid to lend a hand you decide if it’s the correct Divi product for your next web design mission.
Let’s get started!
Setting up DiviGrid
Faster than you get started, make certain the Divi theme is installed and full of life in your web site.
DiviGrid can be installed very similar to each and every different WordPress plugin. Open the plugins internet web page inside the WordPress dashboard, then click on on Add New.
Click on on Upload Plugin at the best, then choose the plugin file and click on on Arrange Now.
Once installed, flip at the plugin.
DiviGrid Settings
Once DiviGrid is installed and activated, you’re going to see a brand spanking new tab for DiviGrid inside the WordPress dashboard. Proper right here, you’ll arrange the full of life DiviGrid modules and get entry to links to view and acquire the included demo templates. Additionally, there are some to hand links to documentation and make stronger.
DiviGrid Modules
DiviGrid comes with 30+ modules. Open a internet web page with the Divi Builder and click on at the grey plus icon with the intention to upload a brand spanking new module. You will have to see the DiviGrid modules available inside the file of modules.
Let’s take a closer check out each and every of the modules included in DiviGrid.
Advanced Blurb
With the Advanced Blurb Module, you’ll create unique blurb designs with regulate over the title, subtitle, text, icon, image, badge, and button. It accommodates regulate over the order of each and every of these things inside the blurb, the facility with the intention to upload dividers between any of the content material subject matter items, unique hover effects, and moderately a couple of settings to fine-tune the design on your liking.
Proper right here’s Advanced Blurb Demo 2 with a singular hover affect.
Advanced Heading
The Advanced Heading Module makes it easy to create interesting heading designs with a couple of content material subject matter fields that can be in my view styled, dual text layouts, and dividers. Throughout the design possible choices, you’ll add gradient and background clip styling, reveal and hover effects, text highlights, and a variety of design possible choices for each and every of the heading portions.
This is Advanced Heading Demo 6, that comes with two styled text fields and a divider styled with an icon. The text has a wobble affect on hover.
Advanced Image Carousel
With the Advanced Image Carousel Module, you’ll design fascinating carousels with two construction possible choices, each and every with whole design regulate over the static and carousel portions. You get precise regulate over sizing, navigation arrows, pagination, overlays and backgrounds, typography, buttons, slide path, autoplay and loop, and further.
That is Demo Construction 15, that comes with slide navigation on the very left edge, text and a button on the left facet, and a full-height image on the suitable. The carousel uses a lovely slide affect on the text and image.
Advanced Particular person
Next, the Advanced Particular person Module is very good for showing off staff people or purchaser testimonials. You’ll be capable of add a reputation, designation, description, button, image, some other image to activate hover, badge, superstar ranking, and social icons.
This is Advanced Particular person Demo 5, with a round profile image that presentations some other image on hover.
Advanced Worth Checklist
Throughout the Advanced Worth Checklist Module settings, you’ll add specific individual items for each and every of the portions you need to turn. You’ll be ready to choose from an icon, image, title, value value, description, icon and text, image and text, ordered file, unordered file, or button. You’ll be capable of moreover add badges to the fee file and customize each and every of the portions with a plethora of design possible choices.
Advanced Worth Checklist Demo 10 features a gradient background for the fee section, image, and text layouts to blow their own horns the items, and a badge at the best.
Advanced Tab
Now let’s take a look at the Advanced Tab Module. You’ll be capable of choose to show tabs on hover or click on on, add tab reveal animations, customize the construction and spacing, and customize the design of each and every section.
This is Demo Construction 8, with purple tabs that reveal on click on on with a transition animation.
Faster than After Image
A before-and-after image can be a wonderful way to show possible customers the effects you’ll offer. With this module, you’ll drag the slider to modify between the sooner than and after photos. You’ll be capable of customize the slider controls, add a label to the slider, and customize the design.
That is Faster than After Image Construction 1.
Blog Carousel
With this module, you’ll add a carousel view of your blog posts. You’ll be ready to make a choice from two construction types and four slide sorts. You’ll be capable of add a divider, industry the thing order, and regulate the elements which could be confirmed and the design of each and every section.
This is Blog Carousel Demo 3, with a slide carousel sort. It choices an image on the left, information about the put up inside the heart, followed by means of the blog title and excerpt. On the very suitable are navigation dots.
Trade Hour
The Trade Hour Module makes it easy with the intention to upload your operating hours on your web site in a simple display. You’ll be capable of add a starting time and end time on your hours, customize the divider style, in my view style each and every line inside the module, and elegance all the module with quite a lot of design possible choices.
That is Trade Hour Construction 7, that comes with two Trade Hour Modules styled with vibrant backgrounds and a dotted divider line.
Content material subject matter Grid
Next, the content material subject matter grid is a versatile module where you’ll create a grid construction to turn enjoying playing cards with text, photos, and buttons. Each and every grid products can be styled in my view, and the Grid Module itself comes with moderately a couple of possible choices to regulate the construction and design of the grid.
This is Content material subject matter Grid Construction 20, styled as a navigation section for an ecommerce store.
Floating Image
With the Floating Image Module, you’ll create a composition with a variety of photos and add a floating animation affect that gives motion to the section, drawing the individual’s eye.
This is Floating Image Example 4. In this example, the person inside the chair, the desk, the plant, and the white circle inside the background are all separate photos located together and animated with the module settings.
Foods Menu
Next is every other useful module that provides the potential for rising easy menu layouts. For each and every menu products, you’ll add a reputation and subtitle, set their heading levels, add the foreign exchange indicator and the fee, and add a button and/or badge.
That is Foods Menu Construction 6, with a two-column menu that comes with the thing title, subtitle, value, and buy button.
Gradient Text
With the Gradient Text Module, you’ll create interesting, crowd pleasing heading layouts. You’ll be capable of add prefix, infix, and suffix text and customize each and every with quite a lot of design possible choices, along with gradient heading, background clip, outline sorts, animation settings, hover effects, and further.
That is Gradient Text Module Example 2. It features a prefix and infix with gradient backgrounds and the suffix text with a background clip that is moving.
Honeycomb
The Honeycomb Module is every other module that allows you to display content material subject matter in a singular construction. In this case, you’ll add text, photos, and icons to honeycomb-shaped enjoying playing cards which could be arranged in a honeycomb building.
This is Honeycomb Example 9, which presentations an image on hover.
Image Accordion
That’s the Image Accordion Module. On click on on or hover, the image determined on will building up, revealing the content material subject matter. You’ll be capable of simply display the image, otherwise you’ll add content material subject matter like text, icons, photos, or buttons to blow their own horns.
This is Image Accordion Demo Construction 5. This is a simple construction that reveals the image on hover with an animated border.
Image Caption
Next is the Image Caption Module. With this, you’ll display a couple of photos and display a caption on hover. There are many design possible choices to customize the styling, construction, fonts, photos, and further.
That is Image Caption Demo Construction 8. On hover, the caption turns out and the other photos have a grey overlay.
Image Carousel
DiviGrid’s Image Carousel Module comes with many desirable possible choices you’ll use to blow their own horns your photos, pages, products, products and services and merchandise, and further. You’ll be capable of add text and buttons to the images, make a selection from a couple of slide and navigation sorts, add hover effects, and further.
This is Image Carousel Construction 1, that comes with the bullet-style pagination on the left. On hover, the title and worth are revealed with an overlay.
Image Hotspot
With the Image Hotspot Module, you’ll add hotspots to an image and add content material subject matter that presentations in a tooltip on click on on and/or hover. You’ll be ready to make a choice from an icon, text, or image hotspot, add hotspot animation settings, show text or a library construction inside the tooltip, and completely customize the design of each and every tooltip in my view.
That is Image Hotspot Demo Construction 3, with orange tooltips with icons. On click on on, the tooltips open to show information about the product.
Inline Popup
With this module, you’ll create a grid construction of items that reveal an inline popup on hover. You’ll be capable of add an image, title, subtitle, text, and overlay text to the grid products. Throughout the popup, you’ll show an image, title, subtitle, text content material subject matter, button, and social media icons. All of the ones portions can be completely styled with the design settings.
This is Inline Popup Construction 25, with a hexagon image wrapper and image zoom hover style performed. On click on on, the inline popup turns out underneath with an image, content material subject matter, social icons, and a button.
Interactive Card
The interactive card is every other feature-rich module that allows you to display wisdom in a wonderful manner. You’ll be capable of add content material subject matter that appears on click on on or hover or turns out alongside the cover content material subject matter to create an interactive card. You’ll be capable of add a heading, subtitle, text content material subject matter, and a button to the doorway. On the once more, you’ll moreover display these items, along side social media icons.
That is Interactive Card Example 11, which presentations a border animation on hover and reveals the once more facet with text and a button on click on on.
Justified Gallery
The Justified Gallery Module is a good way to turn photos in your internet web page. You’ll be capable of add overlay and hover effects for the images, and also you’ll permit a lightbox to open on click on on.
This is Justified Gallery Demo Construction 9. On hover, the image zooms in at an standpoint, and a border turns out. On click on on, you’ll view the image in a lightbox.
Checklist Grid
Next, the Checklist Grid Module is to hand for rising a list of products and services and merchandise, choices, steps in a process, and further. You’ll be capable of add a reputation, description, badge, and image or icon to each and every file products. You’ll be capable of moreover permit a connector line that can visually tie together your file items.
This is Checklist Grid Construction 32, with an icon at the best and a badge on the suitable with the amount.
Masonry Gallery
The Masonry Gallery is another option for displaying your photos in a gallery construction. You’ll be capable of open photos in a lightbox, add pagination, apply overlay and hover effects, and further. Each and every section is basically customizable with the design settings.
That is Masonry Gallery Construction 2. It features a vibrant overlay and white borders on hover.
Multiple Button
With the Multiple Button Module, you’ll add a couple of buttons all the way through the module that display alongside each and every other. You’ll be capable of choose to turn buttons in a row or in a column and customize the alignment. Each and every button can be in my view styled, and the module accommodates many desirable hover effects that can be added.
This is Multiple Button Module Example Construction 10. On hover, Dots appear on hover over the principle button. On the second button, the stripes on the bottom switch on hover.
Post Grid
This module makes it easy to turn blog posts in a customizable grid. You could have whole regulate over the type of posts that appear inside the grid along with the elements that appear on each and every put up. There are many possible choices to customize the construction of the grid, one of the best ways the put up image turns out, and of course, the design of each and every section that you just see inside the grid.
This is Post Grid Module Example 14. It choices the featured image for the reason that background of the put up products with a gloomy overlay. For each and every put up, you’ll see the category, writer, date, title, and browse additional link.
Scroll Multiple Image
Next, with the Scroll Multiple Image Module, you’ll add photos to a carousel that robotically scrolls in your internet web page. You’ll be capable of organize a horizontal or vertical construction and customize the scroll duration and spacing. Each and every products may have an image, title, and description.
This is Scroll Multiple Image Demo Construction 7, that comes with drinks in a horizontal scroll construction with the title and worth.
Single Image Scroll
The Single Image Scroll Module is a good way to blow their own horns large photos, harking back to panoramic photos, in detail. On hover, you’ll set the image to scroll best to bottom, bottom to best, left to suitable, or suitable to left. You’ll be capable of moreover add a badge, title, and description to turn alongside the image.
This is Single Image Scroll Module Example 4, which showcases the left-to-right and right-to-left scroll possible choices with an overlay that disappears on hover.
Social Percentage
With the Social Percentage Module, you’ll encourage shoppers to proportion your internet web page or put up on social media. The module comes with many design possible choices to customize the styling of the ones icons, along with two different layouts, various content material subject matter and design settings, and tasty hover effects.
That is Social Percentage Demo Construction 1.
Famous person Ranking
You’ll be capable of use the Famous person Ranking Module to blow their own horns purchaser scores for your products or products and services and merchandise, display testimonials, and further. With this module, you’ll moreover display a reputation, image, badge, subtitle, and description alongside the fame ranking to create whole layouts.
Famous person Ranking Example Construction 3 presentations superstar scores alongside menu items.
Tilt Image Card
With the Tilt Image Card Module, you’ll create card designs with an image, content material subject matter, and a button and make allowance a tilt affect on hover, together with interactivity on your design. You’ll be capable of moreover permit an way to show the content material subject matter on hover.
This is Tilt Image Card Demo Construction 8, with a gradient background performed to the content material subject matter house.
Where to Gain DiviGrid
DiviGrid is available inside the Divi Market. It costs $59 for endless web site usage and 1 year of make stronger and updates. The fee moreover includes a 30-day money-back be sure.
Final Concepts
For those who’re on the lookout for a Divi plugin that gives new modules with extended choices and design settings, DiviGrid is a great selection. With DiviGrid’s modules, you’ll assemble difficult layouts merely without the need for custom designed code. All the modules offer extensive design possible choices, and a variety of include interesting hover and animation effects. The example layouts included with the plugin moreover profit from the modules and generally is a great position to start for your private designs.
We might truly like to hear from you! Have you ever ever tried DiviGrid? Let us know what you take into accounts it inside the comments!
The put up Divi Product Spotlight: DiviGrid appeared first on Chic Issues Weblog.
0 Comments