All kinds of buttons can be centered. The plugin gives your … As the filterable portfolio relies on projects and is actually very simple to set up, I haven’t included a .json layout with this recipe, but what I have included is something a little better (at least in my opinion). function ds_portfolio_thumbnail_width( $width ) { In addition to the normal blog post type, Divi has an additional project post type that allows you to organize projects like you would for normal blog posts. This number should be your total number of categories, plus 1. I did this and it looks great except when the screen is large than 960px wide, it gets off center, with there being a gap of space on the right side of the portfolio. My newest problem: Be sure to view the ‘Read Me’ file in the download package for full instructions. Loads of free tutorials and layouts, beautiful and unique premium child themes. I wouldn’t suggest changing anything here or your buttons may end up being too small but that’s up to you. Divi Tutorial – Centering the Filterable Portfolio Buttons. I’ve tried troubleshooting this but can’t seem to get it right. Add a percent sign. When I click and choose “Advent 5” in the categories drop down menu, there’s nothing Anyone with the same problem? Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now. We take your privacy seriously, and you can opt-out at any time. Right now the ‘fullwidth portfolio’ is compressed because of the PHP I added. If I erase this code in… Read more ». To calculate what percentage to use in the CSS for the Divi image gallery item aspect ratios, just use this math formula. I only have a problem : when a post category is, for now, empty, how can I change the error message? Please check out CSS Grid recipes for a better way to manage columns. Hi, Found this video fantastic. I double checked, I used the values from the spreadsheet, so I guess it should be something in the formula. My images are at least 500x500px so there shouldn’t be any reason for them to be blurry. Fields 3, 4 & 5 in that row will automatically adjust based on your settings. With the Divi Builder active on a new page, create a new regular section with a one-column row. Forever so grateful for your generosity in sharing your knowledge. How do I get the images below to move up into the empty spaces above? Is there a way to allow the featured images to be their own width rather than full width? Hi Michelle, thanks a lot for your great tutorials. I have 3 rows of projects displayed, and the rows below the first one are limited in height to the tallest images above it. Divi Law Firm Layout Pack (included with Divi) Divi Filterable Portfolio Module (included with Divi) Divi Post Navigation Module (included with Divi) Creating Project Categories for Your Case Studies. Divi Soup 5,169 views. Some projects already set up with featured images (any dimensions but make them all the same), An active child theme, we are going to be adding a little code into functions.php. } Divi Soup offers an incredible range of resources for web designers using the Divi theme. The only problem I am having is that my images don’t appear on mobile. Sorry but I ma not seeing any content in there to test it. I wanted to use 6 columns and it worked great. The following options are available in the DP Filterable Blog module. Since the filtering is done on front side through a JavaScript code, the page does not refresh, making the customized order to do not apply for categories, except … I didn’t work, because I changed the column settings. Do you know what to do? return 768; //portfolio thumbnail width Unfortunately, since the Divi 3.14 update, the columns have gone awry … I’m hoping you can help?! I followed all the steps until it got to the part about adding the code to the child theme for DIVI. I’m trying to achive this but no matter what I’m always getting 4 columns alligned to the left with lot of empty space on the right. The Advent 5 layouts do not show up, when i’m loading layouts. Does anyone have any idea how I can do it? Daredevil sportsbike … Ed Solman. }. Thanks so much, There is a solution here but I would suggest using a child theme and not editing the core files, https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=600053&p=3307401&hilit=sort+projects#p3307401. This free Divi layout uses the native Divi tabs module along with library layouts containing blog modules displaying different categories to show a filterable module similar to what you see in the Extra theme. The excerpt is just hidden with CSS, so find this in the code: .ds-advent-5-content .post-content { Come join the fun in the Divi Soupies Facebook Group. Hi Michelle, However, how do I get the images to move into the empty spaces? Check out our CSS Grid recipes which provide a much better way of responsive column management. Cheers, Adam. It looks amazing! In order to do this, when you click links on this site and purchase items, I may receive a referral commission, there is no additional charge to you. When I do the php to change the image size to the thumbnail, the image looks blurry. Michelle is an amazing teacher - do not hesitate if you have a chance to … I figured it out. It seems like this is something built into the Divi theme, do you know how to fix this? add_filter( ‘et_pb_portfolio_image_width’, ‘ds_portfolio_thumbnail_width’); Filterable Portfolio Design Options. Hello, splendid post, thanks. Yay. I was using this on a dev site and it was working fine. Unzip the downloaded package and you will see the following 3 files: Day 5 - Filterable Blog Module.json (The page layout) Day 5 - Filterable Blog Modu... Mon, 4 Dec, 2017 at 11:47 AM. Truly amazing Thank you so much. However, this requires you to use the "projects" custom post type defined by Divi. Thanks! I went to appearances and down to editor, but unfortunately, I am no given the option to pick a child theme, I only have the parent theme. Check out our CSS grid recipes as its a much better way of managing columns responsively. That would need a PHP edit which is not my forte I am afraid. Now if you add or remove a category just use the calculator to work out your new values and change them as shown above. Can you guide how to use a custom field (project or post) in portfolio? What could cause that? read more. Thank you so much! It would be very useful to get this working. Finally change the two 5.5 margin values to the numbers shown in the Value 1 & 2 fields (these will be the same). This is a wonderful tutorial. In Recipe #27 I am going to show you how to replicate the Library layout I made for my Ventura Child Theme using the filterable portfolio module. So instead of having a two rows; one row with… Read more ». Is it possible to have the posts on more than one line? Parallax Portfolio 2 is a full-width portfolio page where each post in the … I have rebuilt thumbnails, twice. Here’s an example of how I want it to look: http://bumblebee.edge-themes.com/pinterest/, Not something I would be able to explain in comments but you can take a look at this post which should give you some pointers https://divisoup.com/how-to-create-a-pinterest-style-blog-layout/.