elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
https://elementor.com/
GNU General Public License v3.0
6.58k stars 1.42k forks source link

✅ Elementor Pro v2.10 Beta 3 Release #11452

Closed shilo-ey closed 4 years ago

shilo-ey commented 4 years ago

===========

Beta 3 UPDATED - PLEASE READ BELOW!

===========

Hi Elementor beta testers,

Remember the feature you chose as your favorite for our 4M active installs celebration four months ago?

Well, here it is!

Version 2.10 is here and brings you two powerful new features that are sure to rock your website building experience. This version is our treat to you, our pro users, as we make the final finishing touches to the version you are all waiting for - the upcoming version 3.0.

Please help us test Elementor Pro v2.10 beta, which introduces:

Before you test, please make sure you are using:

Multi Step Forms: Start converting MUCH better (#5975, #3911)

Multi Steps Forms (2)

During our 4M active installs celebrations, we asked the Elementor community to vote for the next feature we would develop. Multi Step Form won by a landslide, and now we are happy to live up to our promise and release this much-expected feature.

With the addition of Multi Step Forms, Elementor’s Form Builder becomes an even more powerful solution for designing and creating forms visually.

Multi-step forms make long forms less intimidating, resulting in more leads!

The Multi Step functionality improves the user experience and makes it much easier for site visitors to complete registration or convert into customers. No matter the industry, multi-step makes it easier to complete and submit.

This is another important step (or multi-step if you’d like…) for our form builder, making it even more robust than before. You can now build practically any form you’d like, for any website topic and industry. In fact, we’ve built the multi-step feature to offer many flexible capabilities exclusive to Elementor. If you dive deep into this feature and play around with the different options you’ll be able to see this for yourself.

How does it work?

Add a form to your page and add a “Step” field. You will now see that a new field has been automatically added and it is visually distinguishable. Drag the Step item according to the location you wish to split, and voila! You created a Multi Step form.

The Step will act as a separator and will allow users to:

Test Flow:

  1. Create a new page using Elementor
  2. Drag in Form widget and add some fields from different types to make the form long enough
  3. Add new form item and set its type to “Step”
  4. Drag the newly created item to the top of the list
  5. Add another form item and set its type to “Step”
  6. Drag it and place it in a place that suits your form
  7. Design your steps by selecting the desired Steps Type, Buttons and indications
  8. Make sure everything works as expected on Frontend (including form submit)

Introducing Lottie Widget: Easily add Lottie animations to your site, no coding needed (#11026)

Lottie widget (1)

The Lottie widget holds the potential to completely transform the websites you build into a moving, one-of-a-kind experience.

Are you familiar with the kind of interactions you see on Awwwards websites? Now you can recreate such masterpieces in Elementor, and without coding! Using Lottie widget you can enrich your client's website, increase engagement, and improve the UX, plus - it’s really cool!

What is Lottie?

Lottie is the leading animation engine that allows you to render SVG and canvas animations in real-time.

Small animations in the interface can make a big difference. In the past years SVG animations took the spotlight from parallax and motion effects. SVG animations allowed us to step beyond the basic directional movement, and incorporate advanced animations that are triggered in real-time by the user’s actions.

In June 2017, Airbnb created a small side product named “Lottie” - which is a product that parses Adobe After Effects animations exported as JSON with Bodymovin plugin and renders them natively on mobile and on the web.

In layman terms, you can take any animated object, and have it play and interact with your actions.

This product made its name by the industry standard for incorporating animations in an optimized yet high-quality manner into web pages.

lottie-min

How Lottie Works In Elementor?

We created a designated widget that takes Lottie files and plays them according to your preference.

Our triggers include:

Security Note:

Please be careful about uploading Lottie JSON files from an unknown source. JSON files may potentially include malicious content. Elementor does initiate actions to sanitize the files, but there are some risks involved nonetheless. Make sure you only upload trusted files and do not allow the option to upload unfiltered files unless you understand the risks involved.

Where do I get those JSON animation files?

If you are a motion designer, know that you can create JSON animation files on your own and upload them to your Elementor site. You can also use premade Lottie animations, which can be found in lottiefiles.com.

Test Flow:

  1. Go to lottiefiles.com and download your preferred animation
  2. Create a new page using Elementor
  3. Drag in Lottie widget and add your animation using external link or upload your own file
  4. Play around with the Triggers, Renderer, Loop options, Hover out options, Reverse Animation option and select your desired behavior
  5. Add more Lottie widget to your page and apply motion effects and custom positioning to them
  6. Add Lottie widget and make it fixed location then set it to be triggered by Scroll trigger.
  7. Try to create more complex group of elements using the Lottie widget (same as Icon Box or Call to action widget. Pro tip - use hover area control when selecting the Hover trigger)
  8. Make sure everything works as expected on Frontend and in Preview mode

More Improvements


How to Install the Beta Version

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

  1. Go to Elementor > Tools > Versions
  2. Enable the beta tester feature
  3. Go to Dashboard > Updates and update to the latest beta version.

This will get you set up to test the new Elementor Pro 2.10 Beta.

Notes

For bugs and remarks, please reply with a comment on the specific 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: June 9, 2020 (Estimated)

Many thanks for your support and help!

The Elementor Team

rodolphebertozzo commented 4 years ago

Hi, It's a good job! Please include an option for the form progress bar to go below, to the right, or to the left of the form.

rodolphebertozzo commented 4 years ago

Also, please add a way to highlight the steps in the editor part, why not for each step, nesting in the form of a subheading the requested fields. Let me explain :+1: IMG_20200524_232108

A-Krivoshen commented 4 years ago

Thank you for what you are doing, I have been waiting for multitasking forms for a very long time, it’s great that you give me the opportunity to see in advance, respect.

knireis commented 4 years ago

"This is another important step (or multi-step if you’d like…) for our form builder, making it even more robust than before. You can now build practically any form you’d like, for any website topic and industry."

It is a nice addition, but without conditional logic you should not make a bold statement like above.

linkupdesign commented 4 years ago

It would be nice if it were possible to assign a certain duration to the animation. For example, that the animation should last 300px or 0.6vh while scrolling. This would give you more control during the design.

pintolog commented 4 years ago

When i created the form with steps there is a bug that won't let me moved the fields, the fields become white/grey and the Flow is not working so good: https://www.loom.com/share/bc7be14b5267443da1bab22aed1f1beb

darioooon commented 4 years ago

First - Excellent job adding this feature. This will save a lot of time and effort in areas!

Second - will the team be adding transition animations after each step. __ Example - a fade-in transition effect after step 1 going into step 2.

OkayDokayOkay commented 4 years ago

Looks great.

Maybe you can also implement conditional Multi-Step forms. If selected Rating (between 1-5) is >= 4 then Step B, Else Step A Similar to Typeform :)

a-corsini commented 4 years ago

Hi, thank you for the amazing update! Looking forward to the 3.0 update – any sneak peek about that?

There is a bug with the Dark Mode in the new Multi-Step Form. If you add a step, the corresponding element in the editor list has a white background (with white text on top of it). If you hover the element the background goes back to the right one.

Screenshot 2020-05-25 at 15 46 03

a-corsini commented 4 years ago

Some more bugs found in the Multi-Step Form Widget:

Screenshot 2020-05-25 at 16 07 19

daniele77ba commented 4 years ago

Good but not great. Without conditional events attached to steps it's more aesthetic than functional. It would be useful create charts with depending by form result applying them in dynamic field in progress bar or even attach Lottie animation...I expected something more than this...

reachadam commented 4 years ago

Centering of the multi-step navigation is off.

centering
chatpotion commented 4 years ago

Thanks, this is great! I've been waiting for a long time.

3 Feature Requests:

rothnet commented 4 years ago

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

technickza commented 4 years ago

I repeat what others have said already..... conditional logic, conditional logic, conditional logic. Please please please.

Elementor is an AWESOME tool, multi-step forms WITH conditional logic (amongst other form features) will make Elementor untouchable.

EDIT: Here are the "other features"

  1. Sections
  2. Repeating sections
  3. Calculated Fields
  4. Dynamic Fields
zeinnicholas commented 4 years ago

When i created the form with steps there is a bug that won't let me moved the fields, the fields become white/grey and the Flow is not working so good:

@pintolog From what I understand, you can't drag the first step for obvious reasons. No field would be before it if it's already the first step...

Also, please add a way to highlight the steps in the editor part, why not for each step, nesting in the form of a subheading the requested fields. Let me explain 👍

@rodolphebertozzo I don't think I like it. The interface is already crammed and I would like to keep the space to see the field name if it happens to be a long name. I think more contrast between the steps and the fields would suffice. It should be more evident for sure like it is right now with the dark-mode bug.

@RS1-Project and @reachadam I can confirm the same bugs.

@knireis @OkayDokayOkay @daniele77ba @technickza Please guys, try not to ask for new features. We already knew they wouldn't implement conditional logic. Let's keep this discussion on the topic so we can fix current bugs.

zeinnicholas commented 4 years ago

Lottie widget

I'm getting some weird behavior with the Alignment, Renderer type, and Caption controls. It has no control over the size of the animation and depending on how you switch controls the preview changes sizes significantly, especially when selecting between Canvas and SVG rendering.

Shouldn't we have some sizing control inside the widget as we have with images?

[Edit] It happens with Absolute positioning as well. Or with no custom positioning but with Custom Width: Inline (auto) enabled.

See the video below for reference:

https://www.loom.com/share/20342189addb48bdabaf70f2064fe735

[Edit 2]: It also happens when we try to add another widget, as soon as we start typing in the search field the size of the animation changes again:

https://www.loom.com/share/9e56a69f8fcc4a189df6fab295647364

zeinnicholas commented 4 years ago

Multistep Form

Complementing @RS1-Project and @reachadam findings:

  1. Dark Mode: Steps are not inheriting Dark Mode styles, and the step label is difficult to read. The hover effect is working with the dark mode.
  2. Step discerning: I would recommend adding more contrast between steps and fields, so people don't get confused since they don't have enough space to collapse with a line-indent. Don't limit our ability to view field names by narrowing fields inside steps with line-indent please.
  3. Bug with the first step: When you drag a Step above the first step, both become fixed and you can't drag both of them anymore, you can only drag fields between them, but the second Step is un-removable. Copy and Delete buttons also disappear.
  4. Dragging fields above first step: When the bug #3 above triggers, you can add fields above the first step, but they appear on the page inside the first step.
  5. Once Multistep, always multistep: You can't remove all the steps if you decide not to have a multistep form after you added a step. The only way is to create a new one and lose all the work with the rest of the form.
  6. Long Step Label misalignment: If you add a long label to one of the steps, they become misaligned.
  7. Undefined border: Even with the Border of the Buttons set to "none" in the Button Styles, it still adds a solid 2px border that inherits the button color added by the user agent theme, or Elementor's Theme Styles (or anything else that comes before Elementor). This issue is similar to what @rothnet indicated. This one is tricky... If you specify "border: none;" to these buttons by default in the frontend.css file (to respect the default settings appearing in the Style tab) you might have some issues in the future with users complaining by the induced style that is not inheriting previously-set global styles. So be careful if you want to fix this. Don't commit the same error you've did with the Heading title "line-height: 1;". My suggestion: switch the default border naming to "inherit" instead of none, and keep none as another option. I think this is a long-standing issue for all border settings. You should revisit that, it's about time already. I would gladly add a new issue if you think this is something to look at for the next versions of Elementor and Elementor Pro. Please let me know.

See: https://www.loom.com/share/9e8a73b4e3ac47a49cf9b7289cd80f6a

Using Hello Elementor 2.3.0.

cebesten commented 4 years ago

Repeated bug: +the step first field and the steps became white, if you duplicate it mantain the white, if you create new step will not.

+if you duplicate the step, and change the type to other, will stay in white whithout the name changed, If you close form fields and select other as button for example and come back to form fields will be updated.

Steps for reproduce:

  1. activate steps options in the form
  2. add a step in form fields it will change the color of the first field and the steps.

elementor part1 elementor part2 elementor part3 elementor part4 elementor part5

shilo-ey commented 4 years ago

@knireis commented on May 25, 2020, 9:41 AM GMT+3:

It is a nice addition, but without conditional logic you should not make a bold statement like above. @darioooon @OkayDokayOkay @daniele77ba @technickza We allow an addition to the form. Multi Step Forms is a feature we added now, and rest insure that we have plans for a broader solution for the conditional logic.

Having said that, both of these feature do play along together, but they are completely different features (just like "Save for Later" feature). Stay tuned :)

