Elementor 文档

How to Create a Dropdown Menu in Elementor

Creating menus is a WordPress function. You can use the Elementor Nav Menu Widget (Pro) or your theme to display these where needed. Learn more here.

Create Your Menu

Navigate to Dashboard > Appearance > Menus. If you have not created a menu, you will need to do so now. Give your menu a name and click the Create Menu Button. You may additionally assign the option to add newly created pages automatically and the display locations.

Adding Pages To The Menu

From the add menu items panel select the pages you wish to insert and click the Add to Menu button.

Creating Submenus

Add your items to the menuDrag and drop an item so that it is placed under the parent item slightly indentedRepeat this process for the other child itemsSave your menu

Adding Custom Links To The Menu

You may add external URLs, anchor links, and placeholder links by using the Custom Links option.

Adding Blog Categories To Your Menu

You may assign blog archive categories from the Categories. For more about WordPress categories, click here.

View Your Menu

From the Dashboard, you can now view your menu by clicking the Visit Site link

Call to Action Widget (Pro)

The Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget uses animations and CSS effects to create user interactions, that appear when the user hovers over the box.

Content

Image

Skin: Choose either the Classic skin or the Cover skinLayout: (Only shown for Classic skin) Align the image to the left, right or on top of the image

If Classic Skin is chosen the following options are available:

Content

Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action titleIf Image is selected as the Graphic Element:Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom size.If Icon is selected as the Graphic Element:Icon: Select an icon from the FontAwesome library View: Choose the default icon view, or select Stacked or Framed.Title & Description: Choose the title and description that appears in the front of the flip boxTitle HTML Tag: Set the title』s HTML tag to H1- H6, Div, or SpanButton Text: Enter the text to be displayed on the buttonLink: Enter the URL for the button』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

Min. Height – Set the minimum height of the whole boxAlignment – Align the content to the left, center or right of the boxVertical Position – Align the content to the top, center or bottom of the boxPadding – Set the padding for the content

Image

Min. Width: Set the minimum width for the imageMin. Height: Set the minimum height for the image

Content

Title

Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description

Description

Typography: Set the typography options for the titleSpacing: Set the amount of space between the description and the button

Colors

Background Color: Choose the background colorTitle Color: Choose the title colorDescription Color: Choose the description colorButton Color: Choose the button color

Button

Size: Select the button size, from Extra Small to Extra LargeText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness

Ribbon

Background Color: Choose the color for the ribbon』s backgroundText Color: Choose the color for the ribbon』s textDistance: Move the slider between 0-50 to set the distance for the ribbon.Typography: Set the typography options for the ribbon』s titleBox Shadow: Set the box shadow settings for the ribbon

Hover effects

Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at onceHover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down

The following items can be set independently for both the Normal and Hover states

Overlay Color: Choose the overlay color for the imageCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend modeTransition Duration (ms): (For Hover state) Set the duration for the hover effect

If Cover Skin is chosen, the following options are available:

Content

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

Min. Height: Set the minimum height of the whole boxAlignment: Align the content to the left, center or right of the boxVertical Position: Align the content to the top, center or bottom of the boxPadding: Set the padding for the content

Content

Title

Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description

Colors

Title Color: Choose the title colorButton Color: Choose the button color

Button

Size: Select the button size, from Extra Small to Extra LargeTypography: Set the typography options for the button textText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness

Ribbon

Hover Effects

Content

Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downAnimation Duration: Set the amount of time the animation takes to completeSequenced Animation: Choose if the animation for the text elements appears sequenced or all at once

Background

Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downOverlay Color: Choose the overlay color for normal and hoverCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend mode for the imageTransition Duration (ms): (For Hover state) Set the duration for the hover effect

Advanced

Set the Advanced options that are applicable to this widget

Custom Link Attributes

With Elementor, you can add custom HTML attributes to the element of every link. This enables the addition of data-* attributes, ARIA attributes (accessibility) and values, header, footer, sidebar, rel=*, and other attributes that can be found here

Common Link Attributes use cases include:

Allow your visitors to download PDF files with a single button click by using the download=」yourfilename」 custom attribute.Implement relations SEO properties such as rel=」noopener」, rel=」noreferrer」, rel=」ugc」, and 「rel=sponsored」. To add multiple properties to one attribute, simply list them with a space between them, e.g. rel=」noopener noreferrer」. Add a title attribute to link elements, such as title=」Learn More About Us」.

Tip: You can add multiple Link Attributes separated with a comma (,)

Add Custom Attributes to Link Elements of A Widget

If a widget has a Link element, you can add any custom attributes to the link』s HTML, (e.g. rel=」ugc」 or rel=」sponsored」, the two new link attributes that Google introduced in 2019).

Right-click on the widget』s handle and click Edit widget to open the widget』s settings panel.Click the gear icon to the right of the Link field to open up the additional options.Add your code in the Custom Attributes field, using the format key|value. For example, to add rel=」sponsored」 to the element』s HTML, enter rel|sponsored here. To add rel=」ugc」 to the element』s HTML instead, enter rel|ugc here. To add a title to the link element, enter title|Your title text goes here.

Tip: If you add a title attribute, it will only display as a popup tooltip on hover if there is something in the Link URL field, so there must be at least a # in the field. It cannot be blank for the hover tooltip to work.

Note: There is no ability to add a custom attribute to a link created within a Text Editor widget. Custom attributes are only available for widgets that specifically have a link field.

Add A Download Custom Attributes to a Button

To cause a file to be immediately downloaded when a user clicks a button, add a download=」yourfilename」 attribute to the button』s link.

Right-click on the Button widget』s handle and click Edit widget to open the widget』s settings panel.Click the gear icon to the right of the Button』s Link field to open up the additional options. Add the attribute code in the Custom Attributes field, using the format key|value. For example, to add download=」yourfilename」 to the element』s HTML, enter download|your-file-name here, replacing 「your-file-name」 with the file name of your choosing.

Tip: To create a downloadable PDF, in the Link field, enter the PDF』s link, and then enter download|your-file-name in the Custom Attributes field.

Note: You will not be able to add JS-based attributes (like onclick) to your links due to security reasons.

Theme Style – Global Settings

Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields. These settings override the theme styling settings and takes its place, allowing you to use Elementor to set styles for elements not built by Elementor. By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rd-party headings and much more. If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements as well.

Note: Elementor Pro users can also set Global Custom CSS which lets you apply custom CSS rules to your entire site.

To Apply Theme Styles To Elementor Elements:

In order for Theme Style settings to apply to most of Elementor』s elements and widgets as well, you will need to disable Elementor』s default colors and fonts.

Disable default colors and default fonts by going to Elementor > Settings and placing a check in the boxes next to Disable Default Colors and Disable Default Fonts.

How To Set Theme Styles

Click the Hamburger menu in the upper left corner of any page or post』s widget panel to access the Site Settings > Theme Style settings. Theme Style consists of four tabs: Typography, Buttons, Images, and Form Fields.

Typography

Text Color: Choose the color of the default text

Typography: Change the typography options for the default text

Paragraph Spacing: Set the amount of default spacing after a paragraph (margin-bottom)

Link

Normal | Hover

Color: Choose the default color of links for both normal and hover states

Typography: Change the default typography of links for both normal and hover states

H1-H6

Color: Choose the default color for each Heading (H1, H2, H3, H4, H5, and H6)

Typography: Set the default typography options for each Heading (H1, H2, H3, H4, H5, and H6)

Buttons

Typography: Change the default typography for buttons

Text Shadow: Set the default text shadow for buttons

Normal | Hover

Text Color: Choose the default color for button text

Background Color: Choose the default background color of buttons

Border Type: Set the default type of border for buttons (None, Solid, Double, Dotted, Dashed, Groove)

Box Shadow: Set the default box shadow options for buttons

Border Radius: Set the default border radius to control corner roundness of buttons

Padding: Change the default button padding settings

Form Fields

Label

Color: Choose the default text color for the Field Labels

