诗语，作者 Elementor 文档 - 第 3 页共 57 页

Sticky Scrolling Effect (Pro)

The Sticky Scrolling Effect lets you set a Section/Widget as sticky, so that it sticks to the top or bottom of the screen.

Watch a video of a cool example of a sticky scrolling effect.

Scrolling Effect

Edit the Section/Widget by clicking its handle Click the Advanced tab in the panel Open the Motion Effects sectionSticky: Choose to set your section to 「stick」 to the Top or Bottom of the screen, when scrollingSticky On: Select on which devices your section will be sticky, Desktop, Tablet, or MobileOffset: Pushes the sticky element up or down by pixelsEffects Offset: The number of pixels the user must scroll before the sticky effect begins

Note: Effects Offset affects only if CSS was added to the sticky element. Learn more here.

Learn more about Sticky

WooCommerce Cart Widget

Using the Elementor WooCommerce Cart Widget, you may customize your cart layout. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section.

When publishing, you will be prompted with the option to automatically set your new page as the default cart page rather than needing to go through the WooCommerce settings.

Content

General

Layout: From the dropdown menu, select between one column, or two column layoutSticky Right Column: If two column layout is used, use the toggle control enable / disable sticky option for the right columnOffset: If sticky option is enabled, enter a value in PX to offset the top margin of the sticky effect

Order Summary

Update Cart Button

Text: Enter the desired text in the field or using the dynamic options

Coupon

Apply Coupon Button

Text: Enter the desired text in the field or using the dynamic options

Totals

Title

Section Title: Enter the desired text in the field or using the dynamic optionsAlignment: Using the icons, select between left, center, or right alignment

Update Shipping Button

Text: Enter the desired text in the field or using the dynamic options

Checkout Button

Text: Enter the desired text in the field or using the dynamic optionsAlignment: Using the icons, select between left, center, right, or justified alignment

Additional Options

Update Cart Automatically: Use the toggle control to enable or disable AJAX loading of the cart totals.

Style

Sections

Background Color: From the color picker, choose the background color for your sections. This color will apply to all sections. You may apply a different background color to a section(s) in the Customize options shown below Box Shadow: Click the pencil icon to set the color and shadow optionsBorder type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %Margin: Enter a chosen value in the fields based on px, em, or %

Typography

Titles

Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow (Titles Only): Click the pencil icon to open the shadow properties options.Spacing: Use the slider to increase or decrease the spacing between components.

Descriptions

Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.

Links

Choose the appearance of the link options on normal and hover states

Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below

Radio Buttons

Forms

Layout

Column Gap: Use the slider or enter the value in the field in PXRows Gap: Use the slider or enter the value in the field in PX

Labels

Color: From the color picker, choose the color for your labels. This color will apply to all labels.Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.

Fields

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text.Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders (Fields)

Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders (Button)

Order Summary

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Items

Color: From the color picker, choose the color for your ItemsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Variations

Color: From the color picker, choose the color for your VariationsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Product Links

Choose the appearance of the link options on normal and hover states

Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below

Dividers

Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Quantity Borders

Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Remove Icon

Choose the appearance of the link options on normal and hover states

Color: From the color picker, choose the color for the icon.

Totals

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Titles & Totals

