Elementor 文档

Hosted Elementor Website FAQ

General

What is Elementor?

Elementor is the ultimate WordPress website builder which enables you to create beautiful websites intuitively, professionally, and without having to write code.

What is the difference between Elementor and WordPress?

WordPress is a CMS or content management system. It is essentially a database of all the content in your website. Elementor is a frontend editor for this database, allowing you to arrange and display the content in a visual and easy-to-use way.

How do I get started with Elementor?

For a complete guide to getting started with using Elementor, visit our Academy learning center. Here you will find a complete course to help guide you through the steps.

My Hosted Elementor Website

What is a Hosted Elementor Website?

Elementor Hosted Websites give users all the power of the professional version of Elementor, along with a place to host their websites. Because the Elementor Hosted Website servers are optimized for Elementor, building a site with  Elementor is faster and easier than ever. 

How do I move my site from my present host to a Hosted Elementor Website?

Elementor has both an export and an import kit. Export Kit will allow you to export either all, or some, of your Elementor content from one website and import it into another using the Import Kit. Imported pages and templates will retain display conditions and site settings including colors, typography, and other globals.

Can I transfer my Hosted Elementor Website to another hosting provider?

Yes, your website is completely transferable between hosting providers. We have even simplified this process with our export and import kits. However, please note that you must have WordPress installed on the new host and if you』re using Elementor Pro functions, you must have the Elementor Pro plugin installed in the new host. 

How do I link my domain name to my Hosted Elementor Website?

The first step is to purchase a domain. You can do this by following these steps. Once you have a domain name, follow these steps to add your domain to your Elementor Website account. 

Can I switch to a different custom domain name? 

You can change your custom domain at any time. The process is similar to 「Adding Your Own Domain.」

Do Hosted Elementor Websites offer SSL encryption?

Yes, we provide SSL by Let』sEncrypt.

What themes do Hosted Elementor Websites work with?

Elementor Hosted Websites work with all themes which are compliant with the coding standards of WordPress as set by its Codex. We』ve tested it on hundreds of themes, making sure everything works perfectly, down to the last pixel.

What plugins do Hosted Elementor Websites work with?

Elementor Hosted Websites work with almost all WP plugins. If you experience an incompatibility issue, please report it to us and link to the plugin which conflicts with Elementor.

Note: Some plugins are not allowed on Elementor Hosted Websites. For a list of dis-allowed plugins please click here.

What is SiteLock?

Elementor Website sites are locked by default. This feature is called Sitelock and means that visitors are blocked from viewing your site unless they have a PIN code. This enables you to work freely without worrying that users will stumble across your unfinished site. Sitelock also prevents search engines from discovering your site and negatively affecting your score. When you finish building your site and are ready for visitors, turn Sitelock off. 

See here for more details about Sitelock.

Editor

How do I create a new page?

From the dashboard, go to Pages > Add New.  From the WP editor, give your page a title, click the publish button (twice), and then click the Edit With Elementor button. Learn more here.

You may additionally write your content in the WP editor and use the Single Page Template in the Theme Builder to style all page layouts.

How do I create a new post?

From the dashboard, go to Posts > Add New. From the WP editor, give your post a title, category, featured image, and publish your post. Click the Edit With Elementor button to edit your post.

You may also choose to write your content in the WordPress editor and use the Single Post template of the Theme Builder to style the content layout.

What is the Theme Builder?

The Theme Builder turns Elementor from a page editor into a full website builder. With the Theme Builder you can build and design: Any theme』s header and footer, archive page templates, single post or single page templates, search page format and layout, 404 page format, your WooCommerce store layout, and more!

How do I start working with Theme Builder?

From the WP dashboard select Templates >Theme Builder.     

Can I create my own theme? 

While it is possible to create every part of your theme using Elementor templates, and create an infinite number of websites with unique designs, you cannot export a complete standalone WP theme that bundles all the theme parts. You can, however, export the individual elements that make up a theme separately, or bundle them as a template kit and use the Export/Import feature on the new site.

Can I edit all Woocommerce Pages?

You may edit the Single Product template, and Product Archive template, in the Theme Builder The cart, checkout, and my account pages may be edited by using Elementor. Future versions will enable the editing of the thank you page and additional styling features. 

Billing

What payment methods does Elementor accept?

You can use Stripe, PayPal or any major credit card to purchase Elementor Website.

Can I have my clients pay for the website?  

Yes – You can add your client』s billing information to your Elementor Hosted Website subscription via the subscription page in your account dashboard (my.elementor.com)

Facebook Like Button Widget (Pro)

Add a Facebook Like Button  to your website, so you visitors can like your pages or posts.

Content

Button

