Thank you for purchasing Ansh Elements For Elementor Page builder. This documentation consists of several parts and covers the entire process of installing and setting up Ansh Elements plugin from scratch. You will also find information on how to install and customize Ansh Elements Plugin.

What Is Ansh Elements Plugin?

Ansh Elements is a plugin that use extensive elements for Elementor live page builder, allowing to build different kinds of content and section with easiness and efficiency.

Using Ansh Elements Plugin, You can add various custom elements to build your website’s page layout, containing additional elements, which are not included in the Elementor page builder elements bundle.

Ansh Elements, extend Your content with 15+ diverse elements, devised especially to add Banner, Image compare, Pricing box, Countdown timer, Progress bar, Testimonial, Text Rotator(animation), Instagram and many more elements to build Your website’s pages.

This Section will help you how to install & Activate Ansh Element plugin into your website manually.

1) First, make sure you’ve installed and activated Elementor page builder before installed  to Ansh Elements Plugin. If you have trouble with installing Elementor Plugin feel free to read the detailed Elementor Plugin documentation.

2) Log in to WordPress Dashboard using your login credentials and navigate to Plugins tab in the left column. After that click on Add New menu inside plugins menu for upload “Ansh Elements” plugin zip file

3) Click on Upload Plugin button, which can be found at the top of Plugins page. Browse the path to Upload “Ansh Elements” Plugin zip file and click on Install Now button to start installation.

4) When Ansh Elements plugin is uploaded and installed in your WordPress site then you’ll need to activate it. Go to Plugins tab and find Ansh Elements plugin in the list of installed plugin lists. Click on Activate link under Ansh Elements to activate the plugin.

In this section you can learn about how to use Ansh Elements widgets and settings. Here you can find information about widget options and settings tips about content and style customization.

Banner Elements allows you to add custom banners to your website’s content. The widget has multiple style options, including animation options. It provides you with the means to customize banner label, banner button, Label position style and many more option to create unlimited banner design in your site.

Content Section

• Banner Image
  • Image: here, you can upload or choose from the media library any image to use as a banner.
  • Horizontal Text Position: Set a horizontal position for banner label.
  • Vertical Text Position: Set a Vertical position for banner label.
  • Hover Effect: Set Banner Hover effect.
  • Hover Border Effect: Enable/Disable Banner hover border effect.
• Button
  • Link: here, you can add the link, that will redirect the visitors to another webpage when they click on the banner button
  • Button Label: Set Button Label.
  • Button Style: Set Button Style. Link or flat
  • Button Size: Set button size. This option will appear for Flat button style.

Style Section

• Label 1, Label 2 and Label 3
  • Typography: turn the option on to view the typography settings.
  • Size: define the font size of the Banne label.
  • Family: here, you can set the font family for the banner label.
  • Weight: in this block you can select the suitable font weight.
  • Transform: here, you can choose from the dropdown menu, if you want the title to be shown in uppercase, lowercase, capitalize or normal way.
  • Style: in this block you can choose from the dropdown menu the style for the font. It can be normal, italic (the characters look similar to handwriting) and oblique (the characters are slightly inclined to the right).
  • Line Height: in this field you can set the height of the title line.
  • Letter Spacing: here, you can set the space between letters.
  • Label Color: here, you can define the color of the banner label using color picker tool.
  • Label Spacing: here, you can define the label spacing between two label.
• Button
  • Typography: here, you can set the Button typography with multiple option.
  • Button Text Color: here, you can define the color of the banner label using color
  • Background Color: here, you can define button background color.
  • Border Type: here, you can define the type of the border for button.
  • Border Radius: here, you can set the border radius for the button.
  • Padding: here, you can set the preferable custom padding for the button. Fill in the values for the top, bottom, right and left padding in pixels to apply your custom padding.
• Inner Content Box Settings
  • Background type: in this block you can choose, whether you want to use classic or gradient type for the button background. The customization options vary for each type. The settings are similar to the common background type settings for other widget.
  • Box shadow: enable this option if you want to access the shadow advanced settings for this widget, and need to apply shadow for it.
  • Margin: here, you can define the margins for the Inner Content Box Settings.
  • Padding: here, you can define the padding for the Inner Content Box Settings.
• Hover Border Settings
  • Border Style: here, you can define the type of the border on banner hover.
  • Border Width: here, you can define the type in the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Border Color: here, you can define the border color.

