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 v2.9 Beta 5 (RC3) Release 📣 #10323

Closed shilo-ey closed 4 years ago

shilo-ey commented 4 years ago

===========

Beta 5 UPDATED - PLEASE READ BELOW!

===========

Hi Elementor Beta testers,

We׳re getting ready to release Elementor v2.9 and we would like to ask you to help us test Elementor v2.9 Beta, with 3 exciting features and improvements:

Before you test, please make sure you are using:

Introducing Theme Style: Design Your Site Globally (#534)

theme2

The moment so many of you have been waiting for is finally here.

The first stage of global styling has now been released in version 2.9, and it brings a whole new set of benefits that we believe will substantially improve the workflow of anyone building and designing websites.

Introducing Theme Style. Implementing your design system is now within reach!

How It Works

When you install any WordPress theme, it creates a layer of design styles and rules. This means that any new element you introduce to your site may inherit those style settings.

This posed a challenge for WordPress users, since switching themes often caused the site’s design to change as well (and not in the good ‘makeover’ way).

The new Theme Style we created eliminates this challenge, by taking over the global design layer previously handled by the theme.

The First Stage of ‘THEMELESS’ Global Design

Theme Style is a new menu that appears when you click on the menu icon in the top left of the panel. It includes settings that allow you to control your entire site design globally.

Set a certain style under Theme Style, and the change will apply across your website. In fact, any new element you add to your site will get that style by default.

What Used to Be Done in Customizer or with Code, Now Is Handled in Elementor!

If you are a Hello Theme user, from time to time you might get frustrated when trying to customize your non-elementor site’s design. With Theme Style, you can set default styling for images, forms, buttons, headings, and other elements.

If before, you had to go into the code in order to set your site’s box shadow style for images, now this is no longer necessary. Simply set it once in Elementor under Theme Style, and it will affect all the images instantly.

Same goes for the look and feel of your form fields, headings, text, background and buttons. Theme Styles are modular, meaning only the settings you change are affected, and the rest of your site’s styles remain the same.

Made a change and it wasn’t to your taste? No problemo! Theme Style works with the Revisions and History controls, so you can undo / redo any changes, and can always revert back to an earlier version of your site design.

Theme Style also works with Draft and Publish modes, so you can test the changes and save them to draft, without having them affect your live site. Only when you are ready to publish will they come into play.

Test Flow:

  1. Create a new page using Elementor
  2. Drag into the newly created page the following elements & widgets:
    • Heading widgets - and set them to act as H1, H2, H3, H4, H5 & H6
    • Button widget x2
    • Image widget x2
    • Form widget (if Elementor Pro is active)
    • Non-Elementor Form (any 3rd party plugin or custom code)
    • Text Editor widget and place some mock text to it
    • Text Editor widget and fill in some links to it
    • HTML widget and fill in some HTML elements (or use pre-made ones to shorten your process)
  3. Publish your newly created page and go to Elementor panel menu
  4. Click on “Theme Style” and access to those settings
  5. Make sure your panel header and update button are now blue
  6. Change settings for all of the elements you provided above and make sure the changes take effect just as you wanted
  7. Note: some elements won’t get affected because elementor doesn’t allow editing them (e.g fieldset, input[type=”reset”] and more)
  8. Update the changes you made to your Theme Style and go back to your Elementor widgets panel
  9. Drag in some more widgets who uses HTML elements you edited
  10. Edit their styling individually and make sure the latter settings override the default ones
  11. Make sure everything works as expected on Frontend and on Preview mode

Revamped Lightbox: Show your Images, Videos & Galleries with New and Improved Capabilities (#9826, #2502, #5260, #9399, #9370)

Revamped lightbox

It’s expected for Theme Style to take the spotlight of this release, but the changes we have made to our Lightbox are definitely worth your attention. We are introducing several new capabilities to image and video lightboxes, so you can showcase your media in a much better way than before.

Lightbox Title & Description

This functionality is great for many use cases, for instance, when creating your portfolio. Add an informative title and description (or any other image attribute such as Alt or Caption) to your images, so visitors get a better idea about the message of each image.

Lightbox Zoom

The new version offers zoom capabilities for image lightboxes. Once you zoom into an image, you’ll be able to pan the view and scroll across the different areas of the image.

Lightbox Share

We added share capabilities that appear in the lightbox window. The user can choose to share the image on Twitter or download it to the computer.

Lightbox Full Screen

Open image and video lightbox and display it in full-screen mode, without the distraction of the browser window.

Responsive Lightbox for Mobile

All the functionality we mentioned works on mobile. Visitors can zoom, open images and videos in full screen, and share the images from their phones.

Test Flow:

  1. Create a new page and drag in Basic Gallery, Image and Image Carousel widgets
  2. Insert images and fill in some meta attributes to all of the above widgets (description, title, alt)
  3. Set the Link control to be “Media File” on those widgets
  4. Click on one of the images and see the new lightbox appearance
  5. Make sure everything works as expected in all breakpoints and devices: Zoom, Share, Full Screen (won’t work in iOS Safari), Title & Description
  6. Go to Elementor panel menu and click on Global Settings > Lightbox tab
  7. Edit the settings and click “Update”
  8. Make sure everything works as expected on Frontend
  9. Go back to the Lightbox settings tab and change the Title & Description origin to Alt and Caption and see the changes on frontend
  10. Open your page on mobile / tablet device and make sure everything works as expected

Custom Link Attributes: Add HTML attributes directly to your <a> tags (#5716, #3642, #9225, #9079)

customatt (1)

Custom Link Attributes has always been a requested enhancement to Elementor Link control. With it, you can add various properties to your site links and extend the capabilities of Elementor even more than before.

Want to allow your visitors to download PDF files on a single button click? Implement relations SEO properties (noopener, noreferrer...)? Maybe utilize Google’s new attribution for sponsored links and user-generated content? (rel=”sponsored” and rel=”ugc” released by Google this past September)

To allow you to do so, we added Custom Link Attributes to Elementor’s Link Options, so you can insert your custom HTML link attributes to your <a> elements and display them to your site visitors.

Please note that you won’t be able to add JS-based attributes (like onclick) to your links due to security reasons.

Test Flow:

  1. Create a new page and drag in Heading and Button widgets
  2. Select the Heading widget and place PDF file URL in the Link control
  3. Click on the Link Options cog icon and see the new Custom Link Attributes field added
  4. Add download|true to this field and see that the HTML markup changed to download=”true”
  5. Go to the Button widget and set some external URL to it
  6. Under Link Options > Custom Link Attributes add rel|noopener,rel|sponsored
  7. Go to Frontend and make sure everything works as expected with the updated parameters

More Consistent Panel UI:

Speaking of consistency in designing your website, in v2.9.0 we added an improved style guide to our Editor Panel UI, so all of the controls now have consistent colors, dimensions, and positioning controls, based on base units we added. These changes allow us to display various Elementor options and capabilities (like Dynamic Tags) better.

Test Flow:

  1. Create a new page and Edit it with Elementor
  2. Drag in some widgets and play around with the different refactored controls
  3. Make sure all of your panel elements and controls are with the correct colors, position and dimensions

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

Designated time for release: February 11, 2020 (Estimated) Many thanks for your support and help!

Cheers, Elementor Team

robhaskin commented 4 years ago

Just installed the beta and my site went down. I turned off all of my plugins - then turned them on one by one until I found the culprit. I am using MEC (Modern Events Calendar) and they have an additional plugin called "Elementor Shortcode Builder for MEC". This plugin is causing a conflict with the Beta.

Screenshot 2020-01-28 11 05 43 Screenshot 2020-01-28 11 05 53
rodolphebertozzo commented 4 years ago

It's a very good job ! One bug for the moment, the share button does not work in the lightbox

haemeulrich commented 4 years ago

Kit Settings: 1) Change "Status" from "Published" to "Disabled (Draft)" 2) How to save this change? Click on "Update" at the bottom of the panel publishes the kit again…

The only way I found is to close the panel without saving – in my opinion a little confusing.

Thanks for your great work – we are really Elementor Geeks :-)

Worldwebscapes commented 4 years ago

Column Padding On Editor Side **Fixed in Beta 2 Columns are not displaying padding on the editing side but the padding is applied to the published side. image

Lightbox Not Showing Titles/Descriptions From Dynamic Option **Lightbox Sharing fixed in Beta 2 Lightbox Title and Description not showing. Filled out in the media library. Also, the sharing button does not seem to share. image Titles and settings are enabled and should be white on the pink. image

Menu Cart Overlay. **Still occurring in Beta 2 but not really a bad thing. I activated Woo after testing the column issue with no plugins and found this one. Not sure whether it is intentional but the lightbox overlay setting also applies to the menu cart overlay. Not such a bad thing but might throw off a few. image

== Server Environment == Operating System: Linux Software: Apache MySQL version: MariaDB Server v10.3.21 PHP Version: 7.3.13 PHP Max Input Vars: 1000 PHP Max Post Size: 1024M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected

== WordPress Environment == Version: 5.3.2 Site URL: *** Home URL: ** WP Multisite: No Max Upload Size: 1,000 MB Memory limit: 512M Permalink Structure: /%postname%/ Language: en-US Timezone: 0 Debug Mode: Inactive

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

== User == Role: administrator WP Profile lang: en_US User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

== Active Plugins == Elementor Version: 2.9.0-beta1 Author: Elementor.com

