What are Elementor Breakpoints

Consider this for a second: 73.1% of website designers believe non-responsive site design is one main reasons visitors leave a website midway. On the other hand, 50% of consumers believe web design directly influences a company’s branding. 

Taking these facts into consideration makes one thing quite clear: 

Your website design needs to be responsive and fluid. So when creating a dynamic website, the first thing to ensure is to create a layout that adapts effortlessly across all devices, from smartphones to desktop browsers. 

As a web designer, you will have no control over the kind of device people will use to browse your site. Hence, it is imperative to build a responsive layout that quickly changes orientation according to different screen sizes without losing any of the design elements. 

Elementor breakpoints help you do just that. You don’t need to be tech-savvy to build a responsive website. The custom breakpoints from Elementor make designing look like a cakewalk. 

What are Web Design Breakpoints?

Have you ever wondered why responsive web designs can quickly adapt to different screen sizes? 

The secret weapon behind this magical transition is the web design breakpoint. A breakpoint is a value you define at which the design layout and orientation change with changing screen sizes. For designers, a common breakpoint is usually a media query.

Typically, a breakpoint is added when the content looks misaligned. Once you define the value, the content will respond accordingly to the screen orientation and device width. 

Usually, developers go with a mobile-first approach while defining breakpoints. As the smallest screen real estate in the market, developers find it easier to design the mobile version and expand it to bigger screen sizes than vice-versa.

This approach makes a lot of sense when you consider a study by Statista, which claims a whopping 58.9% of traffic was generated from mobile devices in 2022. 

Source

The mobile-first approach also helps with your SEO efforts since people are more likely to search for new websites on their phones than on a desktop browser.

What are Elementor Breakpoints?

Before we get into the details of Elementor breakpoints, let us take a minute to understand what Elementor is.

Elementor is a visual drag-and-drop website builder plugin for WordPress. 

The live visual builder lets you create visually stunning responsive website designs, landing pages, and custom fonts without requiring prior coding knowledge. 

Elementor offers numerous design templates and prebuilt widgets, and a range of style options that you can use to customize your page. 

With multiple global font options, 300+ templates, advanced motion effects, custom attributes, and rollback versions, Elementor is one of the most sought-after WordPress plugins in the market. In addition, the plugin comes with a highly intuitive, user-friendly UX interface and offers a fast, lag-free design experience. 

Elementor Breakpoints

The default Elementor breakpoint have been redefined as: 

1. Mobile: less than 767px 
2. Tablet: 767px < 1024px 
3. Desktop: 1024px and above 

In their latest version, Elementor has added an additional custom breakpoint feature that now allows users to add up to 4 new custom breakpoint ranges:

• Mobile Extra (breakpoint value between mobile and tablet)
• Tablet Extra (breakpoint value above tablet, below laptop and widescreen)
• Laptop (breakpoint value above tablet and, if added, also above tablet extra)
• Widescreen (a min-width breakpoint for extra-large screens)

Widescreen Breakpoint

To adapt to constantly evolving technologies like 8K screens and extra wide displays, Elementor 3.4.0 added a new breakpoint value that exceeded their previous min-width value for desktops.

Why should you Add Breakpoints in Elementor?

With the introduction of newer screen sizes, responsive website design is no longer a luxury. Take the example of iPhone 14, which comes in four different variants: iPhone 14, iPhone 14 Plus, iPhone 14 Pro, and iPhone 14 pro max. 

And smartphones are not the only examples. More and more people are using smart TVs and widescreen tablets to browse websites.  

Elementor breakpoints allow you to target any screen size across all devices to create dynamic web pages. Some devices specify min-max width for breakpoints. With six custom breakpoints in Elementor, now you can have the control to choose active breakpoints and set their value to fit any device.

How to Add Elementor Breakpoints?

Follow these instructions to add default breakpoints in Elementor:

1. Log on to your WordPress site as an admin user. Go to pages in the dashboard and click Edit with Elementor. Navigate to the Layout option under Site Settings.
2. Navigate to the Breakpoint tab under the Layout menu and select from the three default options.

