Preview & Publish your page

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

Popups: Slide-Ins

Popups: Slide-Ins

Slide-In popups can be used for any purpose. In this example, we』ll use one as an age-gate, to force users to verify that they are over the age of 18 before viewing the site. We』ll redirect them to a search engine if they say they are under 18, and close the popup if they say they are over 18. No other method will allow the user to close the popup to enter the site.

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 OverlayHide Close ButtonSet Entrance Animation to Slide In Left

Style

Set Overlay to either a solid color or gradient, with no transparency.

Adjust Content

Change content as needed. We used YES and NO buttons to either close the popup or redirect the user to another site.

For the YES button, we used the link field to set a Dynamic Popup Action to Close Popup.

For the NO button, we set a link to Google, so the user would be sent away from our site.

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Load

ConvertKit & Elementor Integration

ConvertKit & Elementor Integration

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

First set your ConvertKit 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 ConvertKit

Tip: Click to learn how to  get your API Key from ConvertKit

Match your form fields to ConvertKit』s Fields through the Field Mapping options You can draw the Tag Fields from the ConvertKit』s API.

Note : ConvertKit integration only supports field mapping for the  Email and First Name fields. Any additional custom field isn』t supported.

Note: The integration with ConvertKit creates a new contact in your ConvertKit account. It doesn』t update existing contacts.

Create WordPress Sticky Headers Using Elementor』s Theme Builder

Create WordPress Sticky Headers Using Elementor』s Theme Builder

WordPress Sticky headers make your header or menu visible at all times. 

Click the Edit Section   icon in your Header, and in the panel go to AdvancedClick on Motion Effects, and slide the Sticky Header ONChoose the devices you need (desktop, tablet, mobile)Update and add Conditions. Click to learn about Conditions.

Learn more about Header Design

Note: You have to deactivate  The stretch section feature to be able to use the Scrolling Effect, otherwise the Scrolling Effect tab won』t appear.

The Content Area Was Not Found in Your Page

The Content Area Was Not Found in Your Page

This article explains what to do if you get the message:

「Sorry, the content area was not found in your page. You must callthe_content function in the current template, in order for Elementor to work on this page.」

What is the_content, and why does Elementor require it?

The the_content function is a WordPress function that gets the content from the database and prints it on the screen. Given that Elementor』s content replaces the content of the page, if this function is not called for, then Elementor cannot work. Read more onthe_content function onWordPress.org.

Does this error happen only on specific pages, but not on all pages?

If so, here are the most common reasons for this to occur:

There are 3 common occurrences that may be the cause of whythe_content will not be called:

Are you trying to edit the Blog archive page or a Homepage that shows the latest posts? These are all archive pages and they can only be edited by Elementor Pro』s Theme Builder function. See how to create an archive template here.Are you trying to edit a WooCommerce shop or product page?a. WooCommerce shop pages cannot currently be directly edited by Elementor. With Elementor Pro, however, you can create a new shop archive page to use in place of the default shop page. See how to create a WooCommerce archive template here.b. WooCommerce product pages must be edited with Elementor Pro』s WooCommerce Builder. If you edit it there and not into WooCommerce, you won』t receive the the_content error and you will be able to assign the template to your WooCommerce product pages.If this is happening on a new page you are trying to create, check the page』s permalink slug (set to 「plain」 to troubleshoot). If you are already using the same slug name elsewhere, such as a post category or product category, and then assign the same name to a page, the permalink confusion can cause this error to occur. For example, if you have a category with a slug of 「sports」, do not use 「sports」 as the slug for your page. Name your new page something else, and the problem will be resolved.Have you or the theme』s developer created a custom WordPress page template for your theme that does not include the_content function? You will need to include the_content in your code to edit it with Elementor or switch to a different theme, which often solves the problem. First, try switching to a theme like Twenty Seventeen or GeneratePress and see if your problem is solved. If you are a web developer and are developing a theme, add the_content function into the page template』s code. This is the line you need to add: If you are not familiar with where to place this code or how to add it to the page, please contact your website developer so it can be implemented properly as we cannot provide full support for that. Please note that adding this code won』t enable the editing of Archive pages and Latest Post pages (these pages have to be edited via the theme builder of Elementor) and it is really simple.

Important! You do not have to add this code if you are not the developer of a theme. The majority of WordPress themes include this function in the regular pages and posts.

Does this happen on all pages, using any theme? If so, here are some reasons this might be occurring:

Caching issues: (clear the cache of your browser and check if it helps). This is relevant especially if it happens from time to time.Conflicts with browser add-ons: In this case, you can switch to another browser (it has to be Chrome, Safari, Firefox or Opera).Back-end issues: (try to click on 「Edit with Elementor」 from the front-end and check if it works this way).Plugin conflict (deactivate all your plugins besides Elementor and Elementor Pro to check if it removes the error message and if it is the case, reactivate them one by one to find the culprit). Publish your pages: Make sure also that you publish your pages given that sometimes, conflicts or unusual server configurations can make the editing with Elementor impossible on draft pages.Permissions on pages built with Elementor and Membership plugins. To rule out this possibility, deactivate temporarily your membership plugin.The structure of your permalinks (in this case, save one more time your permalinks)404 pages (this can also be due to the structure of the permalinks) or the page does not exist anymore.A WordPress install without the .htaccess file (in this case, you have to verify with your hosting company if you have this file on your WP install)When you do not have the WordPress Default Loop in your layout (this has to be checked with the support of your theme)A Server which erases the PHP $_GET variable (this can be solved by your hosting company)Your host may need to enable zlib.output_compression a module which can compress the data and may help with the loading of the editor when servers have limited resources.

Note: This message occurs also whenever a page cannot be loaded (whatever the reason). So while the above reasons are the most common, you will also see this same message in any other circumstance in which the page cannot be loaded.

How to add HTML Tags to my Section & Column

How to add HTML Tags to my Section & Column

HTML Tags are essential for your site』s SEO. Using them correctly will have a positive impact on your website traffic.

If you are editing the Header use the head

Go to your or settings.Under Layout, click the HTML Tag dropdown.Choose the tag that you want to use.

Here are the different types of HTML Tags you can pick from:

–  Defines a section in a document

– Defines a header for a document or section. This is useful when you are creating a header template using Elementor Pro.

– Defines a footer for a document or section

– Defines an article

– Defines a section in a document

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

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/.

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

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.

Caching Prevents Live Site From Showing Changes In Editor

Caching Prevents Live Site From Showing Changes In Editor

Changes You See In The Editor Do Not Show On The Live Site

If the changes you』ve made look right in the editor, but they aren』t being reflected on the live site, this is often due to a caching issue. When your styles are not applied online, please follow the steps listed below for dealing with cache issues:

Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button. Update your page. You may need to make a small change to enable the Update button. Clear all cache including server cache if it exists, any WordPress caching plugins you are using, and your own browser cache. You can also try checking in another browser, or in an incognito browser.

If this does not solve the problem, please see more possible solutions here:

My changes do not appear online. What can I do?

Fixed Positioning For Widgets

Fixed Positioning For Widgets

Set your widget to have a fixed position and place it in a custom position. The element will stay fixed in that position as the page is scrolled.

Under any Widget > Advanced > Custom Positioning

Position: FixedDrag and drop the widget anywhere on the page using the aqua arrows drag icon

Tip: Confused between Sticky and Fixed? Sticky is a scrolling effect which is relative to the section it』s placed in. Fixed position, however, is relative to the user viewport.