Author 诗语

Introducing v2.7: Enhanced Backgrounds & Dividers

Enhanced Backgrounds:

Backgrounds just got cooler! In Elementor v2.7 we』ve added several improvements and capabilities to backgrounds:

1. Background Slideshow

Now you can use a sideshow as the background for sections, columns, and inner-sections. This can help you build more complex structures and layouts, while still preserving a transition effect. 

From the section』s or column』s Style > Background Type tab, select Slideshow from the Background Type options. Use the presentation settings for the image gallery to create various slideshow effects.

2. Vimeo Video as a Background

As part of enhancing the background capabilities, we』ve added Vimeo as a source for your background videos. So now, both team YouTube and team Vimeo can enjoy sweet backgrounds.

From the section』s or column』s Style tab, enter a Vimeo video URL into the Video URL field of the section』s or column』s Style > Background Type > Background Video field.

3. Allow Background Video to Play on Mobile

Until recently, most mobile phones didn』t play background videos. Recent browsers policy changes have added this functionality to some browsers. Starting with v2.7, Elementor will not play background videos by default. However, you will be able to change this default by turning on the 「Play On Mobile」 switch. See our dev blog post.

From any section』s background video element, switch Play On Mobile to On. This should allow the video to now play on mobile.

Improved Dividers

Dividers are one of the most basic and useful design elements in web design. So, of course, we went ahead and made them even better, with newly added elements and shapes.

Divider widget Improvements

Our Divider widget used to be quite basic and traditional. For v2.7, we added some fancy features to it. You can now choose from a list of new shiny SVG dividers and control their style and behavior.

In addition, we added the option to include some text or an icon before, in the middle or after your divider.

Add a Divider widget to your page, select a Divider Style, add an icon from the Divider widget』s Content tab, and style both the divider and the icon from the widget』s Style tab.

Under the Hood Improvements:

In the following releases, we will gradually release major infrastructure improvements, which will allow Elementor to be more extendable, reliable and stable. Those improvements include unification of multiple libraries, update JS handlers to ES6, new Editor JS API mechanism to improve current flow and to support future exciting modules and MEGA features.

More Improvements

Please don』t miss these points:

New: Editor JS API ($e) to improve capabilities and stabilityTweak: Converted all widgets JS handlers to ES6 classes Tweak: Added option to select the version you rollback to in Version Control toolTweak: Use swiper.js instead of slick.js in Image Carousel widget Tweak: Implemented virtual list render in Icons Library to improve performance and stabilityTweak: Added support of wp_body_open in Canvas templateTweak: Editor Panel UI tweaksTweak: Moved structure control into section panel in Section elementTweak: Added option to allow background video to play on mobile devices if device support itTweak: Added more post statuses to show in the Finder Tweak: Added Space-around, Space-between and Space-evenly to Vertical Align options in Section elementTweak: Updated Eicons library to v5.4.0Deprecated: Removed old deprecated aliases 

Fixes:

Fix: Background video plays on mobile devices in some casesFix: Icon List alignment issueFix: Two clicks needed to start Vimeo videos with image overlayFix: Init navigator only once when changing page template

Elementor is compatible with most themes. To be compatible, the theme has to be well constructed according to WordPress guidelines. 

If you are a theme developer, and you』ve included Elementor built-in with your theme, we can grant you special assistance in getting compatibility. 

This usually takes a few days for us to make the proper adjustments, but it is definitely worth your while to include it in your theme.

Note: Some themes come with a preloader that can affect editing with Elementor, causing the screen to look blank, as shown below. To use Elementor with these themes, deactivate the preloader via the theme』s customizer.

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:

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.

Elementor offers a set of widgets called 『Theme Elements『 that can be used to create your single post. These include the Post Title widget, Post Info (Meta Data) widget, Post Excerpt widget, Post Content widget, Featured Image widget, Search Form widget, Author Box widget, Post Comments widget, Post Navigation widget, and Breadcrumbs widget (if Yoast SEO plugin is installed and active).

Post Title

The title of the current post.

Post Info (Meta)

The current post』s meta data such as Author, Date, Time, and Number of Comments.

Post Excerpt

The short summary of the current post.

Post Content

The heart of the current post is the content, of course!

Featured Image

The featured image of the current post.

Author Box

A box which features the author』s bio.

Search Form

A search form to help users find content on your site.

Post Comments

A user comments section.

Post Navigation

Navigation to allow users to easily navigate between posts.

Breadcrumbs

Breadcrumbs which enable users to navigate your site easily, while also providing search engines clues as to the structure of your site. (Requires Yoast SEO plugin).

Read the tutorial showing how to Create a Single Post Template

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.

A Full-Width Page means the content spans from right to left and takes the full 100% of the screen』s width.

With Elementor there numerous ways to do this, here are three:

Use a Full-Width page templateUse the Canvas page templateStretch the sections. See the video below

Subscribe to Our Youtube Channel, or click to learn more about full-width and full-screen headers

If the redirect of the form widget does not take the users of your website to your thank-you page, that means that you have probably added some space within the URL or that the URL is incomplete, is not an absolute URL (does not contain the http:// or https:// portion of the URL), or it is simply entered incorrectly.

To fix this, make sure that you copy and paste the URL properly.

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.

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.