Color: From the color picker, choose the color for your Titles & TotalsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Checkout Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow: Click the pencil icon to open the shadow properties optionsText Color: From the color picker, choose the color for your button text. Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.Border type: From the dropdown menu select between solid, double, dotted, dashed, or groovedWidth (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Customize

The customize option allows you to style a section(s) independently of the other sections. Click the + icon to add or remove actions from the customizer. Additional styling options per section will appear below the customizer.

Advanced

Global Advanced tab options are available for this widget.

WooCommerce Checkout Widget

Intro

Elementor』s WooCommerce Checkout widget can provide you with an even more customizable solution for your ecommerce website. You may edit the section titles, labels, and placeholders of the form fields. You may also style the layout, typography, and color options as a whole, or customize even further by section.

When publishing, you will be prompted with the option to automatically set your new page as the default checkout page rather than needing to go through the WooCommerce settings.

Content

General

Billing Details

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsAlignment: Using the icons, select between left, center, or right alignmentForm Items: For each of the form items you may edit the options belowLabel: Enter the desired value in the text fieldPlaceholder: Enter the desired value in the text fieldAdvanced Options: Additional options may be found in the advanced tab belowDefault Value: Enter a default value in the text field if required.

Shipping Details

Additional Information

Additional Information Toggle: Use the toggle control to show / hide the additional information section.Items: For each of the items you may edit the options belowLabel: Enter the desired value in the text fieldPlaceholder: Enter the desired value in the text fieldAdvanced Options: Additional options may be found in the advanced tab belowDefault Value: Enter a default value in the text field if required.

Your Order

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsAlignment: Using the icons, select between left, center, or right alignment

Coupon

Section Title: Edit the default section title by entering text into the field or choosing the dynamic settingsLink: Edit the default text of the coupon code link by entering the value in the text fieldAlignment: Using the icons, select between left, center, or right alignment

Payment

Terms and conditions

Message: Enter the value in the text field or use the dynamic settingsLink: Edit the default link text by entering the desired value in the text field

Purchase Button

Alignment: Using the icons, select between left, center, or right alignment

Style

Sections

Typography

For each of the following components, Titles, Secondary Titles, Descriptions, Messages, Checkboxes, and Radio Buttons the following style options are available.

Links

Choose the appearance of the link options on normal and hover states

Link Color: From the color picker, choose the color for your links. This color will apply to all links. You may apply a different color to a link(s) in the Customize options shown below

Forms

Layout

Column Gap: Use the slider or enter the value in the field in PXRows Gap: Use the slider or enter the value in the field in PX

Labels

Color: From the color picker, choose the color for your labels. This color will apply to all labels. You may apply a custom color to a sections labels in the Customize options shown below Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsSpacing: Use the slider to increase or decrease the spacing between components.

Fields

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders

Order Summary

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Items

Variations

Dividers

Color: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Titles and Totals

Divider Total

Color: From the color picker, choose the color for your Divider TotalWeight: Use the slider or manual enter a value in the field (PX, EM)

Purchase Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow: Click the pencil icon to open the shadow properties optionsText Color (Text): From the color picker, choose the color for your field text. Background Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved

Width (border): Enter a chosen value in the fields based on px, em, or %Color (border): From the color picker, choose the background color for your borderBorder Radius: Enter a chosen value in the fields based on px, em, or %Padding: Enter a chosen value in the fields based on px, em, or %

Customize

Advanced

Global Advanced tab options are available for this widget.

WooCommerce My Account Widget

Personalize the account page of WooCommerce with the My Account widget. Change the layout, tab names, tab alignment, as well as colors, and fonts. When publishing, you will be prompted to automatically assign this as your default My Account page in the WooCommerce settings.

Content

Tabs

Layout: From the dropdown menu select between vertical or horizontalSpacing: Use the slider or manually enter a value in PX, EM, or %Tab Names: Click each tab name to edit the valueAlignment: Use the icon to select between left, center, or right alignment

Style

Tabs

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsBackground Type: Use the icons to choose between a solid or gradient background for the normal, hover, and active statesColor (background): From the color picker, select the color(s) of the tab for the normal, hover, and active statesImage: Click to select or upload an image to the media library to use as the background image of your tab for the normal, hover, and active statesBox Shadow: Click the pencil icon to open the shadow properties optionsColor (Text): From the color picker, choose the color for your field text.

Borders

Dividers

Color: From the color picker, choose the color for your DividerWeight: Use the slider or manual enter a value in the field (PX, EM)

Sections

Background Color: From the color picker, select the color for your sectionsBox Shadow: Click the pencil icon to open the shadow properties options

Borders

Typography

Section Titles

Color: From the color picker, choose the color for your titles. This color will apply to all section titles. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow (Titles Only): Click the pencil icon to open the shadow properties options.Spacing: Use the slider to increase or decrease the spacing between components.

General Text

Color: From the color picker, choose the color for your text. This color will apply to all text.Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Color: From the color picker, choose the color for your messagesTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Checkboxes

Links

The following options are available for normal and hover states.

Color: From the color picker, choose the color for your links

Forms

Layout

Column Gap: Use the slider or enter the value in the field in PXRows Gap: Use the slider or enter the value in the field in PX

Labels

Fields

Borders (Fields)

Button

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders (Button)

Order Details

Layout

Rows Gap: Use the slider or enter the value in the field in PX

Titles and Totals

Color: From the color picker, choose the text color for your titles and totals. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsText Shadow: Click the pencil icon to open the shadow properties options.

Items

Color: From the color picker, choose the text color for your itemsTypography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Product Link

The following options are available for normal and hover states.

Color: From the color picker, choose the color for your product links

Dividers

Border Type: From the dropdown menu select between solid, double, dotted, dashed, or groovedColor: From the color picker, choose the color for your DividersWeight: Use the slider or manual enter a value in the field (PX, EM)

Buttons

Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing optionsColor (Text): From the color picker, choose the color for your field text. This color will apply to all field text. You may apply a custom color to a sections field text in the Customize options shown belowBackground Type: Use the icons to choose between a solid or gradient backgroundColor (background): From the color picker, select the color(s) for the fieldImage: Click to select or upload an image to the media library to use as the background image of your fieldBox Shadow: Click the pencil icon to open the shadow properties options.

Borders (Button)

Advanced

Global Advanced tab options are available for this widget.

Learn What Site Lock Is

Why do visitors need a pin code to see my site?

By default, Elementor cloud sites are locked. Visitors to your website are blocked from viewing it by a lock screen that requires entering a pin code. This enables you to work freely, without the pressure of someone looking over your shoulder (or at your site) without you knowing it.

Site Lock also prevents search engines from discovering your site. This way your SEO score won』t be affected unnecessarily (while working on your site.)

Where can I find my pin code?

In your Elementor Dashboard, click the cog of any cloud site to access cloud site details. Under Site Lock, slide the toggle button to switch it on or off.

To view your site lock』s passcode, click the eye icon. To copy the passcode to your clipboard, click the Copy icon. To reset the passcode, click the Reset icon.

Going live

When you are ready to go live and make it discoverable, simply remove the Site Lock so potential visitors can see it without having to enter a pin code.

Note: To fully enable search engines ability to crawl your website you must also navigate to Dashboard > Settings > Reading and uncheck the 「Discourage search engines from indexing this site.」

What is the difference between Site Lock and Maintenance Mode

Site Lock is an Elementor Cloud only feature to block traffic at the server level. It will display a default Elementor page and prompt users to enter a pin code. You cannot customize this page. Elementor also offers a Maintenance Mode and Coming Soon feature. This allows you to temporarily block visitors to your site by displaying a custom page, while allowing access to editors. You may fully customize this page to feature a countdown timer or collect email addresses for early adopters. Learn More in this blog post.

How To Use Site Kits

Table Of Contents

What Are Site KitsSelecting a KitHow Kits Are StructuredFree KitsApplying A KitEditing The ContentEditing The PagesEditing The PostsEditing The Theme PartsEditing The PopupsEditing Site Kit Global SettingsEditing The Global FontsEditing The Global ColorsEditing The Site IdentityAdding The LogoCreating The MenuCreating A Menu With The CustomizerOther Information

What Are Site Kits

Site kits are a bundle of templates, pages, pop ups, and all the needed parts for a complete website. Rather than importing each template individually as we have done in the past, you may now import all the content at once. The Kits Library can also help users learn about website structure, including all must-have pages and parts that every website needs to include. Each kit comes with a complete design and structure of a full website and includes content pages, Theme Builder parts, and Popups. Learn more here.

Selecting a Kit

You may open the kit library by navigating to the WordPress Panel > Templates > Kit library. From there, you can choose one that best suits your needs. Kits can be completely edited after importing so use your imagination if a specific template genre is not yet available.

How Kits Are Structured

Site Kits are bundled with all the needed site parts and templates.You can see a working demo of the complete kit before importing. By clicking the Overview button at the top of the kit, you may view all the items that you will be importing. These typically include several demo Pages, Posts, and all the Theme Builder Site Parts (header, footer, archive, single post, single page, 404, etc).

Free Kits

Free kits are included in the library. They will only contain sections, widgets, and settings available to free users. Hello theme users may use the Header and Footer Customizer in the Site Settings in order to customize these site parts. This option is active on all new sites. If you have an existing website, you may need to enable this feature by navigating to Elementor > Settings > Experiments and activating the option.

Applying A Kit

When you have selected the Site kit you would like to use, you may start the Import process below:

Click the Apply Kit buttonSelect the content you wish to import. You may keep all toggled, or only choose to import parts of the kit. Once completed, click the green Next button at the bottom of your screen.The importer will now process your request. Do not close or refresh this page until complete.If your website already has Theme Builder Templates assigned, you will be asked to select the templates you wish to override. Unselected templates will still be imported but without display conditions.Once the import has completed, you will see a complete list of all imported content. You may now return to the dashboard and view your content.

Editing The Content

Editing The Pages

Your kit will import several pages. These can be found in the Dashboard > Pages area of WordPress. To edit them click the Edit with Elementor link. For more information on editing with Elementor click here.

Editing The Posts

In order to help get you started, sample Posts will be auto generated, this helps you to visualize the Archives, Single Post, and other Kit layouts. Once you have started adding your own content these posts may be deleted.

Editing The Theme Parts

The Kits will also import the Theme Builder Theme Parts. These will include the Header, Footer, Archive, Single Post, Single Page, and 404 Page (if applicable to the Kit) You can find these parts in the Theme Builder. For more on the Elementor Theme Builder click here.

Editing The Popups

If your Kit includes popups for contact forms, navigation, or other uses, you may locate these in the dashboard located in the Templates region.

You can add the Kit Popups to the icons or links by using the dynamic options. For more about popups click here.

Editing Site Kit Global Settings

When working with Site Kits, the Global Fonts and Colors have already been set up for you. To edit these, we will use the Global Site Settings.

Editing The Global Fonts

Locate the Site Settings – You may find the site settings from the top corner of your editor panel.Locating the Global Fonts – The Site Kit fonts are all located in the Global Fonts settings pictured below.Locating the Main Hero Title settings – In our example, we are editing the Main Hero Title. You will find this in the list of imported styles. Editing the settings here will update the font on all usages in your site.Changing the Font Settings – Select the new family you wish to use for your Main Hero Title throughout the website. You may also set the size, weight, transform, style, decoration, line-height, and letter spacing at this time.Update your site settings – Click the blue update button at the bottom. You may edit the other global fonts located on this page at this time, or return to the editor.

Editing The Global Colors

Your Site Kit also uses Global Colors in headings, text, backgrounds and buttons. These may also be found in the Site Settings at the top under Global Colors. You may edit these using the color picker. These settings will apply to all the applications used on your Kit. Learn more about Global colors here.

Note: You may find that some kits also use the general site background color. You can change this located in Site Settings > Settings > Background.

Editing The Site Identity

Navigate to Site Settings > Site Identity. Here you can change the name of your site, the tagline, the logo, and the favicon.

Adding The Logo

To add a logo to your imported Kit, you may assign it by uploading your logo in the Site Identity settings. It will then be used for the header and footer of your website when the Site Logo Widget is used. You may use jpg, png, and GIF file types.

Note: SVGs may be used if previously uploaded to the media library. You must also define a size in the style tab of your Site Logo Widget.

Creating The Menu

At this time, the Site Kit does not automatically create your Navigation Menu. You will need to create your own menu from the WordPress dashboard located at Appearance > Menus or from the Customizer.

Creating A Menu With The Customizer

From the top Admin Bar of your website, choose to enter the Customizer. For this example we will be using the Hello Theme. Select the Menus accordion here:

Click the Create New Menu buttonName your new menu (example: Primary) and toggle the menu location.Click the Add Items button. A panel will expand showing the available items to add to your menu. Add our newly imported Elementor Pages.You will now have these pages in your menu. You may click and drag to reorder them as desired.You can also add Categories or other content related to your Kit by expanding the items.Create Sub-Menus by dragging the items under a parent item so they are slightly indented.Publish your menu. It will now appear in the header of your kit.

Other Information

Note: Learn more about the Navigation Widget here.

Note: Please be advised that some of the Kits contain third-party images, videos, media, files, audio and other visual components. While we have the right to use them in our Kits Library, we cannot ensure that you may use them in your own product. Therefore, please replace or remove all above assets from your copy of the Kits.

Important: Importing Site Kits may overwrite or append your current sites data. It is best to use Site Kits on a new installation or after a reset. Please make a backup if installing a kit on an existing site.

Hosted Elementor Website: Purchasing and Registering a Domain

In order to use a custom domain on your Hosted Elementor Website, you must have a name registered with a third party. Elementor does not offer registration services at this time. Commonly used registrars are:

GodaddyNamecheapGoogle DomainsDomain.comHover

Note: For this document, we will be using GoDaddy as our example. Other providers will be similar steps.

Picking a domain name

Choose your name carefully, as it is often the easiest way for people to recognize, and find you. Your domain should be as short as possible but use specific terms. For example freds.com is short but does not describe you in any way. Using fredsbarbershop.com would be much better in terms of visitors finding you.

Buying your name

You can expect to pay about $15 USD for a domain name per year. Some of this money goes to ICANN for the actual registration and the rest to the company for DNS services. Most companies offer a discounted rate for multi-year contracts. Choose the plan best for you or your client.

Using your name

Once purchased, it may take a few minutes to be added to the system. You may then visit your account page and set up the DNS to be pointed to your Hosted Elementor Website. Learn more about connecting your domain here.

Elementor Library FAQ

What is the Elementor Library?

The Elementor Library is a library which contains over 30 pre-designed page templates, as well as templates that were saved by the user. The Library allows you to quickly create designed pages and customize them to be your own, saving you from building all pages from scratch.

Pick any template from the library and add it to your page with one click. It saves you time and energy.

For tutorials about the Elementor Library, check this guide. Check out the Hero kit templates we previously released.

Where can I find the Pre-designed Templates?

Click on the 『Add template』 button

Where can I find my saved Templates?

All the templates that you saved can be found under Templates in your WordPress Admin Dashboard.

These templates are also available, along with the pre-designed templates, in the Library that is accessible from the Elementor panel.

Is there a hotkey to open the template library?

Yes. 『Ctrl / Cmd + Shift + L』 opens up the Template Library modal.

Are there landing page templates in the Elementor Library?

Yes. Several landing page templates are available in the Elementor Library. It is easy to identify them in the list since their title always includes the words 「Landing page」.

The 「Insert」 option is gone, what can I do?

1. Try to deactivate all your plugins (besides Elementor) and see if it solves it.

2. If it didn』t help, try to switch your theme to a default WP theme such as Twenty Sixteen.

How can I export a template?

Check the section 「How to export / import templates to external websites」 of this guide for the whole procedure.

How to import a template to another website?

Check the section 「How to export / import templates to external websites」 of this guide for the whole procedure.

Can I sell pre-built templates that use Elementor Pro elements?

Yes! You are allowed to sell pre-built templates, even templates that are designed with Pro elements. Please make your end users aware, however, that when templates are made with Pro elements, those elements will only be active and visible if the end user purchases Elementor Pro.

SUPPORT

I am trying to save several templates to my Templates library but, for some reason, I can』t. What is the problem?

Go to Elementor > System Info in your WordPress Dashboard and check whether Elementor』s Library is connected or not. Go to Elementor > Tools in your WordPress Dashboard and synchronize the library.

If it still doesn』t work, please contact your hosting company and ask them to set this configuration: allow_url_fopen

I cannot load templates, what can I do?

Go to Elementor > System Info, and check whether Elementor』s Library is connected or not.Go to Elementor > Tools and synchronize the library.

Click on 「sync library」 in the 「tools」 tab of Elementor in your WordPress dashboard if it is not synced yet.

I purchased Elementor Pro but when I try to use a Pro template I am required to go pro, why?

This happens when Elementor does not recognize that you have a Pro license key. In this case, verify that you have the latest version of Elementor Pro. Go to Dashboard (in your WP Dashboard) >Updates > and click on Check again.

When I try to load a template I receive the error cURL ERROR 7? What should I do?

In this case, you have to contact your Hosting Company so that they can change the configuration of your server that blocks the request.

The predesigned templates in the library do not load for me, why?

This is generally due either to a memory issue or to the configurations of your server (file permission issues).

Verify if you meet the requirements of Elementor regarding the WP memory limit and check via your console browser if you receive 403 errors.

If you cannot open the library, contact your hosting company and ask them to verify the configurations set on your server.

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✓

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.