search

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.45k stars 1.4k forks source link

✅ 📣 Elementor v3.2 Beta 4 Release 📣 #14313

Closed shilo-ey closed 3 years ago

shilo-ey commented 3 years ago

===========

Beta 4 UPDATED - PLEASE READ BELOW!

===========

Hi Elementor Beta testers 👋,

Spring is here and so is the beta version of Elementor 3.2. In this new version, we included something for everyone! Check out the latest performance improvements, new design features, and responsive UI. Plus, try out the new Import/Export experiment for a faster website creation process.

Try out Elementor v3.2 Beta and let us know what you think about our newest additions, including:

Before you test, please make sure you are using:

Upcoming Performance Improvements: Smaller E-icons File, Conditionally Load Lightbox, Reduced Extra DOM Elements & More

Performance

Because Elementor is a mature product that powers millions of websites, we make performance changes and adjustments more carefully than other newer players in the market. Nevertheless, making performance improvements is one of our most important initiatives for 2021. As you may have noticed from our previous releases, we’ve been doubling down on performance optimization and are spending a lot of time and resources on making improvements so that Elementor’s performance will be top-notch. Here’s what we focused on in this release.

Much Smaller E-icons Library CSS Files

We split the e-icons library CSS files into two separate libraries - frontend and backend. This change makes the frontend library much lighter than before (will load only 1KB instead of 17KB when Improved Asset Loading experiment is inactive)

Here’s how it works:

  1. Go to Elementor > Settings > Experiments tab and make sure Improved Asset Loading experiment is inactive
  2. Create a new page, drag in a widget and publish the page
  3. Make sure eicons library CSS file was loaded and check how much the file weights (17KB)
  4. Go to Elementor > Settings > Experiments tab and activate Improved Asset Loading experiment
  5. Go to the previously created page and make sure the old file is not loaded, and the icons are presented properly (now will be loaded as a part of frontend.css)

Extended the Improved Asset Loading Experiment (load assets only when used)

Before Elementor v3.1, Elementor used to load most of the assets whether they were used or not on the page. In our last releases, we started implementing a loading method that loads only what you need when activating the Improved Asset Load Experiment. In this version we are conditionally loading the following assets:

Here’s how it works:

  1. Go to Elementor > Settings > Experiments tab and make sure the Improved Asset Loading experiment is inactive
  2. Make sure Lightbox is enabled in the Site Settings
  3. Create a new page, drag in a widget that uses a Lightbox (like an Image widget), make sure the lightbox is activated in the widget settings, and publish the page
  4. View the page, click on the image and make sure the Lightbox works properly
  5. Go to Elementor > Settings > Experiments tab and switch the Improved Asset Loading Experiment to active
  6. Visit the page you created earlier (with the Image widget)
  7. Open your browsers’ Dev-tools, and under the Network tab, look for files containing the words lightbox, dialog.min.js and share-links.min.js. Make sure the libraries appear
  8. Launch the Lightbox and make sure it works properly
  9. Create a blank page without any widget. Go to your browsers’ Dev-tools, and under the network tab, look for files above and make sure they do not appear

Extended the Optimized DOM Output Experiment:

In v3.0 we reduced several DOM elements to make Elementor leaner. In this release and the upcoming ones as well, we will continue removing the legacy DOM elements. In this version we reduced the following elements:

Here’s how it works:

  1. Go to Elementor > Settings > Experiments tab and make sure Optimized DOM Output is inactive
  2. Create a new page, edit it with Elementor and drag in Image and Text editor widgets
  3. Play around with the widgets and make sure the behavior is as expected both on frontend and in the Editor
  4. Open your Dev-tools inspector and make sure elementor-image & ‘elementor-text-editor’ wrappers appear in the DOM
  5. Go back to the Experiments tab and activate Optimized DOM Output
  6. Check the DOM and see that the two DOM elements were removed
  7. Play around with the widgets and make sure the behavior is as expected

Set Your Google Fonts Loading Method

During our improvements, we tackled the font loading options. First, in v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes.

In this release, we continue to focus on making fonts loading adjustments and allow you to modify the default way Elementor loads Google Fonts. From now on, you can choose the loading method you wish from the options: auto, swap, block, optional, and fallback using a designated control in your Elementor dashboard settings screen.

Here’s how it works:

  1. Go to Elementor > Settings > Advanced tab and change the Google Fonts Load to one of the options.
  2. Create a new page with a headline, and set it to use Google font (for example Roboto)
  3. Save the page and check that the headline’s font property has font-display value that reflects the one you chose in the settings screen

Introducing Text Path Widget: Add More Text Design Options To Your Toolbox

Path

Our new Text Path Widget is a fun new tool that gives you more control and flexibility over your design options. You’ll be able to add a whole new level of creativity to your website by adding text to vector-based paths.

You can attach your text to any shape! select from our predefined list of shapes or upload your own SVG shape, customize and style it as you want.

Here’s how it works:

  1. Create a new page and drag in Text Path widget
  2. Change the default text to your own text
  3. Choose between predefined path types and make sure everything presented as expected
  4. Switch the shape to Custom and upload custom SVG text path
  5. Turn the Show Path option to ON
  6. Go to the Style tab and play around with the Text Path options, such as size, rotate, flip, and more
  7. Change the text position by adjusting the Starting Point
  8. Style the path by changing the path and stroke colors
  9. Make sure everything works as expected in the Editor and on the Frontend

Meet Mask Option: Give Your Elements A New Shape

Mask

Ready for more design functionality? We added a new Mask Option in the Advanced section that allows you to turn any element into a mask-based object. For example, when you add an image into the Editor and click on the “Advanced” section, you’ll see a new “Mask” option. You’ll be able to choose from a list of shapes and your image will transition into the shape you selected.

You can create stylish designs for any element you want like an image, video, Google Maps, and more by using SVG or PNG images. Want to upload your SVG and turn an element into a shape we don’t have? No problem!

We also offer customization options allowing you to define the size, scale, position of your masked-shape or create a shape that repeats itself with our Repeat control.

Let your imagination go wild and use this new design functionality to design your websites outside the lines. We can’t wait to see what you come up with.

Here’s how it works:

  1. Create a new page and drag in an Image widget
  2. Replace the default image placeholder with your own image
  3. Go to the Advanced tab and click on the Mask section
  4. Switch the Mask option to ON
  5. Try the mask with the predefined shapes list
  6. Upload custom SVG or PNG mask shape
  7. Play around with the size, position, and repeat options and customize the mask as you please
  8. Explore the mask option with different widgets
  9. Make sure everything works as expected in the Editor and on the Frontend

Say Hello To Gradient Button: Create Beautiful Buttons In A Click

Gradient-B

Gradient Button in Elementor has been a long-anticipated feature and we are happy to say your wait is finally over! Say Hello to our new Gradient Button capability in Button widget and Bye-Bye to other plugins or workarounds. Now, you’ll be able to use custom or Global colors in your buttons and add depth to your button designs. Create the button designs you want for your websites.

Here’s how it works:

  1. Create a new page and edit it using Elementor
  2. Drag in a new Button widget and define its layout as you please
  3. Go to Style tab, and from the Background option select Gradient
  4. Select the colors you want to display and the gradient properties
  5. Make sure everything is working as expected both on the Frontend and in the Preview in various browsers

New Responsive UI - Easily Edit Your Responsive Design

Respo

