Thank you for this. I learned so much from this one video, including how to inspect for smaller screens, which has been driving me crazy. I don’t understand why Divi doesn’t have a setting for the number of columns in a gallery, but this will do the trick. And, you explain it so well.
Glad it helped! Yeah if you're looking to find out more about CSS and customize things in more detail, check out my Divi/CSS Course which will help like this x100! joshhall.co/product/divi-css-course/
This video is still relevant to this date and covers everything and your site has all the additional codes which was really helpful. Thank you for an awesome job!
Hi Josh, would you please show us how you implement this "blurb" hover effect shown on below link, I was able to do it on blurb image hover in Divi with your excellent inspect element tip but not able to make the hover on both background and image at the same time as in original, blurb image rotates as soon as you place the cursor on blurb's background, I can see that he has given same class name for both background and icon, is that the trick? mostafiz.me/demo/himu/
Hi Yildiz, I'm not sure about how to do the animation, but I do have on my tutorial list how to create the hover over colors. I actually have a new layout that walks you through it if you want to check it out: joshhall.co/product/divi-blurb-cards/ Otherwise, I'll put that tutorial up on my list to get to sooner than later. Cheers!
Hi Josh, thanks for your time, I just figured it out, I assigned a class name "blurbs_360" for the main section and applied below css, it changes the background color of the blurb on hover and rotates the icon at the same time when your mouse is placed anywhere on the blurb, check it out, you can make a video if you like.. /*360 Degree Rotate Blurb*/ .blurbs_360 .et_pb_blurb .et_pb_main_blurb_image, .et_pb_blurb_23 .et-pb-icon { -webkit-transition: all .9s ease-in-out; -moz-transition: all .9s ease-in-out; transition: all .9s ease-in-out; } .blurbs_360 .et_pb_blurb:hover .et_pb_main_blurb_image { transform: rotate(360deg); } .et_pb_blurb_0.et_pb_blurb { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; cursor: pointer; position: relative; } .et_pb_blurb_0.et_pb_blurb:hover { background-color: #d46704; }
This was very cool in the previoous version of Divi. After udpating to Divi 4.0, the codes seem to have problems working on the new version. Lots of alignment issue. Would be great to have an update on this @Josh Hall
The zoom effect doesn't work well on Safari. Works on Chrome and Firefox. On Safari the images overlap when zoomed in (they grow in size, rather than stay in place and just zoom.)
Great job, i had a problem with the scale, it makes the photo bigger when hover, i add this CSS down of the padding overflow: hidden; with this code it zoom in the inside of the photo
Love this video. Thank you for all the time you spend making these videos for us. Is making my business easier to grow. You make it so easy and it looks wonderful. Question for you. I have bank images and restaurant images. I want to separate them into 2 different pages. So I'm thinking I need to have 2 different galleries. Is this possible? or another easier way?
how do i edit the link for each image or actually disable it; am using the gallery for partners logos i'd rather have images redirect to partners websites than display an image
Again fantastic. I was wondering just how to get rid of those annoying image names. Would be interesting to see captions edited in this way using Inspector and custom CSS...
Great tut Josh, I'm really new into this divi thing and I'm struggling with the CSS. Where do I paste the code for the overlay? I don't really want to set up a FTP account I just don't understand it.
If you don't want to put it in via FTP, you can put it in the theme customizer CSS section in Divi! FYI pre-order for my upcoming CSS is out now if you want to enroll with the discount! joshhall.co/product/divi-css-course/
@@JoshHallco I used the Divi theme customizer as you prescribed. It worked! Thanks a bunch! I found your website. I've added it to my favorites. I'll be sharing and supporting. I'm also subscribing. Thanks, again!
Is there a reason you chose "clear:right" instead of "clear:none"? That only works because it's overwriting the "clear:left" that was forcing the 4 columns. It might not even be necessary any more.
I've followed instructions and pasted the code from your url and it is splitting into 5 columns but it is leaving some blank spaces where there should be images. For instance the first row is complete but the second row has four blank spaces and then an image in the fifth. The third row is complete but the fourth row has three blanks and images in the fourth and fifth position. It looks like this: xxxxx x xxxxx xx Any ideas what might be causing this? There is no other CSS that I can find. Thanks
This is all fun and games with the same sized pictures but when I have landscape and portrait pictures all mixed in then there are a lot of blank spaces which I dont like.
OK, JOSH I TRIED THIS FUNCTIONS, IT IS WORK. BUT I HAVE A PROBLEM, THE EFFECT OF OTHER IMAGES DON' HAVE A OVERLAY. CAN YOU TELL ME HOW I CAN RESOLVE IF I HAVE IN THE SOME PAGE OTHER GALLERY AND I WONT USE OTHER EFFECT. I PUTTED YOUR CSS CODE ON THE PAGE.
"I'm gonna bounce over to my style sheet" .... and there I'm lost. Your mouse goes on what seems to be a second screen. And as all the tuto is based on the style sheet but you don't say how you access it, ...well !
Hi Josh. This is a pretty old video, so I don't know if you'll even pick up on this comment. If you do, is there some way to keep the Gallery Item Title, but center it inside the Gallery Image? I think that might be a cool effect. I've played around with positioning and z-index using CSS, but can't figure this one out.
Hi Josh! Thanks a lot for all your vídeos!! I have a question. Can you tell us more about this "Purge SG Cache" and what does exactly?? I have been searching in your channel. What plugin do you use?? Thanks a lot!
Thanks Ivan. That is the cache plugin for Siteground as that's who I host through. It just helps the site load faster but you do need to clear it usually every time you update. If you use SiteGround hosting, it's free or there are a ton of other Cache Wordpress plugins. Hope that helps!
Oh thanks a lot!! I'm not using Siteground so I didn't know it! Thanks for the explanation. I like that they add a button at the top bar of wordpress. Is quicker than going to your dashboard and your plugin configuration and click "Purge cache". Do you reccomend to Purge the cache every time we add some css code?? Thanks!
Hi Josh, Thanks for this tutorial. I was wondering if that 5, 6 columns gallery thing could also be applied to rows in order to have 5 or 6 columns instead of max. 4. Thanks for your answer!
Thanks, Lawrence. Yep I was actually going to do a tutorial on that but there is this free plugin for that if it helps in the meantime! www.sean-barton.co.uk/2016/06/divi-extended-column-layouts-6-column-layout/
Yep, thanks, I saw the plugin of Sean, but apparently there's still a snag concerning the row settings button. I'll keep an eyes on your coming tutorial too. Have a nice day!
that's absolutely right but as a rule if I am customizing a site and I land up with more than 100 lines of custom code (which normally happens) i use a child theme. It's really simple to use a child theme though just a different place to write your code that's all
Hey Robert, I think I've seen some Divi gallery solutions posted in our Divi FB group if you want to search back through posts about that: facebook.com/groups/diviwebdesigners I use and would recommend this plugin for a proven nice masonry, responsive layout: codecanyon.net/item/final-tiles-wordpress-gallery/5189351
Hey Tara, unfortunately not that I know of (with the Divi gallery) unless you were to get into some serious custom coding. I use Essential Grid and Final Tiles Gallery for advanced gallery options though. Both good alternatives.
You are the BOSS! Its work great, but in mobile mode, it does not work as good, the grid desipere :(. can you show how to fix that on mobile brow? Thanks ALOT
On my Mac Home mobile size it works great. but it does not work in my iPhone 6s. the Picture overlapping eachother :(. anyway to fix that? other days you are great man thanks
The Divi gallery is truly idiotic! I don't understand why is so difficult to make column option or for everything else. To make 3 columns I have to create some crazy CSS stuff. :(
Very good information, however... Observation: You have the terrible habit (like so many others) of overusing the phrase "go ahead and". Just go ahead and listen to this entire lesson from the beginning and go ahead and count the times you say, "go ahead and" . After a while it really starts getting on one's nerves. It really becomes a roadblock to effective communication. A bad habit you really need to go ahead and get rid of. I only mention this because I genuinely like you and want you to succeed. Please take my suggestion to heart, as it was not meant to offend you, but help you. Take care.
Josh Hall .. it takes true humility to objectively evaluate the validity of considering such a personal observation from a complete stranger. I respect your openess to even consider my suggestion. Keep up the good work, and much success to you.
Gear God, Please, please, please, please, please STOP SAYING """GO AHEAD AND"""!!!!!!!~! You might as well be saying Hummm.... ahhhhh.... whacha call-it. ahhhhhh..... ummmmm!!!!!! You are driving people crazy with that stuff!
Well apparently it's an "American" thing because I never realized I did it until I started doing tutorials. Now I notice it all the time as well. It's been brought to my attention before so I'll go ahead and work on it.
OK, JOSH I TRIED THIS FUNCTIONS, IT IS WORK. BUT I HAVE A PROBLEM, THE EFFECT OF OTHER IMAGES DON' HAVE A OVERLAY. CAN YOU TELL ME HOW I CAN RESOLVE IF I HAVE IN THE SOME PAGE OTHER GALLERY AND I WONT USE OTHER EFFECT. I PUTTED YOUR CSS CODE ON THE PAGE.
Hello,
I have just started using Divi and I just wanted to say your vids are of the best out there. I cannot thank you enough for them.
Thanks, Faiek! Really appreciate the comment! I'll try to keep them coming!
Thank you for this. I learned so much from this one video, including how to inspect for smaller screens, which has been driving me crazy. I don’t understand why Divi doesn’t have a setting for the number of columns in a gallery, but this will do the trick. And, you explain it so well.
Glad it helped! Yeah if you're looking to find out more about CSS and customize things in more detail, check out my Divi/CSS Course which will help like this x100! joshhall.co/product/divi-css-course/
This video is still relevant to this date and covers everything and your site has all the additional codes which was really helpful. Thank you for an awesome job!
Savage. You've got a great style in the way you explain stuff.
Thanks, Kieran! Really appreciate the feedback man.
You do tutorials like a boss and by like a boss I mean, very informative, easy to understand and to follow! Thanks so much for this!
haha thanks, Billy! Much appreciated feedback!
wow, you have done so many nice things just by using the inspect tool, thanks for the great tips
Thanks, Yildiz! Yeah I pretty much use Inspect Element for everything! It's so awesome. Thanks for the feedback!
it was also equally important that you showed the responsive part, super..
Hi Josh, would you please show us how you implement this "blurb" hover effect shown on below link, I was able to do it on blurb image hover in Divi with your excellent inspect element tip but not able to make the hover on both background and image at the same time as in original, blurb image rotates as soon as you place the cursor on blurb's background, I can see that he has given same class name for both background and icon, is that the trick? mostafiz.me/demo/himu/
Hi Yildiz, I'm not sure about how to do the animation, but I do have on my tutorial list how to create the hover over colors. I actually have a new layout that walks you through it if you want to check it out: joshhall.co/product/divi-blurb-cards/
Otherwise, I'll put that tutorial up on my list to get to sooner than later. Cheers!
Hi Josh, thanks for your time, I just figured it out, I assigned a class name "blurbs_360" for the main section and applied below css, it changes the background color of the blurb on hover and rotates the icon at the same time when your mouse is placed anywhere on the blurb, check it out, you can make a video if you like..
/*360 Degree Rotate Blurb*/
.blurbs_360 .et_pb_blurb .et_pb_main_blurb_image,
.et_pb_blurb_23 .et-pb-icon {
-webkit-transition: all .9s ease-in-out;
-moz-transition: all .9s ease-in-out;
transition: all .9s ease-in-out;
}
.blurbs_360 .et_pb_blurb:hover .et_pb_main_blurb_image {
transform: rotate(360deg);
}
.et_pb_blurb_0.et_pb_blurb {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
cursor: pointer;
position: relative;
}
.et_pb_blurb_0.et_pb_blurb:hover {
background-color: #d46704;
}
Great little tutorial. Its always nice to use a bit of custom CSS in a Divi site, I think it makes a big difference to the overall feel.
This was very cool in the previoous version of Divi. After udpating to Divi 4.0, the codes seem to have problems working on the new version. Lots of alignment issue. Would be great to have an update on this @Josh Hall
The zoom effect doesn't work well on Safari. Works on Chrome and Firefox. On Safari the images overlap when zoomed in (they grow in size, rather than stay in place and just zoom.)
Same here, what should I do to fix that?
ok but what if your images are all different sizes and shapes?
Great job, i had a problem with the scale, it makes the photo bigger when hover, i add this CSS down of the padding overflow: hidden; with this code it zoom in the inside of the photo
Hey Josh. great Vid thanks. I've followed this but on hover, my images actually engalrges and breaks out of the box any ideas?
An awesome tutorial!
And an especial thanks for the responsive option.
Thanks, Zahin! No problem!
Great tutorial. Please update the code for the transition, as it does not work with Divi now.
thaks a lot, I cannot get two columns on mobile screens... I get smaller images but always one column only, any suggestions ?
Great video, I learned a lot from it. I used FileZilla and Visual Studio Code on a Mac, worked great.
Thanks for the feedback! Great combo you have there.
Thanks a lot. This still works with the most recent version of Divi out by the date of this comment.
Hello, is it possible to do a css grid layout for gallery items, so the first image would be big one and other ones smaller?
Great tutorial Josh! Thanks!
Love this video. Thank you for all the time you spend making these videos for us. Is making my business easier to grow. You make it so easy and it looks wonderful.
Question for you. I have bank images and restaurant images. I want to separate them into 2 different pages. So I'm thinking I need to have 2 different galleries. Is this possible? or another easier way?
Thanks so much for the feedback! Yeah if you have different images for different pages, I'd just do 2 different galleries. Cheers!
Thank you very much Josh. I learnd a lot from this tutorial..:)
how do i edit the link for each image or actually disable it; am using the gallery for partners logos i'd rather have images redirect to partners websites than display an image
Thanks a lot , you are a grate explainner
Thanks, buddy,its very helpful for me
Hi,. Thanks for the video. How can I link to a URL?. Not Lightbox.
Great job Josh ! Thank you.
how do I customize the preview? I don't want it to be cut! Thanks for the video.
Again fantastic. I was wondering just how to get rid of those annoying image names. Would be interesting to see captions edited in this way using Inspector and custom CSS...
Image names I'm not sure. In the post, there's code to remove the file name but I'm not sure otherwise...
Great tut Josh, I'm really new into this divi thing and I'm struggling with the CSS. Where do I paste the code for the overlay? I don't really want to set up a FTP account I just don't understand it.
If you don't want to put it in via FTP, you can put it in the theme customizer CSS section in Divi! FYI pre-order for my upcoming CSS is out now if you want to enroll with the discount! joshhall.co/product/divi-css-course/
@@JoshHallco I used the Divi theme customizer as you prescribed. It worked! Thanks a bunch! I found your website. I've added it to my favorites. I'll be sharing and supporting. I'm also subscribing. Thanks, again!
Hi Josh, i have a question, can i put horizontal and vertical photos?... because i try it but there is a white spaces :(
Is there a reason you chose "clear:right" instead of "clear:none"? That only works because it's overwriting the "clear:left" that was forcing the 4 columns. It might not even be necessary any more.
That would be a good option as well. Yeah it probably doesn't need it.
I've followed instructions and pasted the code from your url and it is splitting into 5 columns but it is leaving some blank spaces where there should be images. For instance the first row is complete but the second row has four blank spaces and then an image in the fifth. The third row is complete but the fourth row has three blanks and images in the fourth and fifth position. It looks like this:
xxxxx
x
xxxxx
xx
Any ideas what might be causing this? There is no other CSS that I can find.
Thanks
This is all fun and games with the same sized pictures but when I have landscape and portrait pictures all mixed in then there are a lot of blank spaces which I dont like.
Great 👍 video
I'm loving the help but you jump to the source page so quickly that I have no idea how you got there.
This should help, Marcus! joshhall.co/where-to-put-your-custom-css-in-divi/
OK, JOSH I TRIED THIS FUNCTIONS, IT IS WORK. BUT I HAVE A PROBLEM, THE EFFECT OF OTHER IMAGES DON' HAVE A OVERLAY. CAN YOU TELL ME HOW I CAN RESOLVE IF I HAVE IN THE SOME PAGE OTHER GALLERY AND I WONT USE OTHER EFFECT. I PUTTED YOUR CSS CODE ON THE PAGE.
Hi Josh.. god job..how can I color the directional arrows of the gallery and the button close?
how set all images the seam saize and how every imag have link go to deffrenet page
"I'm gonna bounce over to my style sheet" .... and there I'm lost. Your mouse goes on what seems to be a second screen. And as all the tuto is based on the style sheet but you don't say how you access it, ...well !
Here ya go - joshhall.co/where-to-put-your-custom-css-in-divi/
me too, i lost at that time...
Good video, may I know where did you get that menu bar?
Hi Josh. This is a pretty old video, so I don't know if you'll even pick up on this comment. If you do, is there some way to keep the Gallery Item Title, but center it inside the Gallery Image? I think that might be a cool effect. I've played around with positioning and z-index using CSS, but can't figure this one out.
Hi Josh. If we make a gallery with slider is there a way to remove the dots ? Thanks.
Amazing! Thanks, Josh
You ARE the Boss Josh! :)
Too kind, too kind :)
The gallery on smartphone is off center. How can I fix that?
Hi Josh! Thanks a lot for all your vídeos!! I have a question. Can you tell us more about this "Purge SG Cache" and what does exactly?? I have been searching in your channel. What plugin do you use?? Thanks a lot!
Thanks Ivan. That is the cache plugin for Siteground as that's who I host through. It just helps the site load faster but you do need to clear it usually every time you update. If you use SiteGround hosting, it's free or there are a ton of other Cache Wordpress plugins. Hope that helps!
Oh thanks a lot!! I'm not using Siteground so I didn't know it! Thanks for the explanation. I like that they add a button at the top bar of wordpress. Is quicker than going to your dashboard and your plugin configuration and click "Purge cache". Do you reccomend to Purge the cache every time we add some css code?? Thanks!
Yeah unfortunately you have to do that every time you make a CSS edit.
Josh, please, how to disable right click - save image in gallery. Found some code, but works only for page itself, not for gallery. Thanks
Hi Josh. Very useful, thanks. I'm just not sure how I get to the stylesheet to use your custom code. Is it through the web interface or ftp?
All explained here! ua-cam.com/video/RUq_U22IF54/v-deo.html
Hi Josh,
Thanks for this tutorial. I was wondering if that 5, 6 columns gallery thing could also be applied to rows in order to have 5 or 6 columns instead of max. 4.
Thanks for your answer!
Thanks, Lawrence. Yep I was actually going to do a tutorial on that but there is this free plugin for that if it helps in the meantime! www.sean-barton.co.uk/2016/06/divi-extended-column-layouts-6-column-layout/
Yep, thanks, I saw the plugin of Sean, but apparently there's still a snag concerning the row settings button. I'll keep an eyes on your coming tutorial too.
Have a nice day!
This does not work after adding the CSS. Stays the same.
i still new with this and i dont know much...
may i know how to arrange this layout with vertical masonry style using the same custom css?
Not sure how to do that either actually. For that look, I use and recommend checking out codecanyon.net/item/final-tiles-wordpress-gallery/5189351
Great Tutorial, Thank You!!
Wow this is amazing! Thank you, thank you, thank you!
Great tutorial is a child theme always required when making these changes?
Thanks Jeff. Not required but HIGHLY recommended. Otherwise when you update Divi, it'll overwrite all your customizations.
Unless you put your custom code in Custom CSS option panel, right? ;) Then your changes won't be overwritten.
that's absolutely right but as a rule if I am customizing a site and I land up with more than 100 lines of custom code (which normally happens) i use a child theme. It's really simple to use a child theme though just a different place to write your code that's all
Great tutorial thank you enjoy your videos:)
It's amazing, thankyou :D
Hello, I need some help, what excatley is style css and how can i open it that i can do the same things like Josh Hall?
Hey Joel this should help! joshhall.co/divi-child-theme-explained-free-child-theme
Be sure to check out the next 2 tutorials after that one will explain CSS even further.
Any tricks for masonry gallery?
Hey Robert, I think I've seen some Divi gallery solutions posted in our Divi FB group if you want to search back through posts about that: facebook.com/groups/diviwebdesigners
I use and would recommend this plugin for a proven nice masonry, responsive layout:
codecanyon.net/item/final-tiles-wordpress-gallery/5189351
Love it!
Can you make the images clickable to go to a specific page?
Hey Tara, unfortunately not that I know of (with the Divi gallery) unless you were to get into some serious custom coding. I use Essential Grid and Final Tiles Gallery for advanced gallery options though. Both good alternatives.
Thank you!!!!!!!
You are the BOSS! Its work great, but in mobile mode, it does not work as good, the grid desipere :(. can you show how to fix that on mobile brow?
Thanks ALOT
Thanks man. I actually do go into mobile at the end of the video so that should help you out!
Great brow, i will try i was to focused haha .
On my Mac Home mobile size it works great. but it does not work in my iPhone 6s. the Picture overlapping eachother :(. anyway to fix that? other days you are great man thanks
nice
Great PIECE!!! but if you are the "hold me by hand" learner, do not watch!
The Divi gallery is truly idiotic! I don't understand why is so difficult to make column option or for everything else. To make 3 columns I have to create some crazy CSS stuff. :(
I don`t like yout tutotials, i can not find the style sheet , it`s not clear, i won`t follow any more
Just need to look at the resources in the link man. joshhall.co/where-to-put-your-custom-css-in-divi/
Very good information, however... Observation: You have the terrible habit (like so many others) of overusing the phrase "go ahead and". Just go ahead and listen to this entire lesson from the beginning and go ahead and count the times you say, "go ahead and" . After a while it really starts getting on one's nerves. It really becomes a roadblock to effective communication. A bad habit you really need to go ahead and get rid of. I only mention this because I genuinely like you and want you to succeed. Please take my suggestion to heart, as it was not meant to offend you, but help you. Take care.
mmm well I'll certainly take that in consideration. Hasn't been brought up before otherwise I would've taken action on that already.
Josh Hall .. it takes true humility to objectively evaluate the validity of considering such a personal observation from a complete stranger. I respect your openess to even consider my suggestion. Keep up the good work, and much success to you.
what if i cant use CSS? ahahahha
Gear God, Please, please, please, please, please STOP SAYING """GO AHEAD AND"""!!!!!!!~! You might as well be saying Hummm.... ahhhhh.... whacha call-it. ahhhhhh..... ummmmm!!!!!! You are driving people crazy with that stuff!
Well apparently it's an "American" thing because I never realized I did it until I started doing tutorials. Now I notice it all the time as well. It's been brought to my attention before so I'll go ahead and work on it.
Nope, not American. It's all over the place. Some early tutorial maker must have done it and it just spread.
OK, JOSH I TRIED THIS FUNCTIONS, IT IS WORK. BUT I HAVE A PROBLEM, THE EFFECT OF OTHER IMAGES DON' HAVE A OVERLAY. CAN YOU TELL ME HOW I CAN RESOLVE IF I HAVE IN THE SOME PAGE OTHER GALLERY AND I WONT USE OTHER EFFECT. I PUTTED YOUR CSS CODE ON THE PAGE.