Design Options

You can customize the design of modules as you wish. for this, you need to do belove steps.

1- Open the module settings dialog.
2- click the “Custom Edit Style” Button.

3- Select one part of the module for edit.

4- Click the feature that you want to edit

5- Select a custom value for each option

Design Options

Background Color:

This feature allows you to change the background of the selected area using a color picker.

Gradient: The gradient option allows you to display smooth transitions between two specified colors

The initial color which is the background color and the second color which is the contrasting color and you can choose your gradient by choosing the right background and then existing graphics options in the gradient panel.

You can manually set the color code in color picker text field. The default is the hexadecimal code but it also supports other formats like RGB and RGBA.

Background Image: This option allows you to upload or choose an image from the library from for the background; also you can remove the image by clicking the remove image button.

The other settings mentioned below only work when you have selected a background image. If that is not the case you won’t need to set them.

Background parallax: This allows you to choose whether or not the parallax effect should be applied to the background image when it is scrolled up or down.

Parallax Background Ratio or Parallax Speed: This option allows you to set the parallax speed. The value is between 0 for the slowest and 1 for the fastest. An example could be 0.5

Background attachment: The background attachment option sets whether a background image is fixed or scrolls with the rest of the page.

Background Size: This option shows the shape and the way an image is displayed in the background and you can choose the following options:

  • Fit: This setting allows the images’ width to be used 100% in background area (whether the width of the image is bigger or smaller that the background area, this option will match them both) also if the height of the background is more than that of the image (set automatically) , the image will be repeated.
  • Full screen: Choosing this option will match the width and height of the image to the width and height of the background area.
  • Cover: Scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area (w3scool)

Background Reapet: 

  • Tile: By choosing this option the width and height of the image will automatically match with those of the background and if the picture is smaller than the background space it can be repeated both vertically and horizontally.
  • Tile horizontally: By choosing this option the width and height of the image will automatically match with those of the background and if the picture is smaller than the background space it can be repeated and horizontally.
  • Tile vertically By choosing this option the width and height of the image will automatically match with those of the background and if the picture is smaller than the background space it can be repeated vertically.
  • Normal: By choosing this option the width and height of the image will automatically match with those of the background and if the picture is smaller than the background space it can’t be repeated in the background area.

Background position: This option gives you the ability to determine the pictures position in relation to an area in which it is located which is top left by default , the options of right , left bottom, left center, top left, top, right center, right bottom, center top, center center or center bottom are all graphically presented.

Border options:

Borders can be determined for each of the four sides of the currently selected part and each four side has 3 options which include:

Border width: The borders width which refers to it thinness and is determined by pixels.

Border color: The borders color which you can customize using the color picker or text field.

Border style: This option will set the type of border to display. The available options are the following graphical choices :

  • None
  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Ridge
  • Inset
  • Outset

Corner size options: The corner size options allow you to add rounded borders to elements. In this section you can choose the top right, top left, bottom right and bottom left corners, also by choosing the lock corners together, you can change all of the options at once.

Padding options:  This option allows you to set the spacing of the selected elements from the four sides. In this section, you can determine the top, left, right, bottom spaces in the order given. The minimum value that can be selected is 0. You can also choose the lock spacing together to change all the spacing together.

Margin options: This option allows you to set the outer spacing of the selected elements from the four sides. In this section, you can determine the top, left, right, bottom spaces in the order given. These spaces can include negative numbers as well. You can also choose the lock spacing together to change all the spacing together.

Transparency or opacity options: You can determine the transparency of each element using the option. The values are between 0 and 100 where 0 stands for no transparency and 100 stands for full transparency.

Box shadow options:

The box shadow options allow you to attach a shadow to an element. In this section you can determine two options:

Shadow color

Shadow type which provides you with different shadows by giving you graphical options. This kind of shadow is composed of normal and inset groups; you can also remove the selected shadow by choosing the first graphics option of no shadow.

Note: it is worth mentioning that if the element already possesses a shadow that is not in the options and then you choose the shadows in this section and finally you decide to remove the shadow and set it to default shadows, you won’t be able to and the shadow will be completely removed.

Text shadow options:

The text shadow options allow you to add shadows to texts. You have two options here:

Shadow color

Shadow type which provides you with different shadows by giving you graphical options. This kind of shadow is composed of normal and inset groups; you can also remove the selected shadow by choosing the first graphics option of no shadow.

Note: it is worth mentioning that if the element already possesses a shadow that is not in the options and then you choose the shadows in this section and finally you decide to remove the shadow and set it to default shadows, you won’t be able to and the shadow will be completely removed.

Text and font options

Font family:

This option allows picking a font of your choosing for a text.

Font size:

This option allows you to pick a size for your font.

Text color:

This option allows you to set the color of your texts.

Font weight:

The font weight option determines the thick of the thinness with which the characters in your text should be displayed.

Font style:

This option allows you to pick a style for your font from the following options of italic, normal and oblique.

Text decoration:

This option allows you to add decoration to your texts, for instance, you can underline a text or add a line-through and keep the default setting of the text as normal.

Line Height:

This option allows you to set spaces between text lines or in other words, to the set the height of your text lines.

Text align:

This option allows you to choose a left, right or centered orientation for your text or justifies it.