Style elements

Please find below appendix listing of the styling features for all elements. Find those that apply to the particular element.

Active - this is the current state of the element; for example, in a menu button, in the event when you are on the current page the button links to, you can set the style for that page to be different; you can change color or add image for a background instead, set opacity and apply the same style to the other buttons from the Apply button.

Background - you can change the background of your menu; the options are color and image; click on color, then select the color you want from the palette and set the opacity. Click on Image – you can add one from files and then customize it from the Image placement to set the positioning.

Blur - this feature is used to obscure areas of the element (most frequently in drop shadows) from the edges towards the inside. It creates a hazy vision and softens hard edges.

Character type - add effects to individual characters. This feature is used for text formatting – font styles (bold and italic), underline styles (underline, overline, line- through) and font size (uppercase, lowercase, capitalize).

Corners - this feature allows you to achieve an edge rounding and customize each corner individually. To alter the rounding radius, write the numbers from 0 to 999 in the black fields. To even the edges equally for all corners, click on the padlock icon in the middle.

Direction - the Drop shadow may be set to any direction you want - left, right, up and down.

Distance - this enables offset of the drop shadow from the element. You can control how far to the left, right, up or down to set the effect.

Drop shadow - this is a visual effect that gives a shadow of an element and creates the illusion that the element is raised above the object behind it. You can customize the opacity, the direction, the distance from the element, its size and blur intensity.

Font family - The font family specifies the font for a text element.

Hover - this feature triggers an event when a user places a mouse over an element. Here this is used to change the style of the element where it applies. For example, you can set a color or in some elements add an image for hover.

Image placement - you can apply different styling of an image related to its specified position. The positioning styles for customizing the image are as follows:

  • Normal - the background image will maintain its actual uploaded size.
  • Full screen - the background image will fill the size of the screen.
  • Fit - the background image will maintain its proportional size between width and height.
  • Tile - the background image will display in a tile formation across your header.
  • Tile Vertically - the background image will display in a tile formation across the vertical axis of your header.
  • Tile Horizontally - the background image will display in a tile formation across the horizontal axis of your header.

The positioning properties that allow you to shift the image are: left top, centre top, right top, left centre, centre, right centre, left bottom, centre bottom and right bottom.

Inner and outer borders - these are outline properties that create borders inside and outside the element accordingly.

Inner and outer glow - these properties will add a glow to your image visible on the edges from the inside and outside of the image accordingly.

Input text style - this is the text that is written from the users (in this case it refers to customizing the style – font family, color, opacity and size of the text that users input in the fields of the contact form).

Normal - this is the regular style of the element when hover and active are not applied.

Opacity - this refers to the opaqueness of the object that spreads along the entire length of the object evenly.

Separator color – This is the line that separates the buttons of the menu.

Text color - this feature allows you to set a color of your text element.

Text shadow - the text shadow allows you to add a shadow effect to your text elements. You can change opacity, direction, distance and blur of the text shadow.

Thank you!

A new password has been sent to your e-mail address.

OR
OR