The blog module of divi can display blog posts as the whole width or grid layout. If you choose a grid layout, you can have a maximum of 3 columns. In this tutorial, we will learn how to create the required number of columns by combining the functions of CSS grid with the divi blog module. With just a few CSS snipts, the blog will be transformed into a beautiful multi column grid layout. In addition, columns are dynamically reactive at all browser sizes, so there is no need to worry about these media queries or response settings updates. After CSS grid magic, it also provides built-in blog module settings, which can visually design blogs without custom CSS. Therefore, if you are looking for more columns of the divi blog, this method will help.
The following are the designs to build in this guide. There is also a code pen to display the CSS grid layout to be added to the blog module. To the layout for free, you must first the blog module design of this tutorial using the following buttons. To access the , you must subscribe to the divi day email list using the form below. New subscribers will receive more divi offers and free divi layout packs every Monday! If you are already in the list, just enter your email address below and click . You will not \
Join the file and the divi press release for free. You will email the best divi login page layout package and many amazing free divi resources, tips and essentials. If you follow, you will soon become master divi If you have subscribed, please enter your email address below and click to access the layout package. Successfully subscribed. Check your email address to confirm your subscription and access the free weekly divi layout package! To import the layout of the YouTube channel subscription section into the divi library, go to the divi library.
Click the import button. Select the import tab from the portability pop-up menu, and then select file from your computer. Then click the import button. When finished, you can use the layout in divi builder. Enter the tutorial? Why use the CSS grid to change the number of columns in the divi blog module? There are many ways to create a blog layout module using CSS. But in this case, using CSS grid is the most reasonable. The CSS grid property is a popular way to create a predictable and responsive grid layout with a few lines of CSS. This allows you to configure all blog module cards as a fully reactive grid. In other words, it provides a simple and complete solution to add the required column layout to the divi blog. In fact, we also use it to build a grid layout for the divi module.
Now, let’s focus on the blog module. Use the full width layout to set up the blog module. The divi blog module can be used to add blogs to any location on the site. It’s really easy to build blog pages on divi. Just use divi builder to add a blog module to the page. In this tutorial, we will use the pre created blog page template. One of the free layout packages already has a blog module with the default style. To load the pre created blog page layout onto the page, open the settings menu at the bottom and open the add pop-up menu in the library. Search the fashion design blog page layout there, browse and load it on the page.
After loading the layout, it is used to display blog posts
Find the applicable blog module and open the blog module settings. Set the number of posts, update the content in the blog settings, and limit the number of posts to 10. (this is mainly because of the beauty, because the grid finally contains two lines of five blog posts on the desktop.) The number of posts to be created in the full grid is 10, so you need to confirm whether the layout of the blog is not the full grid. This will stack blog posts vertically in the normal order of documents \/ pages.
To change the layout of the blog module, open the blog module settings, open the layout drop-down menu on the design tab, and then select the total width. Now, each blog post must span the total width of the column (or parent container). In short, adding borders to blog posts gives us a clearer picture of what the grid layout looks like when CSS is added. Update border options: Border width: 1px border color: to efficiently add custom CSS classes to the RGBA (150104,70,0.35) maleblog module, so as to target a specific blog module as CSS, you must provide custom CSS classes for the module. On the Advanced tab, add the following CSS classes:
CSS class: use et blog CSS grid to create multi column layout. Now the blog module has been set to full width layout, and you can add custom CSS. Now we will use the code module to add CSS to the page. However, when you’re done, you can move the CSS to the desired location at any time (for example, custom CSS in theme options or style. CSS in sub themes). Add a new code module under the blog module. In the male code input box, add the style label required to load CSS code on the page.
Paste the next CSS snipt in the style label et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
The first line of CSS places the content (or module) according to the CSS grid module. Display: grid; The second line of CSS defines the column template of the grid. Grid Template Column: repeat (auto fill), minmax (200px, 1fr); The third row determines the spacing between grid items (for example, large width).
Interval: 20px; For the way CSS grid columns work, the grid will repeatedly add columns as needed to fill the remaining space of the grid container. The minimum width of each column is 200px and the maximum width is 1fr (exactly the same as automatic). This means that when the maximum width of the parent container (divi row \/ column) is 1080px, there are 5 columns in the grid. The width of each column is 200 pixels (minimum width) and 1000 pixels. If you add 4 grid intervals of 20px, the total is 1080px. If the viewport compresses the grid under 1080px, each available space will be filled by blog posts before the magic of CSS grid reaches 200px width. By default, new rows are created automatically when needed.
For more columns, you can change the 200px minmax value to a smaller value, or significantly increase the maximum width of the divi row to 1080px. Here is the code pen, which shows the added CSS grid layout function. At this point, you can use a 5-column reactive grid. In fact, you don’t plan to use page tags or borders in blog posts. You can park here. The results so far. The style setting of blog post card (or grid item) is followed by grid item (or blog)
Postcard) can add several lines of CSS to align with the top of each line, and there are several down jackets et-blog-css-grid . et_pb_post {
align-self: start;
padding: 15px;
}
Male delete paging from the grid. When paging is enabled in the current blog module, it will be regarded as the last grid item of CSS grid. You can specify an absolute location and place it directly below the blog module to completely remove pagination from the grid. To do this, add the following CSS: et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
The paging link is now safe outside the grid, so it is no longer moved from other viewport widths. Male confirm the results so far! Reward tips: adjust the size of all recommended pictures (or thumbnails). At this time, it can be confirmed that the height of recommended pictures on each blog post card is inconsistent. If you want them to reach the same height, you can also use additional CSS et-blog-css-grid . entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid . entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
The first snipet takes the recommended image container as the object. By default, the proportion of down jacket to adjust the height of the image container is added. However, the first pin will not work until the recommended image is placed in the center of the image container. To do this, specify an absolute position for the image and use \
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
\/* style css grid item or blog post *\/
.et-blog-css-grid . et_pb_post {
align-self: start;
padding: 15px;
}
\/* remove pagination from blog module grid with absolute position *\/
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
\/* Resize Featured Image Thumbnails *\/
.et-blog-css-grid . entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid . entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
The following is the final view of the blog module with new columns and grid layout: The final idea is to use CSS grid to integrate CSS
