Author 诗语

Custom CSS (Pro)

With Elementor Pro, you can add custom CSS to every Section, Column or Widget. 

https://youtu.be/xv9RjJky720

Add Custom CSS to Elements

Right-click on the edit button of the element and click Edit section to open the section』s settings panel. Go to Advanced > Custom CSSAdd your CSS code for the element to the editor.

Note: If editing a Widget, right-clicking will show the option to Edit Widget, and editing a Column will show Edit Column.

Please note: When targeting your specific element, add `selector` before the tags and classes you want to exclusively target, i.e: selector a { color: red;}

Please also note that some user-supplied custom CSS code may interfere or conflict with Elementor and cause issues such as being unable to use Elementor to edit fonts, or other styling options. If you find yourself having some of these issues, copy your custom CSS code to a safe place, temporarily remove your custom CSS code from the page, and check to see if that code was causing the problem.

Nav Menu Widget (Pro)

The Nav Menu widget lets you use menus that you』ve created in WordPress and design them in whatever way you want.

Check out this video explaining the various features of this widget.

Content

Layout

Menu: Select a menu you』ve previously set up via Appearance > MenusLayout: Choose a Horizontal, Vertical, or Dropdown layoutAlign: Set the menu item alignment, either Left, Center, Right, or JustifiedPointer: Select a pointer, either None, Underline, Double Line, Framed, Background, or TextAnimation: Choose the pointer animation, either Fade, Slide, Grow, Drop In, Drop Out, or NoneSubmenu Indicator: Choose the icon that indicates an item has submenu items, either None, Classic, Chevron, Angle, or Plus

Mobile Dropdown

Breakpoint: Select at which point the mobile dropdown menu kicks in, either on Mobile, Tablet or None.Full Width: Select whether the mobile dropdown spans full width of the device, either Yes or NoAlign: Choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or CenterToggle Button: Show the Hamburger icon as the toggle button or notToggle Align: Show the toggle button on the Left, Center, or Right of the screen

Style

Main Menu

Typography: Set the typography options for the menu item text.

The following items can be set independently for all three states: Normal, Hover, and Active. 

Text Color: Choose the color of the menu item textPointer Color: Choose the color of the pointer』s hover or active states. The normal state uses the color set as the Accent Color in the Default Colors settings.

Note that if a Hover color is set but no Active color is set, the Active color will use the Hover color by default.

Divider

Divider: Toggle the option to enable or disable the divider between menu itemsStyle: From the dropdown menu choose select between solid, double, dotted, dashed, or groovedWidth: Use the slider or enter the value in the field in PXHeight: Use the slider or enter the value in the field in PX or %Color: From the color picker, choose the color for your divider.

Padding and Spacing

Pointer Width: Set the width of the pointerHorizontal Padding: Use the slider or enter the value in the field in PX to set the horizontal padding around the text of the menu itemsVertical Padding: Use the slider or enter the value in the field in PX to set the vertical padding around the text of the menu itemsSpace Between: Use the slider or enter the value in the field in PX to set the space between each menu items

Dropdown

On desktop, this will affect the submenu. On mobile this will affect the entire menu.

The following items can be set independently for all three states: Normal, Hover, and Active.

Text Color: Choose the color of the menu item textBackground Color: Choose the background color of the menu itemsTypography: Set the typography options for the menu itemsBorder Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or GrooveWidth: Set the width of the borderColor: Choose the color of the borderBorder Radius: Set the border radius to control corner roundnessBox Shadow: Create a box shadow around the dropdown menuHorizontal Padding: Set the horizontal padding around the text of the menu itemsVertical Padding: Set the vertical padding around the text of the menu items

Divider

Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or GrooveColor: If divider border is chosen, choose the color of the divider borderBorder Width: If divider border is chosen, set the width of the divider borderDistance: Set the amount of space between the toggle and the dropdown menu

Tip: Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes so that your submenu indicators will display properly.

Toggle Button

The following items can be set independently for both the normal and hover states.

Color: Choose the color of the toggle button iconBackground Color: Choose the background color of the toggle buttonSize: Set the size of the toggle buttonBorder Width: Set the width of the border around the toggle buttonBorder Radius: Set the border radius of the toggle button

Note: The toggle button refers to the hamburger menu icon.

Accessibility Attributes

The Nav Menu Widget has the following accessibility attributes:

tabindexaria-expandedaria-hiddenrole=」navigation」

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Menu widgetRead How to Create and Design a Custom Navigation Menu

How To Create A Read More Toggle In Posts

If you would like to use a Read More Toggle in your post template, to display long content, credits, or other uses, all from the WP Block Editor for users and clients, you may do so using a Custom Field. In this example we will use the free version of Advanced Custom Fields. You may download this from the WP repository,  

Let』s Get Started

Follow along below. For this tutorial we will be leaving the default settings on most options for now. These can be modified later for more advanced customization.

Creating A Custom Field

Create a new custom field group (example: Read More). Create one custom field (example: Read More Content).  Give this a unique Field Label. The Field Name should auto generate. This will be the permalink key. Select the WYSIWYG editor from the Field Type dropdown.Fill in a description and other requirements here. For your first one, it is safe to leave everything below the field type dropdown at the default. These can be modified as needed later.Publish your custom field by clicking the blue button in the grey right column.

Note: If the Label Name or Field Name is edited at a later time, you will need to re-link it as shown in the Single Post steps below.

Create New Post(s)

Create at least one new post in order to populate the custom fields for the next step. You will see your custom field editor at the bottom of the block editor content. You may use this just like the classic editor and insert text, headings and media. Publish or update your post(s).

Create Or Edit Your Single Post Template

In your single post template, insert a Toggle Widget just below the Post Content Widget. Set the description to the dynamic ACF field (example: Read More), by using the small dynamic icon , and in the settings we will choose the key we named in our steps above (example: Read More Content). Publish or Update your Single Post Template with the correct display conditions. For more info about the Single Post Template click here. 

View The New Post(s)

If you have gotten the steps correct you will now see the Read More Toggle in your posts. You may edit the Single Post Template from the admin bar for further styling modifications.

Social Icons Widget

The Social Icons Widget lets you add icon links to all your social media profiles. With Elementor Social Icons Widget you get total control over the appearance of your social icons. 

Content

Social Icons – Click to add a Social network icon. Use the Icon Library to choose the Social Network icon of your choice, and enter a link URL to the social network. You can also use the Dynamic Content selection to choose a link dynamically if you prefer.Shape – Choose an Icon Shape.Columns – Select the number of columns, choosing from either Auto, or 1 through 6.Alignment – Set the Icons Alignment.

Style

Color – Choose between Official Icon』s Color, and Customize, where you can set a Primary and Secondary Colors.Size – Set the size of the icon.Padding – Sets the inner spacing of the icon.Spacing – Sets the spacing between icons.Border Type – Set the Border Type, Border Width and Border Color.Border Radius – Set a Border Radius

Advanced

Set the Advanced options that are applicable to this widget

Price List Widget (Pro)

The Price List widget lets you create fully styled catalogs and menus that include pricing.

Content

List Items

Shows a list of all the items in the widget. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item』s Duplicate or Delete icon 

By clicking on each item you can customize their content and settings, which are:

Price: Add the price of the itemTitle & Description: Set the title and description of the itemImage: Choose an image from the media libraryLink: Enter the URL for the item』s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window

Style

List Style

Title

Color: Choose a color for the title and priceTypography: Set the typography options for the title and price

Price

Color: Choose a color for the title and priceTypography: Set the typography options for the title and price

Separator

Style: Choose the style of the separator between the title and the price, selecting from solid, dotted, dashed, double or noneWeight: Set the weight of the separatorColor: Choose a color for the separatorSpacing: Increase or decrease the space to the left and right of the separator

Image Style

Image Size: Choose the size of the image, from thumbnail to full, or set a custom sizeBorder Radius: Set the border radius of the image, to control corner roundnessSpacing: Set the spacing between the image and the content

Item Style

Rows Gap: Set the spacing between each itemVertical Align: Choose either top, bottom or center alignment for the content, in relation to the image

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Price List widget

How To Fix: Common Errors With Import / Export Kit Feature

When using the Import / Export kit feature, you may occasionally receive an error message. Here is a list of common causes and possible solutions:

Import Error Causes

Import Error CausesPossible SolutionsInvalid file typeEnsure you are uploading a .zip file extensionCorrupted fileRe-download your file and try againServer is limited by file size (the file is too big to be uploaded)Increase your upload limits on the server or contact your hostUnauthorized user (only Admin can use)Login with Administrator credentialsUser upload the file without the GUI could lead to an errorOnly upload files via the GUIServer cannot handle zip fileInstall PHP zip on your server or contact your hostMemory limit on the server sideIncrease PHP Max Post Size and Upload limits or contact your hostTimeout error – the import process is too longIncrease PHP Max Input Vars or contact your hostAnother plugin caused an errorDisable all plugins and enable one by one to find the one causing the error

