Author 诗语

Does Elementor Support Shortcodes?

Yes.

We even have a shortcode widget that lets you easily embed any shortcode right into Elementor.

For more details, read this guide.

Create a Complete Website Using Elementor Kits and Theme Builder

The Goal: Create a full website which uses an Elementor Digital Agency Template Kit and the Hello Theme

The website will have the following page structure:

Home About UsServicesSocial MediaClientsArchive with Single PostsContact UsHeader and Footer404 page

STEP ONE: Choose A Theme

Go to Appearance > ThemesClick Add NewSearch for Hello ElementorClick InstallClick Activate

STEP TWO: Create Pages

Go to Pages > All PagesHover over the Sample Page title and click the Trash link to delete the Sample Page that comes with the default WordPress installationClick Add NewGive the new page a name – in this case, 「Home」Click the Edit with Elementor buttonClick the Page Settings cog in the lower left corner of the Widgets PanelChange the Page Layout to 「Elementor Full Width」. Notice that the header is incomplete. You will work on this in a later step.Click the Add Template folder icon to open the Template Library.From the Template Library』s search box, search for 「Digital Agency Home」.Click Insert to load the template into the page.Click the Publish button.Click 「Have a Look」 to view the published page.

Repeat these steps for each new page, being sure to add About, Services, Social Media, Clients, and Contact Us pages. 

Tip: Create new pages by pressing CMD-E on a Mac or CTRL-E on Windows to open Finder, then type 「Add」 and choose 「New Page」 from the search results. This way you can continue to create new pages right from Elementor』s Editor, without having to return to the dashboard.

Note: Notice that you haven』t yet created the News Page yet. This is because it isn』t a static page like the others. It is an Archive Page with Dynamic Content, and you』ll create this page soon.

STEP THREE: Tell WordPress Which Page To Use As The Home Page

From the WordPress dashboard, go to Settings > Reading and change the option 「Your homepage displays:」 to 「A static page」, and then select the Home page you created in the steps above from the Homepage dropdown list.Click the Save Changes button.Go to Pages > All Pages and verify that the Home page you created now says 「Front Page」 next to it.

STEP FOUR: Insert A Header Using Elementor』s Theme Builder

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Header」 from the Template Type dropdownGive your template a name, such as Site HeaderWhen the library opens the header templates, search for 「Digital Agency」Hover over the Digital Agency header and click the Insert link.

Note: Since this is a new site, we haven』t created a menu yet. This is why you will see an empty menu widget in the header template you just inserted. We』ll create our WordPress menu next.

STEP FIVE: Create The Menu

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Menus」 to quickly navigate to the WordPress menus section.Under Menu Structure, type a name for your menu, such as 「Main Menu」Click the Create Menu buttonUnder Add Menu Items > Pages, place checkmarks next to each of the pages you created, and click the Add to Menu button.Reorder them as desired by dragging them up or down. Nest any items as child pages under parent pages by dragging the child slightly to the right, and just under a parent page. Do this for Social Media, by dragging it just under Services, and slightly to the right.Click the Save Menu button.Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」 to edit your header with ElementorClick Publish button.Click the Add Condition buttonChoose Include > Entire Site as the condition and click the Save & Close button.Notice that the menu is now displayed in the Header.

STEP SIX: Insert A Footer Using Elementor』s Theme Builder

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Footer」 from the Template Type dropdownGive your template a name, such as Site FooterWhen the library opens the footer templates, search for 「Digital Agency」Hover over the Digital Agency footer and click the Insert link.Notice that although you』ll see the header in the editor, only the footer will actually be editable here.Click the Publish button.Click the Add Condition buttonChoose Include > Entire Site as the condition and click the Save & Close button

STEP SEVEN: Create The News Archive Page Template

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Archive」 from the Template Type dropdownGive your template a name, such as News ArchiveWhen the library opens the archive templates, search for 「Digital Agency」Hover over the Digital Agency archive template and click the Insert link.Click the Publish buttonClick the Add Condition buttonChoose Include > All Archives as the condition and click the Save & Close button

Note: Since this is a new site, we only have the default 「Hello World」 post. You』ll need to create new posts, in a category called 「News」 (for this example – use your own categories as needed), and set them to use this template. We』ll do that next.

STEP EIGHT: Create New Posts In A News Category

