Qi Addons for Elementor


Qi Addons for Elementor - The Largest Free Collection of Elementor Widgets

Welcome to the Qi Addons for Elementor documentation file, where we will be taking a closer look at the 60 custom widgets for Elementor that you get with this plugin and all the options and features you get with them. 

Each widget was designed with ease of use in mind, topped of with the top-notch design that the Qode Interactive development team has become known for. 

Installing Qi Addons for Elementor

First off, here's a list of minimum requirements as well as recommended hosting parameters for running Qi Addons for Elementor plugin:

Minimum Requirements

Recommended Hosting Parameters

There are two ways you can go about installing the Qi Addons for Elementor plugin: 

Installing From Your WordPress Dashboard

  1. ‚ÄčNavigate to your WordPress Dashboard -> Plugins -> Add New
  2. Search for Qi Addons for Elementor plugin
  3. Install and Activate Qi Addons for Elementor from your Plugins page.

Installing Directly From wordpress.org

  1. Locate and download Qi Addons for Elementor on wordpress.org
  2. Upload the qi-addons-for-elementor directory to your ‘/wp-content/plugins/’ directory using your preferred method (ftp, sftp, scp, etc…)
  3. Install and Activate Qi Addons for Elementor plugin from your Plugins page.

Developer Tools

Each of the widgets that come with the Qi Addons for Elementor plugin has a Developer Tools option sub tab, located under the Content tab, at the very bottom; here you can choose to show shortcode snippet for each shortcode/widget.

In effect, this provides you with a html version of that element which developers can use to further adjust and configure the element manually.

It's important to note that, depending on the widget, most of the css (the styling options such are typography selection, colors etc.) will not be applied here.

Without further ado, lets delve into the widgets and all they have to offer. Have fun creating your beautiful new website! 

Accordions and Toggles custom widget for Elementor lets you easily configure and display visually appealing strings of text divided into individual sections that can be expanded when their corresponding titles are clicked on – here you can feature your FAQs or any other important bits and pieces of textual information.

 

Using the Accordions and Tabs widget

1. Adding the Accordions and Toggles widget

 

First off, you should simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Accordions and Toggles widget Content settings

 

First off we’ll go through the options available in the Content tab, or to be more specific, all the settings that you can adjust in the General sub-tab.

Right off the bat, you have the Behavior dropdown where you can opt for using the Accordion or Toggle widget layout. Accordion behavior type enables opening only one section of the element at a time – once a section is clicked on to be expanded, the previously opened one will close. Toggle behavior type allows for multiple sections to be expanded simultaneously.

Next up, regardless whether you selected the Accordion or Toggle behavior, you can adapt the Style of the element. These include Standard, Boxed, Border Top and Border Between predefined styles. Depending on the look you wish to achieve, pick the corresponding element layout and you’ll be able to see the new settings applied on the fly on the right side of your screen.

Standard layout features no borders, Boxed places a border around the entire element, Border Top displays borders above items in the accordion/toggle, and Border Between lays down borders between each item you decided to include

.

The Open Icon and Close Icon fields let you pick an icon or an SVG you wish to display in the element. Depending on the state of the section (active or passive), these icons will be displayed on them – close icon for already expanded sections and closed sections on mouse hover, and the open icon for all passive/closed sections.

Under the section titled Items you can add each individual item/section you wish to feature in your Accordion or Toggle. Here you can input a title and add & customize the content for each of the items you wish to display.

3. Accordions and Toggles widget Style settings

 

After you have picked a behavior type, style, set up the open & close icons and added individual items for sections, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you have a multitude of completely intuitive options for applying different stylizations to the titles, content, borders, as well as the icons. Note that in the event that you selected the Standard element behavior type, you’ll also have the option to set the spacing between the items.  

 

Add to Cart Button custom widget for Elementor lets you display customizable add to cart buttons for your products.

 

Using the Add to Cart Button widget

 

1. Adding the Add to Cart Button widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Add to Cart Button widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 3 sub-tabs; general, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can input the ID corresponding to the product you wish to assign the button to.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, and set a size for the button.

 

Button Icon Sub-tab

 

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Add to Cart Button widget Style settings

 

After you have finished with the basic set up of your add to cart button, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 4 sub-tabs; button style, button icon style, button inner border style, and button underline style. First off, let’s go through the settings that you can adjust in the Button Style sub-tab.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Animated Text custom widget for Elementor provides you with a simple and straightforward way to display captivating sections with animated textual content.

 

Using the Animated Text widget

1. Adding the Animated Text widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Animated Text widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains two sub-tabs; genera, and appear animated. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

 

In the first sub tab you can input the text you wish to display.

 

Appear Animation

In the second sub-tab you can choose how you wish to split the title; you can animate the text word by word, or letter by letter.

You can also pick an appear animation style here, and adjust the animation delay period.

3. Animated Text widget Style settings

 

After you have finished with the basic set up of your animated text, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Style Sub-tab

In the style sub-tab you can choose an alignment for the element, set a heading tag, color, typography, and input padding values for the title.

 

Before/After Comparison Slider is a custom widget for Elementor that lets you effortlessly create interactive before/after style image presentations with draggable handles that gradually reveal one of two provided images depending on the side they are dragged towards.

 

Using the Before/After Comparison Slider widget

1. Adding the Before/After Comparison Slider widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Before/After Comparison Slider widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

Here you can add an image you wish to display for the before stage, and an image for the after stage. You can also input the text that will be displayed on the draggable slider handle, pick an orientation style for the slider, and input a value for the default image offset.

If you wish to position the draggable slider handle centrally (and effectively leave half of each image visible), simply leave this field empty as the default value set here is 50%.

 

3. Before/After Comparison Slider widget Style settings

 

After you have finished with the basic set up of your slider by providing the images, inputting the handle text, choosing a slider orientation and adjusting the image offset, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you have the option to set the size of the circle displayed on the slider handle, adjust borders, handle text color and typography, and the color of the draggable slider handle itself.

Blockquote custom widget for Elementor provides you with a simple way to display eye-catching quotes and style them the way you choose.

 

Using the Blockquote widget

1. Adding the Blockquote widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Blockquote widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

First you have the option to go with one of two blockquote layout styles; Inline, which aligns the quote icon with the text, and Top which places the icon above the quote text.

After you have selected a layout style, simply input the quote text in the text field, and set an icon or an SVG to display at the beginning of the quote.

 

3. Blockquote widget Style settings

 

After you have finished with the basic set up of your blockquote by selecting a layout, inputting the quote text, and adding an icon or an SVG, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are four sub-tabs for setting up various stylizations for your blockquote.

 

Style Sub-tab

In the first section of the Style tab you can choose how you wish to align the quote text relative to the rest of the content, pick and define a background style for your blockquote, and choose whether you wish to display quote borders. In the event that you select one of five blockquote border styles, you’ll also have the option to set the border width and color.

Text Style Sub-tab

 

Here you can pick a heading tag for the text and set the text color and typography.

 

Icon Style Sub-tab

 

Pick an alignment, size and set a color for the blockquote icon.

 

Spacing Style Sub-tab

 

Adjust the holder padding, top margin for the text, and margins for the blockquote icon.

Blog List custom widget for Elementor lets you display a captivating list with your blog posts in a number of captivating ways.

 

Using the Blog List widget

1. Adding the Blog List widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Blog List widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 6 sub-tabs; general, query, layout, layout spacing, read more button, and read more button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make the core adjustments to your blog list element. First off you have the option to select one of two list appearance styles: gallery and masonry.

You can also set proportions for the image, pick a number of columns you wish the list to have and choose between predefined responsive settings and inputting different column values for different responsive stages yourself. The last two options let you choose a size for the space between list items and choose whether you wish to display pagination bullets in your list.

 

Query Sub-tab

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list.

If you wish to limit the list to certain items, you can select additional parameters that will define the items you wish to show.

 

Layout Sub-tab

In this sub-tab you can pick one of six different item layout styles which define how the posts are shown in the list: boxed, date boxed, info on image, minimal, side image, and standard.

You can use the options found below to set a heading tag for item titles, choose whether you wish to display post excepts in the list and set excerpt length, pick whether you wish to center the content in the list, show media, info icons, choose if you wish to display dates for posts, categories, post authors and decide whether you wish to display the read more button.

Depending on the item layout style you selected from the field above, some of these options may not be available.

 

Layout Spacing

In the layout spacing sub-tab you can define the bottom margin for post info sections, titles, and text, as well as input values for the content padding.

 

Read More Button Sub-tab

Here you can make the basic adjustments to the read more button, if you decided to display it in your list from the sub-tab Layout. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, set a size for the button, and choose how the link opens.

 

Read More Button Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the read more button, and pick a position for the icon relative to the button.

 

3. Blog List widget Style settings

 

After you have finished with the basic set up of your blog list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 7 sub-tabs; style, read more button style, read more button icon style, read more button inner border style, read more button underline style, content style, and date style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

Here you can further define the appearance of your list. You can set a main color and a hover color for the titles, adjust title typography, and choose whether you wish to display an underline for titles on hover.

You can also set a color and adjust typography for post excerpts, configure info section main and hover colors & typography, and define image hover style and overlay colors.

 

Read More Button Style

In the event that you decided to display the read more button for items in the list (this option is located in the Layout content sub-tab) Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors & background for the button in both its normal and hover states.

 

Read More Button Icon Style

Next up is the read more button icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Read More Button Inner Border Style

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Read More Button (this button type is only available for Outlined and Filled button layouts).

 

Read More Button Underline Style

This section lets you customize the read more button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Read More Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

 

Content Style

In this sub-tab you can set a background color for the content and define item shadows for your list.

 

Date Style

If you enabled showing post dates, you can define how they appear in your lists here.

Working Hours custom widget for Elementor provides you with a great and intuitive way to display your business’ working hours in easily styled elements.

 

Using the Working Hours widget

1. Adding the Working Hours widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Working Hours widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 4 sub-tabs; general, separator, separator border image, and separator icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In this sub-tab you can input the basic info you wish to display in the element. You can add a subtitle, a title, and some additional textual content. You can also choose a screen resolution below which you wish to apply the predefined responsive layout for the element, and choose whether you wish to display a separator line between the items in the element.

You can add individual Working Hours items (days) by clicking the + ADD ITEM button located at the bottom of this sub-tab.

For each individual item you can add an icon or an SVG, name of the day, input the working hours, and set a color for the item.

 

Separator Sub-tab

The separator sub-tab can be used to define the separators in your element. Here you can pick from three separator layout styles; standard, border image, and with icon. You can also choose how you wish to position the separator line. Please note that in order for these options to have effect, you first need to enable displaying the separator in your element from the General content sub-tab.

 

Separator Border Image Sub-tab

