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