Elementor 文档

Create a New Page

Creating a new page in WordPress

From the WordPress dashboard, click Pages > Add NewName your pageClick the Publish button (Visibility options may be set if page is to remain private)Click Edit with Elementor to enter the Elementor Website Builder

Note: If the Edit With Elementor button is clicked, before naming your pages and publishing, it will be given a default name such as Elementor #88. You will need to edit the Page Name and permalink slug by clicking the gear icon in the lower corner, or in the WordPress dashboard.  For more information about permalinks click here.

Using The Classic Editor

WordPress Classic Editor compatibility: Use the Edit with Elementor button below your title.

Important: Can』t edit with Elementor? click here for help

Elementor Panels Overview

Next step – Build your first page

How To Create A Responsive Popup Menu

Create a responsive popup menu that launches from a menu button in your site』s header.

You』ll learn how to create a menu popup that:

Is engaging, functional, and beautifulIs responsive on mobile

Design The Popup And Its Content

Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we』ll design our own, but you can also find this template in your Elementor Pro Popups Templates Library. Just search for 「menu」 in the Popups library to find it.

Popup > Layout Tab

Width: Set to 85vwOverlay: HideEntrance Animation: Fade InAnimation Duration: 2 seconds

Popup > Style Tab

Popup

Box Shadow: Set these as you』d like.

Close Button

Vertical Position: 4Color: Set the color to #878787Size: 35

Popup > Advanced Tab

Prevent Closing On Overlay: Yes

Now, add a section with two columns.

Design The First Column

Section > Layout

Content Width: Full WidthColumns Gap: No Gap

Drag an Inner Section widget to the first column. 

Under Section > Layout > Columns Gap, set No Gap.

Under  Section > Advanced, set Padding of 70 px all around. 

Section > Advanced

Padding: 70 for top, bottom, left, and right.

Drag a Heading widget to the first column.

Under Style > Typography, set the size to 60, and under Weight set to 100.

Tip: Now is a good time to adjust the headings』 Mobile Settings.

Create The Rest Of The Menu Items

Right-click the Heading widget』s handle , and choose Duplicate.Repeat the duplication for as many menu items as you』ll need.Edit the Title text for each Heading widget to properly label each menu item

Add A Button To The Menu

Drag a Button widget below the menu items and style it to your liking.

Under the Advanced tab > Margin, Set to 70 for Top, and then click the responsive viewport icon, click the Mobile icon, and set Mobile』s margin to 40 for top.

Drag another Inner Section widget to the first column below the Button.

Under Section > Layout > Width, set Full Width.Under Section > Layout > Columns Gap, set No Gap. Under Section > Advanced > Padding, set 30 for Top, 70 for Right, 50 for Bottom, and 70 for Left.Now, right-click a column handle and select Delete to delete one of the columns, leaving you with just one.

Add Share Buttons To The Menu

Drag a Share Buttons widget (Pro) to the column.

Share Buttons > Content

Edit the social network items as needed.Skin: MinimalAlignment: Left

Share Buttons > Style