@rodolphebertozzo Thanks for your inputs, we will consider making these improvements in the future.

@linkupdesign commented on May 25, 2020, 10:11 AM GMT+3:

It would be nice if it were possible to assign a certain duration to the animation. For example, that the animation should last 300px or 0.6vh while scrolling. This would give you more control during the design.

If I understand you correctly you can do it: Assign Scroll trigger and select on which element the effects apply to: Entire page or Viewport. In addition you have a control named Viewport which allows you to set specific parts of the scrolling in which the animation plays. the duration is a subset of this setting.

As for animation duration - simply play with the speed (x) control.

@pintolog commented on May 25, 2020, 2:07 PM GMT+3:

When i created the form with steps there is a bug that won't let me moved the fields, the fields become white/grey and the Flow is not working so good: https://www.loom.com/share/bc7be14b5267443da1bab22aed1f1beb @RS1-Project The gray color is a UI glitch with the Dark theme. will be fixed.

@pintolog As for the glitches in the flow, it's hard to reproduce, can you reproduce this on a new page?

@RS1 Project commented on May 25, 2020, 6:14 PM GMT+3:

Some more bugs found in the Multi-Step Form Widget:

  • when the first field of the editor list is a Step, you can't drag it anymore;

This is intentional - the first item is the opening item and cannot be moved. it can only be removed.

  • when you add a third Step field, Elementor automatically adds a fourth Step field as well;

  • the Step field in the editor list becomes unresponsive and you can't drag it around;