Here you can add a separator border image you wish to display, input the values for the image slice you wish to use as a border image (these values should be provided in the top-right-bottom-left fashion e.g. 20 10 15 20), and choose an image repeat style you wish to use. Please note that in order for these options to have effect, you first need to choose the border image separator layout from the Separator content sub-tab located above.

 

Separator Icon Sub-tab

In the separator icon sub-tab you can add an icon or an SVG you wish to place on your separator line. This option becomes available once you select the with icon separator layout from the Separator content sub-tab located above.

 

3. Working Hours widget Style settings

 

After you have finished with the basic set up of your working hours, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are six sub-tabs for setting up various stylizations for your carousel.

 

Item Style Sub-tab

In this sub-tab you can adjust the appearance of your working hours items; you can set an icon color, size, set a heading heading tag, color & typography for the day name, set a color & typography for the hours, and choose a line & border type you wish to display.

 

General Style Sub-tab

Here you can make basic adjustments to the general look of the element; you can define the element background and define borders.

 

Text Style Sub-tab

 

Here you can configure the appearance of all the textual content in the working hours element.

 

Separator Style Sub-tab

 

If you enabled displaying the separator in your counter from the General content sub-tab, you can further define the separator line here. You can choose one of three separator border styles, and adjust separator width, thickness, and both bottom and top margins.

 

Separator Icon Style Sub-tab

This set of options relates to the with icon separator layout. Here you can set a color, font size and margins for the separator icon.

Button custom widget for Elementor lets you create fully customizable buttons the easy way.

 

Using the Button widget

1. Adding the Button widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Button widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 2 sub-tabs; general and icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts.

 

Filled

This layout lets you display filled buttons – buttons with borders and colored backgrounds. You also get to choose from three button types with this layout; standard, with inner border & icon boxed. In addition to this you can enable an underline for the text, choose a button size, and of course input the text you wish to show on the button alongside a button link.

 

Outlined

This button layout has the same options as the filled button layout, the key difference being the fact that outlined buttons have borders, however their backgrounds are transparent.

 

Textual

Pick this layout if you wish to display a simple button with some text and a transparent background. You can enable an underline for the button text, input the text you wish to display on the button, add a URL for the button link & choose how the link opens.

Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Button widget Style settings

 

After you have finished with the basic set up of your button, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are four sub-tabs for setting up various stylizations for your button.

 

Style Sub-tab

Right below the Style tab is the eponymous Style sub-tab. Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Icon Style Sub-tab

 

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Inner Border Style Sub-tab

 

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab General (this button type is only available for Outlined and Filled button layouts).

 

Underline Style Sub-tab

 

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named General.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Call to Action is a custom widget for Elementor that lets you effortlessly create visually appealing messages for your visitors and encourage them to take a certain action.

 

Using the Call to Action widget

1. Adding the Call to Action widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Call to Action widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 3 sub-tabs; general, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the general sub-tab you can input the title (main text) of your call to action message, and input some additional text if you choose to.

You can also choose a screen size below which the button will not be displayed, and make the entirety of the call to action element clickable by setting the Enable link overlay option to “Yes”.

 

Button Sub-tab

 

Here you can make the adjustments to the call to action button. First off you have the option to pick one of three button layouts.

Filled

This button layout lets you display filled buttons – buttons with borders and colored button backgrounds. You also get to choose from three button types with this layout; standard, with inner border & icon boxed. In addition to this you can enable an underline for the text, choose a button size, and of course input the text you wish to show on the button and add a URL for the button link.

 

Outlined

This button layout has the same options as the filled button layout, the key difference being the fact that outlined buttons have borders, but their backgrounds are transparent.

 

Textual

Pick this layout if you wish to display a simple button with some text and a transparent background placed over the call to action element. You can enable an underline for the button text, input the text you wish to display on the button, and add a URL for the button link.

 

Button Icon Sub-tab

 

In this sub-tab you can add an icon or an SVG you wish to display in your button, and you get to pick where the icon is positioned relative to the button itself.

 

3. Call to Action widget Style settings

 

After you have finished with the basic set up of your call to action, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are six sub-tabs for setting up various stylizations for your call to action.

 

Style Sub-tab

 

In this sub-tab you can adjust heading tags, colors and typography for your titles, subtitles and text, as well as to define backgrounds and borders for your call to action element.

 

Spacing Style Sub-tab

 

Easily set up the holder padding, adjust the top margin for the text, right content padding, and set button margins.

 

Button Style Sub-tab

 

Here you can adjust the button text typography, and make different stylistic choices for your call to action button in its normal (idle) and hover states.

 

Button Icon Style Sub-tab

 

A set of options dedicated to the button icon. You can pick an icon size, and apply different stylizations for your call to action button icon in its normal (idle) and hover states.

 

Button Inner Border Style Sub-tab

 

Here you can set the inner border color, offset and width for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

 

This section lets you customize the button underline; you can apply different styles to button underline for both its normal (idle) and hover states. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Pie and Donut Charts custom widget for Elementor lets you display fully customizable pie charts as well as donut charts in a simple and completely intuitive manner.

 

Using the Pie and Donut Charts widget

 

1. Adding the Pie and Donut Charts widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Pie and Donut Charts widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

Here you can add the individual items you wish to feature in your chart. For each individual item you can input a data value, data label, set background & hover background colors, add a pattern image if you wish to feature it for that specific item, and set border and hover border colors.

In addition to adding individual items and their properties, here you can also input a title for your chart, and include some additional text if you wish.

 

3. Pie and Donut Charts Style settings

 

After you have finished with the basic set up of your chart, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are four sub-tabs for setting up various stylizations for your chart.

 

Chart Style Sub-tab

First off, the chart style sub-tab lets you select how the chart will be aligned on your page; you can display charts on the left, right, and centrally.

The next dropdown labeled Chart Type lets you select the type of chart you wish to create. You can create either a Pie Chart or a Doughnut Chart.

You can also adjust the chart width, border width, and border width on hover.

 

Text Style Sub-tab

 

In this sub-tab you can adjust the text alignment, color, and typography. In addition to this you can pick a heading tag for your title, set a color for the title and alter title typography & top margin.

 

Legend Style Sub-tab

 

This sub-tab is all about letting you display & customize chart legends. You can choose whether you wish to display the legend, pick where you wish to position legends, set the legend bar width & height, set a size for the space between legend items & set legend bar and legend holder margins.

Moreover, you can adjust the legend label color & typography here.

 

Spacing Style Sub-tab

 

In this sub-tab you can set the top margin for the text and input text padding values.  

Clients List custom widget for Elementor lets you display a captivating list of your clients or business associates the easy way.

 

Using the Clients List widget

 

1. Adding the Clients List widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Clients List widget content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make basic adjustments related to appearance and behavior of the element. You have the option to select one of eight predefined image proportions, or to input custom image width and height on your own.

The next set of options is related to list columns; here you can pick a number of columns for your list, choose predefined settings for columns on smaller screens or pick the number of columns for each responsive stage separately, and adjust the size of the space between the list items. You can also choose to include borders for your list if you wish, with two border types available.

After you made these adjustments, you can move on to adding individual items to your list.

To include an item in the list, simply click the +ADD ITEM button located at the bottom of the section. You can feature as many items as you decide.

You have the option to set a main image and an image that appears on hover for each client item. You can also add a title and some additional text, as well as add a link for each of the items and set targets for said links.

 

3. Clients List widget Style settings

 

After you have finished with the basic set up of your client list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up various stylizations for your list.

 

Border Style Sub-tab

In the first sub-tab you can make various adjustments to the list borders. In order for these settings to become available, you first need to enable one of two types of borders for your list from the content sub-tab General.

Here you can choose a color for your borders, pick a border style, and set border width. There are three border types to choose from: solid, dashed and dotted.

 

Style Sub-tab

In the style sub-tab you can further define the look and feel of your list. Here you can set an alignment type for the list, pick a heading tag for item titles, set color for item titles and adjust typography, and pick a color & set typography for the additional item text.

On top of that you can adjust bottom margins for titles and images in your list, and input padding values for the element.

Contact Form 7 custom widget for Elementor lets you display a wide variety of fully flexible contact forms using the free Contact Form 7 plugin.

 

Using the Contact Form 7 widget

 

 

1. Adding the Contact Form 7 widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

 

2. Contact Form 7 >widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

 

Here you can select one of the previously created Contact Form 7 form templates.

 

3. Contact Form 7 widget Style settings

 

Now we are going to take a look at the options available in the Style tab which contains nine sub-tabs for adjusting various stylistic features of your contact form. These are label style, input style, checkbox style, radio style, button style, spacing style, global style, error style, and response style. First off, let’s go through the settings that you can adjust in the Label Style sub-tab.

 

Label Style Sub-tab

 

In the first sub-tab you can adjust the contact form label typography and text color.

 

Input Style Sub-tab

 

Here you can make various stylistic choices related to input in both active and normal (idle) states. You can adjust typography, color, background color, pick one of 5 border styles, and input values for border radius.

 

Checkbox Style Sub-tab

 

In this sub-tab you’ll find options for adjusting the contact form checkbox; you can alter checkbox input size and space between checkboxes, and input values for checkbox input margins and checkbox holder margins.

 

Radio Style Sub-tab

 

Here you can make adjustments to the radio button in your contact form; you can adapt radio input size and set a size for the space between radio buttons, and input values for radio input margins and radio input holder margins.

 

Button Style Sub-tab

 

This is where you can adjust button typography, and set button color, background color and border color in both normal and active states, and input values for button border width and border radius.

 

Spacing Style

 

In this sub-tab you can adjust element spacings. You can values for form item space, input padding, set button margins and padding.

 

Global Style Sub-tab

 

Here you can pick an alignment style for the contact form.

 

Error Style Sub-tab

 

Here you can configure the error message style. You can pick error alignment, adjust typography, color, and input values for error margins.

 

Response Style Sub-tab

 

In this sub-tab you can adjust contact form response styles. You can configure typography, text color, input values for padding and margins, pick one of 5 border styles and adjust the response background.

On top of that you can set colors for sent border, failed border, spam border, and invalid message border.

Countdown custom widget for Elementor provides you with a straightforward way to announce anything you wish by displaying eye-catching countdowns to a date you input.

 

Using the Countdown widget

1. Adding the Countdown widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Countdown widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 2 sub-tabs; general, and label. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the general sub-tab you can input the date and the hour you wish to element to countdown to. In addition to this, you can choose a format for your countdown; you can display the remaining months, days, hours, minutes and seconds, or choose to hide one of the aforementioned by selecting your preferred format style.

 

Labels Sub-tab

 

In the labels sub-tab you can input custom labels of your own for each time unit displayed, both when the digits for corresponding units are in their singular and plural forms. If you wish to leave the default values (months, days, hours, minutes, seconds), simply leave these fields empty.

3. Countdown widget Style settings

 

