How to Download and Use the Elementor Beta (Developer Edition) Plugin

The Elementor Beta (Developer Edition) is a WordPress plugin that gives you first access to Elementor』s newest proposed features and improvements, and provides you a glimpse into the development process of Elementor.

Each Developer Edition release will contain experimental functionalities that developers will be able to use to get familiar with the next features before they are published. Beta versions of Elementor will not contain these experimental features, but beta versions will be much more stable due to the work accomplished in the Developer Edition. 

Feedback, including bug reports, feature suggestions and suggestions for improvement, will be used to evaluate and validate new features before they are released.

Important: Use with caution. Please do not use Developer Edition on production sites. Developer Edition releases, just like beta releases, may not be stable. Use it on staging environments only, and back up your entire website before updating.

Download Instructions

The plugin can either be downloaded and installed from the WordPress repository or from your WordPress dashboard.

Via WordPress.org:

Go to https://wordpress.org/plugins/ and in the search field, enter Elementor Developer Edition. Click the plugin』s title and then click the Download button.From your WordPress dashboard, click Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activate

Via WordPress Dashboard:

From the dashboard, click Plugins > Add New.In the Search field, enter Elementor Developer Edition and choose the plugin to install.After installation, click Activate.

Note: The plugin requires Elementor to properly activate, so both plugins must be running and active at the same time. The Developer Edition is an addon that brings you updates from our ongoing and updating development channel

Instructions for Use

Once the plugin is installed and activated, it functions just like the production version of Elementor. You』ll find the plugin』s available options in the Elementor sidebar menu. Here, you can:

Update to the latest version, if available.Activate auto-updates if you』d like.Opt in to participate in non-sensitive data usage sharing, which allows you to help us extend our ability to perfect our product and produce experimental and groundbreaking features.Re-install the latest stable version. Just go to Elementor [Dev] > Developer Edition and click the Re-install now button to automatically revert to the stable version of Elementor. You will still need to deactivate and delete the Developer Edition plugin.

Note: If you delete the Developer Edition plugin before you』ve clicked the Re-install now button, you won』t revert to a stable Elementor version automatically. In that case, you would need to install the stable version of Elementor manually using the rollback feature found in Elementor > Tools > Version Control. 

Once you』ve configured the options, you are ready to begin using Elementor. You will use the Development Edition in the same way you would use the stable version, however you』ll notice that there may be new features or changes in the user interface that are not present in the stable, production version. You will also notice a few visual aids to remind you that you are using the Development version, including the following:

There』s a 「Dev Badge」 in the WP sidebar as well as in the editor』s top barSource code: in the elementor body tag, added the 「elementor-dev」class In the WordPress dashboard admin top bar, next to your user avatar, you』ll find a link to 「Report an issue」 which will enable you to report a problem on github.

WordPress sidebar badge

Elementor Editor top bar badge

WordPress dashboard top bar badge

Important to repeat: Use with caution. Please do not use Developer Edition on production sites. Developer Edition releases, just like beta releases, may not be stable. Use it on staging environments only, and back up your entire website before updating.

Developer Edition FAQs:

Why am I not seeing the update notification?There are some instances where the notification takes a while to appear. Try to refresh it by going to Dashboard > Updates, and click on 「Check again」. In addition, you can try clearing your site』s cache and see if the update appears.Where can I report bugs or contribute to Elementor? On the top admin bar, you will see a button with the text 『Report an issue』. Once you click on the link you will be redirected to the issue template form.Where do updates come from?Elementor Developer Edition versions are downloaded from the WordPress.org SVN repository. These versions will only be available to your site if you use the Elementor Developer Edition plugin. Can I rollback to an earlier version?Yes! You can always take advantage of Elementor』s rollback option and revert to an earlier more stable version, or alternatively click 「Re-install Now」 on the Developer Edition page.Is it safe to use Developer Edition?The Developer edition is an unstable version and should be used for staging sites only. We advise you to backup your website before trying the version.Which features will roll out to the next version of Elementor?The features that roll out to stable versions will do so gradually. This means not all features presented in the Elementor Developer Edition will be incorporated into the upcoming version. We might even remove features from this version from time to time based on the experiment status.I』m already a beta tester, isn』t it the same?Beta versions are the designated version for release. Developer Edition versions may include extra features or experiments that are not available in either the Stable or Beta versions. These experiments may be rolled out gradually.