It's no secret that additional breakpoints are one of the most requested features in the history of Elementor ;). As we explained in the developers' article we published in December, several changes need to be made before adding more breakpoints. Here are some steps we've taken in this release to get the ball rolling:

We changed the way the Responsive UI works. Now when selecting the responsive mode you can navigate between your devices more easily using the new top bar. You can drag and resize your preview based on your breakpoints settings within the boundaries of your breakpoint Get quick access to your Breakpoints settings

In the future, we will use this new UI for additional breakpoints.

In addition to the responsive UI, we introduced some “under the hood” changes to our breakpoints mechanism which handles them much more dynamically than the previous “Hardcoded” way.

Here’s how it works:

  1. Create a new page and edit it using Elementor
  2. Insert a template from the Template Library, and enter responsive mode by clicking on the responsive icon at the bottom of the left panel
  3. Play with the device types and the device layout by dragging the device edge - make sure it works as expected
  4. While viewing one of the devices, drag the preview by hovering and dragging the preview width and height and make sure the dimensions update accordingly in the top right of the top bar. Save your page and view it on the frontend to make sure everything is consistent
  5. Go back and edit the page, update the height & width values in the top right bar and try to insert acceptable and unacceptable values
  6. Make sure you are able to get to the Breakpoints settings in the Editor panel from the top bar using the cog icon
  7. Make sure everything works as expected in the Editor and on the Frontend

New Experiment: Move All Of Your Elementor Content From One Site To Another

We’re always striving to help make your web creation process seamless and efficient. A big part of that, is being able to save you time so you can focus on growing your business. With our new Import/Export feature located in our Experiments section, we hope to allow you to do just that.

Once you activate the new Import/Export functionality experiment, you will be able to see two new items under the Elementor menu, which will help you to design your websites faster by allowing you to export your entire Elementor content from one website and import it into another.

This feature can be extremely useful for freelancers who want to save time by creating “blueprints” of their websites' essential items and reuse these elements in their projects.

Please note that this feature is currently experimental and will be updated and extended in the near future.

Here’s how it works:

  1. Go to an existing website which has Header, Footer, Global colors and Fonts, and extra settings such as custom breakpoints, site background and Elementor created pages or create a new one
  2. Activate the Import / Export experiment via Elementor > Settings > Experiments
  3. Go to Elementor > Export and start an export session
  4. Once you’ll get a zip file that contains your site’s templates and settings go to a new or existing website and redo step 2
  5. Go to Elementor > Export and start an Import session
  6. Upload your zip file and proceed with the process of importing
  7. Once the process finishes make sure everything went to the right place:
    • Global Colors and Fonts - Primary, Secondary, Accent and Text are being replaced.
    • Custom Global Colors and Fonts being added
    • Theme Builder elements being replaced and set to be Entire site rule
    • Landing pages and Elementor created pages being imported successfully
    • Global widgets, custom post types and non-Elementor posts are not being exported and imported
  8. Make sure everything is working properly and as expected both on Frontend and in Preview

More Improvements

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

Designated time for release: April 21, 2021 (Estimated)

Many thanks for your support and help!

Cheers, Elementor Team

fleks commented 3 years ago

Text Path [Edit: Apr 12, 2021]

Everything else is solved or answered by @shilo-ey here: https://github.com/elementor/elementor/issues/14313#issuecomment-813889068

fleks commented 3 years ago

New Responsive UI [Edit: Apr 21, 2021 - due to Beta 2]

The new Responsive UI is great and I appreciate you adopted my idea of "Custom Responsive Dimensions @ Elementor Editor" ( https://flextensions.com/42/ ). But:

Everything else is solved, still there because of importance ;) or answered by @shilo-ey here: https://github.com/elementor/elementor/issues/14313#issuecomment-813889068

fabigrafo commented 3 years ago

Hi Elementor Team,

spring is already here as of today. At least in theory!

Wow, thank you very much for this extensive and packed first 3.2 Beta with many exciting additions and new functions. It took a while, but now it's finally here!

I started testing straight away and would like to focus on one topic per post. That should definitely serve for a better overview.

New Responsive UI

https://user-images.githubusercontent.com/57997262/111920517-bb2a4c80-8a8f-11eb-8b40-a5ada91c9a9a.mp4

Breakpoint Bug 3 2 Beta1

https://user-images.githubusercontent.com/57997262/111920615-40adfc80-8a90-11eb-93e4-1531d0beaec0.mp4

I hope my suggestions will help improve this area. Let me know it.

fabigrafo commented 3 years ago

Ok, that wasn't that much anymore. Hence everything else in this post:

Text Path Widget

First of all, a really great feature that makes a lot possible!

So far I can't find anything that doesn't work. Except that the link to learn how to do custom text paths with SVG doesn't work.

So I can't test this option because I don't know how the SVG should be created. It would be great if the correct link was used there.

Mask option

An unbelievable innovation! Wow, that was really missing.

For the image widget, where I've tested it so far, it already works perfectly. I hope it will be extensively tested on other widgets by the others here.

Gradient button

Is a useful extension when you need it.

Does this only work for the button widget or for all other widgets where you can define a button, such as the form or call to action widget?

That would certainly be worth considering. Consistency in design language and applicability is essential here. My feature request here ( #14140 ) should also be considered in my opinion.

There's no gradient option for the frame, right?

But apart from my suggestions, the new option works very well so far.

Summary:

All in all a very good further development! Then I still have hope for Elementor after all. The “Performance Improvements” and the “Import / Export Experiment” in particular make me feel very positive. I can't say much about the former, except that it sounds good. Let's see how much it brings. Also not for the second, because I won't try it until tomorrow or the next few days.

Sorry for all the text and see you soon!

Webtica commented 3 years ago

Hi,

After updating to beta 1. The modal Elementor Data Updater the Click here to run now button is not working. I don't see any errors in the console.

black-eye commented 3 years ago

Hi, nice addition with updated responsive UI. Here are few suggestions that can it make even better (some of them others mentioned already too).

1. Entering the responsive mode (aka showing the responsive bar) As @fabianenzensperger suggested, the default breakpoint after activating the mode should be desktop. It should act more like "show responsive bar" than "activate responsive mode and switch to mobile view".

Alternatively you should be able to select the particular viewport the same way as it has been uptill now (but I would expect, that the goal of this new concept is to get rid of the current pull up submenu).

2. Make responsive bar permanent It would be handy to have an option to have this bar visible all the time. Either as separate on/off button, or just remember the last state. This behaviour should be probably optional.

3. Position of the responsive bar Consider to have a possibility to move this bar to the bottom. It would be more suitable for the "permanent" option. It would grab less attention and it would be nearer to the "Enter responsive mode" button, so the mouse travel would be shorter.

4. Dimensions presets Nothing new here, something like Chome and every other browser has:

obrazek

obrazek

For the starters with some basic options + custom settings. Ideally if the list could be customizable, at least via filter.

If it would be too much work, at least preserve once changed custom settings.

5. Better distinction between preview dimensions and breakpoints I'm a developer so I can grasp the purpose of the custom dimensions in the bar. But I'm afraid that most of the regular users won't be able to distinguish between preview value and breakpoint value. Most of them would be expecting, they are updating the breakpoint values. This concept should be somehow better clarified. Not sure how exactly, though.

That's it for the responsive mode. Hope it helps.

fabigrafo commented 3 years ago

Hi, nice addition with updated responsive UI. Here are few suggestions that can it make even better (some of them others mentioned already too).

1. Entering the responsive mode (aka showing the responsive bar) As @fabianenzensperger suggested, the default breakpoint after activating the mode should be desktop. It should act more like "show responsive bar" than "activate responsive mode and switch to mobile view".

Alternatively you should be able to select the particular viewport the same way as it has been uptill now (but I would expect, that the goal of this new concept is to get rid of the current pull up submenu).

2. Make responsive bar permanent It would be handy to have an option to have this bar visible all the time. Either as separate on/off button, or just remember the last state. This behaviour should be probably optional.

3. Position of the responsive bar Consider to have a possibility to move this bar to the bottom. It would be more suitable for the "permanent" option. It would grab less attention and it would be nearer to the "Enter responsive mode" button, so the mouse travel would be shorter.

4. Dimensions presets Nothing new here, something like Chome and every other browser has:

obrazek

obrazek

For the starters with some basic options + custom settings. Ideally if the list could be customizable, at least via filter.

If it would be too much work, at least preserve once changed custom settings.

5. Better distinction between preview dimensions and breakpoints I'm a developer so I can grasp the purpose of the custom dimensions in the bar. But I'm afraid that most of the regular users won't be able to distinguish between preview value and breakpoint value. Most of them would be expecting, they are updating the breakpoint values. This concept should be somehow better clarified. Not sure how exactly, though.

That's it for the responsive mode. Hope it helps.

Thank you for the confirmation! I even think that you should be able to open the responsive mode in the same way as on the bottom left in every area, whether it is Widget Content, Advanced, Style or Site Settings. Away from the dropdown.

Therefore, in my opinion, it also makes sense to make this bar permanent. I don't know whether it would be better downstairs, it would have to be tried out.

It should also save the last setting or, as already mentioned, it should be possible to create templates, as is also possible in Chrome or comparable browsers. That would save a lot of time if you no longer had to do it with an extra tool. My suggestion is to have a viewport display in addition to breakpoints in the site settings under layout. These are then of course linked to the values ​​at the top right.

At first I didn't like the idea of ​​separating breakpoint and viewport, but after your contribution it makes more sense to me @black-eye ... Viewpoint is for viewing only and Breakpoint sets the actual width. Perfect!

samuelgoldenbaum commented 3 years ago

The following snippet was recommended to remove eicons:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
    wp_deregister_style( 'elementor-icons' ); 
}

Please confirm this is still applicable for v3.2 as I am seeing the entire woff file (86kb) now being downloaded after being referenced from /wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.2.0-beta1

image

I can confirm the only place the icons are being referenced in the page source is the hamburger menu:

<i class="eicon-menu-bar" aria-hidden="true"></i>

While I understand the hamburger references a font and would need to download the entire file to use a single icon, it really is not acceptable.

Allow developers the ability to choose the icon from a font or upload svg - same as social icons etc - due to the 86kb load, this should be a priority for the team.

jazir555 commented 3 years ago

The following snippet was recommended to remove eicons:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
  wp_deregister_style( 'elementor-icons' ); 
}

Please confirm this is still applicable for v3.2 as I am seeing the entire woff file (86kb) now being downloaded after being referenced from /wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.2.0-beta1

image

I can confirm the only place the icons are being referenced in the page source is the hamburger menu:

<i class="eicon-menu-bar" aria-hidden="true"></i>

While I understand the hamburger references a font and would need to download the entire file to use a single icon, it really is not acceptable.

Allow developers the ability to choose the icon from a font or upload svg - same as social icons etc - due to the 86kb load, this should be a priority for the team.

100% agree. I thought the eicons change would fix this. If the only thing they are being used for is the hamburger menu icon, it should not download the entire font file. Almost every mobile menu is going to use that icon(since they are going to have more links than could be displayed without a hamburger submenu), this is something that is affecting most elementor users.

jormeer commented 3 years ago

Yes pls fix the icon menu and allow for svg upload. This is really needed.

d19dotca commented 3 years ago

I definitely agree with others that the new Responsive View needs a little bit of tweaking. It's a great improvement though, I especially like the ability to drag the width to expand and resize easily.

A couple of suggestions for improvement on the Responsive View (which others have brought up too and I fully agree with):

JoeHana commented 3 years ago

It seems like the Mask Option for the Image Widget does only work with activated DOM Optimization. This is most likely due to the fact that .elementor-image has been removed as well. Please consider some backwards compatibility here since it won't be possible for everyone to enable the DOM Optimization. Generally spoken it would be great to get some more clarity about the optimized DOM as of now it is not very clear which kind of solution will be considered to solve those issues? Please see my other issue here #14286

black-eye commented 3 years ago

@JoeHana

It seems like the Mask Option for the Image Widget does only work with activated DOM Optimization. This is most likely due to the fact that .elementor-image has been removed as well. Please consider some backwards compatibility here since it won't be possible for everyone to enable the DOM Optimization. Generally spoken it would be great to get some more clarity about the optimized DOM as of now it is not very clear which kind of solution will be considered to solve those issues? Please see my other issue here #14286

Confirming this

parfilov commented 3 years ago

I think that device icons are too small and it's inconvenient to click them. ScreenShot 01-04-2021- at 18-18-44@2x

numeroish commented 3 years ago

Set Your Google Fonts Loading Method

During our improvements, we tackled the font loading options. First, in v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes.

In this release, we continue to focus on making fonts loading adjustments and allow you to modify the default way Elementor loads Google Fonts. From now on, you can choose the loading method you wish from the options: auto, swap, block, optional, and fallback using a designated control in your Elementor dashboard settings screen.

Will this apply to Custom Icons too?

At present there is no font-display option for Custom Icons. This leads to 'creates eliminate the effect of render-blocking processes'. It needs font-display: block added to it too.

This works for Custom Fonts, but there is nothing similar for Custom Icons. add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {

return 'swap';

}, 10, 3 );

promocot commented 3 years ago

Hello i instal beta 3.2.0 v8 but i don't have full settings for responsive mode image

parfilov commented 3 years ago

Hello i instal beta 3.2.0 v8 but i don't have full settings for responsive mode image

Which full settings are you waiting for? This update is preparing to advanced breakpoints. For now is UI update only.

promocot commented 3 years ago

Александр я считал что вы специалист в своей области, однако вижу что вы вообще не внимательны, обратите внимания что у всех есть настройки где можно вбить вручную разрешение или ползунки что бы двигать, у меня ничего из этого нет! Смотрите внимательно прежде чем говорить о wordpress с любовью и на понятном языке!

parfilov commented 3 years ago

@promocot in English please. Try to clear browser cache and stop to teach me how to live.

promocot commented 3 years ago

@promocot in English please. Try to clear browser cache and stop to teach me how to live.

i try many browser, and have same probleme

shilo-ey commented 3 years ago

@fleks thanks for the detailed report!

Hi there, I like the new Text Path but I experience at Style > Rotate in mobile or tablet view the same issue like I described minutes ago #14314

Please keep this beta thread related to beta issues only. we will inspect your dedicated issue.

[Edit: more issues with Text Path]

  • the text changes color (to black) by hovering even if it isn't set

I can't reproduce this issue, can you please share an example?

  • you can't set the color when using text path as a link - some css-var-issues, like above - after hovering the correct text color appears

  • the ratio of the path is fixed - you can change the size but not the height or width