Before/After Image Slider allows you compare 2 images on the page which the user can slide to show one picture and at the same time hide the other one

Contact Tab

• Before text: here, you can set the before text to display on before image.
• Before Image: here, you can set the image from media library or upload new image.
• After Text: here, you can set the after text to display on after image.
• After Image: here, you can set the image from media library or upload new image.
• Image Size: here, you can set the image size, which size you want to display on front side.
• Icons: here, you can set the compare icon to move slider.
• Slider Style: here, you can set the slider position to slider Vertical or Horizontal.
• Before/After Text Position: here, you can set the before/after label position and it’s depend on slider style, which style you selected. If you set vertical then you can set the text position as left, center and right. If you set horizontal then you can set the text position as top, middle and bottom.

Style Tab

Icon Style

• Icon background Color: here, you can set the background color for Move handle.
• Icon Color: here, you can set the color of the icon.
• Border Radius: here, you can set the radius for the point border to make the border angles more round.

Before/After Text Style

• Color: here, you can set the text color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Text Shadow: here, you can set advanced shadow options for the element or section, and need to apply shadow for it. Below send the Shadow Options.
  • Color: here, you can set the color for the the shadow (use color picker tool to do it),
  • Blur: here, you can set the blur settings for the shadow.
  • Horizontal: here, you can set the shadow horizontally (from right to left).
  • Vertical: here, herecan set the shadow vertically (from top to bottom).
• Background Color: here, you can set the text background color for the element or section using color picker tool.
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Contact Tab

• Content: here, you can add the blockquote content in element text editor.
• Blockquote By: here, you can add the blockquote author name.
• Quote Position: here, you can set the quote icon position.
• Quote Icon: here, you can set the quote icon.
• Alignment: here, you can set the preferable content alignment. The text can be placed to the Left, Right, or Center.

Style Tab

Content

• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Color: here, you can set the color of the element color picker tool.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Quote Icon

• Color: here, you can set the color of the element color picker tool.
• Font Size: here, you can set the font size for the element.

Block Quote Section

• Background Type: here, you can choose to use classic or gradient type for the element or section. The customization options vary for each type.
  Classic Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Image: here, you can choose the image to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
• Gradient Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Location: here, you can set the proportion for the first color in the gradient background.
  • Second Color: here, you can set the second color to use in the gradient background.
  • Location: here, you can set the proportion for the second color in the gradient background.
  • Type: here, you can set the gradient typee, if you want to use linear or radial type of the gradient.
  • Angle: here, you can set the angle for the gradient (in degrees).
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Blog Posts element allow you to create attractive post slider and grid layouts with sort posts by Title, IDs, date of publishing and random. you can display your posts better way to user and it’s look like beauty of the web page.

Content Tab

Content Section

• Categories: here, you can set the categories to display selected categories post in this section.
• Number of posts: here, you can set the number of posts to display in this section.
• Title HTML tag: here, you can set the post type html tag such as H1 to H6.
• Order By: here, you can set the order by post such as Date, Title, ID and Random.
• Sort Order: here, you can set the sort order to display post Ascending order wise or descending order wise.
• Image Size: here, you can set the image size which post size image want to display.
• Excerpt Length: here, you can set the excerpt length to display limited post content.
• Read More Text: here, you can set the read more text.
• Show Date Meta: here, you can enable/disable to post data field.
• Show Author Meta: here, you can enable/disable to post author field.
• Show Category Meta: here, you can enable/disable to post category field.
• Show Tag Meta: here, you can enable/disable to post tag field.
• Show Comment Count Meta: here, you can enable/disable to post comment count field.
• Alignment: here, you can set the alignment of post title, post meta and post content.

Blog Post Layout

• Display Type: here, you can set blog post display as grid or slider.
• Grid Column: here, you can set the grid column if you set display type as grid.
• Slider Navigation: here, you can set Slider navigation as pagination or Prev/Next button.

Image Section

• Hover Effect: here, you can set the hover effect on the image.
• Hover Border Effect: here, you can set the hover border effect on the image.

Style Tab

Post Title & Read More Link & Post Meta

• Color: here, you can set the post title color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Hover Color: here, you can set the post title hover color of the element color picker tool.

Post Content

• Color: here, you can set the post content color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Background Color: here, you can set the Post content section background color of the element color picker tool.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Hover Border Settings

• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.

Business hours Element allows you to add your office hours on your website with great ease. There are many customization options available with this element, and you can design it almost anyway you needs.

Contact Tab

• Style: here, you can set business hours style such as list, grid and time line.
• Add Item: click on the button to add new business day and time.

Style Tab

Business Day & Time

• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Color: here, you can set the color of the element color picker tool.

Item

• Background Type: here, you can choose to use classic or gradient type for the element or section. The customization options vary for each type.
  Classic Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Image: here, you can choose the image to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
• Gradient Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Location: here, you can set the proportion for the first color in the gradient background.
  • Second Color: here, you can set the second color to use in the gradient background.
  • Location: here, you can set the proportion for the second color in the gradient background.
  • Type: here, you can set the gradient typee, if you want to use linear or radial type of the gradient.
  • Angle: here, you can set the angle for the gradient (in degrees).
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Shadow: here, you can set advanced shadow options for the element or section, and need to apply shadow for it.
  • Color: here, you can set the color for the the shadow.
  • Horizontal: here, you can set the shadow horizontally (from right to left).
  • Vertical: here, you can set the shadow vertically (from top to bottom).
  • Blur: in this option, you can set the blur settings for the shadow.
  • Spread: here, you can set how large the shadow will be display.
  • Position: here, you set the shadow position such as outline or inset.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Client’s Logo element allow you to showcase logos, brands and companies logo and images on your website. You can also add companies links to theme and customize as per your needs. There are multiple customization options available to design elements as per your needs.

Content Tab

• Add Item: click on the button to add new client logo with Label, Link and Client logo image.
  • Label: here, you can set client label.
  • Link: here, you can set the client link to redirect client website.
  • Client Image: here, you can set the image from media library or upload new image to display to your client logo.
• Display Type: here, you can set blog post display as grid or slider.
• Grid Column: here, you can set the grid column if you set display type as grid.
• Slider Navigation: here, you can set Slider navigation as pagination or Prev/Next button.
• Hover Effect: here, you can set the image hover effect such as Zoom-in, Zoom-out, Rotate, Slide, Gray Scale, Sepia, Flashing, Shine.

Style  Tab

• Columns Gap: here, you can set the element columns gap between two images.
• Rows Gap: here, you can set the element rows gap between two rows.
• Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Background Color: here, you can set background color for the element or section using color picker tool.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Countdown Timer element allow you to embed a time with a countdown to your website. This element has multiple options to customize countdown time element as per your needs.

Content Tab

CountDown

• Expire Countdown date: here, you have to set the date to finish the countdown according to your time zone.
• Show Weeks: here, you can hide/show weeks on countdown timer.
• Days Label: here, you can set standard days label to your custom name.
• Hours Label: here, you can set standard hours label to your custom name.
• Minutes Label: here, you can set standard minutes label to your custom name.
• Seconds Label: here, you can set standard seconds label to your custom name.
• Display Countdown Separator: here, you can hide/show  separator to divide days, hours, minutes and seconds.
• View: here, you can set the countdown timer view such as stacked and framed.
• Shape: here, you can set the countdown timer shape such as circle and square.

Expire Countdown Timer

• Expire Type: here, you can choose to display expire message or redirect page.
• Expire Title: here, you can set the expire title which is display after expire timer.
• Expire Message: here, you can set the expire message which is display after expire timer.

 

Style Tab

Countdown Box

• Width: here, you can set the countdown timer box width in PX and %.
• Background Type: here, you can choose to use classic or gradient type for the element or section. The customization options vary for each type.
  Classic Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Image: here, you can choose the image to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
• Gradient Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Location: here, you can set the proportion for the first color in the gradient background.
  • Second Color: here, you can set the second color to use in the gradient background.
  • Location: here, you can set the proportion for the second color in the gradient background.
  • Type: here, you can set the gradient typee, if you want to use linear or radial type of the gradient.
  • Angle: here, you can set the angle for the gradient (in degrees).
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Countdown Timer

• Color: here, you can set the color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Text Shadow: here, you can set advanced shadow options for the element or section, and need to apply shadow for it. Below send the Shadow Options.
  • Color: here, you can set the color for the the shadow (use color picker tool to do it),
  • Blur: here, you can set the blur settings for the shadow.
  • Horizontal: here, you can set the shadow horizontally (from right to left).
  • Vertical: here, herecan set the shadow vertically (from top to bottom).
