EA Feature List

How to Configure and Style EA Feature List

Designing a visually attractive feature list can help your potential buyers to make the purchase decision. With EA Feature List, you can highlight key aspects of your products easily and effectively. This element allows you to personalize your Feature points and give it an astonishing look within Elementor.

Table of Contents:

  1. How to Activate Feature List
  2. How to Configure the Content Settings
      2.1.  Content Settings
  3. How to Style Feature List
      3.1. List
      3.2. Icon
      3.3. Content
  4. Final Outcome

1. How to Activate Feature List

To use this Essential Addons element, find the EA Feature Listelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Feature List’ into the Drag widget hereor the ‘+’ section.


After you are successfully done with step 1, this is how the element is going to look like.

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will be able to configure the ‘Content Settings’.

2.1. Content Settings

This section allows you to add any number of ‘Feature Items’ as you wish. For each Feature Item, you can insert an Icon or an Image. Besides, you can add your own title and content for each of them as well. If you want to, you have the freedom to add a link to the featured items. To add more feature items, simply click on the ‘+ Add Item’ button.

Moreover, you are able to change the ‘HTML Tag’ for the title. You can use the dropdown to pick your preferred Icon Shape out of these 3: Circle, Square and Rhombus. Besides, you can change the Shape view of the Icons as well. By default, it is set to ‘Stacked’ view. But if you want, you can change it to ‘Framed’ view. It also allows you to modify the alignment of the icons. To display the connection between the icons, simply just enable the toggle ‘Show Connector’.


[Click to See Live Demo]

3.  How to Style Feature List

Switch to the ‘Style’ tab to style all the features of Feature List.

3.1. List

From the ‘List’ section, you can increase or decrease the space between each Feature Items. You can do this for all 3 devices: Desktop, Tab and Mobile. If the Connector option is enabled, you can change its type, style, color and width.

3.2. Icon

From the ‘Icon’ section, you can add your preferred ‘Primary’ and ‘Secondary’ color for the icons. Besides, you can control the spacing, size and padding for all three devices. If you want, you can even add border-radius as well.

3.3. Content

From the ‘Content’ section, you will have the freedom to change the color and typography for the ‘Title’ and ‘Description’ for the Feature List. Besides, you can control the spacing between each Title.

4. Final Outcome

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


With the help of EA Feature List, this is how you can highlight a key short description about your product with beautiful icons and make your viewers blown away.

Nested Advanced Tabs

How to Design a Nested Tabs Layout Using EA Advanced Tabs

EA Advanced Tabs allows you to orgranize your contents in an effective way. Thanks to it being straight to point, readers can instantly get the key information they are searching for. With the help of EA Advanced Tabs, you can present your contents in an amazing way. Nested Tabs layout is one of the techniques which you can use to make your site very attractive to your users.

Table of Contents:

  1. How to Activate Advanced Tabs
  2. How to Configure Default Content Type
  3. How to Configure Layout Settings
    3.1. Vertical Layout
    3.2. Horizontal Layout
  4. How to Style Advanced Tabs
  5. How to Save & Use a Template
    3.1. Save as Template
    3.2. Use Saved Template
  6. Final Outcome

1. How to Activate Advanced Tabs

Click to See the Full Documentation

The first step would be to drag the EA Advanced Tabs element into the ‘Drag Widget Here’ section. Since our goal is to get a ‘Nested Tabs‘ layout, do this action a few more times depending on the number of tabs you want. It doesn’t matter if you do that on different pages.

Nested Advanced Tabs

2. How to Configure Default Content Type

After you are done activating EA Advanced Tabs, you can then modify the Content Settings. By default, the layout is set to ‘Horizontal’ and the Content Type to ‘Content’.

You can change the Tab Title for all the Tab Items. For the first Tab Item, if you set the content type as ‘Content’, you can simply just change the ‘Icon’ and ‘Tab Content’.

Nested Advanced Tabs

Click to See Live Demo

3. How to Configure Layout Settings

After you are done with the basic configuration of your original Advanced Tabs, you will have to create few more Advanced Tabs now.

To begin, you can change the Layout from the ‘General Settings’ section.

Nested Advanced Tabs

3.1. Vertical Layout

As already mentioned in Step 2, you can modify your Icon & Content for each of your tabs here.

Nested Advanced Tabs

3.2. Horizontal Layout

By default, the layout is set to Horizontal. Simply just modify the content settings as per your preference for all the tab items.