These are the limitations of working with SVG paths.

  • it isn't possible to only flip the path without the text (so the text can't be read properly

This option will be removed from the widget for now.

  • after coping a Text Path element the default text "Add Your Curvy Text Here" appears at the preview - but the content of the Text textarea is liek the copied element (Screenshot: flextensions.com/text-path_issue_1)

Thanks!

Thanks, we will resolve this issue, nice catch!

New Responsive UI The new Responsive UI is great and I appreciate you adopted my idea of "Custom Responsive Dimensions @ Elementor Editor" ( flextensions.com/42 ). But:

  • the minimum width of the mobile view is now 375px insteaf of 360px, it is not adjustable by the left or right handles. There are a lot of smartphones with a screen width of 360px - about 25% and some 7% with less Source: worship.agency/mobile-screen-sizes-for-2021 So to see a common minimum you always have to enter the value at the form field on the top right manually after switching to mobile view.

Thanks, will consider on changing the minimum value.

  • Resizing by the handles stops at the breakpoints (which is good) but it is possible to enter greater values manually. Changes are made here won't appear at the displayed resolution.

We will enforce the values added in the dimensions control as well

  • It would be great if it would be possible to adjust the desktop resolution too.

  • Resizing the browser window doesn't update the width and height at the input field on the top right

  • It's not possible to save custom dimensions. Currently these are not possible but we will consider adding them in the future.

  • After switching from mobil to desktop at the editor are appearing the resize handles at the left top and bottom right:

  • When loading a page for editing and one of the first actions after selecting an element, is to switch the responsive mode to tablet or mobile by a responsive control of a widget, the preview frame gets somehow super small (rulers are added) Thanks! we are working on resolving these issues

@fabianenzensperger

New Responsive UI

  • I really like the new view for switching between devices, especially those ugly (simulated) tablets and mobile devices are finally gone. I like it a lot better without a border with these "handles" tool.

  • The desktop should be preselected and not the mobile device when clicking on the responsive mode. If I click on this mode at the bottom left, it immediately jumps to the mobile breakpoint. Maybe you should also change the order from left (larger breakpoints) to right (smaller breakpoints).

  • Settings bug. I accidentally double-clicked the gear in the top right corner and there was a strange bug in the left column. This video should help: Thanks! we will resolve this soon

  • Does the new setting of the height have any significance for the presentation of the website? In the "Site Settings" itself you can only set the width in pixels and not the height.

The height is only for presentation purposes

  • The width in the site settings of the breakpoints is different as shown in the new interface at the top right. Are they not linked? See the following picture:

The panel breakpoint settings shows the breakpoints. the preview shows the minimum value for each device (mobile: 375px-breakpoint, tablet: mobile-breakpoint + 1px to the next breakpoint etc.)

  • It is very practical if you minimize the left column and you are still in the new responsive area, this bar at the top does not also disappear. Whether you wanted to or not, it's definitely practical! But what I noticed is the following: If I am in the desktop breakpoint, I will not come back. I think the following video is self explanatory:

Thanks, nice catch!

Text Path Widget

First of all, a really great feature that makes a lot possible!

So far I can't find anything that doesn't work. Except that the link to learn how to do custom text paths with SVG doesn't work.

So I can't test this option because I don't know how the SVG should be created. It would be great if the correct link was used there.

Just use any svg you like.

Mask option

An unbelievable innovation! Wow, that was really missing.

For the image widget, where I've tested it so far, it already works perfectly. I hope it will be extensively tested on other widgets by the others here.

Gradient button

Is a useful extension when you need it.

Does this only work for the button widget or for all other widgets where you can define a button, such as the form or call to action widget?

That would certainly be worth considering. Consistency in design language and applicability is essential here. My feature request here ( #14140 ) should also be considered in my opinion.

There's no gradient option for the frame, right?

We will implement this in all of the remaining places (Form, Login)

But apart from my suggestions, the new option works very well so far.

Summary:

All in all a very good further development! Then I still have hope for Elementor after all. The “Performance Improvements” and the “Import / Export Experiment” in particular make me feel very positive. I can't say much about the former, except that it sounds good. Let's see how much it brings. Also not for the second, because I won't try it until tomorrow or the next few days.

Happy to hear, thanks!

Hi,

After updating to beta 1. The modal Elementor Data Updater the Click here to run now button is not working. I don't see any errors in the console.

@Webtica Hi, can you please share your system info?

Hi, nice addition with updated responsive UI. Here are few suggestions that can it make even better (some of them others mentioned already too).

1. Entering the responsive mode (aka showing the responsive bar) As @fabianenzensperger suggested, the default breakpoint after activating the mode should be desktop. It should act more like "show responsive bar" than "activate responsive mode and switch to mobile view".

Alternatively you should be able to select the particular viewport the same way as it has been uptill now (but I would expect, that the goal of this new concept is to get rid of the current pull up submenu).

2. Make responsive bar permanent It would be handy to have an option to have this bar visible all the time. Either as separate on/off button, or just remember the last state. This behaviour should be probably optional.

3. Position of the responsive bar Consider to have a possibility to move this bar to the bottom. It would be more suitable for the "permanent" option. It would grab less attention and it would be nearer to the "Enter responsive mode" button, so the mouse travel would be shorter.

4. Dimensions presets Nothing new here, something like Chome and every other browser has:

obrazek

obrazek

For the starters with some basic options + custom settings. Ideally if the list could be customizable, at least via filter.

If it would be too much work, at least preserve once changed custom settings.

5. Better distinction between preview dimensions and breakpoints I'm a developer so I can grasp the purpose of the custom dimensions in the bar. But I'm afraid that most of the regular users won't be able to distinguish between preview value and breakpoint value. Most of them would be expecting, they are updating the breakpoint values. This concept should be somehow better clarified. Not sure how exactly, though.

That's it for the responsive mode. Hope it helps.

@black-eye thanks! as for your suggestions - we will introduce the next phase of the Additional breakpoints in the next releases, so you will be able to see the complete picture. We will consider adding these capabilities and improvements down the road and will share this information.

The following snippet was recommended to remove eicons:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
  wp_deregister_style( 'elementor-icons' ); 
}

Please confirm this is still applicable for v3.2 as I am seeing the entire woff file (86kb) now being downloaded after being referenced from /wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.2.0-beta1

image

I can confirm the only place the icons are being referenced in the page source is the hamburger menu:

<i class="eicon-menu-bar" aria-hidden="true"></i>

While I understand the hamburger references a font and would need to download the entire file to use a single icon, it really is not acceptable.

Allow developers the ability to choose the icon from a font or upload svg - same as social icons etc - due to the 86kb load, this should be a priority for the team. @samuelgoldenbaum @jazir5 @jormeer

The eicons library loads not only for the nav menu widget but for more icons.

In this release we handled the CSS files of the library solely. we will improve the font load in the next releases. sorry about the confusion.

@d19dotca thanks for your suggestions and feedback. we will consider adding them in the future.

It seems like the Mask Option for the Image Widget does only work with activated DOM Optimization. This is most likely due to the fact that .elementor-image has been removed as well. Please consider some backwards compatibility here since it won't be possible for everyone to enable the DOM Optimization. Generally spoken it would be great to get some more clarity about the optimized DOM as of now it is not very clear which kind of solution will be considered to solve those issues? Please see my other issue here #14286

