Author 诗语

I Added an SSL Certificate to My Website and Now I Cannot Edit

If you added an SSL certificate and cannot edit anymore with Elementor, replace the URL of your website in the tools of Elementor.

To do that, please follow this procedure

Replacing the URL, in this case, will also prevent saving issues. See this guide for more information.

Please note that when you modify your URL, you have to make sure that you change the URL in your WordPress Dashboard, in Settings > General. Moreover, the WordPress Address (URL) and the Site Address (URL) should be identical.

WooCommerce Single: Product Meta (Pro)

Display and control the style of the product Meta Data on WooCommerce Single template

Style

Style

View: Choose to display the Product Meta in Table view, Stacked view, or InlineSpace Between: Set the amount of space between each Product Meta itemDivider: Set to On to place a divider line between each Product Meta itemStyle: Choose the style of the divider line from Solid, Double, Dotted, or Dashed.Weight: Control the thickness of the divider lineHeight: Control the height of the divider lineColor: Choose the color of the divider line

Text

Typography: Set the typography options for the Product Meta textColor: Choose the color of the Product Meta text

Link

Typography: Set the typography options for the Product Meta link textColor: Choose the color of the Product Meta link text

Captions

Category

Singular: Set the name to use for Singular CategoryPlural: Set the name to use for Plural Category

Tag

Singular: Set the name to use for Singular TagPlural: Set the name to use for Singular Tag

SKU

SKU: Set the name to use for Defined SKUMissing: Set the name to use for Missing SKU

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

Popups: Hello Bar

Hello Bars are popular popups, primarily used for sales promotion announcements. For this example, we want our Hello Bar to only show on the Shop page, with no overlay, and a simple close button. In addition, we want to wait until the user scrolls down 60% of the page before popping up. By that time, our visitor is well engaged and is likely ready to consider our offer.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』In the Library, open the category dropdown to choose a Hello Bar, or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the vertical position to Top.Hide OverlayShow Close Button

Style

Change text, background image, button, and styling as needed.

Publish Settings

Conditions: Include: WooCommerce > Shop Page

Triggers: On Scroll: Down within 60%

Testimonial Carousel (Pro)

The Testimonial Carousel widget lets you display a sliding carousel of customer testimonials in a variety of designs.

Content

Slides

Items

Shows a list of all the items in the slide. 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 .

Content: Enter the text of the testimonialImage: Upload or choose an image from the media libraryName: Enter the customer』s nameTitle: Enter the customer』s title

Skin: Select a pre-designed skin, either Default or BubbleLayout: Choose from Image Inline, Image Stacked, Image Above, Image Left, Image RightAlignment: Align the testimonial to the left, center or rightSlides Per View: Select the number of slides to show at one time, from 1 to 10Slides To Scroll: Select how many slides to scroll per swipe, from 1 to 10Width: Set the width of the widget

Additional Options:

Arrows: Show or hide the navigation arrowsPagination: Select the carousel pagination style, either None, Dots, Fraction, or ProgressTransition Duration: Set the time between slide movement, in milliseconds

Autoplay: Slide to YES to have the carousel slide automaticallyAutoplay Speed: Set the speed at which the carousel will slide, in millisecondsInfinite Loop: Set to YES to have the carousel continue sliding, infinitelyPause on Interaction: Set to YES to have the autoplay pause when the carousel is hovered over with a mouse or clickedImage Size: Set the size of the image, from thumbnail to full, or enter a custom size

Style

Slides

Space Between: Control the space between the slidesBackground Color: Choose the background color of the slidesBorder Size: Set the thickness of the border around each slideBorder Radius: Set the border radius to control corner roundnessBorder Color: Choose a color for the borderPadding: Set the padding within the border of each slide

Content

Gap: Control the space between the image and the testimonial textText Color: Choose the color of the testimonial textTypography: Change the typography options for the testimonial text

Name

Text Color: Choose the color of the nameTypography: Change the typography options for the name

Title

Text Color: Choose the color of the titleTypography: Change the typography options for the title

Image

Size: Adjust the size of the imageGap: If Image Inline is selected, the gap controls the space between the image and the name and titleBorder: Slide to YES to place a border around the imageBorder Color: If Border is set to YES, choose the color of the borderBorder Width: If Border is set to YES, set the thickness of the border around the imageBorder Radius: Set the border radius to control corner roundness. This option is available even if Border is set to NO

Navigation

Arrows

Size: Adjust the size of the navigation arrowsColor: Choose the color of the navigation arrows

