Easy Elementor Addons Documentation
Easy Elementor Addons is an elementor based plugin that helps enhance your website’s appearance with a variety of widgets. You can further customize each widget to suit your needs.
If you have any questions about how the widget works, feel free to contact us, and we’ll be happy to assist you.
To download the addon easily, please follow this link.
Accordion
How to Style and Configure Accordion Widget
In the following article, we will guide you through configuring the settings and provide a brief explanation of each section. The Accordion settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In the Content section, you can choose to add the accordion and give your appropriate name and description.
Settings
In the Settings section, choose to make changes on the icon open/close and the position as well. Further in the Style tab, you can make changes to the typography color, width of the accordion as well.
Style
Accordion
This section allows you to make changes in the background, box shadow, border type as well as border width, border color of the accordion.
Header
In this section make changes to the header typography, padding, radius, background color, Title color, Icon Background Color, Icon Color and more.
Content
The content description can also be configured in terms of typography, background color, padding, and radius.
Click on the demo button below to view more styles and get more information on the Accordion Widget.
Advanced Button
How to Style and Configure Advanced Button Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Advanced Button settings include two tabs, Content and Style, where you can customize various options accordingly.
Let’s see what other changes can be made.
Content
Button
Choose appropriate button size, add link, and also choose the animation when hovered on the button.
Icon
Choose the button icon with the appropriate information. Also choose the positioning and icon spacing as well.
Style
In the style section, you can change the typography and button positions. Moreover, tweak with the button, padding, border radius, text color, background color, border type, and much more.
Click on the demo button below to view more styles and get more information on the Advanced Button Widget.
Advanced Heading
How to Style and Configure Advanced Heading Widget
In the following article, we will guide you through configuring the settings, providing a brief explanation of each section. The Advanced Heading settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Heading
In this section, you can customize the text and formatting of your advanced heading. You can set the content for the main heading and subheading. Additionally, you can choose the appropriate heading format (such as H1, H2, or H3) for each of these elements.
Advanced Heading
In this section, you can select an advanced heading that will appear in the background of your main heading and subheading. Adjust its alignment and fine-tune its position along the X and Y axes to place it exactly where you want.
Style
Sub Heading
In the sub heading style option, choose the typography, color of the sub heading can be changed. Furthermore, add text shadows to make it appear more appealing.
Main Heading
In the main heading style option, choose the main headings margin, text shadow, color, typography style.
Advanced Heading
In the advanced heading style option, choose the color of your choice. Furthermore, choose the opacity of the text that appears behind.
Click on the demo button below to view more styles and get more information on the Advanced Heading Widget.
Advanced Icon Box
How to Style and Configure Advanced Icon Box Widget
In the following article, we will guide you through configuring the settings, providing a brief explanation of each section. The Advanced Icon Box settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Icon Box
In the icon box section choose the icon type and the preferred icon that matches your content. Write a title as well as a description.
Read More
Add a read more to which you can add links to know more about the services or about the related topic. You can also change the text according to the title. Moreover, add icon to make it more presentable.
Badge
A separate badge can also be added somewhere to let users know that it is a new feature or update or any other type of additional information. Opt to change the badge text, choose badge position as well as horizontal and vertical offset.
Additional Options
In the additional settings choose the HTML tag of title.
Style
Icon/Image
In this section, choose to make changes to icon box or image if you choose to add an image. Make changes in the spacing, icon size, icon box padding and set a preferred border type. The icon background color can be chosen while normal and when it is hovered over.
Title
In the title, make changes to the typography spacing and specifically choose the title color while normal and when it is hovered over.
Description
In the description, make changes in the typography, spacing and description color while normal and when it is hovered on.
Title Seperator
The title separator, choose the separator style, color, height, margin as well as bottom spacing.
Read More
The read more button can be further be customized, choose the preferred typography, padding border radius. Choose a text color, background type, color border type as well as box shadow. You can further customize the button as well as text color when it is hoverd over.
Badge
In the badge section, choose the typography, text color, background type as well as padding, border radius, border type as well as box shadow.
Additional
This additional feature allows you to choose the content padding to make it look more appealing.
Click on the demo button below to view more styles and get more information on the Advanced Icon Box Widget.
View Advanced Icon Button Demo
Advanced Maps
How to Style and Configure Advanced Maps Widget
In the following article, we will guide you through configuring the settings and provide a brief explanation of each section. The Advanced Maps settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Markers
In this section, choose to add markers to the map.
General Settings
In the general settings, configure the height, zoom level, and options for scrollwheel zoom, zoom controls, fullscreen controls, street view controls, and map time controls. Also, ensure the map is set to be draggable or not as needed.
Click on the demo button below to view more styles and get more information on the Advanced Maps Widget.
Animated Heading
How to Style and Configure Animated Heading Widget
In the following article, we will guide you through configuring the settings, providing a brief explanation of each section. The Animated Heading settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Header Contents
In the header content section, choose the pre-heading, heading, and post-heading text. Choose to add links or alignment. The text layout can be chosen either in animation or typed as well.
Animation
In the animation section, choose from a variety of animation styles and their duration as well.
Style
In the style section, choose the pre/post text color, animation text color, and Typography of your choice.
Click on the demo button below to view more styles and get more information on the Animated Heading Widget.
Business Hour
How to Style and Configure the Business Hour Widget
In the following article, we will guide you through configuring the settings, providing a brief explanation of each section. The Business Hour settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Header Content
In the header content section, choose the header content as well as its alignment. You can also opt to leave the header section empty.
Business Hour
Here you can make changes to the opening and closing hours and on which days your office is closed all day.
Footer Contents
The footer section allows you to additionally add additional content. Moreover, choose the content alignment.
Style
Header Section
In the header section, choose the header background color as well as typography. This helps to enhance the overall appearance of the whole box.
Footer Section
In the footer section, you can also choose the footer background, color, and typography. You can choose to match it with the header or opt to try a different color as well.
Business Hour
In the business hours section, select a clear and legible typography with a light background color for regular days and a distinct color scheme for the current day to highlight it. Ensure the text color contrasts well for readability. Align the days appropriately based on the layout, whether left, center, or right. Maintain consistent spacing between days for a clean and organized appearance.
Divider
The divider clearly distinguishes each day from the next, and its style can be customized to match the design. Adjust its color for better contrast and modify the margin to create balanced spacing and a visually appealing layout.
Striped Rows
In the striped row section, you can assign alternating background colors to each day, creating a pattern where colors repeat consistently for a structured and visually appealing look.
Click on the demo button below to view more styles and get more information on the Business Hour Widget.
Circular Progress Bar
How to Style and Configure Circular Progress Bar Widget
In the following article, we will guide you through configuring the settings, providing a brief explanation of each section. The Circular Progress Bar settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In the content section of the circular progress, write a suitable title, choose the percentage, circle size, and circle bar width as well.
Style
Title
In the Title section, select a color for the chosen title, and additionally, adjust the typography and margin to enhance its appearance and readability.
Percent
In the percent section, you can customize the color of the percentage value and refine the typography for better clarity and visual appeal.
Progress Bar
Previously you chose the width of the progress bar; in this section, choose the background color and progress indication color as well.
Click on the demo button below to view more styles and get more information on the Circular Progress Bar Widget.
View Circular Progress Bar Demo
Countdown
How to Style and Configure Countdown Widget
In the following article, we will guide you through configuring the settings, providing a brief explanation of each section. The Countdown settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Timer
In this section, choose when the countdown will start and end and at which time. Another option is that upon expiry, you can choose a message or a link direction.
Content
In the content section, select the countdown layout as either a row or a column. Decide whether to display or hide days, hours, minutes, seconds, and their respective labels.
Style
Countdown Styles
In the countdown style, select the background type and color. Opt to include an image and adjust content spacing for better presentation. To enhance visual appeal, customize the border padding and radius.
Countdown Digits
In this section, choose to change the color of the countdown digits.
Countdown Label
In this section choose to make changes to the countdown labels color, typography as well as label spacing.
Seperator
The separator helps to separate the contents if they are placed close together. The separator can further be customized in terms of size, position, and color
Days
In this section, select the background type, digit color, line color, and border color to enhance the appearance of the day’s countdown.
Hours
In this section, select the background type, digit color, line color, and border color to enhance the appearance of the hour’s countdown.
Minute
In this section, select the background type, digit color, line color, and border color to enhance the appearance of the minutes countdown.
Seconds
In this section, select the background type, digit color, line color, and border color to enhance the appearance of the second countdown.
Click on the demo button below to view more styles and get more information on the Countdown Bar Widget.
Counter
How to Style and Configure Counter Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Counter settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Counter
In the counter section, select the icon, title, starting value, and current value of the counter. Additionally, you can opt to include pre and post text, along with customizing their spacing.
Additional Settings
In the additional settings, choose the border counter style from a wide range of counter styles.
Style
Box Styles
In this section, you can select the background type—either a solid color or a gradient. Additionally, you have the unique option of choosing a background image. You can also customize the border by selecting its color, adjusting the width, adding box shadows, and modifying the border radius to create a distinct shape.
Icon
In this section, choose the icon color and the icon size.
Number Count
You can also customize the color of the numbers to match your design. If you’ve added pre or post text, you can further personalize its color. Additionally, you have the option to adjust typography settings, including font style, size, and weight, to enhance the overall appearance.
Counter Title
The counter title can also be customized in terms of color and typography. You can match its color with the number or icon for a cohesive look or opt for a distinct typography style and color to make it stand out.
Click on the demo button below to view more styles and get more information on the Counter Widget.
Drop Bar
How to Style and Configure the Drop Bar Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Drop Bar settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In the content section choose to add the content when customers hover on to the drop bar button. You can make additional changes lilke choosing the heading or make the text bold, italic or underlined.
Heading
In the heading section, select the title text and pair it with a relevant icon. You can position the icon either before or after the text and fine-tune the spacing between them for a balanced layout.
Dropbar
The drop bar settings offer multiple positioning options. You can explore different placements to find the one that suits your layout best. Click this demo link to preview how the drop bar appears before making your final selection. Select how the drop bar is activated either by hovering over it or by clicking the button. Moreover, you can choose the width and dropbar offset as well.
Animation
Enhance the drop bar’s visual appeal by selecting from a variety of animations when it is hovered over or clicked. Additionally, customize the animation duration and adjust the show/hide delay for a smooth transition.
Style
Button
In the button section, customize the text color and background color to suit your design. Additionally, enhance its appearance by adjusting the border radius, padding, and box shadows. Fine-tune the typography settings to achieve the perfect look and feel.
Content
Just like the button’s text and color, you can also customize the drop bar’s text and background color. You can make it stand out from the button for a striking contrast or choose neutral tones for a more cohesive look.
Click on the demo button below to view more styles and get more information on the Drop Bar Widget.
Dual Button
How to Style and Configure Dual Button Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Dual Button settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Button
In the button section of the dual button, choose the layout of the button, either horizontal or vertical. Align your button either left, right, or central. Let’s see what changes can be made on each button section.
Primary Button
Select your preferred text or add links for users to access when they click the button. To enhance its visual appeal, choose from a variety of icons and position them either before or after the content.
Secondary Button
The secondary button differs from the primary button, allowing you to select a unique text for it. Just like the primary button, you can also add links and choose an icon, positioning it as needed for a cohesive design.
Separator
The primary button can be separated either by text or icon. Choose your preferred separator option and either add a text or an icon.
Style
General
In the general section, choose the button hover animation, typography, and box shadow.
Primary Button
In this section, you can customize the primary button by selecting the text color, background color, border radius, and padding. Likewise, you can define the text and background color for when the button is hovered to enhance its interactive effect.
Secondary Button
In this section, you can customize the secondary button by selecting the text color, background color, border radius, and padding. Likewise, you can define the text and background color for when the button is hovered to enhance its interactive effect.
Separator
In the separator, choose the typography colors as well as the width, border radius, and box shadows.
Click on the demo button below to view more styles and get more information on the Dual Button Widget.
Dual Heading
How to Style and Configure Dual Heading Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Dual Heading settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In this section, you can choose to change the First and Second heading text. You can also choose to add links to your preferred heading. Choose the alignment and spacing to make the heading look more appealing.
Style
First Part
In this section, you can choose to change the typography, heading style, text color, and even select the background type. Choose the border-radius and padding and text shadows to make the dual heading more appealing.
Second Part
Feel free to adjust the typography and style of the second part of the heading as well. You can choose the border type or leave it as is. Modify the text and box shadow as needed to achieve your desired look.
Click on the demo button below to view more styles and get more information on the Dual Heading Widget.
Feature List
How to Style and Configure Feature List Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section.
The Feature List settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
In the content section of the feature list, feel free to modify each feature title and select a suitable icon. You can also add an appropriate subheading if needed to enhance clarity and presentation.
Additional Settings
In the additional settings choose the HTML tag, icon style, icon positioning and spacing as well.
Style
Feature Lists
In the feature list settings tweak the background color, border type, box shadow as well as border radius and padding.
Icon
In this section change the icon color, size, padding, as well as radius of the icon.
Title
The title color as well as typography can be changed and the content can be made much better in this section. If you choose to add a sub title you can make the changes similarly.
Description
The description part also has a special appearance on the feature list. Choose to change typography and color of the description part as well.
Click on the demo button below to view more styles and get more information on the Feature List Widget.
Flip Box
How to Style and Configure Flip Box Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Flip Box settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Front
In this section, choose the icon title and description of the front part of the flip box. Moreover, choose the heading type to make the text look clearer.
Back
Similarly, as with the front section of the flip box, select the content, title, and button text. Choose to add the link on the button which will let users to know more information about a specific topic.
Settings
In this section, choose the appropriate height, and border radius. As well as choose the flip effect and flip direction as well.
Style
Front
In the style section, choose to make the changes on the front side of the flip box. Change the background type and choose the appropriate color. You can always opt to add images to your flip box as well. Choose the padding and text alignments.
Icon 
Moreover, in the icon section, choose the icon size or choose to rotate the icon and choose the button spacing.
Title 
In the title section, choose the text color and typography as bottom spacing.
Description 
Similarly, like in the title section, choose the appropriate color for your content as well as its typography.
Back
Similarly, choose the background type, color, and padding of the flip side of the box. You can also choose the text alignment choose the title text color as well as the typography.
Description
Choose the text description color, typography, and spacing.
Click on the demo button below to view more styles and get more information on the Flip Box Widget.
Horizontal Tab
How to Style and Configure Horizontal Tab Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Horizontal Tab settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In this section, choose to add your desired tab content as you like. Add the tab title and choose to add content in context to your added title. Furthermore, you can enhance the title by adding icons before or after the text.
Settings
In this section, choose from a variety of content display animations when you switch to another tab.
Style
Tab Container
The tab container can be customized in terms of color border type and much more. In this section, choose the background color and border type as border color. Also, choose the border radius and padding for the container.
Tab Bar
The top tab button bar can also be made elegantly appealing. For this, you can opt to choose the background color, border type, as the border color. Further, choose the border radius, padding, and bottom spacing to make it look even more presentable.
Tab Buttons
In the tab buttons, choose the typography. Tab Icon You can choose to place the icon that you have added in the desired position and further customize the icon size and padding. Tab Buttons For the tab buttons, choose the button alignment, its position, and button spacing. Furthermore, the tab buttons can be defined further by choosing the border type, border color, and box shadow.
The tab buttons’ background color, text color, and border color can be changed when hovered over or while it is active. This gives a visual appearance to users when they engage with the tabs.
Content
In the content section, choose to customize the contents, typography, color, background color, box shadow border radius, and padding.
Click on the demo button below to view more styles and get more information on the Horizontal Tab Widget.
Horizontal Timeline
How to Style and Configure Horizontal Timeline Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Horizontal Timeline settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Items
Choose to add the horizontal tab content in this section. You can add a title and a description for your tab and a read more button to direct users to further information.
Settings
Choose the outlay of your horizontal timeline and the meta position. Furthermore, choose the block width and text alignment.
Style
Time Point
In the time point, choose the horizontal timeline style, background, and icon color. Make the text/ icon size according to your preference as well as the point gap. For the timeline, choose the line height as well as the top and bottom spacing.
Meta
You can choose the background color of the tabs that you have chosen. Choose the background color, typography, border type, and box shadow. To make the tab more appealing, make sure to configure the box radius, padding, and margin.
Content
In this section, choose to make changes to the content background color and make changes to the image title as well as the description.
Read More
The read more button can also be customized; choose the typography for the button. Choose the border type, border width, and box shadow. Moreover, choose the color and background color when the read more button is ideal and hovered over.
Navigational Arrow
The navigational arrow helps users switch between the content when there are more horizontal tabs. Choose to configure the arrow by adjusting its width, height, icon size, and horizontal offset. To make the arrow more appealing, choose from the border type as well as its color. Choose the background color and icon color when it is ideal and hovered over.
Click on the demo button below to view more styles and get more information on the Horizontal Timline Widget.
Hotspot
How to Style and Configure Hotspot Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Hotspot settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Hotspot
The hotspot allows us to explain the features of different parts of a component. Choose to add hotspot items in this section.
General Settings
In the general settings, select the content trigger type—either on click or hover. Additionally, set the tooltip position and enable pulse animation when the hotspot is idle.
Style
Hotspot
In this section, choose to change the background color, icon color, icon size, and icon container size.
Tool Tip Box
In this setting, change the tool tip box background color, border type, box shadow, border radius, and padding.
Title
Choose the title color as well as change the typography and the bottom spacing.
Description
Make changes to the description of the tool tip. Change the color, choose an appropriate typography for the content as well.
Click on the demo button below to view more styles and get more information on the Hotspot Widget.
Icon List
How to Style and Configure the Icon List Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Icon List settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
List
In this section, choose to add the list of services or items that best describe the content that you have added.
Settings
In the settings section, choose the layout and text alignment. Moreover, select the vertical list spacing and horizontal list spacing.
Style
List
Choose to change the background type or color or opt to add the image. Select a suitable border type, box shadow, padding, and border radius.
Icon and Text
In this section, choose the typography for the text and choose the icon size. Moreover, make changes to the icon positioning, alignment, and spacing. Choose the color of the icon and text when it is in an ideal state or hovered over.
Click on the demo button below to view more styles and get more information on the Icon List Widget.
Image Accordion
How to Style and Configure Image Accordion Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Image Accordion settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
You can choose to add as many image accordions as you prefer. In this section, also choose to add the title as well as a short description of the image accordion.
Settings
In this section, you can choose the settings for when the image accordion will appear, either on click or on hover. Moreover, choose the image accordion orientation, content text alignment, and the title tag.
Style
General
Choose the height of the image accordion, along with the Normal overlay color, hover overlay color, and the box shadow.
Image
The image of the accordion can be made look different by adding the border radius, padding, and margin. To make the accordion stand out, one can also choose to add a border type.
Title
In the title section, choose the typography of the title as well as the color and bottom spacing to make it look appealing.
Content
Similarly, like the title, choose the typography and color or the typography of the description content that you have written.
Click on the demo button below to view more styles and get more information on the Image Accordion Widget.
Image Comparison
How to Style and Configure Image Comparison Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Image Comparison settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Image
In the image section, include both the ‘Before’ and ‘After’ images. You may also change the labels if needed.
Additional
In these settings, choose the image orientation (horizontal or vertical). Additionally, set the slider’s starting position as a percentage. Decide whether the slider moves on click or drag, and adjust the intensity for a smoother transition.
Style
General Style
Choose to make changes in the overlay color and bar color.
Before and After Text
Make changes to the typography of the before and after text. Moreover, choose the padding, border radius, background, and color while on normal and hover.
Click on the demo button below to view more styles and get more information on the Image Comparison Widget.
Image Gallery
How to Style and Configure Image Gallery Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Image Gallery settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Gallery
In this section, select the items to include in the image gallery. You can add as many items as you like, allowing users to easily browse and find what they need, saving them valuable time.
Filter
In this setting, change the filter label and choose the alignment and the animation duration speed.
Settings
In this section, customize the layout by selecting the number of columns, caption style, and animation effects. Choose whether to display the lightbox icon, and fine-tune the image height and spacing for a cleaner, more polished look.
Style
Filter Buttons
Pick your filter buttons and typography style, then tweak the margin and bottom padding to get the right look. Customize the button colors for both normal and active states, add a border if needed, and play around with box shadow, border radius, and spacing to make everything feel just right.
Images
In the image section, adjust the box shadow, choose a border type, and customize the border radius to give your image the perfect look.
Overlay Caption
For the overlay caption, set the text alignment, background style, and padding. Also, customize the title and content colors along with the typography to match your design.
Light Box Button
In the lightbox button section, adjust the button size, icon size, and border radius. Customize the background color, border style, and border width to enhance its appearance.
Click on the demo button below to view more styles and get more information on the Image Gallery Widget.
Link Effect
How to Style and Configure the Link Effect Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Link Effect settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Link Effects
Choose the text as well as add a link to your header. Furthermore, to enhance the appearance, choose from various animation effects that are available to choose from.
Style
Link Effects
In the style section, choose the link effect alignment, border thickness, padding, and typography. Choose the normal link color and border color.
Further, you can change the color when the link is hovered over.
Click on the demo button below to view more styles and get more information on the Link Effect Widget.
Logo Carousel
How to Style and Configure Logo Carousel Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Logo Carousel settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Choose to add the logo carousel slides in this section. You can add lists as your preference. Make the link open in another tab as well as choose the HTML tag and image resolution for your carousel.
Carousel Settings
In the carousel settings, choose the number of slides to display at a time, the spacing between slides, and the stage padding. Additionally, decide whether the logo carousel should autoplay, loop infinitely, and pause on hover. Select either navigation dots or arrows for users to move through the carousel.
Navigational Dot
While choosing the navigational dot, you can make many changes to this section by choosing the width, height, spacing between and above dots, and also a border type. Choose the border color and radius. You can also customize the color when the navigational dot is normal, active, and hovered over.
Click on the demo button below to view more styles and get more information on the Logo Carousel Widget.
Logo Grid
How to Style and Configure Logo Grid Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Logo Grid settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Logo Grid
In this section of the logo grid, add item lists of the logo you want to add as well as a title.
Settings
In the settings, choose how many logos you prefer to show in a column, logo spacing, vertical as well as horizontal alignment.
Style
Logos
In the logo style settings, adjust the container’s border radius, the image’s border radius, and the padding. Additionally, select the border type, width, and color. Choose a background style and enable grayscale if you want the logo to turn gray on hover.
Title
In the title section, change the typography, color, and top spacing.
Click on the demo button below to view more styles and get more information on the Logo Grid Widget.
Lottie
How to Style and Configure Lottie Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Lottie settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Lottie
Lottie is an image animation that moves according to the animation settings that you have chosen. Choose the image in this section as well as add the link if you prefer.
Animations
Choose the animations to autoplay or while hovered over. Choose the speed at which the Lottie will move.
Style
Lottie
In this section, choose the opacity as well as the CSS Filter
The animation can be customized while it is hovered upon; choose the opacity and transition duration as well.
Click on the demo button below to view more styles and get more information on the Lottie Widget.
One Page Navigation
How to Style and Configure One Page Navigation Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The One Page Navigation settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Navigation Dots
One-page navigation enables users to browse content directly within the menu. This provides a clear overview at a glance, making navigation more efficient. In this section, choose to add items to the navigational dots.
Additional Settings
In the additional settings, choose to enable/disable the scroll wheel, touch swipe, and scroll keys functions. Moreover, customize the scrolling speed, its offset, and the navigational dot position as well.
Style
Navigational Box
In this section, choose to customize the background type and border type and add border radius and padding to the navigational dot. Further chose to add the box shadow to make it look more appealing.
Navigational Dots
In this section, choose to make changes to the navigational dots. Configure the icon size, background, and spacing. Choose the icon color, background color, and border type as well as the border color, while the navigational dot is normal, hovered over, or active.
Tooltip
The tooltip can also be customized; choose the tooltip arrow to show/hide. Choose the background color, text color, typography, box shadow, and padding.
Click on the demo button below to view more styles and get more information on the One Page Navigation Widget.
Pie Chart
How to Style and Configure Pie Chart Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Pie Chart Navigation settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Chart Data
In these settings, add the chart data and a chart title if you wish. Choose the HTML tag as well as the title position.
Legend
Enable the label that shows the details about the pie chart. Choose the position and arrange the order of the label as well.
Animation
When the pie chart is clicked, choose the animation duration and the animation effect.
Additional Settings
In the additional settings, customize the chart height and cutout percentage.
Style
Chart
Make changes to the border width as well as the border color.
Legend
For the box description box, customize the box width, spacing, font size, font weight, font style, and font color as well.
ToolTip
In the tooltip section, make changes to the tooltip background color, font color, font size, font weight, and font style.
Click on the demo button below to view more styles and get more information on the Pie Chart Widget.
Popup Modal
How to Style and Configure Popup Modal Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Popup Modal settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In the content section, choose to configure the content, add a suitable title, choose to show/hide header title, and close button.
Trigger
To trigger the pop-up modal, choose the trigger type. Choose the text, button icon, and icon position.
Layout
Choose the layout of the popup modal. Adjust the width, height, and popup animation.
Style
Trigger Button
In the trigger button section, choose to change the typography, icon spacing, padding, and border radius. Customize the text color, background type, and color border type. Choose the border color and add a box shadow to make the box look more appealing.
Popup Box
In the popup box section, choose to make changes to the box. Choose the background type and border type and custom add the border radius, padding, and box shadow.
Popup Overlay
Choose to add a faded overlay to make the contents behind the popup modal less important and highlight the box. Choose the overlay color, background color, and color.
Popup Scroll Bar
In the popup scroll bar, choose the track width, track color, thumb color, and thumb color (hover).
Click on the demo button below to view more styles and get more information on the Popup Modal Widget
Popup Video
How to Style and Configure the Popup Video Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Popup Video settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Video
In this section, choose the video URL that you intend to play on the screen. Thereafter, choose a suitable video width.
Trigger Button
Choose the trigger button type, play text, icon button, and positioning.
Player Settings
Choose to auto-play, mute, loop, or enable a video poster for the video.
Style
Container
Align the popup video to the center, right, or left.
Button
In this section, choose the typography, icon spacing, padding, and border radius of the button. Furthermore, choose the text color, background type, color border type and box shadow.
Click on the demo button below to view more styles and get more information on the Popup Video Widget
Pricing List
How to Style and Configure Pricing List Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Pricing List settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In the content settings, add the items of the menu that are to be price listed. You can opt to add as much as possible.
Settings
In the settings, choose the title tag and the grid column. Adjust the spacing between the lists as well asthe horizontal and vertical alignment. Choose the image width and the price position.
Style
Pricing Item
For the pricing item, choose the background color, border type, box shadow, border radius, and padding.
Image
Choose the border type, width, color, shadow, and radius of the image that you have chosen in the pricing list item.
Title
Make significant changes to the title typography, color background, border type margin, and padding.
Description
Choose the typography as well as the color for the description part as well.
Price
As for the pricing style, choose the typography, text color, background type,and padding. Add the border style, border color, and the alignment.
Click on the demo button below to view more styles and get more information on the Pricing List Widget
Pricing Table
How to Style and Configure Pricing Table Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Pricing Table settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
In this section, choose to add the list of pricing items. Add the pricing title, subtitle, price,and price per month. Choose to add a link to the button as well as a button icon.
Settings
Choose from 7 different layout styles for the pricing table.
Style
Container
Choose the background color, border type, box shadow, border radius, and padding.
Header
In the header section, choose the header color, its location, angle, and padding.
Header Icon
In the header icon, choose the background image color and its background type. Adjust the icon size, icon background size, border radius, margin, and box shadow.
Title
Make changes to the typography, color, and margin of the title.
Subtitle
In this section, choose the typography, margin, and color for the subtitle.
Price
This setting allows you to set the color margin as well as the typography of the pricing.
Price Per
Similar to the pricing, make changes to the text color typography of the price as well.
Feature Lists
The feature list describes the pricing table, allowing you to customize typography, colors, icon colors, and spacing. You can also enable or disable the separator to make the content more distinct.
Button
The buttons can also be customized to make it more appealing. Follow the color pattern according to the pricing table contents or opt for a different color. Make changes to the typography, padding border radius, and icon position if you have added any. Furthermore, customize the button text color, background color, background type, and border type.
Tag
Modify the label by selecting the typography, color, and background color and exploring different styling options.
Click on the demo button below to view more styles and get more information on the Pricing Table Widget
Progress Bar
How to Style and Configure the Progress Bar Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Progress Bar settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
In the content section, choose to add the items lists to the progress bar. Choose a suitable title for each item.
Settings
In the settings section, choose the style, label position, and spacing between the progress bar.
Style
Label
Choose the typography of the label as well as a suitable color.
Percent
In the percent section, select the typography for the percentage text and choose a color that complements the label and progress bar. Alternatively, you can opt for a contrasting color to make it stand out. In the percent section, select the typography for the percentage text and choose a color that complements the label and progress bar. Alternatively, you can opt for a contrasting color to make it stand out.
Progress Bar
In the progress bar settings, select the bar background color. You can choose a background type, a solid color, or even add an image. As for the active bar color, choose the background type, color, image border type, box shadow, padding, progress bar height, and border radius.
Click on the demo button below to view more styles and get more information on the Progress Bar Widget
Scroll Image
How to Style and Configure Scroll Image Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Scroll Image settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Image
The scroll image allows users to easily reach the top or bottom of a website page. Add a relevant image and choose the resolution. Then, adjust the maximum width, height, and alignment.
Link
Add links to the scroll image to engage users. Add the link icon and choose to show/hide on hover as well as choose the vertical and horizontal position.
Badge
The badge shows some extra information somewhere on the image. Choose the badge type, badge title text, as well as the horizontal and vertical positioning of the badge. Furthermore, choose the offset and rotate the badge if you wish to.
Style
Image Box
Adjust the box shadow, border type, and border radius for the box image.
Caption
If you have added a caption to the image box, choose the typography, alignment as well as color of the text.
Link
Choose to customize the link size, icon size, background color, border type, and box shadow.
Badge
Choose the background type, color, text color, typography, padding, and border-radius.
Click on the demo button below to view more styles and get more information on the Scroll Image Widget
Slider
How to Style and Configure the Slider Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Slider settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Choose to add the slider item content. You can add as many sliders as you wish. Further add the title, subtitle, and button text.
Settings
In the settings, choose the image resolution and choose the slider height. You can choose the slider transition as well as choose to alter the autoplay, pause on hover, as well as infinite loop of the slider. Choose the animation speed and either choose a navigational dot or a navigational arrow for the slider.
Caption Animation
For the, choose the animation, animation duration as well as animation delay for the Title sub title as well as for the button.
Style
Slider Overlay
Choose the slider overlay and make changes to the background type as well as color.
Caption Container
The caption container can be customized in terms of container width as well as caption width. Choose the offset and the vertical position, as well as the text alignment. To make changes in terms of color, choose the color for the container and adjust the border radius and padding as well.
Title
For the title, choose to make changes to the color, background color, typography, and text shadow. Adjust the padding, border radius, and bottom spacing.
Subtitle
In the subtitle change the color, typography, text shadow, and bottom spacing.
Button
In the button settings, select the typography for the button text. Define the background color, including its default state and hover effect. Additionally, set the border radius and padding to achieve the desired styling.
Navigational Arrow
The navigational arrow allows users to navigate to another slide if they want to know information about something else. Adjust the width, height, icon size, and horizontal as well as vertical offset of the navigational arrow. Further, choose a border type and border radius.
Click on the demo button below to view more styles and get more information on the Slider Widget
Social Share
How to Style and Configure Social Share Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Social Share settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Social Share
Choose to show/ hide the social share icon button as your preference.
Settings
In the settings, select the column layout, the number of columns, and the row spacing. You can choose to display only the social share icon, only the text, or both. Additionally, configure the icon positioning and spacing to suit your design preferences.
Style
In the style settings, select the typography, padding, and border radius for the social share button. Customize the text color, background type, and border style, including its color. Additionally, adjust the shadow effect to enhance the button’s visual appeal.
The button can be further customized when it is hovered upon. Choose a different text color, background type, color, border color, and box shadow. To make it more engaging, you can also choose the hover animation.
Click on the demo button below to view more styles and get more information on the Social Share Widget
Step Flow
How to Style and Configure Step Flow Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Step Flow settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Step Flow
In this section, choose to add the icon for the step flow and numbering as well. Add a title and a relevant description for the content as well. If you have more information to give, direct the users with the read more button.
Additional Settings
In the additional settings, choose the title tag, alignment, and show direction as well as the direction style.
Style
Icon
In the icon settings, set the icon size, padding, icon color, background color, and border type as well. To make the icon appealing, add padding as well as the border radius and the box shadow.
Badge
The added badge in the step flow icon can be customized in terms of typography, color positioning, padding, and border type.
Title
For the title settings, choose the typography and color as margin.
Description
Similarly, for the description, adjust the typography, color, and margin to ensure a cohesive and visually appealing design.
Direction
The arrow directions that direct the users to the step flow process one after another can be customized in terms of width, gap, length, offsets, rotation, and color as well.
Click on the demo button below to view more styles and get more information on the Step Flow Widget
Sticky Video
How to Style and Configure the Sticky Video Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Sticky Video settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Video
Choose to make the video sticky and set its designated position. Select a file to upload and customize its playback settings, including autoplay, mute, loop, and whether to display the control bar.
Style
Video Interface
Choose the interface color, as well as the play button size and control bar padding.
Sticky Video
In the sticky video settings, choose to adjust the video width as well as the close button background color and close button icon color.
Player
In these settings, choose to make changes to the video player’s border type, border width, border color, and border radius.
Click on the demo button below to view more styles and get more information on the Sticky Video Widget
Switcher
How to Style and Configure the Switcher Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Switcher settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Lists
Choose to add the list of content that users can switch on the menu. Add a suitable content, content type, as well as icon if required.
Settings
Choose the animation when users switch to another tab.
Style
Switch Bar
In this section, choose the alignment of the switch bar, spacing between buttons, and bottom spacing. Select a suitable border color, box shadow, and border radius as background color.
Switch Buttons
In the switch buttons, choose the typography for the buttons, icon positioning as well as the icon size and its spacing. To give the tab a shape adjust the border radius and padding. Choose the color of the tab when active, normal, and when hovered upon.
Content
The content of the switcher can also be customized in terms of text color, background color, padding, border type, border width, border radius, and typography.
Click on the demo button below to view more styles and get more information on the Switcher Widget
Team Carousel
How to Style and Configure Team Carousel Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Team Carousel settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
In this section, choose to add the team member’s name, designation, and description.
Settings
In the settings, choose the image resolution, content display location, and social icon display.
Carousel Settings
In the carousel settings, choose the number of slides to display at a time, the spacing between slides, and the stage padding. Additionally, decide whether the team carousel should autoplay, loop infinitely, and pause on hover. Select either navigation dots or arrows for users to move through the carousel.
Style
Container
In the container, choose the background type, color, border type, border width, border shadow, padding, and border radius.
Content
Choose the text alignment and padding in this section.
Image
Choose to change the image height, image width, its alignment, border radius, border type, and border width. Choose the border color and box shadow to give a detailed look.
Name
Choose to change the typography, text color, and margin-bottom of the team member’s name.
Position
Make changes to the typography text color the margin-bottom of the team members’ designation as well.
Social Links
For the social links, change the icon gap, size, padding, and border radius. Choose a different background color when the link is normal and when it is hovered upon.
Navigational Dot
For the navigational dot, choose the width, height, and spacing between and above the dots. Choose a suitable border type, border radius, and color when the navigational dot is active, hovered upon, and normal.
Navigational Arrow
For the navigational arrow, choose the width, height, icon size, and horizontal and vertical offset. Choose a suitable border type, border radius, and color when the navigational dot is hovered upon and normal.
Click on the demo button below to view more styles and get more information on the Team Carousel Widget
Team Member
How to Style and Configure Team Member Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Team Member settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Details
In this section, choose to add the team member name, designation, and description.
Social Links
Choose to add the social links of the members. Choose the title and add the icon as well.
Settings
In the settings, choose the image resolution, content display location, and social icon display.
Style
In the container, choose the background type, color, border type, border width, border shadow, padding, and border radius.
Content
Choose the text alignment and padding in this section.
Image
Choose to change the typography, text color, and margin bottom of the team member’s name.
Position
Make changes to the typography text color the margin-bottom of the team members’ designation as well.
Description
As for the description, also change the typography according to your preference, text color, and bottom margin as well.
Social Links
For the social links change the icon gap, size, padding, and border radius. Choose a different background color when the link is normal and when it is hovered upon.
Click on the demo button below to view more styles and get more information on the Team Member Widget
Testimonial
How to Style and Configure Testimonial Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Testimonial settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
For the testimonial section, choose to add the team member’s name, designation, Testimonial title and the testimonial the member has given.
Quote Icon
Select a suitable icon for the testimonial quote, ensuring it allows size adjustments, position (both horizontal and vertical), and offset.
Settings
In this section, choose to select the image resolution, image shape, layout, testimony position, and testimony spacing.
Style
Container
In the style container section, choose the background type, color, and box shadow. Either place the text in the center, left, or right. To make the container more appealing, choose a border type and customize padding as well as border radius.
For the image that you have added to the testimonial container, change the image width, border type, border width, border color, box shadow, and bottom spacing.
Name
In the name section, change the color, typography, color when the text is hovered upon, and bottom spacing as well.
Designation
As for the team members’ designation also change the color, typography, cand olor when the text is hovered upon and bottom spacing as well.
Testimony
In the testimony, choose the background type, adjust the padding and border radius, and add a box shadow to the container.
Rating
As for the ratings, you can opt to choose a different color than the default and also customize the star size.
Quote
For the quote icon, you can also set its default color and define a different color for when it is hovered over.
Click on the demo button below to view more styles and get more information on the Testimonial Widget
Testimonial Carousel
How to Style and Configure Testimonial Carousel Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Testimonial Carousel settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
For the testimonial section, choose to add the team member’s name, designation, Testimonial title, and the testimonial the member has given.
Quote Icon
Select a suitable icon for the testimonial quote, ensuring it allows adjustments in size, position (both horizontal and vertical), and offset.
Settings
In this section, choose to select the image resolution, image shape, layout, testimony position as well as testimony spacing.
Carousel Settings
In the carousel settings, choose the number of slides to display at a time, the spacing between slides, and the stage padding. Additionally, decide whether the team carousel should autoplay, loop infinitely, and pause on hover. Select either navigation dots or arrows for users to move through the carousel.
Style
Container
In this setting, choose to make changes to the container. Add background type, color, and box shadow. Choose where you want to align your text and add a border if you prefer.
Image
For the image that you have added to the testimonial carousel, change the image width, border type, border width, border color, box shadow, and bottom spacing.
Name
In the name section, change the color, typography, color when the text is hovered upon, and bottom spacing as well.
Designation
As for the team members’ designation, also change the color, typography, cand color when the text is hovered over and bottom spacing as well.
Testimony
In the testimony, choose the background type, adjust the padding and border radius as well as add box shadow to the container. Choose the color for title and content and change the typography as well.
Quote
For the quote icon, you can also set its default color and define a different color for when it is hovered over.
Navigational Dot
While choosing the navigational dot, you can make many changes to this section by choosing the width, height, spacing between and above dots, and also a border type. Choose the border color and radius. You can also customize the color when the navigational dot is normal, active,e and hovered over.
Navigational Arrow
For the navigational arrow, choose the width, height, icon size, and horizontal and vertical offset. Choose a suitable border type, border radius, and color when the navigational dot is hovered upon and normal.
Click on the demo button below to view more styles and get more information on the Testimonial Carousel Widget
View Testimonial Carousel Demo
Toggle
How to Style and Configure Toggle Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Toggle settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Primary
In this section, choose to change the label of the toggle. Choose saved templates or create one on your own.
Secondary
For the secondary part of the toggle, choose a suitable label as well as template.
Settings
In this section, select either the primary or secondary display as the default. Then, choose from various switch styles and place the toggle bar wherever you prefer.
Style
Switch
In the switch settings, customize the toggle icon alignment, switch width, height, handle size, and the spacing between the switch and its label or content. Additionally, apply a switch box shadow and select appropriate background and handle colors for both primary and secondary options.
Labels
For the labels, select the font style, text color, and active text color for both primary and secondary text.
Content
For the content in the box, choose to change the typography, text color, background type, color border type, box shadow, border radius, and padding as well.
Click on the demo button below to view more styles and get more information on the Toggle Widget
Twitter Feed
How to Style and Configure Twitter Feed Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Twitter Feed settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Main Settings
In this setting, choose in which type you would want your Twitter post to appear. If you choose to show your profile handle, add your @ username and choose the display mode as well. Adjust the height of the post type and choose a light or a dark theme.
As for the Twitter post, you can adda description and a relevant link to the post. Choose a theme and appropriate language as well.
To display the Twitter feed of another profile, add the profile link and customize the display settings, including mode, height, and theme of the feed.
If you wish to add a video to your Twitter feed, choose to add a video URL and choose the video width along with the language.
Click on the demo button below to view more styles and get more information on the Twitter Feed Widget
Vertical Tab
How to Style and Configure Vertical Tab Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Vertical Tab settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Add Tabs
In this section, choose to add the content to the vertical tab, add a suitable title, and choose a content type as well.
Settings 
Choose the tab position, tab width, spacing, and content display animation.
Style
Tab Container
Choose the background color, border type, border width, border color box shadow, border radius as well as padding for the container.
Tab Bar
For the tab bar, choose the background color, border color, box shadow, and border radius as padding.
Tab Buttons
As for the tab buttons, choose a typography. Make changes to the tab icon and tab buttons accordingly. Tab Icon For the tab icon, choose the positioning, icon size, and icon spacing. Tab Button For the tab button, add button spacing, choose a predefined button shape, and add padding as well. Choose a suitable background color for the button while in normal, hovered upon, and active.
Content
For the content section, choose a suitable typography, color, background color, border type, and border width. You can opt to add a border color, box shadow, and border radius, and padding.
Additional
In the additional settings, choose the tab’s horizontal offset as well as the contents’ horizontal offset.
Click on the demo button below to view more styles and get more information on the Vertical Tab Widget
Vertical Timeline
How to Style and Configure Vertical Timeline Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Vertical Timeline settings include two tabs: Content and Style, where you can customize various options accordingly.
Content
Items
In this section, choose to add the items to your vertical timeline. Add a title, meta, and description. Add icon to your timeline and a button if you require to give more information to your customers.
Settings
In the settings, choose the HTML tag, layout style, left as well as right block text alignments, and block spacing as well.
Style
Time Point
Choose the time point size, background color, color and border width, and border radius as well. As for the timeline, choose an appropriate timeline color as well as timeline width.
Meta
For the meta, choose a background color, typography, border type as well as box shadow. Add a border radius, padding as well as margin to make it look more presentable.
Content
For the content, choose a background color, border type, border width, border color, and box shadow. Customize it with a border radius, padding, and margin. Moreover, make changes to the image, title, and description.
Read More
Make changes to the read more button added. Choose a suitable typography, padding as margin. Customize the border type, box shadow, and border radius. Add color to the button while it is normal and hovered upon.
Click on the demo button below to view more styles and get more information on the Vertical Timeline Widget
Video Player
How to Style and Configure Video Player Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Video Player settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Select the type of video to display: self-hosted, YouTube, or Vimeo. Set the start and end times, enable play controls, and choose whether the video should autoplay, loop, or play muted.
Play Button
For the play button, choose to show/ hide the button. Choose a suitable icon and button size, and add a suitable play button color.
Poster Image
Choose to show a custom poster and add an overlay color as well.
Click on the demo button below to view more styles and get more information on the Video Player Widget
Weather
How to Style and Configure the Weather Widget
In the following article, we will guide you through configuring the settings, briefly explaining each section. The Weather settings include two tabs, Content and Style, where you can customize various options accordingly.
Content
Layout Section
In the layout section, choose the country and city of which the weather you want to show. Choose a temperature unit: Celsius or Fahrenheit. Choose a definitive style for your weather container.
Style
Container
For the container, choose the image resolution, background type, and color. Choose the position and display size. Moreover ,add a background overlay and padding and border radius to the container.
Header
The header lets you apply a shadow effect to the image. In this section, customize the shadow’s color, position, type, and angle.
Location
In this section, customize the color, typography, and margin of the added location.
Weather Icon
Modify the weather icon by selecting a color that complements your image or choosing a neutral tone. You can also adjust the icon size to fit your design.
Temperature
In this section, make changes to the temperature color typography as well as the margin.
Weather Condition
In the weather condition section, choose to change the color of the typography as well as the margin.
Feels Like
The feels like section can also be customised in terms of color, typography, and the margin.
Date
Choose to make changes to the date in terms of color, typography, and margin as well.
Click on the demo button below to view more styles and get more information on the WeatherWidget
