Elementor 文檔

Progress Bar Widget

The Progress Bar Widget allows you to add fully styled, animated progress bars to your page.

Content

Progress Bar

Title: Enter the title text that is displayed above the progress barType: Select a standard type, which sets the bar color (color can be changed under the Style tab). Choose from Default, Info, Success, Warning, or DangerPercentage: Set the completion percentage numberDisplay Percentage: Show or hide the actual percentage number text at the end of the barInner Text: Enter the text to be displayed within the bar

Style

Progress Bar

Color: Change the color of the barBackground: Choose the color of the background of the barInner Text Color: Choose the color of the text to be displayed within the bar

Title style

Color: Choose the color of the title text that is displayed above the progress barTypography: Set the typography options of the title text

Advanced

Set the Advanced options that are applicable to this widget

How To Fix 『The package could not be installed』 While Installing Elementor

You are receiving this error message because you are trying to install Elementor as a theme whereas it is a plugin.

You have to install it via 「plugins」 and not via 「Appearance > theme」 on your WordPress Dashboard:

Installation

Installing Elementor Pro

Please note also that you have to install Elementor free as well so that Elementor Pro can work given that the latter is an extension of the former.

How To Open A Browser』s Console

When troubleshooting website problems, you may be asked to check for errors in your browser』s console or to use the inspector. Each browser has its own method(s) of navigating to the Console. Listed here are the most common ways for each of the main browsers.

Tip: If you forget which keys work with which browser, try pressing the F12 function key, since many browsers open the Developer Tools with this key. From there, you can click on the Console tab located in the DevTools window.

Chrome: Press CTRL+SHIFT+J (Windows) or CMD+OPT+J (Mac) opens the DevTools window right to the Console tab.

The window will look similar to this, showing any errors in red, with the location and line number where the error occurred.

Firefox: CTRL+SHIFT+K (Windows) or CMD+OPT+K (Mac)

IE/Edge: F12

Safari: CMD-OPT-C (only works if the 「Show Develop menu in menu bar」 check box in the Advanced tab of the Preferences menu is checked).

Opera: CTRL+SHIFT+I (Windows) or CMD+OPT+I (Mac), then click the Console tab

How To Fix The 『Could Not Create Directory』 Error

This can be a permission issue. In this case, you have to contact your hosting company so that they can modify the file permissions of your server: https://codex.wordpress.org/Changing_File_PermissionsIn the meantime, you can manually update the plugin or ask your hosting company to manually update the plugin, by downloading it via our website and uploading it via FTP ( wp-content』 > 『plugins』). You will have to delete the version of the plugin that you currently use before.

It is also possible that this plugin will solve your issue

My changes do not appear online, what can I do?

https://youtu.be/O6aPEQGEaVA

Note: The first thing you should try is to open your website in Incognito Mode and see if your changes appear. If they appear – it』s probably a local caching issue. If they still don』t appear – it』s probably a server caching issue.

If your styles are not applied after saving them, it might be due to a caching issue. When your styles are not applied online, please regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard, then make sure that you clear all forms of cache including your browser cache, your WP cache (your WP caching plugin if you have one), and your server cache, if you have one. (In this case, you can contact your hosting provider for help to clear the server cache). Once all cache is cleared, save your changes:  https://codex.wordpress.org/I_Make_Changes_and_Nothing_HappensThis problem can also be due to a theme-related issue if it affects the typography only (font size, font height etc…). For instance, the CSS of a theme which overrides the one of Elementor. To be sure that it is a theme issue, switch to a default theme of WordPress such as Twenty Nineteen and if it solves the problem, contact the developers of your theme. In some cases, it will be possible to solve the issue by switching the CSS print method in 「Elementor > Settings > Advanced」 on your WordPress Dashboard.If you use another page builder, it can override the content built with Elementor and you will see online the content written via the conflicting page builder and not the one written with Elementor. To fix this issue, save the page as a template and used the template on a new page. Check the following article to see how it is possible to save pages as templatesIt is also not recommended to edit back and forth between Elementor and the Classic Editor of WordPress as this can lead to content issues. Elementor is a website builder and the Classic Editor of WordPress is an editor. The way that they handle content is different. SVG images are not displayed if they do not have a width set in pixels.HTML tags that are not closed can also lead to layout issues so if you added some HTML code in the HTML widget or in another widget, make sure that all your tags are properly opened and closed.Mixed Content issues can also cause problems. Go to WordPress Dashboard > Settings > General and ensure that both the WordPress Address (URL) and Site Address (URL) are the same, and that both are either http:// or https://. If you have http/https mixed content problems, then you will often see missing images or missing icons on your live site.

520 Error While Trying To Edit With Elementor

If you get a 520 Error – 「Web server is returning an unknown error」, check the following:

Try a different browser to troubleshoot.If you are using Cloudflare, you may have a problem with its Rocket Loader feature. Click to learn how to resolve this issue.

Downloading Elementor with Safari on Mac

If you download Elementor (free or Pro) using Safari browser for Mac, you might encounter the following issue:

Safari automatically opens ZIP files and therefore, you cannot download Elementor as a ZIP folder.

In order to fix this, go to your Safari Preferences and under General, uncheck 『Open 「safe」 files after downloading『.

Note: The file has to be compressed and uploaded as a ZIP file.

Destination folder already exists

If you are trying to install Elementor or Elementor Pro and get this error message: 「Destination folder already exists」, this means that your Plugins folder already contains a folder for Elementor (or Elementor Pro) and this is why you cannot upload it again.

What you should do in this case, is to log in into your FTP and under wp-content/plugins, delete the relevant folder. 

After this, you will be able to upload the plugin from scratch in your WP dashboard.

Parse Error Syntax Error

If you receive the message 「Parse Error Syntax Error」 while uploading Elementor to your website, upgrade your PHP version to PHP7 to meet our requirements.

It is highly recommended to use the latest version of PHP to avoid bugs and security breaches.

There Are Red Circles That Prevent Me From Editing. Can』t drag and drop.

If you cannot drag and drop, this is generally due to the use of Internet Explorer or older versions of Microsoft Edge to edit with Elementor. 

It is not possible to edit with older versions of Microsoft browsers. Please edit Elementor pages with Safari, Chrome, Firefox, or Microsoft Edge, version 79 or greater. Microsoft』s newest version of  Edge, which was first released in January of 2020 is now based on Chromium (which Google Chrome is also based on), and therefore it is now compatible with editing with Elementor. 

Of course, pages built with Elementor do show up in the browsers of Microsoft on the front end.