Using Elementor Pro with an LMS such as LearnDash or LifterLMS

Elementor can be used together with many 3rd party WordPress applications, including some Learning Management Systems (LMS). Two popular WordPress LMS plugins, LearnDash and LifterLMS, both offer integrations with Elementor to help you style your courses the Elementor way.

Note: Each LMS may offer different levels of customization, and you may only be able to edit certain pages or portions of the LMS layout.

LearnDash: Elementor and LearnDash worked together to create an integration that results in an optimized, more accessible learning experience for your students. LearnDash has specific Elementor widgets and templates to make it easy for you to customize and style your LMS layout. For more information:

See our blog post for a full guide to setting up LearnDash with Elementor See a guide that LearnDash created here Watch a video tutorial here.

The integration is contained within an additional free Compatibility Add-On Elementor Integration plugin that you』ll have available to you within your active LearnDash account.

LifterLMS: Special widgets designed for Elementor enables LifterLMS users to have more control over the style and layout of their course materials. These widgets are contained within an additional premium plugin called Lifter Elements. If you choose to purchase the Creator edition, you』ll also receive additional functionality such as conditional logic, as well as all available specially designed templates. If you prefer, you can purchase templates individually if you only purchase the Standard edition. Watch an intro video to see how LifterLMS works with Elementor.

Site Logo Widget (Pro)

The Site Logo widget is a dynamic widget that displays the Site Logo. Although the logo can only be replaced or deleted in either the Elementor Site Settings or in the WordPress Customizer, the Site Logo widget gives you the ability to change some design aspects of the logo.

Content

Choose Image: The image is dynamically retrieved for you from the Elementor Site Settings or the WordPress Customizer. You can edit or change your logo in either of those places.Image Size: Set the size of the image, from thumbnail to full, or enter a custom sizeAlignment: Align the site logo to the left, right, or centerCaption: Add a caption to the bottom of the image. Select from None, Attachment Caption, or Custom CaptionLink to: Set the logo』s link, selecting from None, Media File or Custom Link. If Media File is chosen, set the Lightbox to Default, Yes, or No. If Custom Link is chosen, the URL will be automatically, dynamically retrieved for you.

Style

Width: Set the width of the image in either percentage (%), pixels (px), or viewport width (vw).Max Width: Set the maximum width of the image as a percentage.Opacity: Set the opacity levelCSS Filters: Set CSS Filters: Blur, Brightness, Contrast and SaturationBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessTransition Duration (only on Hover): Set the hover animation durationHover Animation (only on Hover): Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.

Advanced

Set the Advanced options that are applicable to this widget

Note: The display of the logo depends on your theme. Elementor follows the coding standards of WordPress set by its official Codex. If your theme does not use the default function of WordPress which calls the custom-logo, it won』t be displayed: https://codex.wordpress.org/Theme_Logo. If it isn』t displayed, instead of using the site logo widget, you can simply use the Image widget to obtain the same result.

reCAPTCHA & Elementor Integration

reCAPTCHA is one of the most popular ways to prevent spam and abuse by preventing bots from being able to submit forms.

To add a reCAPTCHA, you first need to get the reCAPTCHA keys from the Google website. You can choose from either reCAPTCHA v3 or reCAPTCHA v2. We recommend v3 as it is the new more secure, less intrusive method to use.

reCAPTCHA v3:

Go to the Google reCAPTCHA site and choose v3.Add a Label to identify this instance. Add a domain, e.g. example.comChoose the owner email address or add a new oneAccept the Terms of Service and Submit.On the next page, copy both the Site Key and the Secret Key.Enter these keys in the Elementor > Settings > Integrations > reCAPTCHA options and click Save Changes. (You can change the Score Threshold if desired. If bots manage to get around the reCAPTCHA, increase the score).Add a New Page and Edit With ElementorDrag in a Form WidgetEdit your form』s Form Fields and click on Add ItemUnder Type choose reCAPTCHA3Choose whether to place the badge to the right (bottom of the page), left (bottom of the page), or inline.Click Save

