Elementor 文檔

Connect To Template Library

The first time you insert a template, you will be prompted to connect your free Elementor account to access the Template Library. If you don』t yet have an account, you can register for a free account during this process.

Frequently Asked Questions

Why do I have to connect?

A connection is required to enable us to add smart features to the library in the future including personalization features such as 『favorites』 and 『recently used』 views, as well as other enhancements that will make the Template Library more than just a place to store templates. As a user, you will gain better control over who uses your account and website and get added security. 

I build sites for clients using my Expert license. Will I have to give all my clients access to my account? I don』t want to share my credentials or allow clients to have access to my account in any way.

Don』t worry. Your clients will not access your account at all and you won』t need to share your credentials with them. Each of your clients will create their own individual, free accounts during the initial one-time process of connecting, if they don』t already have an account. In addition, each WordPress user on a website will need their own account if they intend to access the library.

What happens if I decide not to connect?

You will be unable to access the templates that Elementor provides via the Template Library. Your previous work remains intact. The connection only authenticates you as a user and doesn』t have any impact on your saved templates.

If I don』t connect, can I still use my own Saved Templates?

Yes, you』ll always have access to your own saved templates, whether you decide to connect to the Template Library or not.

What happens if an error occurs when I try to connect?

If you receive an error that says 」 An error occurred. The following error(s) occurred while processing the request: Connecting to the Library failed. Please try reloading the page and try again「, please ensure that the Site Address (URL) and WordPress Address (URL) at WP Admin > Settings > General are exactly the same. Also, this URL must correspond to the URL on your web browser』s address bar.

Once this is resolved, please follow these steps to refresh and resync the license:

First, log in to your account at  https://my.elementor.com/Next, go to My Account > Subscriptions and click on the large box showing your account information. This will open up a list of your connected sites. Click the Deactivate Site linkA confirmation popup will appear. Accept the changesFinally, go to your  WordPress dashboard > Elementor > License > Connect and Activate and try again

SiteGround Hosting Compatibility

In some SiteGround server configurations, users may get a 502 error. If you get this error when you try to edit a page, you should first change the loader method:

Go to Elementor > Settings > Advanced, and under 『Editor Loader』, enable 『Switch front-end editor loader method』.

This setting changes the Elementor editor loader method.

You then may need to increase a particular Apache service limit. To do that, add the following lines inside the website』s .htaccess file:

SubstituteMaxLineLength10M

You can edit that file via SSH, FTP, or the File Manager tool in cPanel.

How to Save a Page as A Template in Elementor

In order to save pages as a template to re-use in your website or kit use the following method:

Click the up arrow located to the right of the Publish / Update Button located at the bottom of the panelChoose Save as TemplateGive a name to your template and save

Your page will now be in your template library and available for use in your project or exporting to another site as a JSON file.

Tip: If you need to clone templates, you can use the above method. Save the template as a new name. Repeat the process as needed. The cloned templates will be in your library for editing. This is similar to 「Save As」 on a computer.

Google Maps Widget

The Google Maps widget is a really simple way to embed Google Maps in your website. This is very useful for contact pages, so your visitors can know where you are located.

Content

Location: Enter the location you wish to displayZoom: Set the zoom level of the mapHeight: Set the height of the map

Style

CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.Transition Duration (only on Hover): Set the amount of time to transition from one filter setting to the other when hovering over the map.

Advanced

Set the Advanced options that are applicable to this widget

Tip: To remove the gap around the Google Maps widget, and have the map span the full width of the page, change the Section width from Boxed to Full Screen, and set the Columns gap of the Section from Default to No Gap.

Important: In order to use the Elementor Maps Widget, you must first create an API key and place it in Elementor > Settings > Integrations. To learn more, see this article.

Slides Widget (Pro)

The Slides widget allows you to quickly create simple slides that work perfectly, without a fuss. 

Content

Slides

Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide.  When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.

Background

Color: Set the background color for the slideImage: Choose an image from the media library

If an image is chosen as a slide background, additional options appear:

Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay』s color.

Content

Title & Description: Insert the title and description for the slideButton Text: Set the text for the buttonLink: Add a URL the slide or button will link toApply Link On: If a link is set, this option appears. Choose if the link applies to only the button or to the whole slide

Style

Styling for individual tabs is OFF by default, relying on the global styles which are set on the widget』s Style tab. If you wish to override the global slide styles, turn the Custom switch to ON. This will enable you to set custom styles for that individual slide. The custom styles for individual slides are:

Horizontal Position: Position the content horizontally: Left, right or centerVertical Position: Position the content to the top, middle or bottomText Align: Align the text left, center or rightContent Color: Choose the color of the contentHeight: Set the exact height of the slide in either PX, VH, or EM

Slider Options