After you have finished with the basic set up of your countdown, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up various stylizations for your countdown.

 

Style Sub-tab

There’s a number of options for customizing your countdown in the style sub-tab. You can choose how you wish to justify items in the countdown and choose an alignment style for them. Aside from this you can also alter the digit color and typography, as well as change the color, typography and set the top margin for the item labels.

 

Item Style Sub-tab

In the item style sub-tab you can further define the stylization for your countdown. Here you can customize countdown item background, and set width, height and margins for countdown items.

Counters custom widget for Elementor lets you display all your important numbers in fully customizable and captivating counter layouts.

 

Using the Counter widget

1. Adding the Counter widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Counters widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains two sub-tabs; general, and separator icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the general sub-tab you can make all basic settings related to your counter. First off you can input a start digit, an end digit, step between digits, step delay and digit label.

Start digit is a field where you can input a number from which the counter starts; namely, as the counter element appears in the viewport on your pages, as its name suggests, start digit is the first number displayed in the counter.

In the end digit field you can input the number you wish to display in your counter; this number will be displayed as the definitive value in your counter.

Step between digits refers to the way in which the counter will switch from the initially displayed start digit to its destination, the end digit (e.g. if you set the starting digit to 0 and input 5 in the step between digits field, the element will count by fives in the 5, 10, 15… manner).

The step delay lets you input a number of milliseconds that each step of the counter takes up.

The digit label input field can be used to display some additional text right next to the counter digits.

You can also choose whether you wish to display an icon and a separator in your counter, and add a counter title and some additional text.

 

Icon Sub-tab

In the icon sub-tab you can set an icon or an SVG you wish to display in your counter, and set icon color & size. Naturally, for these options to have effect you first need to enable displaying the icon in your counter element from the General content sub-tab.

 

Separator Sub-tab

The separator sub-tab can be used to define the separators in your counter element. Here you can pick from three separator layout styles; standard, border image, and with icon. You can also choose how you wish to position the separator line. Please note that in order for these options to have effect, you first need to enable displaying the separator in your counter element from the General content sub-tab.

 

 

Separator Border Image Sub-tab

Here you can add a separator border image you wish to display, input the values for the image slice you wish to use as a border image (these values should be provided in the top-right-bottom-left fashion e.g. 20 10 15 20), and choose an image repeat style you wish to use. Please note that in order for these options to have effect, you first need to choose the border image separator layout from the Separator content sub-tab located above.

 

Separator Icon Sub-tab

In the separator icon sub-tab you can add an icon or an SVG you wish to place on your separator line. This option becomes available once you select the with icon separator layout from the Separator content sub-tab located above.

 

3. Counters widget Style settings

 

After you have finished with the basic set up of your counter, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 4 sub-tabs; style, spacing style, separator style, and separator icon style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

In the style sub-tab you can set the alignment for the element, adjust typography, color & background for counter digits. You can also enable the stroke effect for digits (display outlined digits), and if you choose to do so you can set the stroke color & outline width.

In addition to this you can style the counter title and the additional text if you decided to feature it in the element.

 

Spacing Style Sub-tab

In this sub-tab you can adjust the top margins for your title and additional text, and input values for text padding.

 

Separator Style Sub-tab

If you enabled displaying the separator in your counter from the General content sub-tab, you can further define the separator line here. You can set a color for the separator, choose one of three separator border styles, and adjust separator width, thickness, and both bottom and top margins.

 

Separator Icon Style Sub-tab

This set of options relates to the with icon separator layout. Here you can set a color, font size and margins for the separator icon.

Device Frame Slider custom widget for Elementor lets you easily create visually appealing slider presentations with images displayed inside predefined or custom device-styled image frames.

 

Using the Device Frame Slider widget

1. Adding the Device Frame Slider widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Device Frame Slider widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

In the general sub-tab you can add the images you wish to feature in the slider and pick one of three predefined device-styled frames (or use a device frame image of your own).

 

Slider Settings Sub-tab

In the slider settings sub-tab you can define the basic appearance of your slider and how it will behave.

You can enable slider loop if you would like the slider to loop when it comes to the last slide, enable automated slider play, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display navigation arrows & pagination bullets in your slider. 

 

3. Device Frame Slider widget Style settings

 

After you have finished with the basic set up of your slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are three sub-tabs for setting up various stylizations for your slider.

 

Slider Navigation Style Sub-tab

 

In the first sub-tab you can make various adjustments to the slider navigation. In order for these settings to become available, you first need to enable slider navigation from the content sub-tab Slider Settings.

Here you can choose where you wish to place the navigation relative to the slider, pick a resolution below which the navigation arrows are hidden, and set a vertical and horizontal offset for the navigation arrows.

You can also add an icon or an SVG for both previous and next navigation arrows, set the arrow main & background color, arrow size, and navigation arrow holder width and height.

 

Slider Pagination Style Sub-tab

 

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the content sub-tab Slider Settings.

Here you can choose where you wish to position the pagination bullets relative to the slider, alter the offset for pagination, and apply different stylizations for the pagination in its normal (idle) and active states.

 

Style Sub-tab

In this section you can alter the device width, set the image border radius and input values for image offset.  

Drop Caps custom widget for Elementor provides you with a neat way to introduce your paragraphs & strings of text by featuring a decorative initial letter which you can fully adapt.

 

Using the Drop Caps widget

1. Adding the Drop Caps widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Drop Caps widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

This is where you can input your textual content; note that the first letter of this text string is the one to which the decoration will be applied.

 

3. Drop Caps widget Style settings

 

After you’ve added the text you wish to display, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up different stylizations for your drop caps.

 

Style Sub-tab

This sub-tab lets you make various stylization choices and apply them to your drop caps. You can adjust the letter typography, color, and holder size. You can also define the background for your drop cap (the initial letter of the text); you can pick a background type, and add a color of your choice or an image to the background around the initial letter.

In addition to this you can display borders around the element if you wish, and you get five different border types to choose from: solid, double, dotted, dashed and groove. You can also set the border width, color, and input values for the letter border radius.

You can also enable the letter stroke effect if you choose to; this will apply an outlined style to the initial letter of your text, and you can pick the outline (letter stroke) color and set the width for the stroke.

Another effect you can apply to the initial letter is the letter clip effect; by enabling this you’ll have the option to set a background inside the initial letter. You can choose a background type, set a color for the background, and add an image to be featured inside the letter. This image can be positioned the way you choose, and you can also pick the image attachment & repeat styles, as well set the image size.

The last two options featured in this sub-tab let you adjust the text typography and color.

 

Spacing Style Sub-tab

The final sub-tab under the Style tab lets you input values for letter margins and padding.

Dual Image with Content custom widget for Elementor provides you with an easy way to create sections that contain two images, one placed on top of the other, with some accompanying content.

 

Using the Dual Image with Content widget

 

1. Adding the Dual Image with Content widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

 

2. Dual Image with Content widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

General Sub-tab

 

Here you can input your title, pick which words you wish to apply decoration to, select words from the title you wish to apply different colors to, provide additional textual content, and pick a bottom section template you wish to feature in the element.

You can also add a main and a secondary image here, and set image proportions for both images.

 

3. Dual Image with Content widget Style settings

 

After you have finished with the basic set up of your dual image with content, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

 

Style Sub-tab

 

In this sub-tab you can adjust the maximum width for the second image, pick an alignment for the element, element content position and configure background color for the content.

You can also pick a heading tag for the title, and set title color, typography, color for differently colored words (in the event that you decided to color some words differently from the content tab General) and select a decoration style for decorative text (in the event that you decided to apply decoration to specific words from the content tab General).

You can also set colors & typography for the additional text here.

 

Spacing Style Sub-tab

 

In the final sub-tab of the style tab you can adjust bottom margins for the title and text, and input values for content padding.

FAQs custom widget for Elementor lets you display fully customizable sections for frequently asked questions and topics the easy way.

 

Using the FAQs widget

1. Adding the FAQs widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. FAQs widget Content settings

 

           

Now we are going to take a look at the options available in the Content tab, or to be more specific the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can enable a JSON schema for the element. This automatically inputs the json schema part of the code into the element and helps your FAQ section get indexed in search engines even on non-standard devices such are mobile devices or TVs.

You can also pick a behavior style for the FAQ element here, and choose one of 3 styles: standard, boxed, and border between.

You also have the option to enumerate different sections (items) you wish to feature in the element.

In the event that you selected accordion behavior type for the FAQs, you can also add icons or SVGs for both opening & closing the FAQ sections/items.

After you made your choices, you can start adding individual items to the FAQ.

To add a new item, simply click the + ADD ITEM button located at the bottom of the sub-tab. You can input a title and additional textual content for each of the items (sections) you wish to display in your FAQ.

 

3. FAQs widget Style settings

 

After you have finished with the basic set up of your FAQ, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 3 sub-tabs; number style, title style, and style. First off, let’s go through the settings that you can adjust in the Number Style sub-tab.

 

Number Style Sub-tab

If you enabled displaying numbered items from the content sub-tab General, you can make stylistic adjustments to those numbers here.

You can configure number typography, pick main and background colors for both normal and active states, adjust number width and height, and input values for right and left number margins and the number border radius.

 

Title Style Sub-tab

Here you can adjust the FAQ titles. You can set a heading tag, configure typography, and alter title main & background colors for both normal and active states. You can also input values for title padding here.

 

Style Sub-tab

In the style sub-tab you can pick a main color, background color and active background color for the content in your FAQ element. You can also input values for content padding, set color for the element border, and adjust size of the space between items as well as the icon size.

Graphs custom widget for Elementor lets you display captivating and fully customizable graphs containing all sorts of data.

 

Using the Graphs widget

1. Adding the Graphs widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Graphs widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can input your datasets or items. To add a new item, simply click the +ADD ITEM button located near the bottom of the sub-tab.

For each of the items you wish to feature in the graph you can input the dataset values separated by commas, and dataset labels. You can also adjust the line color and hover color, adjust filling modes, area color and hover area color, and choose whether you wish to enable a linear mode for the graph (if you set this option to “Yes” the line in the graph will go straight from one dataset value to another, as opposed to gradually rising/falling which is the default setting).

At the very bottom of this section you can input data labels for the entire graph. It’s important to note that you should separate these labels by commas.

 

3. Graphs widget Style settings

 

Now we are going to take a look at the options available in the Style tab which contains three sub-tabs for adjusting various stylistic features of your graph. These are chart style, legend style, and tick style. First off, let’s go through the settings that you can adjust in the Chart Style sub-tab.

 

Chart Style Sub-tab

Here you can make adjustments related to graph appearance. First off you can choose between two graph styles: line and bar.

You can also pick one of 3 chart alignments, configure chart size, input values for border and hover border width, bar size and category size.

 

Legend Style Sub-tab

This is where you can adjust graph legends. The first option located in this sub-tab lets you pick if you wish to display the chart legend in the first place.

You can pick where you wish to position the legend, adjust legend bar width, height, and size for the space between legends. Finally, you can input values for legend bar margins and legend holder margins, and adjust label colors & typography.

 

Tick Style Sub-tab

In the final sub-tab of the style tab you can configure graph ticks. You can input minimum and maximum data values, and adjust the size for the graph steps.

Highlighted Text custom widget for Elementor lets you accentuate certain words or parts of your text the way you choose.

Using the Highlighted Text widget

1. Adding the Highlighted Text widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Highlighted Text widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

This is where you can input the text you wish to display in its entirety. After you’ve provided the textual content you wish to feature, you can pick which words you wish to highlight.

In the Highlight Text Position field you can input the positions of words you wish to highlight as they appear in the sentence you provided.

Simply input a number corresponding to the position of the word you wish to highlight first, and the number of the word which you want to highlight last and put a dash between those numbers; this way, all words located between the ones corresponding to provided ordinal numbers will be highlighted as well.

If you wish to highlight multiple words or strings of text in your paragraph, simply divide different values with a comma.

Here’s a depiction of the end result with values set as shown on the image above:

3. Highlighted Text widget Style settings

 

After you’ve added the text you wish to display and marked the words you decided to highlight, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Under the Style tab you’ll notice the eponymous sub-tab; here you’ll be able to set an alignment for the text, set a heading tag for the text, and adjust the typography.

In addition to applying stylistic changes to the text, you can adjust the highlighted text styles using a set of options located below.  

How-to Schema custom widget for Elementor lets you easily display step-by step tutorials and how-to’s with automatically generating json schema sections inserted into code.

 

Using the How-to Schema widget

 

1. Adding the How-to Schema widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. How-to Schema widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

 

First option (enabled by default) generates the JSON schema for your how-to’s; this automatically inputs the json schema part of the code into the element and helps the section get indexed in search engines even on non-standard devices such are mobile devices or TVs.

In the remaining fields you can input a title for the element, a subtitle, some additional text, and you can also add individual steps (items) to your how-to.

For each of the steps you can input a title, textual content, and add an image.

 

3. How-to Schema widget Style settings

 

After you have finished with the basic set up of your How-to Schema, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

 

Here you’ll find 3 sub-tabs; style, spacing style, steps style, and steps spacing style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

 

Here you can pick an alignment for the element, pick a heading tag & set colors and typography for the title. You can also adjust colors & typography for subtitles and additional text, configure the bottom margin for the title holder, & adjust the size for the space between the items in your How-to Schema element.

 

Spacing Style Sub-tab

 

In this sub-tab you can adjust top margins for title and text.

 

Steps Style Sub-tab

 

This is where you can make various stylistic choices for the steps in your element. You can set a heading tag for step titles and adjust colors & typography for titles and additional text, and adjust the appearance of the step image shadow.

 

Steps Spacing Style Sub-tab

 

In the final sub-tab you can configure bottom margins for step titles and additional text.

Icon with Text custom widget for Elementor lets you easily display icons with some additional textual content which you can customize to fit your visual concept.

 

Using the Icon with Text widget

1. Adding the Icon with Text widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Icon with Text widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 7 sub-tabs; general, content, button, button icon, separator, separator border image and separator icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the general sub-tab you can pick one of three layouts for your icon with text; these layouts let you choose how you wish to position the icon relative to the content. You can also add a URL for the icon link and set a target for said link.

This is also where you can add the icon or SVG that you would like to display, and choose whether you wish to display a separator line inside the element. The separator will be placed between the element title and content.

 

Content Sub-tab

In the content sub-tab you can input a title for the element, and provide some additional text you’d like to display.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed.

You can also add some text to be displayed on the button, provide a URL for the button link & choose how the link opens.

 

Button Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

Separator Sub-tab

 

The separator sub-tab can be used to define the separators in your icon with text element. Here you can pick from three separator layout styles; standard, border image, and with icon. You can also choose how you wish to position the separator line. Please note that in order for these options to have effect, you first need to enable displaying the separator in your icon with text element from the General content sub-tab.

 

 

Separator Border Image Sub-tab

 

Here you can add a separator border image you wish to display, input the values for the image slice you wish to use as a border image (these values should be provided in the top-right-bottom-left fashion e.g. 20 10 15 20), and choose an image repeat style you wish to use. Please note that in order for these options to have effect, you first need to choose the border image separator layout from the Separator content sub-tab located above.

 

Separator Icon Sub-tab

 

In the separator icon sub-tab you can add an icon or an SVG you wish to place on your separator line. This option becomes available once you select the with icon separator layout from the Separator content sub-tab located above.

 

3. Icon with Text widget Style settings

 

After you have finished with the basic set up of your icon with text, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 9 sub-tabs; style, spacing style, icon style, button style, button icon style, button inner border style, button underline style, separator style, and separator icon style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

In the style sub-tab you can set a heading tag, color, hover color & typography for the element title, and adjust typography and color for the additional text.

 

Spacing Style Sub-tab

In this sub-tab you can adjust the top margins for your title, additional text, and button, as well as input values for the icon margins.

 

Icon Style Sub-tab

This sub-tab comes with a number of options you can use to configure the icon itself. You can choose to display a box around the icon, set the icon size, color, and hover color.

In the event that you opt for displaying your icon in a box, there are some additional options you can configure; you can set a background & background hover colors for the icon, and you can customize icon borders by adjusting border colors, size, and border radius.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

 

Separator Style Sub-tab

 

If you enabled displaying the separator from the General content sub-tab, you can further define the separator line here. You can set a color for the separator, choose one of three separator border styles, and adjust separator width, thickness, and both bottom and top margins.

 

Separator Icon Style Sub-tab

 

This set of options relates to the with icon separator layout. Here you can set a color, font size and margins for the separator icon.

Image Slider custom widget for Elementor lets you display your images in captivating, fully configurable slider layouts.

 

Using the Image Slider widget

1. Adding the Image Slider widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Image Gallery widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 2 sub-tabs; general and gallery settings. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

This is where you can add all the images you wish to display in your image slider.

 

Slider Settings Sub-tab

In the slider settings sub-tab you can define the basic appearance and how your slider behaves.

You can enable slider loop if you would like the slider to start over from the first image when it comes to the last image, choose whether you wish to align the slides centrally, enable automated slider play, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, set the proportions you wish to apply to images in the slider, enable displaying partial slider columns, choose a number of columns you wish the carousel slider to contain, choose a predefined number of columns for different screen sizes or input custom values for separate responsive stages, and choose a size for the space between the items in your slider.

You can also enable the magnific popup option (pop-up image previews) for viewing the images in your slider. This will open previews of images once they are clicked on; these previews will be displayed in lightbox pop-ups, while the remainder of the screen gets dimmed.

3. Image Slider widget Style settings

 

After you have finished with the basic set up of your image slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up different stylizations for your slider.

 

Slider Navigation Style Sub-tab

In the first sub-tab you can make various adjustments to the slider navigation. In order for these settings to become available, you first need to enable slider navigation from the content sub-tab Slider Settings.

Here you can choose where you wish to place the navigation relative to the slider, pick a resolution below which the navigation arrows are hidden, and set a vertical and horizontal offset for the navigation arrows.

You can also add an icon or an SVG for both previous and next navigation arrows, set the arrow main & background color, arrow size, and navigation arrow holder width and height.

 

Slider Pagination Style Sub-tab

 

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the content sub-tab Slider Settings.

Here you can choose where you wish to position the pagination bullets relative to the slider, alter the offset for pagination, and apply different stylizations for the pagination in its normal (idle) and active states.  

Button custom widget for Elementor is great for creating buttons that contain a bit of extra information displayed directly on the button.

 

Using the Info Button widget

1. Adding the Info Button widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Info Button widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 2 sub-tabs; general and icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make the basic adjustments to your info button and provide content you wish to display in the element. First off you have the option to pick one of three button layouts.

 

Filled

This layout lets you display filled buttons – buttons with borders and colored backgrounds. You also get to choose from three button types with this layout; standard, with inner border & icon boxed. In addition to this you can enable an underline for the text, choose a button size, and of course input the text you wish to show on the button alongside a button link.

 

Outlined

This button layout has the same options as the filled button layout, the key difference being the fact that outlined buttons have borders, however their backgrounds are transparent.

 

Textual

Pick this layout if you wish to display a simple button with some text and a transparent background. You can enable an underline for the button text, input the text you wish to display on the button, add a URL for the button link & choose how the link opens.

 

In addition to selecting a layout for your button, general sub-tab is also where you can add the button text, the additional text (subtext), and add a link for your info button.

 

Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Info Button widget Style settings

 

After you have finished with the basic set up of your info button, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up various stylizations for your button.

 

Style Sub-tab

Right below the Style tab is the eponymous Style sub-tab. Here you can adjust typography and colors for both the info button text and subtext, configure button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the info button in both its normal and hover states.

 

Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

Info Box custom widget for Elementor is ideal for displaying important informative messages for your visitors in simple and fully flexible box templates.

 

Using the Info Box widget

1. Adding the Info Box widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Info Box widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 3 sub-tabs; general, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the general sub-tab you can input the content you wish to display in your info box; here you can provide a subtitle, a title, some additional textual content, set an icon or an SVG you wish to display, and add a URL you wish to link the element to.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, set a size for the button, and add some text you wish to be displayed on the info box button. 

 

Button Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

3. Info Box widget Style settings

 

After you have finished with the basic set up of your info box, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 7 sub-tabs; style, icon style, spacing style, button style, button icon style, button inner border style, and button underline style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

In the style sub-tab you can further define the look and feel of your info box.

Here you can set an alignment type for the element, adjust the info box background (add a solid or a customizable gradient color fill for the background, or display an image) pick a heading tag for the title, set a main and a hover color for the title and adjust title typography, pick a heading tag & adjust color and typography for the subtitle, and pick a color & set typography for the additional info box text.

 

Icon Style Sub-tab

This is where you can pick an alignment, set a size and a both main and hover color for the info box icon.

 

Spacing Style Sub-tab

In this sub-tab you can input values for the holder padding, adjust the bottom margin for the subtitle, title and additional text, as well as input values for additional text padding and set icon margins.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Interactive Banners custom widget for Elementor provides you with everything you can need to create visually striking banners that your website visitors can interact with.

 

Using the Interactive Banners widget

1. Adding the Interactive Banners widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Interactive Banners widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 4 sub-tabs; general, content, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make the basic adjustments to your interactive banner. First off, you can pick from four predefined banner layouts:

Standard, which initially displays banner title over banner image, however once hovered on, the subtitle which you can provide appears.

Revealing, which initially displays banner title & subtitle over banner image, but once hovered on, some additional text which you can input appears.