Go to Posts > All PostsHover over the Hello World title and click the Trash link to delete the Hello World post that comes with the default WordPress installationClick Add NewGive it a name and create your post as you normally would.Add a Featured Image and an excerpt if you』d like.Under Category, click Add New Category, and give it a name, such as NewsClick the Publish buttonRepeat steps 3 through 7 for each post you need to add to the News category.Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for 「News」 (or whatever you called your category). Click the category that appears in the search results to view the Category Page. Verify that your new posts are displayed nicely on the News Archive page.Click on the title of any post from the News Archive page.Notice that the styling is not ideal. This is because you need to create a Single Post Template, which you』ll do next.

STEP NINE: Create Single Post Template

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Single」 from the Template Type dropdownSelect 「Post」 from the Post Type dropdownGive your template a name, such as Single PostsWhen the library opens the single post templates, search for 「Digital Agency」Hover over the Digital Agency single post template and click the Insert link.Click the Publish buttonClick the Add Condition buttonChoose Include > in Category > News (or whatever the name of your category is) as the condition and click the Save & Close buttonClick Have a Look to see the post using the Single Post Template design.

STEP TEN: Add News Archive Page To The Menu

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for 「Menus」 to go back to your Menu to edit it.Under 「Add Menu Items > Categories」, place a checkmark next to the News category (or whichever category you created), and click Add to MenuDrag the new menu item to wherever you want.Click Save Menu

STEP ELEVEN: Create 404 Page

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Single」 from the Template Type dropdownSelect 「404 Page」 from the Post Type dropdownGive your template a name, such as 404When the library opens the 404 templates, search for 「Digital Agency」Hover over the Digital Agency 404 template and click the Insert linkClick the Publish buttonClick the Add Condition buttonChoose Include > 404 Page as the condition and click the Save & Close buttonType the URL of a page that doesn』t exist on your site into your browser to see the new 404 page in action.

STEP TWELVE: Edit Content To Suit Your Needs

That』s it! You』ve created an entirely new website using Elementor』s Digital Agency theme kit. Now that you have a complete website structure, you are ready to edit the content on the pages to include all your own information.

Field Style

You can easily style the form fields』 color, fonts, and borders

Text Color – Set the color of the input text (The text the user fills in)Typography – Set the typography of the input textBackground Color – Set the background color of the fieldsBorder Color – Set the border color of the fieldsBorder Width – Set the width of the field bordersBorder Radius – Set the radius of the border

Learn more about the Form Widget (Pro)

How To Create A Multi-Column Form

Elementor forms can easily be adjusted to display form fields in 2 or more horizontal columns, using the built-in Column Width option. Fields are set to 100% column width by default, but you can select a different width for each field, from 20% to 100%.

Content

Form Fields

Go to Content > Form Fields and Select a field that needs a different widthColumn Width: Select a width, choosing from 20% to 100%

Tip: You can change the width of the Submit button in the same way.

Note: Click the Column Width』s mobile editing icon to choose different widths for mobile and tablet as well.

Learn more about the Form Widget (Pro)

Zapier & Elementor Integration

Zapier is an automation service similar to IFTTT (IF This Then That). Zapier regularly checks for a trigger on the apps you』ve chosen, if the trigger occurred Zapier will perform an action or even multiple actions.

What does Zapier have to do with Elementor?

One of the most powerful features of Elementor is its Form widget. With this widget, you can create forms and start collecting leads on your site. This is a crucial step for any growing business.

The collected leads can be automatically adding to email marketing automation and CRM services that have already been integrated to Elementor. These include MailChimp, MailPoet, ActiveCampaign, Campaign Monitor, GetResponse, Drip, and Hubspot.

You can also set the forms to integrate with Zapier, thus connecting them to the over 1000+ services that are hooked to Zapier.

The process of connecting Elementor forms to Zapier is a bit longer than the usual integrations. It includes creating a trigger in Zapier from Elementor. Once an Elementor form is sent the Zapier trigger is fired. After this, the action or actions are made, causing the form submission to enter the integrated service.

This two-step process of creating the trigger and action is all done with Zapier, and in the following steps, you will learn just how to set this up.

Creating the Elementor trigger inside Zapier

Your first step is to create a 『Zap』 in Zapier. A Zap is a blueprint for a task you want to do over and over. In words, a Zap looks like this: 「When I get a new thing in A, do this other thing in B.」

Inside Zapier

1. Click on 『Make a Zap』

2. Choose app – On the left, you will see all the steps needed to complete the Zap. Choose 『Webhooks』 under 『Built in apps』

3. Choose trigger – On the 『Select webhooks by Zapier trigger』 screen, choose 『Catch hook』 and press 『Save + Continue』

4. Set up options – In the 『Set up Webhooks by Zapier Hook』, no additional actions are needed (choose 『Continue』)

5. Test this step – Copy the Zapier webhook to your clipboard

Inside Your Own Website

1. Go to your website, and inside Elementor, edit the form you want to get integrated to Zapier. Under Actions after submit, add Webhook.

2. Open the Webhook toggle, and enter the hook you copied from Zapier

3. Save the page, and go to the live version of the page. Now, submit the form. This sends the Webhook to Zapier, to confirm the hook we created.

4. Back in Zapier, click continue. You should get a 『Test successful』 notice.

Create the Action That Zapier Performs

In this part, we create the action that follows our trigger. As a reminder, the trigger is the Elementor form submission.

Let』s choose one of the 1,000+ apps to show how to add the action to Zapier. I』ll go ahead and choose MailerLite.

Inside Zapier

1. MailerLite – In the search bar, enter MailerLite

2. Create / update subscriber – Choose 『Create / update subscriber』 and click 『Continue』

Inside MailerLite

1. Go to MailerLite website – Let』s get the API from MailerLite by going to your profile image > Integrations > Developer API and click 『Use』

2. Copy the API key

Back in Zapier

1. Back in Zapier, let』s connect our account

2. Paste our API key

3. Continue to the next step

4. Edit template – Match the subscriber group and list fields

5. Test this step – Run a test to MailerLite

6. Test this step – Get the approval for the test

7. Rename step – Switch your Zap on and name it

DONE!

Now go to the Elementor page on your website, send a test form submission, and go to MailerLite to make sure that the new submission was added correctly.

Elementor Pro 2.0 Theme Builder FAQ

When will Elementor Pro 2.0 be released? Where can I find it?

Elementor Pro 2.0 is already out. If you cannot see an update message under Dashboard > Plugins, go to Dashboard > Updates and click the Check Again button. You should then see an available update of the plugin.

Does Elementor Theme Builder work on any theme?

Absolutely! We』ve tested it on hundreds of themes, making sure everything works perfectly, down to the last pixel.

I have an Elementor Pro license. Will I also get Elementor Pro 2.0 (including the Theme builder)?

Yes, every user with an active license can update Elementor Pro to the latest version and get all the new features of Pro 2.0, including the theme builder capabilities. If you don』t have an active license, you can purchase one, or renew your previous license with by logging into your account: my.elementor.com.

Does the single Blog Post Template only apply to future posts or does it work for older posts as well?

The single blog post template applies to old and new posts alike.

Is it possible to create a Sticky Header?

Yes. When you edit your Header, go to Section > Advanced > Motion Effects and enable Sticky.

Is Schema added to the headers?

We are working on adding schema in the next versions.

Can I set the site』s Favicon with Elementor?

No. Elementor does not have this option.

Is Elementor Theme builder a separate product?

No, Theme Builder is a set of features that are built-in to Elementor Pro. See the question above for more detail.

Do I still need a theme?

Yes. Elementor Pro 2.0 doesn』t replace your theme. It is a plugin that gives you visual design capabilities over every part of the theme. Instead of being restricted to a certain header, footer, single post, archive and other parts of the theme, you can customize every part using Elementor』s visual editor.

How do I edit my header and footer with Elementor Pro 2.0?

First, make sure you are updated to the latest versions of Elementor and Elementor Pro. Then, in the WordPress dashboard, go to Templates > Theme Builder and create a new header/footer template. Now all that』s left is designing your header or footer template and publish it live on your site, or to a specific area of your choosing.

Note: if your theme isn』t fully compatible with Elementor Pro, you will need to edit both your header as well as your footer. You will not be able to design only one of them.

Can I edit my single post with Elementor Pro 2.0?

Yes. Update Elementor and Elementor Pro to the latest version, go to Templates > Theme Builder and create a new single template. Design the single template, then publish it live on your site, or to a specific area of your choosing.

