New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
β π£ Elementor Pro v3.1 Beta 3 Release π£ #13633
Comments
Here's a suggestion regarding the custom code functionality from my point of view as a web creator: The situation:
The problem:
The solution
Summary How it was: "Want to change/add some function? Create a child theme and... bla bla." WordPress has a snippet for just about anything you need. If you're a pro web creator, you will be using snippets all the time. Having this function in a page builder makes perfect sense. Having only custom HTML functionality doesn't solve the problem for web creators and we will still have to use plugins. You can prevent publishing if the code throws an error (like other code snippets plugins), so that's not an issue. If the argument is something like "We don't want people adding php code, because...". Well, web creators add php snippets all the time. The question is, will they have to do it with other plugins, or will they be able to do it in Elementor? |
That sounds plausible. I think if, then right. |
This makes perfect sense. |
I didn't see any mention of creating shortcodes from snippets, like in the plugin Post Snippets. Can this be an enhancement? |
@MichaelDarko - what you write makes sense, and then I thought -- its not finished, this is just the first code module. |
This comment has been minimized.
This comment has been minimized.
Also, I know this is not related to any specific feature, but I think Github should also be for strategy feedback, not just bugs and features. If somebody form Elementor, who has something to say about strategy, could check this issue: #13125 I'm finding the whole editor interface very limiting and it's not really changing much in the right direction. After 5 years, it seems like a good time to do an overhaul that would give us the freedom to build more freely (like Webflow) instead of being stuck with limited styling customizability and single-purpose widgets. |
@MichaelDarko please, let's focus on testing this thing. Complaining doesn't help and the spam is annoying. I think a point has been made about the feature in question. Let's focus on that. |
Still here is the same bug with adding custom repeater control to advanced tab. Copy/paste styles not working when custom repeater added to element to advanced tab. There are many addon`s that add custom repeater control to advanced tab. JetEngine from Crocoblock for example. Also on form widget text field not working with custom repeater control in advanced tab. |
The ability to add custom code is fantastic but needs some precautions on the conditions. For example, following the acceptance of the cookie consent popup (built with elementor) I could bring up the tag manager code and in turn avoid the use of at least one additional plugin and adapt everything to compatibility with GDPR and similar regulations. think about it :) |
I think they can enable certain zones to enter the code similar to what Astra does. It would be good option for theme creators to be able to use Elementor environment for custom code areas. |
I'm testing the 3.1 version and I'm still experiencing this bug: #13038 I've contacted support and sent them login info to this example page with the bug - https://beta.mbdemo.cz/ So you can login, test it and look at the JS errors to figure out what's happening. Some imported widgets with global colors have this bug, some are fine. Here's a recording of the bug from another users: https://d.pr/v/nxEk9z After 3 months of this, the 3.1 version might be a good time to fix it. |
When editing as a user with a user role in Elementor of edit content only it still shows the "Edit Header" and "Edit Footer" shortcuts above the header and footer in the elementor builder which should be hidden from them so the edit-only users can't meddle with theme building. |
I left here a compatibility problem with the codemirror text field, in case it helps |
We just released a new beta version, please update your version to Pro v3.1.0 Beta 2. This beta release includes:
Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue. Thanks again to everyone. |
Thanks for new beta. It seems to link to different issue. About having submenu indicator option to choose own svg or icon. (which i would love) |
Thanks @sermalefico, we are looking into it
Thanks, removed this reference. sorry for the mix up Thank you all. |
@shilo-ey What about this? Are you considering implement this for the release? |
@shilo-ey Maybe I'm misunderstanding the code highlight widget, but does it allow you to actually insert executable code? Or is it only for displaying code. If it's only for displaying code that seems like a very niche use case. Having the ability to execute code from the widget would be great, so if it already does that fantastic. |
It's only for displaying code. You can copy it to your clipboard too though. The other feature mentioned in the post is to add custom code at various places of the website that executes. What is the use-case for having the code highlight widget to also execute code? |
What is the use-case for having the code highlight widget to also execute
code?
The global custom code feature allows you to run custom(as I understand it)
html(and that's all that's supported).
Allowing this widget to execute code would allow you to place your code in
a much more targeted manner. You may only want to execute code on a
specific portion of the page, and widgetizing it allows you to place it
exactly where it needs to be.
β¦On Wed, Feb 3, 2021, 2:46 AM Lucky ***@***.***> wrote:
@shilo-ey <https://github.com/shilo-ey> Maybe I'm misunderstanding the
code highlight widget, but does it allow you to actually insert executable
code? Or is it only for displaying code. If it's only for displaying code
that seems like a very niche use case. Having the ability to execute code
from the widget would be great, so if it already does that fantastic.
It's only for displaying code. You can copy it to your clipboard too
though.
The other feature mentioned in the post is to add custom code at various
places of the website that executes.
What is the use-case for having the code highlight widget to also execute
code?
β
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#13633 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHSHPLZSJRIEU2QD6KLKGSTS5ESRVANCNFSM4WLBN7FA>
.
|
Adding the ability to execute JavaScript and php code in the widget would
make this functionality useful
β¦On Wed, Feb 3, 2021, 3:33 AM Michael Meadow ***@***.***> wrote:
What is the use-case for having the code highlight widget to also execute
code?
The global custom code feature allows you to run custom(as I understand
it) html(and that's all that's supported).
Allowing this widget to execute code would allow you to place your code in
a much more targeted manner. You may only want to execute code on a
specific portion of the page, and widgetizing it allows you to place it
exactly where it needs to be.
On Wed, Feb 3, 2021, 2:46 AM Lucky ***@***.***> wrote:
> @shilo-ey <https://github.com/shilo-ey> Maybe I'm misunderstanding the
> code highlight widget, but does it allow you to actually insert executable
> code? Or is it only for displaying code. If it's only for displaying code
> that seems like a very niche use case. Having the ability to execute code
> from the widget would be great, so if it already does that fantastic.
>
> It's only for displaying code. You can copy it to your clipboard too
> though.
>
> The other feature mentioned in the post is to add custom code at various
> places of the website that executes.
>
> What is the use-case for having the code highlight widget to also execute
> code?
>
> β
> You are receiving this because you commented.
> Reply to this email directly, view it on GitHub
> <#13633 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AHSHPLZSJRIEU2QD6KLKGSTS5ESRVANCNFSM4WLBN7FA>
> .
>
|
I have worked with designers who prefer straight code over a page builder,
so integrating code directly into the widget/editor and allowing it to be
placed anywhere would be the best option.
They feel like drag and drop is limiting, so I feel like this would be the
best of both worlds.
β¦On Wed, Feb 3, 2021, 3:33 AM Michael Meadow ***@***.***> wrote:
Adding the ability to execute JavaScript and php code in the widget would
make this functionality useful
On Wed, Feb 3, 2021, 3:33 AM Michael Meadow ***@***.***> wrote:
> What is the use-case for having the code highlight widget to also execute
> code?
>
> The global custom code feature allows you to run custom(as I understand
> it) html(and that's all that's supported).
>
> Allowing this widget to execute code would allow you to place your code
> in a much more targeted manner. You may only want to execute code on a
> specific portion of the page, and widgetizing it allows you to place it
> exactly where it needs to be.
>
> On Wed, Feb 3, 2021, 2:46 AM Lucky ***@***.***> wrote:
>
>> @shilo-ey <https://github.com/shilo-ey> Maybe I'm misunderstanding the
>> code highlight widget, but does it allow you to actually insert executable
>> code? Or is it only for displaying code. If it's only for displaying code
>> that seems like a very niche use case. Having the ability to execute code
>> from the widget would be great, so if it already does that fantastic.
>>
>> It's only for displaying code. You can copy it to your clipboard too
>> though.
>>
>> The other feature mentioned in the post is to add custom code at various
>> places of the website that executes.
>>
>> What is the use-case for having the code highlight widget to also
>> execute code?
>>
>> β
>> You are receiving this because you commented.
>> Reply to this email directly, view it on GitHub
>> <#13633 (comment)>,
>> or unsubscribe
>> <https://github.com/notifications/unsubscribe-auth/AHSHPLZSJRIEU2QD6KLKGSTS5ESRVANCNFSM4WLBN7FA>
>> .
>>
>
|
I think is more suitable if the custom code post type have shortcode copy/paste like elementor templates. Because put code (php) inside widget can make critical errors when save and can break websites, pages or templates. |
We just released a new beta version, please update your version to Pro v3.1.0 Beta 3. This beta release includes:
Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue. Thanks again to everyone. |
@sermalefico - Since you are using a shortcode to execute your script, inside the editor the following hooks are triggered before your shortcode script runs and therefore not executed: $(window).on('elementor/frontend/init', function() {
elementorFrontend.on('components:init', function () {
// ...
});
}); Thus, when using a shortcode you shouldn't use these hooks inside the editor. An optional solution can be as follows: jQuery(document).ready(function($) {
if ( elementorFrontend.isEditMode() ) {
// Call your function here.
} else {
elementorFrontend.on('components:init', function() {
// Call your function here.
});
}
}); Create a function that initializes the swiper and call it instead of the comments: "// Call your function here.". |
Hey all, the release date has been postponed to next week. If you spot any new issues please share them with us here. Thanks! |
Oops! i have a mistake! sorry now is works!. thx! Now can load swiper with the improved assets loading, cool! <script>
jQuery(document).ready(function($) {
if ( elementorFrontend.isEditMode() ) {
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper( "#banner-inicio", {
loop: true,
autoHeight: true,
speed: 800,
watchOverflow: true,
observer: true,
observeParents: true,
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next-banner-inicio',
prevEl: '.swiper-button-prev-banner-inicio',
},
preloadImages: false,
lazy: {
loadPrevNext: true,
loadOnTransitionStart: false,
},
effect: 'slide',
fadeEffect: { crossFade: true },
} ).then( ( newSwiperInstance ) => {
bannerinicio = newSwiperInstance;
});
} else {
elementorFrontend.on('components:init', function() {
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper( "#banner-inicio", {
loop: true,
autoHeight: true,
speed: 800,
watchOverflow: true,
observer: true,
observeParents: true,
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next-banner-inicio',
prevEl: '.swiper-button-prev-banner-inicio',
},
preloadImages: false,
lazy: {
loadPrevNext: true,
loadOnTransitionStart: false,
},
effect: 'slide',
fadeEffect: { crossFade: true },
} ).then( ( newSwiperInstance ) => {
bannerinicio = newSwiperInstance;
});
});
}
});
</script>
Ei @rotemee swiper still doesn't load inside the elementor editor but if it loads on the frontend, I don't understand what I'm doing wrong, i am in the same situation. <script>
jQuery(document).ready(function($) {
if ( elementorFrontend.isEditMode() ) {
elementorFrontend.on('components:init', function () {
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper( "#banner-inicio", {
loop: true,
autoHeight: true,
speed: 800,
watchOverflow: true,
observer: true,
observeParents: true,
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next-banner-inicio',
prevEl: '.swiper-button-prev-banner-inicio',
},
preloadImages: false,
lazy: {
loadPrevNext: true,
loadOnTransitionStart: false,
},
effect: 'slide',
fadeEffect: { crossFade: true },
} ).then( ( newSwiperInstance ) => {
bannerinicio = newSwiperInstance;
});
});
} else {
elementorFrontend.on('components:init', function() {
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper( "#banner-inicio", {
loop: true,
autoHeight: true,
speed: 800,
watchOverflow: true,
observer: true,
observeParents: true,
parallax: true,
autoplay: {
delay: 4000,
},
pagination: {
el: '.swiper-pagination-banner-inicio',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next-banner-inicio',
prevEl: '.swiper-button-prev-banner-inicio',
},
preloadImages: false,
lazy: {
loadPrevNext: true,
loadOnTransitionStart: false,
},
effect: 'slide',
fadeEffect: { crossFade: true },
} ).then( ( newSwiperInstance ) => {
bannerinicio = newSwiperInstance;
});
});
}
});
</script> |
I wanted to update you on the bug report for WP-Rocket. After conferring with Gabe Livan over email, he came up with a solution that worked. This issue has a workaround, which is to add an exclusion for swiper.js in wp-rockets concentation settings. This allows the asset cleanup method and the asset loading experiment to function as expected and prevents the file from loading on the page. My page size was immediately reduced upon adding the exclusion. Asset Cleanup and the loading experiment then prevent the file from loading, the expected behavior. To fully solve the issue, I think you may need to contact the WP-Rocket devs. The permanent fix would be to apply/add these exclusions on the fly based on whether the js file is supposed to load on the page. That way the file is not included in the concentated/minified file that WP-Rocket generates if the file is supposed to be disabled. The current workaround I found disables the concentation of these JS files globally across the site, the permanent fix needs to be a more targeted solution that disables the js files per page as needed. Seeing as you will likely extend this functionality to css files in the future, I would assume the same exclusions would need to be added for each css file that should load conditionally. |
@shilo-ey, pay attention to this display detail when the condition edit window appears for the custom code function, it is not totally centered ;) |
Thanks, we will contact them. By the way, if you clear cache after activating this experiment do you still experience issues?
Can you share your viewport resolution? Thanks |
16.4 pouces |
By the way, if you clear cache after activating this experiment do you still experience issues?
Yes. I always clear the caches after making changes. This isn't cache based
unfortunately, it just seems to be wp-rocket concentating files it
shouldn't be and they have to be excluded for the unload rules to be
noticed/take effect. It's concentation rules seem to have higher priority
than the way the files are dequeued via elementor's asset loading/asset
cleanup's unload method, so the concentation rules win, hence the needed
exclusion.
β¦On Sun, Feb 14, 2021 at 8:31 AM Rodolphe Bertozzo ***@***.***> wrote:
16.4 pouces
β
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#13633 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHSHPLYCPPQZNFSDBX7ZWKTS673F7ANCNFSM4WLBN7FA>
.
|
Elementor Pro 3.1 is now live |
There is an inconsistency in uploading the update |
Not in germany. π |
Updated yesterday afternoon when I first noticed it, at least on a few websites. So far no noticeable issues. |
Thank you for finding that root cause, that makes a lot of sense now why I didn't immediately notice too much difference, as WP Rocket is used on all my client sites. Just curious... is there a list currently for the various files that we should be excluding in WP Rocket, or I guess that will depend on every site individually? What is the best way to determine which scripts we should exclude for now?οΏΌοΏΌ Or does it perhaps make more sense to just temporarily disable one of the features inside WP Rocket?οΏΌ |
The list is the same as the list of widgets that are now selectively disabled by the asset loading experiment. That means you would have to create a separate exclusion for each individual js file that's now supposed to be disabled by the asset loading experiment. The issue with my workaround is it's a general, messy solution. If we add a js file to the exclusion list, it's excluded everywhere, even for pages that the file is supposed to load on, which will hurt performance of those pages. Adding something to the exclusion box does so site-wide, it is indiscriminate. WP-Rocket will have to be updated by their devs to include a patch to add the exclusions for the js files on a more targeted, per-page basis. The exclusion method will work if you are not using for example the swiper.js file anywhere on your site, but will not if you only have a slider on one page(the js file will not be concentated ever if you apply a global exclusion). The Elementor asset loading experiment selectively disables the js file based on whether it is being used on the page, WP-Rocket will have to be updated to automatically accommodate this behavior. Basically this needs to be fixed by their devs on their end. I've already made a github bug report on their github. To get this fixed, the elementor devs definitely need to reach out and you guys should definitely post on the github issue on their issues list, they only fix bugs once they get enough complaints. Their time to implement fixes is generally glacial, so the more people that post in this thread requesting a fix, the faster a fix will get implemented. |
Ah good point, I had it in my mind when reading this earlier that this would be fixable by adding to the exclusions list, I completely forgot at that moment that it'd have a negative impact too on pages that do use that JS file. Glad you pointed that out.
Ah yeah that's fantastic, already found that earlier today and upvoted it. I subscribed to their updates in both here and WP Rocket's issue, so I'll hopefully chime in whenever I can add anything useful. Thanks for all the hard work narrowing that issue down! π |
@jazir5 Thanks, we are in communication with WP-Rocket team to see if there's an option to improve this loading mechanism. The version is officially released, feel free to update to the latest version of Elementor Pro. Thank you all for your feedback, and once again, for making Elementor better! See you soon ;) |
@jazir5 the issue in wp-rocket has been closed as not reproducible wp-media/wp-rocket#3544 |
Yes it seems to be working now, somehow seems to have been resolved.
β¦On Thu, Mar 11, 2021, 2:53 AM danydev ***@***.***> wrote:
@jazir5 <https://github.com/jazir5> the issue in wp-rocket has been
closed as not reproducible wp-media/wp-rocket#3544
<wp-media/wp-rocket#3544>
do you confirmed is really solved somehow?
β
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#13633 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AHSHPL67UKBQLCRQ2JJQLHDTDCOIZANCNFSM4WLBN7FA>
.
|
===========
Beta 3 UPDATED - PLEASE READ BELOW!
===========
Hi Elementor Beta testers π,
Elementor PRO v3.1. is just around the corner, and we have some new features and improvements we hope you love.
This version includes features and capabilities that give you more control and customization options over your sites. As part of our ongoing efforts to improve Elementor's speed and stability, we made performance enhancements and added improvements to existing features. Test out Elementor Pro v3.1 Beta and let us know what you think about the new features introduced, including:
Before you test, please make sure you are using:
Introducing Custom Code: Add Custom Code Snippets Anywhere In Your Site
Many of you need the flexibility of adding custom code to certain places in your sites. This includes adding tracking codes (Google Analytics, Facebook Pixel, etc), including meta tags in the , and implementing external services in various areas in the page like the head and body tag. Up until now, this was not possible in Elementor without the use of a third-party plugin or complicated code adjustments to your theme files. All that changes today.
Adding Custom Code to Elementor
Now, you can easily create your custom code in Elementor.
Once you add your Custom Code, youβll be able to select the location (head, body start, body end), and set your priority. If you register two scripts in the same location, the priority you set will determine which one of them will load first. You can edit your code using a code editor with a comprehensive autocomplete, and set up your display conditions just as you would for every Elementor site part (Header, Footer, etc). Once youβve finished, publish your code and it will be live on your site.
Additional Custom Code capabilities
If youβre a logged-in Administrator, you can debug code and see its output in the HTML source:
You can also set your publish status per snippet (Publicly available or draft) and manage all of the custom codes you created from a single location.
Hereβs how it works:
Meet Code Highlight Widget: Showcase Your Code With Syntax Highlighting
Using a code highlighter or syntax highlighting is especially beneficial for those of you who have a development blog or often use code examples in your content. If you're looking for ways to make your code more readable and visually consistent with your site without the need for an additional plugin, you'll want to use our new Code Highlight Widget.
What this widget can do - the highlights
There are various things you can do with the new Code Highlight Widget. For starters, you can select your syntax (coding language) to optimize your highlighted code. You can also copy your code to your clipboard in a click and customize your design. Choose from six different design themes and find the style that works for your site. Display inline color visualization in code (in supported languages like CSS), and highlight specific lines you want to put a spotlight on in your code.
The new Code Highlight Widget is a fast and effortless way to create beautiful code snippets on Elementor.
Hereβs how it works:
Improved Asset Loading: Load Widgets JS Files Conditionally
In our last release of Elementor 3.1.0, we introduced Elementor Experiments which allows you to experience new features before they are officially released and control which features are live on your site. One of the experiments we added is Improved Asset Loading which focuses on optimizing site speed and scoring. Improved Asset Loading optimizes the performance on the front-end, saving loading time per each page by loading the widgets JS code only when needed on the page, which can result in up to ~100 KB of JS files size reduction.
By breaking the loading method of the widget handlers to small chunks, users who use
HTTP/2
protocol in their sites will benefit from efficient loading, due to Multiplexing which allows a browser to request all the assets in parallel and save the handshake time for each asset load request. This results in a significant performance gain depending on the number of widgets used on your page.What does all of this actually mean? Elementor used to load every widget JS file from the list below on each page load, even if the widget wasnβt present in the page.
Now Elementor loads the specific ones only if they are used on the page. No pro widgets = no pro widget JS files.
Below is the list of improved items:
To experience this improvement youβll need to manually activate the Improved Asset Loading experiment found in your Experiments tab.
Please be advised that you may experience conflicts with 3rd-party addons and extensions (if they rely on these loaded assets). If you spot a conflict, contact the plugin author and let them know.
We plan on making many more improvements to performance in versions to come. In the meantime, check out how this experiment works below.
Hereβs how it works:
preloaded-elements-handlers.js
, which contains all core widget handlers, is loaded on the page. Keep this tab open for later reference.preloaded-elements-handlers.js
was not loaded on the page, while all of the widgets JS handles are loaded conditionally - when using each one of the following widgets on the page, a JS file with the same widget name should be loaded:form.[hash].bundle.min.js
should be loaded.swiper.min.js
, based on the setting you set in this ExperimentImproved Animated Headline Widget: Control Loop play, Timing & More
As much as we love launching new features for you to enjoy we understand how important it is to invest in improving our existing features which is exactly what we plan on doing in the upcoming releases. A while back, we launched the Animated Headline Widget to allow you to create animated and highlighted headlines that can further draw the attention of your visitors.
Today weβre introducing some improvements youβve been waiting for.
The newest additions
Timing options (#4392)
Control the animation duration and delay between each animation loop.
Up until now, you had little control over the speed of your Animated Headline. Now, weβve given you more control by allowing you to set the animation duration and delay between each animation loop.
Loop option (#9749, #2457)
Many of you asked us to allow you to "Freeze" the animation when it finishes its loop. Now, you can set the widget to play only once, emphasize a specific message (example - underline effect), and keep it like this, so your visitors will see only the animation once.
Set a selected color for typing effect (#5403, #7826)
customize and control your typing effects by changing the color/background color and mixing and matching your colors to achieve your desired outcome.
Added Dynamic capabilities to Rotating Text animation (#4625, #8569)
Dynamic content for Rotating effect is here! Create a beautiful Single Post template that shows your dynamic messaging with animated capabilities.
Overflow Fix
Some of the "Rotating" type animations had crop glitches. This improvement fine tunes the behavior of the widget in these cases.
How it works:
More Improvements
head
,body
start andbody
endHow to Install the Beta Version
If you still haven't enabled beta testing in Elementor, please follow these steps:
This will get you set up to test the new Elementor Pro 3.1 Beta.
Notes
For bugs and remarks, please reply with a comment on this issue here on GitHub.
Please keep this related to the current beta only! For any other issue or feature request, feel free to open a new issue.
Designated time for release:
February 16, 2021 (Estimated)
Many thanks for your support and help!
Cheers,
Elementor Team
The text was updated successfully, but these errors were encountered: