How to create Heading Widget element?

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Drag UDesign Heading element from the element List.

Step 3. Edit Heading Tag and Title Content. You can also give link to widget.

About Heading Widget Option.

Title – Type a certain heading you want to display.

HTML Tag – Select the heading tag from H1 to H6 and p tag.

Type – You can select the decoration type among Simple(Default), Cross and Underline options.

About Heading Widget Style.

Title Padding – You can control title padding.

Title Color – You can control the heading color.

How to create Timeline-Horizontal Widget?

Step 1. Create, or choose the section into which you want to add your element.

Step 2. Drag UDesign Timeline-Horizontal element from the elements list.

Step 3. Edit the timeline-horizontal type.

1. Content– Build the timeline-horizontal using repeater function.
2. Layout – Determine the layout of your timeline-horizontal.

Timeline-Horizontal Style Options

Image – Set the style for image like size, border style or box shadow, etc.

Icon – Set the style for icon like size or color, etc.

Meta – Set the style for meta of timeline like typography or color.

Title – Set the style for title of timeline like typography or color.

Description – Set the style for description of timeline like typography or color.

Content – Set the style for content of timeline like shadow, background, margin, etc.

Point – Set the style for point of timeline like typography, size, color, etc.

Line – Set the style for line of timeline like color or thickness.

How to create Flipbox element?

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Drag UDesign Flip Box from the element List.

Step 3. Edit Front and Back content and styles and also flip animation. Flip Box sets Icon Box on front and back side. So style and content is similar to Icon Box.

About the Flipbox Options.

Front and Back gets the same content options. Title, Subtitle, Description, Button Label.

Icon – You can set icon or svg to put on F/B content.

Flipbox Settings – Max and Min Height sets the flipbox max and min height.
Animation Effect gets various effect to flip card. You can set favourite one among option.

How to create Image Compare Widget?

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Drag UDesign Image Compare from the element List.

Step 3. Add Before, After Image and select image size.

Image Compare Options?

Before(After) Image – You can select before(after) compare image from the library.

Before(After) Image Label – You can set text of image label. This label will be shown if the element is hovered.

Labels Position – You can choose one from 2 label position modes.

Direction – You can set image compare handle vertical or horizontal

Image Compare Style?

Handle – You can control handle size, color and box-shadow.

Label – You can set color and box-shadow of the label.

How to create Table Widget?

Step 1. Create, or choose the section into which you want to add your element.

Step 2. Drag UDesign Table element from the elements list.

Step 3. Edit the table header and body.

Table Style Options

Table Header – Set the style for table header.

Table body – Set the style for table body.

How to create Progress Bar Widget?

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Drag UDesign Image Gallery from the element List.

Step 3. Add progress bar and edit each bar.

Progress Bar Option.

Text Position – You can control text position in the progress bar.

Display Percentage – You can determine showing percentage in progress bar with this option.

Percentage Position – You can determine percentage position in progress bar. There are 3 types. End of Bar, End of Percent, After Title.

Progress Bar Style.

In progress styles, there are typography, color and spacing of title, percentage. Especially Effect style decorate your progress sightworthy. This Effect gets two types Indicating and Animated.

How to create Timeline-Vertical Widget?

Step 1. Create, or choose the section into which you want to add your element.

Step 2. Drag UDesign Timeline-Vertical element from the elements list.

Step 3. Edit the timeline-vertical type.

1. Content– Build the timeline-vertical using repeater function.
2. Layout – Determine the layout of your timeline-vertical.

Timeline-Vertical Style Options

Image – Set the style for image like size, border style or box shadow, etc.

Icon – Set the style for icon like size or color, etc.

Meta – Set the style for meta of timeline like typography or color.

Title – Set the style for title of timeline like typography or color.

Description – Set the style for description of timeline like typography or color.

Content – Set the style for content of timeline like shadow, background, margin, etc.

Point – Set the style for point of timeline like typography, size, color, etc.

Line – Set the style for line of timeline like color or thickness.

How to create products element?

Step 1 – Please create, or choose the Column into which you want to add your element.

Step 2 – Select UDesign Products Element from the Element List.

Step 3 – Configure the UDesign Products Element to some place into your content.

Step 4 – After you finish your configuration, don’t forget to save all changes..

Element Content Options

Products Selector: You can choose products to show and set product count and so on.

Products Layout: You can choose products layout type – Grid, Slider and Creative Grid.

Image Size: You can select products image size.

Columns: You can select the number of columns to display products on desktop, tablet and mobile mode.

Column Spacing: You can select the amount of spacing between items.

Load More: You can choose load more type – By Button or By Scroll.

Filter by Category Widget: You can defines whether to show or hide category widgets filters above products.

Filter by Category: You can defines whether to show or hide category filters above products.

Follow Theme Option: You can set product type, which is set in Theme Option.

Product Type: You can select product type.

How to create Polar Chart Widget?

Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element.

Step 2. Drag UDesign Polar Chart element from the element List.

Step 3. Edit Data Set and add Items.

You should set number of Items’ value the same as numbers of Data Set or the chart will not be able to be shown value of items.

Polar Chart Option.

Dataset Label – You can set the label of dataset.

Data Value – You should enter multiple values divided by comma without whitespace according to the count of datasets. Example: if you have 2 datasets, you should input two values, 40,50. First is for dataset 1 and second is for dataset 2.

The legend is able to be displayed anywhere. Top, Bottom, Left, Right. These setting is controlled by Legend options.

Polar Chart Style.

You can control height with Height of Polar Area and here you can set typography of legend.