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.0 Beta 6 Release 📣 #11821

Closed shilo-ey closed 3 years ago

shilo-ey commented 3 years ago

===========

Beta 6 UPDATED - PLEASE READ BELOW!

===========

Hi Elementor Beta testers 👋,

I’ve been waiting for this moment since Elementor 2.0, back in April 16, 2018… I’m sure you have too.

Now, you have the chance to help us improve the biggest version we’ve released in the past two years.

Elementor 3.0 - All About Design System!

Grab a chair, pour a cup of coffee, lock your door, put on some lo-fi music, and start testing like crazy. We have over 5 million users relying on your feedback, so be sure to be as thorough as possible when testing this version.

So, what is SO special about Elementor v3.0? A complete Design System is now built into Elementor!

For those of you unfamiliar with the term, a Website Design System is the single source of truth that groups all the elements that will allow the teams to design, realize, and develop a website.

You have all your website design components built-in - so your entire team is synced and your website is 100% consistent, all the time.

How is this built-in into Elementor?

As you will see described below, we have made significant changes and added several setting screens that will help you build your website design system, including:

Unlike other beta versions, this beta includes two phases. This is the first phase, and the next one will come in a few weeks.

If a Pro version is installed on your environment make sure you are using:

Ready, Set…GO!

Introducing Site Settings: Manage Your Entire Site Within the Editor

global-settings-3-0-beta

Your website confusion days are over…

Juggling Theme code, Customizer, shmastomizer… forget about it.

We added a new Settings panel, showing many site configuration tools. This way, you can stay inside Elementor, and have one place to set all of your site settings. Sweet!

Inside any page you edit with Elementor, go to the left panel, and click on the top left icon. You will switch to the Site Settings panel.

From here, you can access many of your site’s settings, including the Logo, Favicon, Lightbox settings, and layout defaults.

Inside the Site Settings panel you will find:

Test Flows:

A: Before upgrading - Make sure all settings migrated properly

  1. Before upgrading to v3.0, go to your website’s WordPress Dashboard > Elementor > Settings > Style tab and change some settings
  2. Go to your Theme Customizer screen or to Settings > General and modify your Site Identity settings: Site Title, Tagline, Logo and Favicon
  3. Go to Elementor Editor and create some unique Saved Colors in your color picker
  4. Click on the top left menu icon > Default Colors > set Custom Colors to the four System predefined colors
  5. Now adjust your Default Fonts > set custom font styles to the four System predefined fonts
  6. Click on the top left menu icon > Site Settings > Lightbox tab, and set a custom unique look and settings for your Lightbox
  7. Upgrade to Elementor v3.0 beta
  8. Go to Elementor Editor and click on the top left menu icon > Site Settings
  9. Go to Layout settings and make sure the settings you set in step 1 were migrated to there
  10. Go to Site Identity settings and make sure the settings you set in step 2 were migrated to there
  11. Go to Color & Fonts settings and make sure your saved colors migrated to Global Colors, and your default colors and fonts settings were updated as well
  12. Go to Lightbox settings and make sure all settings appear there

B: Make sure control affects the preview

  1. Create a new page using Elementor and drag in some widgets and elements
  2. Go to Menu > Site Settings and make changes to your Site Settings areas
  3. Make sure every change is applied in Editor’s Preview Mode and in Frontend
  4. Create another page and make sure everything works as expected