Same - this is the first item in the list which is not draggable and not deletable

  • when the Step field becomes unresponsive, the "Type" select box is missing; Same - this is the first item in the list which is not draggable, not duplicatable and not deletable

  • when the Step field becomes unresponsive, the duplicate button and the delete button are missing; Same - this is the first item in the list which is not draggable, not duplicatable and not deletable

  • seems like the unresponsiveness is triggered when the Step field is moved at the higher (top) position in the list.

Excellent input! thanks!

@reachadam commented on May 25, 2020, 8:07 PM GMT+3:

Centering of the multi-step navigation is off.

centering

Can you please provide a template JSON for examination?

@rothnet commented on May 25, 2020, 8:40 PM GMT+3:

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

Thanks!

@rothnet commented on May 25, 2020, 8:40 PM GMT+3:

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

@zeinnicholas commented on May 26, 2020, 1:19 AM GMT+3:

Lottie widget

I'm getting some weird behavior with the Alignment, Renderer type, and Caption controls. It has no control over the size of the animation and depending on how you switch controls the preview changes sizes significantly, especially when selecting between Canvas and SVG rendering.

Can you please provide an example? (animation or link to your testing site) By the way, the SVG renderer is working fine on some animations, not all of them. This is a more a Lottie issue that needs to be dealt off when creating an animation.

Make sure your theme doesn't have any custom CSS for SVG elements (different sizing).

Shouldn't we have some sizing control inside the widget as we have with images?

Haven't you find any sizing in the Style tab? width and max-width? When the animation is smaller than its container, you will see the alignment changes.

[Edit] It happens with Absolute positioning as well. Or with no custom positioning but with Custom Width: Inline (auto) enabled.

See the video below for reference:

https://www.loom.com/share/20342189addb48bdabaf70f2064fe735

[Edit 2]: It also happens when we try to add another widget, as soon as we start typing in the search field the size of the animation changes again:

https://www.loom.com/share/9e56a69f8fcc4a189df6fab295647364

Can you please provide a link to this page? would help debug it. but my assumption is that you have a previous CSS rule for figcaption / SVG elements

Once Multistep, always multistep: You can't remove all the steps if you decide not to have a multistep form after you added a step. The only way is to create a new one and lose all the work with the rest of the form.

You can delete the last step after deleting the one before that. we will review this option as well.

@cebesten

Can you please specify how exactly you got to the result of step which is a password type field?

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.

zeinnicholas commented 4 years ago

@zeinnicholas commented on May 26, 2020, 1:19 AM GMT+3:

Lottie widget

I'm getting some weird behavior with the Alignment, Renderer type, and Caption controls. It has no control over the size of the animation and depending on how you switch controls the preview changes sizes significantly, especially when selecting between Canvas and SVG rendering.

Can you please provide an example? (animation or link to your testing site)

Unfortunately not atm. I did this on a local environment using Stackabl.

I will see if I can upload it to a testing server and I'll let you know when it's up.

BTW have you been able to see the Loom videos I recorded?

I will also give you the link of the animation used as soon as I can get back to my workstation.

By the way, the SVG renderer is working fine on some animations, not all of them. This is a more a Lottie issue that needs to be dealt off when creating an animation.

OK, but how can we know which Lottie has this issue? This one I got directly from the most popular animations of all time.

Make sure your theme doesn't have any custom CSS for SVG elements (different sizing).

I don't know if Hello Elementor has them. Because that's what I'm using, and nothing more. Using latest Elementor version and latest Hello. Nothing more. This shouldn't be an issue tho.