Type: Choose a Button Type, either Like or RecommendLayout: Select from either Standard, Button, Button Count or Box Count buttons.Size: Set the Button size, either Small or LargeColor scheme: Select between Light and Dark schemesShare button: Includes a Share Button next to the LikeFaces: Show Profile photosTarget URL: Set the Like Button for the Current Page or a Custom URLURL Format: Select Plain Permalink or Pretty Permalink

Note: You must also enter your Facebook App ID in the Elementor Settings > Integrations tab.

Note: If you are developing for European based sites, users must accept cookies, and be currently logged in to Facebook before the like, share, or comment buttons are displayed on the front end.

Having Problems Using Elementor? Start Here

If you are experiencing problems using Elementor, please try to follow these steps:

Read our documentation and check our FAQ. Make sure your server』s PHP version is above 5.4, although above 7.0 is ideal.

Make sure you are using the most updated versions of Elementor, WordPress & your theme.

Deactivate all your plugins besides Elementor (and Elementor Pro). If this solves the problem, gradually activate your plugins one by one, until you spot the problematic plugin.

If you have a caching plugin, make sure you deactivate it, or even better – purge the cache.

Change your WordPress theme (temporarily) to WordPress Twenty Nineteen (or other default WordPress theme).

On your WordPress root folder, edit the wp-config.php and set the value of WP-DEBUG to true.

Ask in The Elementor Community

Under Elementor > Settings > Advanced switch editor loader method on

If you cannot load Elementor, see this guide

If you have followed all these steps and you』re still encountering difficulties, please Customer Experience following these steps:

Describe the issue and what led to it. Please be as accurate and detailed as possible.

If you suspect the issue was caused by the theme or plugin you are using, please attach the name + URL of the theme/plugin.

Send us your system info. You can find it in under Elementor → System info. Please use Pastebin to paste it and send it to us.

On the Elementor page, Press F12 and select the console tab. Paste the messages in Pastebin.

Important: You should make a complete backup of your website before contacting customer experience.

How To Add Facebook Pixel To Elementor

The Facebook Pixel allows you to track, measure, and analyze user actions on your site and then be able to use this information to reach customers again in future Facebook ads. To make use of it, you』ll need to first create the Pixel in your Facebook Events Manager by following the official Facebook instructions to manually add pixel code. Once you have the code, you are ready to paste it into your site.

There are two basic ways to add this code.

Method 1 (easiest): Use Elementor』s Custom Code Feature To Manage The Code

You can easily insert tracking codes to your website by using the Custom Code feature in Elementor.

Navigate To Dashboard > Elementor Custom CodeCreate A New Custom Code, and name it Facebook Pixel (or as desired)Paste the code that you obtain from Facebook into the main content region of the Custom Code editorSelect the location of the code to load at the headerSet the display conditions to Entire Site, or a selected landing page if needed.

For more info click here.

Method 2 (more technical): Edit Your Child Theme』s header.php Code

Simply paste the code that you obtain from Facebook into the header.php of your child theme.

Warning: Never update your core / parent theme code, as anything you change will be deleted during the next theme update. Always use a child theme if you plan to edit any of the code. 

Note: You can also choose to use one of Facebook』s Pixel Partner Integrations such as its WooCommerce integration if you prefer. This document does not address that method since there are many integrations to choose from, and Facebook has documented each of them. The following directions are only for the manual method of adding the code.

Add Google Analytics and Google Tag Manager to Elementor

You may use the Elementor Custom code feature to easily add your Google Tracking codes. You may also use the display conditions to target certain pages for events.

Navigate To Dashboard > Elementor Custom CodeCreate A New Custom Code, and name it Google Analytics (or as desired)Paste the code that you obtain from Google into the main content region of the Custom Code editorSelect the location of the code to load at the headerSet the display conditions to Entire Site, or a selected landing page if needed.

For more info click here.

To add Google Adsense to Elementor, use the HTML widget to enter the code provided to you by Google.

Custom Code (Pro)

The Custom Code feature allows you to add CSS and snippets of code such as Google Analytics code or Facebook Pixel code and assign it to load in the location of your choice, with the priority you set. There is no need to edit your theme』s files.

To add a new Custom Code, go to Elementor > Custom Code and click the button to add new code.

Here, you』ll be able to add your custom code snippet into a smart code editor, select the location with the page』s structure to include it  (e.g. either in the page』s head element, or at the beginning or end of the body tag), and set its run priority. If you register two scripts in the same location, the priority you set will determine which one of them will load first (1 is the most important, to 10, the least important). Finally, you can assign display conditions just as you would for any Elementor Site Part (Header, Footer, etc). Once you』ve finished, publish your code and it will be live on your site.

Getting Started

Title: Enter a title to help you identify this code snippet in the futureLocation: Select the location for the script, to be applied either in the page or at the beginning of the page』s body ( – Start) or at the end of the page』s body ( – End)Priority: Select the priority level (1 – 10) for this script to run. If multiple scripts are assigned to the same location, the priority levels will determine the order in which they are run. Note that lower numbers indicate higher priority. So a script with a priority of 1 will have a higher priority than a script with a priority of 5.

