Elementor 文档

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.

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.

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.

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.

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

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 %

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

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)

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.

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

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

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

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

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

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.

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

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

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

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 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

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

Typography

Titles

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

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 Summary

Layout

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

Items

Variations

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

Advanced

Global Advanced tab options are available for this widget.

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

Renewing the Elementor Templates Library

We will be updating the Elementor library on 12/08/2021

As part of this update we will be renewing and uploading new and improved templates for you to use. These templates will include some dedicated Pro templates alongside templates that will be available to all users.

We will also be removing some old and irrelevant ones – please see a list of deprecated templates below. You may click the link to see an archive mockup of the template for design reference. Note that these templates will be available on our library until 12/30/2021

Those of you that already downloaded them and have them in use, will not be affected by this at all and can keep using them.

About

About — ArchitectureAbout — CVAbout — InteriorAbout — StartupAbout — Delivery CompanyAbout — Cake ShopAbout — Construction CompanyAbout — Plants ShopAbout — ArchitectAbout — Ski Resort

Black Friday

Black Friday — 80』s styleBlack Friday — Retail SetBlack Friday — Nature Set Black Friday — Pop-Styled SetBlack Friday — Software Product Set

Blog Post

Blog Post — Launch

Christmas

Christmas — Design ConferenceChristmas — Snowboard CompetitionChristmas — Tree ShopChristmas — Interior DesignChristmas — Gift ShopChristmas – Car Agency

Contact

Contact — InteriorContact — RestaurantContact — ModernContact — HotelContact — Cake ShopContact — Delivery CompanyContact — Construction Company Contact — Architect

Halloween

Halloween Pack

Hero

Hero UI Kit

Homepage

Homepage — AgencyHomepage — StudyHomepage — Law firmHomepage — FitnessHomepage — InteriorHomepage — Delivery CompanyHomepage — Coffee ShopHomepage — CopywriterHomepage — AppHomepage — RestaurantHomepage — Creative AgencyHomepage — Cake ShopHomepage — Luxury HotelHomepage — Interior DesignHomepage — ProductHomepage — Goodness meal servicesHomepage — Construction Company Homepage — Plants ShopHomepage — Ski Resort

Portfolio

Portfolio — Fashion PhotographerPortfolio — Graphic Designer

Pricing

Pricing — SoftwarePricing — App

Product

Product — CleanProduct — AppProduct — Speakers

Projects

Projects — Architect

Services

Services — ConsultingServices — MovingServices — FunServices — Cake Shop MenuServices — Coffee Shop MenuServices — InteriorServices — Delivery CompanyServices — Ski Resort

Shop

Shop — Sweets

Landing Page Builder (Experiment)

Landing pages optimized for conversion, and are often used to create lead capture pages, sales pages, splash pages, squeeze pages, and more. Elementor』s Landing Page Builder flow coupled with the landing page templates found in the Template Library enables you to quickly and easily create landing pages either from a set of pre-designed templates provided by Elementor or those that you design yourself.

To Manage Landing Pages

Go to Templates > Landing PagesClick Add New Landing Page to view a set of pre-designed landing page templates.Click the magnifying glass icon to preview a template.Click Insert to select a template to use.

Note: Elementor Landing Pages are a Custom Post Type in terms of WP hierarchy. You cannot set these as the homepage of your website in Settings > Reading or your Customizer as they are not WP pages. You may save your created landing page as a Template in your library, then create or edit a WP page called 「Home」 and import that template to the page. This new page can be set as the homepage.

Tip: If you prefer to start from scratch rather than using a pre-designed template, press the X in the upper right corner of the template library to close the window and start with a new blank page.

How to Change the Slug of the Landing Page

After publishing your Landing Page, you may notice that the Page name or Permalink Slug needs to be edited. To change the page name, or slug follow these steps.

Navigate to Dashboard > Templates > Landing PagesUnder the title of your Landing Page, click the Quick Edit linkEdit the Page Title as desiredEdit the Slug (permalink) for your landing page in all lower case with no spaces. Hyphens should be used between words (example: luxury-car)Click the Update button and view your Landing Page with the new proper URL.