Today, we are going to let you know how Elementor custom breakpoints plugin work. Among the hundreds of top-notch features included in the Elementor, the custom breakpoint is a must-have feature to give your website a pro look.
While you are intending to make a 100% responsive webpage, the Custom Breakpoint for Elementor will help you to do it perfectly. In general, Elementor offers only three custom breakpoints to use.
Luckily, Master Addons comes with a huge collection of breakpoints. You can use 17 default custom breakpoints in the premium edition of Master Addons. And, the free Master Addons offers as the usual Elementor offers, it has 3 custom breakpoints.
Elementor Custom Breakpoints Plugin
First of all, you have to install Custom Breakpoint. Once installed, save it and reload the webpage. The plugin will help you to add breakpoints to your page.
Why Custom Breakpoint is Required?
While using Elementor to create your client websites, you need to use custom breakpoints. If you want to get your site on a mobile phone, in landscape mode, then you definitely need the help of custom breakpoints. That means, to use Elementor to get a mobile landscape mode in your website, you have to use custom breakpoints. Besides, you can simply add custom breakpoints at particular pixel widths.
Earlier in 2010s, most of the devices used to have the similar screen width. But, at present, in 2020, you will get plenty of screen resolutions available. That is, a MacBook 13 inches retina display comes with a 2560 by 1600 resolution, whereas a Dell 13 inches XPS display comes with a resolution of 3,840 by 2,400. That is to say, they are similar in class but dissimilar in sizes.
Another important thing of the custom breakpoint is- it enables your site to fit perfectly on different screens.
This is not all though. Let’s dive deeper into the Custom Breakpoints, and you will know how it works.
How Elementor Custom Breakpoints Works?
Today we are going to have a look at the pro Custom Breakpoints which will give an unlimited amount of breakpoints. If you are a free Master Addons user, then you able to add limited number of breakpoints.
Elementor is a kind of limited in the custom breakpoints. So, you will be no more limited to the default breakpoint. That means you can add plenty of custom breakpoints.
Here you can put your device name. Then, name the breakpoint. Set the minimum and maximum width. Select however you want to set it up.
There is a special feature you’d surely like is Import/Export. Let’s say, you have multiple sites and you have your own custom breakpoints that you work for client’s multiple sites you could export those settings and import them into each one instantly. So, you don’t have to add these each one back in manually every single time you work on a website.
Install the Master Addons right now!
Then, activate the Custom Breakpoints Plugin within a few seconds. As you have done the plugin installation, now we will go for a page to work with. Let’s go to “pages” and “add new”.
I’m now going to set a quick page. That will express how the page editor looks on Custom Breakpoint.
Editing The Design For Breakpoints
I’m dragging the Heading, and Text Widget element inside a section. As I’ve added 2 breakpoint before, you can see that inside the “Responsive Mode” option. All configured breakpoints will appear here, select gradually one by one and do responsive for the elements or sections.
Enjoy the following GIF animation.
As I mentioned earlier there is a cool feature named Import/Export setting.
You can just delete all of default breakpoints and arrange exact min-max width on your needs. Then export the settings. This is going to give you a jason.file. You can take this file and import it anytime.
This is all about how Elementor custom breakpoints work on Master Addons. The custom breakpoint widget will really help you to fine-tune your designs and to look great on all devices.
Hopefully, the following tutorial was fruitful for you. If you still have any questions, feel free to ask us in the comment box below or use the contact form to get in touch with us.