Button Size: 1Color: Custom Color and choose Black (#000000)

Design The Second Column

Right-click the column』s handle to edit the column』s settings.

Column > Style

Background

Background Color: Set to #000000 (Black)Second Color: Set to #000000 (Black)

Note: Although the new background color has been set, you won』t see it yet, because there is no content in the column yet.

Create The Newsletter Subscribe Call To Action Form

Drag an Inner Section widget to this column.

Right-click a column handle and select Delete to delete one of the columns, leaving you with just one.

Inner Section > Advanced

Margin: Set to 130 for Bottom onlyPadding: Set to 70 for Top, 60 for Right, 70 for Bottom, and 60 for Left

Drag a Heading Widget into the column

Adjust the title text (ie Sign Up For Our Newsletter), and text size, color, etc. as needed.

Drag a Form Widget (Pro) under the heading

Form > Content

Form Fields

Click the X to the far right of the Name and Message fields, as we only need the Email for this example.Input Size: MediumEmail > Content > Column Width: 80%

Submit Button

Size: MediumColumn Width: 20%Alignment: RightIcon: Long Arrow Right

Form > Style

Form

Column Gap: 0Row Gap: 0

Field

Text Color: WhiteBackground Color: TransparentBorder Color: WhiteBorder Width: 1 for Bottom onlyTypography > Size: 10

Button

Background Color: TransparentText Color: WhiteBorder: SolidBorder Width: 1 for Bottom onlyBorder Color: White

Create The Products Display

Drag another Inner Section widget to this column below the form.

Inner Section > Advanced

Padding: Set to 30 for Right only

Responsive

Hide On Mobile: Hide

Inner Section > Layout

Columns Gap: No Gap

Right-click a column handle and select Delete to delete one of the columns, leaving you with just one.

Edit The Column

Column > Advanced

Margin: Set -60 (minus 60) for the Left only

Right-click the heading widget』s handle and copy the Newsletter Heading title and then paste it into this column

Heading > Style

Text Color: Black (#000000)Weight: 700

Heading > Advanced

Margin: Set to 20 for Left only

Column > Style

Background

Color: White (#ffffff)

Border

Border Radius: 5 for all sides

Box Shadow (Normal)

Color: rgba(0,0,0,0.21)Box Shadow > Horizontal: 0Box Shadow > Vertical: 10Box Shadow > Blur: 30Box Shadow > Spread: -10 (negative 10)Position: Outline

Box Shadow (Hover)

Color: rgba(0,0,0,0.21)Box Shadow > Horizontal: 0Box Shadow > Vertical: 15Box Shadow > Blur: 40Box Shadow > Spread: -10 (negative 10)Position: Outline

Drag in an Image widget below the heading

Image

Don』t choose an image just yet

Image Size: FullAlignment: Left

Now right-click the Heading widget』s handle , duplicate it and adjust the style for the duplicated widget.

Heading > Style

Size: 15Weight: 300

Now change the wording for each.

Right-click the column handle and duplicate it twice so you have a total of 3 columns.

Edit the column for the middle and last columns, changing the margins in Column > Advanced to -40 for the Left margin in the middle column, and -20 for the Left margin in the last column.For each column, edit the Image widget, choosing an image. Even .gif images work well here.Adjust your text and margins as needed.

Adjust For Mobile

Edit each of the Inner Sections in the Left column

Inner Section > Advanced

Padding: 25 for all sides

Click the cog / gear icon  located at the bottom left of the panel to return to the Popup Settings.

Popup Settings > Layout

Width: 100vw

Form

Set the email field and Submit Button widths to 80% and 20%, respectively.

Set the Publish Options

Click the Publish button. There are no Conditions, Triggers, or Advanced Rules for this popup, so click the Save and Close button.

Edit Your Site』s Elementor-Created Header Template

Go to Templates > Theme Builder > Headers > Select your header, and click Edit with Elementor

Click your menu button widget』s handle to edit the widget, if it exists, or create a new one.

Button

Link: Click the Dynamic icon and select Actions > PopupClick again on Popup and under Action, choose Toggle PopupIn the Popup field, search for and select the popup you just created

Click the Update button to save the Header template changes

All done. Go to your live site, click the Menu button in your header and see your new Menu popup in action.

Bonus: Add Entrance Animation effects on any of your widgets to add cool effects. Just edit a widget, go to its Advanced tab, choose one of the Entrance Animations listed there.

Create Footers Using Elementor』s Theme Builder

The  Footer Template lets you easily design and edit custom footers.

Under Templates > Theme Builder > Footer > Add New, select Footer from the dropdown and click Create Template.Choose a Footer Block and Insert. Alternatively, you can design your own.After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Tip: Did you know? You can create more than one Footer, and assign it to different areas on your site!   Click to learn more

Note: You will not be able to see your Footer if you』re using the Canvas Template

Elementor Widget Panel Not Loading

If your Elementor Widget Panel does not load and has the continuously spinning 「Loading」 icon, as shown in the image below, this is generally due to a resource issue, a conflict with another plugin, or a setting on your server that needs to be adjusted.

Please follow the steps below to troubleshoot and resolve this issue:

Ensure you meet the system requirements. You can check if your system meets these requirements by going to Elementor > System Info. Two of the main things to check are the PHP version and memory limit, but also take note of any other items that might indicate a problem.Increase your memory limit to 512M if using additional resource heavy plugins such as WooCommerce. This is the most common cause of loading issues. See below for a quick guide to increasing these or contact your hosting provider. Make sure you are using the most updated versions of Elementor, Elementor Pro (if you are using that), WordPress and your theme. Sometimes it isn』t obvious that there is an update available. Go to Dashboard > Updates and click the Check Again button to be sure.Deactivate all of your plugins except Elementor and Elementor Pro. If this solves the problem, reactivate each plugin one by one, until you spot the problematic plugin. If found, contact that plugin』s developers for help, or use a different plugin.Switch your theme (temporarily) to a default WordPress theme such as Twenty Seventeen to see if your theme is causing an issue. If so, contact the theme』s developers for help, or use a different theme.If the problem persists, ask your hosting company to provide you with ModSecurity error logs and resolve any problems from it. Also, ask your hosting company to make sure the PHP Zlib extension is enabled on your server.In some cases, you may need to increase the value of max_input_vars. Please ask your host to help with this.

If your entire Elementor screen will not load, rather than just the Widgets Panel not loading, please see the Can』t Edit With Elementor guide instead.

Increasing your PHP Memory

If you have access to cPanel, you may use the MultiPHP INI Editor for all your settings.

If you do not have access to cPanel, the following methods are also used to increase your memory. If you do not feel comfortable in trying these methods on your own, or they fail to resolve your issue, you should contact your hosting to have them increase your memory limit.

Edit your wp-config.php file

Add this to the top, before the line that says, 「Happy Blogging」:

define('WP_MEMORY_LIMIT', '512M');

Note: WordPress memory can be different from the server – you need to set this regardless of server memory settings.

Edit your PHP.ini file

If you have access to your PHP.ini file, change the line in PHP.iniIf your line shows 64M try 256M:

memory_limit = 256M ; Maximum amount of memory a script may consume (64MB)

Edit your .htaccess file

If you don』t have access to PHP.ini try adding this to an .htaccess file:

php_value memory_limit 256M

Basic Gallery widget

The Basic Gallery Widget allows you to easily add and style beautiful image galleries on your page.

Content

Image Gallery

Click Add Image button to select images to display. Once selected, click Create a New Gallery button and then click the Insert Gallery button.Image Size: Choose the size of the image, from thumbnail to fullColumns: Set the number of columns to display, from 1 to 10Link to: Link images to their respective Media Files, Attachment Pages, or None (Media File must be selected if Lightbox is enabled)Lightbox: Choose to display images in a lightbox. If Yes or No is chosen, that selection will override the Global Default Lightbox setting. Images will only appear in lightbox if Media File is selected as the Link to: option.Ordering: Choose Default or Random ordering of images within the gallery

Note: The default order of a gallery is WP: 『menu_order』. For more information, click the following link.

Style

Images

Spacing: Set the spacing between slides. Choose Default (20px) or Custom (The Spacing option is only available if more than 1 is chosen for Slides to Show on Content tab)Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Set the border radius, to control corner roundness

Caption

Display: Hide or Show Captions (If captions are shown, the following additional options are available)Alignment: Align caption left, right, center, or justifiedText Color: Select the color of the caption textTypography: Set the typography settings of the caption text

Advanced

Set the Advanced options that are applicable to this widget

Inner Section Widget

The Inner Section widget use is to create nested columns within a section. This way you can create complex layouts.

Drag an Inner Section Widget to your columnAs a default, you will get a section with two columnsYou can add or remove columns by right-click the columns handle icon You can drag and drop the Inner Section widget to any column on your page, but it cannot be used within another Inner Section.

Now you can style the Inner Section in the same way you would style a Section.

Advanced

Set the Advanced options that are applicable to this widget

Sticky Stay in Column Feature

Make your inner sections stay in column while sticky & create customized layouts.

In the inner section, go to the Advanced tab > Motion EffectsSticky: From the dropdown select between Top or BottomOnce you select Top or Bottom a Stay in Column option will appearSwitch to Yes to make your inner section sticky

Please note: If you only want to add a column to your section, right-click the column handle > Add New Column. You can add up to 10 columns.

Spacer Widget

The Spacer Widget creates a block of space anywhere on your page. You can fill this block of space with a color or an image. You can use it to create cool shapes and elements as well.

Content

Space: Set the amount of vertical space, in pixels.

Advanced

Many of the useful features of the Spacer Widget may be achieved by using the Advanced Tab controls. From here, you may apply backgrounds, masks, borders, and many more options to your Spacer Widget.

Counter Widget

The Counter Widget enables you to add an animated numbered counter to your page.

Content

Counter

Starting Number: Set the starting number of the counterEnding Number: Set the ending number of the counterNumber Prefix: Enter text to appear before the number, if any, such as a dollar signNumber Suffix: Enter text to appear after the number, if any, such as a plus signAnimation Duration: The time in milliseconds for the running animation to completeThousand Separator: Show or hide the thousands separatorSeparator: Select default, dot, or space for the thousand separator characterTitle: Type the title that will appear below the number

Style

Number

Text Color: Choose the color of the number textTypography: Set the typography options for the number text

Title

Text Color: Choose the color of the title textTypography: Set the typography options for the title textText Shadow: Apply a shadow using color, blur, and offset options

Advanced

Set the Advanced options that are applicable to this widget

Mobile Responsive Editing

Important: Some of the information in this document has been altered by the recent addition of Custom Breakpoints. Please also refer to the documentation located here.

How To Adjust Settings For Mobile, Tablet, and Desktop

Many editable features have a Mobile, Tablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

Look for the Viewport Icon next to the individual element you wish to control. Click the specific device icon for which you want to edit its settings.

Controlling Responsive Background Images and Borders

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show / Hide a Section according to the device.

Go to Section Setting > Advanced > ResponsiveSet your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

When hiding an element, and switching to the view it』s hidden on, you will see that this element is 「muted」. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Layout > Breakpoints, and set the breakpoint value for mobile and tabletSave your changesGo to > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

Device Preview

Switch between device views by clicking on the responsive editing icon on the bottom of the panel. The device previews will be located at the top of the editor.

Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?

You can』t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element』s Responsive Visibility feature by going to the element』s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won』t be deleted on those devices, it will be hidden.You can』t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.If an element doesn』t have a Viewport Icon next to it, changing that element in one preview mode will change it across all devices.

Menu Cart Widget (Pro)

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. 

Content

Menu Icon

Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or PlainHide Empty: Slide to YES to hide items indicator if cart is emptySubtotal: Show or Hide the cart』s current subtotalAlignment: Align the menu cart to the left, right, or center

Cart

 Main Options

Cart Type: Select the type of cart to display choosing between Side Cart or Mini CartOpen Cart: Select the desired option choosing between On Click or On HoverCart Position: Click the Left or Right position icon to set the position of the cart in the container.

Close Cart

Close Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Left and Right position icon to set the position of the close icon in the container.

Remove Item

Remove Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Top, Center or Bottom position icon to set the position of the remove icon in the container.

Price & Quantity

Position: Click the Top or Bottom position icon to set the position of the Price and Quantity heading in the container.

Cart Dividers: Toggle the Show / Hide option on the panel to set the desired state.

Note: This is also dependent on the settings in the style tab for dividers.

Buttons

View Cart: Toggle the Show / Hide option on the panel to set the desired stateCheckout: Toggle the Show / Hide option on the panel to set the desired stateVertical Position: Click the Top or Bottom position icon to set the position of the buttons in the container.

Additional Options

Cart Additional Options

Automatically Open Cart: Toggle the Show / Hide option on the panel to Open the cart every time an item is added.Automatically Update Cart: Toggle the Show / Hide option on the panel to show updates to the cart (e.g., a removed item) via Ajax. The cart will update without refreshing the whole page. 

Note: In order for the auto open cart feature to function, you must check the enable AJAX in your WooCommerce settings located in WooCommerce > Settings > Products.

Style

Menu Icon

Main Normal | Hover Options

Icon Color: Choose the color of the cart iconBackground Color: Choose the background color of the widget containerBorder Color: Choose the border color of the widget containerBox Shadow: Click the icon to set additional box shadow optionsBorder Width: Control the thickness of the border around the widget containerBorder Radius: Set the border radius to control corner roundness

Icon

Size: Adjust the size of the cart iconSpacing: Adjust the amount of space between the cart icon and the subtotal textPadding: Change the padding settings of the widget container

Items Indicator

Text Color: Choose the color of the number of items in the items indicatorBackground Color: Choose the background color of items indicatorDistance: Set the distance between the icons indicator and the subtotal text

Note: When the Menu Cart is clicked, a cart overlay slides open. The following options control the design aspects of the cart overlay.

Cart

Main Style Options

Background Color: Use the color picker to set the background of the cartBorder Type: Select a border type or leave set to noneBorder Radius: Use the values to set the radius of borders if selectedBox Shadow: Click the icon to display the box shadow optionsPadding: Change the values to set the desired padding of the container

Close Cart

Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the close icon

Remove Item

Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the Remove Item icon

Note: The above options may be set for the Normal and Hover States if desired.

Subtotal

Color: Choose the color of the subtotal text in the cart overlayTypography: Change the typography options for the subtotal text in the cart overlayAlignment: Click the icons to choose between Left, Center, or Right alignmentDivider Style: Select the divider type between Solid, Dotted, Dashed, Grooved or leave set to NoneWidth: Set the width of the divider in the valesColor: Use the color picker to select the color of the divider

Products

Product Title

Color: Choose the color of the product title in the cart overlayTypography: Change the typography options for the product title in the cart overlay

Product Price

Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay

Quantity

Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay

Divider

Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or groovedColor: Choose the color of the subtotal divider in the cart overlayWeight: Set the thickness of the subtotal dividerSpacing: Set the spacing between subtotal dividers and the subtotal text

Note: These settings may be affected by the divider toggle in the controls. 

Buttons

Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.Space Between: Set the amount of space between the cart overlay buttons

View Cart

Text Color: Choose the color of the Show Cart button text in the cart overlayBackground Color: Choose the background color of the Show Cart button in the cart overlayBorder Color: Choose the border color of the Show Cart button in the cart overlayBorder Width: Control the thickness of the border around the Show Cart button in the cart overlay

Checkout

Text Color: Choose the color of the Checkout button text in the cart overlayBackground Color: Choose the background color of the Checkout button in the cart overlayBorder Color: Choose the border color of the Checkout button in the cart overlayBorder Width: Control the thickness of the border around the Checkout button text in the cart overlayTypography: Change the typography options for both buttons in the cart overlayBorder Radius: Set the border radius for both buttons in the cart overlay

Messages

Typography: Change the typography options for the messages in the cartEmpty Cart Message Color: Use the color picker to set the color of the messageAlignment: Use the icons to choose Left, Center, Right or Justified alignment.

Other Information

Default WooCommerce Mini Cart Configuration

To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor』s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor』s Mini Cart template.

Go to Elementor > Settings > Integrations > WooCommerceChoose Enable for this option in order to replace the default WooCommerce mini cart template or your theme』s mini cart template with Elementor』s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.Choose Disable to opt out of using Elementor』s Mini Cart template.