@JoeHana Thanks, we resolved this and will be fixed in the upcoming beta, nice catch!

I think that device icons are too small and it's inconvenient to click them. ScreenShot 01-04-2021- at 18-18-44@2x

@parfilov Thanks! will adjust the sizes

Set Your Google Fonts Loading Method

During our improvements, we tackled the font loading options. First, in v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes. In this release, we continue to focus on making fonts loading adjustments and allow you to modify the default way Elementor loads Google Fonts. From now on, you can choose the loading method you wish from the options: auto, swap, block, optional, and fallback using a designated control in your Elementor dashboard settings screen.

Will this apply to Custom Icons too?

At present there is no font-display option for Custom Icons. This leads to 'creates eliminate the effect of render-blocking processes'. It needs font-display: block added to it too.

This works for Custom Fonts, but there is nothing similar for Custom Icons. add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {

return 'swap';

}, 10, 3 );

Currently no, but we will handle this area later on.

Hello i instal beta 3.2.0 v8 but i don't have full settings for responsive mode image

@promocot see @parfilov answer :)

Thank you all for this meaningful feedback! we are working hard on improving this version according to your feedback and our vision.

a new beta version will be released soon.

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.

sushmak02 commented 3 years ago

Regarding deprecations - I am using this code in my plugins frontend.js to trigger the widget on elementor hooks -

elementor.channels.data.on( 'element:after:duplicate element:after:remove', function( e, arg ) { $( '.elementor-widget-slider' ).each( function() { SliderWidgetHandler( $( this ), $ ); } ); } );

I can see you have deprecated - elementor.channels.data -> element:after:remove and replaced with $e.events -> After -> 'document/elements/delete'. How can I use this in my above code?

DavidGMiles commented 3 years ago

Conditionally Load Lightbox - is unloading lightbox for me everywhere - even on pages that include the gallery control - so errors exist - remedied by switching off the conditional loading feature and the galleries spring back into life

shilo-ey commented 3 years ago

Hey all,

We just released a new beta version, please update your version to v3.2.0 Beta 2.

This beta release includes:

Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue.

Thanks again to everyone.

DavidGMiles commented 3 years ago

FAQ Schema support is a nice addition - to confirm my report above remains the same - Conditionally Load Lightbox - is unloading lightbox for me everywhere - even on pages that include the gallery control - so errors exist - remedied by switching off the conditional loading feature and the galleries spring back into life

d19dotca commented 3 years ago

Expert tier templates

Not to dive too far off the beta discussion but since it's mentioned in the latest beta notes...

Maybe I missed something but what exactly is an "Expert tier template"? Is that to do with the "100+ additional website kits (coming soon in 2021)" mentioned in the recent Price Change blog post? Hoping those new templates will be available to grandfathered Expert license holders too. 😅

Sorry again, not meaning to sidetrack the beta discussion, only asking here because it's noted in the latest beta 2 release notes. If you're able to speak to that a little bit @shilo-ey , that'd be awesome.

I'll install the latest beta today and run through it and report back.

fabigrafo commented 3 years ago
  • The desktop should be preselected and not the mobile device when clicking on the responsive mode. If I click on this mode at the bottom left, it immediately jumps to the mobile breakpoint. Maybe you should also change the order from left (larger breakpoints) to right (smaller breakpoints).

@shilo-ey Please think about it. It's really very impractical if, by clicking the responsive mode, the entire content jumps directly into the mobile view. It doesn't make much sense either, or what's the idea behind it?

And change the order of the device's in this step from big to small.

Hey all,

We just released a new beta version, please update your version to Pro v3.2.0 Beta 2.

