Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Elementor v2.6 Beta 3 Release #8431

Closed
bainternet opened this issue Jun 27, 2019 · 91 comments

Comments

Projects
None yet
@bainternet
Copy link
Collaborator

commented Jun 27, 2019

===========

Beta 3 UPDATED - PLEASE READ BELOW!

===========

Elementor 2.6 BETA is finally here!

It's been a while since we last released a new major version. Since Elementor has such a wide users base, we prefer collecting several features and releasing them together after proper beta testing.
It was well worth the wait.

There are many new features as well as many new tweaks, and we would appreciate it if you dive into it and test them out…

Feast your eyes on this ICON-IC RELEASE!

This release knocks off many of your requests and focuses on 3 major aspects of handling icons in Elementor.

Meet The New Icon Library (#110)

We've completely redesigned the way you work with icons and Elementor.

youtube-play

With this version, we created an entire React based interface that will make picking icons much easier, faster and way more fun.
Click on the Icon Library button that appears on any widget with icon controls, and voila - the new icon library interface will pop up.

The relevant icons will automatically show according to the widget you are using. Until now, you could only select between a few pre-set icons. From now on, you can click on the Icon Library button, and the Library will appear and let you pick recommended icons.
If you're the picky type, you can browse through the entire library and choose your desired icon.

You can also filter icons by searching a keyword, or scroll through the icons and use your very own optical tools (AKA eyes).
The Icon Library includes a left panel, where you will see the different sets of icons, and filter them (more on this later).

Test flow:

  • Drag in any widget with an icon control in it.
  • Click on the "Icon Library" button.
  • If you just upgraded, you should see a message window asking you to upgrade to Font Awesome 5. Follow the process, switch to Font Awesome 5, and you will be able to see the new Icon library.
  • Try finding your preferred icon and browse around the different options in the Icon Library.
  • Select an icon and set it for the widget.
  • Redo this process using different widgets and icons.

Introducing Font Awesome 5 Library Integration (#4430)

The long-anticipated Font Awesome 5 library finally arrives in Elementor!

FA_image

It took time to release this feature because we wanted to make sure everything works smoothly. This includes backward compatibility and removing Font Awesome 4 dependencies.

With this update, your basic font library has just gotten a lot bigger. Until v2.6, you had to make do with only 675 icons, now have access to 1,534 amazing Font Awesome 5 icons (including an icon of the Elementor logo!).

Font Awesome 5 is not just about more icons. It brings faster performance and faster page speed, which can benefit your SEO and page load speed. With this library, only the CSS and fonts of the icon family you actually use are loaded. Faster load time means better SEO results for you and your clients!

FA5 comes included with 3 main icon families: Solid, Brand and Regular. These families are filterable and let you stay consistent with a certain design language throughout your site.

Please note that due to minor design changes made to some FontAwesome 5 icons, some of your old FontAwesome 4 icons may look a bit different.

Test flow:

  • Before installing the beta create a new page and add an Icon widget.
  • Select your favorite icon and save.
  • Install Elementor 2.6.0 beta.
  • Make sure the icon you chose is showing properly.
  • Change that icon and make sure everything still works as expected.

Introducing SVG file library (#5570)

Version 2.6 includes more than just FontAwesome 5. The new Icons control also lets you enjoy the power of SVG files.

So What is SVG and what is so special about it?
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVG files work in a similar manner as icons. You can scale them up or down without any loss of resolution or blurriness. They are extremely lightweight and keep your pages lean.

Important security notice!
Uploading SVG files from unknown sources may pose a potential security threat. We recommend you upload files only from a trusted source and enable this feature after you understand and accept the security risks involved.

Elementor's SVG module will do it's best to sanitize the files uploaded to your site, but it is best to upload SVG files only from known and trusted sources.

Once you upload an SVG file, Elementor sanitizes the file, removes any possible malicious code, and leaves only the skeleton of the required image. After the upload is done, you are able to preview the image and filter it using the native WordPress media library, only showing SVG files. The SVG is inserted into the page as inline code.

Image_SVG

We recommend uploading SVGs without any inline styling, in order to take advantage of the full capabilities of the Elementor's styling controls.

Test flow:

  • Drag in any widget with an icon control in it.
  • On top of the Icon placeholder, click on the button with the label "Upload SVG".
  • A warning modal will appear, after understanding the risks involved click on "Enable".
  • Upload your .svg icon file and select it.
  • Now, your icon should appear in the preview.
  • Change its color & size as you wish using the usual color and size controls.
Chrome Firefox Safari Opera Edge Internet Explorer
Supported Supported Supported Supported Supported* Partially Supported
  • IE9-11 doesn't properly scale SVG files.

Better User Experience

An ever-expanding interface like Elementor can get overwhelming at times. This is why we constantly think of innovative ways to help you in every step of your design process. Elementor v2.6 brings two new such tools: Navigator Indicators and Help Buttons.

1. Navigator Indicators (#2180)

The Navigator feature has become an indispensable editing tool in Elementor. It's like Waze, you wonder how you ever managed without it. Now, we are making it even better, with Navigator Indicators.

Every time you use Elementor's Custom Positioning on any certain element, you will be able to see an indication of this customization in the Navigator panel.

For example, if I use an absolute position for a title, the Navigator will show a blue indicator with a drag icon next to the title.

Nav_indicator

In the upcoming Pro release, we will also add two other indicators for Motion Effects and Custom CSS.

Test flow:

  • Drag in any widget.
  • Go to Widget > Advanced > Custom Positioning, and set the position to 'Absolute'.
  • Open the Navigator and locate see if your widget has a blue indicator on its right side.
  • Hover over the blue indicator and make sure that it expands.
  • Click on the indicator and make sure you are redirected to the relevant section.

2. Help Buttons

Help_buttons

Comprehensive documentation has always been a top priority for us. That said, it's not always easy to find the exact doc, at the exact moment you need it.

This is why we have now added a help button at the end of each editor panel. Click on it, and a new tab will open with the relevant documentation needed.

Test flow:

  • Drag in any widget to your editor.
  • On the left panel scroll to the bottom and check if "Need Help?" link appears.
  • Click on the "Need Help?" link and see that the opened tab is indeed the documentation of the widget clicked.

More Improvements

  • New: Introducing Deprecated Notice control for developers (Development Doc)
  • Tweak: Added 9:16 Aspect ratio support for Video widget (#7051)
  • Tweak: Set pre-selected attachment when opening the media modal (#7937)
  • Tweak: Added dynamic capabilities to link control in Social Icons widget (#8097)
  • Tweak: Added more style options for Progress Bar widget (#3413)
  • Tweak: Added icon alignment option to icon list (#8219)
  • Tweak: Added toggle visibility ability to a column in Navigator (#7863)
  • Tweak: Added vertical alignment option to Image Carousel (#6963)
  • Tweak: Added Responsive option for the Vertical Align in Column (#2554)
  • Tweak: Removed Prevent Scroll option from Google Maps widget which now defaults in the map origin (#8244)
  • Tweak: Added start & end time for self-hosted background video (#7941)
  • Tweak: Added Play once option for background video (#5129)
  • Tweak: Added text-shadow option to Button widget (#7317)
  • Tweak: Added opt-in form to Elementor updates for beta testers
  • Tweak: Updated E-icons library to v5.2.1
  • Tweak: Removed all Font Awesome 4 dependencies
  • Tweak: Clear 3rd party cache plugins on every change in Maintenance Mode
  • Tweak: Using application/json content type in order to avoid double zipping by the server to reduce load panel errors
  • Tweak: Added control to support Exit Animations
  • Tweak: Set $fonts_to_enqueue as public to allow manual enqueue of fonts (#7622)
  • Tweak: Added the playsinline attribute to autoplay background video on iOS (#8198)
  • Tweak: Show dashboard notices for admin role only (#7304)
  • Tweak: Added editor notices bar for admin role only
  • Tweak: Reduce-motion accessibility support for CSS animation library (#7968 thanks @drawcard)
  • Tweak: Elements: move PHP handles to JS - Double 'Editing Handles' in the "Post Content" Widget
  • Tweak: Added custom messages for "preview could not be loaded" state
  • Tweak: Added focus state emphasis to Dimensions control
  • Tweak: Redesigned Media Control
  • Fix: Open the correct video when you have multiple images with the same video link in the same Media Carousel (#8047)
  • Fix: Backslash in page global Custom CSS was removed
  • Fix: Set LTR direction only to input and textarea in RTL view
  • Fix: Color Picker UI glitches in RTL view

How to Install the Beta Version

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

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

You can also download the new version here: https://downloads.wordpress.org/plugin/elementor.2.6.0-beta3.zip

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: July 9, 2019 (Estimated)

Many thanks for your support and help!

Cheers,

Elementor Team

@bainternet bainternet pinned this issue Jun 27, 2019

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jun 27, 2019

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.

@shilo-ey shilo-ey closed this Jun 27, 2019

@shilo-ey shilo-ey reopened this Jun 27, 2019

@bainternet bainternet added this to the 2.6.0 milestone Jun 27, 2019

@drawcard

This comment has been minimized.

Copy link
Contributor

commented Jun 27, 2019

Very exciting to hear we can now use custom icons!

@bentalgad

This comment has been minimized.

Copy link

commented Jun 27, 2019

Very Exciting, although a lot of features are still missing! BTW - The file link is broken.

@black-eye

This comment has been minimized.

Copy link

commented Jun 27, 2019

Haven't tried it yet, but before I do so - is there a recommended way, how to deal with already installed plugins for SVG support (in my case https://cs.wordpress.org/plugins/svg-support/)?

  • Is there a there a possibility of conflict between these two, should I disable the non-Elementor plugin?
  • If I disable the former one, is Elementor's SVG support available outside Elementor's scope (for the whole WP)?
  • How exactly Elementor's SVG support affects already uploaded SVG files?
  • Can I (or should I) use already uploaded SVGs in Media Folder for new Elementor's iconic features?

Thanks

@sbc640964

This comment has been minimized.

Copy link

commented Jun 27, 2019

Some things:

  1. Recommend that you can add the svg icons in a new library in the Font Awesome library window.

  2. For now there is no control over the colors of the svg icons, which is a shame.

Urgent, arrange the absolute / fixed position for RTL, - this is more important than icons ... :)

@stevewoody82

This comment has been minimized.

Copy link

commented Jun 27, 2019

Updated without a problem
Initial look on site - no obvious challenges on the front end

On the backend - the Need help is a small red text line and not the clean button that I saw in the preview above.

Also alignment icons missing, as is dynamic cog

A few icons missing from the bottom nav

Screenshot 2019-06-27 at 15 31 57

Text editor icon only element icon missing

Dragging the icon does not open the element settings, it just hangs on the blue insert line.

Easier to just record a video

https://www.loom.com/share/26f89a3675854b039eab9bac4af97d6f

@stevewoody82

This comment has been minimized.

Copy link

commented Jun 27, 2019

Updated to FA5 in the tools in Elementor and now can't access page builder backend at all - offers option to launch in safe mode but won't work. Had to roll back to get it working again. Disabled all plugins and also theme - still not working. Only on existing templates - new ones are ok

@ericadyson

This comment has been minimized.

Copy link

commented Jun 27, 2019

Cannot select an icon. SVG works like a dream but I can't select any icons. There is no button or anything to OK/Accept a selection. So it's currently useless - for me at least. Nothing!

@ericadyson

This comment has been minimized.

Copy link

commented Jun 27, 2019

Don't know if this is connected with the beta release but I cannot see any details of the change log of any plugin!

@Kishorchandth

This comment has been minimized.

Copy link

commented Jun 27, 2019

Some bug i found -

  1. Menu icon ( Bars) turn into list icon (not toggle)
    Hamburder menu

  2. After toggle
    Screenshot_4

  3. Pop up settings icon is missing
    Screenshot_5

  4. No Button icon/custom SVG icon alignment
    Button pseudo icon

@infinity-web-italy

This comment has been minimized.

Copy link

commented Jun 27, 2019

Beautiful!
I look forward to the update.

Only the possibility of adding custom icon packages and reCAPTCHA v3 is missing

@siggibecker

This comment has been minimized.

Copy link

commented Jun 27, 2019

Since years for the first time the allmighty "No content found" displayed. Even no safe mode possible. Reverted back to 2.5. :-(

@Jorihlen

This comment has been minimized.

Copy link

commented Jun 27, 2019

Cannot select an icon. SVG works like a dream but I can't select any icons. There is no button or anything to OK/Accept a selection. So it's currently useless - for me at least. Nothing!

Is active on hover in the lower right margin of the list of icons ... the green button

@Jorihlen

This comment has been minimized.

Copy link

commented Jun 27, 2019

Icon alignment option to icon list is not working at all.
Navigator Indicator (for Absolute position) for Heading don´t work neither.

@STEVEGC

This comment has been minimized.

Copy link

commented Jun 27, 2019

Basket icon is now missing from the Menu Basket element for custom headers.

@jeromerenard

This comment has been minimized.

Copy link

commented Jun 27, 2019

Hi,
The new icon library doesn't work.
When I click on Icon libary to choose another icon, I can, but nothing happens. Is there a Ok - Update button in the new icon pop up?
When I choose one and just close the window, nothing change and it stay on the old icon.

@jeromerenard

This comment has been minimized.

Copy link

commented Jun 27, 2019

Hi,
The new icon library doesn't work.
When I click on Icon libary to choose another icon, I can, but nothing happens. Is there a Ok - Update button in the new icon pop up?
When I choose one and just close the window, nothing change and it stay on the old icon.

Oh I just figure out the button "Insert" is invisible. Only visible when you hover with your mouse where the button is.
Capture d’écran 2019-06-27 à 09 32 15

@ericadyson

This comment has been minimized.

Copy link

commented Jun 27, 2019

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jun 27, 2019

Hi everyone,
For those with the missing button / icons / other CSS related issues - Please try to clear the cache in your server / website (or try to add a parameter ?123 to the url)

Thanks

@michaelbourne

This comment has been minimized.

Copy link

commented Jun 27, 2019

Love the new feature.

Quick feedback: the Social Icons controls have no background color selector, so when you choose a custom icon, you get a white icon (default css from E) on a white background. Could we add a bg color option?

@SniffleValve

This comment has been minimized.

Copy link

commented Jun 27, 2019

Hi,
The new icon library doesn't work.
When I click on Icon libary to choose another icon, I can, but nothing happens. Is there a Ok - Update button in the new icon pop up?
When I choose one and just close the window, nothing change and it stay on the old icon.

Oh I just figure out the button "Insert" is invisible. Only visible when you hover with your mouse where the button is.
Capture d’écran 2019-06-27 à 09 32 15

Seems to happen only in Chrome (Win 10) as it's there in FF and Opera :)

@parfilov

This comment has been minimized.

Copy link

commented Jun 27, 2019

If you don't see "Insert", clear browser cache
insert

@parfilov

This comment has been minimized.

Copy link

commented Jun 27, 2019

@shilo-ey @bainternet in this #4430 issue I asked about Viber and Facebook messenger icons. Please, insert them to recommended icons for Social Icons widget and make their official colors.

@jasonb4u jasonb4u referenced this issue Jun 28, 2019

Closed

FontAwesome 5 #4430

@KiQdev

This comment has been minimized.

Copy link

commented Jun 28, 2019

2 bugs for me so far.
CTA widget, if choosing Dynamic for anything, the closing x is gone, so no way to change to not dynamic without creating a new.
All pages and templates says This is just a draft...., saving it and coming back again it shows This is just a draft...

@Kishorchandth

This comment has been minimized.

Copy link

commented Jul 7, 2019

@shilo-ey i found the bug that i mention earlier. .elementor-progress-wrapper is set to 25px by default. This the main cause process bar height is cut off

Screenshot_16. I can change it with css set to Auto that fixed it.

And we don't have option to change .elementor-progress-text border radius

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 7, 2019

Thanks @Kishorchandth solved this issue for responsive view.

@pingram3541

This comment has been minimized.

Copy link
Contributor

commented Jul 7, 2019

@shilo-ey

Can you please provide your system info? (including plugins, themes, and the system environment)

Sure, as I mentioned, I tested in 2 different hosting environments but similar set up. Hello theme w/ no plugins except E and E pro.

== Server Environment ==
	Operating System: Linux
	Software: Apache
	MySQL version: MySQL Community Server (GPL) v5.6.44
	PHP Version: 7.3.6
	PHP Max Input Vars: 10000
	PHP Max Post Size: 256M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 5.2.2
	Site URL: https://test..com
	Home URL: https://test..com
	WP Multisite: No
	Max Upload Size: 256 MB
	Memory limit: 2048M
	Permalink Structure: /%postname%/
	Language: en-US
	Timezone: America/Los_Angeles
	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.1.2
	Parent Theme Author: Elementor Team

== Active Plugins ==

	Elementor
		Version: 2.6.0-beta2
		Author: Elementor.com

	Elementor Pro
		Version: 2.5.11
		Author: Elementor.com

== Log == 
2019-07-06 14:42:51 [info] elementor::elementor_updater Started 
2019-07-06 14:42:51 [info] Elementor/Upgrades - _v_2_6_0_fa4_migration_flag Start  
2019-07-06 14:42:51 [info] Elementor/Upgrades - _v_2_6_0_fa4_migration_flag Finished 
2019-07-06 14:42:51 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '2.5.16',
  'to' => '2.6.0-beta2',
)]
2019-07-06 14:42:51 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '2.5.16',
  'to' => '2.6.0-beta2',
)]

It would be helpful if you could add the following code to your wp-config.php in order to debug the issue better and let us know what lines were added to your log file/frontend:

define('WP_DEBUG_LOG', true);
define('WP_DEBUG', true);
define( 'SCRIPT_DEBUG', true );

Yes that too I mentioned also, wp debug log is enabled and produces no errors. I'll email support @ elementor w/ site creds to investigate.

I also sent over a loom video showing the inability to add elements, load templates or save from within the editor.

p.s. I should add that I do have 2 other plugins on my test site, Cloudflare and Authy but they have already been ruled out on another site that doesn't use them. I need to keep them active on this test site please, disabling them WILL RENDER THE SITE INACCESSIBLE =)

@pingram3541

This comment has been minimized.

Copy link
Contributor

commented Jul 7, 2019

Just in case there was some leftover junk in the database, I also tried temporarily using a fresh database running WP 5.2.2 w/ only TwentyNineteen, Ebeta + Epro, same results.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 8, 2019

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

This beta release includes:

  • Tweak: "Need Help" style​
  • Tweak: Hide Beta Tester Newsletter​ modal after registration
  • Tweak: Open SVG Media Library immediately after approving the use of SVG icons
  • Tweak: Use wp_register_style to allow widgets to enqueue icon styles
  • Tweak: Added hover effect​ to Navigator Indicators
  • Fix: Compression encoding for gzip to brotli conversions (thanks @pingram3541)
  • Fix: Progress Bar​ responsive CSS
  • Fix: Avoid adding CSS for the first post in archive pages
  • Fix: Escape template type (Fix #8435)
  • Fix: Missing Font Awesome 4 defaults in Icon List and Social Icons widgets

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.

@shilo-ey shilo-ey changed the title Elementor v2.6 Beta 2 Release Elementor v2.6 Beta 3 Release Jul 8, 2019

@Kishorchandth

This comment has been minimized.

Copy link

commented Jul 8, 2019

Found a bug again @shilo-ey. Icon on nav menu toggle close is not displaying properly .

  • Clear the cache
  • Added ver and still the same

Only Elementor and Elementor pro version active

Screenshot_17

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 8, 2019

@Kishorchandth Thanks, will be fixed in the Pro v2.6 beta2

@zinanga

This comment has been minimized.

Copy link

commented Jul 9, 2019

Hello from Madrid,

WHAT I DID: I inserted a block from library with 4 icon boxes and a picture in the middle. I edited the lower left icon box (marketing)
WHAT HAPPENED: after adding the new icon, no refresh of it at preview or full preview. Only after saveing it and seeing the real page I could see the change. So, no real time preview of changes during editing happened.
image

Also I realized that the icon library UX is somehow too minimalist. When I choose an icon to insert, because the upload button is so dark gray and the insert button looks like dimmed and in a strange position, and even the grey color of the onhover button is so similar to the background grey, UX is not great.
image

I add the system info report generated by elementor. Not that I was also using elementor pro beta version.

This is my first report. I hope this can be useful:
system-info-elementor.wpcombo.com-09-07-2019.txt

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 9, 2019

@zinanga
It seems like you have some console JS errors. can you let us know if when you try to edit the icon box and when opening the icon library there are JS errors in your console?

It would be helpful if you could add the following code to your wp-config.php in order to debug the issue better and let us know what lines were added to your log file/frontend/console:

define('WP_DEBUG_LOG', true);
define('WP_DEBUG', true);
define( 'SCRIPT_DEBUG', true );

Thanks

@zinanga

This comment has been minimized.

Copy link

commented Jul 9, 2019

@steve231293

This comment has been minimized.

Copy link

commented Jul 9, 2019

Hello Elementor team,

I have some ideas with new control ICONS:
1: Add javascript event double click to Icon then selected it & close the popup.
View screenshot: http://prntscr.com/ocjplq

2:
I write custom code to add custom font ( right after Font Awesome Brand ) to Icon Manager popup.
View screenshot: http://prntscr.com/ocjuu2

For ex: add Elementor Icons to Icon Manager:
then I used this hook:

add_filter( 'elementor/icons_manager/native', 'add_eicons_to_icon_manager');

function add_eicons_to_icon_manager( $settings ) {
		$json_url = get_template_directory_uri() . '/libs/eicons/eicons.json';

		$settings['eicons'] = [
			'name'          => 'eicons',
			'label'         => esc_html__( 'Eicons', 'text-domain' ),
			'url'           => false,
			'enqueue'       => false,
			'prefix'        => 'eicon-',
			'displayPrefix' => '',
			'labelIcon'     => 'eicon-elementor-square',
			'ver'           => '5.3.0',
			'fetchJson'     => $json_url,
			'native'        => true,
		];

		return $settings;
	}

It's working but there is a small problem. It's appear wrong position. I have no idea about this problem. Is it a bug?
http://prntscr.com/ocjxk4

Used Plugins:
Elementor version: 2.6.0-beta-3
Elementor pro: 2.6.0-beta-1

@bainternet

This comment has been minimized.

Copy link
Collaborator Author

commented Jul 9, 2019

@steve231293

Thanks for the suggestions:

  1. Adding both onClick and onDoubleClick event listeners to the same Element could cause issues and behave differently in different browsers as well as not considered accessible, so its a nice Idea but ...

  2. Nope, not a bug, It's acting exactly as it should. You should use the proper elementor/icons_manager/additional_tabs hook instead of this one, which is an internal one anything else is custom to it. Also, don't set the native property as you are adding something that is not native 🤪.

Thanks.

@alriksson

This comment has been minimized.

Copy link

commented Jul 9, 2019

Font Awesome 5 is not just about more icons. It brings faster performance and faster page speed, which can benefit your SEO and your users experience. With this library, only the CSS and fonts of the icon family you actually use are loaded.

Am I understanding it right.. that elementor loads only the library that is used? Meaning solid or regular? users requested to load only the icons that are used. Meaning if 5 icons are used no matter package and custom uploaded font packages. Only load the package created including those 5 icons.

I was a bit confused in the latest blog post from what I got confirmed here before. This does not improve anything from before in the way you marketing it. Ok if you load all it be slower than your previous FA 4.7 and slows down. But guys, if I only use 5 icons why load all, this is what the community asked for. And what we generally ask for in all ways, all css and js that is loaded that are not used.

Yes I will if so only use SVG if elementor still going to load the full package with 500 icons when I use a few % of that.

@zeinnicholas

This comment has been minimized.

Copy link

commented Jul 9, 2019

@alriksson that's not how fonts work. You either load them or you don't. You can't load only a part of a font, like letters 'A', 'B' and 'C'. That's not possible anywhere. If you have Pro, you'll be able to add your own font packages, so you can, if you will, select a few FA5 icons, create a package and add to your library and use that instead. That's what I'm going to do after EPro 2.6 gets released. Or, use the SVGs and you're done. Not a big deal really...

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 9, 2019

Elementor v2.6.0 is out.

Thank you all for helping out.

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

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

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

@alriksson

This comment has been minimized.

Copy link

commented Jul 9, 2019

that's not how fonts work. You either load them or you don't. You can't load only a part of a font, like letters 'A', 'B' and 'C'. That's not possible anywhere. If you have Pro, you'll be able to add your own font packages, so you can, if you will select a few FA5 icons, create a package and add to your library and use that instead. That's what I'm going to do after EPro 2.6 gets released. Or, use the SVGs and you're done. Not a big deal really...

That's how I want it to work and thought it would. Of coruse, it can work. Like the same way, you would create the package. Instead of creating and compile it before uploading to the font library. The font library does it for you. Once you add an icon and save in elementor. The font package is regenerated and compiled.

And including only style and font that is added. So where is the new font library supporting custom packages now? Guess sticking to svg will be the simplest way with the current setup. but a lot of inline svg will also create a bigger html file. As long as elementor won't implement what I just mentioned above. Right now I load my own FA icon pack including maybe 10-20 icons. I hoped Elementor would make my life easier to instead of uploading and compiling it outside WordPress I could do it directly in elementor or no need to even think about it. Since elementor would do the job for me a bit of the approach you would like page builders to have Simplify building and still keep an edge on performance.

I was so happy they finally did a future improvement for 2019 and performance but ah seems like I was dreaming.

@shilo-ey Why could you not build it like this? And compile the files based on which icons the users use? Would be a game changer for many users.

@zeinnicholas

This comment has been minimized.

Copy link

commented Jul 9, 2019

@alriksson imagine you, as a company, having to deal with thousands of angry clients because your compiler doesn't work on their servers, or it does, but it henders the website unusable because the server does not have much memory to handle the heavy load of the "compiler". Or it doesn't have much space for the extra code the plugin now has. And the list goes on...

This is just a part of the problem if they went that way. Elementor is a page builder, not an icon builder. For that you have many specialized softwares. You are asking them to do everything without thinking if it's worth it, or if it will actually make things better or worse not just for you, but for the community as a whole. I for once, prefer them to improve on their code, fix bugs and patch "holes of functionality" instead of concentrating in something that has nothing to do with WordPress and page building.

It's really super easy to build your own icon font using tools like Fontello, IcoMoon, etc. And if you wait a little longer you'll be able to upload them using EPro v2.6. Or as you just said, you can use SVGs and go about your way right now. I'm pretty sure you won't need so many icons as you're saying.

Just be reasonable and enjoy the possibility of being able to add more icons, it's been more than 3 years waiting for this...

@mlwilkerson

This comment has been minimized.

Copy link

commented Jul 9, 2019

Something else to consider regarding subsetting (loading only the icons you use):

Font Awesome Pro Kits do "auto-subsetting" and some pretty significant leveraging of browser caching. For the SVG/JS technology, it will load only the specific icons you use that aren't already cached.

For the Webfont/CSS technology, it loads in "chunks", which are basically incremental updates by version. So the browser will only load the chunks referenced by the icons you actually use. And it will only hit the network for chunks that are not already cached in the browser.

And those caches are not site-specific. Which means that if a user's browser already has a bunch of the assets cached from visiting site A that uses Font Awesome Kits, then when he or she visits your site that uses Kits, it will leverage what's already cached and possibly not hit the network at all for the icons on your site.

In many cases, this kind of optimization will be more efficient than building custom subsetted font files and hosting them on your own web server or CDN.

@steve231293

This comment has been minimized.

Copy link

commented Jul 10, 2019

@steve231293

Thanks for the suggestions:

  1. Adding both onClick and onDoubleClick event listeners to the same Element could cause issues and behave differently in different browsers as well as not considered accessible, so its a nice Idea but ...
  2. Nope, not a bug, It's acting exactly as it should. You should use the proper elementor/icons_manager/additional_tabs hook instead of this one, which is an internal one anything else is custom to it. Also, don't set the native property as you are adding something that is not native 🤪.

Thanks.

Hello @bainternet,
Thanks for your comment.

  1. Yes, so what do you think about change double click to click on focused item?
    When click on Icon, Focus it if it not, else Selected it & close popup.

  2. I know & try that hook "elementor/icons_manager/additional_tabs". But the reason that i used hook 'elementor/icons_manager/native' to want to show it right after Font Awesome - Brands.

In Elementor PRO plugin, I can see you also used native hook to add Font Awesome - Light & it show right after Font Awesome - Brands. so i think there is a bug here. please check it again.

Thanks.

@alriksson

This comment has been minimized.

Copy link

commented Jul 12, 2019

@zeinnicholas Yes and no. The same way I would do manually on the side and they load solid or regular they could be doing in the icon library. Regenerate and just execute what is used on the frontend in terms of icons. Meaning you create your own template and library within the framework of icon library and in Wordpress > elementor instead of outside the framework and upload.

I don't agree that they can not do this in the library or globally in all widgets. Just simple smart things such as. If I want to use the same styling to all sections. Why not let me style it once and apply the style to all sections and columns. Right now elementor make them unique and I have to add the same styling duplicated in 50 sections if that's what I use. I think there are many smarter ways to solve it for performance and still not cause combability issues.

"style sections individually or globally" Yes ( ) No ( ). And then you can disconnect sections individually as well if you want. Same way as global widgets. That is just a tiny way to be smarter and improve things. And then work towards do not load if not used. Elementor addons start to apply this without issues for better performance. If tablesorter.js is not used in the table widget do not load that script that is needed for the function but not needed if not used.

I already use my custom font packages with the custom elementor icons and works but would be best and easier if I could do it directly in wordpress and elementor that's all.

@alriksson

This comment has been minimized.

Copy link

commented Jul 12, 2019

@mlwilkerson But elementor does not use Font Awesome Pro Kits. But you mean to implement this instead of custom creation with fontello. Might be an option. I see the technology you use and utilize which is still better than the default. But it's also an extra lookup and js loaded. But have to test I guess to see how well it works.

@zeinnicholas

This comment has been minimized.

Copy link

commented Jul 12, 2019

@alriksson Dude, you're all over the place... I can't even respond to that. If you don't like how things work, use an alternative. No one is forcing you to use Elementor.

Anyhow, it seems to me that you want personalized functionalities. In that case you should hire a professional to provide support for your needs. Other than that, most of the things you're talking make no sense in the bigger picture (for me at least). It looks like you can't understand how things work. I understand that you want things to work in a specific way to better suit your needs, but most of the things you're saying don't apply well for the majority of the user base. Hell, people can't even update the plugin properly without messing things around, imagine the confusion of what you're suggesting. Again, if you want a more personalized framework you should build your own or hire a professional to do it for you... Just stop complaining, it doesn't add to anything for anyone...

@alriksson

This comment has been minimized.

Copy link

commented Jul 12, 2019

@zeinnicholas excuse me? I fully understand elementor can't apply one size fits all. I asked for improvements and how they can be solved. Then I would rather want elementor who are respectful to explain that this would be hard due to this or that. Maybe I don't see all the issues it may cause, but my opinion and suggestion are still valid.

Respect other users. If I want a custom solution I would hire a developer but then I wouldn't use Elementor or be here at all. I'm like everybody else wants to see improvements and ask. Instead of fighting against it can have a reasonable conversion in a thread. Neither elementor have the attitude of "if you don't like it the door is there". We all sit in the same boat, and of course, a user (which elementor appreciate) can push feedback and preferred requirements and improvements.

Nobody has complained? Of course, you can ask for solutions and features, this is what driving elementor development forward, constructive feedback and not rude.

You may not like my suggestion, that's fine with me, but then you stop there. There is no point having a discussion like this.

@zeinnicholas

This comment has been minimized.

Copy link

commented Jul 12, 2019

@alriksson Okay.

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