I see you redirected them (open website or back to portolfio. It is the css for the mobile versions. So I decided to give it a darker background and make the grid 3 columns instead of 4. Where would I tweak it to do a new custom CSS Class? Let’s look at each of the layouts with various customizations and features. I now use Essential grid for any non-divi’ish portfolio grids. You might want to give that a shot. This is great, just what I was looking for. Howdy Randy A. How very disappointing. It starts with Doba and ends with Yvich. Hey Divi Nation! To learn more about Google Chrome Developer tools, see the article Why You Should Start Using Chrome Developer Tools Right Now. Hi, . 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. 2. 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. If you give the section module the CSS Class “portfolio-section” then you can add and modify this…. If I purchase one can I use it on unlimited clients? The following two tabs change content below. It depends on the size you set for the categories, and the number of categories you have. This doesn’t seem to work in Divi 2.7. If you’re used to using Divi modules you should feel right at home with this module. First thing you need to do is create a unique section for the Portfolio Grid. But with a little time you can get this done. Create a new section, open the settings and in the Custom CSS tab, give it the following CSS Class: gq-portfolio-section . Its a great tool. In essence, I only want 2 on a row for this portfolio page. Posted on November 26, 2020 by Randy A. ); After doing that, I rebuilt thumbnails using “Regenerate Thumbnails” plugin by Viper007Bond. Adjust the height and width percentages to your liking. It would also be good if there were a FancyBox option to display enlargements throughout the site. Great tutorial! 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. How to add, configure and customize the Divi portfolio module. Any ideas how to make a 3 x 3 thumbnail grid and make it a widget so I could put it in a footer? I appreciate you checking it out. Masonry Filterable Portfolio Divi Layout is a portfolio layout … I am trying to do the same thing. Harness the power of Divi with any WordPress theme. 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. All of the standard design features are here as well. Although I seem to have a problem. Or i need a plugin for that? Brown! The feature images on my projects are all square and I would like them to show as squares on the portfolio. It keeps all my pages consistent and it displays nicely on Facebook. 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? Hi Geno Thanks for sharing this Geno. It works … you are incredible! But I too loved learning CSS so I try to make all my tutorials CSS based. Yes this can be done with CSS. A background image (of a gray sky) is placed behind the title. Here’s a look at the 3 column layout. great tutorial. I’ve already applied the following CSS tweak which indeed collapses the thumbs appropriately, but I end up with green bars below each row: .et_pb_fullwidth_portfolio_grid .et_pb_portfolio_image { A great plugin. I just figured this one out. height: 90%; My site scales from 3 images, to 2 images, to 1 image with a large margin on the right. Awesome. This layout suits the architecture industry perfectly. Thank you very much ! worked great for me too! The button background and text have changed color. With 40+ Divi premium modules and extensions to choose from. height: 94% !important; 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. You just have to target the image, container and the overlay. Hope it helps on one of your projects . I am going to give this section a unique  CSS Class. I’ve used some of your other great codes. I’m adding this to my site. Can you help me? Fabulously detailed tutorial and the end result looks amazing – a huge improvement on the original layout. 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. Enjoying your site! How could we use the portfolio/project feature but show a little more information beneath each thumbnail like a title and a blurb. Thank you for sharing your experience on the changing of the divi portfolio feature image I have paste your code in the epanel and in the large screen it do change to three column but it is not responsive as your example.And I have another question is that my feature image have a portrait layout whose aspect ratio is 2:3 so the feature image is cut by default.Can you help me with this problem?Thanks very much. But I missed any option for display of an excerpt, which would be terrific for me. Can you help? So I’ve already done that and regenerated new thumbs. Try Out The Drag & Drop Page Builder for FREE! To keep things simple, I consistently use a 1800 x 940 template for my featured image by default. http://montereypremier.com/carpe-diem/. Thanks Geno. 2. Thank you in advance! Can anyone point me in the direction of support. Keep in mind my objective was to highlight the image so I am turning off some of the extra meta data. I’ve adjusted all of the fonts and colors, and changed the button background color, hover color, and icon color. I’m trying to style the Divi Filterable Portfolio Grid using your code, but no luck so far. Divi Portfolio Grid is a third-party plugin from Divi Theme Store. 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? .et_pb_column_4_4 .et_pb_filterable_portfolio_grid .et_pb_portfolio_item { For that effect I used the Essential Grid Plugin. Hi Maria. Thanks for sharing I agree that there should be a masonry layout option. The actual Demo site will be available to view then as well. I found a problem on my end and fixed it and it’s perfect! This still is it. This is the default features and colors. Thanks and keep it up! I dont think it has to do with the titles. Its a great tool. 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?). Then I display other images with the various in the content of the post/page/project as needed. Really like this post. Hi Susan. For instance I would like to have a fade transition between images once they are open, is this possible? Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you. I used it here on my portfolio page https://montereypremier.com/portfolio/. I’m wondering if there is a way to edit the size of the project image when it is opened? I never did css changes before, I was able to change the columns easily from 4 to 3 in divi. Here is some CSS to get you started on that, you will need to adjust it for your needs. Documentation is provided in the PDF file that comes in the zipped folder. 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. Home of the Original Divi Tutorials & Divi Layout Kits. The perfect theme for bloggers and online-publications. Let us know about your experience in the comments below. First, thank you for your code. I don’t know if I’m in the right place for my question, so forgive me if i’m not! Thanks for visiting! We’ll have to test it again after 3.0 is released tomorrow though. I’ve seen that kind of thing done with the gallery module. Architecture Firm Divi Portfolio Layout Page. I needed to be able to do something similar. Lets Get Started On The Divi Portfolio Grid. I’m not seeing an issue with the sorting on the artist page. Unfortunately I have not done anything like that yet so it cold take some time to figure something out. 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 Unless I’m doing something wrong. Featured Image via 2RAL / shutterstock.com. The plugin is responsive. A promo video is a wonderful marketing tool for promoting your products and services to all those visitors who would rather just watch a video than explore your page for information. I could easily do a lot of things in the settings that I do with the CSS. https://quiroz.co/themes/thejourney/church-staff/ I changed the Project post type to Staff post type and tweaked the php in the child theme so that the excerpt will display beneath the title. Do you know how can I order by date (from older to newer) portfolio view in divi? Note that if I don’t collapse to 94% height, some of the titles (in the thumbs) get whopped off on the right side. I don’t have an answer for the widget that you want, aside from creating the image yourself in an image editor. I am sure it is Chris. But you can do some cool similar stuff using Essential Grid. and Really. I have a quick question. In this example I’m only hovering over the button, so the image doesn’t display its hover effect. Great. Geno is an entrepreneur who has been designing websites since 1996. 1. Glad you were able to use this tutorial! Within the zipped file you’ll find the zipped plugin file along with a PDF quick guide. 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 will go ahead and respond to the email for this one. Very impressive! Here’s more about the Order and OrderBy parameters which I’m making use of above. The button radius is set to 10. I’m trying to change the size of thumbnail in the full width portfolio page. The grid always align at left, then with three columns is is more remarkable. Mine appears huge/blurry and I’d much rather have it be small around 200×200 px or 250x250px size. All images used in the portfolios and backgrounds were taken from Unsplash.com. Hi,is this plugin just for the look of the grid that contains the different portfolios? Unfortunately I have not figured out how to show the excerpt on hover yet. position: initial !important; Probably require a whole different tutorial for that one. Tutorial to come out soon. Improving this would be better for artist portfolios. Thank you in advance! Not in native Divi. We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! Question: Using the filterable portfolio module, how can you place the title over the image on hover vs underneath the image? Please for image visit: https://imgur.com/a/4Szrl. They were designed to draw attention to your work and display it in a way that looks professional. Is this possible? Thanks, I’ll give that a shot. It will do what you are looking for. Hi There appears to be no means of changing this within the portfolio settings. But the Portfolio Module uses the Projects page, and I would do the same thing with simple pages. 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…. 5. Great tutorial, is there a way to arrange tabs/project category not alphabetically? ‘order’ => ‘DESC’, Here is an updated version of the 3 column portfolio grid with additional customizations: https://quiroz.co/divi-portfolio-grid-hover-animations-larger-images/. This example only displays the category. Out of the box it looks something like this. By default it has a great look and feel. I’ve added a red border with a width of 2 pixels (so it’s easy to see in the image). The quick guide is a document to step you through installation and an overview of how to use the module. The image includes the same hover effects as the standard portfolio module, but the button also includes hover effects. I made it, creating a custom filterable portfolio for my child theme and inserted in ‘$default_query_args = array’: ‘orderby’ => ‘rand’, Have you tried Divi Portfolio Grid? Build any kind of portfolio for any kind of work and easily customize it using the pre-styled Divi modules. In this example I’ve added a background which shows behind the title and meta. How do I change divi full width portfolio to show a maximum of 4 images per row – when on a large screen it shows 5 so will display 8 and two empty spaces on a larger monitor. First regenerate thumbs that have a wider aspect ratio, and then tweak the grid to accommodate? I used #303030 but you can use whatever color works best for your website. By subscribing, you can stay up to date with the latest Divi tutorials, news, business tips, and more! I like to show the info of the project on hover like the FullWidth Portfolio does. It could look good on mobile. Hi Geno! If you share the link I can take a look , I am exactly looking for the same as you. The problem is that when I apply your code to create three columns, I end up with only two columns. Thank you in advance for your help! Hello, columns = 4; Go to your Dashboard and add a new page. }. However, I’ve noticed that in your demo page when the browser window is resized the portfolio 3-wide grid scales down, down, down then goes to 1 row images. Any ideas? In the row settings you may want to decrease the custom gutter width. Thanks for sharing that encouraging feedback. How would you go the other way? I have a print cover portfolio that I’d like to change from 3 to 2 so that the print cover will be larger. I would also like the projects in my portfolio to display alphabetically not by post dates. Yes you will be able to use them on unlimited sites. Step 1. Hey Geno, dumb me .. totally trivial to do by choosing the right skin. Unfortunately I am not sure why you are having this issue. If you are interested hiring me for a custom project, shoot me an email at geno@quiroz.co and I can send you a quote. It does still work, I just tested it in 2.7.10. Grid > Import/Export > Import. margin-right: 30px !important; Hey Jerry, i dropped in your code and added “text-align: center” in an attempt to get the highlighted portions of hover as well as active state to be centered. I also wanted to change the hover effect a little to match the color scheme of my site which was dark grey and orange. Divi does that to try and keep the grid uniform. For this week, Kenny and his team have created a Bike Repair Layout Pack we think you are going to... Well, I bought this and it doesn’t do what I thought it would. You have it anywhere you targeted . But feel free to post a link to your site. 1. This example uses the 4 column layout. At the top of your page, I used your code to create a non-filterable grid, and it works great. Did you ever find a solution? The Divi portfolio grid highlights your projects in a four column-wide display with a great hover effect. Out of the box it looks something like this. The Divi Black Friday 2020 Sale Starts Now! Feel free to contact me through email if you like . Hi Adrien! Hi Melanie. We’d like to hear from you! For some reason when I add your CSS code to go from 4 to 3 columns the images are now flush left instead of centered in the page. I have not done anything like that but if I get some time I will play around with it. Can I customize the look of the grid of the individual portfolios with Divi Portfolio Grid? Doesn’t seem to show up in Visual Builder, either in the display or in the wire frame. Sorry for the late response but I was able to help Lang with the following snippet. 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. I do something similar in a custom child theme I created that will be going up for sale on ElegantMarketplace.com next week when they launch. Saw one in Javo Directory demo site and I would like that as an option http://screenshot.net/glgj7u1.jpg. Posted on June 4, 2017 by Randy A. Here is a link. It gave me the option to have them tiled full width without any padding but I opted for a little padding. Thanks for swinging by. The way I ended up doing this was by using the Post Types Order plugin. Thanks for sharing. Do you know if it possible to do the same but with Fullwidth Portfolio Grid? Thanks for taking the time to leave the cool feedback , Thanks for the helpful tutorial to change the grid. }. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co. Hi Maria. 6. 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? can someone please teach me how to change the font size of the project’s titles and categories displayed on the portfolio thumbnails? Click on choose file and navigate to your download folder. Designed by Elegant Themes | Powered by WordPress. http://blackravensdesigns.com/print-covers-portfolio/. The Divi Portfolio Module. 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? Did you find a way to change the full-wdith portfolio grid from 4 to 3 per row? Hi, I hope you find this article useful. Worked perfectly. Masonry Filterable Portfolio Divi Layout. The hover overlay is also a default feature, so it doesn’t have to be enabled. Thanks! OOPS! Looking everywhere for the masonary grid!! Thank´s a lot!!! It includes three layouts to choose from, so you can set your portfolios in 2, 3, or 4 columns. If you want to look, you can at willowspringsbooks.org at Catalog. Divi is a registered trademark of Elegant Themes, Inc. Glad that it works for you. You’re awesome. Or do you use a different size? But you can do some cool similar stuff using Essential Grid. Here’s a look at the page using the standard Divi portfolio module. Thanks Thomas. How To Add A Portfolio Module To Your Page. I’d really appreciate any help! It’s so good to now have a nice-looking alternative. 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. Seems to be a pretty good fit for the blog single post, blog module thumbnails and Facebook. 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’d like to have the same layout in the Gallery module but I can’t figure out how to do that. What kind of issue are you seeing on this? There are a lot of changes made to the grid column padding & margins. Very helpful post and comments. The problem is that there is no margine on the left! You may need to add in a section of CSS specific to mobile. https://quiroz.co/divi-portfolio-grid-hover-animations-larger-images/, Transform a Divi Menu Item Into a CTA Button, https://wordpress.org/plugins/one-click-child-theme/, http://blackravensdesigns.com/print-covers-portfolio/, http://essential.themepunch.com/even-grid-washington/, http://www.coresite.com/resources/resource-library, https://quiroz.co/themes/thejourney/church-staff/, https://divisoup.com/how-to-add-links-to-the-divi-gallery-module-and-show-captions-on-hover/, How To Link The Header Logo To A Different Page, Include Categories: Check them all (or whatever you want). Is there any hidden trick or known problem? Do you have a way to do something like this: You can see an example of it in use here on my portfolio… https://montereypremier.com/portfolio/. Is there a way to order filterable portfolio projects by TITLE, instead of by DATE? I used it here to keep the image sizes. I used the concept on my latest child theme here. https://montereypremier.com/portfolio/. 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. Before we look at it let’s take a quick glance at the standard Divi Building portfolio module for comparison. ‘1080×9999’ => ‘et-pb-portfolio-image-single’, https://wordpress.org/plugins/post-types-order/. This doesn’t allow it to be flush, visually. You can also see a nice hover effect that creates a shadow behind the card you’re hovering over. Thanks for stopping by . In the download folder Divi Portfolio Layouts you will find 5 folders Portfolio example 1 to 5. columns = 3; I need a filterable portfolio in alphabetical order. This is the same layout in landscape mode. 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). Somehow one of the thumbnails loaded full, but I’m not sure why. I just centered my portfolio filters in Divi and it is great. This last bit will help it play nicely with your mobile devices. Adjust colors, fonts, buttons, icons, overlays, and more. And now you should have something like this. I would recommend using the Image Gallery Grid instead. The title is displayed as a tooltip. ‘400×267’ => ‘et-pb-portfolio-image’, How do I implement this for the filterable portfolio? , [1] https://wordpress.org/plugins/one-click-child-theme/. What is a Paywall and When Should You Use One? Or is this a nature of the beast that is CSS manipulation? Thank you Melanie. NB: I do not speak English very well, so I hope my message is clear! How did you do the nice, fly-in hover overlay on your website? Preview 110+ Premade Websites & 880+ Premade Layouts. Its how I develop all my clients websites anyways. In our example, we add the following class three-column-grid to our module. Also, somewhere I thought you did a write up on another topic: If I place something in a Divi text module, how do I make that text module full screen using CSS? Then as you can see I start off with a basic layout using Page Builder. } else if ( portfolio_items_width >= 480 ) { The transition of the hover effect displays a heavier shadow until the transition is completed. greetings. 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. Very good! I use the latest version of Divi Builder and the version 1 (latest one) of Divi Portfolio Grid. Here’s the 3 column layout on an iPad (emulated in Chrome’s Developer Tools) in portrait mode. That way I can make the images a little larger. That said, I’m really happy that Divi now prints pages as html, and that thumbs are no longer resized embeds of the original rather than standalone, smaller images that have been resized/created on upload – these is really speeding up most if not all of my sites and helping the SEO too, I’m sure! The project’s featured image is displayed with the project title and category under the image. Thanks AJ. This would probably require modifying a php or js file. So I decided to give it a darker background and make the grid 3 columns instead of 4. Brown is a freelance writer from east TN specializing in WordPress and eCommerce. Big thanks to all. I’m facing a bit of a challenge with regard to styling the Fullwidth Portfolio Grid. Is there a workaround for this? Now this next step is important if you don’t want your changes to mess with anything else on your site. width: 330px !important; ‘400×267’ => ‘et-pb-post-main-image’, I would like the title and short blurb beneath each of the project thumbnails. I use 1200×600 for my blog headers. Well that’s all for now. http://youthnowcenter.org/gallery/, Hello Geno, how do I center the filterable menu. Is it possible to do something similar, but for the Full Width portfolio. The out-of-the-box filterable portfolio is so sparse-looking with small thumbs and way too much empty space. I added this to my list and I will see if I can put something together when I get some time.

Olexesh Authentic Athletic 1, Dbd Ghostface Perks, Langscheid Sorpesee Hotel, Neue Strickideen Kostenlos, Android Drum App, Xavier Naidoo Instagram Video, Die ärzte -- Morgens Pauken, Summer Cem Wohnort, Tage Wie Diese Serie, über Den Wolken Cover,