Elementor Pro
    Version: 2.8.3
    Author: Elementor.com

== Must-Use Plugins == installatron_hide_status_test.php Version: Author:

devyns commented 4 years ago

Hello,

Great Work!

Would it be possible to add support for TIFF images in the Lightbox as when I click on the .TIFF images it opens in the directory rather than opening in the Lightbox.

mbenady commented 4 years ago

Lightbox is not working properly. The picture do not appear. If I switch to dynamic lightbox it does but without the new controllers and meta. Local host, hello, Chrome 79.0.3945.130 image

sideshowlol commented 4 years ago

Thank you for delivering the 2.9 update. Really awesome to see the Theme Style introduced!

Like a previous commentor, one issue I am finding is that padding for columns is not displaying in the back-end Elementor editor but it is showing correctly on the front end.

black-eye commented 4 years ago

So far I've tested:

Lightbox: On my test site the lightbox works for like 30%. 😞

  1. So far, lightbox is working only for Elementor Gallery. It's not working for a single image, nor native WP gallery. For these it shows just the empty overlay (as showed by @mbenady). See the example page I've made for you: https://www.blackeye.cz/report/gallery-test/
  2. Nor Title, nor description are shown, although they are filled in (see the E Gallery from the link above). Lightbox settings: obrazek
  3. Share button is not sharing, instead you'll get JS error: Uncaught ReferenceError: ShareLink is not defined
  4. For some reason the image in lightbox is not the full size, as you would expect, but only 1024px (my settings for Large). Full size is 1920px. obrazek.
  5. Zoom button zooms too much, far beyond the native image size, so the image gets ugly. I would expect it to zoom max to 100%.
  6. I'd like to have an opton to disable infinite scrolling (stop on the first/last image).
  7. One of the issues with the old box were big paddings (and thus small images). Now they're set to 70px, still quite a lot. It'd be nice to be able to set them manually as well.
  8. I don't like the size of the clicking areas of the prev/next arrows - they're too big for my taste. I'm used to click below the image to close the lightbox. Now I'm tending to click to the region of the next button, and instead of closing the lighbox I'll get another image. It would be better to limit the button area to image height.
  9. There used to be an option for disabling the lightbox in the editor. Now it's gone and I'm mising it so bad already. obrazek

New UI So far I've just notices that the inputs for numbers are too small. See these style settings, for example: obrazek or obrazek

OK, that's all I've tested so far... :-)

black-eye commented 4 years ago

Oh, and there's a conflict with the brand new RankMath, as reported here: https://github.com/elementor/elementor/issues/10319. Yeah, something which could be resolved probably only by RankMath themselves, but just to let you know.

black-eye commented 4 years ago

