Author 诗语

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.

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:

What Happens if I Find Out it Doesn』t Work with the Theme or Plugin on my Site?

Elementor Pro works with almost all themes & plugins seamlessly. 

If you do run into a plugin conflict, our support and development department will do everything to fix the issue. 

If you run into an issue with your theme, your theme support will be able to fix the problem by contacting us and/or by checking our documentation for developers. You also have the option to switch to our barebone Hello Theme, in this case.

If we can』t solve your issue, you can always use our 30-day refund policy and get your money back.

Considerations for Theme Builder Compatibility

Although Elementor Pro』s Theme Builder feature can be used with any WordPress theme that adheres to WordPress coding standards, there are some things to consider which may affect how well any particular theme will integrate with our Theme Builder.

If You Are Unsure If Your Theme Is Fully Compatible, Design Your Headers and Footers Together

If you decide to use Elementor Theme Builder to create a header or a footer, you should ideally use it to create both, rather than one or the other. If you would prefer to use Theme Builder to create just the header but keep your theme』s existing footer, or vice-versa, you want to use Theme Builder to design a new footer, but keep your theme』s existing header, you should send this guide to the developer of your theme.

What Is The Developer Guide All About?

Elementor provides a Theme Locations API for theme developers. Although Elementor can edit headers and footers by default on most themes, it is still necessary for themes to register additional locations to allow users to edit other theme components with Elementor Theme Builder. Theme developers can choose to support all core locations, just some locations or even create their own custom locations. For example, if theme developers want to allow users to edit the sidebars with Elementor, they can simply register the sidebar location via our API.

What Could Happen If You Only Design A Header But Not A Footer With Elementor Theme Builder (Or Vice-Versa)?

WordPress theme developers often tie the header and footer code together by opening a div in the header and then closing that div in the footer. If Theme Builder replaces the header but not the footer, or vice-versa, it is possible that the opening and closing tags will become mis-matched. If a tag is not closed, the structure of the code breaks and the page will break as well.

Summary

Many themes have chosen to fully integrate Elementor locations into their themes. You can see a list of themes that have been specifically designed to work well with Elementor.

Elementor Theme Builder can enable you to replace headers and footers of almost any theme that has been written with WordPress coding standards in place. If these themes haven』t yet used the Elementor Theme API to register Elementor locations, you should probably use Theme Builder to replace the the theme』s header and its footer at the same time. Replacing only one or the other with Theme Builder could cause your page to break.

However, if you design both your header and your footer with Theme Builder, your newly designed header and footer will replace both the theme』s header and its footer code. This ensures that all div tags in the header and footer will be opened and closed appropriately, and your page should not break.

If you prefer to only design the header or only design the footer with Theme Builder, then you should ask the theme developer to use our Theme Locations API to register locations. Likewise, if you would like to use Elementor Theme Builder to design other areas of the theme such as the sidebar, ask your theme developer to register those locations as well, using the Theme Locations API.

Popups: Full Screen

Full Screen Popups are great for directing your user』s attention to only one Call To Action or Promotion. In this example, we』ll wait for the user to be inactive for a while, at which time, we』ll display a full screen popup that uses a Countdown widget to help change that user』s inaction to immediate action.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set Width to 100 VWSet Height to Fit to ScreenSet the Horizontal position to Center and the Vertical position to Center.Show OverlayShow Close Button

Style

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

Publish Settings

Conditions: Include: Entire Site

Triggers: After Inactivity of 30 seconds

Popups: Classic Opt-In

Although there are many uses for the classic popup, it traditionally places an opt-in form in the middle of the screen, with an overlay that obscures the background. For this example, we』ll trigger the popup sitewide when the user shows intent to exit the page.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the Vertical position to CenterShow OverlayShow Close Button

Style

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

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Exit Intent

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.

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

Migration to Font Awesome 5

Elementor v2.6 introduces the Icon Library, which includes an update to the Font Awesome 5 library. 

The first time you attempt to use a widget that includes the Icon Library, you』ll be presented with a Font Awesome Migration popup.

This popup explains that Elementor v2.6 has moved from FA4 to FA5 – which includes more than 1500 icons. It also lets you know that some FA4 icons design has changed when updated to FA5.

When hitting Update you』ll be redirected to Elementor > Tools page (No worries, your work will be automatically saved):

Here you will be warned that by clicking the Migrate to Font Awesome 5 button, you understand that this action is not reversible and cannot be undone by rolling back to a previous version. 

If you agree, click the Migrate to Font Awesome 5 button, where you』ll be prompted with the last popup reminding you this action is irreversible:

Click Continue. You』ll be redirected back to your page.

This will complete the migration process, and you are now free to use the new Icon Library on any widget that has icon controls. Once the Font Awesome upgrade is completed, the Font Awesome Upgrade TAB under  Elementor > Tools will disappear.

Tip: Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes  so that your Font Awesome 4 icons will still display properly when using Font Awesome 5.

See the full widgets list below.

Note: If you don』t update to FA5, Elementor widgets that use FA4 icons will still continue to work, but you wouldn』t be able to edit them.

List of Elementor widgets that use the Icon Library:

Button Widget (Free)Accordion Widget (Free)Icon Box Widget (Free)Icon List Widget (Free)Icon Widget (Free)Social Icons Widget (Free)Toggle Widget (Free)Call to Action Widget (Pro)Reviews Widget (Pro)Flip Box Widget (Pro)Form Widget (Pro)Price Table Widget (Pro)Post Info Widget (Pro)

Good to know:

1. FA4 was first launched in 2013 and used 675 icons. FA5 was released in 2017 and is newer with better speed, more icons, font families and more. 

2. What is shim.js? Font Awesome version 5 changed some icon names. There is a JavaScript code that runs in every page and converts the FA4 icons to FA5. It allows you to keep v4 icon names on v5.

3. You must upgrade to enjoy the Icons library and keep adding new icons.

ActiveCampaign & Elementor Integration

In this guide, we will explain how to integrate ActiveCampaign With Elementor Forms.

First set your ActiveCampaign API Key in the Integrations Settings. Under Elementor > Settings > Integrations Tab Create a form using Elementor Form Widget Click Actions After Submission Under Add Action choose ActiveCampaign *Match your Form Fields to ActiveCampaign fields. ActiveCampaign supports the following fields: Email, First Name, Last Name, Phone and Organization.

* Tip: Click to learn how to get your API Key from ActiveCampaign

Note: The integration with ActiveCampaign will update an existing contact in your ActiveCampaign account if the email address is the same.

How To  Subscribe A Contact To An ActiveCampaign Form And Enable Double Optin

Enter the ActiveCampaign Form ID into the Elementor Form ID field in the 「Additional Options」 tab.Then follow the instructions on your ActiveCampaign account to set double optin.