How To Add Custom Breakpoints To Elementor

Authored By: James LePage
Published On: July 6, 2020

In this article we're going to discuss how to add custom breakpoints to Elementor. Over the years, this has been a highly requested feature of the Elementor team, though they have yet to integrate this.

Why Do You Want Custom Breakpoints?

As an agency that uses Elementor to build client websites, we frequently have uses for custom breakpoints. For example, if somebody wants to look at the website on a mobile phone, in landscape mode, there's no built-in ability to to do that. In its simplest form, we would want Elementor to implement a mobile landscape mode. If they did that, the responsive selector tab in the editor would look something like this:

In a more complex form, we would want to be able to easily add custom breakpoints at specific pixel widths.

At one point, in the early 2010s, most devices had the same screen size. This refers to both laptops and mobile devices period now, in 2020, there are tons of different screen resolutions out there. For example, a MacBook 13in retina display has a resolution of 2560 x 1600, while a Dell 13in XPS display has a resolution of 3,840 x 2,400. Same class, different sizes.

Tailoring custom breakpoints to match the widths of these screens could be helpful. If you know that the majority of your visitors come from Apple laptops, building in this feature would make the user experience better and ultimately lead to more conversions and a lower bounce rate.

Another example of why you would need a custom breakpoint is this. On smaller tablets, a four column layout gets way too cramped to be usable. However, on a larger tablet such as an iPad pro, a four column layout fits perfectly on the screen and effectively displays information.

Currently, because there are no custom breakpoints you're stuck with one layout and need to make some tradeoffs. Either you can go with a 2 column layout - this works on the smaller tablet, but looks extremely spaced out on a larger tablet, or you can go with a four column layout, which looks good on a large tablet, but gets super cramped on a small tablet.

There's no way to set a good inbetween breakpoint that would let the columns collapse.

TLDR; Everybody really wants custom breakpoints and a landscape mode. There are legitimate use cases for this, yet Elementor has not added this feature in the three years since it's been recommended. (This seems to be a repeating issue with Elementor, not listening to developer feedback, but that's a point for another day.)

Because there's no implementation into the native Elementor builder, we're going to need to go and find some third party plugins that offer us the ability to do this. From our research, we found three major plugins that will allow you to add custom breakpoints to Elementor. To figure out which one is best for consumers, we got all of them and are going to give you a full walkthrough and comparison.

The two choices for custom breakpoint plugins

The first choice to add custom breakpoints to an Elementor website is a stand alone plugin developed by Codevision. Titled "Custom Breakpoints for Elementor", the plugin costs 20 euros or $22.5 USD.

The second choice is another standalone plugin that is designed specifically to add custom breakpoints to Elementor. It's called "WePixel Custom Breakpoints Plugin for Elementor" and is currently in its beta 1.0 version. It's remained in this version for some time now, so it may be an abandoned project. Nevertheless, purchasing a license works and we were able to install it on our test website. It costs 35 euros for a license that can be used on one domain (kind of expensive for a beta version of a plugin, in our opinion).

The third choice is an add-on pack called Piotnet Addons that contains this feature as as one of its many modules. PAFE has been out for some time now, and we're fans of what they have to offer. We mentioned them in our article comparing the top add-on plugins for Elementor. They cost $40 for one site license, or $60.00 for an unlimited site license. They also offer a lifetime deal.

If you know of another plugin, or a free solution, please leave a comment down below.

Now, let's go ahead and walk through each of the plugins, from the installation, to adding the custom breakpoints for Elementor. Hopefully, this will give you a good overview of what the plugins have to offer, helping you make an informed purchasing decision.

Codevision Custom Breakpoints for Elementor

The sole purpose of this plugin is to add custom breakpoints to your Elementor installation. This plugin is sold through Paddle, meaning that the purchasing process goes extremely smoothly. It's actively maintained, and fairly well designed. After installing it on your website, you can access the settings for the custom breakpoints plugin By clicking on its admin menu entry.

From this screen, you can import export and add new breakpoints as you need. The Codevision plugin comes with 18 breakpoints pre-installed, and you can add as many as you need. You can also enable and disable them, meaning you don't need to delete the break point, but you can remove it from the Elementor editor interface.

Codevision Custom Breakpoints Elementor

After setting your custom breakpoints, you can navigate to the Elementor editor, and making use of them. (We disabled all the break points but eight for this example. )

Custom Breakpoints Elementor

When toggling through the break points, you can choose between landscape and portrait mode. Here are some comparisons between the break points.

This breakpoint is for the iPhone 11/XR in landscape mode.

This plugin is actively maintained, and does its job really well. The back-end interface is easy to understand and use, and you can quickly toggle between custom breakpoints in the Elementor editor.

WePixel Custom Breakpoints Plugin