Shouldn't we have some sizing control inside the widget as we have with images?

Haven't you find any sizing in the Style tab? width and max-width? When the animation is smaller than its container, you will see the alignment changes.

OK, my bad, I got caught in excitement. I forgot to see the rest of the settings. But haven't you been able to see my Loom videos? Let me know and I'll find another way to show my experience, especially with the forms.

[Edit] It happens with Absolute positioning as well. Or with no custom positioning but with Custom Width: Inline (auto) enabled. See the video below for reference: https://www.loom.com/share/20342189addb48bdabaf70f2064fe735 [Edit 2]: It also happens when we try to add another widget, as soon as we start typing in the search field the size of the animation changes again: https://www.loom.com/share/9e56a69f8fcc4a189df6fab295647364

Can you please provide a link to this page? would help debug it. but my assumption is that you have a previous CSS rule for figcaption / SVG elements

I will reproduce this on a live website as I mentioned above. But to be very clear, I'm using only Elementor and Hello Elementor.

Would you need login credentials?

Once Multistep, always multistep: You can't remove all the steps if you decide not to have a multistep form after you added a step. The only way is to create a new one and lose all the work with the rest of the form.

You can delete the last step after deleting the one before that. we will review this option as well.

Cool thanks for clarifying that. But I deleted all the steps and the first one remained.

freddyjcm commented 4 years ago

excellent that we finally have the multistep form and testing it right now I find a fault that I want to share with you, the following button does not work when using a field of the type select, it just does nothing, if I remove the select field it works normal.

freddyjcm commented 4 years ago

for future updates I also join the request for conditionals and the possibility of using a separate input widget and being able to connect it with dynamic content

cebesten commented 4 years ago

@knireis commented on May 25, 2020, 9:41 AM GMT+3:

It is a nice addition, but without conditional logic you should not make a bold statement like above. @darioooon @OkayDokayOkay @daniele77ba @technickza We allow an addition to the form. Multi Step Forms is a feature we added now, and rest insure that we have plans for a broader solution for the conditional logic.

Having said that, both of these feature do play along together, but they are completely different features (just like "Save for Later" feature). Stay tuned :)

@rodolphebertozzo Thanks for your inputs, we will consider making these improvements in the future.

@linkupdesign commented on May 25, 2020, 10:11 AM GMT+3:

It would be nice if it were possible to assign a certain duration to the animation. For example, that the animation should last 300px or 0.6vh while scrolling. This would give you more control during the design.

If I understand you correctly you can do it: Assign Scroll trigger and select on which element the effects apply to: Entire page or Viewport. In addition you have a control named Viewport which allows you to set specific parts of the scrolling in which the animation plays. the duration is a subset of this setting.

As for animation duration - simply play with the speed (x) control.

@pintolog commented on May 25, 2020, 2:07 PM GMT+3:

When i created the form with steps there is a bug that won't let me moved the fields, the fields become white/grey and the Flow is not working so good: https://www.loom.com/share/bc7be14b5267443da1bab22aed1f1beb @RS1-Project The gray color is a UI glitch with the Dark theme. will be fixed.

@pintolog As for the glitches in the flow, it's hard to reproduce, can you reproduce this on a new page?

@RS1 Project commented on May 25, 2020, 6:14 PM GMT+3:

Some more bugs found in the Multi-Step Form Widget:

  • when the first field of the editor list is a Step, you can't drag it anymore;

This is intentional - the first item is the opening item and cannot be moved. it can only be removed.

  • when you add a third Step field, Elementor automatically adds a fourth Step field as well;

  • the Step field in the editor list becomes unresponsive and you can't drag it around;

Same - this is the first item in the list which is not draggable and not deletable

  • when the Step field becomes unresponsive, the "Type" select box is missing; Same - this is the first item in the list which is not draggable, not duplicatable and not deletable

  • when the Step field becomes unresponsive, the duplicate button and the delete button are missing; Same - this is the first item in the list which is not draggable, not duplicatable and not deletable

  • seems like the unresponsiveness is triggered when the Step field is moved at the higher (top) position in the list.

Excellent input! thanks!

@reachadam commented on May 25, 2020, 8:07 PM GMT+3:

Centering of the multi-step navigation is off.

centering

Can you please provide a template JSON for examination?

@rothnet commented on May 25, 2020, 8:40 PM GMT+3:

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

Thanks!

@rothnet commented on May 25, 2020, 8:40 PM GMT+3:

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

@zeinnicholas commented on May 26, 2020, 1:19 AM GMT+3:

Lottie widget

I'm getting some weird behavior with the Alignment, Renderer type, and Caption controls. It has no control over the size of the animation and depending on how you switch controls the preview changes sizes significantly, especially when selecting between Canvas and SVG rendering.

Can you please provide an example? (animation or link to your testing site) By the way, the SVG renderer is working fine on some animations, not all of them. This is a more a Lottie issue that needs to be dealt off when creating an animation.

Make sure your theme doesn't have any custom CSS for SVG elements (different sizing).

Shouldn't we have some sizing control inside the widget as we have with images?

Haven't you find any sizing in the Style tab? width and max-width? When the animation is smaller than its container, you will see the alignment changes.

[Edit] It happens with Absolute positioning as well. Or with no custom positioning but with Custom Width: Inline (auto) enabled. See the video below for reference: https://www.loom.com/share/20342189addb48bdabaf70f2064fe735 [Edit 2]: It also happens when we try to add another widget, as soon as we start typing in the search field the size of the animation changes again: https://www.loom.com/share/9e56a69f8fcc4a189df6fab295647364

Can you please provide a link to this page? would help debug it. but my assumption is that you have a previous CSS rule for figcaption / SVG elements

Once Multistep, always multistep: You can't remove all the steps if you decide not to have a multistep form after you added a step. The only way is to create a new one and lose all the work with the rest of the form.

You can delete the last step after deleting the one before that. we will review this option as well.

@cebesten

