EA Content Protection

Content Protection

How to Configure & Style EA Content Protection

EA Content Protection gives you the opportunity to restrict any Elementor content from certain people. It allows you to put privacy on your premium content based on User Roles or password. You can lock the important part of your page with Password protection as well.

Unlike EA Protected Content, this new Essential Addons extension called EA Content Protection gives you the freedom to put a restriction on any Elementor content you want.

Table of Contents:

  1. How to Activate EA Content Protection
  2. How to Configure the EA Content Protection Settings
    2.1. User Role Based Protection
    2.2. Password Based Protection
    2.3. How to Set Up a Message
  1. How to Style EA Content Protection
  2. Final Outcome

1. How to Activate EA Content Protection

Before you begin, make sure that you have EA Content Protection Activated. To do so, go to your WordPress Dashboard and navigate to wp-admin -> Essential Addons -> Extensions. Simply just activate it and click on ‘Save Settings’.

Content Protection

2. How to Configure the EA Content Protection Settings

EA Content Protection allows you to restrict any Elementor widget you want for certain users. First of all, you need to edit the widget which you want to lock down. After doing so, you will find the ‘EA Content Protection’ settings by switching to the ‘Advanced’ tab of that particular element. Use the toggle to turn it on.

Content Protection

2.1. User Role Based Protection

EA Protected Content offers two types Protection: User Role & Password Protected. You can use the drop-down menu to choose your preferred ‘Protection Type’. For ‘User Role’ based Protection, you can define the user roles for whom you want the content to be displayed.

Content Protection

2.2. Password Based Protection

For ‘Password Protected’ type, you will have to set a password which will be required to insert to view the content. Besides, you can even change the ‘Input Placeholder’ & ‘Submit Button Text’ texts as well.

Content Protection

2.3. How to Set Up a Message

You can set the ‘Message Type’ to any of these three: None, Message and Saved Templates. You can go ahead and modify the content of the Message your  as per your preference.

Content Protection

Click to see Live Demo

3. How to Style EA Content Protection

EA Content Protection gives you the freedom to style all its features as per your wish. The ‘Styling’ options can vary depending on the ‘Protected Type’ you have chosen. For ‘User Role’ based protection, you will have the flexibility to customize the text color, alignment & typography of your Message.

Content Protection

On the other hand, for ‘Password Protected’ type, you can style the ‘Password Field’ and ‘Submit Button’ as you want. You will also have the complete control over how you want these to be displayed when in ‘Normal’ and ‘Hover’ view. For instance, you can change the background & text color and its typography. You can even go ahead and play around with the Input width as well.

Content Protection

4. Final Outcome

By following the basic steps and a bit more modifying, you can style EA Content Protection in however you want.

EA Content Protection 1
By using EA Content Protection, this is how you can easily restrict any Elementor content of yours without needing any prior coding knowledge whatsoever.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now

How To Translate Essential Addons for Elementor Pages With WPML

WPML Elementor

How To Translate Essential Addons for Elementor Pages With WPML

Essential Addons offers compatibility with the ever-so-popular WPML Multilingual Translation Plugin. It allows you to translate your amazing websites built with Essential Addons for Elementor to any language you want.

Follow these steps below to translate your Essential Addons Contents with WPML:

Get Your Page or Post Ready

First of all, let’s make sure that you have your page/post built in with Essential Addons for Elementor.

WPML Elementor
Now, go to your WordPress Dashboard and go to the Posts/Pages depending on which you want to translate. Then, you will find a big ‘Plus’ sign which will allow you to ‘Add Translation’ to your defined Language. Simply just go ahead and Click on this ‘Plus’ sign.

WPML ElementorYou will then be redirected to a new Page/Post creation page. Simply just add a Title and Click on ‘Edit with Elementor’. Then, save it as a draft or publish it.

WPML Elementor

Translations with WPML

After you have finished configuring the previous steps, simply go to your WordPress Dashboard and navigate to wp-admin -> WPML -> Translations. You will be able to see all the available ‘Translation Queues’. Just go ahead and hit the ‘Edit’ button for the page/post which you want to Translate.

WPML ElementorYou will then be redirected to the ‘Page Translation’ where you will be allowed to translate the Essential Addons contents as you want. This is what it would initially look like:

WPML ElementorYou can simply go ahead and translate the Strings in your chosen Language. Make sure to check ‘Translation is Complete’ box once you are done translating. Don’t forget to click on the ‘Save’ button to make these changes effective.

WPML Elementor

After you have finished translating in your chosen language, this is how your page/post is going to appear for that particular language:

WPML Elementor
This is how you can easily build Multilingual websites with Essential Addons for Elementor and WPML. For more information, you can also check out the documentation on how to use Translate Elementor with WPML .

Getting Stuck? Feel free to contact our Dedicated Support Team for further assistance.

How to Get Horizontal Layout on Smaller Screens for EA Advanced Tabs?

How to Get Horizontal Layout on Smaller Screens for EA Advanced Tabs?

By default, the layout shows ‘Vertically’ for Advanced Tabs when it’s viewed on mobile or tab screens. However, you can add this following custom CSS to change the Advanced Tabs layout to Horizontal for smaller screens:

 @media only screen and (max-width: 992px) {
.eael-advance-tabs .eael-tabs-nav > ul {
flex-wrap: nowrap;
overflow: scroll;
}
.eael-advance-tabs .eael-tabs-nav > ul li {
flex: 1 1 auto;
}
}

How Can I Get Elementor Section ID?

How Can I Get Elementor Section ID?

To find the ID of a particular Section, click on the ‘Edit Section’ option. 

Elementor Section

Then head over to the ‘Advanced’ tab of that particular Section. You will find the Section ID inside the ‘CSS ID’ field.

Elementor Section

How can I import/export Elementor Templates?

How can I import/export my Elementor Templates?

Go to the Elementor page and click on the ‘Add Template’ option from the ‘Drag widget here’ section. Switch to the ‘My Templates’ tab to find all the templates you have saved so far. You can ‘Insert’ or ‘Export’ your Elementor templates from there.

Elementor Template

For further information, check out this blog to learn how you can Import or Export Elementor Templates.

How to Save a Elementor Template?

How to Save a Elementor Template?

Choose the section you want to save as a template and then, right-click on the ‘: : :’ to edit that Section. Then, pick the ‘Save as Template’ option. Enter a Template name and save it.

Elementor Template

How to Roll Back to a Previous Version of Essential Addons for Elementor?

How to Roll Back to a Previous Version of Essential Addons for Elementor?

To switch back to a previous version of Essential Addons, make sure to delete the current version of the Plugin from your website. Afterward, go to the bottom of this page and download your preferred version from the ‘Previous Versions’ section. Then, upload it on your website and install & activate it.

Please note that, it’s not recommended to switch back to an older version. Because some of the works you have done with the new version might get lost if you take this action. If you run into any trouble, feel free to contact our dedicated and super friendly Support Team to help you out.

How to Apply Custom CSS to My Elements?

Custom CSS

How to Apply Custom CSS to My Elements?

If you are using Elementor Pro on your website, simply just edit the widget you want to customize and then switch to the ‘Advanced’ tab. Then, you can simply write or paste the CSS code. You will see the changes made in real time.

Custom CSS

Besides, you can also add custom css from your Theme’s CSS Editor option. Navigate to your WordPress Dashboard -> Appearance -> Customize. Then search for ‘Additional CSS’ option and you will be able to add your own CSS code there.

Custom CSS

You can also use third party CSS plugins to easily add custom design to your website.