You will now see the badge on the page.

reCAPTCHA v2:

Go to the Google reCAPTCHA site.Under Label fill in your website』s name, choose reCAPTCHA V2 「I』m not a robot」, enter the domains you wish to secure, and accept the Terms & Conditions.You will receive two API KeysReturn to the WordPress Dashboard > Elementor > Settings > IntegrationsUnder reCAPTCHA, enter the two API Keys and click Save ChangesAdd a New Page and Edit With ElementorDrag in a Form WidgetEdit your form』s Form Fields and click on Under Type choose reCAPTCHAYou now see the 『I am not a robot『 text in the formClick Save

How to Use Z-Index in Elementor

The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order (i.e. an element with a Z-index of 10 will be on top of (in front of) an element with a Z-index of 5.

You can set the stack number on any Widget under the Advanced Tab > Z-Index

How To Hide Page Titles In WordPress

If you』re using Elementor, you can hide titles with one click, no need to use any code or any other plugin.

Follow these steps:

1. Go to your page and click 『 Edit with Elementor. Here we』ve prepared a page that has a title we are going to hide.

2. Click the gear icon for  Document settings at the bottom left of the widget panel.

3. Switch on 『 Hide Title『

4. Done! No coding and you successfully hid the title.

What to Do If Title Cannot Be Hidden

Note that if your theme is using a different class for the title, this option won』t automatically work and you will have to manually set it.

The default class for most themes is:

Title

If your theme is using a different class, you』ll need to change the Page Title Selector.

Simply 「Edit with Elementor」 any page or postClick the hamburger menu icon in the upper left corner of the Elementor Widget Panel, and click on Site Settings. Under Settings, click Layout.

Here you will see the Page Title Selector field with the description:

Elementor lets you hide the page title. This works for themes that have 「h1.entry-title」 selector. If your theme』s selector is different, please enter it above.

Now, add your theme』s selector for the title, and the hide title functionality should now work.

How Do I Know What Class Name My Theme Is Using For the H1 Title?

Visit your page in a Chrome browser, and thenright-click on the title to be hidden, chooseInspect, and make a note of the H1 class name, which is shown in quotes, as demonstrated below.

If the class name is 「abc-page-title」 for example, then you would type h1.abc-page-title into the Page Title Selector in the Elementor > Settings > Style area mentioned above.

Will Elementor Work if I Change the Domain of My Website?

Yes. If you replaced the domain of your website, you can go to:

Elementor > Tools > Replace URL in your WordPress dashboard to replace all references to your old domain with the new domain, allowing you to continue working with Elementor from your new domain.

Adding Templates

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

From the editing screen, Click the  icon as shown in the screenshot above. When the library of templates pops up, click the magnifying glass icon  to preview a template.Click INSERT to select the template of your choice.You can even give your favorite templates a heart and save them to My Favorites.Have a template you downloaded elsewhere that you want to use? Just click the arrow in the top right corner to upload its .json or .zip file.

Next step – Preview & Publish your page

How to Change a Background Image

How To Change A Section』s Background Image

Click on the Section Settings handle to enter the Section SettingsGo to Style > Background > Background Type > ClassicUnder Image click the + sign and choose your image.

How To Change An Entire Page』s Background Image

Click the cog icon in the lower left of the editor Panel.Click the Style tab.Click the pencil icon next to Background Type.Under Image, click the + sign and choose your image.

How To Add A Back To Top Button Using Elementor

Click the section handle of the first section on your page to enter its settingsOn the section』s Advanced tab, enter a name into the CSS ID field, such as 『top』Drag the Button widget onto your page, wherever you』d like to place itType Top in the button』s text fieldType #top in the Link field, or whichever CSS ID you chose in step number 2. (Make sure to place a # sign before the CSS ID with no spaces between, in this step. However, do not place a # sign in step 2).

Clicking your Top button will now bring the user to the top section.

Tip: You can stick the button to the bottom of the page with Elementor Pro』s Sticky Scrolling Effect