Can you please specify how exactly you got to the result of step which is a password type field?

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.

Hi , yesterday I made a video with all the steps that I made https://youtu.be/PeXmvSmLu3k

ishnechmad commented 4 years ago

If only there was a link from the edit screen in the 'elementor' to the lottie site

It was more convenient to select the animations from IFRAME on the elementor edit screen

silvioghedin commented 4 years ago

OMG, I was so excited about the form, but there's no conditional logic.

I think it is better to take more time to add this feature to the form, than release without and then make another update In 2 years...

fabigrafo commented 4 years ago

OMG, I was so excited about the form, but there's no conditional logic.

I think it is better to take more time to add this feature to the form, than release without and then make another update In 2 years...

Lol, I hope it won't take another 2 years. It is long overdue!

pintolog commented 4 years ago

@knireis commented on May 25, 2020, 9:41 AM GMT+3:

It is a nice addition, but without conditional logic you should not make a bold statement like above. @darioooon @OkayDokayOkay @daniele77ba @technickza We allow an addition to the form. Multi Step Forms is a feature we added now, and rest insure that we have plans for a broader solution for the conditional logic.

Having said that, both of these feature do play along together, but they are completely different features (just like "Save for Later" feature). Stay tuned :)

@rodolphebertozzo Thanks for your inputs, we will consider making these improvements in the future.

@linkupdesign commented on May 25, 2020, 10:11 AM GMT+3:

It would be nice if it were possible to assign a certain duration to the animation. For example, that the animation should last 300px or 0.6vh while scrolling. This would give you more control during the design.

If I understand you correctly you can do it: Assign Scroll trigger and select on which element the effects apply to: Entire page or Viewport. In addition you have a control named Viewport which allows you to set specific parts of the scrolling in which the animation plays. the duration is a subset of this setting.

As for animation duration - simply play with the speed (x) control.

@pintolog commented on May 25, 2020, 2:07 PM GMT+3:

When i created the form with steps there is a bug that won't let me moved the fields, the fields become white/grey and the Flow is not working so good: https://www.loom.com/share/bc7be14b5267443da1bab22aed1f1beb @RS1-Project The gray color is a UI glitch with the Dark theme. will be fixed.

@pintolog As for the glitches in the flow, it's hard to reproduce, can you reproduce this on a new page?

@RS1 Project commented on May 25, 2020, 6:14 PM GMT+3:

Some more bugs found in the Multi-Step Form Widget:

  • when the first field of the editor list is a Step, you can't drag it anymore;

This is intentional - the first item is the opening item and cannot be moved. it can only be removed.

  • when you add a third Step field, Elementor automatically adds a fourth Step field as well;

  • the Step field in the editor list becomes unresponsive and you can't drag it around;

Same - this is the first item in the list which is not draggable and not deletable

  • when the Step field becomes unresponsive, the "Type" select box is missing; Same - this is the first item in the list which is not draggable, not duplicatable and not deletable

  • when the Step field becomes unresponsive, the duplicate button and the delete button are missing; Same - this is the first item in the list which is not draggable, not duplicatable and not deletable

  • seems like the unresponsiveness is triggered when the Step field is moved at the higher (top) position in the list.

Excellent input! thanks!

@reachadam commented on May 25, 2020, 8:07 PM GMT+3:

Centering of the multi-step navigation is off.

centering

Can you please provide a template JSON for examination?

@rothnet commented on May 25, 2020, 8:40 PM GMT+3:

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

Thanks!

@rothnet commented on May 25, 2020, 8:40 PM GMT+3:

Hello.. The "Next" button has a burgundy frame, even though the frame is not turned on. button

@zeinnicholas commented on May 26, 2020, 1:19 AM GMT+3:

Lottie widget

I'm getting some weird behavior with the Alignment, Renderer type, and Caption controls. It has no control over the size of the animation and depending on how you switch controls the preview changes sizes significantly, especially when selecting between Canvas and SVG rendering.

Can you please provide an example? (animation or link to your testing site) By the way, the SVG renderer is working fine on some animations, not all of them. This is a more a Lottie issue that needs to be dealt off when creating an animation.

Make sure your theme doesn't have any custom CSS for SVG elements (different sizing).

Shouldn't we have some sizing control inside the widget as we have with images?

Haven't you find any sizing in the Style tab? width and max-width? When the animation is smaller than its container, you will see the alignment changes.

[Edit] It happens with Absolute positioning as well. Or with no custom positioning but with Custom Width: Inline (auto) enabled. See the video below for reference: https://www.loom.com/share/20342189addb48bdabaf70f2064fe735 [Edit 2]: It also happens when we try to add another widget, as soon as we start typing in the search field the size of the animation changes again: https://www.loom.com/share/9e56a69f8fcc4a189df6fab295647364

Can you please provide a link to this page? would help debug it. but my assumption is that you have a previous CSS rule for figcaption / SVG elements

Once Multistep, always multistep: You can't remove all the steps if you decide not to have a multistep form after you added a step. The only way is to create a new one and lose all the work with the rest of the form.

You can delete the last step after deleting the one before that. we will review this option as well.

@cebesten

Can you please specify how exactly you got to the result of step which is a password type field?

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.

Sure, I created a new page with a new form and had the same issue with the colors & also the icons NOT SHOWING at all no matter if it's from Elementor library or uploading an SVG.

https://www.loom.com/share/9140d2f4b7eb4f4fb070828ff5a5b7e2

zeinnicholas commented 4 years ago

Lottie Widget

After the reply, I set up a live test site for testing this release, and I can confirm that previous issues are still present with regards to the width of the animation. I found out that fixed widgets are not animating with the scroll settings. To sum up I've recorded a 14min video of the whole page creation and below you'll find both this live server "System Info" and also the local server as well.

Keep in mind this is running with only Elementor, Elementor Pro, and Hello Elementor (besides Wordfence and Query Monitor).

