Elementor 文档

What is the Elementor Theme Builder?

In the past, a 「page builder」 allowed you to only design the area that your current theme didn』t control. Now, Elementor expands on the 「page builder」 concept to include the ability to design those areas that your theme normally controls, including the header, footer, etc. With Elementor Pro, the 「page builder」 concept has morphed into that of a 「theme builder」.

「Builder」 might be a confusing word in this case, but historically, it has become a standard part of the design vocabulary. Just as page builders are really page designers that work in conjunction with your theme, the Elementor Theme Builder is really a tool for building a new design framework that changes the look of those areas of your theme that has traditionally been off-limits to page builders.

Elementor』s Theme Builder feature does not create a new standalone theme.

What does Elementor』s Theme Builder feature do?

With Elementor Pro』s Theme Builder, you can now use Elementor』s editor to visually build and design:

Any theme』s header and footer.Any theme』s archive page templates so that you determine your blog posts and other archive layouts.Any theme』s single post or single page templates.Any theme』s search page format and layout.Any theme』s 404 page format and layout.Your WooCommerce store layout.Your WooCommerce product pages.Dynamic templates, so you can build each template once, creating a content framework, and then apply it across your site with one click.Multiple templates, multiple headers, multiple footers, etc. with each designed, built, and applied to different use cases!

We』ve received questions from a few users, so just to clarify, we』ve answered them here.

1. Even if I purchase Elementor Pro, I still need a theme installed already, right?Yes, you must have a theme installed and activated to use both the free Elementor plugin and Elementor Pro.

2. Which theme should I use?The choice of theme is up to you. As long as theme developers respect WordPress coding standards, Elementor should work well with it. We do have a list of Elementor-compatible themes available online.

3. You mention this isn』t for creating a standalone theme. So I can』t use this to code a theme from scratch, right?That』s right. You can certainly code a theme from scratch if you』d like. But Elementor Theme Builder is not the tool you need to write that code.

4. If I do code my own theme, and use Elementor Theme Builder to design the header, footer, and other theme areas, can I bundle Elementor Pro with my theme and then sell the theme bundle to others?No. You are not allowed to include Elementor Pro in a theme you are selling. You can include the free Elementor plugin if you』d like. You can also include a set of saved Pro templates which you have designed. Those templates could be made available to import if the buyers of your theme choose to purchase Elementor Pro on their own.

Elementor』s Theme Builder feature is not about 「creating a standalone theme」 – it is about building upon any existing theme – transforming and reimagining every part of your current theme with your design, your layout choices, your dynamic templates – all using Elementor』s easy drag-and-drop visual editor.

Also see Considerations for Theme Builder Compatibility

Read the full introductory blog post

WooCommerce Single: Upsell (Pro)

Set the Upsell Products style in WooCommerce Single template. Make sure to set the Product Upsells in your Product pages > Linked Products > Upsells. This is where the Upsells widget gets the information from.

Content

Upsells

Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)Order By: Set the order in which the upsells will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu OrderOrder: Select ASC or DESC (ascending or descending) order

Style

Products

Columns Gap: Set the exact gap between the upsell products columnsRows Gap: Set the exact gap between the upsell products rowsAlignment: Align the upsells data to the left, right, or center

Image

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the upsell product imagesColor: Choose the border colorBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data

Title

Color: Choose the color of the upsell product titleTypography: Set the typography options for the upsell product titleSpacing: Adjust the amount of space after the upsell product title

Rating

Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars

Price

Color: Choose the color of the upsell product PriceTypography: Set the typography options for the upsell product Price

Regular price

Color: Choose the color of the upsell product』s Regular PriceTypography: Set the typography options for the upsell product』s Regular Price

Button

Normal | Hover

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

Text Color: Choose the color of the upsell product』s Button TextBackground Color: Choose the background color of the upsell product』s ButtonBorder Color: Choose the border color of the upsell product』s ButtonTypography: Set the typography options for the upsell product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the upsell product』s ButtonBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons

View Cart

Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text

Heading

Heading: Show or Hide the upsell products heading

Box

Border Width: Control the thickness of the border around the upsell product』s boxBorder Radius: Control corner roundness of the upsell products boxPadding: Change the padding within the upsell products box

Normal | Hover

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

Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the upsell products boxBorder Color: Choose the border color of the upsell products box

Sale Flash

Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the upsell products boxDistance: Set the distance of the Sale Flash from the top of the upsell products box

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.

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.

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.

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

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: 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

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

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.

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.