Typography: Set the default typography options for Field Labels

Field

Typography: Set the default typography options for Input Field text

Normal | Focus

Text Color: Choose the default text color for Input Field text

Background Color: Choose the default background color for Input Fields

Border Type: Set the default type of border for Input Fields (None, Solid, Double, Dotted, Dashed, Groove)

Border Radius: Set the default border radius to control corner roundness of Input Fields

Box Shadow: Set the default box shadow options for Input Fields

Transition Duration (ms) (Focus only): Set the default amount of time, in milliseconds, for the Focus Transition to take place.

Padding: Set the default padding options for Input Fields

Images

Normal | Hover

Border Type: Set the default type of border for Images (None, Solid, Double, Dotted, Dashed, Groove) in both Normal and Hover modes

Border Radius: Set the default border radius to control corner roundness of Images in both Normal and Hover modes

Opacity: Set the default opacity level of Images in both Normal and Hover modes

Box Shadow: Set the default box shadow options for Images in both Normal and Hover modes

CSS Filters: Set the default CSS Filters: Blur, Brightness, Contrast and Saturation for images in both Normal and Hover modes

Transition Duration (ms) (Hover only): Set the default amount of time, in milliseconds, for the Hover Transition to take place.

Undo / Redo & Draft / Publish

Just like any other Elementor editing you might do, Theme Style woks with the Revisions and History controls, so you can undo / redo any changes, and can always revert back to an earlier version of your Theme Style design.

Theme Style also works with Draft and Publish modes, so you can test the changes and save them to draft, without having them affect your live site. Your live site will only get the changes applied when you click the Theme Style』s Publish button.

HTML Elements Affected

Note: Some elements won』t get affected because Elementor doesn』t allow editing them (e.g fieldset, input[type=」reset」] and more)

Background color:

Buttons:

buttoninput[type=」button」]input[type=」submit」].elementor-buttonParagraph spacing:

Links:

Headings:

Form:

labelinput:not([type=」button」]):not([type=」submit」])textarea.elementor-field-textual

Images:

Why Did All My Theme Styles Disappear?

This happens when the Default Kit is deleted. If you go to Templates > Saved Templates, and then select to view All templates, you will see a new template listed there, called Default Kit. The Theme Styles are stored in this Saved Template. The Default Kit template, if deleted, will automatically recreate itself, but deleting it will remove all settings stored in the Theme Styles, so only delete this template if your goal is to completely reset your Theme Styles.

How To Place Widgets Side By Side In The Same Column

Inline Positioning

Place widgets next to each other, horizontally, within the same column.

Each widget will only take up the minimum width necessary to hold it.

https://www.youtube.com/watch?v=FtHXk2e6OF8

How To Use Inline Positioning

Under any Widget > Advanced > Custom Positioning

Width: Set to Inline for each widget in the horizontal stack.Position: Set to Default for side by side positioningUnder the Column > Layout, set your desired Horizontal Alignment. Choose between: Start, Center, End, Space between, Space Around, and Space Evenly.

Note: To set several widgets inline, each widget needs to be defined as Inline separately.

Important!: Some elements may not function correctly when set to Inline Auto e.g. Image Carousel, Slides etc.

Icon Library

The Icon Library gives access to more than 1,500 free Font Awesome 5 icons, and introduces an interface for managing your icons.

Click on the Icon Library button that appears on any widget with icon controls to open the Icon Library. Most controls will look like this:

Some widgets, such as the Accordion and Toggle widgets, will have inline icon controls like this:

Widgets with inline controls: Click the + and – icons to choose icons from the icon Library or click the Upload icons to upload an SVG.

Icons that are relevant to the widget you are currently using will automatically be displayed, but if you prefer, you can browse through the entire library to pick your desired icon, or search for a specific icon.

Filter Icons By Name: Search by keyword in the search box above the icons in the right panel.Filter Icons By Families: Select the icon family in the left panel, choosing from All, Regular, Solid, or Brands

Font Awesome Pro