Image Switch, which lets you input banner title, subtitle, additional text next to the banner image. You can upload two images you wish to display; the first one will be displayed initially, and the second one once the element is hovered on.

From Bottom, which is essentially identical to revealing, only with textual content displayed at the bottom of the banner.

Aside from picking a layout for your interactive banner, you can choose the image proportions, add image(s) you wish to display in the banner, choose whether you wish to display a banner button, and add a URL you wish to link the interactive banner to.

 

Content Sub-tab

As its name suggests, in this sub-tab you can add the content for your banner; a banner title, subtitle and some additional text. You can choose what to include, e.g. if you wish to display a title only, simply leave the remaining two fields empty. You can also style the title, subtitle and text of your banner separately, but more on that in a bit.

It’s important to note that in the event that you selected the standard banner layout from the general sub-tab, you will only have the option to input the banner title and subtitle.

 

Button Sub-tab

Here you can make the adjustments to the button, in the event that you selected to display one in your banner. First off you have the option to pick one of three button layouts.

Textual

Pick this layout if you wish to display a simple button with some text and a transparent background placed over the banner image. You can enable an underline for the button text, and input the text you wish to display on the button.

 

Filled

This button layout lets you display filled buttons – buttons with borders and colored button backgrounds. You also get to choose from three button types with this layout; standard, with inner border & icon boxed.

 

Outlined

This button layout has the same options as the filled button layout, the key difference being the fact that outlined buttons have borders, but their backgrounds are transparent.

 

In addition to picking a layout for the banner button, you can enable an underline for the text, choose a button size, and of course input the text you wish to show on the button in this button.

 

Icon Sub-tab

 

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Interactive Banners widget Style settings

 

After you have finished with the basic set up of your banner, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are seven sub-tabs for setting up various stylizations for your banner.

 

Content Style Sub-tab

In the first sub-tab you can adjust the banner padding. In the event that you selected the switch image banner layout from the content sub-tab General, you’ll also have the option to configure the banner background and set width for your banner image.

 

Style Sub-tab

 

In this sub-tab you can adjust heading tags, colors and typography for your titles, subtitles and text.

 

Spacing Style Sub-tab

 

Depending on the banner layout you selected in the content sub-tab General, here you can simply click and drag to set the bottom margin for the subtitle, top margin for the banner text and right margin for the additional text (content).

 

Button Style Sub-tab

 

Here you can adjust the button text typography, and make different stylistic choices for your banner button in its normal (idle) and hover states. You can also input values for border width, radius, and set border padding.

 

Button Icon Style Sub-tab

 

A set of options dedicated to the button icon. You can pick an icon size, and apply different stylizations for your banner button icon in its normal (idle) and hover states.

 

Button Inner Border Style Sub-tab

 

Here you can set the inner border color, offset and width for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

 

This section lets you customize the button underline; you can apply different styles to button underline for both its normal (idle) and hover states. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Item Showcase custom widget for Elementor lets you create detailed showcases for items of any sort; you can display an item image with customizable informative sections with your content arranged around the said image.

 

Using the Item Showcase widget

1. Adding the Item Showcase widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Item Showcase widget content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

Here you can pick a layout type you wish to use and add the image you wish to display centrally in the element.

Standard item showcase layout displays item icons (or numbers depending on what you wish to display with your showcase items, more on that in a bit) above item titles.

Side icon layout displays icons (or numbers) next to item titles.

After you added the main image and selected a layout you wish to use, you can start adding item showcase items.

To add a new item showcase item, click the + ADD ITEM button located at the bottom of the section.

For each of the items you wish to feature around the image you can choose whether you wish to display an icon or a number (positioned above or adjacent to your title, depending on the layout you previously selected), add individual item titles, additional text, and input URLs for item links.

 

3. Item Showcase widget Style settings

 

After you have finished with the basic set up of your item showcase, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find two sub-tabs with various settings related to element appearance.

 

Style Sub-tab

The first sub-tab lets you set a main and hover color for icons, icon size, set a heading tag for the title, and adjust colors & typography for titles, numbers, and additional text.

The spacing style sub-tabs lets you adjust top offset and side margin for the main image, select a size for the space between the items, set a bottom margin for titles, and adjust margins for icons & numbers (depending on what you decided to display alongside your item showcase item titles).

Message Box custom widget for Elementor provides you with a simple way to display informative boxes with important notifications or messages for your visitors. These boxes can be closed if the viewer chooses to do so.

 

Using the Message Box widget

1. Adding the Message Box widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Message Box widget content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

Here you can add a title and some additional text you wish to display in your image box. You can also add an icon (displayed on the left side of the element) and a close icon (displayed on the right side of your image box, once clicked the box disappears until page reload).

 

3. Message Box widget Style settings

 

After you have finished with the basic set up of your message box, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find two sub-tabs with various settings related to element appearance.

 

Style Sub-tab

 

In this sub-tab you can adjust the title and text color & typography, choose a position for the main icon, and set icon size and color for both close and main icons. You can also set a hover color for the close icon, and configure the background for your message box. You can set the box border radius, and add a solid color or gradient color fill for the background, or display an image in the message box background.

 

Spacing Style Sub-tab

Here you can input values for icon margins, adjust top margin for the text, and provide values for the message box padding.

Parallax Image Showcase custom widget for Elementor lets you create visually attractive sections with images that move independently at different speeds on scroll.

 

Using the Parallax Image Showcase widget

1. Adding the Parallax Image Showcase widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Parallax Image Showcase widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the first sub-tab you can add the images you wish to display in your element. First off you can add a main image, which will effectively be the largest image and the only one that remains static. You can also select or adjust the image proportions for the main image.

To add parallax images to be displayed over the main image, simply click the +ADD ITEM button located at the bottom of the section.

Here you can add an image, set image proportions, image position, maximal width, and adjust vertical & horizontal image offset and input a value for the image z-index for each of the parallax image items you wish to feature.

3. Parallax Image Showcase widget Style settings

 

After you have finished with the basic set up of your parallax image showcase, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

In the style sub-tab you can input values for the main image padding, and adjust shadows for both main and parallax images featured in your parallax image showcase.

Preview Slider custom widget for Elementor lets you easily create slider presentations with two image slides displayed simultaneously, one of which is placed on top of the other inside a mobile device-styled image frame.

 

Using the Preview Slider widget

1. Adding the Preview Slider widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Preview Slider widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 2 sub-tabs; general, and slider settings. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the first sub-tab you can add individual slides you wish to display. Each slide of the preview slider contains a main image, and an image displayed inside a device-styled frame. You can also choose from three predefined image frames, or use a custom image frame of your own.

 

Slider Settings Sub-tab

In the slider settings sub-tab you can define the basic appearance and how your slider behaves.

You can enable slider loop if you would like the slider to start over from the first image when it comes to the last image, choose whether you wish to align the slides centrally, enable automated slider play, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, set the proportions you wish to apply to images in the slider, enable displaying partial slider columns, choose a number of columns you wish the carousel slider to contain, choose a predefined number of columns for different screen sizes or input custom values for separate responsive stages, and choose a size for the space between the items in your slider.

3. Preview Slider widget Style settings

 

After you have finished with the basic set up of your preview slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are three sub-tabs for setting up different stylizations for your slider.

 

Slider Navigation Style Sub-tab

In the first sub-tab you can make various adjustments to the slider navigation. In order for these settings to become available, you first need to enable slider navigation from the content sub-tab Slider Settings.

Here you can choose where you wish to place the navigation relative to the slider, pick a resolution below which the navigation arrows are hidden, and set a vertical and horizontal offset for the navigation arrows.

You can also add an icon or an SVG for both previous and next navigation arrows, set the arrow main & background color, arrow size, and navigation arrow holder width and height.

 

Slider Pagination Style Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the content sub-tab Slider Settings.

Here you can choose where you wish to position the pagination bullets relative to the slider, alter the offset for pagination, and apply different stylizations for the pagination in its normal (idle) and active states.

 

Device Slider Style Sub-tab

In this sub-tab you can make stylistic adjustments to the smaller of the two sliders, the device slider.

You can configure bottom and right offsets for the slider, as well as adjust device width, image border radius, and input values for image offsets.

Pricing List custom widget for Elementor lets you display easily customizable lists containing the items you have for sale and their prices.

 

Using the Pricing List widget

1. Adding the Pricing List widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Pricing List widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 3 sub-tabs; general, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the general sub-tab you get to pick a layout for your list and insert individual items you wish to display in it. There are two layout types to choose from: standard, which displays the item image after the item title, and image before, which displays the item image in front of its title.

To add individual items to your pricing list, simply click the + ADD ITEM button located at the bottom of the General section, or edit one of the example items that are already added to the element by clicking the item collapsible menu.

 

For each of the items you have the option to add an item image, item title, set a color for the item title, provide some additional descriptive text, input a price, a discounted price, and set a color for the price.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, set a size for the button, add some text you wish to be displayed on the pricing list button, and a URL for the button link & set its target.

 

Button Icon Sub-tab

 

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

3. Pricing Table widget Style settings

 

After you have finished with the basic set up of your pricing list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 7 sub-tabs; style, price style, content style, general style, button style, button icon style, button inner border style, and button underline style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

This is where you can pick a heading tag for your pricing list item titles, and adjust colors & typography for titles and descriptive text for items.

 

Price Style Sub-tab

In the price style sub-tab you can make your stylistic choices regarding how the prices in your list look. You can adjust price color, typography, backgrounds, and input values for price padding and border radius.

 

Content Style Sub-tab

Content style sub-tab provides you with options for adjusting pricing list line color, choosing one of four line types, choose line thickness, and setting margins for the pricing list line and item image, as well as the top margin for the additional description text.

 

General Style Sub-tab

Here you can choose a size for the space between the items in your list, select whether you wish to display a separator line, and adjust the top margin for the pricing list button.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Pricing Table custom widget for Elementor is great for creating tables with prices; you can feature multiple different pricing packages and plans that each contain various features, services, amenities etc. or display a single pricing table with its features.

 

Using the Pricing Table widget

1. Adding the Pricing Table widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Pricing Table widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 3 sub-tabs; general, button, button icon, separator, separator border image, separator icon, and vertical image. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the first sub-tab you can define basic values for your pricing tables. You can pick from five pricing table layouts (table appearance styles): cascading, minimal, simple, standard, vertical image, and with icon.

You can also chose to mark this table as featured, input the table title, price, currency, period of time relevant to the price, input some text you wish to display on the pricing table label (a ribbon or a badge displayed in the top right corner of the table), and choose whether you wish to display a separator line in the element.

After you finished with the basic set up of your pricing table, you can start adding individual features or services that you offer with this pricing table.

To add individual items to your pricing list, simply click the + ADD ITEM button located at the bottom of the General section, or edit one of the example items that are already added to the element by clicking the item collapsible menu.