This beta release includes:

  • Tweak: Added FAQ Schema support to Accordion and Toggle Widgets (props @pacotole, #13425, #9053)
  • Tweak: Added support for Expert tier templates in Templates Library
  • Tweak: Adjusted Media control to better handle SVG uploads
  • Tweak: Removed Flip controls from Text Path widget
  • Tweak: Responsive Bar UI adjustments
  • Tweak: Added devices descriptive tooltips to Responsive top bar
  • Fix: “Undefined” error message is thrown when server fails to save or insert a template (#12377)
  • Fix: Popup Dynamic Link options modal is misplaced (#13257)
  • Fix: Navigator indicators are missing since WordPress v5.7 (#14094)
  • Fix: Navigator hides portions of the preview when docked
  • Tweak: Removed “Meet right click” introduction
  • Fix: Mask option is not working on Image widget when Optimized DOM experiment is inactive
  • Fix: Copy-Paste not working properly in Text Path widget
  • Fix: Text Path not being displayed on frontend for non logged in users
  • Fix: Clicking on the “Manage Breakpoints” button when in Site Settings leaves the panel header in Site Settings state
  • Fix: Change active device via the Editor panel controls caused the preview to shrink
  • Fix: Collapsed Editor panel can't be opened in desktop responsive mode
  • Fix: Changes made to breakpoints settings are not reflected in the preview
  • Fix: The Responsive top bar overlapped the Navigator when docked
  • Fix: Incorrect strings in Import / Export experiment flow
  • Fix: An invalid zip file displayed a success message in Import / Export experiment
  • Fix: Updated the Google Fonts Load method description text
  • Fix: Redundant space when deleting an icon from Icon Box widget
  • Fix: Admin Notices buttons were not clickable

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.

Good update so far, almost all of my thoughts have been implemented.

shilo-ey commented 3 years ago

@DavidGMiles can you please share more information on how to reproduce the issue you encounter?

@d19dotca yes. Experts tier = anyone with Expert or above license. but let's keep this thread to beta related issues.

@fabianenzensperger As a non-advanced user, it's sometimes not clear to see what changed when clicking on the responsive toggle. We will iterate on this over time. but you always can switch devices from the Editor Panel controls.

Thanks

JoeHana commented 3 years ago
  • The desktop should be preselected and not the mobile device when clicking on the responsive mode. If I click on this mode at the bottom left, it immediately jumps to the mobile breakpoint. Maybe you should also change the order from left (larger breakpoints) to right (smaller breakpoints).

@shilo-ey Please think about it. It's really very impractical if, by clicking the responsive mode, the entire content jumps directly into the mobile view. It doesn't make much sense either, or what's the idea behind it?

And change the order of the device's in this step from big to small.

Hey all,

We just released a new beta version, please update your version to Pro v3.2.0 Beta 2.

This beta release includes:

  • Tweak: Added FAQ Schema support to Accordion and Toggle Widgets (props @pacotole, #13425, #9053)

  • Tweak: Added support for Expert tier templates in Templates Library

  • Tweak: Adjusted Media control to better handle SVG uploads

  • Tweak: Removed Flip controls from Text Path widget

  • Tweak: Responsive Bar UI adjustments

  • Tweak: Added devices descriptive tooltips to Responsive top bar

  • Fix: “Undefined” error message is thrown when server fails to save or insert a template (#12377)

  • Fix: Popup Dynamic Link options modal is misplaced (#13257)

  • Fix: Navigator indicators are missing since WordPress v5.7 (#14094)

  • Fix: Navigator hides portions of the preview when docked

  • Tweak: Removed “Meet right click” introduction

  • Fix: Mask option is not working on Image widget when Optimized DOM experiment is inactive

  • Fix: Copy-Paste not working properly in Text Path widget

  • Fix: Text Path not being displayed on frontend for non logged in users

  • Fix: Clicking on the “Manage Breakpoints” button when in Site Settings leaves the panel header in Site Settings state

  • Fix: Change active device via the Editor panel controls caused the preview to shrink

  • Fix: Collapsed Editor panel can't be opened in desktop responsive mode

  • Fix: Changes made to breakpoints settings are not reflected in the preview

  • Fix: The Responsive top bar overlapped the Navigator when docked

  • Fix: Incorrect strings in Import / Export experiment flow

  • Fix: An invalid zip file displayed a success message in Import / Export experiment

  • Fix: Updated the Google Fonts Load method description text

  • Fix: Redundant space when deleting an icon from Icon Box widget

  • Fix: Admin Notices buttons were not clickable

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.

Good update so far, almost all of my thoughts have been implemented.

@fabianenzensperger to me it seems like this is an attempt into the mobile first direction - which is actually something we all need to consider at some point. However, at the current stage it is indeed by far to early to move into this direction since there are plenty other things which needs to be considered first. But this would be the only logical explanation to me...

DavidGMiles commented 3 years ago

Lightbox issue - very easy - ensure conditional loading experiment is on, start a new page, add a gallery, pop some images into it, save it, view it, click on images in the gallery, no lightbox, but javascript errors about not being able to find a lightbox object, go to settings, disable the conditional loading experiment, go back to gallery test page, reload it, click on images in the gallery, we now have a lightbox appearing - conclusion conditional loading experiment is the cause

fabigrafo commented 3 years ago

@fabianenzensperger As a non-advanced user, it's sometimes not clear to see what changed when clicking on the responsive toggle. We will iterate on this over time. but you always can switch devices from the Editor Panel controls.

Thanks

Thank you for your quick and honest answer. However, I don't find the behavior good. I'm an advanced user and I was very confused the first time around. And since you're not always in responsive mode, it is very annoying to end up in mobile view every time.

Especially if you have more than "only" 3 breakpoints in the near future. I think it will confuse a lot of people, even here at Beta thread some people have been surprised.

It is something new that this bar appears at the top. Isn't that enough of a visible change?

cebesten commented 3 years ago

Hi elementor team, with the new UI breakpoint (amazing update) I'm having an issue, so the dashboard loads but only a portion of the interface could be seen and doesn't matter what I do, dragging the bottom handler or adding the text in height it will not change, is not working for mobile or tablet, working correctly on desktop. image image image

I isolate elementor and elementor pro only active plugins but still the same result.

system info:

== Server Environment == Operating System: Linux Software: Apache MySQL version: Percona Server (GPL), Release 23, Revision 500fcf5 v5.7.23-23 PHP Version: 7.2.34 PHP Max Input Vars: 1000 PHP Max Post Size: 48M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected

== WordPress Environment == Version: 5.5.3 Site URL: https://cebesten.com Home URL: https://cebesten.com WP Multisite: No Max Upload Size: 32 MB Memory limit: 256M Permalink Structure: /blog/%year%/%monthnum%/%postname%/ Language: en-CA Timezone: 0 Debug Mode: Inactive

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

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

== Active Plugins == Elementor Version: 3.2.0-beta2 Author: Elementor.com

Elementor Pro
    Version: 3.2.1
    Author: Elementor.com

Wordfence Security
    Version: 7.5.2
    Author: Wordfence

WP Cerber Security, Anti-spam & Malware Scan
    Version: 8.8.5
    Author: Cerber Tech Inc.

== Elementor - Compatibility Tag ==

Elementor Pro: incompatible

== Elementor Pro - Compatibility Tag ==

== Elements Usage ==

archive : 1
    archive-posts : 1
    divider : 1
    lae-portfolio : 1
    nav-menu : 1
    wp-widget-archives : 1
footer : 1
    form : 1
    jet-animated-text : 1
    text-editor : 1
header : 4
    image : 1
    lottie : 3
    nav-menu : 3
    social-icons : 3
    woocommerce-menu-cart : 1
    wp-widget-polylang : 3
page : 8
    eael-adv-accordion : 14
    heading : 18
    icon-box : 2
    image : 12
    image-carousel : 19
    lottie : 3
    nav-menu : 2
    spacer : 2
    table-of-contents : 1
    text-editor : 24
    video : 1
product : 0
    share-buttons : 1
    woocommerce-product-add-to-cart : 1
    woocommerce-product-content : 1
    woocommerce-product-images : 1
    woocommerce-product-meta : 1
    woocommerce-product-price : 1
    woocommerce-product-related : 1
    woocommerce-product-title : 2
section : 1
    lottie : 1
    nav-menu : 1
    social-icons : 1
    wp-widget-polylang : 1
wp-post : 3
    animated-headline : 2
    button : 4
    eael-adv-accordion : 25
    eael-filterable-gallery : 2
    heading : 23
    icon-box : 25
    image : 9
    image-carousel : 32
    image-gallery : 1
    jet-circle-progress : 6
    jet-image-comparison : 2
    jet-posts : 4
    jet-slider : 2
    lottie : 8
    media-carousel : 2
    nav-menu : 1
    slides : 2
    spacer : 3
    text-editor : 73
    video : 5
wp-page : 18
    animated-headline : 6
    button : 1
    eael-filterable-gallery : 1
    eicon-woocommerce : 1
    form : 2
    heading : 4
    htmega-customevent-addons : 3
    icon : 1
    jet-inline-svg : 1
    jet-slider : 1
    jet-smart-filters-checkboxes : 1
    jet-subscribe-form : 1
    lottie : 4
    pp-team-member-carousel : 1
    premium-lottie : 1
    social-icons : 2
    testimonial-carousel : 3
    text-editor : 16

== Log ==

Log: showing 20 of 422021-03-24 03:12:50 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Start
2021-03-24 03:12:50 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Finished 2021-03-24 03:12:50 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.1.4', 'to' => '3.2.0-beta1', )] 2021-03-24 03:12:52 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.1.4', 'to' => '3.2.0-beta1', )] 2021-03-24 03:12:53 [info] elementor::elementor_updater Started 2021-03-24 03:12:53 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Start
2021-03-24 03:12:53 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Finished 2021-03-24 03:12:53 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.1.4', 'to' => '3.2.0-beta1', )] 2021-03-24 03:13:08 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.2.0', 'to' => '3.2.1', )] 2021-03-24 03:13:16 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '3.2.0', 'to' => '3.2.1', )] 2021-04-08 02:49:18 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.2.0-beta1', 'to' => '3.2.0-beta2', )] 2021-04-08 02:49:31 [info] elementor::elementor_updater Started 2021-04-08 02:49:32 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Start
2021-04-08 02:49:32 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Finished 2021-04-08 02:49:32 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.2.0-beta1', 'to' => '3.2.0-beta2', )] 2021-04-08 02:49:33 [info] Elementor data updater process has been queued. [array ( 'plugin' => 'Elementor', 'from' => '3.2.0-beta1', 'to' => '3.2.0-beta2', )] 2021-04-08 02:49:38 [info] elementor::elementor_updater Started 2021-04-08 02:49:38 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Start
2021-04-08 02:49:39 [info] Elementor/Upgrades - _v_3_2_0_migrate_breakpoints_to_new_system Finished 2021-04-08 02:49:39 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '3.2.0-beta1', 'to' => '3.2.0-beta2', )]