Nested Advanced Tabs

4. How to Style Advanced Tabs

You can style all your Advanced Tabs elements as per your preference. For more information, you can check out this documentation on how to style EA Advanced Tabs.

Nested Advanced Tabs

5. How to Save & Use a Template

5.1. Save as Template

You will have to save the Advanced Tabs Section you have created as templates for each (apart from the original one). Simply click on the section with the ‘: : :’ icon and click on ‘Save as Template’.

Nested Advanced Tabs

You will then be asked to put a name for your template and simply click on ‘Save’. Your template will then be saved.

You will have to do this for each section you have created aside from the original one where we are going to use these for.

Nested Advanced Tabs

5.2. Use Saved Template

To use your saved templates, go back to the original Advanced Tabs you have created by using Step 1.

Then simply choose the ‘Content Type’ to ‘Saved Template’ for your choosing tab items. Use the dropdown to ‘Choose Template’ from the ones you have saved.

Nested Advanced Tabs

6. Final Outcome

By following these mentioned steps and a bit more modifying & styling, your final outcome would look like something like this.

Nested Advanced Tabs

This is how you can easily design a Nested Tabs Layout with EA Advanced Tabs Element.

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

Progress Bar

Progress Bar

How to Configure and Style EA Progress Bar

EA Progress Bar lets you easily visualize progression in specific fields with lots of layouts & styling options. With this element, you can showcase your skills or statistical information of your company in an eye-catchy manner.

Table of Contents:

  1. How to Activate Progress Bar
  2. How to Configure the Content Settings
    2.1. Layout
  3. How to Style Progress Bar
  4. Final Outcome

1. How to Activate Progress Bar

To activate this Essential Addons element, find  EA Progress Bar from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Progress Bar into the Drag widget hereor the ‘+’ section.

Progress Bar

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

Progress Bar

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Layout’’ section and choose your preferred layout to get started with EA Progress Bar.

2.1. Layout

You can use the drop-down menu to choose any of your preferred layouts. With Free Version, you will get to select from these 3 layouts: Line, Circle & Half-Circle. Premium version provides 4 more layouts such as Line Rainbow, Circle Fill, Half-Circle Fill & Box.

Besides, you can change the ‘Title’ & the HTML Tag for the Title itself as well. By default, it is set to ‘div’ HTML tag.

You can use the toggle to enable or disable ‘Display Counter’ option. Simply increment or decrement the ‘Counter Value’ to set a number for your progress bar. You can also play around with the ‘Animation Speed’ as well.

Progress Bar

Click to See Live Demo

3.  How to Style Progress Bar

Switch to the ‘Style’ tab to style all the elements of Progress Bar. ‘Style’ tab is divided into sections such as General, Background, Fill & Typography.

From the ‘General’ section, you can change the alignment of your content. You can play around with the height & width and change the color from the ‘Background’ section.

Moreover, you can change the height of the ‘Fill’ section as well. From the ‘Typography’ section, you are capable of modifying the text & color of the ‘Title’ & ‘Counter’.

Progress Bar

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Progress Bar in however you want.

Progress Bar

This is how you can easily showcase key data of your personal or company profile using EA Progress Bar.

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

Get Started Now

EA Woo Product Collections

How to Configure and Style Woo Product Collections

EA Woo Product Collections helps you to create an attractive layout based on your WooCommerce categories, tags or attributes which will redirect to the respective Products page.

Table of Contents:

1. How to Activate Woo Product Collections

2. How to Configure the Content Settings

    2.1. General Settings

    2.2. Content Type     

3. How to Style Woo Product Collections

    3.1. General Styles

    3.2. Typography

4. Final View


1. How to Activate Woo Product Collections


Before you begin, make sure that you have
WooCommerce Plugin activated.

To use this Essential Addons element, find the EA Woo Product Collectionselement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Woo Product Collections’ into the Drag widget hereor the ‘+’ section.

After you are successfully done with step 1, this is how the element is going to look like.

2. How to Configure the Content Settings

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

2.1. General Settings

From this section, you can choose your ‘Collection Type’ out of these 3 options: Category, Tags & Attributes. Depending on your selection, you can specify the type as well. For instance, if you select the ‘Female’ category, it will be displayed.

Besides, you can set your preferred ‘Background Image’ as well. You can also change the text for the ‘Subtitle’ from this section.

Click to See Live Demo

2.2. Content Type

