How To Change The Divi Blog Module Into A List Layout
In this tutorial, we will learn how to change the layout of the Divi blog module to create a list view with the image on the left and details on the right.
We have an exciting series on the Divi Blog module, and this will be a great addition. This is a quick CSS code snippet that changes the Divi blog module into a nice list with the image on the side and the details on the other side. I’ll show you how to have the image on the left, or on the right. I’m really excited about this, because it’s so quick and easy even for beginners!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Make The Divi Blog Module Image On The Left And Details On The Right
Step #1: Set The Blog Module To Fullwidth Layout
Go the Blog Module settings to the Design tab and set the Layout to Fullwidth. Don’t worry if this looks wrong. We need to set it this way to make the next step much easier. If we kept it as a grid layout, it would be much harder to achieve the desired layout.
Step #2: Add The CSS Class To The Blog Module
In order to only affect certain Blog modules on the site, we can use a custom class. So open up the Divi Blog module settings and go to the Advanced tab. From there, open the CSS ID & Classess toggle. Place the class “pa-blog-list” into the CSS Class input field there.
Step #3: Set The Image and Details Width With CSS
Basically, we are telling the image to be only 30% wide. Then we tell the title, meta, and excerpt to be 70% wide. By adding a float left on them, it makes them stack up beside each other. This is better than some of the other similar tutorials because it keeps all the text on the side instead of wrapping around the image.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*add media query so changes only affect tablet and desktop*/
@media (min-width: 767px) {
/*set the image width*/
.pa-blog-list .entry-featured-image-url {
width: 30%;
float: left;
margin-bottom: 0!important;
}
/*set the details width*/
.pa-blog-list .entry-title,
.pa-blog-list .post-meta,
.pa-blog-list .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}
There you go! You now can adjust the widths if you want, just make sure the percentages equal 100%.
Add Some Fancy Styling
While we are here, let’s add some little touches that will make a huge impact. In the follow snippet, we are going to style each one of the events by adding spacing around them, a border radius, and a box shadow.
Much better, right? Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!
Make The Images Square
You may have seen our series on cropping Divi images to a certain aspect ratio. Those were so fun, and we wanted to show you how to do that here as well. So let’s make the blog image square, even if it isn’t when you upload it.
First of all, add “padding-top: 30%” to the first snippet above. That will make the height the same as the 30% width that we designated. Note that if you changed that number to something else, you will also have to make this number match.
Add the following snippet to your code in the Divi Theme Options.
Much better, right? Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!
Make The Divi Blog Module Image On The Right And Details On The Left
So if you want, you can use the same snippet as above and just change one thing. Instead of saying to float left, just say float right!
I’m not going to provide this snippet, because you should learn to edit CSS on your own! You can do it! 🙂Â
NEW: Vertically Align The Details
I am updating this post with a new option. Now that the image is on the left, and details on the right, it might be nice if the details were aligned vertically. This gets a bit trickly, but it’s pretty easy to do if we use jQuery. However, note that this code is totally different than what was given above, so either use this, or the code above.
I hope you have enjoyed learning How To Change The Divi Blog Module Into A List Layout. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
How would you target this at a specific blog module – (I’ve a couple of different blog mods spread across my site 🙂
Got as far as understanding that I need to use a seperate CSS class but how would this show in the code – know its #cssclassname but not sure exactly where it needs to go 🙂
Hi Rach,
Sure, so any time I have a snippet that you want to be specific, just add a custom class to the beginning and then add that class in the module Advance tab in the CSS Class input field (don’t use the period at the beginning here, only in the snippet) For this one you will need to add your class in front ever each selector.
Ah thanks Nelson, It was the adding it before every seperate selector that threw me 🙂
Much appreciated 🙂
RudyGee
on September 2, 2020 at 4:19 pm
Since you don’t cover mobile in this tut how would I get the same exact layout on mobile? The images are not square? Also one more thing that could make this better is customizing the read more button on this module. Thanks I totally enjoy your tutorials.
This method is the sort of thing I’ve been looking for and the code seems to have the desired effect, but changing the main elements color changes the entire module including the spaces in between the blog posts. Is there any way to have each Blog post have a background color while still leaving the spaces in between the blank?
Thank you, that was a great tutorial I’ve been looking for since a while. 🙂 Is there any chance to change the position of the images from left to right than right to left in every row within the blog module?
Thank you! 🙂 That makes all images left or all images right, if I get you right. 🙂
What I thought was, that on one post the image is left, than the next one right, than the next one left again and so on. 🙂 That would be something really eye catching.
I know it could be done by making separate post modules and making excerpts, but automated… you’d be my hero. 😀
Rogier
on October 30, 2020 at 5:07 am
Hi Nelson, thanks for the tutorial! And not only this one 😉
How can I reduce vertical distance between list items?
If the post title is longer and takes two rows for example, what happens with the excerpt? Does the CSS code takes care about this? Because if you have a fixed word count defined in DIVI, the exerpt will just go out of this “imaginary” box shape. Please let me know.
Hi Nelson. So, here is the situation: I copy pasted your CSS code in the Custom CSS section on Page Settings here https://www.howtodigitalstuff.com/guides/ (it is live now). What I am concerned is that the featured image is not aligned on the bottom with the post excerpt. What I would like to achieve is: the post title to be aligned with the top of the image, and the bottom of the image to be aligned with the last sentence of the post excerpt – so it would be visually appealing. If you go to the home page of my blog you will notice that more or less this is accomplished with only one exception: and that is when the length of the title is longer and it continues to the second row, then the alignment on the bottom is broken.
Can you advise?
Hi Nelson, really great tutorial just what I was looking for, however I notice its thrown the dynamic headings I have on some of the posts I have and created a wide border around full page. Any idea how I could override this on these pages. An example of this would be at
Hi Ray,
Absolutely, with anything you can always add a custom class to the module and in the snippet. Just put it before each of the items in the snippet.
Almost! You would also need it before each item, notice how the comma is used in the second snippet, so you would need it for each of those three selectors.
Love your tutorials, I just added the Reorder The Divi Blog Image, Title, Meta, Excerpt, and also this tutorial to my blog.
But I have a question. When I put it in list move and I do a reorder… the list gets messed up. So I would like the image left, and on the right side : first the meta, then title, then excerpt and then button. Is that possible?
Can you share a link? I haven’t tried combining them or looking closely at it yet.
Francesco schinaia
on May 19, 2021 at 3:02 am
I have the same problem too ...
it is as if the float of this place goes against the display> flex to change the order of the elements
Best R.
Hemant Gaba
on May 25, 2021 at 8:42 pm
If you want to change the order of the items and you are using the second code snippet where jQuery and display flex is used then remove the code given below from the CSS snippet:
.pa-blog-list article .wrap{
width: 70%
}
and add the code given below on its place:
.pa-blog-list article .wrap{
width: 70%;
display: flex;
flex-direction: column;
}
.pa-blog-list article .wrap h2{
order: 2;
}
.pa-blog-list article .wrap p{
order: 1;
}
.pa-blog-list article .wrap div{
order: 3
}
You can change the order number as per your liking. Please let us know if that helps.
Shepon Biswas
on April 7, 2021 at 8:51 am
Hi Nelson,
Thanks for creating that specific blog module tutorial.
I tried your method but the thing is I’m facing a problem (which shown as screenshot), some of the contents goes under the image.Can you please help me to get rid of.
Thanks 🙂
This might be happening because the image you are using there is very small. Please try adding a different image with increased height and see if that helps. 🙂
I’m looking for a way to turn the blog module results into a list with only the titles showing. Which in turn could be used to show only a specific number of posts and from specific categories or tags. In other words, no images, no excerpts and no meta data. I have looked everywhere but the title lines seem impossible to style properly. So, a simple list (like the most recent widget lists) please?
If you want to show a simple list with the blog titles, then first of all go to the Blog Module Settings > Elements and disable all the content that you don’t need. As we already have placed the pa-blog-list custom class in the blog module so we will use that for the CSS snippet. Please go to the Divi > Theme Options > Custom CSS Panel and place the CSS snippet given below:
/*This snippet is for removing the margin between the titles*/
.pa-blog-list article{
margin: 0 !important;
}
/*This snippet is for the bullet points*/
.pa-blog-list article .entry-title:before{
content: ".";
position: relative;
top: -3px;
left: -4px;
font-size: 40px;
}
/*This snippet is for hiding the post content div*/
.pa-blog-list article .post-content{
display: none;
}
For this purpose, please paste your CSS inside the page settings. First, go to the Home Page and enable the Visual Builder. After that click on the bottom center three dots icon and then click on the settings icon. This will open the Page Settings. Go to the Advanced Tab > Custom CSS and place your code there.
Hi javascript download work when we paginate the blog module
It works on intiall page load but when we paginate then it looks javacript isnt wrapping the elements in wrap class div
Thank you for addressing the issue and you are right that the code is working on the initial page load only. Please try using the code which is given below and see if that helps.
Code: https://www.codepile.net/pile/bPApy4mn
We will update the code in the guide as soon as possible. 🙂
I am afraid that I am not able to replicate any issue on my end on your website. If you still facing the issue, please share the exact URL of the page and we will be happy to help. 🙂
This works perfectly on featured images, but when I use Video Post format, the videos appear huge and above the title text. Is there something I can add to the code to make the video do the same as the featured image?
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Hi Nelson
Great Tutorials !
How would you target this at a specific blog module – (I’ve a couple of different blog mods spread across my site 🙂
Got as far as understanding that I need to use a seperate CSS class but how would this show in the code – know its #cssclassname but not sure exactly where it needs to go 🙂
Thanks again 🙂
Hi Rach,
Sure, so any time I have a snippet that you want to be specific, just add a custom class to the beginning and then add that class in the module Advance tab in the CSS Class input field (don’t use the period at the beginning here, only in the snippet) For this one you will need to add your class in front ever each selector.
Ah thanks Nelson, It was the adding it before every seperate selector that threw me 🙂
Much appreciated 🙂
Since you don’t cover mobile in this tut how would I get the same exact layout on mobile? The images are not square? Also one more thing that could make this better is customizing the read more button on this module. Thanks I totally enjoy your tutorials.
Hi RudyGee,
I do have a tutorial on customizing the read more button, be sure to be checking our blog as this has been out many months.
To make this work on mobile, simply remove the media query!
This method is the sort of thing I’ve been looking for and the code seems to have the desired effect, but changing the main elements color changes the entire module including the spaces in between the blog posts. Is there any way to have each Blog post have a background color while still leaving the spaces in between the blank?
Hi Spence,
The .et_pb_post would work perfeclty for adding a background color to individual posts.
Hi Nelson,
Can you please make a tutorial on how to make the Divi shop module (when using woo-commerce) into list view.
Thanks
Thanks Dom, that’s a good idea!
Thank you, that was a great tutorial I’ve been looking for since a while. 🙂 Is there any chance to change the position of the images from left to right than right to left in every row within the blog module?
Hi Ada,
Yes, I mention that in the post at the bottom.
Thank you! 🙂 That makes all images left or all images right, if I get you right. 🙂
What I thought was, that on one post the image is left, than the next one right, than the next one left again and so on. 🙂 That would be something really eye catching.
I know it could be done by making separate post modules and making excerpts, but automated… you’d be my hero. 😀
Hi Nelson, thanks for the tutorial! And not only this one 😉
How can I reduce vertical distance between list items?
Hi Rogier,
Sure, you should be able to reduce (override with important) the margin bottom on each of the .et_pb_post.
If the post title is longer and takes two rows for example, what happens with the excerpt? Does the CSS code takes care about this? Because if you have a fixed word count defined in DIVI, the exerpt will just go out of this “imaginary” box shape. Please let me know.
Hi Milan,
Can you show me a link? It should just flow…
Hi Nelson. So, here is the situation: I copy pasted your CSS code in the Custom CSS section on Page Settings here https://www.howtodigitalstuff.com/guides/ (it is live now). What I am concerned is that the featured image is not aligned on the bottom with the post excerpt. What I would like to achieve is: the post title to be aligned with the top of the image, and the bottom of the image to be aligned with the last sentence of the post excerpt – so it would be visually appealing. If you go to the home page of my blog you will notice that more or less this is accomplished with only one exception: and that is when the length of the title is longer and it continues to the second row, then the alignment on the bottom is broken.
Can you advise?
Hi Nelson, really great tutorial just what I was looking for, however I notice its thrown the dynamic headings I have on some of the posts I have and created a wide border around full page. Any idea how I could override this on these pages. An example of this would be at
http://dajocreativedev.com/sva/lot-15-buchley-garage-balmuildy-road-bishopbriggs-g64-3qn/
cheers Dave
Hi Dave,
I’m not sure what you mean. I don’t see a list layout on your link, and I don’t see any issues. Let me know.
No worries Nelson, I achieved same idea with a plugin for now, but will keep the snippet for the future. Thanks again Dave
Great tutorial sir
Thank you very much!
I would admit that you save my hours of thinking and finalizing this type of layout. Thanks
Hi Ahmed, that is great to hear! Thanks for sharing!
Is there a way to target just a certain blog module with this code?
Hi Ray,
Absolutely, with anything you can always add a custom class to the module and in the snippet. Just put it before each of the items in the snippet.
Like this? For example:
.custom_class .entry-featured-image-url { width: 30%; float: left; margin-bottom: 0!important; } /*set the details width*/ .custom_class .entry-title, .post-meta, .post-content { width: 70%; float: left; padding-left: 30px; } }Almost! You would also need it before each item, notice how the comma is used in the second snippet, so you would need it for each of those three selectors.
Love your tutorials, I just added the Reorder The Divi Blog Image, Title, Meta, Excerpt, and also this tutorial to my blog.
But I have a question. When I put it in list move and I do a reorder… the list gets messed up. So I would like the image left, and on the right side : first the meta, then title, then excerpt and then button. Is that possible?
I have not tried that. What happens exactly?
It shows it like it was not reordered. I have two different meta orders in my home page.
Can you share a link? I haven’t tried combining them or looking closely at it yet.
Best R.
If you want to change the order of the items and you are using the second code snippet where jQuery and display flex is used then remove the code given below from the CSS snippet:
.pa-blog-list article .wrap{
width: 70%
}
and add the code given below on its place:
.pa-blog-list article .wrap{
width: 70%;
display: flex;
flex-direction: column;
}
.pa-blog-list article .wrap h2{
order: 2;
}
.pa-blog-list article .wrap p{
order: 1;
}
.pa-blog-list article .wrap div{
order: 3
}
You can change the order number as per your liking. Please let us know if that helps.
Hi Nelson,
Thanks for creating that specific blog module tutorial.
I tried your method but the thing is I’m facing a problem (which shown as screenshot), some of the contents goes under the image.Can you please help me to get rid of.
Thanks 🙂
This might be happening because the image you are using there is very small. Please try adding a different image with increased height and see if that helps. 🙂
Okay sure. I know it’s happening because of image, i want to know is there any way to fix it without depending on image size?
Could you please share the URL of the page where this section is placed so that I could investigate further?
Thank you for the Tutorial!
You’re welcome Doris!
I’m looking for a way to turn the blog module results into a list with only the titles showing. Which in turn could be used to show only a specific number of posts and from specific categories or tags. In other words, no images, no excerpts and no meta data. I have looked everywhere but the title lines seem impossible to style properly. So, a simple list (like the most recent widget lists) please?
If you want to show a simple list with the blog titles, then first of all go to the Blog Module Settings > Elements and disable all the content that you don’t need. As we already have placed the pa-blog-list custom class in the blog module so we will use that for the CSS snippet. Please go to the Divi > Theme Options > Custom CSS Panel and place the CSS snippet given below:
/*This snippet is for removing the margin between the titles*/
.pa-blog-list article{
margin: 0 !important;
}
/*This snippet is for the bullet points*/
.pa-blog-list article .entry-title:before{
content: ".";
position: relative;
top: -3px;
left: -4px;
font-size: 40px;
}
/*This snippet is for hiding the post content div*/
.pa-blog-list article .post-content{
display: none;
}
Let us know if that helps. 🙂
Hi Nelson,
A great post which solved my initial problem. One question, how to I “isolate” the CSS to only one page, e.g. my home page?
For this purpose, please paste your CSS inside the page settings. First, go to the Home Page and enable the Visual Builder. After that click on the bottom center three dots icon and then click on the settings icon. This will open the Page Settings. Go to the Advanced Tab > Custom CSS and place your code there.
Let us know if that helps. 🙂
Hi javascript download work when we paginate the blog module
It works on intiall page load but when we paginate then it looks javacript isnt wrapping the elements in wrap class div
Hi Hamza
Thank you for addressing the issue and you are right that the code is working on the initial page load only. Please try using the code which is given below and see if that helps.
Code: https://www.codepile.net/pile/bPApy4mn
We will update the code in the guide as soon as possible. 🙂
Let us know how it goes.
Hi Nelson, great tutorial just what I needed.
Is it possible to have 2 posts next to each other in a list?
Hi Jody
Could you please try using the code given below and see if that helps?
Code: https://www.codepile.net/pile/VerqQVGX
Let us know how it goes. 🙂
is it possible to have a portrait image is a blog listing?
Please check my other tutorials. https://www.peeayecreative.com/how-to-stop-divi-image-crop/
I’m having trouble getting this to work with a post format set to video. Any thoughts there?
Hey Brian,
I am afraid that I am not able to replicate any issue on my end on your website. If you still facing the issue, please share the exact URL of the page and we will be happy to help. 🙂
This works perfectly on featured images, but when I use Video Post format, the videos appear huge and above the title text. Is there something I can add to the code to make the video do the same as the featured image?
Thank you!
Not sure, can you share a link?