Issues and Bugs

  1. Buggy Dimensions: Animations without defined width are not shown their correct size;
  2. SVG vs Canvas: There are significant differences between Canvas and SVG in regard of sizing and dimensions. Which is mildly expected but not this much.
  3. Fixed can't scroll: Fixed widgets with the On Scroll animation don't work. Nothing happens.

Step by step

Please watch the video:

https://www.loom.com/share/8f995ce9e5d44b0dbd54dc1c6592edcb

System Info - Live site: https://eprobeta210.eazee.online/lottie-widget/


== Server Environment ==
    Operating System: Linux
    Software: Apache/2.4.43 (Unix) OpenSSL/1.1.1
    MySQL version: mariadb.org binary distribution v5.7.29
    PHP Version: 7.4.5
    PHP Max Input Vars: 10000
    PHP Max Post Size: 2048M
    GD Installed: Yes
    ZIP Installed: Yes
    Write Permissions: All right
    Elementor Library: Connected

== WordPress Environment ==
    Version: 5.4.1
    Site URL: https://eprobeta210.eazee.online
    Home URL: https://eprobeta210.eazee.online
    WP Multisite: No
    Max Upload Size: 2 GB
    Memory limit: 256M
    Permalink Structure: /%category%/%postname%/
    Language: en-US
    Timezone: America/Sao_Paulo
    Debug Mode: Inactive

== Theme ==
    Name: Hello Elementor
    Version: 2.3.0
    Author: Elementor Team
    Child Theme: No

== User ==
    Role: administrator
    WP Profile lang: en_US
    User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

== Active Plugins ==
    Elementor
        Version: 2.9.9
        Author: Elementor.com

    Elementor Pro
        Version: 2.10.0-beta1
        Author: Elementor.com

    Query Monitor
        Version: 3.6.0
        Author: John Blackbourn

    Wordfence Security
        Version: 7.4.7
        Author: Wordfence

== Elements Usage ==

    wp-page : 2
        button : 3
        counter : 3
        divider : 1
        form : 1
        heading : 4
        image-box : 4
        lottie : 17
        social-icons : 1
        spacer : 3
        text-editor : 4

== Log ==

Log: showing 4 of 42020-04-24 18:04:18 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.7',
  'to' => '2.9.8',
)]
2020-05-12 18:39:50 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.3',
  'to' => '2.9.4',
)]
2020-05-25 18:53:38 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.8',
  'to' => '2.9.9',
)]
2020-05-25 18:54:35 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.4',
  'to' => '2.10.0-beta1',
)]

System Info - Local site (no-link)


== Server Environment ==
    Operating System: Linux
    Software: Apache/2.4.38 (Debian)
    MySQL version: MySQL Community Server (GPL) v5.7.29
    PHP Version: 7.3.14
    PHP Max Input Vars: 1000
    PHP Max Post Size: 2G
    GD Installed: Yes
    ZIP Installed: Yes
    Write Permissions: All right
    Elementor Library: Not connected (cURL error 28: Resolving timed out after 5002 milliseconds)

== WordPress Environment ==
    Version: 5.4.1
    Site URL: http://192.168.99.105:40020
    Home URL: http://192.168.99.105:40020
    WP Multisite: No
    Max Upload Size: 2 GB
    Memory limit: 256M
    Permalink Structure: /%category%/%postname%/
    Language: en-US
    Timezone: America/Sao_Paulo
    Debug Mode: Inactive

== Theme ==
    Name: Hello Elementor
    Version: 2.3.0
    Author: Elementor Team
    Child Theme: No

== User ==
    Role: administrator
    WP Profile lang: en_US
    User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

== Active Plugins ==
    Elementor
        Version: 2.9.9
        Author: Elementor.com

    Elementor Pro
        Version: 2.10.0-beta1
        Author: Elementor.com

    Query Monitor
        Version: 3.6.0
        Author: John Blackbourn

== Elements Usage ==

    wp-page : 1
        form : 1
        lottie : 1
        spacer : 1

== Log ==

Log: showing 4 of 42020-04-24 18:04:18 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.7',
  'to' => '2.9.8',
)]
2020-05-12 18:39:50 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.3',
  'to' => '2.9.4',
)]
2020-05-25 18:53:38 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.8',
  'to' => '2.9.9',
)]
2020-05-25 18:54:35 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.4',
  'to' => '2.10.0-beta1',
)]
zeinnicholas commented 4 years ago

Multistep Form

Revisiting the form in a live server environment, I can still reproduce most of the issues I had with it in my local server, and more. This time around I just can't list them all, so instead, I'll just leave another two videos.

Video 1

https://www.loom.com/share/01176f1692ed4c03b33312708a6d89ab

Video 2

After finishing the Video 1 I found new bugs:

https://www.loom.com/share/41e9ab6895054400a9649d756d569da3

System Info

URL: https://eprobeta210.eazee.online/multistep-form-widget/

