You can use gradient overlay on section, row, column and element. To use background overlay in your section, follow these steps.

• Go to settings of section
• Select styles tab
• Go to Background option and set a background
• Now select Background Overlay

This feature has the following settings in it.

• Background Type - Background type offers a few options including solid color and gradient. You can choose solid colors or images and adjust the opacity for transparency. Or, you can set gradient colors by blending them over the background image or color.
• Color - You can set the colors from color palette. You can use the preset color or use one of your own.
• Image - To insert an image select the image from media manager. You can upload, an image and use it too. Moreover, you can use icons too from media manager. And if you want to use images from Google, just use the unsplash tab from media manager.
• Opacity - The opacity-level describes the transparency-level. With the given scroll bar, you can set the transparency of the image.

The available units are -

• Px - Pixels are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
• % - Relative to the parent element
• Vh - Relative to 1% of the height of the viewport*
• Rem - Relative to font-size of the root element
• Em - Relative to the font-size of the element (2em means 2 times the size of the current font)

*Viewport = the browser window size. If the viewport is 50cm wide then 1vw = 0.5cm

This feature is added in the settings options of section, row, column and element. To use this feature follow these steps.

• Go to settings option where you want to put the border
• Search for - Border & Box Shadow

This feature has the following settings in it.

• Border Width - Border width allows you to set the the width of the border by inserting digits in pixel and EM’s. As the numbers increase to a higher digit, the more the border gets thicker. There are four fields- top, right, bottom and left.
• Border Type - Border type will allow you to choose what type of border you want to set. Currently there are four option available right now - solid single line, double line, dotted and dashed. You can use any of them in bold colors and give you section a bold look.
• Border Color - Border color will allow you to set colors. Currently there is option for only using solid colors. You can choose from the preset options or choose one of your own.
• Border Radius - Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape by inserting digits in four fields- top, right, bottom and left that is available both in percentage and pixel.

To add a shadow effect in the text follow these steps:

• Go to settings option of header or text element.
• Go to Styles tab
• Select typography
• There you’ll find Text Shadow

This feature has the following settings in it.

• Color - Box shadow color will allow you to set the color you want to use. Currently there is option for only using solid colors. You can choose from the preset options or choose one of your own.
• Horizontal - Horizontal means the line parallel to X-axis. And here, horizontal means to apply the shadow in right-left or left-right basis. The more you insert positive digits, the shadow effect will walk to the right. And in case of negative values, the shadow effect will walk to the left.
• Vertical - Vertical means the line parallel to Y-axis. And here, vertical means to apply the shadow in top-bottom or bottom- top basis. The more you insert positive digits, the shadow effect will walk to the bottom. And in case of negative values, the shadow effect will walk to the top.
• Blur - Usually blur means to make unclear or less distinct. Here, blur is used for something like that. This option helps to unclear the edges of the shadow. As the number increases, blurness increases too.

This feature is added in the settings options of section, row, column and element. To use this feature follow these steps.

• Go to settings option where you want to put the border
• Search for - Border & Box Shadow

This feature has the following settings in it.

• Color - Box shadow color will allow you to set the color you want to use. Currently there is option for only using solid colors. You can choose from the preset options or choose one of your own.
• Horizontal - Horizontal means the line parallel to X-axis. And here, horizontal means to apply the shadow in right-left or left-right basis. The more you insert positive digits, the shadow effect will walk to the right. And in case of negative values, the shadow effect will walk to the left.
• Vertical - Vertical means the line parallel to Y-axis. And here, vertical means to apply the shadow in top-bottom or bottom- top basis. The more you insert positive digits, the shadow effect will walk to the bottom. And in case of negative values, the shadow effect will walk to the top.
• Blur - Usually blur means to make unclear or less distinct. Here, blur is used for something like that. This option helps to unclear the edges of the shadow. As the number increases, blurness increases too.
• Spread - The spread slide bar helps to spread the shadow in a distinct area. The more you increase the number, the more it will spread.
• Position - The position option available for setting the position of the shadow. You can set inside the box or outside of it.

This feature is included in the settings of column and element. To add animation to your element follow these steps.

• Select the element
• Go to Advanced option
• Select Animation

This feature has the following settings in it.

