EA Reading Progress Bar

Reading Progress Bar

How to Configure & Style EA Reading Progress Bar

Reading Progress Bar is a fantastic way to encourage your visitors to scroll through the entire page and continue reading your content. With the Introduction of EA Reading Progress Bar, you can now easily add a progress bar indicator on the top or bottom of yours posts/pages. Most impressively, you will have the opportunity to control its settings all from one place and display it on your entire website.

Table of Contents:

  1. How to Activate EA Reading Progress Bar
  2. How to Configure EA Reading Progress Bar Settings
  3. How to Style EA Reading Progress Bar
  4. How to Configure the Global Settings
    4.1. How to Override the Global Settings for a Particular Page/Post
  5. Final Outcome

1. How to Activate EA Reading Progress Bar

Before you begin, make sure that you have EA Reading Progress Bar Activated. Go to your WordPress Dashboard and navigate to wp-admin -> Essential Addons -> Extensions. Simply just activate it and click on ‘Save Settings’.

Reading Progress Bar

Check out Demo

2. How to Configure EA Reading Progress Bar Settings

First of all, let’s ‘Edit any of your pages with Elementor’ to configure EA Reading Progress Bar. Then, go to the ‘Page Settings’ which you will find in the bottom of ‘Elementor Panel’. Then, activate ‘EA Reading Progress Bar’ and you will be all set to go.

Reading Progress Bar

You will see the ‘Progress Bar Indicator’ in the live preview. You can scroll through the entire page to check how it works. This is how the default layout of ‘EA Reading Progress Bar’ will look like:

Reading Progress Bar

3. How to Style EA Reading Progress Bar

You can use the dropdown menu to change the position of the ‘Reading Progress Bar’: Top or Bottom. You can even change its height or animation speed. Besides, you can go ahead and change the ‘Background’ and ‘Fill’ color of the Reading Progress Bar.

Reading Progress Bar

4. How to Configure the Global Settings

If you want to display Reading Progress Bar in all your pages or posts, you can activate the ‘Reading Progress Bar Globally’ option from the settings. By default, it is set to ‘All Posts & Pages’. Any changes you make under Global Settings, it will take full effect on all the posts or pages as well.

Reading Progress Bar

4.1. How to Override the Global Settings for a Particular Page or Post

Even if you have Global Settings activated, you can override the Global Settings for that particular page by enabling ‘Reading Progress Bar’ for its ‘Page Settings’. As a result, it will have its own configuration and styles which you can easily go ahead and change.

To change the Global Settings itself, you can simply click on the ‘Clicking here’ option which will redirect you to its page settings.

Reading Progress Bar

5. Final Outcome

By following these basic steps and a bit more modifying, you can easily control where you want the EA Reading Progress Bar to appear and style it as per your preference.

Reading Progress Bar

By using EA Reading Progress Bar, this is how you can easily keep your readers interested in reading your articles and encourage them to continue scrolling through it.

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

Get Started Now

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

License

Essential Addons License

How to Retrieve Essential Addons License Key

Go to your WPDeveloper Account. From the ‘My Account’ tab, you can see Essential Addons plugin which you have purchased.

Essential Addons License

To manage the License key for Essential Addons, click on the ‘Manage Sites’ button.

From the ‘Manage License’ page, you can specify a website for which you have purchased Essential Addons for. All you need to do is paste the URL of the website.

Essential Addons License

If you want to remove the Essential Addons license from a certain site, simply just hit on the ‘Deactivate Site’ button.

 

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;
}
}

What Does EA Advanced Google Map Do?

What Does EA Advanced Google Map Do?

EA Advanced Google Map gives you the opportunity to display Google Maps on your website while pinpointing your business location. It gives you the freedom to choose your preferred Map layout out of 8 available options, configure it and style it as per your preference. For more information, you can check out this documentation.

Why Am I not Seeing Form Styler Elements?

Why Am I not Seeing Form Styler Elements?

To use our Form Styler elements, make sure to install & activate the respective forms on your website. For instance, if you want to use EA Contact Form 7, make sure that you have installed the Contact Form 7 plugin itself. For more information, check our documentation on the Form Styler Elements.