Adding Scripts

Enter or paste the code snippet in the text area. The text area includes an internal code linter, which is a code analysis tool, that checks for errors or problems and notifies you of any it finds. This allows you to correct the problems before saving.

Adding CSS

In addition to scripts, you may also add CSS to your website by wrapping it between the HTML style tag. This allows you to only include the CSS based on the conditions you set. Example below:

Setting Conditions

Click the Edit link next to Conditions in the Publish block to add conditions to determine where your code snippet is used throughout the site. Select Entire Site if you want it to be used everywhere, or limit it to certain pages, archives, etc. You can also add conditions to exclude it from certain areas of your site. Learn more about conditions here.

You can either Save this custom code as a Draft or Publish it. Either way, you can always return to Elementor > Custom Code in the future to see and manage all custom codes you』ve created.

Reset Elementor Settings Back To Default

If you have installed a kit(s) to learn, or have a sandbox site that has become cluttered with various colors and font styles and wish to reset your Elementor site back to the default settings, you may follow the steps in this document. 

Deleting And Recreating The Default Kit

What Is The Default Kit

Elementor uses a template called Default Kit located in your template library to store all the global values you assign to your site settings. All font preferences, colors, forms, buttons, and many other settings are all found in this template. This kit is required for Elementor styles to function properly.

Below is an example of the Site Settings that are stored in this template.

Deleting The Default Kit

If you wish to reset all your settings at once, you may temporarily delete the Default Kit. 

Navigate to Elementor > Templates > Template LibraryThe Default Kit is hidden from the list by default. In the search box, type 「default kit」 into the search fieldThe Default Kit will then showClick the trash link optionA popup warning will appear on your screen. Click the delete optionThe Default Kit will now be removed

Note: Deleting the default kit does not remove any content on your website. This is useful if you only want to reset the styles. 

Recreate The Default Kit

Immediately after deleting the Default Kit, you will now need a new one. If you do not recreate a new one, and try to edit your pages, a notification will appear stating your site seems to be missing the Default Kit.

Navigate to Elementor > Tools > GeneralYou will see an option to Recreate Kit. This option will only be visible if the default kit is missingClick the Recreate Kit buttonClick the save changes button at bottom of the screenThe page will reloadAll global site settings will be reset to default.

How Can I Report on Issues, Conflicts?

If you are having a conflict on your site, and you haven』t yet visited the Elementor Facebook group, be sure to join in: https://www.facebook.com/groups/Elementors/ You may also check our Community Hub and share experiences with other users.

This group is growing fast and already includes several thousand Elementor users. These include expert users that can help you with issues, problems and conflicts.

Bug Reports

The best way to report bugs is by creating a GitHub issue. 

In case you』ve come across an issue or problem with Elementor, create a new issue, write a short explanation about the issue, and describe what are the steps through which we can reproduce it. 

Don』t forget to include your system info.

Requirements

Our main goal at Elementor is to create the fastest, most advanced website builder for WordPress. To achieve this, we make sure it is based on the latest technology available.

Here are the system requirements you need in order to use Elementor.(If you are not sure whether or not your server supports this, contact your host).

Starter Checklist

Use this checklist to help guide you. Tick all that apply.

I have WP version 5.2 or greater

I have PHP version 7.0 or greater

I have MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

I have WP Memory limit of 128 MB or greater (256 MB or higher is preferred)

I have the correct folder permissions granted on my server

I have new versions of Chrome, Firefox, Safari, or Microsoft Edge version 79 or greater

I have access to a desktop or laptop computer

WordPress 5.2 or Greater

Elementor works with WordPress version 5.2 or greater

PHP 7 or Greater

Note: If your site is hosted on a server with an older PHP, you may experience issues. We recommend you to contact your hosting provider to upgrade to the latest version of PHP.

Elementor may also work with PHP 5.4+, but these older versions have reached official End Of Life and as such may expose your site to security vulnerabilities and bugs, and may not always work as expected.

MySQL 5.6 or Greater

MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

WP Memory Limit

WP Memory limit of 128 MB or greater (256 MB or higher is preferred)

Note: These requirements are for Elementor. If you are using additional plugins on your site that also have minimum requirements such as WooCommerce, you may need to increase your memory to 512 MB to help avoid loading issues. See also, the following documentation Elementor Widget Panel Not Loading.

Browsers