• Background Type: here, you can choose to use classic or gradient type for the element or section. The customization options vary for each type.
  Classic Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Image: here, you can choose the image to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
• Gradient Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Location: here, you can set the proportion for the first color in the gradient background.
  • Second Color: here, you can set the second color to use in the gradient background.
  • Location: here, you can set the proportion for the second color in the gradient background.
  • Type: here, you can set the gradient typee, if you want to use linear or radial type of the gradient.
  • Angle: here, you can set the angle for the gradient (in degrees).
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Separator Settings

• Separator Color: here, you can set the color of the element color picker tool.
• Separator Space: here, you can set the space between two countdown timer box.

Counter element allow you to show a number with emphasis on how sizeable it is. This element is most efficiently way to display total number of happy customers, number of completed project, number of sales, number of visitors and any numeric figure that needed to be exhibited.

Content Tab

Counter

• Title: here, you can set counter title
• Starting Number: here, you can set counter start number
• Ending Number: here, you can set counter end number
• Number Prefix: here, you can set prefix before counter number.
• Number Postfix: here, you can set postfix after counter number.
• Animation Duration: here, you can set the counter animation duration.
• Thousand Separator: here, you can enable/disable thousand separator option.

Icon Settings

• Display Icon: here, you can enable/display icon to display.
• Icon: here, you can set icon.
• Icon Alignment: here, you can set icon alignment to where you want to display icon.
• View: here, you can set the icon view. How you want to display.

Style Tab

Number & Title

• Color: here, you can set the color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Text Shadow: here, you can set advanced shadow options for the element or section, and need to apply shadow for it. Below send the Shadow Options.
  • Color: here, you can set the color for the the shadow (use color picker tool to do it),
  • Blur: here, you can set the blur settings for the shadow.
  • Horizontal: here, you can set the shadow horizontally (from right to left).
  • Vertical: here, herecan set the shadow vertically (from top to bottom).
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Hotspot element allow you to display interactive hotspot content type to place an overlay of hotspot on images and graphics. The user presses on the hotspot icon to display reveal an associated text. There are many customization options available in the element that allow you to design the hotspot as per your needs.

Contact Tab

• Hotspot Image: here, you can upload or choose from the media library any image to use as a main hotspot image.
• Open Type: here, you can choose open hotspot content or section as on hover or click.
• Icon Library: here, you can choose icon library which icon you want to display.
• Icon: here, you can choose icon.
• Icon View: here, you can choose view .
• Hotspot Settings: Here, you can add multi pal hotspost content or section to click on “Add Item” button.
  • Position: here, you can set the hotspost icon position  using drag & drop where you want to set the pointer on image.
  • Title: here, you can add hotspot section title.
  • Content: here, you can add hotspot section content.
  • Image: here, you can upload or choose from the media library any image to display on hotspot section.
  • Link: here, you can set the custom link to redirect or open page.
  • Direction: here, you can choose the where you open the hotspot content or section such as up, right, bottom and left side.

Style Tab

You can set any kind of design using style section such as you can set icon color, size, hover color, hover animation, title color, typography text shadow, margin, padding and also you can design tool tip box background type color, image and background gradient, border, box shadow, margin, padding and etc to design as per your needs.

Instagram element allow you to showcase Instagram photos on your website in an attractive way, such as number of liked and comments on image overlay. There are many customization options available to display Instagram Photos on webpage as your needs.

Contact Tab

Instagram

• Username: here, you can set Instagram username which Instagram image want to display.
• Number of Items: here, you can set to display number of Instagram image.
• Image Size: here, you can set display image size such as Thumbnail, Medium and Large.
• Show Likes: here, you can enable/disable to display likes icon on Instagram image.
• Show Comment: here, you can enable/disable to display comment icon on Instagram image.
• Show button: here, you can enable/disable Instagram button.
• Button Label: here, you can set Instagram button label.
• Alignment: here, you can set button alignment where you want to display such as left, center and right.

Instagram Style

• Display Type: here, you can set Instagram images display as grid or slider.
• Grid Column: here, you can set the grid column if you set display type as grid.
• Slider Navigation: here, you can set Slider navigation as pagination or Prev/Next button.

Style Tab

Image Hover

• Overlay Color: here, you can set the overlay color of the element color picker tool.
• Color: here, you can set the color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.

