{"id":101,"date":"2018-10-16T14:07:57","date_gmt":"2018-10-16T06:07:57","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=101"},"modified":"2019-11-19T11:00:25","modified_gmt":"2019-11-19T03:00:25","slug":"responsively-hide-elements-elementor","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/responsively-hide-elements-elementor\/","title":{"rendered":"How To Responsively Hide Elements In Elementor"},"content":{"rendered":"\n

I had a situation in a website build recently where I wanted to show a high resolution slider on desktops and a lower resolution, static image on mobiles. I've done this before in Beaver Builder, but hadn't done it in the Elementor WordPress page builder<\/a>.<\/p>\n\n\n\n

We've got a guide on how to install Elementor<\/a> if you need to check that out before moving on with these steps.<\/p>\n\n\n\n

Here's how to responsively hide elements in Elementor:<\/strong><\/p>\n\n\n\n

  1. Select the element or row you want to hide<\/li>
  2. Click the Advanced tab<\/strong> in the editor<\/li>
  3. Click the\u00a0Responsive dropdown<\/strong> to open it<\/li>
  4. Choose whether to hide on Desktop, Tablet or Mobile.<\/li><\/ol>\n\n\n\n

    If you need to responsively hide columns in Elementor, not just elements, I\u2019ve got a full tutorial here<\/a>.<\/p><\/blockquote>\n\n\n\n

    This is what it looks like when you hide a text element for mobile<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    This functionality applies to both the free Elementor builder and Elementor Pro.<\/p>\n\n\n\n

    How would you use this?<\/h2>\n\n\n\n

    Having these switches allows you to easily get a lot more granular in your designs without having to dig too deeply into the code.<\/p>\n\n\n\n

    The most common way I've used this functionality is responsively displaying images. This lets you use high resolution photos on desktops, where you have more space to work with, a larger screen size and typically a wider display. It then lets you use better scaled images on smaller screens, where space is at a premium, speed is prioritised and you really can't tell if an image is high resolution.<\/p>\n\n\n\n

    The other way I've used these responsive design toggles is on whole rows, where I want a radically different design and rearranging the columns doesn't cut it.<\/p>\n\n\n\n

    Responsively hiding elements should only be done as a last resort, when you can't adequately restructure the content. But if you must use it, it's a great feature to have.<\/p>\n\n\n\n

    To what sizes do the Responsive toggles in Elementor apply?<\/h2>\n\n\n\n

    The way the Responsive toggles work in Elementor is they add one of the following CSS classes to the element or row that you hide:<\/p>\n\n\n\n