Here you can input some text for each of the items you wish to display in the pricing table. You can also choose to mark the item as excluded, effectively displaying the provided text with a strikethrough line (this can be useful when offering multiple pricing plans for comparison purposes).

 

Button Sub-tab

 

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, set a size for the button, add some text you wish to be displayed on the pricing table button, and a URL for the button link & set its target.

 

Button Icon Sub-tab

 

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

Separator Sub-tab

If you decided to display a separator in your pricing table from the sub-tab General, this is where you can choose one of three separator layout styles, and choose where you wish to position the separator inside the element.

 

Separator Border Image Sub-tab

Here you can add a separator border image you wish to display, input the values for the image slice you wish to use as a border image (these values should be provided in the top-right-bottom-left fashion e.g. 20 10 15 20), and choose an image repeat style you wish to use. Please note that in order for these options to have effect, you first need to choose the border image separator layout from the Separator content sub-tab located above.

 

Separator Icon Sub-tab

In the separator icon sub-tab you can add an icon or an SVG you wish to place on your separator line. This option becomes available once you select the with icon separator layout from the Separator content sub-tab located above.

 

Vertical Image Sub-tab

In the event that you selected the vertical image pricing table layout from the content sub-tab General, this is where you can set an image you wish to display vertically in your pricing table, and set image proportions and width.

 

3. Pricing Table widget Style settings

 

After you have finished with the basic set up of your pricing list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 7 sub-tabs; table style, title style, price style, label style, list style, items style, button style, button icon style, button inner border style, button underline style, separator style, separator icon style, and icon style.. First off, let’s go through the settings that you can adjust in the Table Style sub-tab.

 

Table Style Sub-tab

Here you can further define the appearance of your table, You can choose an alignment, set a color for the background, choose one of five border styles for the table, input values for border and content padding, and adjust the top margin for the button.

 

Title Style Sub-tab

This is where you’ll find options related to the pricing table title. You can pick a heading tag for the title and configure its color, typography and margins.

 

Price Style Sub-tab

In this sub-tab you can stylize the price. You can configure the price color, typography, currency color & typography, pick a position for the period over which the price is valid and adjust period color and typography. The final set of options lets you input values for margins relating to price, currency, and period.

 

Label Style Sub-tab

In this sub-tab you can configure the pricing table label – this is either a badge or a ribbon displayed in the top right-hand corner of the table. You can choose a label type, adjust its color, background color, typography, padding, border radius and position here.

 

List Style Sub-tab

This is where you can define how the items in your table are listed. You can choose between ordered (this layout displays ordinal numbers next to each item) and unordered, pick a position for the items, and in the event that you selected the unordered type, you can add an icon for items, and set a color, size and right margin for the icon.

 

Items Style Sub-tab

Here you can further define how items listed in your table appear. You can configure item color, excluded item color, item typography, and set the bottom margins for items.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

 

Separator Style Sub-tab

If you enabled displaying the separator from the General content sub-tab, you can further define the separator line here. You can adjust separator width, thickness, and both bottom and top margins here.

 

Separator Icon Style Sub-tab

This set of options relates to the with icon separator layout. Here you can set a color, font size and margins for the separator icon.

 

Icon Style Sub-tab

This set of options becomes available if you selected the with icon pricing table layout from the content sub-tab General. You can also add the icon or an SVG you wish to display in the same tab.

In the icon style sub-tab you can pick a color and set a size for that icon.

Process custom widget for Elementor provides you with a clear and intuitive way to display any type of process divided by stages.

 

Using the Process widget

1. Adding the Process widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Process widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 2 sub-tabs; genera, and layout. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can add individual stages or items you wish to display in your process element. You can also choose a number of columns you wish the element to have, and select predefined responsive values or input custom column numbers for separate responsive stages.

To add individual items to your process element, simply click the + ADD ITEM button located at the bottom of the General section, or edit one of the example items that are already added to the element by clicking the item collapsible menu.

This is where you can add an icon or an SVG for each of the items you wish to display, and you can add item titles, additional text, set item offset, holder size, typography, color, adjust background type, input values for border holder radius, pick one 5 border types, adjust process line offset and line rotation.

 

Layout Sub-tab

Here you can choose one of two layout types for your process element: horizontal and vertical.

 

3. Process widget Style settings

 

After you have finished with the basic set up of your process widget, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are four sub-tabs for setting up different stylizations for your process element.

 

Style Sub-tab

Here you can further define how the process element appears. You can choose an alignment and pick a heading tag for the process title. You can also configure colors and typography for the title, text, and item text, as well as adjust item offset, holder size, item backgrounds, item holder radius, and choose one of five customizable border styles to place between items.

Line Style Sub-tab

In this sub-tab you can stylize your process element line that connects different stages of the process. You can pick one of three line styles, set a color for line borders and adjust line thickness.

 

Spacing Style Sub-tab

Here you can adjust the top margin for item text and input values for item text padding.

 

Additional Style Sub-tab

Here you can adjust the additional holder color, typography, size, position, and define its background.

Product Category List custom widget for Elementor lets you display captivating and fully flexible lists with your products designated to a specific category of your choice.

 

Using the Product Category List widget

1. Adding the Product Category List widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Product Category List widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 5 sub-tabs; general, query, layout, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make the core adjustments to your product category list element. First off you have the option to select one of two list appearance styles: gallery and masonry.

You can also set proportions for the image, pick a number of columns you wish the list to have and choose between predefined responsive settings and inputting different column values for different responsive stages yourself. The last two options let you choose a size for the space between list items and choose whether you wish to display pagination bullets in your list.

 

Query Sub-tab

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list. You can also choose to prevent empty product categories from being displayed in your list.

If you wish to further limit the list to certain items, you can input taxonomy IDs corresponding to items you wish to show.

 

Layout Sub-tab

In this sub-tab you can pick one of three different item layout styles, and set a heading tag for item titles in your slider.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, set a size for the button, and input some text you wish to display on the button.

 

Button Icon Sub-tab

 

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Product Category List widget Style settings

 

After you have finished with the basic set up of your product list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 6 sub-tabs; style, button style, button icon style, button inner border style, button underline style and spacing style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

Here you can further define the appearance of your list. You can set a color a for the title, adjust title typography & box width, input values for title padding and set a color for the title background.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

 

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

 

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

 

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

 

Spacing Style Sub-tab

This is where you can adjust the bottom title offset.

Product List custom widget for Elementor lets you display beautiful and fully flexible lists containing all products you wish to showcase.

 

Using the Product List widget

1. Adding the Product List widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Product List widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 5 sub-tabs; general, query, layout, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can make the core adjustments to your product list element. First off you have the option to select one of two list appearance styles: gallery and masonry.

You can also set proportions for the image, pick a number of columns you wish the list to have and choose between predefined responsive settings and inputting different column values for different responsive stages yourself. The last two options let you choose a size for the space between list items and choose whether you wish to display pagination bullets in your list.

 

Query Sub-tab

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list.

If you wish to limit the list to certain items, you can select additional parameters that will define the items you wish to show. You can also limit the list by choosing to filter by selecting on sale, featured, top rated or best-selling items.

 

Layout Sub-tab

In this sub-tab you can pick one of five different item layout styles, set a heading tag for item titles, and choose if you wish to display item categories and item ratings in your list.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, and set a size for the button.

 

Button Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Product List widget Style settings

 

After you have finished with the basic set up of your product list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 9 sub-tabs; style, spacing style, category style, price style, rating style, button style, button icon style, button inner border style, and button underline style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

Here you can further define the appearance of your list. You can set a main color and a hover color for the title, adjust title typography, and configure image hover backgrounds and image overlay inner offset.

 

Spacing Style Sub-tab

This is where you can adjust the spacing in your list; you can input values for list content padding, and set top margins for item ratings and categories (if you decided to display them in your list).

 

Category Style Sub-tab

If you enabled displaying item categories in your product list from the content sub-tab Layout, you can stylize the category text here.

 

Price Style Sub-tab

In this sub-tab you can define how the item prices appear. You can set a color for the price, old price, adjust price typography, and set font size and top offset for the price currency.

 

Rating Style Sub-tab

If you enabled displaying item ratings in your product list from the content sub-tab Layout, you can configure how ratings appear here.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Product Slider custom widget for Elementor lets you display your products in eye-catching and fully adaptable slider layouts.

 

Using the Product Slider widget

1. Adding the Product Slider widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Product Slider widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 5 sub-tabs; general, query, layout, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the slider settings sub-tab you can define the basic appearance and how your slider behaves.

You can enable slider loop if you would like the slider to start over from the beginning when it comes to the last slide, choose whether you wish to align the slides centrally, enable automated slider play, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, set the proportions you wish to apply to images in the slider, enable displaying partial slider columns, choose a number of columns you wish the carousel slider to contain, choose a predefined number of columns for different screen sizes or input custom values for separate responsive stages, and choose a size for the space between the items in your slider.

 

Query Sub-tab

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list.

If you wish to limit the list to certain items, you can select additional parameters that will define the items you wish to show. You can also limit the list by choosing to filter by selecting on sale, featured, top rated or best-selling items.

 

Layout Sub-tab

In this sub-tab you can pick one of four different item layout styles, set a heading tag for item titles, and choose if you wish to display item categories and item ratings in your slider.

 

Button Sub-tab

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, and set a size for the button.

 

Button Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Product Slider widget Style settings

 

After you have finished with the basic set up of your product slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 11 sub-tabs; slider navigation style, slider pagination style, style, spacing style, category style, price style, rating style, button style, button icon style, button inner border style, and button underline style. First off, let’s go through the settings that you can adjust in the Slider Style sub-tab.

 

Slider Navigation Style Sub-tab

In the first sub-tab you can make various adjustments to the slider navigation. In order for these settings to become available, you first need to enable slider navigation from the content sub-tab General.

Here you can choose where you wish to place the navigation relative to the slider, pick a resolution below which the navigation arrows are hidden, and set a vertical and horizontal offset for the navigation arrows.

You can also add an icon or an SVG for both previous and next navigation arrows, set the arrow main & background color, arrow size, and navigation arrow holder width and height.

 

Slider Pagination Style Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the content sub-tab General.

Here you can choose where you wish to position the pagination bullets relative to the slider, alter the offset for pagination, and apply different stylizations for the pagination in its normal (idle) and active states.

 

 

Style Sub-tab

Here you can further define the appearance of your slider. You can set a main color and a hover color for the title, adjust title typography, and configure background color and background hover color for items in your slider.

 

Spacing Style Sub-tab

This is where you can adjust the spacing in your slider; you can input values for list content and item padding, and set top margins for the slider swap holder, item ratings and categories (if you decided to display them in your list).

 

Category Style Sub-tab

If you enabled displaying item categories in your product list from the content sub-tab Layout, you can stylize the category text here.

 