How to Edit Elementor Breakpoints?

Follow the instructions below to edit Elementor breakpoints:

1. Navigate to your WordPress dashboard. Click Elementor Page or Post Editor. 
2. Click the hamburger menu on the top left of the panel. 
3. Click Site Settings > Layout > Breakpoints. Modify the values according to each device. Save changes. 
4. Navigate back to Elementor > Tools > General Tab and click Regenerate CSS. 

What is a Mobile Breakpoint in Elementor?

A mobile breakpoint is a value at which your content layout is perfected for mobile screen sizes. In Elementor, the default mobile breakpoint range is set at < 767px. 

However, the Elementor lets you choose the Mobile Extra option to set custom breakpoint values for mobiles with extra large screens. 

How to Add Custom Breakpoints?

To add custom breakpoints to your site, you must activate the Additional Custom Breakpoints feature in the Elementor plugin. Follow the steps below to activate this feature:

1. Navigate to your WordPress dashboard. In the sidebar menu, click Elementor and navigate to the Settings menu.
2. Go to Experiments under the Settings tab. Scroll down to Additional Custom Breakpoints.
3. Change the status to ‘Active’ and save your settings.
4. Go back to the Elementor Editor and select ‘Responsive mode’ from the panel above. At the top left bar, select the Settings icon. Navigate to Site Settings. Click on Breakpoints and add additional custom breakpoints.

Pro tip:

Elementor follows a cascading flow for its breakpoints. So if you set changes in larger breakpoints, it will subsequently change the pixels of the smaller breakpoints. However, vice versa is not possible.

Common Elementor Breakpoints for Responsive Design

The default max-width breakpoint values in Elementor are 767px for mobile and 1024px for tablets. However, some standard breakpoints used by developers for responsive websites are as follows:

• Mobile: Less than 640px. For devices with 4” – 6.9” screen size, optimum breakpoint values are 320px – 414px for portrait mode and 568px – 812px for landscape mode. 
• Tablets: 641px – 1024px. For devices with 7” – 10” screen size, optimum breakpoint values are 768px – 834px for portrait mode and 1024px for landscape mode.
• Desktop, widescreen devices: Above 1024px. 

Apart from these values, you can also use the four extra custom breakpoints in Elementor to help you adapt your content layout to a broader range of screen sizes. 

The additional breakpoints allow you to shift quickly between widescreen phones and widescreen smart TVs without affecting the speed or responsiveness of the website. 

How to Test a Website created using Elementor and WordPress using BrowserStack? 

BrowserStack is a cloud-based cross-browser testing platform. It lets you analyze your website’s responsiveness across 3000+ devices. It requires no prior installation and gives you real-time insights into your website design’s responsiveness. 

Once you have finished developing your website using the Elementor plugin on WordPress, go to BrowserStack to analyze your website’s performance in real-time cloud-based devices. 

Get a free BrowserStack Account

Using BrowserStack Live

1. To perform manual WordPress testing of your site created using Elementor, log in to your BrowserStack
2. Select the device you want to run your test on. Choose from the browser options.
3. Once you get access to the device, enter the website’s URL to start testing. 
4. You can also change the orientation to landscape mode by clicking on rotate device in the right panel. To test your website on another device or a different browser, simply click on Switch Browser.

Try BrowserStack Now

Using BrowserStack WordPress Plugin

BrowserStack also provides a WordPress plugin that integrates with your website and allows you to run a browser compatibility test in a matter of minutes. 

1. Download the plugin from your WordPress dashboard and enable it.
2. Find the BrowserStack plugin in your right panel. Create a free account on BrowserStack and log in. Now you are ready to test your web pages by generating screenshots.
3. To take screenshots, go to any page or post you want to take action on and click on 1-click screenshot.
4. Login to your BrowserStack account by creating a free account. Once you are logged in, you will get screenshots of your website across ten different devices.
5. To debug any issue, click on the Live button to run live testing.

Try BrowserStack Now