Thanks for sharing this Geno. The second section applies to the individual categories. The title is displayed as a tooltip. I just purchased the Essential Grid plugin. 2. The plugin is responsive. Upload the zipped plugin file that’s within the download file, install, and activate as normal. The grid always align at left, then with three columns is is more remarkable. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel), This snippet of CSS will do the following…. The 4 to 3 worked like a charm. I took screenshots of different sizes and used those for featured images and now the portfolio gallery shows each as a different size, so it messes up the look of the gallery. Brown! Great solution. Enjoying your site! It will do what you are looking for. Here’s a look at the 3 column layout. I have two questions about filterable portfolios. I’m facing a bit of a challenge with regard to styling the Fullwidth Portfolio Grid. All images used in the portfolios and backgrounds were taken from Unsplash.com. Within the zipped file you’ll find the zipped plugin file along with a PDF quick guide. I use the latest version of Divi Builder and the version 1 (latest one) of Divi Portfolio Grid. Thanks for visiting! You can see for yourself what happens … two columns with a big space between them: http://new-miracle.mystagingwebsite.com/portfolio-grid-test/. I made it, creating a custom filterable portfolio for my child theme and inserted in ‘$default_query_args = array’: ‘orderby’ => ‘rand’, This one uses different project categories. I would like to make the thumbnail images on filterable portfolio display with their original dimensions. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! It gave me the option to have them tiled full width without any padding but I opted for a little padding. hi, nice blog! have a nice day! and Really. The following two tabs change content below. Now this next step is important if you don’t want your changes to mess with anything else on your site. NB: I do not speak English very well, so I hope my message is clear! The module works like any other Divi Builder module from the backend – so you can drag and drop it within any row, and adjust content, design, and advanced settings. I also wanted to change the hover effect a little to match the color scheme of my site which was dark grey and orange. Hi Susan. Hi Dennis! I know how to change the sizings for thumbs, by tweaking php in “post_thumbnails_divi.php” found in the “panel” folder. } else if ( portfolio_items_width >= 480 ) { Unlimited Websites. Can you help me ? It also includes hover overlays with icons (in grid mode), borders, background, meta, and font styling. I needed to be able to do something similar. The Divi portfolio grid highlights your projects in a four column-wide display with a great hover effect. The button changes from dark gray with light tab text to off-white with dark gray text. You can read more about the options for the WP_Query (I’m new to WordPress) and can actually do quite a bit of filtering using it. Do you have a way to do something like this: IT DOES NOT TAKE LONG TO GET LEFT BEHIND! ‘1080×675’ => ‘et-pb-post-main-image-fullwidth’, Please for image visit: https://imgur.com/a/4Szrl. It’s an easy plugin to use and I found everything to be intuitive. In this example I’ve added a background which shows behind the title and meta. Go to Ess. Awesome. ‘400×267’ => ‘et-pb-post-main-image’, The transition of the hover effect displays a heavier shadow until the transition is completed. Or maybe I’m going about this all wrong? Go to your Dashboard and add a new page. Great tutorial, as always! Doesn’t seem to show up in Visual Builder, either in the display or in the wire frame. Brown is a freelance writer from east TN specializing in WordPress and eCommerce. Divi includes a portfolio module that displays your portfolio in full width or a grid layout and includes all the basic functions you’d expect from a Divi module – backgrounds, fonts, colors, borders, overlays, icons, etc. Its much faster and I feel like I have more precise control over everything this way. Thank you in advance! Sorry for the rant. Hey Geno! Hi Geno! Hi, can you help me with adding space between project images in fullwidth portfolio? I used it here on my portfolio page https://montereypremier.com/portfolio/. If he's not writing or reading, he's probably playing guitar. It not only gives you the standard Divi module features, but also provides a 2, 3, and 4 column layout with new styling features so you can create unique portfolios. Hey Geno, In this example I’m only hovering over the button, so the image doesn’t display its hover effect. Change the portfolio grid columns in your Divi child theme. }. First regenerate thumbs that have a wider aspect ratio, and then tweak the grid to accommodate? For instance I would like to have a fade transition between images once they are open, is this possible? Is there a way to order filterable portfolio projects by TITLE, instead of by DATE? Divi is a registered trademark of Elegant Themes, Inc. Basically I wanted it to look something like this…, Or see the live demo here https://quiroz.co/2014-Demo/portfolio/, 1. Great tutorial, is there a way to arrange tabs/project category not alphabetically? You may need to add in a section of CSS specific to mobile. A background image (of a gray sky) is placed behind the title. I’m currently using the code you have in this tutorial. It looks very good and it’s far better than what I had. Hope it helps on one of your projects . I have a quick question. Thanks. Can anyone point me in the direction of support. Below is the same code applied to the filterable grid. It also includes hover effects with overlay color and icon options when using the grid layout. You’re awesome. First thing you need to do is create a unique section for the Portfolio Grid. The Divi Portfolio Module. Awesome Black Friday Perks For Divi Lifetime Members Are Coming. Unlimited Users. Or i need a plugin for that? Howdy Randy A. I am wondering why this was not implemented in this plugin, since it is a request showing up too often in Divi’s forums. Preview 110+ Premade Websites & 880+ Premade Layouts. The reason I want to do it this way, if possible, is because then I can use the portfolio feature as a resource library and still show specific thumbnail covers where I want them. I’m wondering if there is a way to edit the size of the project image when it is opened? Grid > Import/Export > Import. Now, I see that, this is a great hightlight plugin! But I felt the four columns made things a little cramped as i really wanted to highlight the featured image of each project a little more. This is great, just what I was looking for. rectangle size but keep the masonry effect…, Great tutorial as always. In our example, we add the following class three-column-grid to our module. I now use Essential grid for any non-divi’ish portfolio grids. So what I do is open up an existing png file already set to those dimensions, then I just past my screenshot into that fileand line it up where most of the content is in the middle because the sides get cut off on the portfolio page. How can I align it in center of screen? Hi Maria. I will look into this one as soon as I get a chance. I’m certain they didn’t do that here http://www.coresite.com/resources/resource-library but it would be nice if I could do it. Improving this would be better for artist portfolios. Do you know if it possible to do the same but with Fullwidth Portfolio Grid?