Skip to content
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 v2.7 Beta 4 Release #8920

Closed
shilo-ey opened this issue Aug 27, 2019 · 57 comments

Comments

@shilo-ey
Copy link
Collaborator

commented Aug 27, 2019

===========

Beta 4 UPDATED - PLEASE READ BELOW!

===========

Introducing v2.7: Enhanced Backgrounds & Dividers

Hi Elementor testers,

We are getting ready to release Elementor v2.7 and we would like to ask you to help us test Elementor v2.7 Beta, which brings news in terms of design capabilities, stability and infrastructure improvements:

Before you test, please make sure you are using:

  • Elementor Core v2.7 Beta
  • Elementor Pro > v2.6.5

Enhanced Backgrounds:

Backgrounds just got cooler! In Elementor v2.7 we’ve added several improvements and capabilities to backgrounds:

1. Background Slideshow (#2898, #4022)

bata2

Now you can use a sideshow as the background for sections, columns, and inner-sections. This can help you build more complex structures and layouts, while still preserving a transition effect.

Test flow:

  • Create a new page
  • Add a new Section and set it to a minimum height of 500px
  • Go to Style tab > and select “Slideshow” from the options presented in the background type field
  • Add images to your gallery and play with the presentation settings
  • Do the same thing for a Column and for an Inner Section
  • See if all works as expected

2. Vimeo Video as a Background (#1903)

vimeo

As part of enhancing the background capabilities, we’ve added Vimeo as a source for your background videos. So now, both team YouTube and team Vimeo can enjoy sweet backgrounds.

Test flow:

  • Create a new page
  • Add a new Section and set it to a minimum height of 500px
  • Go to Style tab > and select “Video” from the options presented in the background type field
  • In the Video URL field paste your Vimeo video URL
  • Make sure the video is seen across different situations and resolutions.

3. Allow Background Video to Play on Mobile

Until recently, most mobile phones didn’t play background videos. Recent browsers policy changes have added this functionality to some browsers. Starting with v2.7, Elementor will not play background videos by default. However, you will be able to change this default by turning on the “Play On Mobile” switch. See our dev blog post.

Test flow:

  • Create a new page
  • Add a new Section and set it to "Minimum Height" of 500px
  • Go to Style tab > and select “Video” from the options presented in the choose control
  • In the Video URL field paste your video link
  • Switch “Play On Mobile” on and publish the page
  • Open the page in a real (not an emulator) mobile device and see if the video plays

Improved Dividers

Dividers are one of the most basic and useful design elements in web design. So, of course, we went ahead and made them even better, with newly added elements and shapes.

Divider widget Improvements

divider

Our Divider widget used to be quite basic and traditional. For v2.7, we added some fancy features to it. You can now choose from a list of new shiny SVG dividers and control their style and behavior.
In addition, we added the option to include some text or an icon before, in the middle or after your divider.

Test flow:

  • Create a new page
  • Drag ‘Divider“ widget from the Editor panel and place it in your page
  • Select a divider style and play with the settings. Make sure everything works and respond as expected
  • Go to “Content” tab and add an icon from the “Add Element” control
  • Under “Style” tab go to Icon/Text section and style the divider as you wish
  • Make sure everything shows up as expected

Under the Hood Improvements:

In the following releases, we will gradually release major infrastructure improvements, which will allow Elementor to be more extendable, reliable and stable. Those improvements include unification of multiple libraries, update JS handlers to ES6, new Editor JS API mechanism to improve current flow and to support future exciting modules and MEGA features.

Test flow:

  • These features require a sanity test for the entire system.
  • Create a page and add widgets to it, hit publish and make sure the flow is as usual.
  • Create a section and save it as a template. Try to insert it to your previously created pages and see if everything works as expected.
  • Pro users: create a single template, import content from the library, set conditions and make sure everything works as expected.

More Improvements

Please don't miss these points:

  • New: Editor JS API ($e) to improve capabilities and stability (Developers Blog Post)
  • Tweak: Converted all widgets JS handlers to ES6 classes (Developers Blog Post, Developers Documentation)
  • Tweak: Added option to select the version you rollback to in Version Control tool
  • Tweak: Use swiper.js instead of slick.js in Image Carousel widget (Developers Blog Post)
  • Tweak: Implemented virtual list render in Icons Library to improve performance and stability
  • Tweak: Added support of wp_body_open in Canvas template
  • Tweak: Editor Panel UI tweaks
  • Tweak: Moved structure control into section panel in Section element
  • Tweak: Added option to allow background video to play on mobile devices if device support it
  • Tweak: Added more post statuses to show in the Finder (#8175)
  • Tweak: Added Space-around, Space-between and Space-evenly to Vertical Align options in Section element
  • Tweak: Updated Eicons library to v5.4.0
  • Deprecated: Removed old deprecated aliases (Developers Blog Post)

Fixes:

  • Fix: Background video plays on mobile devices in some cases (#8782, Developers Blog Post)
  • Fix: Icon List alignment issue (#8539)
  • Fix: Two clicks needed to start Vimeo videos with image overlay
  • Fix: Init navigator only once when changing page template

How to Install the Beta Version

If you still haven't enabled beta testing in Elementor, please follow these steps:

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! any other issue or feature request, feel free to open a new issue.

Designated time for release: September 9, 2019 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

@shilo-ey shilo-ey added this to the 2.7.0 milestone Aug 27, 2019

@shilo-ey shilo-ey pinned this issue Aug 27, 2019

@sproutedweb

This comment has been minimized.

Copy link

commented Aug 27, 2019

Awesome!

@black-eye

This comment has been minimized.

Copy link

commented Aug 27, 2019

Hi, just gave it a quick try and here are some observations concerning sliders/carousels.

Recently you have added this CSS:

.swiper-slide {
   text-align: center;
}

Such a broad selector has effect to all swiper-slide elements, including e.g. Reviews carousel

before:
obrazek

after:
obrazek

Is such a general selector necessary?

And BTW, the Slides icon is a bit funky too (I did some hard refreshes, but it's still there):
obrazek

Will do some more tests later...

@zeinnicholas

This comment has been minimized.

Copy link

commented Aug 27, 2019

[Edit: Improved on the logic, the way you are naming and combining these controls is not user friendly.]

So, just testing out the Background Slider, and the first thing that comes to my attention is the wording used to describe the controls, and their position in the panel.

The main objective and a more user friendly, intuitive way of both organizing/ordering the controls and also naming them correctly should be something like the following:

  1. Image Animation = Slide Transition
  2. Animation Speed = Transition Duration (with unit of miliseconds showing after the input, we need to know what unit is being used)
  3. ---------- line separator ----------
  4. Ken Burns Effect
    4.1. Zoom Direction
  5. ---------- line separator ----------
  6. Autoplay Speed = Slide Duration (with unit of milliseconds showing after the input, we need to know what unit is being used)
  7. Infinite Loop

Justification 1. The use of the word "Animation" is anbiguous and doesn't convey specifically what the control is meant to do, I get that we are applying animations, but they are being applied to the transitions between slides, not the actual images.

Justification 2. The use of the word "Speed" is not the most recommended. Speed is a measure of Velocity (distance over time), while you're using Time to control the animation (how much the animation will last, and not how many pixels per second the animation will occur). The proper way, or the most user friendly way of conveying this control function is to use words related to time, hence the recommendation to use "Duration" instead. Along with that we need to understand what Time unit we are inputting. Just showing numbers is not enough. The millisecond unit (ms) should appear after the input field or in the control label.

To prevent user error and improve the User Experience, controls that are related, or most accurately influence in one another's behaviors should appear together, one after the other, and not arranged arbitrarily by category. If I'm choosing a transition between slides, and you're offering me a control over the duration of that transition, it should be the nearest control to reach, not the farthest one just because there is another control with the same properties but applied to another aspect of the element. Transition Duration should be near the type of transition we're choosing, and the Slide Duration should be near other functions that control slides, like the Infinite Loop one.

The suggestion of positions and names in the above ordered list should improve UI and UX perceptions, usage of the new functionality, pave the way for future additions like responsive settings and other possible controls like the Ken Burns duration, and most importantly prevent user error, which in turn will reduce the amount of people asking for support.

Test Scenario 1. You can watch Adam Preiser "struggle" with those two controls in his video: https://youtu.be/j63QU8YMKes

Test Scenario 2. You can also see below that @steve231293 already had an issue with these controls. It looks like the Animation is independent of the need for having more than one image in the gallery, when in reality it will only work for the transition between slides. Changing "Animation" to "Transition" will prevent users from errors like that.

This is just a suggestion 😉, so far it's the only thing I tested.

@srcek

This comment has been minimized.

Copy link

commented Aug 27, 2019

Adding padding to the Section offsets Background Slideshow. I suppose this isn't the intended behavior.

@zeinnicholas

This comment was marked as off-topic.

Copy link

commented Aug 27, 2019

About the Divider, before launching this new feature, you should consider adding Image as an Element option alongside text and icon in the "Add Element" control (Content Tab). I guarantee people will ask for that and complaint about not having that option.

Dont miss this opportunity.

@black-eye

This comment was marked as off-topic.

Copy link

commented Aug 27, 2019

One more considering not missing the opportunities. Since there are few new options for backgrounds, please consider adding these requests too:

All of them are quite important considering speed and performance optimization. Backround slideshow is really nice to have, but these 3 are kind of must have (in many situations).
Thanks

@black-eye

This comment has been minimized.

Copy link

commented Aug 27, 2019

One more background issue, video bg this time.

Whe I set the background video and then switch again to any other option (classic, gradient, slideshow), the video is still there. When saved, on frontend there's correct setting, but on the backend the section with the bg video isn't refreshed. This wasn't happening before.

@ocbroadband

This comment has been minimized.

Copy link

commented Aug 28, 2019

Divider: Test Scenario: Curly w/text or Icon.
Once you place the divider, if you move it to another location on the page by dragging to another location, the lines disappear. Appears the only way to bring them back is to uncheck/recheck the text or icon buttons. Attempted to resize fonts, change icons, type new text, etc. Nothing else makes the element show again. Video attached.
Elementor v2.7 Beta 1 - Divider Bug Example Video.zip

@black-eye

This comment has been minimized.

Copy link

commented Aug 28, 2019

OK, just another one with a carousel, this time Image Carousel - titles are cut and using the color of the link by default (not necessarily a fault).

Before:
obrazek

After:
obrazek

@Zunichi

This comment was marked as off-topic.

Copy link

commented Aug 28, 2019

Sorry if a little unrelated but I'm super curious how you got the text to wrap around the quote section for the example in the new divider. Anyone have any idea?

image

@ocbroadband

This comment was marked as off-topic.

Copy link

commented Aug 28, 2019

Sorry if a little unrelated but I'm super curious how you got the text to wrap around the quote section for the example in the new divider. Anyone have any idea?

image

I would think something like this. Create a dummy image thats either white, clear, and insert that into the text block that has the cutout. Then create another text block and move it with absolute positioning. The dark section they used appears to be a section being placed however, but same thing. There may be another method, but this is what I thought of off the top of my head. Although I would think this would be a little hard to get the positioning right on different viewport sizes(tablet/mobile)... Maybe someone else can chime in as well.
image

@Zunichi

This comment was marked as off-topic.

Copy link

commented Aug 28, 2019

Sorry if a little unrelated but I'm super curious how you got the text to wrap around the quote section for the example in the new divider. Anyone have any idea?
image

I would think something like this. Create a dummy image thats either white, clear, and insert that into the text block that has the cutout. Then create another text block and move it with absolute positioning. The dark section they used appears to be a section being placed however, but same thing.
image

Yeah that solution is tricky. I feel they have a more elegant solution. Or perhaps, an upcoming feature in the pro version?

@shilo-ey Mind sharing how you guys did it?

@ocbroadband

This comment was marked as off-topic.

Copy link

commented Aug 28, 2019

Sorry if a little unrelated but I'm super curious how you got the text to wrap around the quote section for the example in the new divider. Anyone have any idea?
image

I would think something like this. Create a dummy image thats either white, clear, and insert that into the text block that has the cutout. Then create another text block and move it with absolute positioning. The dark section they used appears to be a section being placed however, but same thing.
image

Yeah that solution is tricky. I feel they have a more elegant solution. Or perhaps, an upcoming feature in the pro version?

@shilo-ey Mind sharing how you guys did it?

Probably should go to another thread, but I got it to work quite well actually. What I showed to space out the text, then create a 'section'(black part). Then insert it below the top text section, and move it over the blank image spacing appropriately. For mobile, I ended up just hiding it on mobile and duplicating the top text section on the actual page, but removing the blank image.
Overlay Section.zip

@steve231293

This comment has been minimized.

Copy link

commented Aug 28, 2019

Hello there,

About Background Slideshow:

When it has only one gallery item then animation not working, even Infinite Loop settings enable.

@sermalefico

This comment has been minimized.

Copy link

commented Aug 28, 2019

There are no dynamic options in slide background. It would be nice if I could load images from custom fields. The hover options do not work if slide background is enabled.

There are also no options for responsive images on other devices. You cannot disable this option on mobile devices. This could have an impact on the speed of mobile devices.

What about the scroll effects?

@tamelander

This comment has been minimized.

Copy link

commented Aug 28, 2019

I can't get the Background Slideshow to behave in a responsive way. With a single background image, the image is scaled to fit when viewing the page in tablet and mobile. With a Background Slideshow the section with the slideshow doesn't scale and disappears to the right when viewing the page in tablet and mobile.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 29, 2019

@steve231293 commented on Aug 28, 2019, 9:50 AM GMT+3:

Hello there,

About Background Slideshow:

When it has only one gallery item then animation not working, even Infinite Loop settings enable.

This is the expected behavior.

@black-eye commented on Aug 28, 2019, 4:25 AM GMT+3:

OK, just another one with a carousel, this time Image Carousel - titles are cut and using the color of the link by default (not necessarily a fault).

Hi @black-eye, we can't reproduce this issue, can you provide a link to that page for us to take a look?

@sermalefico commented on Aug 28, 2019, 4:11 PM GMT+3:

There are no dynamic options in slide background. It would be nice if I could load images from custom fields. The hover options do not work if slide background is enabled.

There are also no options for responsive images on other devices. You cannot disable this option on mobile devices. This could have an impact on the speed of mobile devices.

What about the scroll effects?

We will check the issue with the hover effect - all of your other requests are currently not relevant.

@tamelander commented on Aug 28, 2019, 10:09 PM GMT+3:

I can't get the Background Slideshow to behave in a responsive way. With a single background image, the image is scaled to fit when viewing the page in tablet and mobile. With a Background Slideshow the section with the slideshow doesn't scale and disappears to the right when viewing the page in tablet and mobile.

Can't reproduce your issue, can you provide some examples?

Thanks to you all!

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.

@tamelander

This comment has been minimized.

Copy link

commented Aug 29, 2019

Indeed. I should have mentioned it was in editing. Then editing and using the responsive modes for tablet and mobile the behaviour is as I mentioned above. When I save and look at the page the background slider is responsive.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 29, 2019

@tamelander commented on Aug 29, 2019, 9:34 AM GMT+3:

Indeed. I should have mentioned it was in editing. Then editing and using the responsive modes for tablet and mobile the behaviour is as I mentioned above. When I save and look at the page the background slider is responsive.

It seems like a local issue, can you please provide us some credentials for tests?
Please provide the credentials to our support at support @elementor.com for guidance in resolving this issue and mention that you were directed by me and reference this issue.

thanks.

@steve231293

This comment has been minimized.

Copy link

commented Aug 29, 2019

Hello @shilo-ey ,
Thank for you reply. But i think it should work for loop mode?

I also want to report an bug related to Background Slideshow feature.
When section has padding left then the slideshow will be pushing, because it's missing css: top: 0; left: 0;

http://prntscr.com/oz1hll

Fixed:

.elementor .elementor-background-slideshow {
  top: 0;
  left: 0;
}
@black-eye

This comment has been minimized.

Copy link

commented Aug 29, 2019

Hi @black-eye, we can't reproduce this issue, can you provide a link to that page for us to take a look?

Sure, here it is:
Before: https://dev.liveteflprague.com/live-in-prague/
After: https://wordpress.liveteflprague.com/live-in-prague/

Both sites are practically identical, and set as dev stages, just for the testing purposes.
The only practical difference is Elementor version.

@andreasnrb

This comment has been minimized.

Copy link

commented Aug 29, 2019

You seem to have changed how panels are added to the global settings area using the Manager::add_settings_manager(). Now it seems you have to add things using JavaScript but I cannot find a way to do this.
There also seem to be an issue of adding new custom tabs in the widgets which results in panel can't be found JS errors in the console.
Earlier I used Controls_Manager::add_tab('tab-key',__('Tab name')); during the elementor/init action.

@steve231293

This comment has been minimized.

Copy link

commented Aug 29, 2019

I detect an other bug related new Editor JS API: http://prntscr.com/oz2q6b

Steps to reproduce:

Drag & drop "Heading" widget to page, copy & paste any text to "Tilte" field then JS bug will be showing.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 29, 2019

@steve231293 commented on Aug 29, 2019, 12:03 PM GMT+3:

Hello @shilo-ey ,
Thank for you reply. But i think it should work for loop mode?

I also want to report an bug related to Background Slideshow feature.
When section has padding left then the slideshow will be pushing, because it's missing css: top: 0; left: 0;

http://prntscr.com/oz1hll

Fixed:

.elementor .elementor-background-slideshow {
  top: 0;
  left: 0;
}

Thanks, already reported above.
as for the single item loop - we don't see this behavior as desired one.

@black-eye commented on Aug 29, 2019, 12:04 PM GMT+3:

Hi @black-eye, we can't reproduce this issue, can you provide a link to that page for us to take a look?

Sure, here it is:
Before: https://dev.liveteflprague.com/live-in-prague/
After: https://wordpress.liveteflprague.com/live-in-prague/

Both sites are practically identical, and set as dev stages, just for the testing purposes.
The only practical difference is Elementor version.

Thanks, we will resolve this issue soon.

@andreasnrb commented on Aug 29, 2019, 1:21 PM GMT+3:

You seem to have changed how panels are added to the global settings area using the Manager::add_settings_manager(). Now it seems you have to add things using JavaScript but I cannot find a way to do this.
There also seem to be an issue of adding new custom tabs in the widgets which results in panel can't be found JS errors in the console.
Earlier I used Controls_Manager::add_tab('tab-key',__('Tab name')); during the elementor/init action.

Thanks! can you please upload your code for us to understand better the whole picture?

I detect an other bug related new Editor JS API: http://prntscr.com/oz2q6b

Steps to reproduce:

Drag & drop "Heading" widget to page, copy & paste any text to "Tilte" field then JS bug will be showing.

Thanks, we will address this issue.

🙏

@andreasnrb

This comment has been minimized.

Copy link

commented Aug 29, 2019

@shilo-ey
Regarding the AddSettingsPanel here is code sample: https://gist.github.com/andreasnrb/1948a37e03d99d84f658a3f6b09e4723#file-customsettings-php
Code is inspired by Elementor\Core\Settings\General\Model and Elementor\Core\Files\CSS\Global_CSS.

Regarding the custom tab issue here is code sample: https://gist.github.com/andreasnrb/1948a37e03d99d84f658a3f6b09e4723#file-customtabs-php

It is as how everything worked in Elementor 2.6.8.

@hogash

This comment has been minimized.

Copy link

commented Aug 30, 2019

I too developed the "Background slideshow" feature (by injecting controls into the Section element) a few months ago for my theme and i got a minor panic attack that it might conflict.

My luck is that i prefixed those controls names with my project's name, however this made me verify all my other controls and i found some controls that weren't prefixed and the names are generic, such as "custom_height" and in the future this might conflict badly if Elementor will add the same control name in that widget/element.

@shilo-ey Could you please open up a discussion with the developers, if in future versions Elementor elements/widgets controls, could be prefixed? Such as a _ before the setting name or elm_.

I know it's my mistake but i think others might have made it too (or am i special 😄 ?)

@adndream

This comment has been minimized.

Copy link

commented Aug 30, 2019

Stoked about these updates! hopefully the background slideshow can later be used with videos as well as images. It would also be nice to be able to program different text overlay for each slide

@sermalefico

This comment has been minimized.

Copy link

commented Sep 3, 2019

I have problems with fullwith sections. In the editor apears scrollbar and dont resize the sections to viewport editor in elementor beta. When rollback all is fine.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 3, 2019

@andreasnrb commented on Aug 29, 2019, 3:19 PM GMT+3:

@shilo-ey
Regarding the AddSettingsPanel here is code sample: https://gist.github.com/andreasnrb/1948a37e03d99d84f658a3f6b09e4723#file-customsettings-php
Code is inspired by Elementor\Core\Settings\General\Model and Elementor\Core\Files\CSS\Global_CSS.

Regarding the custom tab issue here is code sample: https://gist.github.com/andreasnrb/1948a37e03d99d84f658a3f6b09e4723#file-customtabs-php

It is as how everything worked in Elementor 2.6.8.

Please test again, we added backwards compatibility.

@atubul commented on Sep 1, 2019, 4:22 AM GMT+3:

I have tried the background video on mobile.
looks like is currently not working on iOS
any solution? without code, I know the code way...

Can't reproduce this issue, tried several iOS devices.

@black-eye commented on Sep 2, 2019, 9:34 PM GMT+3:

So, concerning my issues:

  1. Background video still present when selection another background type tab - still doesn't work (works only, when I delete the video URL)
  2. Hidden image titles in Image Carousel - still doesn't work

Thanks,

Regarding 2. - we don't see this as an issue, this behavior (the display of video tag in the editor DOM) is the expected - keep in mind that it's not the iframe being displayed but the video tag.

re 3. - we will resolve this issue soon.

[@riad Citaku](https://github.com/Riad Citaku) commented on Sep 2, 2019, 7:42 PM GMT+3:

I am getting a blank page when using the .setPage on JavaScript function elementor.settings.page, the issue is only on the beta version, also there isn't any JavaScript error on the console.

Using activateTab works but the other tabs are not clickable when the preview is reloaded.

elementor.getPanelView().setPage('page_settings').activateTab('settings')

replace

elementor.getPanelView().setPage('page_settings');

with

if ( $e ) {
// E >= 2.7.0
$e.route('panel/page-settings/settings');
} else {
// E < 2.7.0
elementor.getPanelView().setPage('page_settings');
}

I have problems with fullwith sections. In the editor apears scrollbar and dont resize the sections to viewport editor in elementor beta. When rollback all is fine.

Already reported, thanks

Thanks again all!

@black-eye

This comment has been minimized.

Copy link

commented Sep 3, 2019

@shilo-ey

Regarding 2. - we don't see this as an issue, this behavior (the display of video tag in the editor DOM) is the expected - keep in mind that it's not the iframe being displayed but the video tag.

I'm not sure how you can see it as an expected behavior. Maybe I didn't make myself clear: when I fill-in the background video and switch back to classic bg, the video is still there playing, the background isn't refreshed. The picture of a woman should be in the background instead of the video. Hapens only on backend.

obrazek

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 3, 2019

@shilo-ey

Regarding 2. - we don't see this as an issue, this behavior (the display of video tag in the editor DOM) is the expected - keep in mind that it's not the iframe being displayed but the video tag.

I'm not sure how you can see it as an expected behavior. Maybe I didn't make myself clear: when I fill-in the background video and switch back to classic bg, the video is still there playing, the background isn't refreshed. The picture of a woman should be in the background instead of the video. Hapens only on backend.

obrazek

I can't see what you are referring, will try to reproduce it again and let you know.

@black-eye

This comment has been minimized.

Copy link

commented Sep 3, 2019

@shilo-ey

I can't see what you are referring, will try to reproduce it again and let you know.

Ok, thanks. Just to add: this wasn't hapening on the previous version (before update to beta) on the very same web. No console errors.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 3, 2019

@black-eye commented on Sep 3, 2019, 1:09 PM GMT+3:

@shilo-ey

I can't see what you are referring, will try to reproduce it again and let you know.

Ok, thanks. Just to add: this wasn't hapening on the previous version (before update to beta) on the very same web. No console errors.

Can you please upload the JSON export of this section?
If you can provide some credentials to this website it would be helpful to isolate the issue.

Thanks!

@black-eye

This comment has been minimized.

Copy link

commented Sep 3, 2019

@shilo-ey

Can you please upload the JSON export of this section?
If you can provide some credentials to this website it would be helpful to isolate the issue.

I can send you JSON later, if you want, but the section is not a special one. Instead I've tried to investigate the issue more and made a screencast for you (with a brand new section on a brand new page):

https://drive.google.com/file/d/116-ihZI2z0Z-CNqeytVjT--PQ6V8X6Df/view

During the investigation I discovered, that the problem might not be related not oly to the video, but to the refresh of the tabs in general - when I change the bg image, I cannot see the video and vice versa. It seems that the last change is stuck there and refresh isn't applied until the next change.

The other observation is that the behavior differs in FF and chrome (the video is from Chrome). In FF it is even worse, sometimes even the picture itself isn't shown right away.

I hope it helps. Unfortunately, I cannot provide you with credentials right now, will try that later. I'll also try to test it on another environment, but right now I have to get back to my regular work.

@andreasnrb

This comment has been minimized.

Copy link

commented Sep 3, 2019

@shilo-ey

Please test again, we added backwards compatibility.

  • Controls_Manager::add_tab works
  • Custom Settings/modules mostly works. There is a bug on the loading in the editor, the custom settings page gets a link as expected and a panel with tab header is shown when clicked. However one needs to click a tab, elementor-component-tab , in order for the content to be loaded into the panel. The first tab is empty on load.
    Imgur
@steve231293

This comment has been minimized.

Copy link

commented Sep 4, 2019

Hello @shilo-ey

About Background Slideshow:

When Slide Transition -> Fade then it has white overlay while change slides.
It doesn't look nice, please disable it with swiper config:

swiper option:

fadeEffect = {
  crossFade: false
};

Also please add option to disable feature Click & Drag to change slide.
swiper option:
simulateTouch = false;

@tamelander

This comment has been minimized.

Copy link

commented Sep 5, 2019

For one particular page, I can't load the Elementor in a regular way, and have to change to Safe Mode. When the page loads the Elementor left icon bar just grays and loads forever. The dev console contains first a bucketfull of Violations and errors (the first error is Uncaught TypeError: Cannot set property 'controls' of undefined). You have the Credentials for my page if you want to check, but I must send you url of the page. So let me know with an email.

I am editing in Google Chrome Incognito Window. Tried Firefox Incognito window, and the problem is the same.

**Violations **
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
ho @ init_embed.js:391
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
ho @ init_embed.js:391
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
ho @ init_embed.js:391
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
ho @ init_embed.js:391
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
Mn @ init_embed.js:382
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
Mn @ init_embed.js:382
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
Mn @ init_embed.js:382
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
Mn @ init_embed.js:382
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
Mn @ init_embed.js:382
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
Mn @ init_embed.js:382
ho @ init_embed.js:392
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
om @ init_embed.js:265
ho @ init_embed.js:393
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
om @ init_embed.js:265
ho @ init_embed.js:393
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=sv:186 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
_.R.addDomListener @ js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=sv:186
Dm @ init_embed.js:270
Em @ init_embed.js:274
Gm @ init_embed.js:274
ho @ init_embed.js:393
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
wl @ init_embed.js:210
ho @ init_embed.js:394
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
init_embed.js:204 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ init_embed.js:204
jl @ init_embed.js:205
pl @ init_embed.js:209
wl @ init_embed.js:210
ho @ init_embed.js:394
b @ init_embed.js:401
Lf @ init_embed.js:54
If @ init_embed.js:55
Gf.b @ init_embed.js:52
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ util.js:45
sy @ util.js:45
_.dD @ util.js:140
pV @ onion.js:32
uV.g @ onion.js:50
(anonymous) @ map.js:87
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ util.js:45
sy @ util.js:45
_.dD @ util.js:140
pV @ onion.js:32
uV.g @ onion.js:50
(anonymous) @ map.js:87
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ util.js:45
sy @ util.js:45
_.dD @ util.js:140
pV @ onion.js:32
uV.g @ onion.js:50
(anonymous) @ map.js:87
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ util.js:45
sy @ util.js:45
_.dD @ util.js:140
pV @ onion.js:32
uV.g @ onion.js:50
(anonymous) @ map.js:87
frontend.min.js?ver=2.7.0-beta2:2 [Violation] 'setTimeout' handler took 110ms
[Violation] Forced reflow while executing JavaScript took 108ms
[Violation] Forced reflow while executing JavaScript took 31ms
map.js:44 [Violation] 'requestAnimationFrame' handler took 154ms
load-scripts.php?c=0&load[]=underscore,jquery-core,jquery-migrate,backbone,shortcode,utils,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.2.3:1 [Violation] 'setTimeout' handler took 55ms
frontend.min.js?ver=2.7.0-beta2:2 [Violation] 'setTimeout' handler took 91ms
[Violation] Forced reflow while executing JavaScript took 89ms
jquery.js?ver=1.12.4-wp:3 [Violation] 'resize' handler took 240ms
[Violation] Forced reflow while executing JavaScript took 111ms

** Errors **
editor.min.js?ver=2.7.0-beta2:7 Uncaught TypeError: Cannot set property 'controls' of undefined
at Object. (editor.min.js?ver=2.7.0-beta2:7)
at Function.each (load-scripts.php?c=0&load[]=underscore,jquery-core,jquery-migrate,backbone,shortcode,utils,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.2.3:3)
at Object.success (editor.min.js?ver=2.7.0-beta2:7)
at i (load-scripts.php?c=0&load[]=underscore,jquery-core,jquery-migrate,backbone,shortcode,utils,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.2.3:3)
at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=underscore,jquery-core,jquery-migrate,backbone,shortcode,utils,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.2.3:3)
at Object.e. [as resolve] (load-scripts.php?c=0&load[]=underscore,jquery-core,jquery-migrate,backbone,shortcode,utils,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.2.3:3)
at common.min.js?ver=2.7.0-beta2:2
at Array.forEach ()
at success (common.min.js?ver=2.7.0-beta2:2)
at Object.o.success (common.min.js?ver=2.7.0-beta2:2)

@tamelander

This comment has been minimized.

Copy link

commented Sep 5, 2019

I've had this kind of problems before. Then, and now as it turned out, an element was corrupted. I started to copy sections from the buggy page and pasting them into a new page. When I came to the sections containing a corrupt element (a global button) and couldn't paste that section into the new page. I deleted the global button and now everything works again.

@shilo-ey shilo-ey changed the title Elementor v2.7 Beta 2 Release Elementor v2.7 Beta 3 Release Sep 5, 2019

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 5, 2019

Hi all!

We just released a new beta version, please update your version to v2.7.0 Beta 3.

This beta release includes:

  • Tweak: Updated Gallery control UI
  • Tweak: UI Tweaks in Divider widget
  • Tweak: Added more shapes to Divider widget
  • Fix: Carousels navigation arrows causes horizontal scroll when setting to Outside
  • Fix: Vimeo background video plays with sound
  • Fix: Content position vertical alignment issue in edge cases
  • Fix: Caption being cut off in Image Carousel widget

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.

@tamelander

This comment has been minimized.

Copy link

commented Sep 5, 2019

I installed the beta 3. Numerous things went awry on my front pages. A transparent png with a motion effect disappeared, several large titles with motion effects disappeared, several (perhaps all) icons disappeared. I am sorry, but this was a show breaker. I rolled back to beta 2.

What happens if I roll back to the latest stable release? Will it break the site, or will the 2.7 beta settings stay "dormant" until I install 2.7 (stable or another beta)?

@black-eye

This comment has been minimized.

Copy link

commented Sep 5, 2019

All my previously mentioned issues are resolved.

One more to go, but this one is propably caused by something else: when inserting bg image, it is not shown until the page is refreshed. The same when changing it. The same when inserting normal image - it is shown only after I change the image size. It seems that the widget is not refreshed immediatelly, after inserting image, I have to do something else to "wake it up".

But this happens only on Firefox and on one particular hosting at HostGator. It also seems that this behavior was there even in previous version 2.6. Any ideas? Should I create a new issue on this one?

@sermalefico

This comment has been minimized.

Copy link

commented Sep 5, 2019

All widgets with motion effects dont works and desappeared in frontend, in elementor panel all is fine. (edit)

All widgets with motion effects dont works and desappeared in frontend, in elementor panel the motions effects (fade up, fade down etc.. dont work but the widgets are visible).
beta 3

@Lishaysokol

This comment has been minimized.

Copy link

commented Sep 6, 2019

I just installed the Beta 3 version. important things have disappeared. I'm rollback to the previous version right now.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 6, 2019

@Lishaysokol commented on Sep 6, 2019, 1:06 PM GMT+3:

I just installed the Beta 3 version. important things have disappeared. I'm rollback to the previous version right now.

Those important things included Motion Effects?
Do you have some JS console errors?
Try adding define( ‘SCRIPT_DEBUG’, true ); to your wp-config.php file and let me know if the issue persists.

Thanks!

@zeinnicholas

This comment has been minimized.

Copy link

commented Sep 6, 2019

I installed the beta 3. Numerous things went awry on my front pages. [...]

What happens if I roll back to the latest stable release? Will it break the site, or will the 2.7 beta settings stay "dormant" until I install 2.7 (stable or another beta)?

@tamelander Are you actually using the beta version in a production/live website?

@digitalinksol

This comment has been minimized.

Copy link

commented Sep 7, 2019

I'm seeing three issues after the latest beta 3 release:

  1. I have multiple popups set with a click action on a single page. The popups have an entrance and exit animation that do not seem to be working. When clicking, the popup simply appears sans-animation.

  2. On the backend/editor, when working with a two-column section, it appears as if when a single element exists in the column, it takes up all vertical space of that column. After adding in a 2nd item, the reverts back to its usual behavior. Example: https://www.dropbox.com/s/wdwrcc2lf2zevm0/Screenshot%202019-09-07%2009.10.54.png?dl=0

  3. Vertical align of single (only one) elements within a section and inner section does not seem to be working. Once introducing a 2nd element, this issue resolves itself. It looks like it may be related to issue 2 from above.

Live link to review/test some issues: https://pigskins.club/

@sermalefico

This comment has been minimized.

Copy link

commented Sep 7, 2019

I had problems with beta version 3. I get error 500 when rollback to the previous version. I cannot leave the Beta 3 version. It does not allow me to make changes in the dynamic header and footer templates unless I have the beta 3 version activated).

I only have elementor and elementor pro activated

@Lishaysokol

This comment has been minimized.

Copy link

commented Sep 7, 2019

I had problems with beta version 3. I get error 500 when rollback to the previous version. I cannot leave the Beta 3 version. It does not allow me to make changes in the dynamic header and footer templates unless I have the beta 3 version activated).

I only have elementor and elementor pro activated

Same Here! I went to the latest stable version and right now I get fatal errors in the plugin's core (Error 500)
Any solution?

@ocbroadband

This comment has been minimized.

Copy link

commented Sep 8, 2019

Update 9/8/19:
Issue resolved for me in B4.

Same Issue for me with motion effects. They stopped working with B3.

@shilo-ey shilo-ey changed the title Elementor v2.7 Beta 3 Release Elementor v2.7 Beta 4 Release Sep 8, 2019

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 8, 2019

Hi all!

We just released a new beta version, please update your version to v2.7.0 Beta 4.

This beta release includes:

  • Tweak: Removed "Need Help" button from Wordpress widgets
  • Tweak: Improved carousels navigation arrows positioning
  • Fix: Heading widget with the character "0" is not visible on frontend
  • Fix: Changed deviceMode parameter location caused elements to disappear
  • Fix: Improved Section Vertical Alignment selectors backward compatibility

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.

@ocbroadband

This comment has been minimized.

Copy link

commented Sep 8, 2019

Installed b4. Received an email from the install of the following...

Error Details
=============
An error of type E_ERROR was caused in line 75 of the file /home/xxxx/dev/wp-content/plugins/elementor/includes/managers/schemes.php. Error message: Uncaught Error: Class 'Elementor\Scheme_Color' not found in /home/xxxx/dev/wp-content/plugins/elementor/includes/managers/schemes.php:75
Stack trace:
#0 /home/xxxx/dev/wp-content/plugins/elementor/includes/managers/schemes.php(332): Elementor\Schemes_Manager->register_scheme('Elementor\Schem...')
#1 /home/xxxx/dev/wp-content/plugins/elementor/includes/managers/schemes.php(345): Elementor\Schemes_Manager->register_default_schemes()
#2 /home/xxxx/dev/wp-content/plugins/elementor/includes/plugin.php(545): Elementor\Schemes_Manager->__construct()
#3 /home/xxxx/dev/wp-content/plugins/elementor/includes/plugin.php(479): Elementor\Plugin->init_components()
#4 /home/xxxx/dev/wp-includes/class-wp-hook.php(286): Elementor\Plugin->init('')
#5 /home/xxxx/dev/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array)
#6 /home/xxxx/dev/wp-includes/plugin.php(465): WP_Hook->do_action(Array)
#7 /home/xxxx/dev/wp-settings.php(525): do_action('init')
#8 /home/xxxx/dev/wp-config.php(1

I don't see any issues but it appeared directly after installing the update.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 9, 2019

Elementor v2.7 is available, Feel free to update.

Thank you all for your feedback!

@shilo-ey shilo-ey closed this Sep 9, 2019

@shilo-ey shilo-ey removed the help wanted label Sep 9, 2019

@shilo-ey shilo-ey unpinned this issue Sep 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.