Elementor 文档

Dark Mode

Elementor』s Dark Mode saves your laptops』 battery life (while helping the environment), eases eye strain, particularly at night, and provides contrast improvement in the editor panel for better accessibility.

Select Mode

Go to Elementor Widget Panel > Hamburger Menu > Preferences > UI ThemeChoose Auto Detect, Light, or Dark

Note: Most modern browsers allow websites and web apps to automatically display Dark Mode based on the user』s preference which they have assigned via their operating system. If Auto Detect is chosen for Elementor』s UI Theme, your preferences as defined by your Operating System (OS) and controlled by your browser will be used.

Why is a Section』s Left & Right Margin Not Editable

When you edit a Section, you will see that under the Advanced Tab the right and left margins are not editable, and set to auto.

This is because, in , a section is always a complete row. If you want to restrict the content inside the section you need to go to Section > Layout and adjust the content width.

Role Manager

Manage and limit what your users can edit with Elementor.

Under Elementor Settings > Role ManagerUnder any user type, you can click the checkbox No access to editor to block the user from editing the page.In Elementor Pro you have an added feature Access to edit content only, so the user can edit the content only, without the ability to change the layout of the page/post.

Revision History, Undo and Redo

Elementor includes a built-in Revision History, as well as Undo and Redo. With these features, you get a log for every action and save made on the editor.

The history panel is accessed by clicking on the  icon at the bottom of the panel.

This will open the History panel, that includes Actions and Revisions.

The Actions Tab

The Actions Tab logs every 『action』 you make in Elementor.

Browsing and clicking on the Actions list will let you trace back your steps. You can move back and forth between actions.

Each item on the Actions list includes the name of the element and the type of change, whether it is an addition or an edit.

At the bottom of the Actions list, you』ll find when 『Editing started』. If you want to go further back, switch to the Revisions Tab.

The Revisions Tab

Everytime a page updates, a new revision is created.

You can switch between revisions and revert back to any previous one saved.

Each revision item lists the date, time and creator of the revision. Click on Apply to apply the revision on the current page. Click on Discard to return to the current version of the page.

Read the complete post about History here.

Undo / Redo Keyboard Shortcuts

You can also use CTRL-Z (Windows) or CMD-Z (Mac) to undo your last action and CTRL-SHIFT-Z or CMD-SHIFT-Z to redo your last action.

Discord Integration with Elementor

With Discord integration, you can send submitted form data to predetermined text channels on Discord via a unique Webhook URL.

These actions will be performed after a visitor submits the form and is a great way to send messages to a text channel in your Discord server.

Go to the 「Actions After Submit」 dropdown and click on the Add Action field > DiscordChoose DiscordThis adds a new Discord Dropdown. Click to open it

Selecting Discord Options

Webhook URL: Enter Discord』s webhook URL
Note: Click to learn how to create a Discord webhook URL
Username: Enter the username that will be shown as the senderAvatar URL: Enter the Avatar URL for the senderTitle: Add a title for each messageDescription: Add a description for each messageForm Data:  Refers to the Name, Email and Message your visitor will fill in on the form. Select YES to turn it on or NO to turn it offTimestamp: Select YES to display timestamp or NO to turn it offColor: Set a custom color for the vertical line that appears to the left of the message.

WooCommerce Single: Additional Information (Pro)

Add Additional Information to your product display on WooCommerce Single template

Style

General

Heading: Show or HideColor: Choose the color of the HeadingTypography: Change the typography options for the Heading

Color: Choose the color of the Additional Information textTypography: Change the typography options for the Additional Information text

Scrolling Effects – Rotate

Set any element to rotate left or right as the user scrolls up or down the page.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONThen:Rotate: Click pencil edit icon Direction: Choose either To Left or To Right Speed: Set the rotation speed from 0 to 10 Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.X Anchor Point: Choose the horizontal axis from which the element will rotate, selecting from Left, Center, or RightY Anchor Point: Choose the vertical axis from which the element will rotate, selecting from Top, Center, or BottomApply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.Effects Relative To: Choose from Default, Viewport, or Entire Page

Note: The two settings, X & Y Anchor Points, determine the axis around which the element rotates. If you set orientation left-top, the rotation will happen around the left-top point of the element. If you set orientation center-center, the rotation will rotate around its center, like a wheel.

Blend Mode and CSS Filters

The Blend Mode and CSS Filters allow you to apply Photoshop-like effects to your elements. CSS Filter Effects let you apply graphic effects like blur or color shifting to images. 

Elementor offers 13 blend modes: Normal (this is the default and has zero blend), Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Saturation, Color, Difference, Exclusion, Hue, and Luminosity. All of them are available in the Style section.

Read the full post about Blend Mode & CSS Filters on our blog.

Why Should I Choose Elementor Over Other Page Builders?

Three big reasons (and many other smaller reasons):

It』s not just a page builder; with Elementor Pro, it is an entire website builder.It』s faster, so you don』t need to drag, drop and wait.It delivers high-end designs. Most page builders can』t reach this level of design, as seen for big brand websites.

Elementor 2.1 – Overview

The new Elementor 2.1 includes solutions to many requests that our users have sent to us over time. 

Right Click

Starting from Elementor Version 2.1, we transferred all of our editing controls to a new context menu, that appears when you Right Click a Page/Section/Column/Widget handle.

Note: To access the browser』s original right-click functionality click CTRL/CMD + Right Click.

Copy/Paste

When you  Right Click you』ll find the Copy and Paste functions. There are three different types of Copy/Paste:

Copy/Paste Elements – Now you can simply Copy an element (Widget, Column or Section) and Paste it anywhere on the page. When pasting on top of a widget, the pasted element will be placed below it.

Tip: Use the shortcut CTRL/CMD + C, and then CTRL/CMD + V, to copy and paste elements.

Copy/Paste Element Style – With Paste Style, you can paste the style of any element you copy (Widget, Column or Section), then apply it on any other Widget, Column or Section.

Copy/Paste Between Pages – Copy Paste and Copy Style actually work between pages! You can Copy any Widget, Column or Section, and Paste it on a different page on your site.

Reset Style – You can easily return to the default style settings of every element by right clicking and choosing Reset Style.

To learn more about  copy-paste click here

Right Click – Page Level

Right Click anywhere on the drop area, will get you these Page level options:

Copy All Content – You can copy the entire page content and paste it to a different page.Delete All Content – The 『Delete All Content』 option moved into the Page Level Right Click.

Elementor drop area

UI Improvements

New collapsible categories in the Widgets panel

You can search the Widgets by Keywords『Add New Section / Template』 buttons

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

Go to Elementor > Settings > Style Tab, and set the breakpoint value for mobile and tabletSave your changesGo to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files

New Video Features

The New Video Features includes:

Self-hosted videos with HTML5Start and End times for the Video Widget (for supported platforms)Show/Hide YouTube logoAdded Dailymotion videosSet Start and End times for Background Video

To learn more about Elementor』s video features

Image CSS Filters

You can add CSS Filters to Image / Image Box WidgetsAdded Blend Modes for background overlay in Column & Section

To learn more about CSS Filters and blend modes

Gutenberg 3.0+ Compatibility

Switch between Gutenberg and Elementor, using the 『Edit with Elementor『 button within Gutenberg.