Button

• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Text Color: here, you can set the button text color of the element color picker tool.
• Background Color: here, you can set the button background color of the element color picker tool.
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Newsletter element allow you to create a Subscription form that will work with Mail Chimp list. This element is allowing to change the Form layout with different style, button shape, background color, border and many more customization options available to set Subscription form as per your needs.

Content Tab

Content

• Title: here, you can add newsletter section title.
• Description: here, you can add newsletter section description.
• Alignment: here, you can set newsletter title and description display position.
• Mailchimp List Id: here, you can add mail chimp list id.
• Mailchimp API Key: here, you can add mail chimp API key.

Layout

• Layout: here, you can choose newsletter layout option to how you want to display newsletter section.
• Button Style: here, you an choose newsletter button style. How you want to display button.
• Button label: here, you can set the button label.
• Icon Position: here, you can choose newsletter icon position to display before or after button label.

Style Tab

Title and Description

• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Color: here, you can set the color of the element color picker tool.

Button

• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Text Color: here, you can set the button text color of the element color picker tool.
• Background Color: here, you can set the button background color of the element color picker tool.
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.

Pricing Box element will you to creating attractive and impressive pricing box to display services to your users. Pricing box can be used with multiple price plans for users can a compare and give option to choose them. This element has multiple options, customization settings to easy way to use as per your needs.

Content Tab

Content

• Style: here, you can choose pricing box style.
• Show Icon: here, you can hide/show icon in the element.
• Icon: here, you can choose the suitable icon to use in the element. Select one of the available icons from the drop down list.
• Icon View: here, you can choose the suitable icon view to use in the element.
• Title: here you, can set the pricing box element title.
• Title Heading Tag: here, you can choose the title HTML heading tag H1 to H6.
• Sub Title: here, you can set the pricing box element sub title.
• Currency Symbol: here, you can set the currency symbol from the drop down list.
• Price: here, you need to define the price value to be shown.
• Duration: here, you have to define the duration for the price (usually it indicates the frequency of payment, e.g., “per month”, “per year”, etc.).

Feature Lists

• Add Item: here, you can add a new feature to be displayed in the pricing box.
• List Text: here, you can add feature text to de display in the pricing box.
• List Icon: here, you can set the list icon to be display before the feature list in the pricing box.

Button

• Button Label: here, you can add your button text. (e.g., “purchase now”, “buy”, etc.)
• Button Link Type: here, you can choose button link type to set third party link or existing website link.

Badge

• Show Badge: here, you can enable/disable badge.
• Badge label: here, you can add badge text.(e.g. “Best Price”, “Premium”, Best Purchase, etc.)
• Style: here, you can choose badge style as per your needs.
• Position: here, you can choose to display badge position. As left or right.

Style Tab

You can set any kind of design using style section such as you can set icon color, size, hover color, hover animation, title color, typography text shadow, margin, padding, price color, typography, price duration color, typography and also you can design pricing box background type color, image and background gradient, border, box shadow, margin, padding and etc to design as per your needs.

 

 

Circle Progress Bar element allow you to give the best option for create the stylish circle progress bar in the attractive, awesome and eye-catching style. There are many customization options available in the element that allow you to design the as per your needs.

Content Tab

• Title: here, you can set the circle progress bar element title.
• Title HTML Tag: here, you can choose the title HTML heading tag H1 to H6.
• Sub Title: here, you can set the circle progress bar  element sub title.
• Sub Title HTML Tag: here, you can choose the sub title HTML heading tag H1 to H6, DIV, P, SPAN and STRONG.
• Percentage: here, you can set the percents value  to apply for the circle progress bar.
• Circle Size: here, you can set the circle size.
• Progress bar size: here, you can set the progress bar size.
• Alignment: here, you can set the element to the left, to the right, or center it.

 

Style Tab

Circle Bar

• Background Type: here, you can choose to use classic or gradient type for the element or section. The customization options vary for each type.
  Classic Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Image: here, you can choose the image to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
• Gradient Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Location: here, you can set the proportion for the first color in the gradient background.
  • Second Color: here, you can set the second color to use in the gradient background.
  • Location: here, you can set the proportion for the second color in the gradient background.
  • Type: here, you can set the gradient typee, if you want to use linear or radial type of the gradient.
  • Angle: here, you can set the angle for the gradient (in degrees).