Navigation: Choose to display arrows, dots, both or nonePause on Hover: Make the slide pause when the mouse hovers over itAutoplay: Get the slides to rotate automatically, according to the speed you setAutoplay Speed: Set the time it takes for the slide to start rotatingInfinite Loop: Have the slides rotate in an infinite loop and without stoppingDirection: Choose a direction for the slider as left or rightTransition: Set the transition of the slides as slide or fadeTransition Speed: Set the time it takes for the slides to rotateContent Animation: Set the animation effect of the content』s display when the slide is shown: None, Down, Up, Right, Left, or Zoom

Style

Slides

Content width: Set the width of the content inside the slidePadding: Set the inner spacing between the edge of the content and the edge of the slideHorizontal Position: Set the position of the content as right, left and centerVertical Position: Set the position of the content as top, middle or bottomText Align: Align the text to the right, left or centerText Shadow: Add a shadow and blur to the text

Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.

  Title

Spacing: Set the spacing between the title and the descriptionText Color: Set the color of the titleTypography: Set the typography of the title

Description

Spacing: Set the spacing between the description and the buttonText Color: Set the color of the descriptionTypography: Set the typography of the description

Button

Size: Set the size of the button, from extra small to extra largeText Color: Set the text color for the buttonTypography: Set the typography of the buttonBorder Width: Set the border width of the buttonBorder Radius: Set the border radius, to control corner roundness

Normal State / Hover State

Text Color – Set the text colorBackground Color – Set the background color of the buttonBorder Color – Set the border color of the button

Navigation

Arrows

Arrows position – Set the position of the arrows inside or outside the sliderArrows size – Set the exact size of the arrowsArrows color – Set the color of the arrows

Dots

Dots Position – Set the position of the dots inside or outside the sliderDots size – Set the exact size of the dotsDots color – Set the color of the dots

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

Advanced

Set the Advanced options that are applicable to this widget

How To Fix The Package Could Not Be Installed Error

If trying to install Elementor and get the following error 「The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature」 it may be due to limited resources, or a bad Zip file. It may also occur when trying to install from the WP repository. The most likely causes of this error are:

The .zip file you』re trying to install does not use the correct file structure for a WP pluginThe .zip file is extremely large and you』re hitting memory limits while trying to unzip itYou don』t have enough server space left on your web hosting account to install the plugin

The third option is the most likely. To confirm this, try to upload another large file to your site (example: a large image or video file). If you』re not able to upload large files, then storage space is likely the issue. To correct this, log in to your hosting account and check how much unused space you have. If you are at or near your maximum, you』ll either need to delete some files (perhaps you have unused themes or plugins, or old backups or log files that are no longer needed), or upgrade to an account with a larger amount of storage.

Text Editor Widget

The Text Editor widget is a TinyMCE WYSIWYG editor that behaves just like the classic WordPress visual editor. You can enter rich text, images, and even WordPress shortcodes.

In addition to the features that normally appear on the TinyMCE editor, this widget also gives you more styling options that let you change settings like font weight, line height, letter spacing, alignment, and more.

Content

Drop Cap: Slide to ON to set the first letter of the text as a Drop Cap, which makes it larger and gives it the ability to be styled independently from the rest of the text.Columns: Select the number of columns to split the text intoColumn Gap: Set the width of the gap between columns

Style

Text Editor

Alignment: Align the text to the left, right, center, or justifiedText Color: Choose the color of the textTypography: Set the typography options for the text

Drop Cap (only visible if Drop Cap was set to On in the Content tab)

View: Select the view style of the drop cap, choosing from Default, Stacked, or FramedPrimary Color: Choose the color of the drop capSpace: Select the exact space between the drop cap and the rest of the textBorder Radius: If Stacked or Framed is chosen as the View, set the border-radius to control corner roundnessTypography: Set the typography options for the drop cap

Advanced

Set the Advanced options that are applicable to this widget

Example of Splitting Text Into Multiple Columns

How to Wrap Text Around Images With the Text Editor Widget

Users sometimes ask how to wrap text around images in Elementor. This is an excellent use of the Text Editor widget. Simply drag-in the widget, click Add Media and upload an image of your choosing to the media library of WordPress. Then click the image, and adjust the alignment settings to wrap the text around the image, with the image to the right or left of the text.

Is The Text Editor Widget Missing The Visual and Text tabs?

The Text Editor widget respects the user』s choice in WordPress settings to enable or disable the Visual Tab. If your tabs are missing, please go to the WordPress Dashboard > Users > Your Profile and uncheck the option to disable the Visual Editor.

Note: The Typography styling, as well as other styling options, of the text within the Text Editor only affects normal paragraph text. If you have changed any of the text within the text editor to a heading (H1, H2, H3, etc.) or any other type of tag besides Paragraph, then the Style options will not affect that text. Text using HTML tags other than

in the Text Editor widget will inherit the typography styling from either your theme or whatever you have set within Elementor』s global Theme Style settings.

Note: If unable to edit your text in the main window, and only able to edit text in the side editor panel, try disabling the Optimized DOM Output experiment by navigating to Elementor > Settings > Experiments.

