How to Style Your Divi Blog Module Grid Cards (With 4 Examples) - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress Elegant Themes Video: How to Style Your Divi Blog Module Grid Cards (With 4 Examples).
Divi’s Blog Module has a useful grid layout option for your blog posts. The grid template organizes your blog posts into boxes or cards that make it easier to view more posts on your screen than a standard full-width blog layout.
The Blog Module Settings allow you to customize the overall design of your grid. You can easily make all of your cards the same background color, font, margins, etc…

However, the styling options are limited to the design of the grid as a whole, making it difficult to apply multiple or different designs to the cards within the grid.

Today I’m going to show you how to target and apply more than one style to the cards that make up your blog grid using custom CSS. I’ll show you how to apply a different style to every other card, creating a checkered effect. I’ll also show you how to style your cards differently by row and how to target and style any individual card by itself.

I’m including 4 examples of how to style your grid cards including a few hover effects you can use. By the end of this tutorial, you will be setup to create amazing blog grid designs for your next project.

Read more: https://www.elegantthemes.com/blog/divi-resources/how-to-style-your-divi-blog-module-grid-cards-with-4-examples

Published: Tuesday, August 20, 2019 10:18 AM
Category: Wordpress Elegant Themes

79 Views

Related Videos

How to Design Floating Cards Using Divi’s Blog Module

by Best Webhosting Added 1 year ago 18 Views / 0 Likes

Today, we are going to show you a creative way to showcase blog posts as floating cards in Divi. Every blog or website should seek to have great content that is attractive and, perhaps just as important, accessible. One way to make sure content stays accessible to users is to float it on the page. This is also known as making an element fixed (or sticky). And for the bloggers out there, we’re going to show you how to showcase your blog posts as floati
How to Style Divi’s Comments Module Inside a Blog Post Template

by Best Webhosting Added 3 years ago 65 Views / 0 Likes

Designing a blog post template is pretty easy with the Divi theme builder. But there’s one thing that tends to get overlooked when designing blog templates, and that’s the comments section. Thankfully, Divi has a customizable comments module that can easily be added to a blog post template. In this post, we’ll show you how to create two custom comments section designs that you can include in any blog template. You’ll be able to download the JSON file
5 Examples of Editorial Style Section Layouts Created with Divi

by Best Webhosting Added 4 years ago 90 Views / 0 Likes

The new Divi options offer tons of possibilities. Modules, rows and columns, more than ever, empower one another on the road towards stunning and user-friendly web design. One of the things it can do is create remarkable editorial style sections. And that’s exactly what we’ll be showing you in this post; 5 different editorial style section layouts that you can use within different websites. The best part? The post is made by using the right settings f
How to Create Flip Cards with Any Module in Divi Without a Plugin

by Best Webhosting Added 4 years ago 79 Views / 0 Likes

Flip Cards are a fun way for users to interact with your website. Not only does it provide a cool flip animation, it also allows you to offer additional information in one concise location. In this tutorial, I’m going to show you how to turn Divi Modules into flip cards without using a plugin! With this method, you will be able to use one Divi module as the front of a card and another Divi module as the back of a card. You can even design each module
How to Create a Directory or Listing Style Homepage with Divi's Search Module - Divi Nation Short

by Best Webhosting Added 4 years ago 78 Views / 0 Likes

In this episode of Divi Nation our host Nathan B. Weller tackles a popular request: how to create a directory or listing style homepage with a large search box in the middle of the section or page. Full details & free resources can be found here: http://goo.gl/NGS5f7 Subscribe to our YouTube Channel: https://goo.gl/oxCa4h Subscribe to Divi Nation on iTunes: https://goo.gl/w8fccT Subscribe to Divi Nation via RSS: http://goo.gl/vz04Vc Get Divi Nation on
4 Stunning Examples of Divi’s Post Title Module & How to Achieve Them

by Best Webhosting Added 4 years ago 90 Views / 0 Likes

For all you Divi bloggers out there looking for fresh ways engage people with your blog posts, the Divi Post Title Module is a great place to start. The Post Title Module allows you to style the post title (and featured image) in a variety of ways for countless stunning designs. This allows you to create some beautiful articles that hook your potential readers from the first glimpse. Today, I’m going to show you four stunning ways that you can style t
Turning Divi’s Shop Module into Dynamic Product Swipe Cards on Mobile

by Best Webhosting Added 3 years ago 63 Views / 0 Likes

When building a landing page for specific products, whether it’s a new launch or a sale you’re preparing for, chances are high you’ll use the Shop Module at some point. Divi’s Shop Module allows you to dynamically pull products from the WooCommerce plugin and style the products using Divi’s built-in options. Now, by default, the shop module comes with a few column structures that all translate into two columns on smaller screen sizes. This means that
Popular
5 Fantastic Ways to Style Divi's Testimonial Module

by Best Webhosting Added 4 years ago 104 Views / 0 Likes

In this video, I show you 5 Fantastic Ways to Style Divi's Testimonial Module. Website testimonials are more important than ever. Reviews on Google, Yelp, Facebook, etc are important for businesses and clients often will focus on those, but what most clients don’t focus on (or keep updated) are the testimonials on their website. Divi 100 Here is the link to the css code: http://www.elegantthemes.com/blog/divi-resources/5-fantastic-ways-you-can-style-d
5 Fantastic Ways You Can Style Divi’s Testimonial Module

by Best Webhosting Added 4 years ago 89 Views / 0 Likes

The one thing visitors always go looking for on a website is testimonials. They represent credibility and influence the decision-making process leads or potential clients have when visiting your website. Besides making sure you have strong testimonials to share, making them visually appealing plays an important role as well. In this post, we’re going to show you 5 fantastic ways you can style the Divi Testimonial Module while using the built-in option
How to Style Your Divi Audio Module as a Podcast Player

by Best Webhosting Added 4 years ago 100 Views / 0 Likes

Today, we’re going to provide all those podcasters out there--aspiring and famous alike--with an easy way to integrate their latest episodes directly into the Divi theme. Here is the link to the post: https://www.elegantthemes.com/blog/divi-resources/how-to-style-your-divi-audio-module-as-a-podcast-player
Free Divi Blog Extension: Article Cards Plugin

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

This free Divi Blog Extension provides a fresh, modern look and feel to Divi's standard blog module grid. Get the free download on the Elegant Themes blog today. http://www.elegantthemes.com/blog/divi-resources/free-divi-extension-gives-the-divi-blog-module-a-brand-new-look
How to Create Stunning Grid Layouts with Divi’s Video Module (Part2)

by Best Webhosting Added 4 years ago 88 Views / 0 Likes

We made it to part 2 of the series! And I have to say that I am really enjoying building these layouts. Today, I’m going to show you how to create a grid layout for your videos that resembles a feature section of a product page or a landing page. Read article: https://goo.gl/RWidwR