Author 诗语

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

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.

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.

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

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

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

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 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 Use Additional Breakpoints

Breakpoints are used when designing your website to be responsive across all devices. Breakpoints use an additional set of CSS rules to apply to elements based on the width of the screen. For example, a Heading could be displayed at 55px for desktop, 34px for tablet, or 21px for mobile. Additional breakpoints may sometimes be needed for your design as well. We can now manage these Additional Breakpoints in the Site Settings. 

Let』s Get Started

Learn how to manage your Additional Breakpoints in the document below. In order to use the Additional Breakpoints feature, you may need to navigate to Elementor > Settings > Experiments and set it to Active. This feature will be active on new installs.

Responsive Mode Editor

To enter the Responsive Mode Editor, navigate to the lower corner of your editor panel and click the responsive mode icon. This will load the responsive modes. These will additionally load on any responsive controls in the editor.

Manage BreakPoints

To enter the breakpoint editor, you may click the gear icon located in the top corner of your screen. This may also be reached in your Site Settings.

Adding Additional Breakpoints

To add breakpoints, click the + icon in the active breakpoints control. A dropdown list will appear with the additional options. Add the needed breakpoints needed for your design here. You may also remove unnecessary breakpoints here by clicking the x icon by each additional breakpoint.

Note: The default Mobile and Tablet modes cannot be removed.

Editing The Breakpoint Values

You may edit the values needed for each Breakpoint by typing the value or using the up and down arrows.

Reload The Editor

Once you have set the Breakpoint options for your project, click the blue Save button in the Site Settings. A popup will appear to notify you that the page will need to reload for the new Breakpoints to appear. Click the Reload Now link.

Using Additional Breakpoints

You will now be able to use the responsive mode editor. Click the icons at the top of the screen to see how your Elementor design will appear on each Breakpoint width. Use the zoom level to preview for accessibility. You may also drag the horizontal and vertical handles to resize your preview. 

Using Cascading Responsive Values

Elementor uses a cascading concept across breakpoints, which means that changes cascade down. Changes you make on a larger breakpoint cascade down to the smaller breakpoint, but this will not work vise versa; Changes to a smaller breakpoint won』t affect the higher breakpoint unless you』re designing for widescreens. In this case, Elementor is cascading up, making the Desktop device the default breakpoint. Learn more about inherited values here.

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