For any of the content types, you simply just have to choose the type and select your preferred category, tag or attribute. Then it will then be displayed as Product Collection.


Same thing for ‘Attributes’ one as well. But for the Attributes one, make sure to check the ‘Enable Archives?’ option when creating a Product Attribute.

3.  How to Style Woo Product Collections

Switch to the ‘Style’ tab to style all the features of Woo Product Collections.

3.1. General Styles

From the ‘General’ section, you can change the ‘Overlay Background’ & ‘Overlay Background Hover’ color. Moreover, You can modify both the ‘Horizontal’ & ‘Vertical’ alignments as well.

You can use the drop-down menu to change the ‘Image Hover Effect’ from out of these 4: None, Zoom In, Zoom Out & Blur. By default, it is set to the ‘Zoom In’ effect.

3.2. Typography

You can change the color, hover color, size, font family and many more of the ‘Title’ and ‘Subtitle’ from this section.


4. Final View

By following the basic steps and a bit more modifying, you can style your Woo Product Collections as per your preference.


This is how you can easily highlight a specific type of your products using EA Woo Product Collections.

EA Advanced Menu

How to Configure and Style Advanced Menu

EA Advanced Menu lets you display the navigation menu of your site at any place of your site instantly. It makes navigation very much user-friendly & gives you the freedom to place it at any certain section of your website. As a result, this element can massively improve the user experience for your website.

Table of Contents:

  1. How to Create a Menu
  2. How to Activate Advanced Menu
  3. How to Configure the Content Settings
      3.1. General Settings
  4. How to Style Advanced Menu
     4.1. Main Menu Styling
     4.2. Others
  5. Final Outcome

    1. How to Create a Menu

First of all, make sure that you had already created a Menu to use it on EA Advanced Menu. To create a menu, simply go to your WordPress Dashboard. Then navigate to wp-admin -> Appearance -> Menus.

You can simply use its drag & drop facility to create a Menu & save it.


2. How to Activate Advanced Menu

To use this Essential Addons element, find the EA Advanced Menuelement from the Search option under the ELEMENTS tab.

Simply just Drag & Drop the EA Advanced Menu’ into the Drag widget hereor the ‘+’ section.


After you are successfully done with this step, this is how the element is going to look like.

3. How to Configure the Content Settings

 

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

3.1. General Settings

From this section, you can choose a ‘Menu’ out of which you have created on your website. Besides, you can use the drop-down menu to choose your preferred Layout as well. By default, it is set to ‘Vertical’ layout.


Click to See Live Demo

4.  How to Style Advanced Menu

Switch to the ‘Style’ tab to style all the features of Advanced Menu.

4.1. Main Menu Styling

From the ‘Main Menu’ section, you can change the color of the Background & Item Divider of your menu. Besides, you can change the ‘Hover’ background color as well. You also have the flexibility to modify the alignment & padding of the menu.

For ‘Vertical’ layout, you can also use the toggle to enable or disable ‘The Dropdown Indicator’- the arrow signs. Moreover, you can add styling to the Box Shadow & Border as well.


4.2. Others

From the ‘Typography’ section, you can modify the texts for both the Main Menu & Dropdown Menu texts. You can change the Font Color, Family, Size & many more.

You can also add styling & change the colors of Dropdown Menu & Indicator Items from the ‘Style’ tab.

5. Final Outcome

By following the basic steps and a bit more modifying, you can style your Advanced Menu as per your preference. Simply just click on the ‘Indicator’ and you will be able to view the dropdown menus as well.

This is how you can easily display amazing navigation Menu on any place of your website using EA Advanced Menu.

Get Started Now

EA Image Scroller

How to Configure and Style Image Scroller

You can now apply smooth scrolling effects for the background images using EA Image Scroller. With its auto or manual scrolling capability, you can easily make your website interactive for your visitors.

Table of Contents:

  1. How to Activate Image Scroller
  2. How to Configure the Content Settings
        2.1. Vertical
    2.2. 
    Horizontal
  3. Final Outcome

1. How to Activate Image Scroller

To use this Essential Addons element, find the EA Image Scrollerelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Image Scroller’ into the Drag widget hereor the ‘+’ section.


After you are successfully done with step 1, this is how the element is going to look like.

2. How to Configure the Content Settings

From the ‘Content’ tab, you can add your preferred ‘Background Image’. Besides,  you can use the dropdown menu to choose a Scrolling direction for the image out of these two: Vertical & Horizontal.

