IT DOES NOT TAKE LONG TO GET LEFT BEHIND! For some reason though the title text is appearing under the overlay on the latest version of Divi. You might want to check out this tutorial from our friends at Divi Space: https://divi.space/divi-tutorials/how-to-change-the-size-aspect-ratios-of-the-portfolio-grid-images/. Please go to your WordPress Dashboard > Theme Options > General > Custom CSS and add the code below. And to change the colors looks for these. One of our most common requests at DiviPlugins is how to change the portfolio layout from four columns to three. It has also been designed to work on screens larger that 981px so that it does not ruin the mobile or tablet experience. I recommend changing it to 2. 2) I’d like to keep the titles static on mobile so that they’re always present, but not readily finding the CSS to do that. Divi is a registered trademark of Elegant Themes, Inc. Thank you for replying so quickly. Back in the module settings under General Settings there is a text color setting. 4. In this tutorial, I used mobile queries to prevent it from being applied in mobile. I’m very new to css and perhaps I am copying the code into the wrong place. In General Settings, change the setting to Grid and disable the Categories, 5. Create a new section, open the settings and in the Custom CSS tab, give it the following CSS Class: gq-portfolio-section. Is it possible to make this hover effect without a href to the projects page? You may also adjust the font sizes on a few different screens by adjusting these mobile queries at the end of the custom CSS. Now you are going to insert a Portfolio Module into that section. Thank you so much for providing this tutorial and CSS code! If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. ? You can see it in action on Landscapes, A Premium Divi Child Theme. It would take a bit of custom CSS to apply those hover effects but it is doable. It doesn’t matter if I use square or rectangle images. My only question is how can I stop the featured images that comprise the portfolio grid layout from being cropped in the upload process? Thanks for the link to your page, that is helpful. Geno, this works great and thanks for posting these tips. Hope that helps! The title is actually there, but it is white so you cannot see it. I used mobile queries to prevent it from being applied in mobile. But you can always change this code if you want it to work on smaller devices. Appreciate your contribution to the community. Hello Felicity! In Advanced Design Settings, adjust the Hover Overlay Color to rgba(0,0,0,0.5). Hello, why in mobile version not work this code? ©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16. Sorry Simone, we do not yet have the CSS worked out for that. Do you have any insight as to why that might be? But now there is a way to give the native Divi Portfolio Grid some new options without the cost of a premium plugin and without having to have an extra plugin at all. That would take a bit of time to write the new breaks. Going to give this a try this weekend. The next batch of code handles all the hover effects. I want this so bad for the grid option. Awww Thanks Heather. Must be from an update I did with Divi. Thanks!! Thank you. If that is turned on it should show the title on smaller devices. Do I need to do anything else? Then I update the file but there is no change in my page. First thing you need to do is create a unique section for the Portfolio Grid, 1. One question, if you don’t mind…. I wish that were the case. Now you can give your Divi Portfolio Grid new hover animations & larger 3 column images without the cost of a premium plugin and without having to have an extra plugin at all. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel). can you please share the mobile query? Please help me how can i do that. Great tutorial, thank you. If Light is currently selected, then switching it to Dark should resolve this for you. I’ve used the code on my own site but I don’t know what happened but the grid was broken for reasons, I don’t know. Ideas on this? It is on our list of things to do one day. If Dark is already selected then go to the Advanced Design Settings tab and scroll down the the Title Text Color. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co. For some reason on the other pages the 3 column CSS doesn’t seem to work. I would double check the first part of most of these tutorials which is adding a class to elements on the page. and https://viveunaexperiencia.com/experiencias/gastronomia/ Fantastic tutorial – thanks for sharing. i really need it. Snapshot: https://pic.ito.ph/images/2018/09/09/3columnissue.th.png. Try changing this part of the code from a percentage to px. Any way to display the top of the image rather than the center on the preview? Sorry. Thank you very much for this tutorial, Geno. You can set that to whatever color you’d like to use. Sorry, I’ve pasted the thumbnail. I hope you find this article useful. I think that the text color causing this. You would have to add a lot of additional css & mobile queries to get it looking good on small devices. I’ve been struggling with creating a 3 column portfolio grid… and have tried at least 5 different solutions from the ET support forum with no success. Home of the Original Divi Tutorials & Divi Layout Kits. Well that’s all for now. I’m using a two lines portfolio grid and I implemented the CSS code above but titles display below the second line. In the General Settings right below Categories is the Show Title option. I really appreciate success stories like this . Thank you for considering. Geno is an entrepreneur who has been designing websites since 1996. website: cfrisco.com/attorneys. I’m going to start at your site first next time I have an issue or customization question. 6. Would you happen to have a fix for that module? I have the Show Title toggled and it doesn’t show up when resizing, just the image. At the second line there is a shift to the second picture => http://www.erkanbatiment.com/activites/. Oh nooo! So for a while now people have wanted to do more with the standard Divi portfolio grid. Excited about this one. i need your help please i want to make my website menu look like that website http://www.northbrisbanehomeloans.com.au/ You get to go to the head of the line for excellence. This code replaces the icon with the Read More Tab. Can you point me in the right direction? This code will change the number of columns in the Portfolio module from 4 columns to 3 columns. I’ve been trying to model the portfolio grid at this website http://doers.sg/work/ and thanks to you and the additional CSS from Divi Space, I’ve managed to put something together that is close to what I’m trying to achieve: http://javelina.cloudaccess.host/results/. 1) The images are distorted/blurry. If that is not done correctly, then the CSS in the stylesheet will not have any affect on it. I want to make portfolio with this two diferents effects, look like that website http://www.viveunaexperiencia.com. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. 3. We want the images to be square and what’s happening is they are displaying square but the dimensions are not square. 2. By subscribing, you can stay up to date with the latest Divi tutorials, news, business tips, and more! I have an issue, and I’m sure it’s an oversight on my part. You can easily do this by applying a new class to the module and adding a little CSS to your child theme or the Custom CSS section in the Divi Options panel. You can do that by changing the module settings for your Portfolio Grid. Right now, there’s nothing when the screen size is reduced. After adding the CSS Class to the Portfolio module you need to add the following CSS Code in the Theme Options of your website. by Geno Quiroz | Mar 15, 2016 | 41 comments. I would love your input, though, on a couple things: With that said, I’ve been playing with Divi and came across a particular difficulty that almost sent me down a big rabbit hole, and that’s the Filtered Portfolio element, specifically if you want it displayed in anything other than the default 4 columns. You will find some that are very similar https://quiroz.co/category/menus/, I need your help please. Hi Adri Bleier please make sure that portfolio section on all pages have the required class ‘ gq-portfolio-section ‘ also if you can share a link to your website/portfolio page that will help us in debugging and finding the issue , I love this. Since mobile users dont have the option to hover and they can only touch, it pretty much renders the effect useless anyways. You would have to add a lot of additional css & mobile queries to get it looking good on small devices. Can you help me ? This website is not affiliated with nor endorsed by Elegant Themes. How can I reimplement the title underneath the image for tablets and phones. Any ideas? Do you have any idea which part of the code I need to update to fix this? Everything else works just fine, it’s just still showing 4 columns. i want to create border please help me how can i do that, Take a look at the menu tutorials I have already done. In the row settings you may want to decrease the custom gutter width. Transform a Divi Menu Item Into a CTA Button, http://divisoup.com/four-more-linkable-image-hover-effects/, https://divi.space/divi-tutorials/how-to-change-the-size-aspect-ratios-of-the-portfolio-grid-images/, http://javelina.cloudaccess.host/results/, http://www.northbrisbanehomeloans.com.au/, https://viveunaexperiencia.com/experiencias/gastronomia/, https://pic.ito.ph/images/2018/09/09/3columnissue.th.png. I tried it on a standard gallery grid (not portfolio) and it doesn’t work. I have followed this tutorial, and one of the other tutorials you have which is similar and nothing is happening. If you want the icon back just remove this code all together. In fact I have been referring people to the amazing Essential Grid plugin for quite some time now. I have a child theme and have copied the code from your tutorial into the child theme style.css stylesheet. Or if you just wanted to add some similar hover effects to just images, check out this cool tutorial: http://divisoup.com/four-more-linkable-image-hover-effects/, Thank you so much for this cool effect. I found this article from a search, and I have to say your code (and your easy to follow explanation of each section) got me up and running with my own customizations in less than 15 minutes. There are a couple of things that could be happening. Select Save & Exit and Update the page. Yes I am sure there is a way. Designed by Elegant Themes | Powered by WordPress. I will add that to my list of things to explore. The first set of code changes the grid from 4 column to three column making the images a little larger. Please make it happen for 2017, pretty please . I love this! Now lets start to dazzle things up a bit with some CSS. here’s the full snapshot. On my home page everything works well, but I also have portfolios showing on some other project pages. In fact it is what I have used on many projects including my own Monterey Premier. The following two tabs change content below.

Gladiator Deutsch Ganzer Film, Hexe Lilli Rettet Weihnachten Schauspieler, Nena Holguin Wikipedia, Du Bist Nicht Allein Film 2018 Wikipedia, Heide Park öffnungszeiten, Siedler Von Catan App Android Kostenlos, Ich Kann Es Kaum Erwarten Noten, Erster Affe Im Weltall, Erlkönig Auto Gesehen, Tanzen Gedichte Geschichten, Die Unfassbaren 2 Wer Ist Das Auge,