PHP: showing 1 of 1PHP: 2021-04-08 02:45:00 [notice X 1][/home4/lmestudi/cebesten.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php::171] Undefined index: data [array ( 'trace' => '

0: Elementor\Core\Logger\Manager -> shutdown()

', )]

d19dotca commented 3 years ago

I see a similar behaviour to what @cebesten just posted about, but slightly different. This was not the case on beta 1, so this seems like a new bug introduced in beta 2. Tested in Safari on macOS Big Sur.

In my environment, these are the reproduction steps:

  1. Edit a page in Elementor
  2. Use the Command+Shift+M keyboard combination
  3. This is where the issue is seen, as it moves to a excessively small window in "tablet" mode and then stays the same in "mobile" mode, meaning to get back to "Desktop" you have to use the Command+Shift+M keyboard combo three times.

What makes it differ a little bit in my case from @cebesten's case though is that for me it's only an issue when using Command+Shift+M. When I use the Responsive Mode button, it actually all works as expected.

Videos attached showing the behaviour:

elasticeye commented 3 years ago

Why not also have the ability to use MASK on background images in a section/column as well? If you have a big hero image as section background, it would be great to apply MASKING to that as well.

shilo-ey commented 3 years ago

Regarding deprecations - I am using this code in my plugins frontend.js to trigger the widget on elementor hooks -

elementor.channels.data.on( 'element:after:duplicate element:after:remove', function( e, arg ) { $( '.elementor-widget-slider' ).each( function() { SliderWidgetHandler( $( this ), $ ); } ); } );

I can see you have deprecated - elementor.channels.data -> element:after:remove and replaced with $e.events -> After -> 'document/elements/delete'. How can I use this in my above code?

@sushmak02

You need to add two of this: 

class SliderWidgetHandler extends $e.modules.hookUI.After {
   getCommand() {
      return 'document/elements/delete';
   }
   getId() {
      return '<your-plugin-or-theme-name-and-context>slider-widget-handler';
   }
   apply() {
      // Your code
   }
}
$e.hooks.registerUIAfter( new SliderWidgetHandler() );

one for delete and the other for duplicate: document/elements/duplicate

You can follow our deprecations here: https://developers.elementor.com/v3-2-planned-deprecations/

Lightbox issue - very easy - ensure conditional loading experiment is on, start a new page, add a gallery, pop some images into it, save it, view it, click on images in the gallery, no lightbox, but javascript errors about not being able to find a lightbox object, go to settings, disable the conditional loading experiment, go back to gallery test page, reload it, click on images in the gallery, we now have a lightbox appearing - conclusion conditional loading experiment is the cause

@DavidGMiles Do you have any other plugins active?

I see a similar behaviour to what @cebesten just posted about, but slightly different. This was not the case on beta 1, so this seems like a new bug introduced in beta 2. Tested in Safari on macOS Big Sur.

In my environment, these are the reproduction steps:

  1. Edit a page in Elementor
  2. Use the Command+Shift+M keyboard combination
  3. This is where the issue is seen, as it moves to a excessively small window in "tablet" mode and then stays the same in "mobile" mode, meaning to get back to "Desktop" you have to use the Command+Shift+M keyboard combo three times.

What makes it differ a little bit in my case from @cebesten's case though is that for me it's only an issue when using Command+Shift+M. When I use the Responsive Mode button, it actually all works as expected.

Videos attached showing the behaviour:

@d19dotca thanks, will resolve the issue.

@cebesten I couldn't reproduce your issue, it seems like you have JS errors. can you share what are they? have you tried to disable all other plugins to check if you have a conflict?

Why not also have the ability to use MASK on background images in a section/column as well? If you have a big hero image as section background, it would be great to apply MASKING to that as well.

@elasticeye actually we are examining this option.

thanks again, everyone!

DavidGMiles commented 3 years ago

@shilo-ey only ACF which I use for loading the gallery

shilo-ey commented 3 years ago

@DavidGMiles are you using dynamic content in your gallery? do you use Gallery (Pro) or Basic Gallery (Core) widget?

DavidGMiles commented 3 years ago

yes - but i can get it to happen with static too - pro widget

shilo-ey commented 3 years ago

@DavidGMiles Thanks. do you have a link to your site? - it just not reproduces on our end.

DavidGMiles commented 3 years ago

The stripped out site is on my localhost sorry - I have a dev site which it happens on too - this is not stripped back though - if you want to see that I am happy to share via private message

On 8 Apr 2021, at 1:43 pm, shilo-ey @.***> wrote:

@DavidGMiles https://github.com/DavidGMiles Thanks. do you have a link to your site? - it just not reproduces on our end.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/elementor/elementor/issues/14313#issuecomment-815781668, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE6PZSIJEXGTUMCQYBTB7BTTHWQF7ANCNFSM4ZRUOLTQ.

fabigrafo commented 3 years ago

Say Hello To Gradient Button: Create Beautiful Buttons In A Click

Gradient-B

Gradient Button in Elementor has been a long-anticipated feature and we are happy to say your wait is finally over! Say Hello to our new Gradient Button capability in Button widget and Bye-Bye to other plugins or workarounds. Now, you’ll be able to use custom or Global colors in your buttons and add depth to your button designs. Create the button designs you want for your websites.

@shilo-ey Did you happen to forget to add this gradient option to the Settings button in the Site Settings?

Bildschirmfoto 2021-04-08 um 15 01 22
parfilov commented 3 years ago

Why are you turn on the smartphone on turning on responsive mode? What if I want to optimize tablets first to inherit some styles to mobile?

DavidGMiles commented 3 years ago

This is a really good point - it’s really annoying the way it is

On 8 Apr 2021, at 3:40 pm, Alexander @.***> wrote:

Why are you turn on the smartphone on turning on responsive mode? What if I want to optimize tablets first to inherit some styles to mobile?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/elementor/elementor/issues/14313#issuecomment-815879066, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE6PZSKAXXHIFDDYGD7WD33THW55TANCNFSM4ZRUOLTQ.

fabigrafo commented 3 years ago

Why are you turn on the smartphone on turning on responsive mode? What if I want to optimize tablets first to inherit some styles to mobile?

The best thing to do is to stay on the desktop and then decide for yourself what you want to do. But I've said that several times. 👀

parfilov commented 3 years ago

And responsive layouts icons are still tooo smaaal. It's hard to click them fast. There are o lot of space at the top bar. Make em a little bigger and make some more gap please. ScreenShot 08-04-2021- at 16-45-14@2x

parfilov commented 3 years ago

Why are you turn on the smartphone on turning on responsive mode? What if I want to optimize tablets first to inherit some styles to mobile?

The best thing to do is to stay on the desktop and then decide for yourself what you want to do. But I've said that several times. 👀

That's good solution too. As it was done on previous beta release.

JoeHana commented 3 years ago

ISSUE So it seems like there are major issues with the navigator panel - not sure if nobody else has noticed it or if it only affects me? But switching responsive modes causes the sidepanels to act weirdly:

SUGGESTION In regards to the responsive switcher bar I'd like to suggest the following:

While I understand the reasons of having a "visual noticable change" for the user, you also have to think about that even beginners will work a lot with Elementor - and the more someone actually works with it the more it actually gets annoying and even frustrating to activate the responsive bar knowing it will directly switch to the mobile version, forcing you to move your mouse across the whole screen to click on more time to first go back to the desktop mode or maybe the tablet mode.

Another problem I see is that this actually can become even very confusing. You have to consider that the current workflow is still Desktop -> Tablet -> Mobile. When you set padding for an element in the desktop mode it will inherit the value down to the mobile version. This is something which is not very clear for everyone. So working in the desktop mode, adding some padding to an element, enabling the responsive bar and automatically switch to the mobile version will most likely result that the padding will get adjusted by the user. However, the actual confusion will start when the user switches in the tablet mode not understanding from where the padding now got inherited - from the mobile or from the desktop version. Considering the responsive bar now shows Mobile -> Tablet -> Desktop the user will most likely think it got inherited by the mobile version which is actually not true. I know, this is just a very small detail but it has quite an impact in the daily regular work with Elementor.

cebesten commented 3 years ago

Regarding deprecations - I am using this code in my plugins frontend.js to trigger the widget on elementor hooks - elementor.channels.data.on( 'element:after:duplicate element:after:remove', function( e, arg ) { $( '.elementor-widget-slider' ).each( function() { SliderWidgetHandler( $( this ), $ ); } ); } ); I can see you have deprecated - elementor.channels.data -> element:after:remove and replaced with $e.events -> After -> 'document/elements/delete'. How can I use this in my above code?

@sushmak02

You need to add two of this:

class SliderWidgetHandler extends $e.modules.hookUI.After {
   getCommand() {
      return 'document/elements/delete';
   }
   getId() {
      return '<your-plugin-or-theme-name-and-context>slider-widget-handler';
   }
   apply() {
      // Your code
   }
}
$e.hooks.registerUIAfter( new SliderWidgetHandler() );

one for delete and the other for duplicate: document/elements/duplicate

You can follow our deprecations here: https://developers.elementor.com/v3-2-planned-deprecations/

Lightbox issue - very easy - ensure conditional loading experiment is on, start a new page, add a gallery, pop some images into it, save it, view it, click on images in the gallery, no lightbox, but javascript errors about not being able to find a lightbox object, go to settings, disable the conditional loading experiment, go back to gallery test page, reload it, click on images in the gallery, we now have a lightbox appearing - conclusion conditional loading experiment is the cause

@DavidGMiles Do you have any other plugins active?

I see a similar behaviour to what @cebesten just posted about, but slightly different. This was not the case on beta 1, so this seems like a new bug introduced in beta 2. Tested in Safari on macOS Big Sur. In my environment, these are the reproduction steps:

  1. Edit a page in Elementor
  2. Use the Command+Shift+M keyboard combination
  3. This is where the issue is seen, as it moves to a excessively small window in "tablet" mode and then stays the same in "mobile" mode, meaning to get back to "Desktop" you have to use the Command+Shift+M keyboard combo three times.

What makes it differ a little bit in my case from @cebesten's case though is that for me it's only an issue when using Command+Shift+M. When I use the Responsive Mode button, it actually all works as expected. Videos attached showing the behaviour:

@d19dotca thanks, will resolve the issue.

@cebesten I couldn't reproduce your issue, it seems like you have JS errors. can you share what are they? have you tried to disable all other plugins to check if you have a conflict?

Why not also have the ability to use MASK on background images in a section/column as well? If you have a big hero image as section background, it would be great to apply MASKING to that as well.

@elasticeye actually we are examining this option.

thanks again, everyone!

Hi @shilo-ey , as I explain in my post "I isolate elementor and elementor pro only as active plugins but still the same result."

this is the browser console error image

I was using opera so now I am using chrome and I had the same result: image

black-eye commented 3 years ago

SUGGESTION In regards to the responsive switcher bar I'd like to suggest the following:

  • Either keep - as others already mentioned - the desktop mode when activating the bar or
    • Apply the same ux as with the navigator panel where it simply "remembers" the last state. That being said the last state is NOT the mode which has been enabled last, but only if the bar is visible or not.
    • Further, I'd like to add my voice for the suggestion of having the bar at the bottom. Not only because of the distance, but also because in times where sticky header or other sticky elements are common, it is just better to keep the top area as free as possible.

While I understand the reasons of having a "visual noticable change" for the user, you also have to think about that even beginners will work a lot with Elementor - and the more someone actually works with it the more it actually gets annoying and even frustrating to activate the responsive bar knowing it will directly switch to the mobile version, forcing you to move your mouse across the whole screen to click on more time to first go back to the desktop mode or maybe the tablet mode.

Another problem I see is that this actually can become even very confusing. You have to consider that the current workflow is still Desktop -> Tablet -> Mobile. When you set padding for an element in the desktop mode it will inherit the value down to the mobile version. This is something which is not very clear for everyone. So working in the desktop mode, adding some padding to an element, enabling the responsive bar and automatically switch to the mobile version will most likely result that the padding will get adjusted by the user. However, the actual confusion will start when the user switches in the tablet mode not understanding from where the padding now got inherited - from the mobile or from the desktop version. Considering the responsive bar now shows Mobile -> Tablet -> Desktop the user will most likely think it got inherited by the mobile version which is actually not true. I know, this is just a very small detail but it has quite an impact in the daily regular work with Elementor.

Very well thought out and explained. Expecially the parts about "visually noticable change" and "Desktop -> Tablet -> Mobile workflow". I hope feedback like this can convince the developers to reconsider some of their decisions. That's why this beta thread is here for anyway, right?

fabigrafo commented 3 years ago

SUGGESTION In regards to the responsive switcher bar I'd like to suggest the following:

  • Either keep - as others already mentioned - the desktop mode when activating the bar or
  • Apply the same ux as with the navigator panel where it simply "remembers" the last state. That being said the last state is NOT the mode which has been enabled last, but only if the bar is visible or not.
  • Further, I'd like to add my voice for the suggestion of having the bar at the bottom. Not only because of the distance, but also because in times where sticky header or other sticky elements are common, it is just better to keep the top area as free as possible.

While I understand the reasons of having a "visual noticable change" for the user, you also have to think about that even beginners will work a lot with Elementor - and the more someone actually works with it the more it actually gets annoying and even frustrating to activate the responsive bar knowing it will directly switch to the mobile version, forcing you to move your mouse across the whole screen to click on more time to first go back to the desktop mode or maybe the tablet mode. Another problem I see is that this actually can become even very confusing. You have to consider that the current workflow is still Desktop -> Tablet -> Mobile. When you set padding for an element in the desktop mode it will inherit the value down to the mobile version. This is something which is not very clear for everyone. So working in the desktop mode, adding some padding to an element, enabling the responsive bar and automatically switch to the mobile version will most likely result that the padding will get adjusted by the user. However, the actual confusion will start when the user switches in the tablet mode not understanding from where the padding now got inherited - from the mobile or from the desktop version. Considering the responsive bar now shows Mobile -> Tablet -> Desktop the user will most likely think it got inherited by the mobile version which is actually not true. I know, this is just a very small detail but it has quite an impact in the daily regular work with Elementor.

Very well thought out and explained. Expecially the parts about "visually noticable change" and "Desktop -> Tablet -> Mobile workflow". I hope feedback like this can convince the developers to reconsider some of their decisions. That's why this beta thread is here anyway, right?

I hope a beta phase is for that reason. Unfortunately, sometimes I don't feel that most of these users here from Elementor are not being heard. @shilo-ey listen to your active (beta) community. 😉