• Circle Unfill Background Color: here, you can set the unfill circle background color.
• Circle Inside Background Color: here, you can set the background color inside circle.

Title, Sub Title and Percentage

• Color: here, you can set the color of the element color picker tool.
• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.

 

Progress Bar element allow you to give the best option for create the stylish horizontal progress bar in the attractive, awesome and eye-catching style. There are many customization options available in the element that allow you to design the as per your needs.

Content Tab

• Progress Bar Size: here, you can set the progress bar size from drop down menu.
• Progress Bar Style: here, you can set the progress bar style from drop down menu.
• Label Position: here, you can set the progress bar position from drop down menu.
• Add Item: here, you can add a new progress bar element to be displayed.
• Percentage: here, you can set the percents value  to apply for the progress bar.
• Label: here, you can set the progress bar label.
• Fill Color: here, you can set the progress bar fill color.

Style Tab

• Color: here, you can set the progress bar fill common color,
• Background color: here, you can set the unfill color for the progress bar.
• label Color: here, you can set the progress bar label color.
• Typography: here, You can set the progress bar label typography settings

QR code Element (short for “quick response” code) is a type of barcode that contains a matrix of dots. It can be scanned using a QR scanner or a smartphone with built-in camera. For example, scanning a QR code with your phone might open a URL in your phone’s web browser.

Content Settings

• Link Type: here, you can choose link type to use external link or existing website link.
• Light Color: here, you can choose QR Code light color.
• QR Code Alignment: here, you can set QR Code Alignment as left, center and right.
• Height: here, you can set QR Code height to be displayed .

Text Rotator Element was specially to deliver in the form of attractively animated text. With the help of this element you can add animated rotate words and phrases to your website’s pages and customize them as per your needs.

Content Tab

• Prefix Text: here, you can add the text that will go before rotator text. You can also leave this field empty when you want rotator text to show up at the beginning of the line.
• Add Item: click on the button to add rotator text. In the Text field type in the text you want to rotate. You can add many items of rotator text. In this case item 1 will be replaced with item 2 in loops.
• Postfix: here, your can add the text that will go after rotator text. You can also leave the field empty when you don’t want to continue animated text with the plain text.
• Animation Type: here, you can choose animation type as Text Typer or Text Animation.
• Animation Style: This option will appear after choose Text Animation type. This option provide the larger variety of Animation.
• Rotator tag: here, you can set the html tag such as H1 to H6, P, DIV, Span and etc.
• Alignment: here, you can set the preferable content alignment. The text can be placed to the Left, Right, or Center.

Style Tab

• Typography: here, You can set the typography settings. Below send the Typography Options
  • Family: here, you can set the font family for the element.
  • Size: here, you can set the font size for the element.
  • Weight: here, you can set the font weight for the element.
  • Transform: here, you can choose the Font Transform from the dropdown menu Such as uppercase, lowercase, capitalize or normal way.
  • Style: here, you can choose the style of the font from the dropdown menu Such as normal, italic and oblique.
  • Decoration: here, you can choose the text decoration from the dropdown menu Such as Underline, Over-line, Line Through and None.
  • Line Height: here, you can set the height of the text line.
  • Letter Spacing: here, you can set the space between letters.
• Color: here, you can set the color of the element color picker tool.
• Text Shadow: here, you can set advanced shadow options for the element or section, and need to apply shadow for it. Below send the Shadow Options.
  • Color: here, you can set the color for the the shadow (use color picker tool to do it),
  • Blur: here, you can set the blur settings for the shadow.
  • Horizontal: here, you can set the shadow horizontally (from right to left).
  • Vertical: here, herecan set the shadow vertically (from top to bottom).
• Background Type: here, you can choose to use classic or gradient type for the element or section. The customization options vary for each type.
  Classic Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Image: here, you can choose the image to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.
• Gradient Background Type
  • Color: here, you can set background color for the element or section using color picker tool.
  • Location: here, you can set the proportion for the first color in the gradient background.
  • Second Color: here, you can set the second color to use in the gradient background.
  • Location: here, you can set the proportion for the second color in the gradient background.
  • Type: here, you can set the gradient typee, if you want to use linear or radial type of the gradient.
  • Angle: here, you can set the angle for the gradient (in degrees).