Price Style Sub-tab

In this sub-tab you can define how the item prices appear. You can set a color for the price, old price, adjust price typography, and set font size and top offset for the price currency.

 

Rating Style Sub-tab

If you enabled displaying item ratings in your product list from the content sub-tab Layout, you can configure how ratings appear here.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Radial Progress Bar custom widget for Elementor lets you display progressions of all types of processes in fully customizable, animated circular progress bars. 

 

Using the Radial Progress Bar widget

1. Adding the Radial Progress Bar widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Radial Progress Bar widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

In the first field of the general sub-tab you can input the percentage of completion (from 0 to 100) for the process you wish to display using the progress bar. This number will be displayed centrally inside the radial progress bar.

In the last three fields of this sub-tab you can input a value for the progress bar entry animation duration in milliseconds, a title for the progress bar, and some additional text.

3. Radial Progress Bar widget Style settings

 

After you’ve defined basic values for your progress bar, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up different stylizations for your progress bar.

 

Circle Style Sub-tab

In the first sub-tab you can make adjustments related to the appearance of the progress circle itself.

Here you can set a line color and thickness for both active & inactive progress bar lines. Active line refers to the stretch of the line corresponding to the value you provided (e.g.75), and the inactive line represents the part of the progress bar from the point where active line ends all the way to 100% (or the far right side of your progress bar).

You can also pick a fill color for the circle here, and set a size for the radial progress bar circle.

 

Text Style Sub-tab

Text style sub-tab lets you set a heading tag for your title, and adjust colors, typography & margins for the title and text, as well as select a color and configure typography for the percentage number.

Horizontal Progress Bar custom widget for Elementor lets you display progressions of all types of processes in fully customizable horizontally laid out progress bars.  

 

Using the Horizontal Progress Bar widget

1. Adding the Horizontal Progress Bar widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Horizontal Progress Bar widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

In the first field of the general sub-tab you can input the percentage of completion (from 0 to 100) for the process you wish to display using the progress bar. You also get to choose where this number will be displayed relative to the progress bar.

On top of that you can enable gradient color fill for the bar and select starting & ending gradient colors, and you also have the option to enable a pattern fill for the progress bar and add a pattern image of your choice.

In the last two fields of this sub-tab you can input the title for the progress bar and a value for the progress bar entry animation duration in milliseconds.

3. Horizontal Progress Bar widget Style settings

 

After you’ve defined basic values for your progress bar, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up different stylizations for your progress bar.

 

Bar Style Sub-tab

In the first sub-tab you can make adjustments related to the appearance of the progress bar itself. Here you can choose one of 5 border styles & place it around the bar if you choose so, and you can adjust border width & color.

The remaining options let you set line color, opacity & thickness for both active & inactive progress bar lines. Active line refers to the stretch of the line corresponding to the value you provided (e.g.75), and the inactive line represents the part of the progress bar from the point where active line ends all the way to 100% (or the far right side of your progress bar).

 

Text Style Sub-tab

Text style sub-tab lets you set a heading tag for your title, and adjust colors, typography & margins for both the title and the percentage number.  

Vertical Progress Bar custom widget for Elementor provides you with a straightforward way to display progressions of all kinds of processes in fully adaptable vertically arranged progress bar layouts.

Using the Vertical Progress Bar widget

1. Adding the Vertical Progress Bar widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Vertical Progress Bar widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

In the first field of the general sub-tab you can input the percentage of completion (from 0 to 100) for the process you wish to display using the progress bar. You also get to choose where & how this number will be displayed relative to the progress bar.

On top of that you can enable gradient color fill for the bar and select starting & ending gradient colors, and you also have the option to enable a pattern fill for the progress bar and add a pattern image of your choice.

In the last two fields of this sub-tab you can input the title for the progress bar and a value for the progress bar entry animation duration in milliseconds.

3. Vertical Progress Bar widget Style settings

 

After you’ve defined basic values for your progress bar, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

 

There are two sub-tabs for setting up different stylizations for your progress bar.

 

Bar Style Sub-tab

 

In the first sub-tab you can make adjustments related to the appearance of the progress bar itself. Here you can input a value for the progress bar height, choose one of 5 border styles & place it around the bar if you choose so, and you can adjust border width & color.

The remaining options let you set line color, opacity & thickness for both active & inactive progress bar lines. Active line refers to the stretch of the line corresponding to the value you provided (e.g.75), and the inactive line represents the part of the progress bar from the point where active line ends all the way to 100% (or the very top of your progress bar).

 

Text Style Sub-tab

 

Text style sub-tab lets you set a heading tag for your title, and adjust colors, typography & margins for both the title and the percentage number.

Section Title custom widget for Elementor lets you easily create captivating and fully configurable titles for any section on your website pages.

 

Using the Section Title widget

1. Adding the Section Title widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Section Title widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains 3 sub-tabs; general, button, and button icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

This is where you can input the title and make some stylistic choices related to its appearance.

You can input the title and a subtitle, choose how you wish to position the subtitle relative to the title, input some additional textual content, and choose whether you wish to display a button with your section title.

In the Positions of Line Break field you can input the positions of words after which you wish to put a line break as they appear in the sentence you provided. You can also disable title line break on devices with screens below 1024px.

You also have the option to choose which words you wish to decorate in your title (you can choose between italic, underline and bold text decoration styles, more on that in a bit), and input positions of the words in your title you wish to color differently.

 

Button Sub-tab

Here you can make the basic adjustments to your button if you enabled displaying the button from the content sub-tab General. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, set a size for the button, add some text you wish to be displayed on the pricing list button, and a URL for the button link & set its target.

 

Button Icon Sub-tab

Here you can add an icon or an SVG you wish to display inside the button, and pick a position for the icon relative to the button.

 

3. Section Title widget Style settings

 

After you have finished with the basic set up of your section title, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 6 sub-tabs; style, spacing style, button style, button icon style, button inner border style, and button underline style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

Here you can further define the appearance of your section title. You can pick a heading tag for the title, and set a color for the title and adjust its typography.

If you decided to color certain words in your section title from the content sub-tab General, you can set the color for those words here. The same goes if you opted for applying text decoration to specific words from the title; you can choose a decoration style here.

The rest of the options let you pick a heading tag for the subtitle, and configure subtitle and text colors and typography.

 

Spacing Style Sub-tab

In this sub-tab you can input values for the title margins, adjust top margin for the subtitle text, button and text, as well as to adjust paddings for the subtitle and text.

 

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

 

Button Icon Style Sub-tab

Next up is the icon style sub-tab where you can adjust the icon size, set icon margins, and make different stylistic choices for your button icon in its normal (idle) and hover states; you can select the icon color in its normal state, and choose one of four behavior types for the button when it is hovered on.

 

Button Inner Border Style Sub-tab

Here you can set the inner border color, offset and width, as well as pick a hover style and adjust the hover border color for your button with inner borders; please note that in order for these settings to become visible, you need to pick the With Inner Border button type from the content sub-tab Button (this button type is only available for Outlined and Filled button layouts).

 

Button Underline Style Sub-tab

This section lets you customize the button underline. Please do note that in order for these settings to become visible, you need to set the Enable Button Text Underline option to ”Yes” from the content sub-tab named Button.

Button Underline Style sub-tab lets you apply different styles to button underline for both its normal (idle) and hover states.

Divider custom widget for Elementor lets you create your style of visual separators between elements and sections on your pages the easy way.

 

Using the Divider widget

1. Adding the Divider widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Divider widget content settings

 

Now we are going to take a look at the options available in the Content tab which contains three sub-tabs; general, border image, and icon. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

The general sub-tab is used to define the divider element. Here you can pick from three divider layout styles; standard, border image, and with icon. You can also choose how you wish to position the divider line.

 

Border Image Sub-tab

Here you can add a divider border image you wish to display, input the values for the image slice you wish to use as a border image (these values should be provided in the top-right-bottom-left fashion e.g. 20 10 15 20), and choose an image repeat style you wish to use. Please note that in order for these options to have effect, you first need to choose the border image separator layout from the General content sub-tab located above.

 

Icon Sub-tab

 

In the icon sub-tab you can add an icon or an SVG you wish to place on your divider line. This option becomes available once you select the with icon separator layout from the General content sub-tab located above.

 

3. Divider widget Style settings

 

After you have finished with the basic set up of your divider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up various stylizations for your divider.

 

Style Sub-tab

Here you can define the style of your divider by setting a color for the divider line, picking one of three available border styles, and by adjusting the divider width, thickness and both top and bottom margins.

 

Icon Style Sub-tab

This set of options relates to the with icon divider layout. Here you can set a color, font size and margins for the divider icon.

Table of Contents custom widget for Elementor lets you display neatly structured tables of contents with one-click one-page navigation.

 

Using the Table of Contents widget

