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!
Update 29/09/2017: Due to all the recent Divi updates, the original recipe no longer worked as it should. I have now updated it for Divi 3.0.76+ so you will need to rework your layout if you are currently using this as per the updated recipe below. I also added a free layout download on the demo page
In Recipe #15 I’m going to show you something a little different, how to create a Pinterest style blog layout. When I started Divi Soup I deliberately didn’t start any social media accounts other than Facebook as I really wanted to focus on one at a time and do it well, and seeing as I am partial to bright shiny objects, Pinterest was the last place I should have been spending time .
This week however, I decided it was time to bite the bullet and risk getting lost in the rabbit hole that is Pinterest, and I am glad I did. If you are a Pinner you can follow me here https://pinterest.com/divisoup.
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes
An active child theme (we are going to be editing a little PHP so a child theme is a ‘must have’ for this recipe)
Some existing blog content or sample blog content with images
Cooking time
This should take you around 20 minutes max.
Preparation
The first thing we are going to do is set up our blog module, so add a new section with a single column and a blog module inside the column.
Next, open up the blog module and apply the following settings:
Layout = Fullwidth
Posts Number = 20 (or any large number for the best Pinterest effect)
Include Categories = Anyones you want to include
Show Featured Image = Yes
Content = Show Excerpt
Read More Button = Off
Show Author = No
Show Date = Yes
Show Categories = No
Show Comment Count = Yes
Show Pagination = Yes
Featured Image Overlay = On
Overlay Icon Colour = White
Hover Overlay Colour = rgba(0,0,0,0.2)
Hover Icon Picker = Choose your icon, I have used the magnifying glass with the + sign as it is similar to Pinterest
Next, in the advanced tab, give the module a CSS Class of ds-pinterest-blog
Then Save & Exit and update your page. You will also want to set you section or page background to a colour other than white. I have used #e9e9e9 which is similar to the Pinterest background colour.
At the moment, it’s going to look like the standard Divi fullwidth layout, but let’s change that…
Method
So the first thing we will do is add our CSS. Here is what we are doing:
We are using the column-count property to define the number of columns we want to display. This can be anything you like but I have set it to 7 as this is what Pinterest currently displays on a large screen monitor.
We also set the column-gap property, that’s the space between each of the columns displayed.
.ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 7; column-count: 7; -webkit-column-gap: 1em; column-gap: 1em; }
Next we are positioning our posts relatively and setting them to display as inline-block so they flow one after the other, and also adding a shadow and border radius to our posts to make them look more like a pin.
Then we also need to add that border radius to the featured image and the overlay effect.
.ds-pinterest-blog .et_pb_post { position: relative; display: inline-block; margin: 0 0 1em; background: #fff; border-radius: 10px; -webkit-box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1); box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1); } .ds-pinterest-blog .et_pb_post a img { border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; } .ds-pinterest-blog .et_overlay { border-top-left-radius: 10px; border-top-right-radius: 10px; }
Then comes our post content. We add padding and margin to the content elements so they have some breathing room. The last declaration is optional, this adds the calendar icon before the published date in the meta data.
.ds-pinterest-blog .entry-title { padding: 0 20px 10px; margin-top: 10px; } .ds-pinterest-blog .post-content { padding: 0 20px 20px; } .ds-pinterest-blog .post-meta { padding: 0 20px; } .ds-pinterest-blog span.published { margin-left: 20px; } .ds-pinterest-blog span.published:before { font-family: 'ETmodules'; content: "\e023"; position: absolute; margin-left: -20px !important; }
As the blog module now comes with Ajax loading (yay!), we need to adjust the position of the pagination container so it sits below out posts, that’s what this declaration does.
.ds-pinterest-blog .pagination { clear: both; position: absolute; bottom: -30px; left: 0; right: 0; display: block; }
And finally some media queries. All we are doing here is defining the number of columns that we want to display on smaller screens. So we have 5 columns for smaller laptops, 3 columns for larger tablets, 2 columns for smaller tablets and 1 column on mobile.
You can adjust the breakpoints and columns as you see fit.
@media all and (max-width: 1440px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 5; column-count: 5; } } @media all and (max-width: 1279px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 3; column-count: 3; } } @media all and (max-width: 768px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 2; column-count: 2; } } @media all and (max-width: 479px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 1; column-count: 1; } }
Copy the complete CSS with commenting from the toggle below and paste into your child theme stylesheet or Divi theme options custom CSS box.
Complete CSS
/*--------------------------------------------------*/ /*-----Pinterest Style Blog Layout by Divi Soup-----*/ /*--------------------------------------------------*/ /*Set the number of columns and the space between*/ .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 7; column-count: 7; -webkit-column-gap: 1em; column-gap: 1em; } /*Position and style the posts*/ .ds-pinterest-blog .et_pb_post { position: relative; display: inline-block; margin: 0 0 1em; background: #fff; border-radius: 10px; -webkit-box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1); box-shadow: 0px 1px 1px 0px rgba(184, 184, 184, 1); } /*Add border radius to the featured image*/ .ds-pinterest-blog .et_pb_post a img { border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; } /*Add border radius to the image overlay*/ .ds-pinterest-blog .et_overlay { border-top-left-radius: 10px; border-top-right-radius: 10px; } /*Add padding and margin to the post title*/ .ds-pinterest-blog .entry-title { padding: 0 20px 10px; margin-top: 10px; } /*Add padding to the excerpt*/ .ds-pinterest-blog .post-content { padding: 0 20px 20px; } /*Add padding to the meta data*/ .ds-pinterest-blog .post-meta { padding: 0 20px; } /*Add margin to the published date*/ .ds-pinterest-blog span.published { margin-left: 20px; } /*Add the calendar icon before the published date*/ .ds-pinterest-blog span.published:before { font-family: 'ETmodules'; content: "\e023"; position: absolute; margin-left: -20px !important; } /*Move the pagination container*/ .ds-pinterest-blog .pagination { clear: both; position: absolute; bottom: -30px; left: 0; right: 0; display: block; } /*Media queries*/ /*Change the number of columns on smaller screens*/ @media all and (max-width: 1440px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 5; column-count: 5; } } @media all and (max-width: 1279px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 3; column-count: 3; } } @media all and (max-width: 768px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 2; column-count: 2; } } @media all and (max-width: 479px) { .ds-pinterest-blog .et_pb_ajax_pagination_container { -webkit-column-count: 1; column-count: 1; } } /*--------------------------------------------------*/ /*---End Pinterest Style Blog Layout by Divi Soup---*/ /*--------------------------------------------------*/
So now your blog should be looking a little more ‘Pinterest-like’. But what about those images, they are all the same size right? Let’s fix that.
This is where we edit some PHP, if you have a child theme active like I mentioned in the prep, then you will already have a functions.php file. Open that up, copy and paste the contents into a text editor and save it somewhere (so you have a back up in case the worst happens!)
Now, in your functions.php file, scroll to the bottom and after your last line of code paste the code below.
function mycustom_featured_width( ) { return 320; /* Custom featured post image width */ } add_filter( 'et_pb_blog_image_width', 'mycustom_featured_width'); function mycustom_featured_height( ) { return auto; /* Custom featured post image height */ } add_filter( 'et_pb_blog_image_height', 'mycustom_featured_height'); function mycustom_featured_size( $image_sizes ) { $custom_size = mycustom_featured_width() . 'x' . mycustom_featured_height(); $image_sizes[$custom_size] = 'et-pb-post-main-image-thumbnail'; return $image_sizes; } add_filter( 'et_theme_image_sizes', 'mycustom_featured_size' );
What we are doing is adding a custom function to change the height of the blog featured images so they are not uniform like default. We have changed the height to ‘auto’ so Divi will always display the image at it’s full height and this is what gives us our staggered Pinterest look. Make sure you save.
Now we need to make one more PHP adjustment and for this we need to add a file to our child theme. The function we just added adjusts the images for the blog grid but not for the single post layout, so if you have tall featured images as you see in my demo then on the single page those are going to get cut off by Divi’s default image settings, we are going to fix that now.
You are going to need an unzipped copy of Divi, make sure it’s the latest version which you can download from Elegant Themes. In the root folder you will find a file called single.php, copy that file to your child theme folder.
Now open up your single.php file and locate the following lines:
$width = (int) apply_filters( ‘et_pb_index_blog_image_width’, 1080 );
$height = (int) apply_filters( ‘et_pb_index_blog_image_height’, 675 );
These are the standard Divi featured images sizes for the single post layout. What we need to do is change the height to auto so it looks like this:
$height = (int) apply_filters( ‘et_pb_index_blog_image_height’, auto );
This will change the single post featured image so it always shows at full height. You can skip this bit if you don’t have tall images but it is kind of the point of a Pinterest style layout .
Then, save and upload to your child theme folder.
And that’s it. you should now have a Pinterest style blog layout similar to my demo.
If you also want the Avatar showing as was in the previous version of this post, a better way to do that so it adds the image automatically is by following Recipe #29 – How to add the author avatar to your Divi blog.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi, Michelle,
Thank you so much for your post. I followed your instruction and little bit tweak, and I got a result that I want at the end.
Now i’m trying to make my site’s search results also looks like pinterest, but its pretty hard to figure out by myself.
so, if its possible, may I ask any suggestion about it?
Thank you.!
That’s a bit much to post via a comment reply, but we’ll consider it for a future recipe. In the meantime, you can find a nice Search Layout Injector plugin here: https://elegantmarketplace.com/downloads/search-layout-injector/
Hi Michelle,
The code works great for the blog module in Extra. But what I would like to do is have Pinterest style images displayed with the Blog Feed Standard Module in the Extra Category Builder. Could you show me the php Code and CSS needed to make this work? That would be terrific!
Alex
Unfortunately, we’re Divi folks around these parts. There are some Facebook groups that include tips and resources for the Extra theme – I’d recommend trying one of them.
Hi Michelle,
I use your code and everything works fine but I want to modify some data. Unfortunately I can’t do that by visual builder I’m still learning css, php etc and visual builder is very helpful with that because I can see at real time what I chane. Do you have any idea why visual builder doesn’t work with this code?
The visual builder will not pull all of the code from a child theme so you will not get a true representation of the layout in the VB, you need to use the backend builder.
Thank you for your answer
Hi Michelle,
thanks a million for this tutorial, its amazing. Have added all the css and did the functions files bit, but the page keeps displaying only 4 columns, instead of 7. When I open your demo on the same screen it displays 7 columns.
Any idea on why this could be happening?
Have you set the row to be full-width and changed the gutter to 1? Also check your content width in Divi > Theme Customizer > General Settings > Layout Settings
Hy Michelle,
Please help me to fix my image height that always automatic cropped to 219px everytime i create new post.
this is my site: droidroid.com/wallpaper
Did you add the code to functions to change the image size?
Hi Michelle, I would like to say thank you for having this great tutorial. I’m pretty sure I’d be using this forever. Everything worked out just fine and as expected, but the 3-column Divi layout from the latest update is so frustrated and keeps me from changing it to 5 as in this tutorial. Even though we have called the media string for 5 columns, it still shows up fixed 3 columns on my blog. For example, I use your CSS code for -webkit-column-count: 5 and column-count: 5 for @media max-width: 1440px but it still shows only unresponsive columns. As… Read more »
Do you have the module set to fullwidth? Sounds like it is set to grid.
Hello Michelle,
Are you aware of the fact that the column-count CSS rule is not well supported with all browser versions? Not even some newer ones?
I wonder why you did not implement javascript (masonry.pkgd.min.js) for this.
Is there a specific reason for that?
Regards,
Marcel
It’s actually very well supported Marcel https://caniuse.com/#search=column-count and I only use JS when there is no other viable CSS option. Also if you follow my blog you will know I do not create anything with IE in mind
“Not creating anything wit IE in mind”, that’s an example for everyone! Thank you for you reply.
Hey, Michelle
I am happy with dive’s 3 column blog layout. But I want to reduce the gap between the blog modules like your pinterest style. Can you give me the little code?
Thank You.
Or Can you give me the old code?
Not without a link really but I believe there is a default margin from memory, so try adding:
.et_pb_post {
margin-bottom: 20px;
}
And adjust as needed
Michelle your recipes are so easy to follow and the baking style instructions was genius!
Thanks Stephen!
Hi Michelle.
I have been using this pinterest layout on my blog since you firs released the tutorial, and I have been very happy with the layout. However, I changed it to 5 columns on my blog. The weird thing is that after the latest update of Divi the layout is 3 columns. I See that this also happened to your demo. Is it a way to get this back to normal again? And… thank you for your great tutorials!
Regards, Finn-b Norway
Hey Finn. I would need to take a deeper look at this to see what changed in Divi and provide a fix. I have a few tutorials I need to update so will add it to the list
Thank you Michelle.
This has been updated now Finn
Great Michelle! Thank you
How to get between 3 columns on your demo more closely ? https://playground.divisoup.com/blog/
my website :
I am not sure I understand the questions completely but to add more or less space between posts you need to adjust the margin property
Hi michelle, how to change to three column like your demo https://playground.divisoup.com/blog/ ? please help. This blog so beautiful. I love the design. please share the code to my email.
Hi Michelle, Your tutorials are awesome. But I got a serious problem after using this css code.
I copied all these code to my child theme to look my website blog post like pinterest and it worked fine. But I don’t want this pinterest code on my every blog post and decided to remove it. But After I delete my child theme, my website is not looking like the previous blog post style.
Please help me to get back to the original style.
If you have removed all the code added as instructed by the tutorial then I would try clearing all your caches. There is no way that the styling can remain if you deleted all the code.
Hello anyway to just remove the excerpt section all together? and make the code look like this site? https://www.lindsayadlerphotography.com/index . Sorry if this is too much, I figure it might be a few tweaks. Thx so much
Its not too difficult actually, just switch off all the options foe the meta date in the module and then add the following CSS
.et_pb_blog_grid h2,
.post-content {
display: none;
}
Obviously don’t add the section at the bottom for the avatar
Hi Michelle, you create wonderful opportunities to make DIVI even more beautiful! However I put all the code in the right place but I don’t get the beautiful Blog, Grid lay-out you created. Can you tell me what I’m doing wrong, or what I am missing?
I would need to at least see a link to your attempt please to be able to see what is wrong
Hi Michelle, Thanks for the excellent tutorials. I can’t get the images to change size in the grid. I have included the code in the functions.php of my child theme see below. Please help.
Can you paste your functions.php code or a link to download the file so I can check it please Alan, also a link to your site.
And check you have cleared browser, plugin and server caches
Thanks, Michelle, I have cleared everything. Here is a link to the code: https://gist.github.com/noballgames/eab5bd30749024259bfd2a1a44414f8d
I also followed the tutorial for styling the individual posts, but this isn’t working either.
The CSS for rounded corners and 3 columns works fine as does the excerpt CSS – it would be good to be able to do this with php and have the categories live.
All the best
Alan
If your styles are not applying I am thinking there may be something wrong with the enqueue method in your functions file but not completely sure. Try replacing the entire contents with this https://pastebin.com/uK8NiX42
Hi Michelle, I sent you a link to the code and dd all you advised. I thought my reply went for moderation, butit’s been a week or so now so thought I should check.
Thanks for the tutorials, they are helping me a lot.
Michelle, firstly, thank you a billion thank yous for divisoup and the tutorials. Your posts possess the sweetest explanations and simplest steps to create substantial changes to a website. I’ve clicked through several Divi tutorials in the last 2 months; but, divisoup.com is the best of the lot to know the real potential of Divi. You make a lot of lives easier (and more colorful, if I might add). I came on here perhaps three months ago, in search of this exact post. And achieved the style in minutes. Thank you so much, Michelle. I have a question, though. Can… Read more »
Thanks so much for your kind words Nikhil, glad the resources are useful for you
Yes it should be possible but with different selector obviously. I will add it to the list of recipes and see if i can get to it soon
it’s great!! How can I change the font?
Fonts are set in the design tab of the blog module
Thank your for very nice blog solution!
I have one more question.
Features image is fine, But when youtube video is in placed, radius does not work.
Please take a look at my blog.
http://empowering.kr/blog
Can you provide any solution?
If it is too much work for you, it would be fine that you dismiss.
Appreciate your awesome work!
It seems you are using some plugins for the blog, and it is extra. So the selectors will be different
Great, thanks.
I’m trying to implement this on a website. Would it be possible to set 3 columns on a 3/4 section so it’ll leave some space on the right for the sidebar?
Shouldn’t be too difficult by changing the columns width etc. here:
@media only screen and ( min-width: 981px) {
.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before { content: '4 .column.size-1of4' !important;
}
.et_pb_column_4_4 .column.size-1of4 {
width:25% !important;
}
}
@media (max-width: 980px) {
.et_pb_column .et_pb_blog_grid .column.size-1of2, .et_pb_column .et_pb_widget:nth-child(n) {
width: 50% !important;
margin: 0 !important;
}
}
I love how different this is, and varies from the standard divi blog layout … adds a great feature.
Thanks Leisa
I’m new in Word Press.
Is there a way to put a menu with categories and when the user clicks, it will show only blog posts of that category?
Thank you!
Yes there is, in Appearance >Menus, in the left hand side you can choose pages, posts, categories etc.
That’s amazing!!
Congratulations!!
Thank you very much for this tutorial, but I still have standar height on my image and I not undestand why.
Can you help me pls?
You can see here
https://arttrip.it/
Looks fine to me?
Thank you for awesome recipe. I have one question. I have not tag ?> in my functions.php in my child theme. How I add your php code in my functions.php?
Its fine if you don’t have that closing tag, it will still work
Awesome. What about change the layout from 3 to 5, 6 columns on desktop, do you explain it?
You can take a look at this recipe which should give you a start on changing columns https://divisoup.com/how-to-change-columns-and-image-sizes-in-the-filterable-portfolio/
Hi Michelle, thanks for this great tutorial! I had a bit of a problem with the function.php on my child theme so I skipped the part after the function.php. I would like to have a smaller font and no letter-spacing ( in the excerpt ) so it matches the blog posts on the homepage, but I can not get it right.
Site is under construction though, but can you help me to set it up right?
Can only help with a link where I can view Claudia
Thanks so much Michelle for this and all your other superb tutorials. They’re really awesome!
Very welcome Alina and thank you!
This is amazing! Thanks a lot! I just tried it – awesome!
Best, Bettina
Woah this is awesome!! I’ll try this in my website soon!
Hi very thanks for this article,
The code for show 3 big colomns instead of 4 not work, you have may be an other code who work?
Thanks in advance
Tino
Sorry for my english i am french.
Tino there is no code in this recipe to show 3 columns, but in theory you can leave out the CSS that changes the layout to 4 columns and it should be fine, you may need to adjust padding and margin a little
Hey! I love this Layout so much. I am very new to all this, so I have a website that I created. and I added a blog page to it. So my website is not only a blogging site. can I add the above CSS code and function.php to it without affecting the other pages “home, contact me, work with me, about”?? I did all the changes, but reached to the excerpt and its not working. I would add a new post, it won’t show in my blog. and I can’t add text to my blog. I don’t know what… Read more »
Yes you can but you will need to use a child theme in order to have the adjustments in functions.php or it will get overwritten when Divi updates.
Also, be sure you do not have a blog page set in the reading settings
LOVE this! Divi’s archives leave something to be desired (http://www.likoma.com/i-like-divi/), but this helps at least on a page index! If Divi could just have something like what you’ve created for their own archives (and search and category index and tag index, etc.) then I’d be thrilled (and I could stop using Avada!).
Thanks again for the awesome tutorial!
It’s actually not that difficult Bradley. You can use the additional classes .single and .archive to add the layout to the default WP pages
Thank you, it’s awesome ! For information , I styled also the galleries to get rounded corners with these lines in the CSS : .et_pb_blog_grid .et_pb_gallery_post_type .et_pb_slide { border-top-left-radius: 10px; border-top-right-radius: 10px; } Two questions : 1. To have the same layout for categories and tags, could you be a bit more specific with “You can use the additional classes .single and .archive to add the layout to the default WP pages” ? Not sure what to add where… 2. The font size does not work, I get the default size for meta and content text. How can I override… Read more »
Try adding !important to the font sizes.
The code you want will be:
.single .et_pb_blog_grid .et_pb_gallery_post_type .et_pb_slide, .archive .et_pb_blog_grid .et_pb_gallery_post_type .et_pb_slide {
styles
}
Hello Michelle.
Thanks for this tutorial, i am desperate to do this to the category pages too.
Are you saying that to add this to a category (or archive) we need to:
TAKE THIS
————–
.et_pb_blog_grid .et_pb_post
AND MAKE IT THIS:
————————-
.category .et_pb_blog_grid .et_pb_post
For all the css elements you added for your “Pinterest Blog Layout”?
I would really appreciate your guidance here.
Thank you.
Yes that’s correct, but you would actually use .archive and that would apply the styling to both category and archive pages. You will also need to follow this tutorial to apply the grid layout to those pages https://www.elegantthemes.com/blog/divi-resources/how-to-give-your-divi-archive-pages-a-masonry-layout
Hi Michelle,
Thank you for this useful article. I put it in action, and it works under Chrome, but with Firefox, Opera or Internet Explorer nothing appears.
Do you have an idea what I can do?
Thanks.
I really would need a link to take a look, my version is working fine crossbrowser
Hi Michelle,
I followed every line, and got a nice result in Chrome, but in Firefox,Opera and Safari nothing appears eben I have the scroll bar showing, that means something should show.
Do you have an idea from where it could come?
Thanks
I would need a link to take a look please Hubert
Wow! Another incredible improvement to my site. Thank you so much. I did get stuck at finding the PHP lines, but the first part improved my blog significantly. Thank you! I have been living on your site since I found you….#grateful!
Glad it was useful Andrea
Michelle, someone in the Divi FB group shared your resources with me. This recipe renders a beautiful result! I really appreciate all your sharing on this website. I can tell
it’s a labor of love.
I noticed on the demo that upon scrolling to the bottom, no new posts loaded. Is that not a part of this recipe?
Thanks,
Dave
Thanks Dave!
No that isn’t part of the recipe, as it is not a feature available within Divi. You would need to try a plugin or some custom PHP I expect
hi michelle very good layout , I congratulate you , I have a query, I ‘m using for a customer and wants everyone to have the same high , I need to limit the characters in the excerpt as I can do ? thank you very much
Try this recipe Gabriel https://divisoup.com/how-to-change-the-excerpt-length-of-divi-blog-posts/
Sorry Michelle. Found it and sorted it. Cheers and sorry for hassle.
No worries Justin
Hiya. This recipe is awesome! I have done all the steps except for the one where I add the modified single.php file to my child theme. How do I do this or can you recommend any instruction videos for me to follow along to? Again, great work!
Justin it is not single.php
You will already have a functions.php in your child theme, go to appearance>editor and with your child theme active select functions.php from the right hand side and edit there
Hmmm. I looked it the functions.php you pointed me to but this is the only code that was there function mycustom_featured_width( ) { return 320; /* Custom featured post image width */ } add_filter( ‘et_pb_blog_image_width’, ‘mycustom_featured_width’); function mycustom_featured_height( ) { return auto; /* Custom featured post image height */ } add_filter( ‘et_pb_blog_image_height’, ‘mycustom_featured_height’); function mycustom_featured_size( $image_sizes ) { $custom_size = mycustom_featured_width() . ‘x’ . mycustom_featured_height(); $image_sizes[$custom_size] = ‘et-pb-post-main-image-thumbnail’; return $image_sizes; } add_filter( ‘et_theme_image_sizes’, ‘mycustom_featured_size’ ); ?> No mention of what you have above: You are going to need an unzipped copy of Divi, make sure it’s the latest version which… Read more »
Apologies Justin I forgot about that part of the tutorial, its a while since I wrote it.
The instructions for this are in the tutorial. Copy single.php from the Divi parent theme and add it to your theme, then in the child theme single.php where it sets the image size around line 37, change 675 to auto and then save. That’s it.
Thanks for replying so quickly Michelle. This is the part I’m confused about. I have DLed and made a copy of the single.php from the Elegant Themes site OK and made the changes to ‘auto’ but to add it to my theme (I’m already using a child theme) would I need to reactivate the parent Divi theme and then update?
“Then, save and upload to your child theme folder.”
Does this need to be done in CPanel using FTP?
Sorry for all the confusion.
Hi Michelle,
Thanks for sharing this.
Is it possible to change the code to show 3 columns instead of 4 ? – Can you give any direction where to change ?
Adding this should do it Rene, but you will need to play with the padding for screen sizes above 1024px as the images will be deeper using 3 columns
@media only screen and (max-width:1025px) {
.et_pb_gutters1 .et_pb_grid_item:nth-child(n) {
width: 33% !important;
margin: 0 !important;
clear: none !important;
}
.et_pb_gallery_grid .et_pb_gallery_image {
position: absolute;
width: calc(33% + 1px) !important;
}
}
LOVE this tutorial.
Is there a way to automate the excerpt field? So that it automatically completes the author etc fields and still do an extract?
There should be yes. There is a function on this stack exchange post that might get you started http://wordpress.stackexchange.com/questions/110355/guest-author-how-can-i-use-custom-fields-to-create-guest-author-link
Hi Michelle I love this tutorial again thank you!
My only questions would be how do I achieve this same effect for the category archive?
Thanks!
Rambo generally you need to edit the PHP file. I have created custom styling on the category pages on http://versatile.divisoup.com by copying the index.php file from Divi and renaming to category.php and then uploading to the child theme folder and adding styling using .category in the CSS so you may be able to achieve it that way I just haven’t tried.
Hi Michelle
This may sound a strange question, but is there a way to re-direct the pinterest pin to a totally new link opposed to the blog post?
Yes Mario but would require PHP, I am not sure on the code as I am not a PHP developer
Hi there! I’m looking for some coding to make my blog look like this – aholyexperience.com ..
I could make it full width but not like the “odd even”.. like appearing featured image on alternate side ..
here’s the bog – ksim.org/blog .. help would be really appreciated..
Its you’re lucky day Elna, check out my latest recipe
https://divisoup.com/how-to-create-a-fullwidth-alternating-blog-layout/
Thanks for the code. I decided to stick with the default three columns and didn’t bother with the author section in the bottom of each post. I wanted the flat look too, so I didn’t bother with the drop shadows.
I used the rounded corners and the uncropped multi-height featured images. Still looks great.
Me again,
I forgot on both sits place excerpt text [short text of post] in excerpt field. Now it works well.
Great!
Hello Michelle,
excerpt doesn’t show on blog page. I have thumbnail, meta and small author image with his name. If I delete HTML code in excerpt field, I can see excerpt text. Two examples: http://www.deline.sk, .
Any idea to fix it, please? Thank you.
Thanks so much for sharing this! I’d figured out how to do this in an earlier version, but when I updated I couldn’t re-figure-it-out for the life of me You’re awesome!
Welcome Marie
Michelle,
you can easily test this yourself. The plugin is: “Nelio External Feature Image plugin”. It is free and very easy to use.
Now, using it with the pinterest recipe…. What I see when I look at the generated code, I don’t see any reference to an image….
Hi Michelle,
great stuff!! I wanted to convert my personal travelblog to something more pinterest-like and this is just what I need
One question/problem tough: I keep all my images on Flickr and use the Nelio External Feature Image plugin to be able to use external images as featured images. However, this doesn’t seem to work with your recipe Any idea why?
Yes Rob, this targets and formats the default featured image, as you are using a plugin the selectors would be different. If you set it up and provide a link I can see if I can get it working for you.
http://www.robandkarindive.com
It is still very much under construction
The upper left entry has a featured image configured using a URL. The other two entries have ‘regular’ feature images. So that works.
It is all Dutch, but I’m sure that won’t confuse you
If you can quickly figure out if it can be done: I would appreciate that! If not, don’t worry, then I’ll download lots of images and put them in the media library (but I’m hoping you can find a quick fix!)
Thanks for helping!!
Sorry Rob I can’t seem to find it on your site, can you give me the direct link to the page you mention please
Huh? It is http://www.robandkarindive.com
Copied and pasted from the URL bar….
When I open that page I see Anticipate and no way to progress without entering an email address?
That’s weird….. I now see that in several browsers as well ?!?
Works fine in Safari, seems to be wrong in other browsers. I’ll figure this out first and let you know when that’s done.
FIxed! I forgot I had a plugin that was activated to keep the site in maintenance mode…
Anyway, you should be able to access the site now. I’m curious is you can find a quick way to use a URL-based feature image!
Hi Rob
As the featured image is not displaying for that post I am not able to inspect it. Would it be possible to do two things please. Set up a test blog page with the standard blog layout but using your plugin so I can inspect it and see if it can be changed.
And secondly, if you could send me the name of the plugin you are using.
Thanks
Hi Michelle,
Thanks for this, it was exactly what I was wanting! I’ve got it looking great now except that for some reason in Safari it leaves a big long blank space under the footer – is this something that I’ve done or is there an easy fix? Thanks again
Can you provide a link please Francesca
Sure, apologies! http://www.divegirlasia.info – it seems fine on all other browsers, just safari!Fr
Hi Francesca. I don’t use Mac but have looked on Safari in Windows and I cannot see anything wrong. Have you tried disabling the blog module to see if it causing the problem?
Hi, I really like how you’ve done this. It looks fantastic. I saw you said it was possible to set up custom fields to automate the author image, could you share how? I’d really like to do that too.
Hi Ollie, sure if you can add it as a recipe request I will do my best to get to it
I really like(actually LOVE) it on desktop. Less so on Mobile though. The Headings are coming through smaller than the body text. Any quick fixes for this?
Thanks for the constant new ideas, love trying them out
Hi Kate
This is because of the settings you have in your own environment, the tutorial does not style the headings and body copy, only the author and category text below the excerpt. So you will need to set your font sizes for mobile and tablet in the theme customiser or style sheet CSS.
Loved this recipe. Superb!.
Would love to see more tutorials about the blog page, because i think it’s the “unsolved” feature (in terms of customization) in DIvi
Thanks very much, I am looking to do some more blog based designs
Thanks. I’ve been trying to working on doing this forever! I so short on time these days. Michelle you’re amazing!!
Thanks Robyn
So KWL
Thanks for sharing this Michelle
Pleasure Chat
Michelle,
Thank you so much for this recipe. One thing I don’t like from Divi, is once you clicked on the title of the blog post the user sees the blog post itself, but is unable to return back to the overview. I think Divi is lacking in navigation. What do you think?
Hey Fred
Yes I think you are right, you could however customise the post navigation module to go back to the main blog or the next post and set that as a global module to apply to all posts. Just a thought
Thanks for sharing important views…