Please note that you must use Chrome, Firefox, Safari, or Microsoft Edge version 79 or greater to EDIT pages with Elementor. You will not be able to edit with versions of Microsoft Edge which are earlier than version 79, nor can you edit with any version of Microsoft Internet Explorer. Microsoft』s newest versions of Edge (v. 79 and higher, which was first released in January, 2020) are based on Chromium (the same base as Google Chrome), so Microsoft』s new Edge is now fully capable of editing pages with Elementor. Of course your pages built with Elementor will display as designed in all modern browsers. Most features will display properly in IE but because IE is an older browser, it is incapable of supporting some of the modern web technologies that Elementor may utilize for some of its features. For that reason, Elementor does not support IE anymore. Even Microsoft has stopped support for IE. If IE support is still critical for your particular circumstance, you may need to hire a developer to add custom code. You can find expert Elementor developers at the Elementor Experts portal.

Device

It is not possible to edit with mobile phones and tablets for the moment. You can only edit pages with Elementor on desktop computers.

Servers

If your website is hosted by WP Engine, you might need to add SSL to your website to avoid  saving issues.

If you use SiteGround or GoDaddy, make sure that they modify the SubstituteMaxLineLength of your server for you

X-Frame options

It has to be set to 「same origin」 to avoid  editing issues. Please ask your host to do this for you.

PHP Z-Lib Extension

It is preferable to have PHP Zlib extension enabled on your server. Please ask your host to enable this for you, if it is not.

Elementor Benefits – Pro VS Free

Elementor』s Free version offers limitless design possibilities. Elementor Pro, however, empowers you with more professional tools that speed up your workflow, and allow you to get more conversions and sales.  

Following is a long detailed list of all features of Elementor Pro, compared side-by-side with the free version of Elementor. If you, however, want a short 4 point summary of why you should upgrade to Pro today, here are the main points:

1. Theme Builder lets you customize every part of your theme. With Elementor Pro Theme Builder, you are no longer restricted to your theme limitations. You can visually design your header, footer, archive page, single posts and all other parts of your site using Elementor. This works on any WordPress theme, and requires no coding. No other theme or plugin offers this solution. By making the entire web design process visual and code-free, you are able to complete projects considerably faster than ever before.

2. Visually design forms and integrate them seamlessly. Contact forms are an essential part of every website, since they are the engines for conversions and leads. Elementor Pro』s Forms widget is revolutionary because the entire process of managing them is visual. Design your forms on the front end, then connect them to any automation marketing platform or CRM of your choosing with a few clicks.

3. Professional templates and blocks. Elementor Pro offers many more professionally made templates and blocks that can be easily customized to create stunning websites. The templates and blocks integrate the Pro widgets, so you can create pages featuring slides, animated headlines, forms and other important Elementor Pro features.

4. Key professional widgets and features. Elementor Pro includes some vital widgets and features that are important for any professional web designer. These include Animated Headlines for impressive headline design, Posts widget for an amazing display of blog posts, WooCommerce widgets, Slides, Media Carousel and custom fonts. 

Join Elementor Pro today and start enjoying the best designer solution for WordPress.

Here is the full list of free and Pro features available in Elementor:

FeatureElementorElementor ProTemplate Library✓✓Export / Import Templates✓✓Mobile Editing✓✓Shape Divider✓✓Video Lightbox✓✓Box Shadow✓✓Text Shadow✓✓Background Overlay✓✓Hover Animation✓✓Entrance Animation✓✓Heading✓✓Image✓✓Text Editor✓✓Video✓✓Button✓✓Image Box✓✓Testimonials✓✓Icon✓✓Icon Box✓✓Social Icons✓✓Image Gallery✓✓Image Carousel✓✓Icon List✓✓Counter✓✓Progress Bar✓✓Tabs✓✓Accordion✓✓Toggle✓✓Alert✓✓HTML✓✓Shortcode✓✓Menu Anchor✓✓Sidebar✓✓Google Maps✓✓SoundCloud✓✓Divider✓✓Spacer✓✓Columns✓✓Background Gradient Effect✓✓Revision History✓✓Blank Canvas Template✓✓Maintenance Mode✓✓Page Settings✓✓Element Hover✓✓Redo / Undo✓✓Formsx✓Slidesx✓Postsx✓Portfoliox✓Embed Anywherex✓Global Widgetx✓Custom CSSx✓Pro Templatesx✓ Price Tablex✓ Price Listx✓Countdownx✓WC Productsx✓WC Elementsx✓WC Categoriesx✓WC Add to Cartx✓Flip Boxx✓Masonry Layoutx✓Blog Paginationx✓Ken Burns Effectx✓Share Buttonsx✓Form Integrationsx✓Login Widgetx✓Animated Headlinex✓Facebook Widgetsx✓Blockquotex✓Nav Menux✓Media Carouselx✓Testimonial Carouselx✓Call to Action Widgetx✓Custom Fontsx✓Header & footer builderx✓Dynamic single post & archive page designx✓ACF & Toolset integrationx✓Scrolling Effectsx✓Popup Builderx✓