Can I edit my post/blog archive with Elementor Pro 2.0?

Yes. Update Elementor and Elementor Pro to the latest version, go to  Templates > Theme Builder and create a new archive template. Design the archive template, then publish it live on your site, or to a specific area of your choosing.

Can I edit my search results page with Elementor Pro 2.0?

Yes. Update Elementor and Elementor Pro to the latest version, go to  Templates > Theme Builder and create a new archive template. Design the archive template, then publish it, setting the condition to search results page.

Can I edit my 404 page with Elementor Pro 2.0?

Yes. Update Elementor and Elementor Pro to the latest version, go to  Templates > Theme Builder and create a new single template. Design the 404 page, then publish it, setting the condition to 404 page.

Can I edit my Woocommerce pages (Product, Shop, Cart, etc.) with Elementor Pro 2.0?

Yes. Update Elementor and Elementor Pro to the latest version, go to   Templates > Theme Builder and create a new single or archive product template. Design the template, then publish it live on your site, or to a specific area of your choosing.

Can I use Elementor Pro 2.0 to edit my existing Header/Footer/Single/Archive?

No. You can use it only to create new ones.

I』m a theme/plugin developer, how can I integrate with Elementor Pro?

We added a dedicated documentation area especially for theme and plugin developers, with many tutorials explaining how to properly integrate with Elementor.

https://elementor.com/introducing-elementor-developer-api/

Read about adding new Elementor areas to your theme in this guide: https://developers.elementor.com/theme-locations-api/

You can follow our WordPress theme project, called Hello Elementor, on GitHub: https://github.com/pojome/elementor-hello-theme

The Hello Elementor theme is also now available on the WordPress repo at https://wordpress.org/themes/hello-elementor/

I just updated to the latest version and am experiencing issues with Elementor, what should I do?

Read this guide:

https://docs.elementor.com/article/235-update-issues

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

HubSpot & Elementor Integration

Elementor integrates with the free version of HubSpot completely automatically. There are a few steps you should make to make the integration work as intended.

Making Sure HubSpot is Setup Correctly

Login to your HubSpot account and go to your Profille, then click on Marketing > Forms > Non-Hubspot Forms. Turn on Collect data from website forms and then click the Save buttonFrom your WordPress dashboard, install and activate the HubSpot All-In-One Marketing plugin.  Go to the HubSpot menu item from your dashboard and connect the plugin to your account, then click Start exploringEdit your Elementor Pro form and from the Additional Options tab, give the Form ID a name.

That』s it! Easy right?

Testing That the Integration Works

1. Save your page, and go to the live version

2. Enter testing details into the form, and click on submit. You should see a confirmation message. If there is an error with the integration, and you are logged into the site as admin, you will see the description of the error, so you know exactly what went wrong with the integration.

4. Now, log into your HubSpot account and go to Marketing > Lead Capture > Collected Forms. Make sure the form name for the form you just submitted appears in the list.

5. To view the new contact that was just submitted, go to Contacts > Contacts. That contact will now be monitored by HubSpot.

Post Excerpt Widget

The Post Excerpt widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post』s excerpt.

Content

Post Excerpt is the only option.

Note: If you click 「Post Excerpt」, a window will popup to allow you to choose a Fallback Excerpt in the event that a Post Excerpt does not exist. This popup also allows you to place static content Before and/or After the Post Excerpt

Style

Text Color: Choose the color of the excerpt textTypography: Set the typography options for the excerpt text

Read the tutorial showing how to Create a Single Post Template

Site Title Widget (Pro)

The Site Title widget is a dynamic widget that displays the Site Title that was assigned in the WordPress Customizer. Although the site』s title can only be replaced or deleted in the WordPress Customizer, the Site Title widget gives you the ability to change some design aspects of the title.

Content

Title: The title is automatically, dynamically retrieved for youLink: The link is automatically, dynamically retrieved for youSize: Select the size of the Site Title, from Small to XXLHTML Tag: Set the Site Title』s tag to H1-H6, Div, Span or ParagraphAlignment: Align the Site Title to the left, right, center, or justified

Style

Text Color: Choose the color of the Site Title』s textTypography: Change the typography options for the Site Title』s textText Shadow: Add a shadow and blur to the Site Title』s textBlend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.