No video

How to Create a Smooth Slide-in Sidebar Section in the Divi Theme

  Рет қаралды 7,348

Ania Romańska

Ania Romańska

Күн бұрын

Learn how to use a few lines of CSS and jQuery to create awesome slide-in Sidebar Section inside the Divi Theme!
See the effect in action here: demos.divilove...
Download the free layout and copy the code from the blog: divilover.com/...
I hope it's helpful, please let me know in the comments!
~ Ania

Пікірлер: 55
@vonwegen916
@vonwegen916 2 жыл бұрын
Hi Ania, great tutorial - as always! I follow you now for 2 years -- I must say: one of the best things in your tutorials is, that you always EXPLAIN - why you are doing things and the functional reasons! I just recognized that huge difference to other tutorials with simple CSS-paste and copy-Codes and where to put them (but NOT WHY) --- your way I learnt a lot! 🎉❤😊 - thank you so much!
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
That's amazing to hear, thank you!!!
@olgasummerhayes1353
@olgasummerhayes1353 3 жыл бұрын
Great tutorial, I love how you explain everything.
@JfDesigns
@JfDesigns 3 жыл бұрын
Such an elegant solution. Thank you Ania! I especially appreciate that you walk us through each line of code to explain the function.
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
Glad it was helpful!
@chriscsmoon
@chriscsmoon 2 жыл бұрын
Thank you so much, Ania. Your solution works on the first try. Both your video and blog are so thorough and complement each other. Great tutorial. You've saved the day and possibly my pain.
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
I'm happy to hear that! Thank you so much for your kind feedback :-)
@katarzynawidera6607
@katarzynawidera6607 3 жыл бұрын
Aniu, super kanał! Nie mogę się doczekać aż przepracuje wszystkie tutoriale! Dobra robota
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
Dziękuję :)
@urhorattel
@urhorattel 3 жыл бұрын
Anya I love you! ) Always simple, nice and understandable! Thank you!
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
Glad it was helpful!
@SinisaSinjori
@SinisaSinjori 3 жыл бұрын
Wow! Great idea, and tutorial. Thank you Ania.
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
You're welcome, Sinisa 😊 I'm glad you like it!
@smellycat1228
@smellycat1228 2 жыл бұрын
Perfect solution for my custom site, thanks alot for sharing!
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
Glad it helped!
@smellycat1228
@smellycat1228 2 жыл бұрын
@@aniaromanskacom Hi Ania, how should we make background overlay after slider section is opened and also close sidebar when anywhere outside the slider section is clicked?, thanks again
@louisdupisani2734
@louisdupisani2734 2 жыл бұрын
Great video Ania! Thanks for the insights.
@nicocrisafulli4265
@nicocrisafulli4265 2 жыл бұрын
This was a great solution for my problem. Thanks!
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
I'm glad I could help!
@RavindraSDhande
@RavindraSDhande 3 жыл бұрын
Ania, loved this tutorial so much, first time I understood the way we write a function and script... You teach so easily... Very easy to understand. Thank you so much for such a wonderful tutorial. If we suggest a few topics can you make tutorials on them... would love to see more such tutorials from you... Very easy to understand...as you teach so nicely...perfect...No one else teaches code like that, just give the code and tell us to copy-paste it... with each tutorial I am learning so much...
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
You're very welcome! Thank you so much for your kind words! And usre, I'm always happy to hear tutorials suggestions :-)
@medusaweb3876
@medusaweb3876 3 жыл бұрын
Thank you for your work Ania! Amazing!
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
I'm glad you like it :-)
@thunbo65
@thunbo65 3 жыл бұрын
Thank you so much for this Ania. Im a Divi Lover lover 🥰
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
Haha! Thank you, Rikke! 💜
@salam7x
@salam7x 3 жыл бұрын
for me as a layman it looks like magic :D
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
I hope I make this magic super easy to follow! :D Thank you for watching :)
@Sunraser72
@Sunraser72 3 жыл бұрын
Looks great! Thanks for the tutorial
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
You're welcome, Lars! Glad you like it :-)
@jimcdg
@jimcdg 3 жыл бұрын
Really nice. Thanks for sharing. BTW, enjoy Divi Toolbox ... :)
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
Thank you, James 😊 I'm glad you like it!
@LeyviGarcia
@LeyviGarcia 11 ай бұрын
nice video, I'm looking to make the same menu, but the trigger button, I want a hamburger menu. I don't know how to do it, can you help me?
@erling5148
@erling5148 3 жыл бұрын
hi is there a option to hide the Sidebar Section when working with the visual builder. I really like this solution but it gets in the way when editing
@donlucasadventures
@donlucasadventures 3 жыл бұрын
Awesome! Can I click it from nav menu?
@timminjares4813
@timminjares4813 11 ай бұрын
Thank you for this! I'm using a lead form inside the sidebar for my content. But the form extends beyond the 100vh. How do I make the space show all the form?
@aniaromanskacom
@aniaromanskacom 11 ай бұрын
The height of the sidebar is set to 100vh, but we are using overflow-y: scroll, so you should be able to scroll down within the sidebar. If that is not the case, I'd need to see the URL to advise better.
@deathvalleyyt7165
@deathvalleyyt7165 2 жыл бұрын
Hy i used yoh layout can you tell me ho i just that thing when i click open button after that they go invisible and closed from right side in side of slider
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
Hi! I am not sure I understand your question :-) But I'd love to help so if you're still having this problem, I invite you to join my Facebook group Divi Lovers - it's much easier to discuss web-design solutions in there because you can share screens etc.
3 жыл бұрын
🖥😍🖱 *A great tutorial* , really great, I'm going to put into practice on my side, take care of yourself. 😋
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
Thank you, I'm happy to help!
@nicohdsht7438
@nicohdsht7438 2 жыл бұрын
Hi Ania, thank you for this, but i'm facing a little issue with this : my anchor scroll buttons doesn't work after the slide in menu is active. can you tell me how to make them both work ?
@MrT4sure
@MrT4sure Жыл бұрын
Brilliant tutorials - quick question - you do mean for this to be placed in a 'customer header' don't you? Also - if I where to add a nav to the slide-out section - is there a method I should be using to close the sidebar on menu item click? Finally, most probably a browser thing but im seeing it work perfectly in the divi builder and on desktop view on 'live' view page - but - the mobile version 'live' doesnt function. Any ideas. Sorry to bombard you
@aniaromanskacom
@aniaromanskacom Жыл бұрын
It can be placed anywhere, but you need to be mindfull obout the z-index values. And remember that the z-index can only be as high as the parent element z-index, so depending on the specific scenario, you might need additional bit of CSS code to make sure the sidebar (and all of its parent containers have a higher z-index value from other elements which may otherwise overlap it).
@dindigitalehjlper4933
@dindigitalehjlper4933 3 жыл бұрын
Is the code still up to date aligned with updates from Divi since you uploaded the tutorial. Great tutorial by the way :-)
@thingies4U
@thingies4U 8 ай бұрын
Does this keep the sidebar throughout the site or only on the one page?
@aniaromanskacom
@aniaromanskacom 5 ай бұрын
You can use the Theme Builder if you want to same element on every page of the site.
@RMSAnalyst
@RMSAnalyst 3 жыл бұрын
Excellent tutorial Ania, as always. Is there a way of using vanilla JavaScript rather than Jquery?
@aniaromanskacom
@aniaromanskacom 3 жыл бұрын
Yes, definitely, it's always possible, but since jQuery is already loaded in WP and Divi, I don't see a reason not to use it..
@RMSAnalyst
@RMSAnalyst 3 жыл бұрын
@@aniaromanskacom Thank you.
@artistdiana6841
@artistdiana6841 2 жыл бұрын
do we need a jQuery link somewhere?
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
jQuery is loaded in WP and Divi by default.
@artistdiana6841
@artistdiana6841 2 жыл бұрын
@@aniaromanskacom ok thank you
@ameerlatef
@ameerlatef 3 жыл бұрын
I love you
@aniaromanskacom
@aniaromanskacom 2 жыл бұрын
Glad I could help :)
@ameerlatef
@ameerlatef 2 жыл бұрын
@@aniaromanskacom Finally, you answered my message
SPILLED CHOCKY MILK PRANK ON BROTHER 😂 #shorts
00:12
Savage Vlogs
Рет қаралды 43 МЛН
Doing This Instead Of Studying.. 😳
00:12
Jojo Sim
Рет қаралды 31 МЛН
How To Resize Divi Column Widths To Any Size
7:58
Pee-Aye Creative
Рет қаралды 45 М.
Working with Custom CSS in Divi: Beginner Guide [2022]
31:07
Ania Romańska
Рет қаралды 4,3 М.
How To Make The Divi Blog Grid Equal Height
15:48
Pee-Aye Creative
Рет қаралды 14 М.
How to Create Custom Tabs with Icons using Blurbs in Divi Theme
24:48
Ania Romańska
Рет қаралды 55 М.
How to Keep Columns on Mobile in Divi
11:20
Josh Hall
Рет қаралды 100 М.
How to Create a Responsive Slide-In Menu with Divi’s Theme Builder
34:00
Beautiful Responsive Slide-in Menu in WordPress (Divi Theme)
12:17
GravityFox Interactive
Рет қаралды 8 М.
Advanced Tutorial: Create a Slide In Vertical Menu with Divi Theme
18:23
System 22 Web Design | Divi Theme Elementor WP
Рет қаралды 2 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 938 М.