Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Elegant Blog Page Free Divi Layout.
This free Divi layout includes beautiful and elegant custom styling for your website’s blog page and sidebar. Using the native Divi modules, custom CSS and JavaScript to style and reposition elements, this layout will give your blog a truly unique look.
View the demo and download this free layout plus 24 other awesome free Divi resources by subscribing below.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi, love this layout! Two questions though – Is it possible to:
1) Change the meta info for different sections (e.g. remove author, comments, but keep date, category)
2) Change the number of categories that show per section
Thanks for your help!
Best,
Greg
Hi!
Thank you for sharing this:)
Wondering why the first section(slider) is not showing ?
Impossible to say without a link to the problem.
Thank you for the download! I love it, Now I want to use this deign on a single post layout page. I like to match it. How can I do that?
There is a child theme included with the Academy membership: https://divi.academy/membership
It takes this layout and extends it, demo here: https://valentina.divisoup.com/
Love the layout..thanks!
1) How do I edit the text in the Newsletter box on the right side? When I go into the text module the only text that shows up is “newsletter” – I want to edit the text under that.
2) I want to connect Mailchimp. I have the code – where do I place the code to connect the newsletter?
Thanks
All of this is done in the email optin module
Hello. I have a problem. I creaeting blog for my friend. I installed elegant blog page layout. I upload json file. But some things missing. ( read post, read more, design on images )
Hello
Does the about me and author sections allow you to use multiple author details on the page
The about me section is just a widget, so you can add more if you wish, just copy the code and adjust as needed.
Hi. Sorry bit I cannot find the link to download the file…
..and YES I subscripe
Scroll up this page and click the green SUBSCRIBE TO DOWNLOAD button. Doesn’t matter if you did it before – you’ll need to do it again. Wait a moment and the screen will refresh with the download link.
I have literally searched everywhere for this CSS file you speak of and cannot find it anywhere. I don’t see any code module on the page or in the back-end. Other than layout, my page looks nothing like yours. Please advise.
It is included in the download and is titled css.css
Thank you. I did find it after reloading it. It just didn’t load right the first time.
I love your work! It has definitely been easier customizing my companies divi-site. One question I have is if its possible to change the borders on the headings? I couldnt figure that out.
Yes, they are actually outlines instead of borders. Look for the code below in the CSS:
.ds-advent-24-header-grey {
outline: 1px solid #fff;
outline-offset: -4px;
z-index: 1;
position: relative;
}
Hi I wonder if you could please assist / guide me. I subscribed to your newsletter and received the above blog layout page, At first I wasn’t able to see the page, I then read through the comments and saw that under “Reading” settings in WordPress I should leave the “posts page” as blank in order to view the above layout. I did this and was able to see the layout on the specified page on my clients site. In your pack I also installed the “Custom Single Post layout” for the blog posts. This two also works perfectly. The… Read more »
Hey David, make sure you are adding your posts to categories and selecting thos categories in the blog modules on the blog page.
thank you
I still cannot figure out how to customize it with CSS, where is the CSS file located and how to find it?
Otherwise, perfect layout,
Thank you!
The CSS file is in a fullwidth code module in the layout you imported, just copy that code between the style tags and paste into your child theme stylesheet or Divi theme options custom css box.
There is no fullwidth code module in the layout I imported.
It is located at the very top of the imported page – there are actually two code sections: one for CSS and one for Javascript. Additionally, the CSS and Javascript files are included in the download.
I also tried installing this but am having problems. I downloaded the page as instructed and copied the css and JS into my child theme. Frustratingly, the page looks nothing like the preview. Can you please have a look and tell me where I’m going wrong?
forwomenover50.com/blog
Many thanks
Sue
Be sure you do not have a blog page selected in Settings > Reading
Hi Shay,
Yes I checked that in both the child and main theme and the page for posts is ticked as BLOG. I was running Extra before this so wondered whether this was creating a problem. I’ve now deleted both the Extra and child themes. Still not registering the css changes.
You need to change that in WordPress, not a theme or child theme. It is found by going to Settings > Reading from the WordPress admin dashboard.
Thanks for your response. Yes, sorry wasn’t very clear. I’ve done that but no change. I’ve raised a ticket with Elegant themes as I think there is a broader issue. Will report back when I’ve heard from them.
That’s a bummer
It could be one of so many things from a plugin conflict to other CSS overriding things. Hopefully they can get it sorted out, but definitely keep us posted.
Hi Shay,
All up and running now. Not sure exactly what was wrong but after some tweaking by the support staff at Elegant Themes it’s now working perfectly.
Thank you for your support. Really pleased with it now.
Kind regards
Sue
Awesome! Glad they got it sorted out and working for ya
Hi,
I tried installing this. Where can I find the CSS and jquery so that I can tweak it? I cant seem to find those. Currently the sidebar doesnt look too well, and the design of the latest post doesnt look nice, and the blog posts beneath dont appear.
http://veggino.jp/test2
When you import the layout into a new page you will find that the code is in labeled modules
https://support.divisoup.com/support/solutions/articles/29000018719-instructions
how i can make blog post like this
https://www.selenasoo.com/blog/
You can do that with the Divi Builder – or you can use this layout if you want something nicer.
Is it possible to have a blog layout where the title overlays on the featured image.. like on this site – https://www.christiancopyrightsolutions.com/blog/ the first top section?
You can use the Post Slider Module for that. We also have https://divisoup.com/f8-custom-post-slider-module/ and https://divisoup.com/f15-two-tone-post-slider-module/
Hello Michelle,
any change to use also the layout for the posts? That would be awesome
http://advent2017.divisoup.com/nisl-tempus-convallis-id-orci/
If you are a Divi Academy Club member, the week 55 resource “Valentina Child Theme” includes that styling in posts. This isn’t a free resource, but you get a lot with membership. You can find out more and join at https://divi.academy/membership/
Hi Michelle,
we are using Divi 3.0 but importing the layout gives a Portability error message saying “this file should not be imported in this context”.
It looks like it is not compatible with DIVI 3.0…or?
Maybe we are doing something wrong and we could use it?
Looking forward to your reply
THX!
Be sure you are following the included instructions and importing into a PAGE, not the Library. A link to the instructions is included with the layout download and are posted here: https://support.divisoup.com/support/solutions/articles/29000018719-instructions
Oh, and another question arose: The Featured Categories CTA buttons, should they lead one to a page with just those categories? Mine are not really set up that way from the layout download. Also, if I DO click on a posts’ shown category, say “FASHION”, I get a new page called website.com/category/fashion and the layout there is very general. Do I need to style another page for each of these categories? Thanks! This is the page of my site that has caused me the most stress!!
This is for a blog page layout – not archive pages
Love this layout! The Grid format part for me, even if I put 6 or more posts, is giving a one column layout instead of the 2 column I see above. And my pic from the post is huge. How can I get that 2 column as above? (It’s on a test page, so not in public view yet. I didn’t change any code, and everything else is straightforward and OK)
Without a link I cannot see what you did wrong. If you use the layout as is, it will format the same as the demo.
Michelle, You are a life saver! I needed to set up a blog for a client website I designed and this layout is just perfect. Setting up a blog using Divi is challenging to say the least. I would have honestly paid $15-$30 for the layout if I had to. It is that good. I am a copy and paste type of CSS coder at this point, but I was able to figure out how to brand my clients colors as needed in the CSS as you have it labeled so good that it was easy to figure out where… Read more »
Thanks David! We appreciate the feedback.
Hi Michelle,
Your website is very nice, useful and inventive.
Can you send me this Elegant Blog Page Layout, please? That’s a very nice of you to offer.
Thanks in advance for any help.
Ildikó from Hungary
You must use the subscribe to download button at the bottom of the post.
Hi Shay, thanks for your help. I have tried it, but unfortunately failed. The download button shows the subscription button. I’ve already filled it, but I didn’t get the download link. What can I do?
It works fine for me any many, many, many others. So perhaps try a different browser. You have to subscribe, there is no way around it.
Oh Shay, I’m sorry, it was my fault. All better now
Awesome!
Hi Michelle,
Thanks a lot for such a beautiful layout. I was trying to implement it on a friend’s blog and everything looks great except one problem. The first post under Latest posts is breaking the format. Do you know what might be causing this problem?
https://www.spoonsandsneakers.com/homepage-2/
You have the module background colour set to transparent, change that to white. Then add the following CSS:
.ds-advent-24-blog-fw .et_pb_post a img {
width: 100%;
}
Thanks a lot! You are a rockstar!
Hi! So, question for you: As soon as I finish customizing my new fab home page and save it, all the pretty white borders disappear from the taupe buttons/headers simultaneously. Poof. Any easy way to get them back? I started over and went through this whole process a couple times before I realized it might NOT be user error.
I started trying to add them back in manually but it’s just not the same. Would love advice.
Do you have a link to your site please as I cannot tell without seeing it.
Hello Michelle I subscribe and download the free divi resources but when I try to install it on my website it tells me that there is no style.css. What can I do?
This isn’t a child theme, please read the Read Me file included in the zip file
Ok, thank you.