Widget Properties

Every Widget available has General common properties, and most of them have as well some Advanced Properties. General Common Properties include settings such as the Background color, Text Color and Attributes … When you select a Widget within the editor, you have then access to the common properties on the top right side of the main window.

Properties List

• Identification and Rename Function. You can rename an object by using the corresponding button. Note that widget IDs must use only alphabetical characters (a..z & 0..9) and must start with a letter.
  

• Background Color You can choose here the background color for a widget. If you keep it to “default”, then the default Theme color will be used.
  

  

  

  

  

• Background Class. Predefined Color Classes, including the Transparent Class.
  

• Background Custom Color. A custom color value, defined as rob color with alpha (transparency) value, or an hexadecimal color ( #FFFFFF for instance) The alpha value is the level of transparency for the selected Widget, from 0 (full transparent) to 100% (Opaque). This option is not available when using a default Theme (such as bg-primary, bg-dark…) or a Gradiant.
  

• Gradiant Background. When this option is selected, you can then select 2 to 4 colors in order to define a gradient background. The Knob button on the right side allows to set the direction of the gradiant.
  

• Background Image. Most of the Widgets can have a background image. You can set the Display Mode (Cover , Contain) , the Repeat option and the alignment of the background.
  The Parallax option will add a Parallax effect to the image
  

• Alignment. Choose here the Alignment you want to apply to the widget and its contents. It can be Left, Centred, Right , Justify or no-wrap.
  

• Sizing and Display. You can set here the Height and Width of the widget, in pixels or percentage for the width. Note that Widgets have natively a Responsive behaviour, it means that you should almost never define a fixed width or Height.
  

• BreakPoint (Responsive Web Site Only). With that option you can decide if a widget is hidden for screens wider than a specified width in pixel or smaller than a specified screen size.
  

• Visibility (WeApps Only). This option lets you decide if a widget is visible or not on a specified target mobile OS. By default a widget is always visible, but you can decide to hide it only on iOS or Android.
  Width(%): if you want to force a size in percentage.
  

• Overflow. Lets you define the behaviour of an objects when elements within the object overflow the element's box. The possible settings are: visible, scroll, hidden, vertical or horizontal scroll.
  

• Size Constraint. The min and max size for a widget.
  

• Text Color. The text color for the selected widget: can be a pre-existing class (eg. Text-black), or a custom color.
  

• Text Style. The text main style: Bold, Italic, Underline, Overline or Line through
  

• Font. Lets you choose the ont used for the selected widget. This popup will only display the Fonts added to the project thanks to the GoogleFonts list (See Project Settings for more details about WebFonts). If you haven’t added any font to the project, the font will only allow the “default” property value.
  

• Size. Althought all text widgets have a default size ( see Typographie for more details), it is possible to change the pixel size of a text. The “Reset to default” button set back the default size of the widget.
  

• Text Weight. Lets you define the weight of the text, can go from 100 (Light) to 900 (bold). Note that this option will override the Bold text style (if set).
  

• Spacing. Lets you define the spacing in pixels between letters (css attribute letter-spacing).
  

• Case. You can force the case of a text by using this popup, the possible options are lowercase, uppercase or capitalized.
  

• Clampin. With the Clampin option, you can define the fixed number of lines displayed for a paragraph.
  

• Line Height. Line height of the text in pixels.
  

• Margin. The margin is the space in pixel around a widget. It can be applied to all sides of the widget, or independently for each side. It can be a predifined class (4px, 8px etc…) or set to a custom size in pixel. The “Reset to Default” buttons are allowing to restore the default values.
  

• Padding. The Padding is the marginspace in pixel inside a widget. It can be applied to all sides of the widget, or independently for each side. It can be a predifined class (4px, 8px etc…) or set to a custom size in pixel. The “Reset to Default” buttons are allowing to restore the default values.
  

• Borders Type, Width and Color:. You can define here the borders for the current selected Widget. The possible options include the style (plain, dotted…), the color, the size (width) and the sides of the object you want to display a border.
  

• Border Radius. Lets you define the shape of an object, if it has rounded corners or even tranform it to a circle.
  

• Border Shadow. Lets you customise a Shadow effect to Widgets: h-shadow, v-Shadow, blur Radius, Spread Color and opacity