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.
@JoshHallco
6 жыл бұрын
Thanks, Faiek! Really appreciate the comment! I'll try to keep them coming!
@basounij
2 жыл бұрын
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!
@simonryan8239
5 жыл бұрын
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.
@terryg4415
4 жыл бұрын
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.
@JoshHallco
4 жыл бұрын
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/
@billywjr73
6 жыл бұрын
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!
@JoshHallco
6 жыл бұрын
haha thanks, Billy! Much appreciated feedback!
@kierankelly520
6 жыл бұрын
Savage. You've got a great style in the way you explain stuff.
@JoshHallco
6 жыл бұрын
Thanks, Kieran! Really appreciate the feedback man.
@lutzdahmen1442
4 жыл бұрын
Thank you very much Josh. I learnd a lot from this tutorial..:)
@DavidMacedo77
5 жыл бұрын
Great tutorial Josh! Thanks!
@zahinwadudhoque7280
6 жыл бұрын
An awesome tutorial! And an especial thanks for the responsive option.
@JoshHallco
6 жыл бұрын
Thanks, Zahin! No problem!
@gergemall
6 жыл бұрын
Great job Josh ! Thank you.
@awsal-dabbagh9662
4 жыл бұрын
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
@abuhosen1244
2 жыл бұрын
Thanks, buddy,its very helpful for me
@JohnComley
5 жыл бұрын
Amazing! Thanks, Josh
@yildiz7928
6 жыл бұрын
wow, you have done so many nice things just by using the inspect tool, thanks for the great tips
@JoshHallco
6 жыл бұрын
Thanks, Yildiz! Yeah I pretty much use Inspect Element for everything! It's so awesome. Thanks for the feedback!
@yildiz7928
6 жыл бұрын
it was also equally important that you showed the responsive part, super..
@yildiz7928
6 жыл бұрын
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/
@JoshHallco
6 жыл бұрын
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!
@yildiz7928
6 жыл бұрын
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; }
@marksolon1874
4 жыл бұрын
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
@Serkan_Durgun
4 жыл бұрын
Thanks a lot. This still works with the most recent version of Divi out by the date of this comment.
@califloorwalker
4 жыл бұрын
Wow this is amazing! Thank you, thank you, thank you!
@williboy2009
2 жыл бұрын
Thanks a lot , you are a grate explainner
@druggero77
6 жыл бұрын
Great video, I learned a lot from it. I used FileZilla and Visual Studio Code on a Mac, worked great.
@JoshHallco
6 жыл бұрын
Thanks for the feedback! Great combo you have there.
@oilsgift750
4 жыл бұрын
Great Tutorial, Thank You!!
@AdvanceWebSolutions
4 жыл бұрын
Great tutorial thank you enjoy your videos:)
@upsoccertraining9388
4 жыл бұрын
Hey Josh. great Vid thanks. I've followed this but on hover, my images actually engalrges and breaks out of the box any ideas?
@pejuangkebahagiaan12
6 жыл бұрын
It's amazing, thankyou :D
@andrewhayden5575
6 жыл бұрын
You ARE the Boss Josh! :)
@JoshHallco
6 жыл бұрын
Too kind, too kind :)
@luisjorgearnaudphotography5314
6 жыл бұрын
Hi Josh, i have a question, can i put horizontal and vertical photos?... because i try it but there is a white spaces :(
@mdabullais2114
3 жыл бұрын
Good video, may I know where did you get that menu bar?
@PaulMrPKcom
6 ай бұрын
thaks a lot, I cannot get two columns on mobile screens... I get smaller images but always one column only, any suggestions ?
@donnybgs
11 ай бұрын
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?
@paoloc.1314
5 жыл бұрын
Hi Josh.. god job..how can I color the directional arrows of the gallery and the button close?
@Ilegator
3 жыл бұрын
how do I customize the preview? I don't want it to be cut! Thanks for the video.
@vinnycorda8797
5 жыл бұрын
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
@hit-the-webmarketing657
6 жыл бұрын
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?
@JoshHallco
6 жыл бұрын
Thanks so much for the feedback! Yeah if you have different images for different pages, I'd just do 2 different galleries. Cheers!
@romanjelensky7035
5 жыл бұрын
Josh, please, how to disable right click - save image in gallery. Found some code, but works only for page itself, not for gallery. Thanks
@georgematsos4416
3 жыл бұрын
Hi Josh. If we make a gallery with slider is there a way to remove the dots ? Thanks.
@AndresBurbano
3 жыл бұрын
Hi,. Thanks for the video. How can I link to a URL?. Not Lightbox.
@eddyLama
2 жыл бұрын
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
@pablop8381
5 жыл бұрын
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.
@mnburch
3 жыл бұрын
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.
@James-uz9se
5 жыл бұрын
Love it!
@scottvick2156
11 ай бұрын
Great tutorial. Please update the code for the transition, as it does not work with Divi now.
@ericgarcia1912
3 жыл бұрын
Great 👍 video
@openmindjustdoit1306
3 жыл бұрын
how set all images the seam saize and how every imag have link go to deffrenet page
4 жыл бұрын
The gallery on smartphone is off center. How can I fix that?
@Freedombeansoul
3 жыл бұрын
ok but what if your images are all different sizes and shapes?
@LawrenceMouawad
6 жыл бұрын
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!
@JoshHallco
6 жыл бұрын
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/
@LawrenceMouawad
6 жыл бұрын
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!
@superviewer
5 жыл бұрын
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?
@JoshHallco
5 жыл бұрын
All explained here! kzitem.info/news/bejne/s4unxYloa3t3aGk
@FaisalMirza
5 жыл бұрын
This does not work after adding the CSS. Stays the same.
@ussin3000
6 жыл бұрын
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?
@intransitstudiosteam
6 жыл бұрын
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
@IvanLuengo
6 жыл бұрын
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!
@JoshHallco
6 жыл бұрын
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!
@IvanLuengo
6 жыл бұрын
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!
@JoshHallco
6 жыл бұрын
Yeah unfortunately you have to do that every time you make a CSS edit.
@orangeclockwork6199
5 жыл бұрын
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.
@JoshHallco
5 жыл бұрын
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/
@ninagetsit5543
5 жыл бұрын
@@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!
@nssdesigns
6 жыл бұрын
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...
@JoshHallco
6 жыл бұрын
Image names I'm not sure. In the post, there's code to remove the file name but I'm not sure otherwise...
@ThepurrrBlog
5 жыл бұрын
Thank you!!!!!!!
@Killbert72
5 жыл бұрын
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.)
@federicovivani1544
4 жыл бұрын
Same here, what should I do to fix that?
@mrbig3386
5 жыл бұрын
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.
@joelfroidevaux3856
4 жыл бұрын
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?
@JoshHallco
4 жыл бұрын
Hey Joel this should help! joshhall.co/divi-child-theme-explained-free-child-theme
@JoshHallco
4 жыл бұрын
Be sure to check out the next 2 tutorials after that one will explain CSS even further.
@taraomotosho5296
6 жыл бұрын
Can you make the images clickable to go to a specific page?
@JoshHallco
6 жыл бұрын
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.
@AdvanceWebSolutions
6 жыл бұрын
Great tutorial is a child theme always required when making these changes?
@JoshHallco
6 жыл бұрын
Thanks Jeff. Not required but HIGHLY recommended. Otherwise when you update Divi, it'll overwrite all your customizations.
@czaras_
6 жыл бұрын
Unless you put your custom code in Custom CSS option panel, right? ;) Then your changes won't be overwritten.
@rzlines
5 жыл бұрын
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
@bobmusikk
6 жыл бұрын
Any tricks for masonry gallery?
@JoshHallco
6 жыл бұрын
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
@GnarledCypress
5 жыл бұрын
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.
@JoshHallco
5 жыл бұрын
That would be a good option as well. Yeah it probably doesn't need it.
@marcusobrian4617
6 жыл бұрын
I'm loving the help but you jump to the source page so quickly that I have no idea how you got there.
@JoshHallco
6 жыл бұрын
This should help, Marcus! joshhall.co/where-to-put-your-custom-css-in-divi/
@HanSolocambo
6 жыл бұрын
"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 !
@JoshHallco
6 жыл бұрын
Here ya go - joshhall.co/where-to-put-your-custom-css-in-divi/
@domdomlee7
4 жыл бұрын
me too, i lost at that time...
@mrentremattor5772
5 жыл бұрын
nice
@raberbmx3563
6 жыл бұрын
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
@JoshHallco
6 жыл бұрын
Thanks man. I actually do go into mobile at the end of the video so that should help you out!
@raberbmx3563
6 жыл бұрын
Great brow, i will try i was to focused haha .
@raberbmx3563
6 жыл бұрын
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
@9S6OFFICIAL
2 жыл бұрын
what if i cant use CSS? ahahahha
@petrholusa5855
4 жыл бұрын
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. :(
@circlesdigital
3 жыл бұрын
Great PIECE!!! but if you are the "hold me by hand" learner, do not watch!
@truthseeker502
6 жыл бұрын
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.
@JoshHallco
6 жыл бұрын
mmm well I'll certainly take that in consideration. Hasn't been brought up before otherwise I would've taken action on that already.
@truthseeker502
6 жыл бұрын
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.
@qassimkobbi2331
5 жыл бұрын
I don`t like yout tutotials, i can not find the style sheet , it`s not clear, i won`t follow any more
@JoshHallco
5 жыл бұрын
Just need to look at the resources in the link man. joshhall.co/where-to-put-your-custom-css-in-divi/
@bertwesler1181
6 жыл бұрын
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!
@JoshHallco
6 жыл бұрын
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.
@bertwesler1181
6 жыл бұрын
Nope, not American. It's all over the place. Some early tutorial maker must have done it and it just spread.
@pablop8381
5 жыл бұрын
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.
Пікірлер: 115