Nothing new on the System Info log from the comment above (https://github.com/elementor/elementor/issues/11452#issuecomment-635708486).

I hope this helps because you guys have a long way to go!

Cheers

rodolphebertozzo commented 4 years ago

Hi I encountered a bug, when there are 2 steps, the progress bar is displayed with a duplicate on a second line, moreover, if I change the type of progress bar to put a bar with a percentage, I have not only the basic progress bar which is displayed on 2 lines but also the new bar (in percentage) which is displayed underneath. bugform

shilo-ey commented 4 years ago

@pintolog commented on May 28, 2020, 4:16 PM GMT+3:

@knireis commented on May 25, 2020, 9:41 AM GMT+3: Sure, I created a new page with a new form and had the same issue with the colors & also the icons NOT SHOWING at all no matter if it's from Elementor library or uploading an SVG.

https://www.loom.com/share/9140d2f4b7eb4f4fb070828ff5a5b7e2

I watched your video:

  1. The icon is for Step indicators that include Icon (Type - Icon / Icon & Text). you can only control the Submit button icon for now
  2. Colors - being taken care of in the upcoming beta2

Lottie Widget

After the reply, I set up a live test site for testing this release, and I can confirm that previous issues are still present with regards to the width of the animation. I found out that fixed widgets are not animating with the scroll settings. To sum up I've recorded a 14min video of the whole page creation and below you'll find both this live server "System Info" and also the local server as well.

Keep in mind this is running with only Elementor, Elementor Pro, and Hello Elementor (besides Wordfence and Query Monitor).

Issues and Bugs

  1. Buggy Dimensions: Animations without defined width are not shown their correct size;
  2. SVG vs Canvas: There are significant differences between Canvas and SVG in regard of sizing and dimensions. Which is mildly expected but not this much.
  3. Fixed can't scroll: Fixed widgets with the On Scroll animation don't work. Nothing happens.

Step by step

Please watch the video:

https://www.loom.com/share/8f995ce9e5d44b0dbd54dc1c6592edcb

System Info - Live site: https://eprobeta210.eazee.online/lottie-widget/


== Server Environment ==
  Operating System: Linux
  Software: Apache/2.4.43 (Unix) OpenSSL/1.1.1
  MySQL version: mariadb.org binary distribution v5.7.29
  PHP Version: 7.4.5
  PHP Max Input Vars: 10000
  PHP Max Post Size: 2048M
  GD Installed: Yes
  ZIP Installed: Yes
  Write Permissions: All right
  Elementor Library: Connected

== WordPress Environment ==
  Version: 5.4.1
  Site URL: https://eprobeta210.eazee.online
  Home URL: https://eprobeta210.eazee.online
  WP Multisite: No
  Max Upload Size: 2 GB
  Memory limit: 256M
  Permalink Structure: /%category%/%postname%/
  Language: en-US
  Timezone: America/Sao_Paulo
  Debug Mode: Inactive

== Theme ==
  Name: Hello Elementor
  Version: 2.3.0
  Author: Elementor Team
  Child Theme: No

== User ==
  Role: administrator
  WP Profile lang: en_US
  User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

== Active Plugins ==
  Elementor
      Version: 2.9.9
      Author: Elementor.com

  Elementor Pro
      Version: 2.10.0-beta1
      Author: Elementor.com

  Query Monitor
      Version: 3.6.0
      Author: John Blackbourn

  Wordfence Security
      Version: 7.4.7
      Author: Wordfence

== Elements Usage ==

  wp-page : 2
      button : 3
      counter : 3
      divider : 1
      form : 1
      heading : 4
      image-box : 4
      lottie : 17
      social-icons : 1
      spacer : 3
      text-editor : 4

== Log ==

Log: showing 4 of 42020-04-24 18:04:18 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.7',
  'to' => '2.9.8',
)]
2020-05-12 18:39:50 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.3',
  'to' => '2.9.4',
)]
2020-05-25 18:53:38 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.8',
  'to' => '2.9.9',
)]
2020-05-25 18:54:35 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.4',
  'to' => '2.10.0-beta1',
)]

System Info - Local site (no-link)


== Server Environment ==
  Operating System: Linux
  Software: Apache/2.4.38 (Debian)
  MySQL version: MySQL Community Server (GPL) v5.7.29
  PHP Version: 7.3.14
  PHP Max Input Vars: 1000
  PHP Max Post Size: 2G
  GD Installed: Yes
  ZIP Installed: Yes
  Write Permissions: All right
  Elementor Library: Not connected (cURL error 28: Resolving timed out after 5002 milliseconds)

== WordPress Environment ==
  Version: 5.4.1
  Site URL: http://192.168.99.105:40020
  Home URL: http://192.168.99.105:40020
  WP Multisite: No
  Max Upload Size: 2 GB
  Memory limit: 256M
  Permalink Structure: /%category%/%postname%/
  Language: en-US
  Timezone: America/Sao_Paulo
  Debug Mode: Inactive

== Theme ==
  Name: Hello Elementor
  Version: 2.3.0
  Author: Elementor Team
  Child Theme: No

== User ==
  Role: administrator
  WP Profile lang: en_US
  User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

== Active Plugins ==
  Elementor
      Version: 2.9.9
      Author: Elementor.com

  Elementor Pro
      Version: 2.10.0-beta1
      Author: Elementor.com

  Query Monitor
      Version: 3.6.0
      Author: John Blackbourn

== Elements Usage ==

  wp-page : 1
      form : 1
      lottie : 1
      spacer : 1

== Log ==

Log: showing 4 of 42020-04-24 18:04:18 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.7',
  'to' => '2.9.8',
)]
2020-05-12 18:39:50 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.3',
  'to' => '2.9.4',
)]
2020-05-25 18:53:38 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.9.8',
  'to' => '2.9.9',
)]
2020-05-25 18:54:35 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '2.9.4',
  'to' => '2.10.0-beta1',
)]

Thanks for taking the time to do it, please share here the exported JSON file for us to take a closer look.

@zeinnicholas commented on May 30, 2020, 6:30 AM GMT+3:

Multistep Form

Revisiting the form in a live server environment, I can still reproduce most of the issues I had with it in my local server, and more. This time around I just can't list them all, so instead, I'll just leave another two videos.

Video 1

https://www.loom.com/share/01176f1692ed4c03b33312708a6d89ab

Video 2

After finishing the Video 1 I found new bugs:

https://www.loom.com/share/41e9ab6895054400a9649d756d569da3

System Info

URL: https://eprobeta210.eazee.online/multistep-form-widget/