The best term to describe this plugin is “a bit sketchy”. The landing page isn't super well designed (The support form can be found at the bottom of the landing page, and is simply a generic Elementor form), and purchasing a license key is a bit shaky. However, following the instructions on Their website worked, and we were able to get a license key and a functioning plugin.

You access the settings for the custom breakpoints plugin by navigating to the page via an admin menu link. From the settings page for custom breakpoints, you can add an remove screen sizes as needed.

You can also go ahead and import and export these breakpoints for use on another website.

Once you set your breakpoints, you can navigate to the Elementor editor, and click on the responsive mode tab. you'll see the new custom breakpoints show up.

It functions just as the default Elementor breakpoints do, all you need to do is click on the individual breakpoint entry and the screen will adjust accordingly.

For example, here's a comparison between Breakpont 3, which is a custom breakpoint in Elementor with the max width of 1024 pixels, and the generic mobile break point (preview for 360 pixels).

Keep in mind, that you can easily add new breakpoints as need be. From our testing, this plugin seems to work well, and does exactly what most people need.

You can easily specify custom breakpoints for Elementor using this plugin. Despite the sketchy process of actually acquiring the plugin, once you have it on the website it works well.

Piotnet Addons For Elementor

This is a general add-on Plugin for Elementor and Elementor Pro, and it contains the custom breakpoints functionality in its core pro feature pack. There are a lot of extensions and addons that come with this plugin, which we discuss in another article.

The main thing that we're worried about in this article is adding custom breakpoints, which this plugin allows you to do. After purchasing the pro version and installing it on your website, you can access the custom breakpoint functionality from the backend feature enabler.

PAFE Custom Breakpoints Elementor

The custom media query breakpoints in this plugin work a bit differently than the other two. Instead of accessing your custom entries from the responsive mode menu, you access them in the actual settings for the individual element.

For example, if you want to set a breakpoint for an individual column, right click on it, navigate to the PAFE tab, and then enable the custom media query. you can add as many as you want.

You get access to a bunch of settings, like the width of the element , margin, padding, and typography settings.

You can access these break points for columns, and typographical elements. Read more about it here: https://pafe.piotnet.com/docs/custom-media-query-breakpoints

This plugin implements custom media query breakpoints a bit differently then the other two. While the other two give you a blanket screen size where you can edit everything, this tool assigns the styling to individual elements. This is much closer to what you would need to do manually through CSS if you weren't using any of the plugins.

Compared to the other two, this may be a good option for you if you're looking for something that does exactly this, but it could also end up complicating things.

What's the best option for you?

Of course, this is a decision that should be made by you depending on your budget and needs. However, our recommendation would be the first Custom Breakpoints plugin by Codevision. The sole purpose of the plugin is to add both landscape and portrait CSS breakpoints to the Elementor editor, and it does this really well. It comes with 18 presets, and you can add as many more as you need. The team behind the plug-in is based in Germany, has quick support, and does really great work.

We don't see any use case for the second plugin, as it pretty much does the same thing that the Codevision one does for 15 euros more (not to mention the fact that it's still in the beta version, and has a fairly unofficial purchasing flow).

Piotnet could end up offering you more value if you are looking for additional add-ons. The Codevision Plugin costs $20 and only adds the custom breakpoint functionality to Elementor. On the other hand, Piotnet adds this functionality along with dozens of other add-ons and editor workflow additions for $40. If you're looking for shear value, Piotnet wins in this category.

Keep in mind though that the Piotnet implementation of these features is a bit different than the other two. We also believe that it's a bit off the mark when it comes to what the market actually wants (which is probably something closer to the Codevision plugin).

We've personally used this add-ons pack in several of our client web sites, and were impressed with the quality of the product, quick support, and sheer volume of add-ons that are included in the plugin.

However, our recommendation still stands -- if you solely want to implement custom media query breakpoints on an elementary website, use the Codevision plugin (there are also better add-on packs then PAFE, such as ThePlus, Which is something that we discuss in our addons comparison article).

Are There Any Free Options?

You can also do this with custom CSS, except you would need to write a line of code for each element used in the website. While this is free, it would take a ton of time to actually implement, which is why we don't discuss it in length in this post.

Conclusion

We hope that this article effectively described how to add custom breakpoints for Elementor. We found three major plugins that add this functionality to Elementor, all of which are paid. Our general recommendation would be the Codevision plug-in, because it is the cheapest of the bunch and does what it says it will do very well. However, if you're looking to further your dollar, the Piotnet add-on pack comes with this and a lot more , making it the most valuable plugin Of the three.

As always, if you have any questions, comments, or additional methods of adding custom breakpoints to Elementor, feel free to leave them in the comments section.

Featured Image Created With Assets From Freepik

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Fabio Paolucci
Fabio Paolucci
28 days ago

Very insightful. Articles like these are crucial. You're doing a fantastic job. Keep it up!

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.