Hi Ania, this is an amazing video thank you for. I would love to ask, is it possible to somehow add class into any of the module’s internal element? As I can see grid-area:image1 would work like that probably right? But how about if I got fullwidth section in it I got a module fullwidth header but in the module you got alrady buttons and it is not really like button module itself, so I would need to give the button one class to work with that particular button....is there any possibility to do it please? Thank zou so much for your time and for these helpful videos.
@@DinomiksCZAuntie you don't need a unique CSS class on an element to target it with CSS - you can use the parent container CSS class or ID and then target elements inside the container (using pseudo-selectors such as nth-child or others). www.w3schools.com/cssref/css_selectors.asp
I can handle a grid okay for regular web pages, but I haven't dared to try it in Divi. Putting the code in the page settings makes this a pretty easy edit for some really beautiful results. Thank you for your excellent tutorial.
Thank you, Ania, for this tutorial... I was looking to create this on one of my websites, tried it so many times... but was unable to define a similar grid... this tutorial will help me get it fixed... So easy and simple... You make it so easy...
New subscriber here! Thank you for this insight! I was having a hard time making DIVI respond correctly to my grid rules. Your approach did the trick for me. It seems that DIVI's wrappers for elements are messing up direct CSS definitions. But your strategy worked beautifully. Thank you.
That's fantastic. I just built a site in oxygen because it has grid and I didn't know how to do in divi. This is amazing and I think I will try it out.
The CSS grid is really powerful, nice video, the only issue that I find is a divider, that will make it unclickable! I will try it with the image module✌️ thank you for inspiration ✌️
Hi Ania! Congratulations on the video, the steps are very easy to follow and everything is easy to understand as you explain each step. I also subscribed to your channel!
This is genius Ania, thank-you. I've been fighting with Divi's speciality sections for far too long! Do you know of a way to replace the static background-image panels with a basic image slider instead please?
Hi Ania. Just came across your channel. Some good stuff here. So we'll explained too. Thanks for sharing. I have a couple of questions. 1. By using css grid and a single row, does it make the website faster cf to using multiple divi columns? 2. If the divi theme is updated, will the css dissappear? Many thanks.
Hi Gerard, thank you, I'm glad you find the content helpful. To answer your questions.. 1. No, I don't think adding grid will help you speed up your site. What we're doing is basically adding more CSS to change the default behaviour/alignement. 2. No, the CSS code added in the child theme stylesheet or Theme Options custom CSS field will not be deleted when updating the Divi theme. Hopefully, this helps ;-)
Ahh yes, the magic of CSS! 😊 It should work the same in other page bilders, you just need to make sure to keep similar HTML structure (the parent container uses display:grid; and all children are grid items with corresponding area names).
Hi Eamon, the syntax error checker in Divi is not perfect, it doesn't recognize all CSS features correctly, but you can be sure that the code is correct - the error message is false 🤓
@@eamonmchugh2995 that's odd. I'd suggest moving the CSS to the Theme Options or child theme stylesheet. Or using a Code module with tag if you don't want this to run globally and just on a single page.
![Working with Custom CSS in Divi: Beginner Guide [2022]](http://i.ytimg.com/vi/k7Vy_MY080I/mqdefault.jpg)
Here's where you can download the Free Grid Layout Set: divilover.com/css-grid-based-layout-set/
Hi Ania, this is an amazing video thank you for. I would love to ask, is it possible to somehow add class into any of the module’s internal element? As I can see grid-area:image1 would work like that probably right? But how about if I got fullwidth section in it I got a module fullwidth header but in the module you got alrady buttons and it is not really like button module itself, so I would need to give the button one class to work with that particular button....is there any possibility to do it please? Thank zou so much for your time and for these helpful videos.
@@DinomiksCZAuntie you don't need a unique CSS class on an element to target it with CSS - you can use the parent container CSS class or ID and then target elements inside the container (using pseudo-selectors such as nth-child or others). www.w3schools.com/cssref/css_selectors.asp
I wish I had seen this about 2 years ago!!! Far easier to follow than the mission I went on to make a CSS grid DIVI homepage!!! Brilliant!
This is do good to hear, I'm happy I could help!
I was looking for this for 1 month and finally fount it. Thanks
I'm happy to hear it's helpful! :-)
I can handle a grid okay for regular web pages, but I haven't dared to try it in Divi. Putting the code in the page settings makes this a pretty easy edit for some really beautiful results. Thank you for your excellent tutorial.
Happy to help! :-)
Thank you very much, we need more TH-camrs like you!
Thank you! ;-)
Thank you Ania. The way you explain everything is refreshing.
Thank you so much for your kind words! 😊💜
Thanks a lot, fixed my problem with your tutorial in 15'
Great to hear!
Thank you, Ania, for this tutorial... I was looking to create this on one of my websites, tried it so many times... but was unable to define a similar grid... this tutorial will help me get it fixed... So easy and simple... You make it so easy...
😊I'm very happy to hear that it was helpful, Ravindra! Thank you for your comment :-)
New subscriber here! Thank you for this insight! I was having a hard time making DIVI respond correctly to my grid rules. Your approach did the trick for me. It seems that DIVI's wrappers for elements are messing up direct CSS definitions. But your strategy worked beautifully. Thank you.
Welcome :-) I'm very glad it was helpful!
but the layout in the video shows a tab grid view but the tabs do not exist in the layout? Please help me assign it.
I’ve wanted to learn the css grid technique inside of Divi. This was fantastic. Thank you.
I'm happy I could help 😄
Again I learned a LOT from your video. Thank you very much Ania!!
Glad it was helpful! 😄
That's fantastic. I just built a site in oxygen because it has grid and I didn't know how to do in divi. This is amazing and I think I will try it out.
I'm glad I could help!
Thank you so much for this tutorial . The way you explaining is fantastic.
I'm happy I could help!
Excellent tutorial! Wonder when this will be built into Divi?
lovely technique & teacher, thanks!
Thank you so much!
The CSS grid is really powerful, nice video, the only issue that I find is a divider, that will make it unclickable! I will try it with the image module✌️ thank you for inspiration ✌️
Why do you use the Divider module to bring in the images? Couldn't you use the Image module?
Very useful, thank you Ania.
I'm very happy to hear that! Thank you 😊
Hi Ania! Congratulations on the video, the steps are very easy to follow and everything is easy to understand as you explain each step. I also subscribed to your channel!
You are so kind, thank you! I'm happy you found this tutorial helpful
great tutorials Ania, thanks for sharing it
Thank you for watching 😊
Thanks for explaining this nice solution.
I'm glad I could help 😊
You helped me truly a lot! Ty very much
I'd love to do this with rows as the cells and section as the parent, but I cannot get a Divi row to span any cells. Any ideas?
Wooooow impressive Ania. Will definitely be helpful :)
That is great to hear! Thank you 😊
Wow! So well explained... Thank you Ania!
You're welcome, Michiel! I'm glad I could help 😊
This is genius Ania, thank-you. I've been fighting with Divi's speciality sections for far too long! Do you know of a way to replace the static background-image panels with a basic image slider instead please?
Hi Will, thank you, I'm glad it's helpful. For simple image sliders you can try using the Gallery module.
@@aniaromanskacom thanks for your reply Ania, can confirm that the Gallery module works a treat.
Very well done Ms Ania!!
Thank you, sir! ;-)
@@aniaromanskacom love when you call me sir! Just kidding … !!
Thank you so much for this tutorial you're explaining it so clear can't wait for the next one
You are welcome, I am soo happy to hear it was helpful and easy to follow! 😊
Hi , how about if i want the grid layout at desktop just same in mobile or tablet , is that possible?
Tq
Hi Ania. Just came across your channel. Some good stuff here. So we'll explained too. Thanks for sharing. I have a couple of questions. 1. By using css grid and a single row, does it make the website faster cf to using multiple divi columns? 2. If the divi theme is updated, will the css dissappear? Many thanks.
Hi Gerard, thank you, I'm glad you find the content helpful. To answer your questions..
1. No, I don't think adding grid will help you speed up your site. What we're doing is basically adding more CSS to change the default behaviour/alignement.
2. No, the CSS code added in the child theme stylesheet or Theme Options custom CSS field will not be deleted when updating the Divi theme.
Hopefully, this helps ;-)
As usual, amazing!
Thank you, Asit!
Great tutorial!
As always!
Thank you so much 😄
Thank you for this. Absolutely amazing!!
I'm glad you liked it!
Thanks, that was really helpful
Glad to hear it!
amazing worked perfectly
Happy it worked! 😁
Thank you 👍
Thanks you very much!!
Glad it helped
Awesome, Ania! It's like magic... Does it work with other page builders too? (e.g. Elementor)
Ahh yes, the magic of CSS! 😊 It should work the same in other page bilders, you just need to make sure to keep similar HTML structure (the parent container uses display:grid; and all children are grid items with corresponding area names).
@@aniaromanskacom Thanks for your reply. I'll try it when I get the time to do it
for some reason, Divi wont let me type in "1fr" into the page settings
Hi Eamon, the syntax error checker in Divi is not perfect, it doesn't recognize all CSS features correctly, but you can be sure that the code is correct - the error message is false 🤓
@@aniaromanskacom it keeps deleting the code I type in :(
@@eamonmchugh2995 that's odd. I'd suggest moving the CSS to the Theme Options or child theme stylesheet. Or using a Code module with tag if you don't want this to run globally and just on a single page.