People engage with your website in different ways on desktop, mobile and tablet devices so you may sometimes want to show or hide content on your website to these specific users. If you want to hide certain Divi modules, rows or sections when a visitor is viewing on those devices you can easily do so with the built-in disable settings in the Divi builder. All you need to do is use the right-click options and choose which devices to hide using the 3 icon options.
You may also find this setting useful if you have a section, row or module that you want to disable temporarily but don’t want to delete it or have to save it to and then reload it from the Divi library. Just disable the content on all 3 screen sizes and enable again when you are ready. I regularly use this in the Divi layouts page as new rows are added and it is a nice time-saver in the long-run.
How to disable Divi sections, rows or modules
- Right-click on the section, row or module that you want to disable
- Click on each of the icons you wish to disable content for (mobile, tablet & desktop)
- The enabled screen sizes will be shown with a green icon and will be hidden and
- The disabled screen sizes will show a red icon and be visible on your website.
- Click on the module, row or section settings icon (the gear icon)
- Click on the advanced tab
- Click on the Visibility section dropdown
- Check the mobile, tablet or desktop checkboxes
- Save settings with the green save button
Hide multiple sections, rows or modules with multi-select
To speed up the process of hiding or showing multiple modules, rows or sections at the same time you can use the Divi multi-select feature. All you need to do is hold down the Cmd or Ctrl keys and click on sections, rows or modules to select them all. You can also hold down the Shift key and click to select a series of modules within a column, a series of rows within a section, or a series of sections within a page.
Once selected, you can then access the bulk edit settings via any of the selected items and update those settings for all of the selected items at once.
Genius! Such a simple clean way to do so much!! If you can remember ..way back when divi and wordpress and web design were brand new to you … and css and php were still a bit of a puzzlement, then you’ll be able to fully comprehend how appreciative I am of this beautiful snippet of code, not to mention how relieved that I came across your page 🙂 ! Thanks! Have a wonderful day !!
thanks, but this was code from 2015. Divi now has this option inbuilt. just right click on the module, section or row and click on disable… check the icons for mobile, tablet or desktop as required. very easy,
Thanks for the info! yes, I don’t know why I keep forgetting about the right click..it offers up a lot of easy options … I used your code snippet though as for some reason something I did along the way made that element inaccessible on visual builder n rolling it back created other issues so this was an easy n neat solution. I’ll check out right click on the backend builder. Loved the Bare Bones Child Theme btw. My response to seeing that was “Where have you been all my Divi life !” I had already figured all that out… Read more »
I’m having a recurring problem with disabling Divi sections/modules on mobile and tablet views. I create 2 copies of a module or section to reflect different styles for desktop and tablet/mobile, then disable as appropriate using the Advanced tab. When I update the work, Divi is displaying BOTH versions on all device types. I can’t seem to hide the disabled versions on any device. Am I missing a step?
it sounds like you are doing it right. maby best to ask ET support to take a look.
it sounds like a miracle the switching off possibility inside the Advanced section of each module.
However, of all modules?
The Blurb section (Version: 3.27.4) hasn’t any check boxes for Phone and so on. What can I do instead, if I like to see a blurb in a mobil environment only?
Blurb module? it has these visibility options for me.