Creating Responsive Websites with Elementor

Responsive Websites with Elementor
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 23/12/2023

Creating Responsive Websites with Elementor

Creating Responsive Websites with Elementor has never been easier. This article covers how to format your website for mobile and tablet. Elementor labels this process as ‘Responsive’ or ‘Responsive Mode’. With their simple interface, you can toggle between tablet and mobile view with just the click of a button.

How to format a website for mobile and tablet using Elementor page builder

What is a Website Responsive Mode?

The responsive setting is often overlooked by beginners but it is an important one. Responsive mode is how your website appears on devices such as mobiles and tablets.

To switch to responsive mode, click the device icon at the bottom of Elementor’s sidebar. See screenshot below:

Activate Responsive Mode: Responsive Websites with Elementor

Responsive Websites with Elementor: Formatting for Mobile and Tablet

How to Switch Between Desktop, Mobile and Tablet

Elementor has numerous editor features. One of the most intuitive is its Responsive Mode. Responsive Mode allows you to switch between desktop, mobile and tablet viewing. To change your browser’s Responsive mode, select the Desktop icon at the bottom of your editor’s side box.

Mobile Tablet responsive mode

As you switch between Responsive Modes, you can change the respective settings and this will change how the site looks on that device.

It is important to note though that not all settings are exclusive to that Responsive Mode. These are delineated by the absence or presence of a Responsive icon. The Responsive Icon will appear next to the setting you wish to change and is present on Containers and Widgets.

If the responsive icon is not present, this indicates that changing this setting will affect all devices rather than the one you intend to edit.

The screenshot above highlights what Responsive Icons look like. As you can see, there is a small icon of a desktop in the Alignment setting. Changes to this section will be made to only the desktop view. When there is no icon, changes will be made across all devices.

You can change your editing view by selecting Desktop, Tablet or Mobile icons in the top centre panel of the screen. Try dragging some widgets onto your test page and see how they look like when you switch between Mobile and Tablet Responsive Mode.

Which Responsive Mode to Build in?

This really depends on the primary use of your website. If you think most of your visitors will be mobile first, it would make sense to design in this.

However, when it comes to building your website with Elementor, it is best practice to build in Desktop mode first as these settings apply to all devices. You can then tweak this for specific devices later. 

That said, with over half of all web traffic being mobile devices, it is important to remember mobile device restrictions and formats when building your site. There is no point in building a beautifully laid out desktop website that doesn’t translate to mobile very well.

As of 2020, here is the global breakdown of internet traffic:

  • 50.88% mobile
  • 46.39% desktop
  • 2.74% tablet 

Link source: telemediaonline.co.uk

Hiding Elements in Responsive Mode

As we’ve discussed, it’s extremely important to build with all devices in mind. However, some layouts or widgets you create just might not translate well to other devices. Or you might decide you want to make mobile viewing simpler than desktop and choose to remove sections of your site to improve flow. 

You can hide Widgets or even entire Containers from all devices or specific ones. To hide a spesific Widget, with the Elementor page builder open:

  1. Select the Widget or Container you wish to hide
  2. Click the Advanced Tab
  3. Scroll to Responsive
  4. ‘Toggle’ on and off the component under the device you wish to hide it on
Reversing Columns on different devices

Web Hosting

From £19.95 /mo