Elementor How to Use Additional Custom Breakpoints

Check Out More At: Elementor

Software: Elementor | Affiliate Program

Elementor How to Use Additional Custom Breakpoints

Elementor How to Use Additional Custom Breakpoints

Elementor is a powerful WordPress page builder that allows users to quickly create and design webpages with ease.

One of the great features it provides is the ability to add custom breakpoints so you can optimize your designs for different screen sizes.

In this tutorial, we’ll walk you through how to use additional custom breakpoints in Elementor.

First, open the Elementor editor for the page you wish to edit. Then click on the “Advanced” tab in the left panel, and then click on “Responsive Breakpoints”.

This will open up a new panel that will allow you to add and customize additional breakpoints.

To create a new custom breakpoint, click the “Add Breakpoint” button. This will open a new panel where you can specify the width and height of your breakpoint.

You can also choose whether to apply this breakpoint to all devices or just certain ones.

Once you’ve added your breakpoints, you can begin customizing them for each device type or all devices. To do this, click the “Edit Breakpoint” button and select the breakpoint you wish to customize.

In the new panel that appears, you can change the font size, line height, padding, margin, border radius and more for each device type or all devices.

Once you’re done customizing your breakpoints, you can save your changes and test them out. If everything looks good, you’re ready to go! Happy customizing!

Please note that if you make any changes to a breakpoint while testing it out, they will be applied to all devices using the same breakpoint.

So make sure to check your changes before saving them!

Elementor already has default breakpoints built into its settings, however, you can add additional custom breakpoints to better suit your content.

Here’s how to use additional custom breakpoints in Elementor.

First, make sure that you’re logged into your WordPress website. Then, go to Elementor > My Library.

Click the Add New button.

Give your new template a name and then click the Create Template button.

You’ll be taken to the Elementor editor. From here, click on the three dots in the top left corner and then select Code Editing > Edit with Underscores.

This will open up the template in a new tab.

In the new tab, you’ll see the code for your template.

Find the line that says ‘/* Start of custom breakpoints */’ and add the following code below it:

/* Start of custom breakpoints */

@media only screen and (min-width: 1200px) {

.elementor-element {

padding: 50px;

}

}

@media only screen and (min-width: 1400px) {

.elementor-element {

padding: 100px;

}

}

@media only screen and (min-width: 1600px) {

.elementor-element {

padding: 150px;

}

}

/* End of custom breakpoints */

Be sure to replace ‘.elementor-element’ with the appropriate CSS selector for the element you want to target.

You can add as many custom breakpoints as you want. Just be sure to add each one on a new line and to include the closing curly bracket ‘}’.

Save your changes and then go back to the Elementor editor.

From here, you can preview your changes and make sure that they look the way you want.

And that’s it! That’s how you can use additional custom breakpoints in Elementor.