{"id":30286,"date":"2024-09-14T13:07:41","date_gmt":"2024-09-14T08:07:41","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=30286"},"modified":"2026-05-02T21:19:23","modified_gmt":"2026-05-02T16:19:23","slug":"how-to-add-additional-custom-breakpoints-in-elementor","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/how-to-add-additional-custom-breakpoints-in-elementor\/","title":{"rendered":"How to Add Additional Custom Breakpoints in Elementor?"},"content":{"rendered":"\n

Are you ready to add additional custom breakpoints in ELementor Profree?<\/p>\n\n\n\n

Recently, Elementor for WordPress introduced additional breakpoints, expanding from three to seven, offering more flexibility in designing for various devices. <\/p>\n\n\n\n

In this comprehensive guide, we’ll cover how to activate, edit, and add breakpoints to your site, along with understanding how styles cascade within Elementor.<\/p>\n\n\n\n\n\n\n\n

Activating Additional Breakpoints in Elementor<\/strong><\/h2>\n\n\n\n

Checking and Enabling Breakpoints<\/strong><\/em>: To begin, ensure that your Elementor settings have the new breakpoints feature activated. <\/p>\n\n\n\n

Step 1:<\/strong> Navigate to Elementor > Settings > Experiments, <\/p>\n\n\n\n

\"Activating<\/figure>\n\n\n\n

Step 2:<\/strong> Make sure the “Additional Custom Breakpoints” toggle is set to active. This step is crucial for unlocking the enhanced responsiveness options.<\/p>\n\n\n\n

\"Additional<\/figure>\n\n\n\n

Step 3:<\/strong> Last click on save settings.<\/p>\n\n\n\n

Verifying Activation on Your Site<\/em>:<\/strong> After enabling the feature, save your settings. Confirm that the additional breakpoints are now available on your website by going to an individual page and entering the Elementor editor.<\/p>\n\n\n\n

Add Elementor Breakpoints in the Editor<\/strong><\/h2>\n\n\n\n

Understanding Responsive Mode:<\/em><\/h3>\n\n\n\n

In Elementor, you can preview and edit your content across various devices using the responsive mode icon. By default, you have three devices: desktop, tablet, and mobile. Elementor adopts a desktop-first approach, with styles cascading downward based on the chosen device.<\/p>\n\n\n\n

Cascading Styles<\/em> <\/h3>\n\n\n\n

Learn how styles cascade within Elementor. When you make changes in the styling options for a particular device, those changes cascade down to smaller devices. This understanding is crucial for effective responsive design.<\/p>\n\n\n\n

Adding and Managing More Breakpoints<\/strong><\/h2>\n\n\n\n

Step 1:<\/strong> After opening Elementor Editor, Click on top three line.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

Step 2:<\/strong> Now click on Site Settings<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

Step 3:<\/strong> Scroll down, Click on Layout<\/p>\n\n\n\n

\"layout<\/figure>\n\n\n\n

Step 4:<\/strong> Under layout, Just click on Breakpoints.<\/p>\n\n\n\n

\"breakpoints<\/figure>\n\n\n\n

Step 5:<\/strong> Adding Breakpoints<\/em> Click the plus icon to add breakpoints. Mobile Extra, Tablet Extra, Laptop, and Widescreen are among the options available. Each breakpoint has a predefined pixel width, making it easy for you to choose the right breakpoints for your design.<\/p>\n\n\n\n

\"Elementor<\/figure>\n\n\n\n

Step 6: <\/strong>Updating and Applying Changes Once you’ve added new breakpoints, hit update to apply the changes. Elementor may prompt a reload; proceed with it to see the updated editor.<\/p>\n\n\n\n

Step 7:<\/strong> <\/em>Styling for Different Devices In the responsive mode, you’ll now have access to seven devices. Styles applied to desktop will cascade down to smaller devices, while the widescreen breakpoint allows you to make specific changes for larger screens.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Conclusion: Add Additional Custom Breakpoints in Elementor<\/strong><\/h2>\n\n\n\n

Congratulations! You’ve mastered Elementor breakpoints, unlocking a new level of control over your website’s responsiveness. Feel free to experiment with the various breakpoints and create a seamless user experience across devices. If you found this guide helpful, please share on social media.<\/p>\n\n\n\n

Frequently Asked Questions<\/h2>\n\n\n
\n
\n
\n

How do I add an extra breakpoint in Elementor?<\/h4>\n
\n\n

Go to u003cstrongu003eElementor Settingsu003c\/strongu003e \u2192 u003cstrongu003eSite Settingsu003c\/strongu003e.u003cbru003eClick u003cstrongu003eBreakpointsu003c\/strongu003e and you\u2019ll see the default ones.u003cbru003eClick u003cstrongu003eAdd Custom Breakpointu003c\/strongu003e, input your desired screen size, and save.<\/p>\n\n<\/div>\n<\/div>\n

\n

How do I add a custom screen size in Elementor?<\/h4>\n
\n\n

Navigate to u003cstrongu003eElementor Settingsu003c\/strongu003e \u2192 u003cstrongu003eSite Settingsu003c\/strongu003e.u003cbru003eUnder u003cstrongu003eBreakpointsu003c\/strongu003e, you can add or edit existing breakpoints by inputting custom pixel values<\/p>\n\n<\/div>\n<\/div>\n

\n

How do I add custom code to WordPress Elementor?<\/h4>\n
\n\n

From the WordPress dashboard, go to u003cstrongu003eAppearanceu003c\/strongu003e \u2192 u003cstrongu003eTheme Editoru003c\/strongu003e.u003cbru003eYou can add custom code directly into your theme’s u003cstrongu003eheader.phpu003c\/strongu003e or u003cstrongu003efooter.phpu003c\/strongu003e file.u003cbru003eFor specific page or section custom code, use Elementor\u2019s u003cstrongu003eCustom Codeu003c\/strongu003e feature under u003cstrongu003eSite Settingsu003c\/strongu003e.<\/p>\n\n<\/div>\n<\/div>\n

\n

How do I add a new section to a page in Elementor?<\/h4>\n
\n\n

In the Elementor editor, click the u003cstrongu003e+ iconu003c\/strongu003e to add a new section.u003cbru003eChoose the structure (e.g., one column, two columns).u003cbru003eDrag widgets into the section to build your content.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"

Are you ready to add additional custom breakpoints in ELementor Profree? Recently, Elementor for WordPress introduced additional breakpoints, expanding from three to seven, offering more flexibility in designing for various devices. In this comprehensive guide, we’ll cover how to activate, edit, and add breakpoints to your site, along with understanding how styles cascade within Elementor. […]<\/p>\n","protected":false},"author":5,"featured_media":30302,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,2],"tags":[524,233,493],"class_list":["post-30286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-wordpress","tag-breakpoints","tag-elementor-guide","tag-elementor-tips"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/30286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=30286"}],"version-history":[{"count":1,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/30286\/revisions"}],"predecessor-version":[{"id":38564,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/30286\/revisions\/38564"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/30302"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=30286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=30286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=30286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}