• Border Type: here, you can set the type of the border as per you needs such as Solid, Double, Dotted, Dashed and Groove.
  • Width: here, you can set the border width in pixels in order to set the width for the box top, bottom, left and right borders.
  • Color: here, you can set the color of the border using Color picker tool.
  • Border Radius: here, you can set the radius for the point border to make the border angles more round.
• Margin: here, you can define the margins for the element settings.
• Padding: here, you can define the padding for the element settings.

Note: Above all style setting are same for Suffix and Postfix Text.

Testimonials element allow you to display clients’ positive feedback’s for your site or your work. you can easy to style the testimonials on your site and add the beautiful testimonials slider on your web page in multi pal clicks.

Content Tab

• Style: here, you can choose testimonial style which you want to display from drop down menu.
• Add Items: here, you can add a new client’s feedback to be displayed.
• Author Name: here, you can add client’s name.
• Author Designation: here, you can add client’s designation.
• Author Text: here, you can add client’s feedback text.
• Author Image: here, you can upload author image to be displayed.
• Author Social Icon: here, you can set the client social website links to be displayed.
• Author Box Position: here, you can choose to display client box position such as Left, Center and right.
• Add Quote in Testimonial Content?: here, you can set to display quote icon in testimonial content section.
• Slider Navigation: here, you can set the slider navigation as pagination or prev/next.

Style Tab

You can set any kind of design using style section such as you can set content text color, typography, background color, set image size, border type, border radius, Client name color, typography and etc to design as per your needs.

In this setting, you can access advanced style options for the element widgets, for define widget margins and padding, entrance animation, set the background color, images, set background gradient setting, Border and etc for the whole elements.

Advanced Settings

Margin: in this option, you can set the values (in pixels and percentage) to define the margins for the widget. Fill in the values for the top, bottom, right and left margin in px and % to apply your custom margin.

 Padding: in this option, you can set the values(in px, em and % ) to define the padding for the widget. Fill in the values for the top, bottom, right and left padding in px,em and % to apply your custom padding.

Z-index: in this option, you can set the value of the z-index to use it for the widget.

Entrance Animation: in this option, you can choose animation effect styles from the dropdown menu for the widget to appear on the page.

Animation Duration: in this option, you can define the time during which the widget will appear on the page. It can be normal, slow or fast. Choose the one you need from the dropdown menu.

Animation Delay (ms): input the value (in ms) for the animation delay.

CSS ID: here you can define the CSS ID for the widget.

CSS Classes: here you can define the CSS class for the widget.

 

Background Settings

Here you can switch from customizing Normal to Hover background style settings. Just click on the button Hover to proceed to customizing hover elements.

Background Type: in this block, you can choose, whether you want to use classic or gradient type for the widget background. The customization options vary for each type.

Color: here you can set background color for the background using color picker tool.

Image: here you can choose the image you want to use as a background. Select the image from the media library or upload it to define it as a background in this block. When the image is uploaded, you’ll be able to define its position, alignment, turn on repeat and set the necessary size.

Gradient Background Type

Color: here you can set background color for the widget using color picker tool.

Location: here you can define the proportion for the first color in the gradient background.

Second Color: here you can set the second color to use in the gradient background.

Location: here you can define the proportion for the second color in the gradient background.

Type: define, if you want to use linear or radial type of the gradient.

Angle: in this block you can set the angle for the gradient (in degrees).

Border Settings

Here you can switch from customizing Normal to Hover border style settings. Just click on the button Hover to proceed to customizing hover elements.

Border Type: here you can select the type of the border from the dropdown menu. Here is the list of available border types:  none, solid, doubled, dotted, dashed.

Border Radius: here you can select the radius for the applied border (in pixels).

Box Shadow: enable this option if you want to access the shadow advanced settings for this widget, and need to apply shadow for it.

Shadow Settings:

• Color: here you can set the color for the the shadow (use color picker tool to do it);
• Blur: in this block you can define the blur settings for the shadow;
• Spread: here you can set how large the shadow will be;
• Horizontal: here you can move the shadow horizontally (from right to left);
• Vertical: here you can move the shadow vertically (from top to bottom);
• Position: here you need to choose, whether you want the shadow to outline the widget, or to be inset.

Responsive Settings

Here you can Show/Hide elements for mobile, tablet or desktop. this settings will only take effect once you are on the preview or live page, and not while you’re in editing mode in Elementor.