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

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.

How to Check for Plugin Conflicts on My Website?

How to Check for Plugin Conflicts on My Website?

You can check for Plugin conflicts by deactivating all the third-party plugins one by one except for Elementor and Essential Addons. Simply go to your WordPress Dashboard and navigate to wp-admin -> Plugins and then, deactivate other Plugins.

How to Increase the Memory Limit of Your WordPress Website?

How to Increase the Memory Limit of Your WordPress Website?

You can check your memory limit by navigating to wp-admin -> Elementor -> System Info.

edit with elementor not working

To increase your memory limit, you will have to modify the wp-config.php file of yours. Add this following line of code just above this line ” /* That’s all, stop editing! Happy blogging. */” :

 define('WP_MEMORY_LIMIT', '512M'); 

You would find the wp-config.php file under your WordPress Directory. For further assistance, feel free to contact our dedicated and super friendly Support Team to help you out.

How to Download the System Info?

System Info

How to Download the System Info?

Go to your WordPress Dashboard and then navigate to wp-admin -> Elementor -> System Info. Afterward, go to the bottom of the page and click on the ‘Download System Info’. Your System Information will then be downloaded.

System Info

How to Check PHP Version?

How to Check PHP Version?

You can check your PHP Version by navigating to WordPress Dashboard -> Elementor -> System Info. Under ‘Server Environment’, you will find the ‘PHP Version’.

PHP

EA Advanced Tooltip

EA Advanced Tooltip 2

How to Configure EA Advanced Tooltip

EA Advanced Tooltip gives you the opportunity to highlight a meaningful message & direct attention toward a specific item. This extension will allow you to present texts for specification, quick guidance or key information about your products/contents in an impressive manner. As a result, people will easily be aware of the core features of your services and show their interest. Tooltip will only appear when you click or hover your mouse over the respective elements. Thus, your audience will easily be able to interact with the contents on your website.

EA Advanced Tooltip is quite similar to EA Tooltip element of Essential Addons. However, the major difference is that, with EA Advanced Tooltip, you can place it in any Elementor widget you are using. Thus, making this a very unique feature.

Table of Contents:

  1. How to Activate EA Advanced Tooltip Extension
  2. How to Configure the Advanced Tooltip Settings       
  3. How to Style the Advanced Tooltip
  4. Final Outcome

    1. How to Activate Advanced Tooltip

Before you begin, you need to drag & drop any Elementor or Essential Addons widget of your choosing. Then, simply click on the ‘Edit’ option for the widget. Just switch to the ‘Advanced’ tab and you will find the ‘EA Advanced Tooltip’ extension. Go ahead and turn on the toggle to enable ‘EA Advanced Tooltip’. Afterward, you will be able to use the ‘Advanced Tooltip’ extension on the respective element.

EA Advanced Tooltip 3

After EA Advanced Tooltip is successfully activated for the respective widget, this is how the basic configuration is going to look like:

EA Advanced Tooltip 4

2. How to Configure the Advanced Tooltip Settings

From ‘Settings’ section, you will be able to configure the EA Advanced Tooltip. First of all, you can add your own content which will be displayed in the Tooltip. Besides, you have the freedom to change the Position of the Tooltip as well. Simply just use the dropdown menu to choose the position which you prefer out of these 4: Top, Bottom, Left and Right.

Moreover, you can pick your preferred Animation in which the Tooltip will appear. You are able to pick the transition effect from out of these 5 options available: Shift Away, Shift Toward, Scale, Fade and Perspective. Besides, you can choose to either show or hide the ‘Arrow’ for the Tooltip as well. If it’s enabled, you can pick an Arrow type: Sharp or Round.

On top of that, you have the flexibility to choose a ‘Trigger’ type on when the Tooltip will appear. You can either pick Hover or Click as the trigger option. You are able to change the ‘Duration’ & ‘Delay Out’ time for the Tooltip appearance as well. Also, change its size as per your preference.

EA Advanced Tooltip 5

[Click to See Live Demo]

3. How to Style the Advanced Tooltip