2.1. Vertical

From this section, you can change the height of the Image Container. Make sure that the ‘Container Height’ is less than the image height itself. With ‘Vertical’ direction selected, your image will be scrolled from up to down and vice versa.

You can use the toggle to turn on or off the ‘Auto Scroll’ option. If it’s enabled, then simply just hover your mouse over the ‘Background Image’ and you will see the Scrolling effect in real time.

Besides, you can change the ‘Scroll Duration’ as well. The lower the number is, the faster the ‘Scrolling’ effect will be.

If you disable the ‘Auto Scroll’ option, a navigation bar will appear. You can simply just drag it to Scroll through the whole image.

Click to See Live Demo

2.2. Horizontal

From this section, you can change the height of the Image Container. Make sure that the ‘Container Height’ is less than the image height itself. With ‘Horizontal’ direction selected, your image will be scrolled from right to left and vice versa.

You can use the toggle to turn on or off the ‘Auto Scroll’ option. If it’s enabled, then simply just hover your mouse over the ‘Background Image’ and you will see the Scrolling effect in real time.

Besides, you can change the ‘Scroll Duration’ as well. The lower the number is, the faster the ‘Scrolling’ effect will be.

If you disable the ‘Auto Scroll’ option, a navigation bar will appear. You can simply just drag it to Scroll through the whole image.

3. Final Outcome

By following the basic steps, you can configure your Image Scroller as per your preference. Simply just hover your mouse over the image, you will be able to view the nice scrolling effect.

This is how you can easily implement smooth ‘Scrolling’ effect on your background images using EA Image Scroller.

EA Protected Content

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.

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.

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

  1. 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.


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

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.

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

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.

Click to see Live Demo

  1.  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.

  1. 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.

Get Started Now

Offcanvas

How to Configure and Style Offcanvas

Essential Addons Offcanvas lets you display your content, sidebar or template as a beautiful side-menu when a button is triggered.

Table of Contents:

  1. How to Activate Offcanvas
  2. How to Configure the Content Settings
     2.1 Offcanvas Content
     2.2 Toggle Button
     2.3 Settings
  3. How to Style Offcanvas
  4. Final Outcome


1. How to Activate Offcanvas

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


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


After you click on the ‘Click Here’ button, this is how your Offcanvas is going to be displayed:

 

2. How to Configure the Content Settings

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

2.1 Offcanvas Content

By default, ‘Content Type’ is set as ‘Custom Content’. If you want, you can modify your custom content items by adding media, Shortcode or changing the title or text content.

You can also add as many items as you want and modify them.

From the drop-down menu ‘Content Type’,  choose any of these five types: Sidebar, Custom Content, Saved Section, Saved Widget & Saved Page Template.

 

2.2 Toggle Button
From the ‘Toggle Button‘ section, you can change the ‘Button Text‘ and add a Button Icon if you wish.

2.3 Settings

From the ‘Settings’ option, you can change the ‘Direction’. You can use the drop-down menu ‘Content Transition’ to change to any of these: Slide, Reveal, Push & Slide Along.

You can use the toggle to modify the Close Button settings as per your preference.

3. How to Style Offcanvas

Switch to the ‘Style’ tab to style all the elements of Offcanvas. You can easily add Styling to the ‘Offcanvas Bar’, ‘Content’, ‘Toggle Button’, ‘Close Button’ and ‘Overlay’ section as per your preference.

From this ‘Style’ tab, You can change the typographies, text color, background color, alignments, size, padding and many more.

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Offcanvas in however you want.

Get Started Now

MailChimp

MailChimp

How to Configure and Style EA MailChimp

Essential Addons MailChimp can help you to design your MailChimp form easily with lots of customization options. With the help of this element, you can easily get the attention of your visitors’ and make them subscribe to your newsletter.

Table of Contents:

  1. How to Activate MailChimp
    1.1. Setup MailChimp Account
    1.2. Generate & Set API Key
    1.3. Activate MailChimp
  2. How to Configure the Content Settings
    2.1. MailChimp Account Settings
    2.2. Other Settings
  3. How to Style MailChimp
    3.1. General Style
    3.2. Other Styles
  4. Final Outcome

1. How to Activate MailChimp

You must have a MailChimp account to activate EA MailChimp. If you already do, skip the 1.1 section.

1.1. Setup MailChimp Account

You can simply check out this documentation to see how to create an account in MailChimp.

1.2. Generate & Set API Key