Meet Global Colors: Manage Your Site Colors More Consistently (#1553, #1324)

global dropdowns

Until now, Elementor offered default colors as a means to set your site’s color palette. You didn’t have complete control over where each of the four default colors appeared.

From now on, we have moved all of your site colors to a new and improved method: Global Colors.

Global Colors use CSS variables in order to offer you a more efficient workflow. You start by choosing your site’s four basic Global Colors. Then, you go into any color style in Elementor, and set it to be one of the four colors. You can also add as many custom colors to the Global List, and name them however you like. We also have auto-naming, which I love, since I learn cool new color names like ‘Jelly Bean’, ‘Fuzzy Wuzzy Brown’ and ‘Hawaiian Passion’.

Now the magic of CSS variables kicks in. Go back to Global Colors, and change one of the colors. Your entire site’s color scheme changes according to the new Global Color. Mixing and matching colors during your web design process has never been easier.

We built this so you can see the actual Global Color inside the control, removing all guesswork. You’ll also be able to assign a different Global Color from within the control, or create a new Global Color, all using the same color picker inside the control.

Are you confused about the difference between Global Colors and Theme Style we released earlier this year? Don’t be!

Theme Style sets fallback style definitions for HTML tags like <H1>, <body>, <label> and so on. They are not Elementor-specific, but as general as possible. This is the baseline setting for the site, that comes into play only as a fallback, if no definitions were set.

Global Color is another style layer that sits on top of the Theme Style. It provides the building blocks for your site design. Use it in the appropriate places, and you will be on your way to have a smart way to manage your colors and build your design system (the same is true for every Global Style feature, including Global Fonts).

Both Theme Style and Global Color are much needed features, so make sure you pay attention to both.

Are you thinking about offering website rebranding and redesign services? Then this is your lucky day! This feature is perfect for making changes to a website’s color scheme without having to touch any code or CSS files, all from one place within the editor.

Test Flows:

A: Make sure default values are being reflected correctly

  1. In Elementor Settings screen within the WordPress Dashboard make sure your Default Colors are not disabled
  2. Create a new page using Elementor and drag in several widgets: Buttons, Headings, Call to Action and more
  3. Edit each widget and make sure you can see a persistent reflection of the Global Color assigned to this control in the new Global Color dropdown indicator, e.g: Heading widget has Primary Global Color assigned by default
  4. Go to WordPress Dashboard > Elementor > Settings and check “Disable default colors” option
  5. Create a new page and make sure all previously Default Global Colors are now represented by “Default” value which indicates that this control is inheriting a different setting
  6. If you proceed for next flows, go to WordPress Dashboard > Elementor > Settings and uncheck “Disable default colors” option

B: Assign different Global Color to a control

  1. In the page you created in test flow, edit several widgets and click on the Global dropdown control in the color you wish to reassign
  2. In that dropdown, make sure you find your previously Saved Colors and your four Default Colors (Primary, Secondary, Accent, Text)
  3. Select a different Global Color and make sure it’s being reflected in the Preview and in the Frontend
  4. Repeat these actions for various Color controls in different widgets

C: Create Custom color and save it as a new Global Color

  1. Drag in a new Heading widget and go to Style tab
  2. Click on the Color Control picker and select a new color from the color palette
  3. Click on the Reset button and make sure the Global Color is being reassigned to Primary
  4. Repeat Step 2 and click on the Plus icon to create a new Global Color
  5. If the color you selected is already saved - you will see a notice mentioning that. If not, you will see a modal which explains the creation of a Global Color and suggests a name for that color based on the HEX value
  6. Create your new color and make sure it appears in your Global Colors dropdown
  7. Go to frontend and make sure that setting appears correctly

D: Select a Global Color and edit it

  1. After going through flow C, create a new page, drag in a Heading widget and go to Style tab
  2. Click on the Global Color dropdown menu and select non-default Global Color (create a new one if you don’t have any)
  3. Update your page, reopen the Global Color dropdown menu and click on the last item: “Manage Global Colors”
  4. You will see a list of all your Global Colors
  5. Try renaming several colors and make sure the new names are saved
  6. Click on the Color Picker control and select a new color
  7. Make sure all elements that use this color setting are changing accordingly in your Preview
  8. Save your changes and make sure the changes apply to Frontend as well

E: Delete a Global Color

  1. After going through Flow D, go back to this page and edit a widget from that page
  2. Go to Style tab, open the Global Color dropdown menu and click on the last item: “Manage Global Colors”
  3. Hover over the Global Color you wish to delete and click on the trash icon
  4. A modal will ask you if you are sure you want to delete this Global Color and it will then explain the consequences of this action. Please note: you cannot delete the first four default colors
  5. After deleting your assigned color, save the Settings and exit the Global mode by clicking on the close icon
  6. Go to your widget that was associated with your deleted Global Color and make sure the dropdown now shows “Default” without any value
  7. Note that the color that should be reflected in your preview is the color this element is inheriting (e.g from your Theme Style, from your WordPress theme or from your browser default setting)
  8. Reassign the Global Color and make sure it works as expected

Meet Global Fonts: The Smartest Way to Manage Your Text Styles (#1553, #1863)

typography global dropdown

Colors and Typography are the building blocks of the work of a web designer. Using the same logic of Global Colors, we created a whole new method of dealing with your site’s text styles.

Similar to default colors, until now Elementor offered default fonts that were set behind the scenes, and could not be appointed to specific elements.

We are now moving to a new method: Global Fonts, again using CSS variables to offer a smarter way to manage fonts and text styles.

You start by choosing the attributes for all your site typography settings:

You’ll be able to apply these settings to every widget that contains text, and customize your own Global Fonts beyond the basic list.

Once you set your site’s typography, you’ll be able to make changes that affect all the text areas that you set with Global Fonts.

You can also see exactly which Global Fonts was applied.

This will allow our users to:

You can now assign font styles and colors to elements in the smartest way possible.

Edit a heading, and set its font or color to Primary.

Do this to any element, from button to column background, and you are on your way to implement your very own design system.

Then, if you ever decide to change one of your site’s colors or typography settings, you’ll be able to do it once, and know exactly which elements will be affected across your site.

That’s not all… You can even set your very own Global Fonts and color settings.

Test Flows:

A: Make sure default values are being reflected correctly

  1. In Elementor Settings screen within the WordPress dashboard make sure your Default Colors are not disabled
  2. Create a new page using Elementor and drag in several widgets: Buttons, Headings, Call to Action and more
  3. Edit each widget and make sure you can see a persistent reflection of the Global Fonts assigned to this control in the new Global Fonts dropdown, e.g: Heading widget has Primary Global Fonts assigned by default
  4. Go to WordPress Dashboard > Elementor > Settings and check the “Disable default fonts” option
  5. Create a new page and make sure all previously Default Global Fonts are now represented by “Default” value which indicates that this control is inheriting a different setting
  6. If you proceed for additional flows, go to WordPress Dashboard > Elementor > Settings and uncheck “Disable default fonts” option

B: Assign different Global Fonts to a control

  1. In the page you created in test flow A, edit several widgets and click on the Global dropdown control in the Typography you wish to reassign
  2. In that dropdown, make sure you find your four Default Typography Settings (Primary, Secondary, Accent, Text)
  3. Select a different Global Fonts and make sure it’s being reflected in the Preview and in the Frontend
  4. Make sure the dropdown visualization is consistent with the Preview
  5. Repeat these actions for various Typography controls in different widgets

C: Create Custom Typography and save it as a new Global Fonts

  1. Drag in a new Heading widget and go to Style tab
  2. Click on the Typography ‘Edit’ control (pencil) and set your desired style with all of the set of Typography capabilities: font family, font size, font weight, Transform, Style, Decoration, letter spacing and line height and make they’re all applied
  3. Click on Reset button and see that the Global Fonts being reassigned to Primary
  4. Repeat step 2 and click on the Plus icon to create a new Global Fonts
  5. If the Typography set you created is already saved - you will see a notice mentioning that. If not, you will see a modal which explains the creation of Global Fonts and suggests a default name for those typography settings
  6. Create your new Typography and make sure it appears in your Global Fonts dropdown
  7. Go to Frontend and make sure that your settings appear correctly

D: Select a Global Fonts and edit it

  1. After going through Flow C, create a new page, drag in a Heading widget and go to Style tab
  2. Click on the Global Fonts dropdown menu and select non-default Global Fonts (create a new one if you don’t have any)
  3. Update your page, reopen the Global Fonts dropdown menu and click on the last item: “Manage Global Fonts”
  4. You will see a list of all your Global Fonts under Global Fonts section (should be automatically opened there in the next beta versions)
  5. Try renaming several Typography settings and make sure the new names are saved
  6. Click on the Typography control and select a new set of Settings to that Global Fonts
  7. Make sure all elements that use this Typography setting are changing accordingly in your Preview
  8. Save your changes and make sure the changes are applied to Frontend as well

E: Delete a Global Font

  1. After going through Flow D, go back to this page and edit a widget from that page.
  2. Go to Style tab, open the Global Fonts dropdown menu and click on the last item: “Manage Global Fonts”
  3. Hover over the Global Font you wish to delete and click on the trash icon
  4. A modal will ask you if you are sure you want to delete this Global Font and explain the consequences of this action. Please note: you cannot delete the first four default Typography settings
  5. After deleting your assigned Typography, save the Settings and exit the Global mode by clicking on the close icon
  6. Go to your widget which was associated with your deleted Global Font and make sure the dropdown now shows “Default” without any value
  7. Note that the text style that should be reflected in your preview is the text style this element is inheriting (e.g from your Theme Style, from your WordPress theme or from your browser default setting)
  8. Reassign Global Font and make sure it works as expected

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: August 25, 2020 (Estimated)

Many thanks for your support and help!

Cheers, Elementor Team

pintolog commented 3 years ago

Great news!!! I just started to explore it, in Global Settings i set the fonts & colors but in the Editor i didn't saw the changes until i saw the front end page. image

rodolphebertozzo commented 3 years ago

Add dark mode here (and typography) : 3 0

mbenady commented 3 years ago

There is a problem with settings window in Global Settings > Global typography I'm using FF browser. Screenshot_2020-07-08 Elementor About Us (1) Elementor _ About Us - Mozilla Firefox 2020-07-08 (1)

rodolphebertozzo commented 3 years ago

A bug found this : https://youtu.be/4m6U8WTi-ws

joychetry commented 3 years ago

Good Job Elementor Team, I will definitely git it a go and will test page speed scores.

fabigrafo commented 3 years ago

Very cool und helpful! What about your existing widgets, will they be improved and optimized at some point? I was hoping that some widgets for Elementor 3.0 would be fundamentally improved.

But well, I'm going to try the first 3.0 beta.

Mulli commented 3 years ago

Sounds great & ambitious to complete 2 test phases in < 4 weeks. Good luck. I am still looking for clear definition of a "kit". It pops up here & there. Where do I find clear definitions of what it is?

shilo-ey commented 3 years ago

@pintolog commented on Jul 8, 2020, 10:51 PM GMT+3:

Great news!!! I just started to explore it, in Global Settings i set the fonts & colors but in the Editor i didn't saw the changes until i saw the front end page.

Thanks! Try clearing your cache and your local storage and let me know if that solved the issue for you (Open dev tools > Application > Local Storage > your domain - clear)

@Rodolphe Bertozzo commented on Jul 8, 2020, 11:20 PM GMT+3:

Add dark mode here (and typography) :

Thanks

@Rodolphe Bertozzo commented on Jul 8, 2020, 11:38 PM GMT+3:

A bug found this : https://youtu.be/4m6U8WTi-ws

Thanks

@fabianenzensperger commented on Jul 8, 2020, 11:50 PM GMT+3:

Very cool und helpful! What about your existing widgets, will they be improved and optimized at some point? I was hoping that some widgets for Elementor 3.0 would be fundamentally improved.

But well, I'm going to try the first 3.0 beta.

Hey, v3 is about Design System and better essential capabilities. We do have plans for improving the current widgets.

Update us with your findings.

@Mulli commented on Jul 9, 2020, 3:53 AM GMT+3:

Sounds great & ambitious to complete 2 test phases in < 4 weeks. Good luck. I am still looking for clear definition of a "kit". It pops up here & there. Where do I find clear definitions of what it is?

Thanks, Kit is the main site entity, which includes all of the site's settings. It will be expanded in the near future and we will keep you posted.

Thanks everyone!

tudormnt commented 3 years ago

I think there's a bug triggered when resetting the style of a widget that has global settings. Steps to reproduce:

  1. Add a Button widget to the pagee
  2. Change the background color of the button
  3. Right click > Reset style.

The console:

Screenshot 2020-07-09 at 11 20 41

Playing around with setting the color control to global settings also sometimes triggers an error:

Screenshot 2020-07-09 at 11 29 05
fabigrafo commented 3 years ago

If the favicon now runs via the Elementor Editor, can you offer to offer an extra favicon for dark mode, for example? If you visit websites in the evening (and everyone is talking about dark mode, by the way, a consideration for the entire website instead of just the Elementor elements), the icon becomes barely or not at all visible with a dark favicon.

Bildschirmfoto 2020-07-09 um 17 56 45
joshmishell commented 3 years ago

I would love a more clear path to setting up these globals theme styles. It is difficult to understand what each of the typography sections handles ("Colors & Typography" vs "Theme Style"). I'm sort of stuck in a feedback loop trying to set it up because it's so hard to understand what changes what. Maybe when you first launch the Global Settings, a user could be guided through this process in a step-by-step way so that they're setting things up in the proper order.

It would also be amazing to have a simple template that has one widget of everything pre-loaded into it so you can see how your headings, body, links, pullquotes, buttons, etc look.

avermat commented 3 years ago

How do I create different global styles for light and dark sections?

rodolphebertozzo commented 3 years ago

Another practical remark: when from the editor you modify the typography, you can click on "Manage Global Typography", so you are redirected to the global panel BUT on the colors pane, basically, to save a few seconds, directly redirected to the pane provided for the typography.

SuryawanshiPrajakta commented 3 years ago

Hello,

We have created an addon for Elementor in which we have one of the widget 'Multi Buttons'. We are facing this issue when we are trying to change any setting of the widget - https://cl.ly/4e8f177cc1b2.

We are facing this even on the first drag-drop of the widget. After observation, we can conclude that we are facing this specifically for the widgets having repeater fields.

Could you please let us know if we need to add any specific compatibility to the Global settings through our widgets?

The styling I am applying is getting applied on the frontend, however, it is throwing error in the editor resulting in no changes in the design of widget.

Looking forward to hearing from you.

oooh-boi commented 3 years ago

What's the point of having a powerful Global Settings while you can't export them? These should be portable as any other template. Other than that - 5 stars for E3.0.

fabigrafo commented 3 years ago

What's the point of having a powerful Global Settings while you can't export them? These should be portable as any other template. Other than that - 5 stars for E3.0.

Look in 3.0 Pro Milestone here and in 3.1 Core Milestone, because these functions are specified.

fabigrafo commented 3 years ago

If the favicon now runs via the Elementor Editor, can you offer to offer an extra favicon for dark mode, for example? If you visit websites in the evening (and everyone is talking about dark mode, by the way, a consideration for the entire website instead of just the Elementor elements), the icon becomes barely or not at all visible with a dark favicon.

Bildschirmfoto 2020-07-09 um 17 56 45

And maybe a different logo for dark and white? So we can easy set 2 different logos for dark and white navigation.

Jorihlen commented 3 years ago

It would be convenient if deactivating Zoom in the lightbox also affects the zoom of the products in Woocommerce. Or select that option for products vs. the rest of the images. The previously configured Favicon did not remain after the upgrade. A simple way to replace the hamburger with the word MENU should be included. Although it may seem strange, there are customers who are not sympathetic, and today there is no direct way to do it.

Thank you for directing centralized development at Elementor, my prayers have been heard ... :-D

Kishorchandth commented 3 years ago

I love the design , excited for v3 and utilizing Custom variable (SCSS) but what about Browser support ?

godvsgodvs commented 3 years ago

Kishorchandth, CSS not SCSS variable. They are supported in every browser except Internet Explorer which is less than 2% share now.

misslaidlaw commented 3 years ago

Game changer. Will test, but seen some of the bugs already reported except I am unable to save colors in Firefox currently.

BrockwayProd commented 3 years ago

Maybe a good time to revert the javascript link changes ? Or add an option to allow them ?

Kishorchandth commented 3 years ago

@godvsgodvs Seems like you don't know much about SCSS or custom variable and CSS very much.

FYI : I have been using this method for over 4 months on my website (https://foxscribbler.com/) by the way

This is how you write css

.class{ background:#121212; color:#ffffff; }

but Custom variable are different , in order to work you need to define :root first like this.

:root { --background: #121212; --color:#fff }

Custom-varibale

When writing custom variable, this will look like this -

/ this method is not fully supported with IE and old browser because no fallback is added, that how i am talking about and what Elementor is missing adding them / .class{ background:var(--background); color:var(--color); }

They are dynamically generated which is great for global styling and you change one variable in :root and it will apply on all your page and post.

This will support on all the browsers even IE

/ this method is fully compatible with IE and old browsers,this is what Elementor suppose to be doing / .class{ background:#121212; / Fallback/ background:var(--background); color:#ffffff; / Fallback/ color:var(--color); }

When i am writing my own Custom Variable i miss those fallbacks too because remembering those color code is nightmare but can be solve with SASS though .

godvsgodvs commented 3 years ago

Kishorchandth, seems like you need to educate yourself on the difference between SCSS/SASS and CSS. SCSS and SASS were developed to fill the holes in CSS. They require preprocessors such as Prepros to turn the code into browser readable CSS. Prepros also automatically inserts webkit prefixes for full browser compatibility.

This is what SCSS variables look like: // Colors $color1: #ac8e4d; $color2: #d89b00; $color3: #902729; $primary-color: #bb7700; $accent-color: #660000; // Fonts $header-fonts-1: Alice, Georgia, "Times New Roman", serif;

They were in use before CSS variables existed.

And using fallbacks doesn't mean it's "supported". That's why you're using a fallback to begin with.

FYI, I've been using SASS & SCSS for at least 3 years now.

One more thing. You don't need to have a fallback if the property has already been defined. If you already have a global default, that will be your "fallback".

black-eye commented 3 years ago

I gave it a really quick try so far, but I have to tell I'm a bit disapointed about the changes concerning the color picking.

Color Picker Issues:

1. Previously saved colors are gone. Several versions back you've introduced the new color picker with the new shiny feature - custom colors. Now these colors are gone for no reason. Could you please bring them back? There are several reasons for doing this:

2. Clicking inside the color picker resets the global color. obrazek When I select the global color for a widget and then I click (just click, without any change done) on the color field, the global color is changed to custom without any warning! This is absolutely devastating for the global color consistency! By clicking the color picker just out of curiosity, by mistake or unknowingly of this behavior, you remove the the global color! Just imagine, what disaster can be done by a less skilled editor/client with just one innocent click!

In fact, when you introduced the color saving feature in 2.8, I thought it's a preparation for the global colors and they'll be listed there. Either in an extra row or in a differently designed border, inspired by Adobe and other design SW:

obrazek

Now I feel, you have missed the opportunity to do it more clearly and user friendly.

Transitions between Global settings and Editing panel This was mentioned by some other testers on FB. The constant transitions between the panels are laggy and stand in the way of creative workflow.

But what is even worse: The custom width of the left panel isn't preserved! Making this panel wider is the first thing I do on every site I work on. Every time I use Global setings, the panel is changed back to default width. It's really annoying to change it every time I go back and forth!

So these are mine observations so far. Hopefully there's still time to make some more improvements!

BTW, I suppose you have already seen this little review, but if not, definitely check it out. There are several other bugs mentioned there. WPTuts: Global Styling with Elementor 3.0 BETA - First Look & Impressions

fabigrafo commented 3 years ago

Hi. In this place: https://github.com/elementor/elementor/milestones https://github.com/elementor/elementor/milestones

Am 13.07.2020 um 11:02 schrieb sf-steve notifications@github.com:

What's the point of having a powerful Global Settings while you can't export them? These should be portable as any other template. Other than that - 5 stars for E3.0.

Look in 3.0 Pro Milestone here and in 3.1 Core Milestone, because these functions are specified.

Where are these milestones published please

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/elementor/elementor/issues/11821#issuecomment-657424411, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN2PPTRFL4LOFVOOJNPAWQTR3LERZANCNFSM4OU3XLXQ.

Worldwebscapes commented 3 years ago

I am seeing odd behavior when dragging existing widgets. When you drag a widget, it will place it in the container below the intended target. You need to actually drag the element up two levels to get it to drop where you would like it. I have tested this on Hello, Blocksy, and Kadence with no other plugins enabled.

Dragging from the navigator works properly.

Loom recording supplied. https://www.loom.com/share/6c781bf28c21453ca43daa1fdd67183e

UPDATE: Dragging error still occurs in Beta 2.

UPDATE: Issues Resolved in Beta 3.

black-eye commented 3 years ago

confirming @Worldwebscapes's dragging issue.

ghost commented 3 years ago

I offer proposals for simplification:

image

BrockwayProd commented 3 years ago

I offer proposals for simplification:

image

Proposal 2 looks really good !

ghost commented 3 years ago

In my dreams, the editor in WordPress will use the site´s Elementor settings. Is it possible that the new design system is reflected in the editor, in order to automatically inherit the Elementor’s CSS rules, including tipography, background color, ...? This will encourage me to move away from a Gutenberg-ready theme to use just Hello theme and Elementor. (but we don´t even need Hello at this point)

rodolphebertozzo commented 3 years ago

@maryfromlondon, In the absolute, this change would not bother me and could be advantageous in terms of space, if I had to position myself, I opt for the 2 (do not forget to change also for the typography)

mskks64 commented 3 years ago

I'm a bit nervous about this change: "Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post)"

Would it be possible to add this as a legacy option to keep for sites where that has been targeted with css?

Aleksandr0114 commented 3 years ago

When I'm change global setting and return on the page: https://prnt.sc/ti1xt7

Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post)

Our Theme have a negative margin in the elementor-row. If you remove elementor-row all design site will be broken. Please add filter or another way to add elementor-row.

oooh-boi commented 3 years ago

When I'm change global setting and return on the page: https://prnt.sc/ti1xt7

Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post)

Our Theme have a negative margin in the elementor-row. If you remove elementor-row all design site will be broken. Please add filter or another way to add elementor-row.

Can't you just do the negative margin on ".elementor-container" instead? I solved the problem by switching these two only.

Aleksandr0114 commented 3 years ago

When I'm change global setting and return on the page: https://prnt.sc/ti1xt7 Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post) Our Theme have a negative margin in the elementor-row. If you remove elementor-row all design site will be broken. Please add filter or another way to add elementor-row.

Can't you just do the negative margin on ".elementor-container" instead? I solved the problem by switching these two only.

If I'm add a negative margin on ".elementor-container" all content will be left aligned without margin-left: auto; margin-right: auto;

oooh-boi commented 3 years ago

When I'm change global setting and return on the page: https://prnt.sc/ti1xt7 Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post) Our Theme have a negative margin in the elementor-row. If you remove elementor-row all design site will be broken. Please add filter or another way to add elementor-row.

Can't you just do the negative margin on ".elementor-container" instead? I solved the problem by switching these two only.

If I'm add a negative margin on ".elementor-container" all content will be left aligned without margin-left: auto; margin-right: auto;

It's pointless to ask why do you use negative margins, but in order to make everything backward compatible and E3.0 compliant too, jQuery might be handy. In your theme's main ".js" file you can check whether ".elementor-row" exists as a first child of ".elementor-container", and in case not, wrap all the content of ".elementor-container" with ".elementor-row". That was my initial solution once the DOM changes were announced by the E development team.

black-eye commented 3 years ago

@Aleksandr0114, @oooh-boi

When I'm change global setting and return on the page: https://prnt.sc/ti1xt7 Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post) Our Theme have a negative margin in the elementor-row. If you remove elementor-row all design site will be broken. Please add filter or another way to add elementor-row.

Can't you just do the negative margin on ".elementor-container" instead? I solved the problem by switching these two only.

If I'm add a negative margin on ".elementor-container" all content will be left aligned without margin-left: auto; margin-right: auto;

I have exactly the same problem. My own custom theme has this negative margin hack to solve the dreaded column misalignment issue (#452).

@oooh-boi, you are the master-of-all-hacks for me, have you got any solution to this problem? Because by reading the discussion in the issue, it doesn't seem that Elementor has any intention to fix the problem.

fabigrafo commented 3 years ago

Beta 2 with fixes?

jdub850000 commented 3 years ago

This looks interesting - Widening functionality while simplifying code structure - Nice! :) I see that the expanded device profiles have slipped to 3.1? I guess if these changes work out, then media support may work differently - and that's fair enough. Bring it on!

bentalgad commented 3 years ago

Very sad that this is the only change in this long period of time when so much more basic functions are missing.

fabigrafo commented 3 years ago

Very sad that this is the only change in this long period of time when so much more basic functions are missing.

Yes.......

kaskad88 commented 3 years ago

When using custom repeaters in the section's settings, there're JS errors appeared in the console https://prnt.sc/tl6g49

fabigrafo commented 3 years ago

Is the development team sleeping?

mskks64 commented 3 years ago

Is the development team sleeping?

You are so impatient, dude.

black-eye commented 3 years ago

Is the development team sleeping?

You are so impatient, dude.

Well I'm a bit concerned too. It's been almost 2 weeks since the first beta and uptill now we've got only one response from the devs and 0 updates.

This is not my first beta testing, but this is the first time the reactions are so ... well, none. 2 weeks to estimated release and we haven't even seen the promised second phase yet. Not sure, how it will be possible to test and fix all the bugs in such a short time. And if this release will be published with so many existing bugs, it will be big disaster for Elementor's reputation, IMHO.

fabigrafo commented 3 years ago

Is the development team sleeping?

You are so impatient, dude.

Well I'm a bit concerned too. It's been almost 2 weeks since the first beta and uptill now we've got only one response from the devs and 0 updates.

This is not my first beta testing, but this is the first time the reactions are so ... well, none. 2 weeks to estimated release and we haven't even seen the promised second phase yet. Not sure, how it will be possible to test and fix all the bugs in such a short time. And if this release will be published with so many existing bugs, it will be big disaster for Elementor's reputation, IMHO.

Exactly. This time it takes an unusually long time. Usually every few days until a new beta version is released. But maybe they have more problems than they want. Or Pro 3.0 (site editor) is delayed.

I hope we know more soon, at least here (the hardworking testers) we could be kept up to date.

srcek commented 3 years ago

I'm also very impatient! I check their Pulse daily hoping to see something new. 🙂

But honestly, at this point, so much of my work is done in Elementor that the most important features from my perspective are stability, security and performance.

Keep up the great work team E and deliver a product we can continue to rely on! Oh, and don't forget this one: #4440 (I had to 🙂).

wayheming commented 3 years ago

Hello, Elementor team! After upgrading the PHP version to 7.4, I got errors in the custom element, but they are visible only in the editor. I have beta 3.0.0 installed.

Notice: Trying to access array offset on value of type bool in plugins/elementor/includes/libraries/bfi-thumb/bfi-thumb.php on line 491

Notice: Trying to access array offset on value of type bool in plugins/elementor/includes/libraries/bfi-thumb/bfi-thumb.php on line 492
MichaelDarko commented 3 years ago

I'm going to post something that's a bit off-topic. But I think It's the right time since this is a major update.

Although these features are somewhat underwhelming, considering this is a major update, I love that you're focusing on the basics. Performance improvements are much needed. And default/dynamic styling is a must-have for any design process. So thumbs up for that.

Since this is a major update, I would like to write something about where I think Elementor is / should be going. I use Elementor every day, I use it to make a living, I've made hundreds of websites for clients with Elementor (and other tools). So I hope my experience could be usefull to the Elementor team, since I have extensive experience from the other side. What you, guys, are developing every day, I'm using to make a living, every day.

So here is what I wanted to say and what I believe should be the next step for Elementor:

I just paid $265 for an unlimited yearly plan at Crocoblock

Why did I pay more for addons for Elementor than for Elementor itself?

Because Elementor alone can only build a small fraction of websites our clients want.

Elementor can only be used by professionals because the addons make it possible. Addons are now providing so much core functionality and are growing rapidly, while Elementor seems to be stuck.

You've made a great "page" builder. It's time to make a "website" builder.

We need something like JetEngine natively in Elementor. (Custom posts + Custom fields + Listings interface)

You can't make a "website" builder without theese things.

Relying on multiple other plugins shouldn't be the norm.

Do you understand how much value is there in this? Do you understand people would pay you in gold for this? Do you understand how many people need this?

Fancy widgets will wait, this is the next step you need to take to change the game.

Gutenberg will soon be a decent page builder for most users. Elementor needs to become much more powerful - a tool for professionals who build all kinds of websites.

Sorry this is not related to the current beta, but I hope somebody from Elementor, who's responsible for the overall vision, will see this and will understand how important and needed this is for us. Maybe they do and are working on it, but we can't know that and we have no indications.

Please, don't respond to this, so this doesen't turn into off-topic discusion.

Love you, Elementor. Thank you for all the hard work and for empowering designers like me to be able to make a living not only by designing websites, but also by making them.