Update to my Lightbox analysis. 😄

Funny fact: so far the best experience gives old Elementor Basic Gallery (https://www.blackeye.cz/report/gallery-test/ updated):

  1. It shows full images, instead of large ones.
  2. It shows both titles and descriptions.

Still downsides:

  1. Titles inherit color and font from H2 of my theme and cannot be overriden even in Lightbox settings:

obrazek obrazek

  1. In some situations where the swiper-slide elementor-lightbox-item fills in the whole height of the screen, I'm unable to close the lightbox by clicking outside the image (because I'm technically inside the image area including the padding). So instead of closing the lightbox (by clicking above or below the image), I'm zooming now. Bad UX IMHO.
Worldwebscapes commented 4 years ago

Confirmed on black-eye number inputs are too small with the dynamic icon in the same window.

See Z-Index. image

Kishorchandth commented 4 years ago

Some issue i found when i was testing

  1. Lightbox is not working : it is not displaying images Lightbox

  2. Share button is not sharing Bug

  3. UI is tiny UI is small

  4. Request: it is really hard to find the beta release link unless i dig deeper. When elementor release new update please add a link near the plugin description (only available for beta user) Beta link

parfilov commented 4 years ago

Hello theme (Astra too). Form field background doesn't work.

parfilov commented 4 years ago

How about reset Theme style option?

eastriverstudio commented 4 years ago

Thanks Elementor team, global styling options are a welcome addition and potential solution to a problem I've run into many times using Hello theme.

I've only done some light testing, but so far I've noticed that if I set global button styles they don't apply to any WooCommerce related buttons. If I'm setting this as the global default I'd expect all buttons including WooCommerce to take on that styling, unless there's a valid reason for that?

FYI I also checked the related product widget's button styling to ensure it wasn't being overridden there but all values were empty so this is the Woo default styling:

Screenshot 2020-01-29 at 15 13 00

Screenshot 2020-01-29 at 15 13 18

parfilov commented 4 years ago

I see nothing in the Lightbox. All plugins besides Elementor + Pro are disabled. Hello Elementor. Browser Cache clean. Chrome the last.

lightbox

eastriverstudio commented 4 years ago

Also I'm seeing the same issue reported by @Worldwebscapes earlier where padding is not displaying correctly on columns in the editor view but is correct when previewing or viewing page on the front-end.

parfilov commented 4 years ago

"Tweak: Added dynamic capabilities to Title control in Toggle widget (#10070)" I see the Toggle content only, not Title.

shilo-ey commented 4 years ago

We just released a new beta version, please update your version to v2.9 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.

simonemontrucchio commented 4 years ago

I think that on new websites the Theme Style feature is great!

My question though is about websites already live: is there a feature that will clear style applied page by page so that website ccs will be lighter?

I mean, many times I set the style for the h1 in one page and than copied pasted the Elementor content, so I don't have a global h1 style but a style for each page (even though they are the same).

How do you think to help non coders to use Theme Style and clear their old css set in each page?

Thanks

Imalexlucas commented 4 years ago

Once you set the fonts defaults for headings you can not change anything in the heading module. Screenshot at Jan 29 12-31-50

black-eye commented 4 years ago

In beta 2 I can confirm:

  1. Sigle image is displaying in the lightbox, including the titles and descriptions.
  2. Share button seems to work now (but haven't tried to really share the picture).

All the other problems are still there (including no title and description for Pro Gallery) - see https://www.blackeye.cz/report/gallery-test/.

For WP native gallery the images are shown, but only as separated images, not as complete gallery.

Additional observations:

  1. Position of the arrows - what's the point of having such big paddings, if the arrows are still over the picture?

obrazek

  1. It would be nice if I could make the page underneath the lightbox fixed (disable scrolling of the page while in lightbox).
Micemade commented 4 years ago

Hi, I just wanted to remind you on this issue: https://github.com/elementor/elementor/issues/6778 ... Any chance to solve this? Thanks

black-eye commented 4 years ago

@shilo-ey

Tweak: Exposed external API for Swiper instances

I'm highly interested what does this mean, is there any additional info for it?

shilo-ey commented 4 years ago

@black-eye we will soon release a dev blog post for this option :)