Export Error Causes

Export Error CausesPossible SolutionsMemory limit in server sideIncrease your memory limits on the server or contact your hostTimeout error – the import process is too longIncrease PHP Max Input Vars or contact your hostPHP zip extension in the site is not activated (usually it』s activated by default) Install PHP zip on your server or contact your host

Table Of Content (Pro)

The Table of Contents widget automatically organizes your page content based on H1 through H6 levels of hierarchy.  Although the process is automatic, you have plenty of control over what gets included and what gets excluded from the display.

Content

Table of Contents

Title: Type the heading text shown above the Table of Contents

HTML Tag: Select the HTML tag to use for the title, from H2 to H6, or div

Include | Exclude

Include

Anchors By Tags: Click to select the page』s H1-H6 tags to be automatically included 

Container: This control confines the Table of Contents to heading elements under a specific container

Exclude

Anchors By Selector: Enter CSS selectors to be excluded, in a comma-separated list

Marker View: Choose to display numbers or bullets next to list items

Icon: (only available if Marker View is set to Bullets). Click the Icon Library to choose an icon or click None to not use any bullet icon.

Additional Options

Word Wrap: Slide to Yes to turn Word Wrap on, to wrap text when column width cannot accommodate long text on one line

Minimize Box: Slide to No to display Table of Contents fully expanded or Yes to force a click to expand a minimized Table of Contents box

Icon: Click the Icon Library to choose an icon from the Icon Library that will display when widget is minimized to indicate user should click to expand the widget. Click None to not display an icon. Click Upload SVG to upload your own SVG icon.

Minimize Icon: Click the Icon Library to choose an icon from the Icon Library that will display when widget is fully expanded to indicate user should click to minimize the widget. Click None to not display an icon. Click Upload SVG to upload your own SVG icon.

Minimized On (only available if Minimize Box is set to Yes): Select to minimize on Mobile, Tablet, or None

Hierarchical View: Slide to Yes to display list items with indention based on Tag hierarchy

Collapse Subitems: (only available if Hierarchical View is set to Yes) The 「Collapse」 option should only be used if the Table of Contents is made sticky. Slide to Yes to collapse nested lists and only show top level items

Style

Box

Background Color: Choose a background color for the entire Table of Contents box

Border Color: Choose a color for the box』s border

Loader Color: Choose a color for the loader spinner

Border Width: Set the width of the box』s border

Border Radius: Set the border radius to control corner roundness

Padding: Change the padding settings of the widget

Min Height: Set the minimum height of the widget

Box Shadow: Set the box shadow options

Header

Background Color: Choose a background color for the header

Text Color: Choose a color for the text of the header

Typography: Change the typography options for the header text

Icon Color: Choose the color of the Expand / Minimize icon

Separator Width: Set the thickness of the widget header』s bottom border

List

Typography: Change the typography options for the text of the anchors

Indent: Set the amount of indentation for the anchors

Normal | Hover | Active

The following options can be set independently for the normal, hover, and active states.

Text Color: Choose a color for the anchor text

Underline: Select Yes to underline the anchor text

Marker

Color: Choose a color for the marker

Size: Change the size of marker if you wish it to be a different size than the text

How to Use Elementor – Getting Started

Elementor is a visual website builder plugin for WordPress enabling the creation of web pages in a live, visual way. 

This step-by-step guide walks you through how to create a website using  Elementor.

Requirements Checklist

This is a quick checklist of requirements needed. For more details you may click here.

I have WP version 5.2 or greater

I have PHP version 7.0 or greater

I have MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

I have WP Memory limit of 128 MB or greater (256 MB or higher is preferred)

I have the correct folder permissions granted on my server

I have new versions of Chrome, Firefox, Safari, or Microsoft Edge version 79 or greater

I have access to a desktop or laptop computer

Installation Checklist (Core)

This checklist walks you through the entire process of installing and activating Elementor on your WordPress site. For additional information click here.

From the WordPress Dashboard, click Plugins > Add New.In the Search field, enter Elementor and choose Elementor website builder to install.If you have downloaded Elementor as a zip file, click the upload plugin button and use the file selector to install as a WP pluginAfter installation, click Activate.

