Divi Theme Tips How to Customize Your Blog Column Number
How to change the number of columns your blog grid displays with the Divi Theme. In this video we will be demonstrating how to add a bit of CSS code to customizethe blog on a Divi Theme site. This as a great way of making your blog unique on your Divi site.
Today we will be demonstrating how to build this feature with the Divi Blog Module and the Additional CSS panel.
This is a very useful feature and really easy to implement.
In this video we will cover:
Adding A CSS Class Name To The Divi Blog Module,
Getting The CSS Code,
Using The Additional CSS Panel,
Adding The CSS Code,
Publishing The Code,
Changing The CSS For Different Column Numbers.
We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
The Divi theme's Blog Module is a powerful tool that can help you create a stunning blog layout for your website. With its easy-to-use interface and customizable settings, you can quickly adjust the number of columns, column width, and other design elements to create a blog module that perfectly matches your brand's aesthetic. Whether you're a beginner or an experienced website developer, the Divi theme's Blog Module is a great way to create a blog section that stands out from the rest. This module allows you to showcase your blog posts in a visually appealing way, making it easier for your readers to engage with your content.
So, follow along with the video and see how to change the number of columns your blog grid displays, using the fantastic Divi Theme. For more information on the Divi theme, check out our Divi playlists below.
CSS Code: https://help.elegantthemes.com/en/art...
Try out the Divi theme: https://bit.ly/TryDiviNow
Divi Supreme Modules Pro Plugin 10% Off: https://bit.ly/DiviSupremeCoupon
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/...
Divi Supreme Modules Playlist: / watch
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: / system22net
Full Ecommerce Site Build Playlist: / watch
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: • Divi Theme Contact Form With File Upload 👍👍👍
Divi 4 Theme Create An Ecommerce Store In One Hour: • Divi 4 Theme Create An Ecommerce Store In ...
My Blog : https://web-design-and-tech-tips.com
Check out our playlist page for more videos on this: / system22net
Sub: / @system22
--------- CODE USED TODAY ---------
/* Blog Columns */
.cu-blog .et_pb_salvattore_content[data-columns]::before {
content: '5 .column.size-1of5' !important;
}
@media only screen and ( min-width: 981px ) {
.cu-blog .column.size-1of5 {
width:19%!important;
margin-right: 1%;
}
}
--------- CHAPTERS ---------
00:00 Introduction
01:06 Adding A CSS Class Name To The Divi Blog Module,
02:28 Using The Additional CSS Panel,
02:51 Adding The CSS Code,
03:52 Publishing The Code,
04:25 Changing The CSS For Different Column Numbers.
07:33 Result.
--------- RECOMMENDED PLAYLISTS ---------
Elementor Ecommerce Store: • Elementor Ecommerce Store Woocommerce Inst...
Divi Snippets: • Divi 4 Snippets Divi Theme Overview 👍
Divi 4 Ecommerce Store: • Divi 4 Ecommerce Store Theme Setup And Ove...
Bootstrap 4 Basics: • Bootstrap 4 Basics Index Page and External...
Elementor: • Elementor Wordpress Builder Install And Ov...
WordPress Tips: • Wordpress 2020 Theme Customize The Page Ti...
Subscribe: / @system22
Disclaimer: Some of these links are affiliate links where I'll earn a small commission if you make a purchase at no additional cost to you.
#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite