Thanks for sharing. This example only displays the category. For fullwidth portfolio grids I still use Essential Grid until I find the time to figure out how to resolve this in Divi. Masonry Filterable Portfolio Divi Layout is a portfolio layout … It includes 2, 3, and 4 column layouts, adds a button with hover effects, overlays with icons, and all of the module styling you’d expect including advanced CSS features so you can custom style it with your own code. Basically I wanted it to look something like this…, Or see the live demo here, 1. How would you go the other way? Out of the box it looks something like this. I used it here to keep the image sizes. Unfortunately I have not done anything like that yet so it cold take some time to figure something out. Thanks for sharing that encouraging feedback. Fabulously detailed tutorial and the end result looks amazing – a huge improvement on the original layout. I used #303030 but you can use whatever color works best for your website. Or maybe I’m going about this all wrong? Improving this would be better for artist portfolios. Thank you for sharing your knowledge with us all. People use all kinds of various image dimensions but the intention of the grid is to be uniform. Hi Maria. } else if ( portfolio_items_width >= 1024 ) { Building on top of the One-Click Child Theme plug-in I created a child theme for my site and then added the following to the functions.php of the child theme: This is basically changing the ordering of the list of projects returned when making the WP_Query call which Divi is making for the filtered portfolio (this might also change things for other portfolio components as well not just the filtered one, but I’d have to dig into the source some more). In this example I’m only hovering over the button, so the image doesn’t display its hover effect. You can also see a nice hover effect that creates a shadow behind the card you’re hovering over. If you give the section module the CSS Class “portfolio-section” then you can add and modify this…. Is this possible? I don’t know if I’m in the right place for my question, so forgive me if i’m not! columns = 2; But you can do some cool similar stuff using Essential Grid. Great tutorial! I am wondering why this was not implemented in this plugin, since it is a request showing up too often in Divi’s forums. Did you ever find a solution? The button changes from dark gray with light tab text to off-white with dark gray text. Thanks for swinging by. I used it here on my portfolio page It includes 2, 3, and 4 column layouts, adds a button with hover effects, overlays with icons, and all of the module styling you’d expect including advanced CSS features so you can custom style it with your own code. But I missed any option for display of an excerpt, which would be terrific for me. I used it here on my portfolio page Mine appears huge/blurry and I’d much rather have it be small around 200×200 px or 250x250px size. Robust and extremely customizable carousel module for divi. I will describe the process of portfolio layout #2, but if you want portfolio layout #4 the only difference is you need the files in that folder. Divi is a registered trademark of Elegant Themes, Inc. How did you do the nice, fly-in hover overlay on your website? The World's #1 WordPress Theme & Visual Page Builder. Hi Melanie. The quick guide is a document to step you through installation and an overview of how to use the module. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! It also adds a button with text and hover effects to change the colors. Can this be amended through CSS? I have not tried it yet but I would start with adjusting the margins and width in the CSS above and see what you come up with. Its a great tool. }. Question – (1) is there a way to have either the click or hover be a bubble with the text instead of directing them to another page? 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. It drives me crazy that I have to install FancyBox just so visitors don’t have to hit the Back button to return to the project page when I’m trying to keep the plugin installs to a minimum for the sake of page load time (WordPress should include this functionality by default, don’t you think?). How do I implement this for the filterable portfolio? I urgently need to set my grid filterable portfolio to show five or six columns, because I am using that feature to build a Medical Directory and I need to show more information at the first viewing. How could we use the portfolio/project feature but show a little more information beneath each thumbnail like a title and a blurb. Now it should look something like this, Now lets start to dazzle things up a bit with some CSS, If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. In this case, I had two categories plus ‘All’, so that is 3 options, 100px each, for total width of 300px. Within the zipped file you’ll find the zipped plugin file along with a PDF quick guide. I’ve used some of your other great codes. Hello, If you want a portfolio with features beyond the standard Divi portfolio module, Divi Portfolio Grid might be the module you need. I know how to change the sizings for thumbs, by tweaking php in “post_thumbnails_divi.php” found in the “panel” folder. Is there a way of using the Divi Portfolio Grid so that when someone clicks on a picture it justs blows up the picture and not go into the second screen of Portfolio? since i wan to make it viewed as menu Just discovered you what a great resource. Saw one in Javo Directory demo site and I would like that as an option This is great, just what I was looking for. 7. 2. dumb me .. totally trivial to do by choosing the right skin. The ultimate email opt-in plugin for WordPress. Or do you use a different size? The Divi portfolio grid highlights your projects in a four column-wide display with a great hover effect. I’m facing a bit of a challenge with regard to styling the Fullwidth Portfolio Grid. Hi Susan. The first section of CSS applies to the whole menu bar. The way I ended up doing this was by using the Post Types Order plugin. To learn more about Google Chrome Developer tools, see the article Why You Should Start Using Chrome Developer Tools Right Now. By subscribing, you can stay up to date with the latest Divi tutorials, news, business tips, and more! Unfortunately I have not tried this yet and cannot verify but if you are comfortable messing with your footer.php file it might be worth a try. Thanks! I needed to be able to do something similar. Since the title displays, the button also displays. Sorry for the late response but I was able to help Lang with the following snippet. I’ve changed the hover icon and customized the button and its hover effects. I hope that, in the next time. I will go ahead and respond to the email for this one. The problem is that when I apply your code to create three columns, I end up with only two columns. The order of projects is important for the portfolio visitor. Can I customize the look of the grid of the individual portfolios with Divi Portfolio Grid? Here is the snippet for the filterable portfolio. Yes this can be done with CSS. } else if ( portfolio_items_width >= 480 ) { Here’s more about the Order and OrderBy parameters which I’m making use of above. Thanks. I look forward to your available Child Themes. Great tutorial, as always! Stretch out the images a bit, adjust the text color and font size, give the image a slight shadow and give the image slightly rounded corners and a thin dark grey border. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. I actually fell in love with Essential Grid for this purpose and sort of lost interest in this one. You just have to target the image, container and the overlay. I would use the Portfolio module design to make a kind of menu where each image points to one of my pages. columns = 3; Thank you very much ! by Geno Quiroz | Feb 6, 2015 | 129 comments. ‘orderby’ => ‘rand’ was somewhat amusing. Upload the zipped plugin file that’s within the download file, install, and activate as normal. The perfect theme for bloggers and online-publications. Thanks Geno – really appreciate your help. thanks! 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. Sorry but I have not figured that one out yet . Click on choose file and navigate to your download folder. height: 90%; See my example here (scroll down a bit to see the portfolio): My question is how best to collapse the thumbnail display to around 94% of the default height? This would probably require modifying a php or js file. Hi Andrew! Can you help me ? I see you redirected them (open website or back to portolfio. i need to show full images on the portfolio view but divi porfolio only shows a part of the image. width: 330px !important; Any ideas how to make a 3 x 3 thumbnail grid and make it a widget so I could put it in a footer? , [1] It includes three layouts to choose from, so you can set your portfolios in 2, 3, or 4 columns. Very helpful post and comments. It’s so good to now have a nice-looking alternative. It would also be good if there were a FancyBox option to display enlargements throughout the site. I’ve adjusted all of the fonts and colors, and changed the button background color, hover color, and icon color. Preview 110+ Premade Websites & 880+ Premade Layouts. The transition of the hover effect displays a heavier shadow until the transition is completed. Can you help me? Or is this a nature of the beast that is CSS manipulation? I’m not seeing an issue with the sorting on the artist page. Thanks Geno. I would like the title and short blurb beneath each of the project thumbnails. I also wanted to change the hover effect a little to match the color scheme of my site which was dark grey and orange. Wondering if when an image is clicked on a Project page if it can open up in its own tab, not the same tab? Now, I see that, this is a great hightlight plugin! Stretch out the overlay to fit the image, change the transparent color from white to dark grey, give it an orange border to match my sites colors, and give it a cool slow transition. I’ve seen that kind of thing done with the gallery module. Hi Dennis! Feel free to contact me through email if you like . I’ve just downloaded and installed the plugin, but when I’ve used it, I don’t get the 2/3/4 columns, but only the original ones as from the Divi original portfolio module. Glad you were able to use this tutorial! Hi Thanks in advance! 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. I just figured this one out. Here is a link for that tutorial:, Is the mobile option not working for this now? Go to your Dashboard and add a new page. is it possible ? It’s a short document and provides a walkthrough with images to get you started. Any ideas? This example only displays the project title. Hi Geno! Out of the box it looks something like this. Divi Portfolio Grid is easy to use and provides enough extra features over the standard Divi portfolio module that many users will find it essential. All images used in the portfolios and backgrounds were taken from The single most important feature missing from Divi’s portfolio grid was the masonry layout, ie not forcing the same landscape cover image on all thumbs, but allowing original ratios to show up in the grid. Customize the background color, choose a background image, select a layout, create custom button text, choose the number of posts to display, select the category, show meta, choose colors, etc. Is there a workaround for this? This is the same layout in landscape mode. How to add, configure and customize the Divi portfolio module. Seeing as I only have 6 items, it will probably be easier than changing code. Can anyone point me in the direction of support. First regenerate thumbs that have a wider aspect ratio, and then tweak the grid to accommodate? Its how I develop all my clients websites anyways. For that effect I used the Essential Grid Plugin. I have a print cover portfolio that I’d like to change from 3 to 2 so that the print cover will be larger. }. How can I align it in center of screen? Would you help me? 1. All other features are set to default. Home of the Original Divi Tutorials & Divi Layout Kits. In our example, we add the following class three-column-grid to our module. At the top of your page, I used your code to create a non-filterable grid, and it works great. Here’s a look at the page using the standard Divi portfolio module. You can see for yourself what happens … two columns with a big space between them: I have tried adding padding and positioning the section and module to the center, but it is not enough. You can check it out live in action on the demo page here .et_pb_column_4_4 .et_pb_filterable_portfolio_grid .et_pb_portfolio_item { Exactly what i was looking for and extremely easy to use. Somehow one of the thumbnails loaded full, but I’m not sure why. 6. Take a look at how I used it on my portfolio page. I bought several extension photos for divi, flickr and others, I would like this time to test before to be on that this extension meet my need They were designed to draw attention to your work and display it in a way that looks professional. Great. I understand the CSS markup, but by adding the padding to the left of each thumbnail creates a “dead” space to the right of section. Thanks for sharing Unlimited Users. I use 1200×600 for my blog headers. I left the default hover overlay color to show the contrast between the featured image area and the background image behind the title and meta section. can someone please teach me how to change the font size of the project’s titles and categories displayed on the portfolio thumbnails? Have you tried Divi Portfolio Grid? The feature images on my projects are all square and I would like them to show as squares on the portfolio. Please for image visit: Thanks Steve. I do something similar in a custom child theme I created that will be going up for sale on next week when they launch. Unfortunately I have not figured out how to show the excerpt on hover yet. But the Portfolio Module uses the Projects page, and I would do the same thing with simple pages. Sorry for the rant. . This is the same layout on a Galaxy S5 in portrait mode. I now use Essential grid for any non-divi’ish portfolio grids. It looks very good and it’s far better than what I had. Really like this post. View A Live Demo Of This Module. 3. Yes you will be able to use them on unlimited sites. The hover effect places a blue overlay with 47% opacity (sorry about the odd number but it’s where my mouse stopped so I went with it), and a checkbox icon in red. OOPS! This doesn’t allow it to be flush, visually. Its much faster and I feel like I have more precise control over everything this way. It a ton of cool easy to use templates and options. I am trying to figure out how to adjust the height of an image in the filterable portfolio grid, as I manage a book press and need the height of book covers. Geno is an entrepreneur who has been designing websites since 1996. If you are interested hiring me for a custom project, shoot me an email at and I can send you a quote. The out-of-the-box filterable portfolio is so sparse-looking with small thumbs and way too much empty space. Adjust colors, fonts, buttons, icons, overlays, and more. Let us know about your experience in the comments below. I use the latest version of Divi Builder and the version 1 (latest one) of Divi Portfolio Grid. position: initial !important; ©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16. Divi Portfolio Grid is a third-party plugin from Divi Theme Store. There appears to be no means of changing this within the portfolio settings. This example uses the 4 column layout. So I’ve already done that and regenerated new thumbs. It’s an easy plugin to use and I found everything to be intuitive. We’d like to hear from you! I have a quick question. Thank you in advance! If you want to look, you can at at Catalog. height: 94% !important; In this overview we’ll take a look at Divi Portfolio Grid using a sample portfolio that I created. The hover overlay is also a default feature, so it doesn’t have to be enabled. is there a way to make it so the filters are centered on the page, the hover highlights and the active state highlights are centered on the individual filter texts, and customize the color of the hover state? This last bit will help it play nicely with your mobile devices. Divi does that to try and keep the grid uniform. I have a couple of 3 column modules that have 4 lines of 3 all displaying correctly, then a line where it displays only 1, then back to 3 lines ok and so on. Do you know if it possible to do the same but with Fullwidth Portfolio Grid? Awesome! Harness the power of Divi with any WordPress theme. I’m trying to change the size of thumbnail in the full width portfolio page. Big thanks to all. hi, nice blog! Where would I tweak it to do a new custom CSS Class? ‘400×267’ => ‘et-pb-portfolio-image’, Very impressive! I’d like to have the same layout in the Gallery module but I can’t figure out how to do that. Now this next step is important if you don’t want your changes to mess with anything else on your site. Unless I’m doing something wrong. Doesn’t seem to show up in Visual Builder, either in the display or in the wire frame. Can I customize the gallery? This is so inspiring and makes me want to go learn CSS more deeply, so I can know what I am doing, like you! It gave me the option to have them tiled full width without any padding but I opted for a little padding. ‘400×267’ => ‘et-pb-post-main-image’, Each month we showcase the best Divi websites that were submitted from our community and today we want to share with you the top ten websites for the month of... Posted on November 24, 2020 by Jason Champagne in Divi Resources. Next I add a standard portfolio module. Why You Should Start Using Chrome Developer Tools Right Now, Divi Design Showcase: New Submissions from November 2020, How to Create a Sticky Promo Video with a Show/Hide Toggle in Divi, Get a FREE Bike Repair Layout Pack for Divi. Thank you in advance for your help! Probably require a whole different tutorial for that one. In this example I’ve changed the color of the button background and text, and changed the text to display my own message. The Divi Black Friday 2020 Sale Starts Now! Thanks for sharing this Geno. great tutorial. Although I seem to have a problem. The button radius is set to 10. These are the settings I am going to use. This layout suits the architecture industry perfectly. Before you can add a portfolio module to your page, you will first need to jump into the Divi Builder. It works … you are incredible! Hey Geno, In the row settings you may want to decrease the custom gutter width. Also, I’ve used your ‘triangles between sections’ and have the triangles centered – but this portfolio module does not seem to be exactly centered. In this example I’ve added a background which shows behind the title and meta. Architecture Firm Divi Portfolio Layout Page. To keep things simple, I consistently use a 1800 x 940 template for my featured image by default. I agree that there should be a masonry layout option. I’ve added a red border with a width of 2 pixels (so it’s easy to see in the image). The image includes the same hover effects as the standard portfolio module, but the button also includes hover effects. Thanks for all of the hard work. So open up your “Section Module Settings” and give it the CSS Class – portfolio-section. Go to Ess. First, thank you for your code. The code you need to change is in this tutorial. Below is the same code applied to the filterable grid. Looking everywhere for the masonary grid!! +1 for Post Types Order plugin. It depends on the size you set for the categories, and the number of categories you have. I have not done anything like that but if I get some time I will play around with it. It isn’t lining up on iPad using the CSS. Brown in Divi Resources. This page highlights some of the features you can expect when we launch. The grid always align at left, then with three columns is is more remarkable. I’m currently using the code you have in this tutorial. He's a longtime WordPress enthusiast and loves learning new things and sharing information with others. 1. Seems to be a pretty good fit for the blog single post, blog module thumbnails and Facebook. Thanks . How To Add A Portfolio Module To Your Page. Just wondered if you had any experience on this, or if it is immediately clear where I am making an error. 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.

Regierungsratswahlen Aargau 2020 Kandidaten, Hutmacher In Der Nähe, Lego Chima Große Figuren, Mark Ruffalo Filme, Regenbogen Vorlagen Zum Basteln, Frauentausch Jasmine Ganze Folge, Asiatische Süß Sauer Sauce, Konzerte 2021 Frankfurt,