Yes. When you use Elementor with a localhost, it is not considered as an activation, so the license can be used on the production site.
To activate Elementor Pro on a live site, simply follow these instructions.
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
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)
Q: If I purchase Elementor Pro, should I delete the Free plugin after I install the Pro plugin?
A: You should not delete the Free plugin. Elementor Pro is an addon to the Free version. The Elementor Pro plugin cannot function without the Free plugin.
Q: I had a problem, and support advised me to deactivate or delete the Elementor plugin(s) and reactivate or reinstall them. Will that destroy all the hard work I did?
A: The work you did with Elementor will not be deleted when the plugin is deleted. When you reactivate or reinstall the Elementor plugin, all your designs will still be available just as they were before you deleted the plugin. Of course, we do recommend always having a recent backup of your site, in case anything ever goes wrong. This is best practice for any situation.
Q: What happens if I delete the Pro version but keep the Free version? Will my site lose any of the advanced designs I made using Pro features?
A: If you deactivate or delete Elementor Pro, your site will be unable to display the advanced designs you created with Elementor Pro. Any designs created with the standard free version of Elementor will still work. If you reactivate or reinstall Elementor Pro, however, your designs created with Pro will show up once again.
Note: There is a difference between deactivating the plugin and deactivating the license. As mentioned, deactivating the plugin will mean your site will no longer display the designs you created with the Pro plugin. So what happens if you deactivate or fail to renew just the Pro license, but keep the Pro plugin activated? See the next question for the answer.
Q: What happens if I don』t renew my license after one year? Will Elementor Pro still work?
Your existing project will remain intact, as is, for now, but you will no longer receive support, updates and access to premium templates which require renewal.
Note: Keep in mind, however, that your project will remain intact, as is, only as long as the versions of plugins stay the same. Naturally, if you update the free version of Elementor on an ongoing basis, but are no longer updating the Pro version, eventually the two versions may become incompatible with one another. You may also eventually see conflicts if you update other plugins or WordPress core, but don』t also keep up to date with updating Elementor Pro.
Both the Pro and Free versions of Elementor are 100% compatible with WooCommerce and EDD.
Elementor Pro also has a special set of features that help you showcase your WC products anywhere on the site, in any way you choose.
The Author Box 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 author box.
Content
Drag an Author Box into the editing screen Source: Choose between Current Author or Custom Author * Profile Picture: Show or Hide the Profile Picture. When using Custom – upload an imageName: Show or Hide the Author Name. When using Custom – type the Author NameHTML Tag: Choose an HTML Tag for your AuthorLink To: Link the Author Name and Image to your website or your post archive. When using Custom – enter your own linkBiography: Show or Hide your Author Biography. When using Custom – enter your Author BiographyArchive Button: Show or Hide an Archive Button. This will direct your users to your post archive. When using Custom – enter your own linkArchive Text: Type the Archive Button textLayout: Set the layout for your Author BoxAlignment: Set the Alignment for your Author Box
* Note: Current Author takes the WordPress user』s dynamic info to display the Post Author. Custom Author is static info.
Style
Image
Vertical Align: align your Author image to the top or to the middle.Image Size: Set the image sizeGap: Adjust the gap between the image and the textBorder: Slide for a borderBorder Color: Set the border colorBorder Width: Set the border widthBorder Radius: Set the border radiusBox Shadow: Add Box Shadow to your Image
Text
Under Name:
Color: Set the Author name text colorTypography: Set the typography designGap: Set the gap between the Author Name and the Biography
Under Biography:
Color: Set the Biography text colorTypography: Set the typography designGap: Set the gap between the Biography and the Button
Button
Text Color: Set the Button Text ColorBackground Color: Set the button Background ColorTypography: Set the Typography designBorder Width: Set the border widthBorder Radius: Set the border radiusPadding: Set the button padding
The Post Title 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 title.
Content
Title
Title: Post Title is the only optionLink: Enter a URL, or more appropriately, select the Dynamic icon to choose a dynamic URL such as the Post URLSize: Select the title size, choosing from Default, S, M, L, XL, or XXL. Additional sizing is available on the Style tab in the Typography optionsHTML Tag: Set the heading』s HTML tag to H1- H6, Div, Span or ParagraphAlignment: Align the post title to the left, right, center, or justified
Note: If you click 「Post Title」, a window will popup to allow you to choose a Fallback Title in the event that a Post Title does not exist. This popup also allows you to place static content Before and/or After the Post Title
Style
Title
Text Color: Choose the color of the Title』s textTypography: Set the typography options for the TitleText Shadow: Add a shadow and blur to the Post TitleBlend Mode: Set a blend mode for the title
Read the tutorial showing how to Create a Single Post Template
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.
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)
When designing with Elementor, you may notice that some elements have options for sizing, allowing you to choose PX, EM, REM, %, VW, or VH. But what do those options actually mean, and when should you use one over another?
Let』s start with the basics.
In CSS, you can specify sizes or lengths of elements using various units of measure. The units of measure that you』ll find in some Elementor options include PX, EM, REM, %, VW, and VH, although there are several more available in CSS. Not every Elementor element will offer all of these units. Elementor only presents the options that make the most sense for the given element.
The most important aspect to learn about the different units is that some units, such as PX are absolute units, and some are relative units.
Absolute Units
PX: Pixels (px) are considered absolute units, although they are relative to the DPI and resolution of the viewing device. But on the device itself, the PX unit is fixed and does not change based on any other element. Using PX can be problematic for responsive sites, but they are useful for maintaining consistent sizing for some elements. If you have elements that should not be resized, then using PX is a good choice.
Relative Units
EM: Relative to the parent element
REM: Relative to the root element (HTML tag)
%: Relative to the parent element
VW: Relative to the viewport』s width
VH: Relative to the viewport』s height
Unlike PX, relative units like %, EM, and REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element』s size.
Let』s look at a simple example.
In most browsers, the default font size is 16px. Relative units calculate the size from this base. If you change that base by setting a base size for the HTML tag via CSS, then that becomes the basis for calculating relative units throughout the rest of the page. Likewise, if a user adjusts her font size, that then becomes the basis for calculating relative units.
So what do these units mean when dealing with the default of 16px?
The number you specify will multiply that number times the default size.
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16px
2rem = 32px
.5rem = 8px
100% = 16px
200% = 32px
50% = 8px
Ok, great, but what if either you or the user changes the default size? Because these are relative units, the final size values will be based off of the new base size. Although the default is 16px, if you or the user changed it to 14px, then the calculated sizes would end up being:
1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
.5rem = 7px
100% = 14px
200% = 28px
50% = 7px
This gives the user the freedom to adjust her default browser font size, while still maintaining the relative scale of each element that you』ve specified.
What is the difference between EM and REM?
Looking at the chart above, it shows EM and REM looking exactly the same. So how do they differ?
Simply put, they differ based on inheritance. As mentioned, REM is based on the root element (HTML). Every child element that uses REM will then use the HTML root size as its calculation point, regardless of whether or not a parent element has any different sizes specified.
EM on the other hand, is based on the font size of the parent element. If a parent element has a different size than the root element, the EM calculation will be based off of the parent element, and not the root element. This means that nested elements that use EM for sizing can sometimes end up being a size that you didn』t anticipate. On the other hand, it does give you more fine-grained control if you need it to specify the size for a particular area of a page.
So what about %, VW, and VH? What are they all about?
While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights.
To reiterate, VH stands for 「viewport height」, which is the viewable screen』s height. 100VH would represent 100% of the viewport』s height, or the full height of the screen. And of course, VW stands for 「viewport width」, which is the viewable screen』s width. 100VW would represent 100% of the viewport』s width, or the full width of the screen. % reflects a percentage of the parent element』s size, regardless of the viewport』s size.
Let』s look at some examples of where Elementor gives %, VW, and VH options.
Column Widths: If you edit the layout of an Elementor Column, you』ll notice that there is only one width sizing unit available – %. Column widths only work well and responsively when using percentages, so no other option is given.
Margins: A section』s margins can be specified either in PX or %. Using % is usually preferable to ensure the margins don』t get larger than the content when scaling down for a mobile device for instance. By using a percentage of the width of the device, your margins will remain relative to the size of the content, which is almost always preferable.
Padding: A section』s padding can be specified either in PX, EM, or %. As with margins, it is often preferable to use either EM or % so the padding remains relative as the size of the page scales.
Font Size: If you edit the typography of an element, such as a Heading, you』ll see four choices: PX, EM, REM, and VH
Have you ever created a large heading and admired how great it looked on desktop, only to realize it was far too large on mobile? (Admission of guilt: I have, more than once).
The key to solving this elegantly is to use either EM, REM, or VW instead of PX. Which you choose is dependent upon your particular situation. I usually choose EM because I want the size to be relative to the Heading』s parent. But if you prefer to have the size be relative to the root (HTML) size, then choose REM instead. Or, you could set it to be relative to the viewport』s width (VW) if that works better for your case.
Note that you could also set specific font size PX values per device by using the Device Icons to specify a size for Desktop, Tablet, and Mobile. But that still places limits on responsiveness and accessibility, so keep that in mind if you choose PX.
More About VW and VH
Viewport units represent a percentage of the current browser viewport (current browser size). While similar to % units, there is a difference. Viewport units are calculated as a percentage of the browser』s current viewport size. Percentage units on the other hand are calculated as a percentage of the parent element, which may be different than the viewport size.
Let』s consider an example of a mobile screen viewport that is 480px x 800px.
1 VW = 1% of the viewport』s width (or 4.8px)
50 VW = 50% of the viewport』s width (or 240px)
1 VH = 1% of the viewport』s height (or 8px)
50 VH = 50% of the viewport』s height (or 400px)
If the viewport size changes, the element』s size changes respectively.
When Should You Use One Unit Over Another?
Ultimately, there isn』t a perfect answer for this question. In general, it is often best to choose one of the relative units over PX so that your web page has the best chance of rendering a beautifully responsive design. Choose PX however, if you need to ensure that an element never resizes at any breakpoint and remains the same regardless of whether a user has chosen a different default size. PX units ensure consistent results even if that』s not ideal.
EM is relative to the parent element』s font size, so if you wish to scale the element』s size based on its parent』s size, use EM.
REM is relative to the root (HTML) font size, so if you wish to scale the element』s size based on the root size, no matter what the parent size is, use REM. If you』ve used EM and are finding sizing issues due to lots of nested elements, REM will probably be the better choice.
VW is useful for creating full width elements (100%) that fill up the entire viewport』s width. Of course, you can use any percentage of the viewport』s width to achieve other goals, such as 50% for half the width, etc.
VH is useful for creating full height elements (100%) that fill up the entire viewport』s height. Of course, you can use any percentage of the viewport』s height to achieve other goals, such as 50% for half the height, etc.
% is similar to VW and VH but it is not a length that is relative to viewport』s width or height. Instead, it is a percentage of the parent element』s width or height. Percentage units are often useful to set the width of margins, as an example.
Elementor makes it easy to choose the option that is best suited for your design. Ultimately, it』s your choice.