1. Adding the Table of Contents widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Table of Contents widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can input a title, a subtitle, and some additional text you wish to display. In the excluded tags/classes/ids field you can input h tags, classes (in example. form) or ids (in #example) form that you wish to exclude. Each of the tags, classes or ids should be separated by commas.

 

3. Table of Contents widget Style settings

 

After you have finished with the basic set up of your table of contents, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 4 sub-tabs; style, spacing style, list style, and items typography style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

Here you can set the element alignment, and pick a heading tag for the title and subtitle. You can also adjust colors and typography for the title, subtitle, and text.

 

Spacing Style Sub-tab

In this sub-tab you can adjust top margins for the title and text, input values for text padding, configure top and left margins for the list, and pick a size for the space between the items in your table of contents.

 

List Style Sub-tab

Here you can choose between unordered and ordered list types, pick a list style position, select one of 3 list styles, and choose whether you wish to display an underline for items in the list on hover.

 

Items Typography Style Sub-tab

As its name suggests, this sub-tab allows you to adjust item text color, hover color, and item text typography.

Horizontal Tabs custom widget for Elementor lets you easily create and organize horizontally aligned tabs with content which you can customize to fit your visual style.

 

Using the Horizontal Tabs widget

1. Adding the Horizontal Tabs widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Horizontal Tabs widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

You can add individual Horizontal Tab items (tabs) by clicking the + ADD ITEM button located at the bottom of this sub-tab.

For each individual item you can add a title, and input the content you wish to display in that tab.

 

3. Horizontal Tabs widget Style settings

 

After you’ve input the content for your tabs, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

There are two sub-tabs for setting up different stylizations for your horizontal tabs.

 

Style Sub-tab

This is where you can make various adjustments to your tabs in terms of appearance & behavior. You can choose how the titles will be aligned, set a heading tag & adjust the typography for the titles.

The next set of options which let you customize tab titles, backgrounds & borders for the tabs – you can do this for tabs in their normal state, and active/hover state separately.

Here you can set a color for tab titles and adjust the tab backgrounds; you can add a solid color or an image for the background, or opt for fully customizable gradient color fill. You also get to choose one of five border styles for the normal tab state, & adapt border width and color. There are two additional options for active/hover tab state; you can configure the tab title underline height, offset & color.

The last set of options refers to the textual content of each tab. Here you can set text color, typography, background color, and enable one of five adaptable border types for the tab content.

 

Spacing Style Sub-tab

The spacing style sub-tab lets you configure title padding, margins, width, and input values for content padding for your horizontal tabs.

Vertical Tabs custom widget for Elementor provides you with everything you’ll need to easily create and organize vertically laid out tabs with content which you can customize to fit your visual style.

 

Using the Vertical Tabs widget

1. Adding the Vertical Tabs widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Vertical Tabs widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

First off you have the option to display tab content underneath the tabs on screens with certain resolutions; by default, vertical tabs have their content displayed right next to the tab (on the vertical plane), however it may be a good idea to alter this appearance style for smaller screens in order to create a more clear viewing experience on those types of devices.

You can add individual Vertical Tab items (tabs) by clicking the + ADD ITEM button located at the bottom of this sub-tab.

For each individual item you can add a title, and input the content you wish to display in that tab.

 

3. Vertical Tabs widget Style settings

 

After you’ve input the content for your tabs, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

 

There are two sub-tabs for setting up different stylizations for your vertical tabs.

 

Style Sub-tab

 

This is where you can make various adjustments to your tabs in terms of appearance & behavior. You can choose how the titles will be aligned, set a heading tag & adjust the typography for the titles.

The next set of options which let you customize tab titles, backgrounds & borders for the tabs – you can do this for tabs in their normal state, and active/hover state separately.

Here you can set a color for tab titles and adjust the tab backgrounds; you can add a solid color or an image for the background, or opt for fully customizable gradient color fill. You also get to choose one of five border styles for the normal tab state, & adapt border width and color. There are two additional options for active/hover tab state; you can configure the tab title underline height, offset & color.

The last set of options refers to the textual content of each tab. Here you can set text color, typography, background color, and enable one of five adaptable border types for the tab content.

 

Spacing Style Sub-tab

 

The spacing style sub-tab lets you configure title padding, input values for content padding, and choose a size for the space between the items (tabs) for your vertical tabs.

Team custom widget for Elementor provides you with a wide selection of varied ways to showcase individual members of your team.

 

Using the Team widget

1. Adding the Team widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Team widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you have the option to select one of 5 layout styles, each of them displaying the team member info in a different way relative to team member image. You can also input the team member name, role, add an image you wish to display, and adjust image proportions.

You also have the option to add social items for the team member; to add a new social item, simply click the +ADD ITEM button located at the bottom of the general sub-tab. For each social item you can add an icon or an SVG, input a link and choose how the link opens.

 

3. Team widget Style settings

 

After you have finished with the basic set up of your team, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 3 sub-tabs; style, style, spacing style, and content style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Style Sub-tab

In the first sub-tab you can make various choices related to the appearance of the element. You can set a heading tag for the team member name, adjust name and role colors and typography, set main & hover colors and size for the icon, select an image behavior style on hover, and set text color & typography.

 

Spacing Style Sub-tab

Here you can adjust spacings inside the element; you can configure role, name and text bottom margins, and set a size for the space between icons.

 

Content Style Sub-tab

Here you can adjust the content background color, vertical & horizontal alignment, and input values for content padding.

Testimonials custom widget for Elementor let you display testimonials with total ease & in the way you decide.

 

Using the Testimonials widget

1. Adding the Testimonials widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Testimonials widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains two sub-tabs; general, and layout. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

In the first sub-tab you can choose how many columns you wish your testimonial list to have, pick predefined or custom settings for different responsive stages, and select a size for the space between the items in the list.

After you made your selections, you can start adding individual testimonials or quotes. To add a new item, click the + ADD ITEM button located at the bottom of this sub-tab.

For each of the items you wish to feature you can add a title, testimonial text, author, author occupation, and an image.

You can also adjust the colors for quote, title, text, author name, occupation, and configure the background.

 

Layout Sub-tab

Here you can pick one of 5 layout stiles for items in the list. For boxed layout you can configure box padding, image border radius and item background, and for the side with image layout you can alter the side width and input values for image border radius.

 

3. Testimonials widget Style settings

 

After you have finished with the basic set up of your testimonials, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 3 sub-tabs; quote style, style, and spacing style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

 

Quote Style Sub-tab

Here you can further define the appearance of quotes. You can add an icon or an SVG you wish to display, set a color for the quote, and its size & position.
 

Style Sub-tab

In this sub-tab you can further define how the textual content appears in your testimonials. You can adjust titles, text, and author name.

 

Spacing Style Sub-tab

In the final sub-tab of the style tab you can adjust bottom margins for titles, item text and item images, as well as configure item text padding and set top margin for the author occupation.

Text Marquee custom widget for Elementor lets you easily display sections with customizable auto-scrolling text.

 

Using the Text Marquee widget

1. Adding the Text Marquee widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Text Marquee widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can add individual items (pieces of textual content) you wish to display in the element.

 

3. Text Marquee widget Style settings

 

After you have provided the textual content you wish to display in the Text Marquee, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you can adjust the text color, typography, choose whether you wish to feature a text stroke effect (and effectively display outlined text whose color & width you can alter), and configure the size for the space between text marquee items (in the event that you decided to display multiple text marquee items).

Timeline Showcase custom widget for Elementor provides you with a simple and intuitive way to display visually appealing chronological lists with your events.

 

Using the Timeline Showcase widget

1. Adding the Timeline Showcase widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Timeline Showcase widget Content settings

 

Now we are going to take a look at the options available in the Content tab which contains three sub-tabs; general, appear animation, and columns. First off, let’s go through the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you get to pick one of four distinct layouts for your timeline: horizontal alternating, horizontal standard, vertical separated and vertical side. Each of the layouts displays images and their corresponding info sections in a different way.

After you selected a layout for your timeline, you can start adding individual items to the element.

To add a new item, simply click the + ADD ITEM button located at the bottom of the section. For each of the items you can add a point icon (an icon placed on the timeline itself), add an image, a title, date, some additional text, a URL for the item link, and you can also choose how the link opens.

 

Appear Animation Sub-tab

 

Here you can choose to enable or disable an entry animation for the element as it appears in the viewport (this is enabled by default).

 

Columns Sub-tab

 

In this sub-tab you can pick a number of columns you wish the element to have, and pick predefined or custom settings for different responsive stages for the element.

 

3. Timeline Showcase widget Style settings

 

After you have finished with the basic set up of your Timeline Showcase, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you’ll find 5 sub-tabs; content style, style, spacing style, line & point style, and navigation style. First off, let’s go through the settings that you can adjust in the Content Style sub-tab.

 

Content Style Sub-tab

Here you can make further adjustments to the appearance of your timeline. You can pick a heading tag for the title, and set a main color, typography & hover color for the titles. You can also adjust colors & typography for dates and additional text.

 

Spacing Style Sub-tab

This is where you can adjust the bottom margin for the title, input values for title padding, configure bottom margins for dates and additional text, input values for text padding, choose a size for the space between the items and configure the space between items and the center of the timeline.

 

Line & Point Style Sub-tab

In this sub-tab you can adjust timeline line and point. You can set line color & thickness, pick between standard and diamond point types, adjust timeline point size & color, input values for point border radius, and pick the point icon size & color.

 

Navigation Style Sub-tab

Here you can add icons or SVGs for the previous and next navigation arrows, pick arrow color, and set arrow size and navigation arrow offset.

Typeout Text custom widget for Elementor is great for featuring smoothly animated typeout text sections anywhere on your pages.

 

Using the Typeout Text widget

1. Adding the Typeout Text widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. Typeout Text widget Content settings

           

Now we are going to take a look at the options available in the Content tab, or to be more specific the settings that you can adjust in the General sub-tab.

 

General Sub-tab

This is where you can input the text you wish to display. Note that the typeout text widget consists of two types of text – static, which you can input in the field named Text, and the typeout text itself. The text that gradually gets typed out is inserted through individual Items, and you can feature as many items as you wish. To add a new typeout text item, simply click the + ADD ITEM button located at the bottom of the sub-tab.

You also have the option to input a character of your choice as a cursor in the field located below the text input field.

 

3. Typeout Text widget Style settings

 

After you have finished with the basic set up of your Typeout Text, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-left side of the screen.

Here you can pick an alignment for the element, set a heading tag, color and typography for the title (static text). The final option lets you adjust the color for the typeout text.

WPForms custom widget for Elementor lets you display a wide variety of fully flexible contact forms using the free Contact Form by WPForms plugin.

 

Using the WPForms widget

1. Adding the WPForms widget

 

Simply locate the widget by typing its name in the ‘Search Widget…’ field positioned in the upper left under the ‘ELEMENTS’ tab. After this, you should just drag-and-drop the widget to a desired section on the right side of the screen.

2. WPForms widget Content settings

 

Now we are going to take a look at the options available in the Content tab, or to be more specific, the settings that you can adjust in the General sub-tab.

 

General Sub-tab

Here you can select one of the previously created WPForms templates.

 

3. WPForms widget Style settings

 

Now we are going to take a look at the options available in the Style tab which contains nine sub-tabs for adjusting various stylistic features of your contact form. These are label style, input style, checkbox style, radio style, button style, spacing style, global style, error style, and response style. First off, let’s go through the settings that you can adjust in the Label Style sub-tab.

 

Label Style Sub-tab

 

In the first sub-tab you can adjust the contact form label typography and text color.

 

Input Style Sub-tab

 

Here you can make various stylistic choices related to input in both active and normal (idle) states. You can adjust typography, color, background color, pick one of 5 border styles, and input values for border radius.

 

Checkbox Style Sub-tab

 

In this sub-tab you’ll find options for adjusting the contact form checkbox; you can alter checkbox input size and space between checkboxes, and input values for checkbox input margins and checkbox holder margins.

 

Radio Style Sub-tab

 

Here you can make adjustments to the radio button in your contact form; you can adapt radio input size and set a size for the space between radio buttons, and input values for radio input margins and radio input holder margins.

 

Button Style Sub-tab

 

This is where you can adjust button typography, and set button color, background color and border color in both normal and active states, and input values for button border width and border radius.

 

Spacing Style

 

In this sub-tab you can adjust element spacings. You can values for form item space, adjust label space, input padding, set button margins and padding.

 

Global Style Sub-tab

 

Here you can pick an alignment style for the contact form.

 

Error Style Sub-tab

 

Here you can configure the error message style. You can pick error alignment, adjust typography, color, and input values for error margins.

 

Response Style Sub-tab

 

In this sub-tab you can adjust contact form response styles. You can configure typography, response text color, input values for padding and margins, pick one of 5 configurable border styles and adjust the response background.