If you have a Font Awesome Pro license, you will have a larger set of icon families to choose from, including Regular Pro, Solid Pro, Brands Pro, Light Pro, and Duotone Pro.

How To Use The Font Awesome Pro Icons

Go to Elementor > Settings > IntegrationsScroll down to Font Awesome Pro and enter your Kit IDClick Save ChangesEdit the widget that includes an icon Click Icon LibraryChoose one of the Pro families such as Duotone Pro, select the icon you prefer, and click Insert

Speed and Performance

The Elementor Icon Library brings faster performance and faster page speed, which can benefit your SEO and page load speed. With this library, only the CSS and fonts of the icon family you actually use are loaded.

One Time Migration To Font Awesome 5

The first time you attempt to use the Icon Library, you may be presented with a Font Awesome Migration popup. Read more about this

Troubleshooting Tips

If you find that you are unable to change the colors of Font Awesome Pro icons, please log into your Font Awesome Pro account and choose Web Font instead of SVG in your kit』s settings. The incorrect SVG setting is shown below. When you use SVGs to display the Font Awesome Pro icons, it changes the CSS properties and one of them (the fill property) is not supported by the CSS editor of WordPress, so Web Font is the more appropriate choice.

Navigator Indicators

Navigator Indicators are small icons that indicate the state of a particular element within the Navigator. The following types of Indicators are currently available:

Eye Indicator

Indicates that this element is currently being viewed. Clicking the Eye will toggle between Show and Hide states for that element. Hiding the element will only affect the view on the back end, within the Elementor Editor. It will have no effect on the front end of the site.

Custom Position Indicator (Pro)

Indicates that the element is placed using Custom Positioning. The blue indicator line expands to show a drag icon when in hover state.

Custom CSS Indicator (Pro)

Indicates that the element has Custom CSS applied to it.

Motion Effects Indicator (Pro)

Indicates that the element has Motion Effects applied to it.

How To Delete A Widget

There are two easy ways to delete a widget from an Elementor column. In this example, we』ll first delete the widget from the Navigator. Then, we』ll use History to undo our deletion. Finally, we』ll delete the widget again from the Edit Widget handle.

Delete A Widget From The Navigator

Click the Navigator icon to open the Navigator.Find and select the widget element you wish to delete.Right-click the element and choose Delete from the drop-down selections.

Delete A Widget From The Widget』s Handle

Right-click the widget』s Edit Widget handle. Choose Delete from the drop-down selections.

Embed Templates Anywhere (Pro)

In the video, we show how to insert a designed template into the sidebar. We also examine two other ways to embed Elementor templates into your website.

Add Elementor Website Builder Template As a WordPress Widget

In the WordPress Dashboard, under Appearance > Widgets, you will see the Elementor Library widget.Click the Choose Template dropdown, choose a saved template, and click Save.

Add Template to an Elementor Page Using the Template Widget

Drag the Template Widget to a section.Click the Choose Template dropdown, and choose a saved template.

Add Template As a Shortcode

Go to Templates > Saved TemplatesCopy the ShortcodePaste the Shortcode to your widget (i.e. paragraph, tabs etc.)

How to Move Sections in Elementor

It is very easy to move an Elementor section above or below another section, in either one of two ways.

Drag and Drop The Section Using the Navigator

The Navigator is a quick and easy way to move sections, and is often preferred, since you don』t have to drag the mouse far up or down a page. Access the Navigator in one of three ways:

Click on the Navigator button in the panel』s footer, or use the Cmd/Ctrl + I keyboard shortcut.Alternately, you can right-click any element and then click on Navigator. This will automatically redirect you to the specific element in the navigation tree.Once the Navigator is open, left-click and hold the mouse button down on the section element you want to move, and drag it up or down, dropping it before or after any other element.

Drag and Drop The Section Via The Section Handle

Click and hold your left mouse button on the handle of the section you wish to move. While you continue to hold the mouse button down, drag the section to its new location.When you see the blue line appear in the correct place, let go of the mouse button. This will place the section into the blue drop zone. The move is now complete.