Thanks a bunch! I will never understand why Divi isn't natively set up to do more than 2 options...but thankfully people like you come along and help out the rest of us who couldn't figure this out on our own! :)
I'm happy to help where I can! I know Divi wants to do more, but also relies on the community a lot, which makes it special and unique. I'll keep on doing it!
I sooooo wish I'd found this before I purchased a layout lol. Your commentary sounds like how I talk about computers. Loved it, and thanks for the tips!
This helped me a lot! I'm learning so much from you - I was able to add an on hover transformation effect for the individual post piece which was exactly what I needed! Thanks Neslon
I may be the only one, but I've seemed to follow the tutorial exactly and nothing changes with my blog layout. Any ideas? I added the code to page settings advanced css tab and my layout is still the same as before (not horizontal). Thank you!
Not sure if you were able to solve this, but after pasting the code to the page settings, I went to the Blog Settings-->Advanced-->CSS ID and Classes and pasted "pa-blog-list" (without quotes) in the box under CSS Class. Hopefully, this helps anyone experiencing the same issue.
Not sure if you were able to solve this, but after pasting the code to the page settings, I went to the Blog Settings-->Advanced-->CSS ID and Classes and pasted "pa-blog-list" (without quotes) in the box under CSS Class. Hopefully, this helps anyone experiencing the same issue.
Hi, this is great!! How can I vertically align the image and all the content so if the image is larger, the content is aligned vertically at the center of the image instead of at the top? Thank you!
Here's a new idea for blog tutorial, that's been driving me crazy! How to reverse the order in which blog posts appear? I want the oldest to appear on top and the newest on the bottom, so people go through a series in order.
this still works great, but i have some of my blogs on video format, how do you apply this to the videos- even after this css the videos still come out huge
I know that you are somewhat done with the header series but this one is a question for the top header bar in Divi I have hared a lot of comparisons about Divi and extra for blogging but I prefer Divi over extra thanks to the tremendous amount of plugins for it but one thing I like about extra in particular is the secondary menu trending posts and hamburger menu options. is there any way to add that manually to Divi with some CSS, instead of showing contact info? thanks for all your previous tutorials, you literally became my Divi GURU, I now bowse your blog for solutions before moving on to the rest of the web
Hey there, that's so nice to hear how much you are using and enjoying my site. That is great! About the question, so you are asking about the trending bar I believe, is that correct? I will look into it, it will involve more than css though.
@@PeeAyeCreative so about that question, I had a stupid idea to extract the extra themes header PHP and styling files to find the secondary nav bar, & I did find them but I know next to nothing on how to implement it in Divi. I don't what to take chances by copy and paste since it might damage my website or something! should I try it
Hey Nelson, Thank you for this tutorial ☺️. I wanted know about how can we add and style the pagination part in divi blog modules if we have many blogs on the website.
Hi! Thanks for a great tutorial! There are some posts I have that do not have a images(no thumnail) and then there will be unnecessary space to the right and left. I would like the text to fill out on both sides, how do I do that?
Thanks for these snippets. Do you know of a way to add social media sharing icons to the blog posts? There used to be a plugin that did that but it is defunct :(
Hi, is there a way to make the two columns veritcally aligned? I used the css snippet you provided to vertically align them but it placed the title and post excerpt in different columns, i want them to retain the look of the list.
Hmm, the code in the tutorial to vertically align does not change the columns, there must be something else wrong. You can share the steps you took and link on a comment on the blog and my assistant will check it.
That's a great tutorial But can you please explain, if we do all of that, How would we add to the blog a Side Bar for Search, Tags, Ads (Like on your website)? Or did we lose that option when installing all of that code?
Hi Fadhel, I haven't tried it but that should be pretty easy. You can use this in a grid layout and just set the second part of the code where it says float: left; to float: right; instead.
Since I am a bit more an Elementor user...but I do love Divi’s direction, how about you show how to create blog posts, that have a thumbnail on the left, excerpt on the right, that can fit in a sidebar and look great, also could be used for a footer, like recent posts within a category.
Hello there, I am having some trouble applying this in the new version of the divi builder which now separates the custom CSS in different boxes (before, main, after, title, body, post meta, page navi, featured image, read more button). Could you help?
I guess I don't, but I should. You can use either Gutenberg or Divi for the blog post, and there are pros and cons. But either way, definitely use the Theme Builder!
Hi Nelson: thanks for the tutorial. I have a question: how do I apply the code in a single blog module since I have other similar modules in my page!. Thanks for your help.
Do you need to do something in order to actually get to the blog you click on? When I click on a blog it doesn't go to the blog's page 9even though the URL is right). It just removes that blog from the results showing everything BUT that blog. My search module doesn't work either. It just refreshes the page.
@@PeeAyeCreative I didn't add the class input step. It works for me now. I think the video skipped that part. Thank you though and I appreciate the fast response! Keep up the great work!
![[Live] : ONE 168 วันนี้!! "โจนาธาน vs ซุปเปอร์เล็ก"](http://i.ytimg.com/vi/0jIN65KgJsI/mqdefault.jpg)
Thanks a bunch! I will never understand why Divi isn't natively set up to do more than 2 options...but thankfully people like you come along and help out the rest of us who couldn't figure this out on our own! :)
I'm happy to help where I can! I know Divi wants to do more, but also relies on the community a lot, which makes it special and unique. I'll keep on doing it!
I sooooo wish I'd found this before I purchased a layout lol. Your commentary sounds like how I talk about computers. Loved it, and thanks for the tips!
Haha I'm glad you like my style. 🙂
Wow thank God I found your channel 💕
I'm thankful you did!
GJ Bro.
I've just watched and used some of your content. I like the "straight to the point style" in this one.
Have a nice day ✌️
I'm glad you like my tutorials!
thank you, this was very helpful.
You're welcome!
Excellent, the beauty of simplicity
This is timely!
A suggestion for a blog module tutorial is a way to break up the layout. Maybe alternate list layout to grid layout and back again?
Thanks John! Yes that's a good idea, I can show how to do that with the Offset number.
This helped me a lot! I'm learning so much from you - I was able to add an on hover transformation effect for the individual post piece which was exactly what I needed! Thanks Neslon
Thanks you! Appreciate your efforts! It worked like a charm!
You're welcome!
Yay, finally worked. Thank you 🙏
Brilliant once again Nelson
Thanks Barrie! 😊
I may be the only one, but I've seemed to follow the tutorial exactly and nothing changes with my blog layout. Any ideas? I added the code to page settings advanced css tab and my layout is still the same as before (not horizontal). Thank you!
Not sure if you were able to solve this, but after pasting the code to the page settings, I went to the Blog Settings-->Advanced-->CSS ID and Classes and pasted "pa-blog-list" (without quotes) in the box under CSS Class. Hopefully, this helps anyone experiencing the same issue.
Not sure if you were able to solve this, but after pasting the code to the page settings, I went to the Blog Settings-->Advanced-->CSS ID and Classes and pasted "pa-blog-list" (without quotes) in the box under CSS Class. Hopefully, this helps anyone experiencing the same issue.
@@DanikaandCeasar Saved me! thanks!
Hi, this is great!! How can I vertically align the image and all the content so if the image is larger, the content is aligned vertically at the center of the image instead of at the top? Thank you!
Thanks man!
You're welcome!
Here's a new idea for blog tutorial, that's been driving me crazy! How to reverse the order in which blog posts appear? I want the oldest to appear on top and the newest on the bottom, so people go through a series in order.
I have this already in one called how to show the posts in alphabetical order, I also include the code to change ASC or DESC
Great great great help ! Thanks
You're welcome!
Thanks a lot
Most welcome!
Thanks bro
You're welcome!
Love this! Just added it. Question, how would you add rounded corners to this snippet?
I'm glad you like it! You can add rounded corners with CSS border -radius.
thank you so much !!!! but how I center the text?...sorry for my English
this still works great, but i have some of my blogs on video format, how do you apply this to the videos- even after this css the videos still come out huge
Another cool tutorial 👍🙂
Is it possible to alternate the positions so 1st one might be float left but the next would be float right?
Yes, just target them with even and odd like this: /*add media query so changes only affect tablet and desktop*/
@media (min-width: 767px) {
/*set the image width*/
.et_pb_post:nth-child(odd) .entry-featured-image-url {
width: 30%;
float: left;
margin-bottom: 0!important;
}
/*set the image width*/
.et_pb_post:nth-child(even) .entry-featured-image-url {
width: 30%;
float: right;
margin-bottom: 0!important;
}
/*set the details width*/
.et_pb_post:nth-child(odd) .entry-title,
.et_pb_post:nth-child(odd) .post-meta,
.et_pb_post:nth-child(odd) .post-content {
width: 70%;
float: left;
padding-left: 30px;
}
/*set the details width*/
.et_pb_post:nth-child(even) .entry-title,
.et_pb_post:nth-child(even) .post-meta,
.et_pb_post:nth-child(even) .post-content {
width: 70%;
float: right;
padding-right: 30px;
}
}
@Pee-Aye Creative that's awesome!
I'll have to try that our soon. Thanks Nelson 👍🙂
The button tutorial still waiting. Great content
Hi Marco, the blog button tutorial has been out for quite a while!
@@PeeAyeCreative yes just found it.. my TH-cam searching skills are bit off since English is not my first language
I know that you are somewhat done with the header series but this one is a question for the top header bar in Divi
I have hared a lot of comparisons about Divi and extra for blogging but I prefer Divi over extra thanks to the tremendous amount of plugins for it but one thing I like about extra in particular is the secondary menu trending posts and hamburger menu options. is there any way to add that manually to Divi with some CSS, instead of showing contact info?
thanks for all your previous tutorials, you literally became my Divi GURU, I now bowse your blog for solutions before moving on to the rest of the web
Hey there, that's so nice to hear how much you are using and enjoying my site. That is great! About the question, so you are asking about the trending bar I believe, is that correct? I will look into it, it will involve more than css though.
yes! thanks very much. you, my friend, are the best.
@@PeeAyeCreative so about that question, I had a stupid idea to extract the extra themes header PHP and styling files to find the secondary nav bar, & I did find them but I know next to nothing on how to implement it in Divi.
I don't what to take chances by copy and paste since it might damage my website or something! should I try it
Hey Nelson,
Thank you for this tutorial ☺️.
I wanted know about how can we add and style the pagination part in divi blog modules if we have many blogs on the website.
Hi Mayuresh, I will do a tutorial on pagination soon! Already started it 😊
That's Great 🤩!
Waiting for it 🙌🙌!
Hi!
Thanks for a great tutorial!
There are some posts I have that do not have a images(no thumnail) and then there will be unnecessary space to the right and left. I would like the text to fill out on both sides, how do I do that?
This is great, thank you. Is there supposed to be prev/next at the bottom?
The Blog module has pagination which you can enable.
@@PeeAyeCreative I looked, but obviously too quickly. I’ll look again. But I may go with that “briefer” one you came up with. Thank you.
Thanks for these snippets. Do you know of a way to add social media sharing icons to the blog posts? There used to be a plugin that did that but it is defunct :(
Sure, we have a plugin for that: www.peeayecreative.com/product/divi-social-sharing-buttons-maker/
I dont know why but its not works on mobile.
can you do a tutorial on how you created your website also is it a good idea to make a template for the blogs if so can you show how to do so
Can I set the blog post horizontally on my iPad only and leave it vertically in mobile and desktop?
Hi Remi, for sure, that's why we use the media query in the code. Maybe change the 767px in the code to 980px.
Hi Nelson,
That was a great video.
Could you add to it a Read More button or it won't work because of the added CSS code?
Thank you!
For sure, you can have that enabled too.
Thanks! Why isn't this a standard option?
You're welcome, glad like it!
Hi, is there a way to make the two columns veritcally aligned? I used the css snippet you provided to vertically align them but it placed the title and post excerpt in different columns, i want them to retain the look of the list.
Hmm, the code in the tutorial to vertically align does not change the columns, there must be something else wrong. You can share the steps you took and link on a comment on the blog and my assistant will check it.
That's a great tutorial
But can you please explain, if we do all of that, How would we add to the blog a Side Bar for Search, Tags, Ads (Like on your website)?
Or did we lose that option when installing all of that code?
you can add a sidebar to your blog and i guess its inside Theme Options.
Hi James, you can certainly still have another column for the sidebar yes.
How to make this style in tow colmuns or 3 colmuns
Hi Fadhel, I haven't tried it but that should be pretty easy. You can use this in a grid layout and just set the second part of the code where it says float: left; to float: right; instead.
and it will still work if I only want the blog module on the specific page to show only the one most recent post?
Sure, the post quantity setting will not affect the layout.
Since I am a bit more an Elementor user...but I do love Divi’s direction, how about you show how to create blog posts, that have a thumbnail on the left, excerpt on the right, that can fit in a sidebar and look great, also could be used for a footer, like recent posts within a category.
Great suggestion! I will do that!
do you have a tutorial to split this card into 2 columns? How do I keep the text next to the image, but put 2 per column?
I don't understand, what you described is what this tutorial already offers.
Hello there, I am having some trouble applying this in the new version of the divi builder which now separates the custom CSS in different boxes (before, main, after, title, body, post meta, page navi, featured image, read more button). Could you help?
Divi has always been this way. I think you may be missing the instructions about where to add the code, it is not added in the module.
Do you have a basic tutorial on making a blog post with Divi Builder? I assume its using the Text Module, yes?
I guess I don't, but I should. You can use either Gutenberg or Divi for the blog post, and there are pros and cons. But either way, definitely use the Theme Builder!
Hi Nelson: thanks for the tutorial. I have a question: how do I apply the code in a single blog module since I have other similar modules in my page!. Thanks for your help.
Hi Noriaki, to do that you just need to make a custom class and add it to the module and also in the CSS code at the beginning of each snippet.
@@PeeAyeCreative
thanks, i will try
Do you need to do something in order to actually get to the blog you click on? When I click on a blog it doesn't go to the blog's page 9even though the URL is right). It just removes that blog from the results showing everything BUT that blog. My search module doesn't work either. It just refreshes the page.
Not sure what you mean, but something definitely seems wrong with your site that is not normal.
@@PeeAyeCreative I figured it out. It was user error, of course.
Alright 👍
How do you get this to work? I'm using the divi plugin. Put it in the CSS custom. Nothing
Please be sure to follow the tutorial closely, and feel free to leave your link and steps taken in the comments on the blog post.
@@PeeAyeCreative Got it figure out. Thanks for being the guy who actually answers comments. :)
I like to use your CSS Code Snippset, but I get a message from divi, that there is an syntax error. I copied the code from your blog. what can I do?
What is the syntax error? Are you placing it in the correct location?
Does anyone know how to get a list style for mobile? This only works for desktop/tablet. Looking to have a list style for phone.
You can adjust or remove the media queries.
@@PeeAyeCreative I’m kind of a newb and don’t know what that means 😅 is it something I’m changing in the css?
The guide is good but does not refer to the look on a mobile phone, where it looks different
Well obviously on mobile it would stack and not be multiple columns. Not sure what your point was
I did this and nothing changed for me...
Okay. Let us know if you need help figuring out why.
@@PeeAyeCreative I didn't add the class input step. It works for me now. I think the video skipped that part. Thank you though and I appreciate the fast response! Keep up the great work!