What Is The Optimized DOM?

The optimized DOM output experiment aims to improve performance by decreasing the number of wrapper elements present in the HTML that is generated by Elementor.

Important: This experiment includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the Experiments stage only, users can test the new optimized DOM output on test sites only to avoid damaging existing sites.

Note: This experiment is automatically active on all NEW sites with a new install of Elementor only.

How To Use This Experiment

Go to Elementor > Settings > Experiments tab.Select Active from the Optimized DOM Output dropdown.

Click the Save Changes button.

More About The Optimized DOM

Starting with Elementor 3.0, some significant DOM improvements have been made to boost the speed and performance of new Elementor websites. The developers addressed a growing concern about the number of HTML wrapper elements that were output by Elementor. In response, we』ve removed some wrappers.

The presence of these wrappers was due to the diverse use of Elementor, the ability to use these selectors in various ways to customize your site, and the omni-purpose of Elementor as a solution for creating advanced websites visually.

Removing wrapper elements from the DOM contributes to more simplified code output, better readability and less complexity. A smaller DOM contributes to increases in speed and performance. This is, however, a potentially breaking change, so by default, Elementor will only use the Optimized DOM Output on new sites. 

Which HTML Wrappers Were Removed in 3.0?

Three (3) HTML wrappers are removed, including:

.elementor-inner.elementor-row.elementor-column-wrap

HTML Wrappers Removed in 3.2

In this version we removed the following two (2) HTML wrappers:

.elementor-image.elementor-text-editor

Who Does This Change Affect?

By default, this only affects new sites to avoid breaking existing sites that upgrade to 3.0. Using the Optimized DOM Output on existing sites that upgrade from pre-3.0 would potentially cause your website』s appearance and/or functionality to break. For this reason, the Optimized DOM Output is disabled on upgraded sites, and Legacy DOM remains in place. However, if you upgrade to 3.0 and wish to use the Optimized DOM Output, you can enable this feature. Simply go to Elementor > Settings > Advanced and select Enable in the Optimized DOM Output dropdown. 

Important: If you have used any of these wrapper classes in either your custom CSS or custom code, you should refactor your code to use different wrapper classes that aren』t being removed. Otherwise, your custom styles or code will no longer function properly

Note: If unable to edit your text in the main window, and only able to edit text in the editor panel, try disabling the Optimized DOM Output experiment.

See the developers post about this change here.

How To Create An Audio Playlist With Elementor

The audio playlist is a native WordPress feature and can be used in the classic editor, or block editor using the classic block. It uses mp3 files uploaded to the media library and very similar to creating an image gallery. In order to create an audio playlist in Elementor, you will need to use the Text Editor Widget.

Get Started

From the Basic Widget library, drag a Text Editor Widget to your page in the desired locationClick the Add Media button in the Text Editor controlsSelect the Create audio playlist from the options on the leftSelect the files you wish to be included in your playlist and click the 「Create a new playlist」 button in lower cornerSelect the playlist settings you wish to include. The track titles can also be edited at this time. Click the 「Insert audio playlist」 button in the lower cornerYou will now see the playlist in the editor panel. It will not show in the main window but be displayed as the shortcode. This is normal and will only show on the live pagePublish or Update your page and view from the preview icon or in another tab. Your audio playlist should be visible and working

Tip: Video Playlists may be created using the same steps above. 

Note: Since this uses the media library and is stored in the uploads folder, the files can be downloaded by users using the developer tools or inspecting the code. It is recommended to upload clips or lower quality files if important to protect this from occurring.

Accessibility Improvements (Experiment)

The Accessibility Improvement experiment aims to improve accessibility of Elementor widgets. 

What is accessibility?

Web accessibility or a11y is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites by people with disabilities. 

Tip: The word 「accessibility」 is often abbreviated as 「a11y」, which represents the first letter of 「accessibility」 (「a」), the last letter of the word(「y」), with 11 letters between the 「a」 and the 「y」. Pronounce a11y as either 「a-one-one-y」 or 「a-eleven-y」, not 「ally」, as those are numerical ones and not the letter L.

How will this experiment affect Elementor widgets?

Some Elementor widgets may need improvements to adhere to accessibility guidelines. For example, the Elementor Tabs widget creates empty anchor tags and missing screen reader states per tab which conflicts with accessibility guidelines. In addition, the empty anchor tags may be a negative search engine ranking factor. In the experiment added to version 3.1.0, we improved the Tabs widget accessibility by removing empty tags, adding selected tab state, and improving keyboard navigation. These changes help improve the ranking and accessibility of user』s sites.

Important: This experiment includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the Experiments stage only, users should test the new, accessible Tabs widget on test sites only to avoid damaging existing sites.

Note: This experiment is automatically active on all NEW sites with a new install of Elementor only.

How To Use This Experiment

Go to Elementor > Settings > Experiments tab.Select Active from the Accessibility Improvements dropdown.Click the Save Changes button.