‘Styles’ section allows you to style all the features of EA Advanced Tooltip. You are able to change its Typography, Text & Background Color. Besides, you can control the distance between the Tooltip and the element where you are using it. You can also use the slider to change the max-width for the Tooltip. On the other hand, you have the freedom to add Border Radius & Box Shadow to it as well.

EA Advanced Tooltip 6

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Advanced Tooltip as per your preference.

EA Advanced Tooltip 7

With the help of EA Advanced Tooltip, this is how you can spotlight quick information about your products/services in an elegant manner and gain the attention of your users.

[Contact Our Support]

 

EA Protected Content

EA Protected Content 9

How to Configure and Style Protected Content

EA Protected Content lets you easily restrict your data based on user permissions or a password with plenty of styling options.

Table of Contents:

  1. How to Activate Protected Content
  2. How to Configure the Content Settings
    2.1. Protected Content
    2.2. Protection Type
    2.3. Message
  3. How to Style Protected Content
  4. Final Outcome

1. How to Activate Protected Content

Find the ‘EA Protected Content’ from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘EA Protected Content’ into the ‘Drag widget here’ or the ‘+ section.

EA Protected Content 10

After you are done with Step 1, this is the default layout you are going to see.

EA Protected Content 11

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Protected Content’ section.

2.1. Protected Content

By default, ‘Content Type’ is set as ‘Content’. You can modify your ‘Protected Content’ by adding media, Shortcode or changing the text content.

EA Protected Content 12
You can change your ‘Content Type’ to ‘Saved Template’ as well. You can use the drop-down to choose a template of yours preference.

EA Protected Content 13

2.2. Protection Type

You can use the drop-downn menu to select any of these two protection types: User Role & Password Protect. With ‘User Role’ protection type, you can select the ‘Roles’ of the users who will be able to view the content.

EA Protected Content 14

With ‘Password Protected’ type, you will have to set a password which will be required to insert to view the content.

EA Protected Content 15

2.3. Message

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

EA Protected Content 16

Click to see Live Demo

3. How to Style Protected Content

Switch to the ‘Style’ tab to style all the elements of Protected Content. You can easily add Styling to the ‘Content’, ‘Message’, ‘Password Field’ and ‘Button’ section as per your preference.

EA Protected Content 17

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Protected Content in however you want. This is how you can easily get started with EA Protected Content element.

EA Protected Content 18

Get Started Now

Image Accordion

Image Accordion 20

How to Configure and Style EA Image Accordion

EA Image Accordion lets you highlight your images with amazing hover and click effects with plenty of styling options.

Table of Contents:

  1. How to Activate Image Accordion
  2. How to Configure the Content Settings
    2.1. Image Accordion Settings
  3. How to Style Image Accordion
    3.1. Image Accordion Style
    3.2. Color & Typography
  4. Final Outcome

 

1. How to Activate Image Accordion

Find the ‘EA Image Accordion’ element from the Search option under the ‘ELEMENTS’ tab.

Simply just Drag & Drop the ‘EA Image Accordion’ into the ‘Drag widget here’ or the ‘+’ section.

Image Accordion 21

After you are done with step 1, this is the basic layout you are going to view.

Image Accordion 22

2. How to Configure Content Settings

Under the ‘Content’ tab, you will find the Image Accordion Settings.

2.1.  Image Accordion Settings

From the ‘Flipbox Settings’ section, you can use the drop-down menu to choose Accordion Type: On Hover or On Click.

You can modify the Accordion Item by changing the Background Image, Title and Content.

Image Accordion 23

After changing all the Accordion Items, this is how your Image Accordion can look like:

Image Accordion 24

Click to See Live Demo

3. How to Style Image Accordion

Switch to the ‘Style’ tab to style all the elements of Image Accordion. You can add Styling to ‘Image Accordion’ and ‘Color & Typography’.

3.1. Image Accordion Style

From this section, you change the Image Height & Background Color. You can also easily add styling to border, overlay, box shadow and many more.

Image Accordion 25

3.2. Color & Typography

You can easily modify your ‘Title’ and ‘Content’ color & typography from this section.  

Image Accordion 26

  1. Final Outcome

By following these mentioned steps and a bit more modifying & styling, you can easily design your Image Accordion as per your preference.

Image Accordion 27

This is how you can easily get started with EA Image Accordion element.