Custom Elementor Breakpoints Setup & Configuration by Master Addons #
Last updated: July 8, 2026 — written by Roy, Master Addons team
The Custom Elementor Breakpoints feature, available through Master Addons Pro (or up to 3 breakpoints in the free version), allows you to create fully responsive website layouts optimized for a wider range of screen sizes beyond Elementor’s default Mobile, Tablet, and Desktop settings. This ensures a consistent and high-quality user experience across any device.
Using Custom Elementor Breakpoints, you can:
- Add as many custom breakpoints (screen widths) as needed (unlimited with Master Addons Pro).
- Define specific layouts, font sizes, spacing, and alignment for devices like Small Mobile, Large Tablet, or custom screen sizes.
- Override Elementor’s default responsive behavior at precise pixel widths.
What Are Custom Elementor Breakpoints? #
Custom Elementor breakpoints are extra, user-defined screen-width thresholds that let your layout adapt at sizes beyond Elementor’s built-in Mobile, Tablet, and Desktop views. Instead of being limited to three device views, you set the exact max-width (in pixels) where a new responsive layout should begin — for example a 600px small-mobile breakpoint. Master Addons adds up to 3 custom breakpoints on the free plan and unlimited breakpoints with Pro, giving you precise control over responsive design without touching code.
So, let’s see how to set up and configure this feature.
Setting Up Custom Elementor Breakpoints #
Quick answer: install the Custom Breakpoints extension from Master Addons > Extension, open the new Breakpoints page under the Master Addons menu, then enter a Max-Width in pixels for each device size you want to target (for example, 600px for small mobile).
Follow these steps to install and define your custom breakpoints.
Step 1: Install and Activate the Extension #
- Navigate to the Master Addons menu in your WordPress dashboard.
- Go to the Extension tab.
- Find the “Custom Breakpoints” option and click the download button to install and activate it on your website.
Step 2: Access the Breakpoints Settings #
- In the WordPress dashboard, hover over the Master Addons menu.
- A new menu item titled “Breakpoints” will appear. Click on it. This will redirect you to the custom breakpoint input page.
Step 3: Add Custom Breakpoints #
On the Breakpoints input page, you will see Elementor’s three default breakpoints (Mobile, Tablet, and Desktop).
To add a new custom breakpoint, use the input field to set only the Max-Width (in pixels).
For example, to target small mobile devices, enter 600px as the max width.
After saving, the system will automatically adjust the Min-Width for the next default breakpoint. In the example above, the “Small Mobile” breakpoint will apply to all screens less than or equal to 600px, while the default “Mobile” breakpoint will start at 601px and end at the Tablet breakpoint’s minimum width.
You can add or remove breakpoints as needed from this page.
Using Custom Elementor Breakpoints #
Once configured in the Master Addons settings, the custom breakpoints become available directly in the Elementor page editor.
Step 1: Open Responsive Mode in Elementor #
Go to any page and click “Edit with Elementor.” Click the Responsive Mode icon (usually a monitor and phone icon) at the bottom left of the panel.
Step 2: Select a Custom Breakpoint #
The top bar will display all available breakpoints, including the custom ones you created (e.g., “Small Mobile”).
Click on your Custom Breakpoint to change the editor view to that specific screen size.
Step 3: Apply Custom Styles #
Select any element (e.g., a Heading widget).
Go to the element’s Style tab.
Click the Responsive Icon (desktop monitor) next to any style setting, such as Typography > Size or Content > Alignment.
Define a specific value for that breakpoint (e.g., set the font size to 20px). This value will only apply when the browser width is within the range defined for that custom breakpoint.
Step 4: Save and Preview #
Once you have defined your responsive styles for all necessary breakpoints, click Update to save the page.
Preview the page live and resize your browser window to see your custom breakpoints trigger the unique styles you defined.
Frequently Asked Questions #
How many custom breakpoints can I add in Elementor?
Master Addons adds up to 3 custom breakpoints on the free plan and unlimited breakpoints with Master Addons Pro. Each breakpoint is an extra max-width screen size layered on top of Elementor’s default Mobile, Tablet, and Desktop views for fully responsive layouts.
How do I add a custom breakpoint in Elementor?
Install the Custom Breakpoints extension from the Master Addons Extension tab, open the new Breakpoints page under the Master Addons menu, and enter a Max-Width in pixels — for example 600px for small mobile. After you save, the new breakpoint appears in Elementor’s Responsive Mode ready to style.
Do custom breakpoints require Elementor Pro?
No. Custom breakpoints are a Master Addons feature, not an Elementor Pro feature. The free Master Addons plugin gives you up to 3 custom breakpoints, and only the higher limit requires Master Addons Pro.
Do I need to set a min-width for each breakpoint?
No. You only enter the Max-Width. Master Addons automatically adjusts the Min-Width of the next breakpoint so the ranges never overlap — for example, a 600px small-mobile breakpoint makes the default Mobile view start at 601px.
Do custom breakpoints slow down my website?
No. Breakpoints only add standard CSS media queries, which are lightweight, and the styles you set load exactly like Elementor’s built-in responsive styles. Following general Elementor speed best practices keeps the page fast regardless of how many breakpoints you use.