• Entrance Animation - Entrance animation offers a drop-down bar where 16 options are available letting you choose what type of animation you want to apply. These options are - None, Fade In, Scale Up, Scale Down, Slide Top Small, Slide Bottom Small, Slide Left Small, Slide Right Small, Slide Top Medium, Slide Bottom Medium, Slide Left Medium, Slide Right Medium, Slide Top 100%, Slide Bottom 100%, Slide Left 100%, and Slide Right 100%,
• Animation Repeat - This function will allow you to repeat the animation. Once you enable this, your column or element will show repeated animations.
• Animation Delay - You can control when your entrance animation will appear. Animation delay slide bar will help you to set the delay time.

To add CSS code to your element follow these steps.

• Open the settings options
• Go to Advanced tab
• Click Custom CSS

Now to write the code inside the field area, follow these steps.

• Select Identifier that is listed below the Custom CSS
• Copy the id or give a CSS class name
• Now paste the id or class in the custom CSS field
• Start a second bracket ({)
• Write the designing code
• End with the second bracket (})

To change the format of heading or text, follow these steps.

• Select the setting of Header / Text element
• Select Styles tab
• From there select Typography

This feature has the following settings in it.

• Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
• Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
• Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
• Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
• Style- This field will allow you to set the font style. You can set normal, italic or oblique.
• Decoration- You can decorate the text by selecting overline, underline or strikethrough.
• Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
• Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.

To add a shape divider in a section, follow these steps.

• Go to section settings
• Select Styles
• Select Divider Top if you wanna put in on top
• Select Divider Bottom if you wanna put in on Bottom

DIvider has the following contents in them

• Divider Stye - Divider style is the field where a list of styles are represented in a drop-down option. Here 22 designs are given from where you can choose the one that suits your site design.
• Color - A color pallet is given to color the dividers. You can choose any color from preset colors or give one of your own.
• Height - A scroll bar of height is given to adjust the height of the divider. You can scroll the bar or insert digits in the digit field.
• Flip - A flip option is provided for the divider. Enabling it will flip the divider in another side.
• Bring it to Front - This option will allow you to choose to set the divider in front or back of the section.

How To Add Gradient

To apply gradient effect in the background, follow these steps:

• Go to the mini-toolbar of section or row or column, mainly where you want the gradient effect.
• Select the settings icon
• Go to Styles tab
• Select Background
• From there select Gradient

Solid Colors in Background

Currently there is two color blending option available. That means, you can use two colors for now.

• Color 1 - Color 1 is the first you want to insert for the effect. You can use a light color or a dark, that’s up to you.
• Color 2 - Color 2 is the second color you want to insert for the color. Choose both the colors in a great contrast.
• Gradient Type - This option will allow you to set the type of gradient you want to use. There are two options available- Linear and Radial. Linear is the progress from one color to another in a single series. And radial is the colors arranged in a rays of a circle showing color 1 is surrounded by color 2.
• Gradient Direction - Gradient direction will set the direction of the colors. In case of linear position, you’ll find a scroll bar. Just drag and adjust the way you want. And for radial, a drop-down option is available. You can select the direction from there.
• Starting Position - Starting position scroll bar will allow you to set the starting position of the gradient effect. As the number increases, the effect of color 1 will also increase along with it.
• Ending Position - Ending position scroll bar will allow you to set the blurring between the two colors. If you want, you can set two solid colors diagonally or blend them into a shady mood.

Gradient Over Image Settings

You can even set gradient effect over an image. This will take the design in to next level. And there is opacity scroll bar available for controlling the transparency.

Hover effect comes with a few options including solid colors, gradient colors, image etc. Moreover, you can apply hover effect without any existing background color or image.

Hover In Background

To add this effect in the background of section, row, column and element, you can go through the following steps.

• Go to the settings option
• Go to Styles tab or Advanced tab
• Find Background
• You’ll find 2 options - Normal and Hover
• Select Hover
• Now set the color or image you want in hover effect

Hover On Border & Box Shadow

You can add this effect for border and box shadow too. This will add a more drastic style in your webpage. To add the effect, follow these steps.

• Go to the settings option
• Go to Styles tab or Advanced tab
• Find Border & Box Shadow
• You’ll find 2 options - Normal and Hover
• Select Hover
• Now set the color or image you want in hover effect

Device Preview

On the main settings of toolbar, you’ll find 3 device icons - Desktop, Tablet, and Mobile. Clicking on them will show you the preview of your site in the screens of desktop, tablet and mobile.

Responsive Column

The column will response according to the device screen. In desktop mode, you can set three to five columns in a row. In tablet screen, the number of column in one row will be reduced to maximum three. And in mobile mode, each of the column will set one after another. But you can change these option and set your own.