sideshowlol commented 4 years ago

Thanks for a speedy update, guys. Padding is now correctly displaying again in the back-end editor view for me. You rock!

pingram3541 commented 4 years ago

Like the "link/anchor" attributes addition, will we be able to do this for other selector types in the near future too?

For example, images, videos and iframes, such as the new but not yet part of core loading="lazy" and for video preload="none"? It would be great if I could easily add these types of atts to my images, galleries, post featured images, slider images and/or videos etc. without having to rely on the back end API to filter $content and use complex regex since the $widget->get_settings is protected read-only. Thx

rodolphebertozzo commented 4 years ago

• The caption does not work for the lightbox when it comes to the image widget. • Sharing still doesn't work in the lightbox • Customize the lightbox share buttons • There is no possibility to customize the caption color in the lightbox

Bovelett commented 4 years ago

1. Changing text color has no effect on text editor blocks

Changing the color of text in text editor blocks has no effect. I've created a screencast so you can see it live. https://beta.geekonheels.dev/wp-content/uploads/2020/01/Elementor-2-9-beta2-text-style.mp4 (32 MB).

2. Changing site background color while in header or footer template throws error 500

By coincidence I decided to change the site background color while I was editing my header. Upon saving it threw a 500 error. I was able to reproduce this over and over again. The error log from my server is attached. Here's the screencast so you can see the steps taken: https://beta.geekonheels.dev/wp-content/uploads/2020/01/Elementor-2-9-beta2-change-background-from-header.mp4

My system info:

== Server Environment == Operating System: Linux Software: Apache MySQL version: MariaDB Server v5.6.44-86.0 PHP Version: 7.4.1 PHP Max Input Vars: 1000 PHP Max Post Size: 512M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected

== WordPress Environment == Version: 5.3.2 Site URL: https://beta.geekonheels.dev Home URL: https://beta.geekonheels.dev WP Multisite: No Max Upload Size: 256 MB Memory limit: 1024M Permalink Structure: /%year%/%monthnum%/%day%/%postname%/ Language: en-US Timezone: 0 Debug Mode: Inactive

== Theme == Name: Hello Elementor Child Version: 1.0.0 Author: Elementor Team Child Theme: Yes Parent Theme Name: Hello Elementor Parent Theme Version: 2.2.2 Parent Theme Author: Elementor Team

== User == Role: administrator WP Profile lang: en_US User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

== Active Plugins == Classic Editor Version: 1.5 Author: WordPress Contributors

Elementor
    Version: 2.9.0-beta2
    Author: Elementor.com

Elementor Pro
    Version: 2.8.3
    Author: Elementor.com

== Elements Usage ==

footer : 2
    text-editor : 1
header : 2
    image : 1
    nav-menu : 1
page : 1
    button : 2
    divider : 4
    form : 1
    heading : 6
    html : 1
    image : 2
    text-editor : 2
wp-page : 1
    button : 2
    divider : 4
    form : 1
    heading : 6
    html : 1
    image : 2
    text-editor : 2

== Log ==

Log: showing 3 of 32020-01-28 15:22:37 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.8.4', 'to' => '2.8.5', )] 2020-01-28 15:26:57 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.8.5', 'to' => '2.9.0-beta1', )] 2020-01-29 17:43:12 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.9.0-beta1', 'to' => '2.9.0-beta2', )]

PHP: showing 2 of 2PHP: 2020-01-29 19:04:23 [error X 13][/home/geekdev/beta.geekonheels.dev/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::259] Uncaught Error: Call to a member function update_meta() on null in /home/geekdev/beta.geekonheels.dev/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php:259 Stack trace:

0 /home/geekdev/beta.geekonheels.dev/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php(180): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(12, Array)

1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module))

2 /home/geekdev/beta.geekonheels.dev/wp-content/plugins/elementor/core/common/modules/ajax/module.php(171): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module))

3 /home/geekdev/beta.geekonheels.dev/wp-includes/class-wp-hook.php(288): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('')

