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

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]

 

One Page Navigation

One Page Navigation

How to Configure and Style EA One Page Navigation

EA One Page Navigation gives you the flexibility to easily navigate through your one page website. With the help of this element, you can create a beautiful one page site and improve the overall user experience.

Table of Contents:

  1. How to Activate One Page Navigation
  2. How to Configure the Content Settings
    2.1. Navigation Dots
    2.2. Settings
  3. How to add Section ID for each Section
  4. How to Style One Page Navigation
    4.1. Navigation Box
    4.2. Navigation Style
    4.3. Tooltip
  5. Final Outcome

1. How to Activate One Page Navigation

To use this Essential Addons element, find the ‘EA One Page Navigation’ from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘One Page Navigation’ into the ‘Drag widget here’ section.

One Page Navigation
Initially, this is how One Page Navigation would look like:

One Page Navigation

2. How to Configure the Content Settings

Under the ‘Content’ tab you will find the ‘Navigation Dots’ & ‘Settings’ section.

2.1. Navigation Dots

In this section, you can add a Section Title, Section ID & use the dropdown menu to choose an for the navigation dot.

One Page Navigation

2.2. Settings

You can use the toggle bars to Tooltip, Tooltip Arrow, Scroll Wheel and few other options. You can also change the Scrolling speed of your page navigation from this section.

One Page Navigation

3. How to add Section ID for each Section

To add Section ID, click on the Section you want to modify.

One Page Navigation

Then head over to the ‘Advanced’ tab of that particular Section. Simply add the ‘Section ID’ of the navigation dots inside the CSS ID field.

One Page Navigation

Click to See Live Demo

4. How to Style One Page Navigation

From the Style’ tab, you can modify Alignment, Color, Size, Spacing, Tooltip and many more options of the One Page Navigation.

4.1. Navigation Box

For the ‘Navigation Box’ section, you are capable of changing the alignment and background type. You can even add styling to border as well.

One Page Navigation

4.2. Navigation Dots

From this section, you can change the size and spacing of the Navigation Dots. If you want, you can even add ‘Box Shadow’ as well. Moreover, you are able to separately control the styling for ‘Navigation Dots’ when its in normal, hover or active view.

One Page Navigation

4.3. Tooltip

You are able to change the background & text color of your Tooltip. From this section, you can change the ‘Typography’ of your Tooltip content as well.

One Page Navigation

4. Final Outcome

Once you are done with the basic steps, you can design One Page Navigation as per your preference.

One Page Navigation

With the help of EA One Page Navigation, this is how you can enhance the user experience on your site with the easier navigation panel.

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]

 

Image Hotspots

Content

Image: Select an image from the MEdia library or upload a new one.

You can use the drop-down menu to specify an image size or opt to a custom size.

Hotspots: Each Hotspot that you add over the image will be presented as a separate card in the Hotspots section.

  • Content: From here select the type of content you want to use. You can use icon, text or keep the field blank.

  • Position: You need to use two separate bars to pick a position for the hotspot marker.

  • Tooltip: Tooltip is the dialogue box that will appear once visitors hover their mouse over it. Use the drop-down menu to select a position for the Tooltip. you also have a mini Editor at the bottom part of the card.

Tooltip Settings: You can set the Tooltip’s size and its animation from here.

Style

Image: Set the width of the image.

Hotspot: From here you can adjust the border, background color padding for the Hotspots. Click on the little pencil icon at the bottom to open the Box Shadow pop-up.

Tooltip: Adjust the text and background color. Click on the pencil icon at the bottom to open the Typography pop-up.

Click to See Live Demo!

Post Carousel

Post Carousel

How to Configure & Style EA Post Carousel

EA Post Carousel gives you the opportunity to add transition effects on how the Post carousel will appear and make it absolutely breathtaking for your landing page.

Table of Contents:

  1. How to Activate Post Carousel
  2. How to Configure the Content Settings
    2.1. Query
    2.2. Layout Settings
    2.3. Carousel Settings
  3. How to Style Post Carousel
    3.1. Post Style
    3.2. Others
  4. Final Outcome

1. How to Activate Post Carousel

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

Post Carousel

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

Post Carousel

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will be able to configure ‘Query’, ‘Layout Settings’ & ‘Carousel Settings’.

2.1. Query

From this section, you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your source: Posts, Pages, WooCommerce Products & Manual Selection.

After choosing your preferred ‘Source’, you can filter your contents by ‘Author’, ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add as many authors, categories & tags as you wish. If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

Moreover, you can set the number of ‘Posts Per Page’ and changes its ‘Order By’ option as well.

Post Carousel

2.2. Layout Settings

From the ‘Layout Settings’, you have the flexibility to use the toggle to hide or display ‘Image’, ‘Title’, ‘Excerpt’ & ‘Meta’. If you wish to show an image for the carousel, you can adjust the image size.

Similarly, if you toggle on the show except for your posts in the carousel, you will be able to set the limit of excerpt words from here. If enabled, you can change the position of ‘Meta’ as well.

Post Carousel

2.3. Carousel Settings

You have the freedom to choose your preferred ‘Transition Effect’ from the ‘Effect’ dropdown menu: Slide, Fade, Cube, Coverflow & Flip. Besides, you can modify the ‘Visible Items’, ‘Items Gap’ & ‘Image Height’.

Use the toggle to enable/disable the ‘Autoplay’ option. If it’s turned on, you are able to change the speed as well. If you wish, you can even turn off/on toggles for these following options : ‘Pause on Hover’, ‘Infinite Loop’ & ‘Grab Cursor’. On the other hand, ‘Navigation’ section allows to add Arrows or Dots or both for your Carousel layout.

Post Carousel

3.  How to Style Post Carousel

Switch to the ‘Style’ tab to style all the features of Post Carousel and get your desired result.

3.1. Post Style

From the ‘Post Style’ section, you are able to change the ‘Post Hover Icon’, ‘Post Background Color’ & ‘Thumbnail Overlay Color’. You can use the dropdown menu to choose your preferred ‘Hover Style’ as well. Besides, you can also add Box Shadow & add ‘Border’ styling.

Post Carousel

3.2. Others

From the ‘Color & Typography’ tab, you can easily change alignment, color & typography of ‘Title’, ‘Meta’ & ‘Excerpt’ style. Besides, you can easily add styling to the navigation icons from ‘Arrows’ & ‘Dots’ sections.

Post Carousel

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Post Carousel content as per your preference.

Post Carousel

This is how you can make an amazing looking Carousel styled content showcase using EA Post Carousel.

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

Get Started Now

Team Member Carousel

How to Configure and Style EA Team Member Carousel

EA Team Member Carousel lets you arrange multiple Team Member profiles in an interactive layout. Each Team Member profile is saved in a separate card which contains the following fields-Name, Position, Description, Image and Social Media accounts.

Table of Contents:

  1. How to Activate Team Member Carousel
  2. How to Configure the Content Settings
    2.1. Team Member
    2.2. Team Members Settings
    2.3. Slider Settings
  3. How to Style Team Member Carousel
  4. Final Outcome

1. How to Activate Team Member Carousel

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

Team Member Carousel

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

Team Member Carousel

 

2. How to Configure the Content Settings

Under the ‘Content’ tab, you are able to configure the ‘Team Member Carousel’ element.

2.1. Team Members

From the ‘Team Members’ section, you can add a team member and add ‘Name’, ‘Position’ & ‘Description’ for each of the members. Simply click on ‘+ Add Item’ to add more members. If you use the toggle to enable ‘Show Social Icons’, you can add the social media profile links for each of the members as well.

Team Member Carousel

2.2. Team Member Settings

You are able to change the HTML Tag for ‘Name’ & ‘Position’ of the Team Members from this section. Besides, you can change the position of Social icons as well. You can use the dropdown menu to change the ‘Overlay Content’ layout. By default, it is set to ‘None’.

Moreover, you can use the toggle to display or hide ‘Divider after Name’, ‘Divider after Position’ and ‘Divider after Description’.

Team Member Carousel

2.3. Slider Settings

You have the freedom to pick the number of team members you want to display with this carousel element by playing around with the ‘Visible Items’ slider. Moreover, you can use the toggle to enable or disable ‘Autoplay’, ‘Pause on Hover’, ‘Infinite Loop’ & ‘Grab Cursor’.

If the Autoplay option is on, then you can set the Autoplay speed. With ‘Pause on Hover’ & ‘Grab Cursor’ options enabled, you will be able to pause slider & a grab cursor icon will appear when it hovers respectively. Besides, you can show or hide ‘Arrows’ & ‘Dots’ navigations as well.

Team Member Carousel

Click to see Live Demo

3.  How to Style Team Member Carousel

Switch to the ‘Style’ tab to style all the features of Team Member Carousel. You have the flexibility to modify the background color & alignment of the content. Moreover, you can add Border & add styling to it as well.

You are also able to add styling to the images and control the styling for Social Icons when it is hovered and in normal view. You can even modify the color, border, alignment & icons for ‘Arrows’ & ‘Dots’ navigations.

You have the freedom to modify the ‘Color & Typography’ for each part of the content as well: Name, Position & Description. You can even add styling to the ‘Social Media Profiles’ icons.

Team Member Carousel

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Team Member Carousel as per your preference.

Team Member Carousel

With the help of EA Team Member Carousel, this is how you can showcase information about your employees or colleagues on your website in a beautiful slider layout.

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

Get Started Now

Smart Post List

How to Configure & Style EA Smart Post List

EA Smart Post List is the perfect solution for heavy blog based websites. It lets you display your posts in an interactive manner, inside a grid layout. Every post in this list will be visually presented in separate cards.

Table of Contents:

  1. How to Activate Smart Post List
  2. How to Configure the Content Settings
    2.1. Query
    2.2. Layout Settings
    2.3. Featured Post Settings
    2.4. List Post Settings
  3. How to Style Smart Post List
    3.1. EA Post List Style
    3.2. Others
  4. Final Outcome

1. How to Activate Smart Post List

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

Smart Post List

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

Smart Post List

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will be able to configure ‘Query’, ‘Layout’, ‘Featured Post’ & ‘List Post’ settings.

2.1. Query

From this section, you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your source: Posts, Pages, WooCommerce Products & Manual Section.

After choosing your preferred ‘Source’, you can filter your contents by ‘Author’, ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add many authors, categories & tags as you wish. If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.

Moreover, you can set the number of ‘Posts Per Page’ and changes its ‘Order By’ option as well.

Smart Post List

2.2. Layout Settings

You can change the layout of EA Smart Post List from this section. You can hide the ‘Topbar’ by disabling the toggle. You also have the capability to make changes to its ‘Title Text’ & ‘All Text’.

Besides, you can use the toggle to hide or display ‘Featured Post’, ‘Category Filter’ & ‘Navigation’. If navigation is enabled, you can change its icons as well.

Smart Post List

2.3. Featured Post Settings

Use the drop-down menu to choose your preferred ‘Featured Post’ which will be highlighted in your Post List. You can change its height & width from this section. Besides, you can change the width of the post lists as well. If you want to hide the Meta, Title or Excerpt of your ‘Featured Post’, simply just turn off the toggle.

Smart Post List

2.4. List Post Settings

From this section, you can change the number of columns of your ‘Post List’. Besides, you can use the toggle to show or hide ‘Featured Image’, ‘Meta’, ‘Title’ or ‘Excerpt’ of your contents as well.

Smart Post List

3.  How to Style Smart Post List

Switch to the ‘Style’ tab to style all the features of Smart Post List and get your desired result.

3.1. EA Post List Style

From the ‘EA Post List Style’ section, you can change the ‘Background Color’ of your Post List. Besides, you can also add Box Shadow & add ‘Border’ styling.

Smart Post List

3.2. Others

From the ‘Style’ tab, you can add styling to the ‘Top bar’, ‘Navigation’, ‘Featured Post’ & ‘List’ sections as well. You can modify the color & typography of ‘Title’ & ‘Category Filter’. Besides, you can easily add styling to the navigation icons.

Moreover, you have the flexibility to change alignment, color & typography of ‘Title’, ‘Meta’ & ‘Excerpt’ style from the ‘Featured Post Style’ & ‘List Style’ sections.

Smart Post List

4. Final Outcome

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

Smart Post List

This is how you can easily showcase your contents with an attractive & interactive layout using EA Smart Post List.

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

Get Started Now

Content Ticker

Content Ticker

How to Configure EA Content Ticker

If you are looking for a way to display ‘breaking news’, ‘Special Offers’ or anything newsworthy, you should definitely implement a Content Ticker on your website.

EA Content Ticker helps you to design a beautiful ticker and gives you the freedom to display ‘Dynamic’ or ‘Custom’ contents as your headlines.

Besides, EA Content Ticker also gives you the flexibility to add nice transition effects & add personalized styling to all the features. Thanks to this Essential Addons element, you can now put the focus on the ‘Headline’ of your contents & make it totally eye-catching to your site visitors.

Table of Contents:

  1. How to Activate Content Ticker
  2. How to Configure the Content Settings
    2.1. Ticker Settings
    2.2. Dynamic Content Settings
    2.3. Custom Content Settings
    2.4. Animation Settings
  3. How to Style Content Ticker
    3.1. Content Style
    3.2. Others
  4. Final Outcome

1. How to Activate Content Ticker

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

Content Ticker

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

Content Ticker

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the settings for your Ticker, Content & Animation. You can easily configure your preferred options from this section.

2.1. Ticker Settings

You can use the dropdown menu to choose a ‘Ticker Type’. You can either select ‘Dynamic’ or ‘Custom’ Ticker type. You will be able to configure the ‘Ticker’ based on your chosen type. Besides, you can also change the headline of your Content Ticker by modifying the ‘Tag Text’ field.

Content Ticker

2.2 Dynamic Content Settings

With Dynamic Content, you can choose a source from which your contents will be generated. You can select any of these 3 as your source: Posts, Pages or Manual Selection.

After doing so, you have the flexibility to show only certain posts based on the tags, authors & categories. If you want, you can even exclude certain posts or pages as well.

Besides, you can set the number of contents which you want to display on your Content Ticker as well. You can also sort out the contents as well by modifying ‘Order’ & ‘Order By’ options.

Content Ticker

2.3 Custom Content Settings

With Custom Content, you can easily insert your own contents and insert a link to them if you wish to. When you move the mouse over the content, you will be able to view the link. Simply click on ‘+ Add Item’ button to insert more custom contents.

Content Ticker

2.4 Animation Settings

From the ‘Animation Settings’, you can the transition effect on how the contents will be displayed on your site. By default, it is set to the ‘Slide’ effect.

Besides, you can use the toggle to enable or disable ‘Autoplay’, ‘Pause on Hover’, ‘Infinite Loop’, ‘Grab Cursor Icon’ & ‘Arrows’. You can modify the speed of your Slider transition & Autoplay as well. Use the dropdown menu right at the bottom to change the direction of your effect.

Content Ticker

Click to See Live Demo

3.  How to Style Content Ticker

Switch to the ‘Style’ tab to style all the features of Content Ticker and get your desired result.

3.1. Content Style

From the ‘Ticker Content’ section, you can modify the color of your Content Ticker background & text. You can add styling to the typography as well.

Content Ticker

3.2. Others

You can add more styling to the EA Content Ticker by modifying ‘Tag Style’ & ‘Arrows’. You can change the color, typography & background of your headline by modifying ‘Tag Style’.

From the ‘Arrows’ section, you can easily change the alignment, size, and icon of your Arrows. You can add styling to ‘Border’ & ‘Color’ of Arrows as well.

Content Ticker

4. Final Outcome

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

Content Ticker

This is how you can easily highlight important announcement & make the headlines very appealing to your visitors by EA Content Ticker.

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

Get Started Now