Skip to Connect To Library if not installing Elementor Pro at this time

Installation Checklist (Pro)

This checklist walks you through the entire process of installing and activating Elementor Pro on your WordPress site. For additional information click here.

After purchasing Elementor Pro, go to my.elementor.comLogin with the details you received in the email after purchaseAfter the login, you will reach the 『My Account『 page. Click on the Download Plugin button in the upper right of My Account section and download the .zip file to your desktopReturn to your site』s WordPress dashboard, and click on Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activateOn top of your site』s dashboard, you should get a message telling you to activate your license key.

Activation Checklist (Pro)

In order to activate all the Pro features, you need to have an active subscription and be able to log in to your account. It is no longer necessary to use a licence key and the input field was removed from the UI. If you require manual activation by key, contact support. Learn more here.

Go to Elementor > License. Click Connect & ActivateYou』ll be redirected to log in to your account. Click Connect. After you log in, your license will be activated automatically via the on screen windowIf the license key was installed correctly, the message on the top of your dashboard should disappear. 

Connect To The 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. For more information about this, and why it is required, click here.

Click the connect to library buttonYou may be redirected to log in to your account. After you log in, click connect. Your connection will be granted automatically via the on screen window and you will return to the previous libraryOnce the connection has been made, you will be able to use Elementor templates, kits, and landing pages.

Using Elementor

If you are a new user of Elementor, these steps will help you understand the essentials of successful page-building. 

Create 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

Edit Your First Page

Elementor uses three main building blocks: Sections, Columns, and Widgets. Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle. Click the Preferences tab and slide the switch to Yes to show Editing Handles when hovering over the element』s edit button or No to hide the handles on hover.

Editing

To edit the Section, Column, or Widget, Right Click their handle. Learn more about Right Click

Sections

Click the + icon to create a Section, or click the folder icon to use a pre-designed Page or Block from our librarySet your Column structure Right click to Edit, Duplicate, Copy, Delete etc. Use the Section handle to: add a section, drag a section, or delete.

Columns

Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.To add more Columns Right Click > Add New Column

Learn more about using columns here.

Widgets

Insert Widgets inside your ColumnsA Widget』s width is automatically set by the Column width. For additional width control, you may use the custom width options by navigating to Advanced tab > Positioning

Copy or Delete All Content

You may Copy or Delete all content on your page by right clicking on the empty section near the add section and templates icons. You can also paste items in another page on the same website.

Adding Templates

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

From the editing screen, Click the folder iconWhen the library of templates pops up, click the magnifying glass icon to preview a template.Click INSERT to select the template of your choice.You may also give your favorite templates a heart and save them to My Favorites.Have a template you downloaded elsewhere that you want to use? Just click the up arrow icon in the top right corner to upload its .json or .zip file.

Mobile Responsive Editing

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

Preview & Publish your page

After you』re done designing your page, you can Preview it and Publish it.

Go to the bottom panel:

To preview click the preview icon. If you are satisfied with the result, go ahead and click the publish button. Click 『Have a Look『 to view the published page

Note: The Preview link is different than the actual page link

Save as Draft

In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

Click the arrow next to Update / PublishChoose Save Draft

We have a more holistic step-by-step guide showing the building process on our blog

Tip: By following these steps you』ll soon become a web design ninja.

Form Error Messages – Form Invalid

When completing a form on your website you may experience the following error message(s): 「an error occurred」 / 「there is something wrong the form is invalid.」

This generally happens when some field(s) ID(s) is/are empty.

Please open the settings for your form, select each of the fields and then switch to the Advanced tab. If you notice that the ID option is blank, please try typing in a value (this needs to be a unique ID value that isn』t used anywhere else inside the form). 

Other potential reasons:

– Two fields have the same ID.

– The integration is not working correctly. To confirm that, you can unset the integration with your email marketing service.

– The field Mapping for integration has not been done properly.

Tip: Always consult the Form Submissions logs to understand any delivery issues.

How To Duplicate An Elementor Page

To duplicate a page created with Elementor, save your designed page as a template, and then import that template into other pages as needed.

Save Page As Template

Click the arrow next to the UPDATE button to open the Save Options.Click Save as Template.Give your page template a name and click the Save button.

Import Saved Page Template Into A New Page

Click Add Template from the Elementor Editor. (see image below)Click My TemplatesClick Import next to the saved page template you wish to use