4 /home/geekdev/beta.geekonheels.dev/wp-includes/class-wp-hook.php(312): WP_Hook->apply_f [array (

'trace' => '

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

', )] PHP: 2020-01-29 21:16:44 [notice X 1][/home/geekdev/beta.geekonheels.dev/wp-content/plugins/elementor/core/common/modules/ajax/module.php::171] Undefined index: data [array ( 'trace' => '

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

', )]

ERROR LOG FROM SERVER IS ATTACHED

error_log_anne_bovelett.txt

sermalefico commented 4 years ago

ADD / ECLUDE classes or IDs

It would be nice if you could exclude or add classes and custom ids in the theme styles panel. Elementor overwrites scripting styles and html components that I don't want to handle and it is better not to add additional CSS codes using -! important - in my style sheet or customizer.

would it be possible?

sermalefico commented 4 years ago

Error in wordpress backend with Beta 2

Last wordpress and Elementor free only activated. Can se in Plugins section /wp-admin/plugins.php

[DOM] Found 2 elements with non-unique id #_wpnonce: (index):1 (More info: https://goo.gl/9p2vKq)

This cause problems conflict with other plugins that use forms or imput selectors in Frontend and backend. Example in frontend with 1 plugin activated (example: Ajax search Lyte in shortcode): [DOM] Found 2 elements with non-unique id #set_inpages1: (More info: https://goo.gl/9p2vKq)

maxwellhibbert commented 4 years ago

Need global defaults for padding!

Jordidriesen commented 4 years ago

Is there an option to change the share links in the new lightbox system? I'm working with photopgraphers who despise the option to download it via share settings, since it makes it easier to unrightfully obtain photo's.

PremiumCoding commented 4 years ago

Is possible to add custom settings to Theme settings? Great work!

Maybe stupid questions, but how do we access these settings via PHP?

godvsgodvs commented 4 years ago

Hello Elementor Theme, Theme Style-Text-Color doesn't work. It is over-ridden by: .elementor-widget-text-editor { color: #555555; } in /wp-content/uploads/elementor/css/global.css

eastriverstudio commented 4 years ago

Based on some more testing I'd agree with @maxwellhibbert that global defaults for padding / spacing should be an option in the theme styling for it to be truly useful in creating and implementing a consistent design system. These could then be adjusted on a per widget basis as needed but would allow better global control over the defaults.

Also I'm finding having to set the font-family for each heading tag is a little tedious (unless I'm missing something?). It would be nice if we could have a global option to set the font-family for all headings and then go in and invidually tweak them on a per tag option as you have it now.

For my exprience I often use the same font-family for all headings to keep things consistent so would be nice to set it once.

godvsgodvs commented 4 years ago

Agree with above on H tags. Page Builder Framework Pro does this very well. All H tags follow H1 except for size unless they are individually changed. Works great.

jvorld commented 4 years ago

In Theme Style it would be great to set Paragraph Spacing also in REM and EM, instead of VW and VH.

tomas-eklund commented 4 years ago

Bug report

If you open Theme Style while editing a page, the Preview Changes button/icon will take you to a blank, nonsense preview page. Example URL:

http://localhost/?elementor_library=default-kit&preview_id=12&preview_nonce=825bc645f3&preview=true

tomas-eklund commented 4 years ago

Maybe a bug? CSS specificity

I'm building a completely fresh new page. The only plugins are Elementor 2.9.0-beta2, Elementor Pro 2.8.3, Safe SVG 1.9.8 and TinyMCE Advanced 5.3.0. The theme is Hello Elementor 2.2.2 with the Hello Elementor Child theme, which is slightly modified in order to add a switch to hide the page title globally.

Using Theme Style I have changed the default typography to Times New Roman with red color. But it doesn't apply. The style is added but is overridden by the following rule in global.css.

.elementor-widget-text-editor {
    color: #200600;
    font-family: "Roboto", Sans-serif;
    font-weight: 400;
}

Maybe I've missed something?

image

godvsgodvs commented 4 years ago

tomas-eklund, I already mentioned about the color being over-ridden but I had no problem with font-family or weight. I'm also using Hello theme. Odd.

ajm62 commented 4 years ago

Downloaded the new Beta 2.9 Elementor and had problems with the links on my pages. When I hover over them they would enlarge to 4 times what it is supposed to be. I thought it might be a plugin issue. Turn out, when I roll back the Beta Elementor it works fine now. Just a heads up.

tomas-eklund commented 4 years ago

Apparently, you need to "Disable Default Colors" and "Disable Default Fonts" for the Theme Style feature to work. Maybe it's by design, but I would argue that it is confusing. The mental model that I formed was that Theme Style was acting upon and changing just those Elementor defaults.

image

Now, there is no .elementor-widget-text-editorrule applied on my text editor block and the font family and text color is applied. In fact, it seems that the global.css file isn't loaded at all.

image

When experimenting with this, make sure you use the Internal Embedding CSS Print Method, or that you Regenerate the CSS files when you make a change. Otherwise cahcing issues will get you.

image

image

tomas-eklund commented 4 years ago

In Theme Style if you set Link > Typography > Hover > Decoration to Underline then your buttons will also be underlined on hover (which is unwanted). I can't find a way to override this globally for buttons using the theme styler, as the typography setting for buttons lies outside of the normal/hover toggle group. Specifying Buttons > Typography > Decoration = None does not help.

image

This is probably because the :hover selector on the more general a element has a higher specificity.

The more elegant solution would be to make it possible to specify typography on the normal/hover states of buttons. A more quick and dirty solution would be to add the :hover states to the button CSS selector generated by the theme styler:

body.elementor-kit-12 button, body.elementor-kit-12 button:hover, 
body.elementor-kit-12 input[type="button"], body.elementor-kit-12 input[type="button"]:hover,
body.elementor-kit-12 input[type="submit"], body.elementor-kit-12 input[type="submit"]:hover, 
body.elementor-kit-12 .elementor-button, body.elementor-kit-12 .elementor-button:hover {

Another annoyance (also illustrated in the above screen shot) is that if you go crazy designing your buttons, then the button on the Search widget will be styled similarly, which rarely looks great. Unfortunately the Search widget doesn't allow for much styling of the button so you can't really override it within Elementor.

shilo-ey commented 4 years ago

Thank you all for your - feedback. We are working on making sure everything will be resolved.

@black-eye

  1. For some reason the image in lightbox is not the full size, as you would expect, but only 1024px (my settings for Large). Full size is 1920px.

Can't reproduce, the image appears to be full dimensions. Which widget are you using?

  1. There used to be an option for disabling the lightbox in the editor. Now it's gone and I'm mising it so bad already.

It's in User Preferences since v2.8

New UI So far I've just notices that the inputs for numbers are too small. See these style settings, for example:

Thanks, we will check it

Funny fact: so far the best experience gives old Elementor Basic Gallery (https://www.blackeye.cz/report/gallery-test/ updated):

  1. It shows full images, instead of large ones.
  2. It shows both titles and descriptions.

In beta 2 all Core widgets support Title & Description, Pro support will release soon.

Still downsides:

  1. Titles inherit color and font from H2 of my theme and cannot be overriden even in Lightbox settings:

Thanks.

@parfilov commented on Jan 29, 2020, 5:09 PM GMT+2:

Hello theme (Astra too). Form field background doesn't work.

Does the issue occur in Beta 2?

@pingram3541 commented on Jan 29, 2020, 10:06 PM GMT+2:

Like the "link/anchor" attributes addition, will we be able to do this for other selector types in the near future too?

For example, images, videos and iframes, such as the new but not yet part of core loading="lazy" and for video preload="none"? It would be great if I could easily add these types of atts to my images, galleries, post featured images, slider images and/or videos etc. without having to rely on the back end API to filter $content and use complex regex since the $widget->get_settings is protected read-only. Thx

Please open a different Feature Request per feature, we will address it. please make sure there's no duplicate issue.

@Bovelett commented on Jan 30, 2020, 12:17 AM GMT+2:

1. Changing text color has no effect on text editor blocks

Changing the color of text in text editor blocks has no effect. I've created a screencast so you can see it live. https://beta.geekonheels.dev/wp-content/uploads/2020/01/Elementor-2-9-beta2-text-style.mp4 (32 MB).

We will address this issue soon

2. Changing site background color while in header or footer template throws error 500

By coincidence I decided to change the site background color while I was editing my header. Upon saving it threw a 500 error. I was able to reproduce this over and over again. The error log from my server is attached. Here's the screencast so you can see the steps taken: https://beta.geekonheels.dev/wp-content/uploads/2020/01/Elementor-2-9-beta2-change-background-from-header.mp4

Thanks! Nice catch.

@sermalefico commented on Jan 30, 2020, 5:27 AM GMT+2:

Error in wordpress backend with Beta 2

Last wordpress and Elementor free only activated. Can se in Plugins section /wp-admin/plugins.php

[DOM] Found 2 elements with non-unique id #_wpnonce: (index):1 (More info: https://goo.gl/9p2vKq)

This cause problems conflict with other plugins that use forms or imput selectors in Frontend and backend. Example in frontend with 1 plugin activated (example: Ajax search Lyte in shortcode): [DOM] Found 2 elements with non-unique id #set_inpages1: (More info: https://goo.gl/9p2vKq)

Please elaborate. can't understand the issue.

Hello Elementor Theme, Theme Style-Text-Color doesn't work. It is over-ridden by: .elementor-widget-text-editor { color: #555555; } in /wp-content/uploads/elementor/css/global.css

Will be resolved

Bug report

If you open Theme Style while editing a page, the Preview Changes button/icon will take you to a blank, nonsense preview page. Example URL:

http://localhost/?elementor_library=default-kit&preview_id=12&preview_nonce=825bc645f3&preview=true

We're working on a solution. By the way, what you would expect to see? a page with HTML elements or the page currently edited?

@ajm62 commented on Jan 31, 2020, 6:21 AM GMT+2:

Downloaded the new Beta 2.9 Elementor and had problems with the links on my pages. When I hover over them they would enlarge to 4 times what it is supposed to be. I thought it might be a plugin issue. Turn out, when I roll back the Beta Elementor it works fine now. Just a heads up.

Maybe you had set your links hover state size to large size?

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.

tomas-eklund commented 4 years ago

We're working on a solution. By the way, what you would expect to see? a page with HTML elements or the page currently edited?

I would expect to see the page currently edited.

parfilov commented 4 years ago

@shilo-ey Yes, the issue with fields is present. I've found the reason of fields BG color issue. There is #ffffff in the form fields by default. If to make it empty by default, it wouldn't override the Theme's Style settings.

fields_color
woerdhvd commented 4 years ago

The theme styling is very limited. I use Style Kids now, that has a lot more global styling options. What I hoped is that there would be an option to control the outer padding of inner sections. I use inner sections a lot for lay-out.

black-eye commented 4 years ago

@shilo-ey

  1. For some reason the image in lightbox is not the full size, as you would expect, but only 1024px (my settings for Large). Full size is 1920px.

Can't reproduce, the image appears to be full dimensions. Which widget are you using?

I've made a page with different widgets to see all the problems described: https://www.blackeye.cz/report/gallery-test/. Please checkout the differences between Basic Elementor Gallery and Gallery PRO (that's the affected widget with the only-rage-size issue). The images in both galleries are the same, but in lightbox of Basic Gallery they are full, and in PRO Gallery only large.

obrazek

Funny fact: so far the best experience gives old Elementor Basic Gallery (https://www.blackeye.cz/report/gallery-test/ updated):

  1. It shows full images, instead of large ones.
  2. It shows both titles and descriptions.

In beta 2 all Core widgets support Title & Description, Pro support will release soon.

Please check out the native WP gallery on page https://www.blackeye.cz/report/gallery-test/ - there are no titles, nor descriptions. And the lightbox doesn't act like a gallery, it shows only solitary images.

Psychopomp777 commented 4 years ago

Footer Text doesn't appear in the Pro Gallery Lightbox, but you are aware of this, right!?