Elementor איך מוסיפים עוד נקודות שבירה לאלמנטור?

[miryd]

מישהו יודע להגיד לי איך אני מוסיפה עוד נקודות שבירה לאלמנטור?
הבנתי שזה תוסף, אבל רק מצאתי אחד בתשלום.

תודה רבה

 

[דידקטית]

תוסף??
יש טכניקות להסתדר עם הקיים.
או פשוט להוסיף css.

 

[miryd]

לא מספיק לי הקיים...
בגלל סוג העיצוב.

 

[פנחס אברהמי]

CSS

 

[GEH]

CSS

איזה CSS? אפשר לפרט?
וזה מוסיף לי באפשרויות של הגדלים באלמנטור? איך זה בדיוק עובד?

 

[פנחס אברהמי]

איזה CSS? אפשר לפרט?
וזה מוסיף לי באפשרויות של הגדלים באלמנטור? איך זה בדיוק עובד?

זה ה CSS:
@media only screen and (max-width: 1600px) {

selector h1{

color: red !important;

}

}

יש את הערכים של הפיקסלים ואת הצבע
בהצלחה!

 

[יוסי דויד]

מישהו יודע להגיד לי איך אני מוסיפה עוד נקודות שבירה לאלמנטור?
הבנתי שזה תוסף, אבל רק מצאתי אחד בתשלום.

תודה רבה

כרגע הדרך היחידה להוסיף היא באמצעות CSS
כרגע זה גם הכי נכון, כי אין צורך בגדול להוסיף, רק לאלמנטים ספציפיים, אז CSS זה פתרון מעולה

 

[נוכחות]

בדקו התוסף הזה

Custom Breakpoints for Elementor | codevision.io | innovative coding and development

With the Custom Breakpoints for Elementor plugin you can simulate all possible mobile devices ✓ 100% Elementor compatible ✓

www.codevision.io

 

[נוכחות]

אני מעתיק איזה מאמר ג"כ (אין אחריות על הנכתב)

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:

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

Github Request: Where Are The Custom Breakpoints? Opened May 25th 2020
Github Request: [Feature Request] Custom breakpoints Opened July 19th 2017
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.

...

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.

 

[תמנתי ווב דיזיין]

מעניין. אם התוסף הזה עובד זה מעולה. שווה לנסות.
אני יודעת שכולם ששים להציע CSS אבל יש בשוק כיום כל כך הרבה מעצבי אתרים ללא ידע בקוד שהוספת נקודת שבירה תעזור.