Nothing new on the System Info log from the comment above (https://github.com/elementor/elementor/issues/11452#issuecomment-635708486).

I hope this helps because you guys have a long way to go!

Cheers

In the upcoming beta2 version we won't allow dragging above the first disabled repeater item to prevent this issue from happening.

thanks

@Rodolphe Bertozzo commented on May 31, 2020, 11:26 AM GMT+3:

Hi I encountered a bug, when there are 2 steps, the progress bar is displayed with a duplicate on a second line, moreover, if I change the type of progress bar to put a bar with a percentage, I have not only the basic progress bar which is displayed on 2 lines but also the new bar (in percentage) which is displayed underneath. bugform

Thanks, this should be resolved in beta2

israel-tours commented 4 years ago

I found an issue that when I use a select field the next step button doesn't work.

shilo-ey commented 4 years ago

We just released a new beta version, please update your version to v2.10 Beta 2.

This beta release includes:

Additional fixes were included in Elementor v2.9.10 so please update your core version before testing!

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.

rodolphebertozzo commented 4 years ago

Hi I encountered a bug, when there are 2 steps, the progress bar is displayed with a duplicate on a second line, moreover, if I change the type of progress bar to put a bar with a percentage, I have not only the basic progress bar which is displayed on 2 lines but also the new bar (in percentage) which is displayed underneath. ### Although this bug was reported above before Beta 2, it is still present.

zeinnicholas commented 4 years ago

Thanks for taking the time to do it, please share here the exported JSON file for us to take a closer look.

@shilo-ey Sure thing here are the JSON files: https://1drv.ms/u/s!Ai7NtqnRsjrytqhTOcWGI5mLdP-j4w?e=PL0uQ4

In the upcoming beta2 version we won't allow dragging above the first disabled repeater item to prevent this issue from happening.

thanks

Ok, I'll take a look! Thanks for the reply!

fabigrafo commented 4 years ago

I got a weird thing about the Lottie widget. Regardless of which "Lottiefile" I get a strange white border or an invisible frame, so a clickable area.

Bildschirmfoto 2020-06-03 um 13 39 10
zeinnicholas commented 4 years ago

Lottie Widget

Overall the experience is more stable, although still a little rough. I experienced an issue with this file not rendering correctly (https://lottiefiles.com/23495-yellow-animation) but I couldn't reproduce when I started recording.

Bugs:

  1. Erratic sizes: Files without dimensions set in styles are still changing sizes from their initial size on the preview and when you change alignment. If this is intentional that's fine, but it's confusing. It would be better if it behaved like images: covering the full width of the widget unless dimensions are set otherwise.
  2. Scroll animation with fixed widgets: Correct me if I'm wrong, but the expected behavior is that the Scroll effect only will happen with fixed widgets if the effect is relative to the "Entire Page"? Or is it expected to work also when the option is set to "Viewport"? If the former is the intended behavior, maybe a warning over this option would help. Otherwise, it works with the entire page, but not if set to the viewport.

Steps to reproduce

https://www.loom.com/share/cf65e73f4e5841d396e686f88a9b50e6

System Info

URL: https://eprobeta210.eazee.online/lottie-widget-beta2 Only Elementor, Elementor Pro and Hello Elementor installed.

JSON FILE: https://1drv.ms/u/s!Ai7NtqnRsjrytqh0rYWk4DAFToeEmA?e=JFFQAA

zimmiel commented 4 years ago

Hi Is it possible to add in Lottie Widget "trigger" (the element animation that will be started after a click or hover on another element)? User could choose which element add action. This maybe located in another section. something on an example here: https://help.tilda.ws/zero-trigger-animation

shilo-ey commented 4 years ago

Lottie Widget

Overall the experience is more stable, although still a little rough. I experienced an issue with this file not rendering correctly (https://lottiefiles.com/23495-yellow-animation) but I couldn't reproduce when I started recording.

Bugs:

  1. Erratic sizes: Files without dimensions set in styles are still changing sizes from their initial size on the preview and when you change alignment. If this is intentional that's fine, but it's confusing. It would be better if it behaved like images: covering the full width of the widget unless dimensions are set otherwise.
  2. Scroll animation with fixed widgets: Correct me if I'm wrong, but the expected behavior is that the Scroll effect only will happen with fixed widgets if the effect is relative to the "Entire Page"? Or is it expected to work also when the option is set to "Viewport"? If the former is the intended behavior, maybe a warning over this option would help. Otherwise, it works with the entire page, but not if set to the viewport.

Steps to reproduce

https://www.loom.com/share/cf65e73f4e5841d396e686f88a9b50e6

System Info

URL: https://eprobeta210.eazee.online/lottie-widget-beta2 Only Elementor, Elementor Pro and Hello Elementor installed.

JSON FILE: https://1drv.ms/u/s!Ai7NtqnRsjrytqh0rYWk4DAFToeEmA?e=JFFQAA

Thanks for the efforts, we managed to see the scroll behavior issue and to fix it.

Hi Is it possible to add in Lottie Widget "trigger" (the element animation that will be started after a click or hover on another element)? User could choose which element add action. This maybe located in another section. something on an example here: https://help.tilda.ws/zero-trigger-animation

When this version is released, please open a new issue with this nice feedback.

===

We just released a new beta version, please update your version to v2.10 Beta 3. Please note that this version is the Release Candidate version (RC)

This beta release includes:

Additional fixes will be included in Elementor v2.9.12 that should be released later on this week.

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.

cebesten commented 4 years ago

Hi,

Thank you for the update, the last bug is not there anymore

I have a suggestion, the first one is about the steps when they are gray, could be possible to change the font color to dark gray or other so is easy to read?
And the second suggestion: Is when I am in the editing mode forms in the second step or third one in , after adding the information to the previous steps to go into this steps, and If I add a new element or edit an existing one, the UX returns me to the first step, and I must fulfill again the information to go to the step that I am editing,

image image

shilo-ey commented 4 years ago

Thank you all for your vast contribution to this version.

Dark mode control fixes will be released in the upcoming core patch.

Feel free to update to Pro v2.10 to enjoy these features.

Thanks again!

TarasKUpqode commented 3 years ago

Hi! There is a problem with Lottie render delay( The page is already downloaded, but Lottie animation show in 5-6 seconds) https://dev.viewdemo.co/wp/radicle-health/