Once you are successfully signed up, login to your MailChimp account. Then go to the Account page.

MailChimp

Once you are inside the Account page, click on the Extras Menu section and choose the “API Keys” option.

MailChimp

You will then be redirected to the API page of your account. Under “Your API Keys” section, click on “Create A Key” to generate your API Key.

MailChimp

Then you would be able to view your newly generated API Key under “Your API Keys” section.

MailChimp

After you have successfully generated your API Key, you will need to set the key inside the MailChimp settings.

To set your API Key, go to your WordPress dashboard and navigate to wp-admin -> Elementor -> Essential Addons -> Elements.

MailChimp

Then simply Insert your API key in the MailChimp Settings option and click on ‘Save Settings’.

MailChimp

1.3. Activate EA MailChimp

Find the EA MailChimp from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA MailChimp into the Drag widget hereor the ‘+’ section.

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

MailChimp

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘MailChimp Account Settings’ section.

2.1. MailChimp Account Settings

From the ‘MailChimp List’ drop-down menu, you can choose your own list.

MailChimp

2.2. Other Settings

You can easily change, enable or disable your Field Label from the Field Settings option.

MailChimp

You can modify both your Button and Loading Texts in the Button Settings.

MailChimp

Set your message to anything you want from the ‘Message Settings’ option.

MailChimp

Click to See Live Demo

3.  How to Style MailChimp

Switch to the ‘Style’ tab to style all the Elements of MailChimp. You can add Styling to the ‘Form Field’, ‘Message’, ‘Typography’, ‘Subscribe Button’ and many more from this section.

3.1. General Style

Use the drop-down Layout menu to select any of these two layouts: Stacked or Inline. By default, Stacked is set as the layout.
MailChimp

3.2. Other Styles

You can modify Form Fields, Color & Typography, Subscribe Button & Message styling easily as per your preference.

MailChimp

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your MailChimp in however you want.

MailChimp

MailChimp

This is how you can easily showcase & style your MailChimp form on your website using EA MailChimp.

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

[su_button url=”https://essential-addons.com/elementor/#pricing” target=”blank” background=”#37368E” size=”5″ center=”yes” radius=”round”]Get Started Now[/su_button]

 

Price Menu

Price Menu

How to Configure and Style EA Price Menu

With the help of EA Price Menu, you can now display the ‘Price Menu’ of your Food Items or any sorts of products in an attractive way. It gives you the flexibility to personalize the layout as per your preference and easily catch the eye of your visitors.

Table of Contents:

  1. How to Activate Price Menu
  2. How to Configure the Content Settings
    2.1. Price Menu
  3. How to Style Price Menu
    3.1. Menu Items
    3.2. Others
  4. Final Outcome

1. How to Activate Price Menu

To use this Essential Addons for Elementor element, find the EA Price Menuelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Price Menu’ into the Drag widget hereor the ‘+’ section.

Price Menu

After you are successfully done with step 1, this is how the element is going to look like.

Price Menu

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Price Menu‘ section to configure the menu.

2.1. Price Menu

First of all, you can add ‘Price Menu Items’ & modify its ‘Title’, ‘Description’ & ‘Price’. Besides, you can use the toggle to show or hide Image for the menu. If it’s enabled, then you are allowed to upload an image as well. You can even add a link to redirect your visitors to a certain page.

Moreover, there is a total of 5 layout styles available for you to choose from. You can easily play around with them and select your preferred ‘Menu Style’. You have the flexibility to use the toggle to turn on or off the ‘Title-Price Separator’ & ‘Title Separator’ options as well.

Click to see Live Demo

3.  How to Style Price Menu

Switch to the ‘Style’ tab to style all the features of Price Menu.

3.1. Menu Items

From the ‘Menu Items’ section, you can change the ‘Background Color’, ‘Items Spacing’, ‘Border Style’ and many more styling options.

Price Menu

3.2. Others

You can also add styling to ‘Title’, ‘Title Separator’, ‘Price’, ‘Description’ & ‘Image’ by changing the color, typography, margin bottom & many more as per your preference.

Price Menu

4. Final Outcome

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

Price Menu

This is how you can easily showcase an impressive looking ‘Price Menu’ of your products & give your consumers an idea about what your products are all about using EA Price Menu.

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

[su_button url=”https://essential-addons.com/elementor/#pricing” target=”blank” background=”#37368E” size=”5″ center=”yes” radius=”round”]Get Started Now[/su_button]