Pagination

Size: Adjust the size of the paginationColor: Choose the color of the pagination

Bubble (Options only available if using Bubble skin)

Background Color: Choose the color of the bubble』s backgroundPadding: Set the padding within the bubbleBorder Radius: Set the border radius to control corner roundness. This option is available even if Border is set to NO.Border: Slide to YES to place a border around the bubbleBorder Color: If Border is set to YES, choose the color of the borderBorder Width: If Border is set to YES, set the thickness of the border around the bubble

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.

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  icon.  If you are satisfied with the result, go ahead and click the  button. Click 『Have a Look『 to view the published page

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

Save 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

Next step – Mobile responsive editing

Send Your Feature Request

Do you have an awesome suggestion that you believe can improve Elementor or Elementor Pro?

We』d be more than glad to look over your suggestions, please leave them at https://github.com/elementor/elementor

This is the proper location for feature requests since it』s a public forum and it allows for other developers and users to communicate and collaborate alongside our development team.

Can I Transfer the Elementor Pro License Key From One Domain to Another?

Yes. If you have a Personal license, and you want to transfer the license from one domain to another, please deactivate the license from your former website in 「Elementor > License」 on your WordPress Dashboard, then activate the license on the new website.
You can check where your license is active in your account at https://my.elementor.com/websites/.

Post Navigation Widget

The Post Navigation widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display navigation links to other posts.

Content

Post Navigation

Label: Show or Hide the Previous/Next labelsPrevious Label: Enter the text for the Previous labelNext Label: Enter the text for the Next labelArrows: Show or Hide the navigation arrowsArrows Type: Select a Font Awesome icon to represent the navigation arrowsPost Title: Show or Hide the title of the previous or next postBorders: Show or Hide widget bordersIn Same Term: Indicates whether next post must be within the same taxonomy term as the current post, this lets you set a taxonomy per each post type

Style

Label

Color: Choose the color of the labelsTypography: Set the typography options for the labels

Title

Color: Choose the color of the labelsTypography: Set the typography options for the labels

Arrow

Color: Choose the color of the arrowsSize: Set the size of the arrowsGap: Set the amount of spacing between the arrows and the text

Borders

Color: Choose the color of the bordersSize: Set the size of the bordersSpacing: Set the amount of spacing between the borders and the text

Read the tutorial showing how to Create a Single Post Template

Creating a WooCommerce Shop Page / Archive Template with Elementor Pro

When visiting an online store (shop page), you see the front page of the website. You can then choose to see only a specific category (i.g. Shoes), or filter the results by size etc. What you』re actually viewing is an Archive page.

WooCommerce Archives have different terms that you can use to filter them, terms you』re familiar with: Date, Category, Price, Popularity, Rating, Tags, or any other taxonomy (e.g. Size, Color, etc.)

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

Important! In order for the Woocommerce Builder to work, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.

MailPoet & Elementor Integration

In this article, we explain how to easily integrate MailPoet and Elementor forms, so every form automatically adds a subscriber to your MailPoet list.

How to add MailPoet to Elementor

Note: First install the latest version of MailPoet 3. Elementor supports all versions of MailPoet.

Drag a Form widget into the Elementor editing screen.Click the pencil on the top upper right of the widget window to open the panel. Then, in the panel, under Content go down to Actions After Submit.You will see 『email』 already inside the box. Add 『MailPoet』, press the green 『Save』 button in the panel. Now that you have added MailPoet, it will appear under Content. Close Actions after Submit by clicking on it again.Now Go to Form Fields and change the wording of the fields to 『First Name』, Add another field called 『Last Name』. Under type be sure to choose 『text』 for the last name field.Still in Content > MailPoet3, in the drop-down menu choose LIST. Here you can add a pre-existing list – e.g. 『subscribers』.Now, go back down to MailPoet3, under Field Mapping, and add name and email.Click the middle arrow in the editing screen to view your page live and test sending an email.

That』s it.Now you can send a newsletter or other communications to specific lists such as subscribers etc. Email marketing is a great way to send everyone email updates to promote your business. Try it out!

MailPoet 「Server error. Form not sent. This Message is not visible for site visitors.」 when submitting a form linked to a MailPoet account.It happens if any custom field added in MailPoet has not been mapped in Elementor Form widget (via the MailPoet3 tab). If a single field is not mapped, it will throw this validation error.In this case, the form redirect of the form won』t work as well, naturally.Once all form fields are mapped correctly to all MailPoet fields everything should work fine.Example of field mapping properly done: