Elite Addon for Elementor

We will see how to Install Elite Addons from the WordPress Dashboard.

Installing the plugin via the WordPress Dashboard

  • Go to Elite Elementor Pro Addons, and get your addon from here.
  • After this login to your member’s area, download the addon from there.
  • Just upload the “Elite-addons-elementor.zip” to the WP Dashboard > Plugin > Add new, and then activate it. Remember one thing, to use this Addon you have to activate Elementor plugin in your dashboard.
  • Now you can go ahead and start using addons.
  • For better use of this addon, use it with Zita WordPress theme. This addon will work perfectly with Zita. To know more about this theme, go with this link.

Price Box Addon

This widget is very helpful when you want to showcase the pricing of different plans. It allows to display prices of different plans and compare them.

Content tab – Content tab controls the content to be displayed by this widget.

There are sections like –

  • Price Box – Select the layout of the pricing box along with its hover animation.
  • Title – Enter the title and description.
  • Button – Select the type of button, enter text to display on the button and choose an icon to display if needed.
  • Pricing – Enter the price you want to display, choose a currency symbol and enter the duration.
  • Features – You can display a number of features here. Enter its text and choose an icon.
  • Ribbon – Choose a ribbon of your choice to display. It will be displayed on the top corner and works as a highlighter.
  • Price_box_content

Style Tab – You can style content of the various sections here.

  • Title – You can choose the background color and adjust padding for this section. You can change color, HTML tag, and color for the title as well as its description.
  • Button – You can choose the background color and adjust padding for this section. You can change typography, size, adjust the padding of the button. You can also customize its text color, background color and border on normal and hover state.
  • Pricing – You can choose the background color and adjust padding for this section. You can change color, typography, size, vertical position of price along with duration.
  • Features – You can choose the layout, background color and adjust padding for this section. You can control the spacing between text and icon if the icon is used. You can also change the color, typography of text along with adjusting padding and alignment for features item.
  • Visit to Live Demo.

Advanced Heading

Make nice looking heading that creates an impression on its viewers. This widget can be customized highly. You can add separators with an icon, image or text. A short description can be added with your heading to make it more elaborative.

Content tab –

  • General – Enter the heading that you want to display. Here you can attach a link to the heading. You can give a description to mention some other details about heading.
  • Heading Separator – You can choose a separator and add padding/margin around it.

Style tab –

  • General – An overall alignment of the heading can be given here.
  • Heading – Select a heading tag for heading text. Typography, background color, padding/margin can be customized here. By Fill option, you can choose to give heading text color or set an image as background in place of color.
  • Visit to Live Demo.

Image Animation

This widget enables you to display images in a beautiful way with awesome visual effects. You can apply filters, add a hover effect and an overlay over the image. A heading, caption text, and a button can also be added over the image.

Content tab –

  • Image – Select an image and choose its size. The image can be aligned also.
  • Image Effect – In this section, you will find image filters which add a layer over the image. Image hover effects act when the image is someone hovers over the image. Image Overlay also adds a layer but this layer appears when the image is being hovered at.
  • Image Overlay – Content that is being displayed on image overlay is controlled from here. Enter the heading, caption text, button text and attach a link to the button.

Style tab –

  • Heading – Heading that is displayed on image overlay is modified here. You can select its HTML tag, change typography, give color, add text shadow and apply the margin to it.
  • Image Caption – Caption that is displayed on image overlay is modified here. You can change typography, give color, add text shadow and apply the margin to it.
  • Image Button – Button that is displayed on image overlay is modified here. You can change its text typography, give text color and button background color for normal as well as hover state of the button. Border and padding can also be added to the button.
  • Visit to Live Demo.

Content Switcher

Content Switcher allows you to show two different types of content with the ability to switch between them. You can display content, a saved section, a saved page.

Content tab –

  • Title – Enter the title for content.
  • Content-Type – Select the type of content that you want to display. You can display content or choose from the library of saved sections or saved pages.

Style tab –

  • Titles – Here you can adjust the spacing between button and titles of content. The spacing between content and titles along with spacing above titles can also be customized. Controls of titles color, typography, alignment, and their HTML tag is also provided here. You can give a background color, padding, and do border-related changes to titles section.
  • Switch – Here you can choose which content (primary or secondary) should be displayed by default. Different styles of the switch are available here to choose from. Controls of switch color, as well as its size, is also provided here.
  • Content – Here you can select a color, background color, and typography of both primary and secondary content. You can apply padding and do border-related customizations of the content section.
  • Visit to Live Demo.

Post & Page Pro

This widget allows displaying your post lists different layouts and columns. These posts can be filtered, sorted and ordered.

Content tab –

  • Grid – Here you can select from three layouts grid, list, and Zig-Zag to display posts. Blog structure allows changing the position of the image with respect to the text. You can choose from the various posts(post, page, product etc). Choose the category to filter the posts. You can specify the number of items you want to display. You can sort the posts based on Author, Date, Title, Post ID etc. Here you can arrange posts in ascending or descending order. You can enable pagination by which links to other pages will be displayed at the bottom.
  • Image – Here you can choose to hide the image and select the size of the image. Enabling the link option will attach a link to the respective post.
  • Title – Here you can choose to hide the title and select the HTML tag for it. Enabling the link option will attach a link to the respective post.
  • Meta – Here you can choose to hide the meta info and select from the list of meta items. Icons displayed before meta can also be hidden. When enabled date box will be shown over post image.
  • Content – Here you can hide the full content and also control the length of content. You can make the first post large. If you choose to make the sixth post large, the first post will also become large for a better look. The button can be hidden. Its text and alignment can also be changed along with the alignment of content.

Style Tab –

  • Grid Styling – Overall look of posts can be changed from here. You can control the border and spacing around it. Padding and box shadow can also be applied to posts.
  • Column Background – Here you can give a different background color to individual columns. One col works for one column layout, two col works for two column layout and similar for the rest. It works best without enabling the first post large and sixth post large feature.
  • Image – Here you can control border-radius, alignment, box-shadow and spacing around the image.
  • Title – Here you can control color, typography, and margin around the title text.
  • Meta – Here you can control color, typography, and margin around the meta text.
  • Content – Here you can control color, typography, and margin around the content text. Button text color, background color, and box-shadow on normal and hover states are controlled from here. You can also give padding and adjust the border radius of the button.
  • Pagination – Here you can control color and the background color of the active page as well as of the inactive page navigation. Alignment and margin around pagination can also be adjusted from here.
  • Visit to Live Demo.

Instagram Feed

This widget allows displaying photos from your Instagram account to your website very easily. You can customize the layout of displaying images and the look of images too.

Note – Instagram keeps changing its policies for safety and privacy purpose we recommend reading our blog for generating the access token.

Content tab –

  • Instagram settings – Enter client id, redirect URI and Access token. You can filter your images based on the date they were uploaded into your account.
  • Layout – Here you can adjust the number of columns to display images. You can display a profile picture and account details by enabling the ‘Show Profile’ option.
  • Image – Here you can select the number and size of the images that will be displayed. Enabling link option will attach a link to Instagram of that image.
  • Meta – You can choose to hide or show comments and likes here.

Style tab –

  • Layout – You can adjust the spacing between rows and columns of the grid layout here. Your profile’s data related settings are also controlled from here. Enabling ‘Link image to Profile’ will attach a link to your account homepage. You can adjust the border radius of the image and text as well as typography of profile info text.
  • Image – Here you can control the border-related settings of the image. Overlay color of the images when they are hovered is also adjusted from here.
  • Meta – You can choose the icon for comments and likes as well as the color of text and icon. Padding and margin around the meta info can also be adjusted from here.
  • Visit to Live Demo.

Icon List

This widget allows you to create beautiful looking lists with icons and images. You can style these icons and images to as per you need.

Content tab –

  • Icon List – Here you can choose the layout of the list between default and inline. You can add the list items then choose an icon, enter text and attach a link from here.

Style tab –

  • List – You can adjust the spacing of list items along with its alignment. A separator between the list items can be added. Thickness, width, color, and margin around the separator can also be managed from here.
  • Icon – Icon size, icon background dimensions, padding around icons can be adjusted from here. You can choose the icon and its background color on hover as well as the normal state.
  • List Item Image – Border and dimensions related customizations of the images used in the list items is done from here.
  • Text – Color and hover color of the list item text along with typography can be managed from here.
  • Visit to Live Demo.

Image Pointer

Image pointer is a great tool that allows you to draw the attention of the viewer by highlighting a certain point of the image. You can add some details below these pointers.

Content tab –

  • General – Here you can enter the text you want to be displayed as the title above widget and choose an HTML tag for it.
  • Image – This section allows you to upload an image whose certain points are going to be highlighted. You can add an alternative text for the image, if in case the image does not load then this alt text will be displayed in place of the image.
  • Pointer – You can add any numbers of pointers you want. Every pointer has a configuration specific to it. Choose an icon for the pointer, position it wherever you want it to be displayed and add a hover animation effect on the pointer. Enter the tooltip text that will be displayed near pointer. Pointer icon color and background color can be set on the normal and hover state of the pointer.

Style tab –

  • General – Here you can change the color and typography of title. Title alignment and its text-shadow are also controlled from here.
  • Image Styling – You can adjust the border-related settings like border type, width, color and border radius of the image from here.
  • Tooltip Styling – You can adjust the typography and text-shadow of the tooltip text. Padding around this text is also given from here.
  • Visit to Live Demo.

Countdown Clock

This widget allows you to put a timer on your website. It creates urgency in users mind and helps in increasing sales.

Content Tab –

  • Countdown Clock Settings – You can set the due date, choose between two different layouts and select the positioning of the label here.
  • Items Settings – You can hide all the labels at once. Any individual time unit can also be hidden. Enter the label that you want to display for individual time unit. A separator can also be added with size control.
  • Action After Expire – You can choose between the two options what will happen after the countdown is over. You can either display a message or send the page to any URL.

Style Tab –

  • Items Styling – Spacing between the items and typography of digits and labels can be changed. You can adjust padding for each item and do border-related adjustments. Box-shadow to each item can also be applied from here.
  • Days/Hours/Minutes/Seconds Section – Here you can set the background, change digit, label and border color for each time unit block individually. An image as a background can also be set to unit block and to digits and label.
  • Expire Message – Expire message that will be displayed after countdown over can be customized from here. You can change the color and typography of message title and body. Alignment and padding around the message can be managed from here.
  • Visit to Live Demo.

Contact Form 7

Style one of the most popular plugin available in WordPress as the way you want. Make your contact form seven stand out.

Content tab –

  • Contact Form 7 – You need to create forms before using this widget, after creating forms select from those created forms that form will be displayed.

Style Tab –

  • Label Styling – You can control the color and typography of form labels from here.
  • Field Styling – Fields alignment, dimensions, spacing around the fields can be controlled from here. You can adjust padding for input text, textarea text, and drop-down text. You can change the color for input text, drop down the text and drop down background. Typography for field text and drop text can be managed from here. Border-related control of fields can be done from here.
  • Radio & Check Styling – Here you can change the size of the radio box and checkbox size, their label color, and label font size. The spacing between the controls and labels can be managed here. You can customize the color of radio and checkbox along with border-control settings.
  • Button Styling – Button size can be controlled from here. You can adjust the margin and padding for the button. Button text and background color can be adjusted for hover as a normal state.
  • Message Styling – Text color, typography, and border-related customizations can be done for ‘Field Validation Message’. Properties of Form submission message(success message and error message ) like color, background color, and border color can be changed from here. Typography, padding, and border-related change can be done from here as well.
  • Visit to Live Demo.

Compare Images

This widget allows you to compare two images. You can create a before and after image effect with its slider handle.

Content Tab –

  • Images – You can adjust the size and alignment of the module. Enter the label for before and after image and upload the images.

Style Tab –

  • Configuration – Here some settings for the slider is available. You can control the default position of the slider and orientation of the image. Set the event for slider movement. The overlay can be enabled and its color for normal and hover state be set as well.
  • Handle – Icon color of the handle and its background can be adjusted also. Border control and box shadow of the handle can be managed from here. Width and color of handle separator line can be set from here.
  • Before/After Label – Position of before and after label, their typography and padding can be changed from here. You can do customization for color, background color and border-related changes for before and after label separately.
  • Visit to Live Demo.

Advanced Tab

With this widget, you can create beautiful looking tabs that will enhance the navigation experience of users.

Content Tab –

  • General Settings – Here you can choose the layout in which you want the tabs to be displayed. By using the default active tab option you can choose to select the default tab whenever the widget appears. You can increase or decrease the number of tabs from here as well.

Style Tab –

  • General Style – Here you can adjust border-related settings like border type, border width, border color, and radius as well around the whole tabs widget. Box-shadow can also be given from here.

Tabs Title –

  • Using overall alignment you can adjust the alignment of the tabs and the alignment of tabs text can also be done. You can change the typography of tabs text. Inside the tabs, icon size and the spacing between icon and text along with the minimum width of the tabs can be adjusted. Padding and margin can also be applied to every tab. Going further you can adjust the text color, background color, and icon color on active, inactive and hover state of the tabs.

Tabs Content –

  • You can adjust the alignment of content text, background color, typography, padding, margin around the content can be managed from here. You can choose the border type and apply box shadow around the content area.

Pointer Triangle –

  • Here you can choose to hide the triangle pointer of the tabs. Dimensions the triangle like height and width can be adjusted. You can adjust the distance of pointer from tabs top and left direction.