Global Styles

Global Styles are the principal styling features for customizing widgets during website building. They ensure consistency and uniformity in the visual appearance of the widget on your website. Global Styles enable you to create and manage the general styling features of widgets․

The configuration of Global Styles simplifies the process of updating or modifying the widget appearance or behavior, as changes can be applied uniformly across all instances.

The Global Styles features are generated and modified from Design System. Once you modify the variables in Design System, the change is reflected in Global Styles, and the edited variable is automatically updated in Global Styles.

To access Global Styles, select the corresponding widget and drag and drop it onto the Layout Canvas in the Visual Editor. After, click on the widget and navigate to the Styles tab on the Property Panel.

The following styling features are available:

State

State refers to the condition or state of a widget, often based on user interaction or certain conditions. It allows you to define different styles for a widget based on its state, such as when it is hovered over, active, or in a specific state. The following states are available:

Normal - refers to the standard or initial state of a widget when it is not affected by any user interaction or specific conditions.
Hover - refers to the state of a widget when the user hovers over it with the mouse cursor. When a widget interacts with this state its appearance can change, it can show tooltips, revealing additional information, or displaying hover-over menus, etc.
Focus - defines the style of an element when it is currently in focus or active.
Active - refers to the condition or state of the widget when the user performs an action like clicking, tapping, or pressing on the widget.
Disabled - refers to a condition or state of a widget that is disabled and cannot be interacted with by the user. Disabled widgets typically appear grayed out or visually distinct from enabled elements to indicate that they are inactive or unavailable for interaction.
Selected - refers to the active or currently selected state of a widget, indicating that the user has specifically chosen or targeted it for a particular purpose. This state is commonly used for widgets like buttons, navigation menus, tabs, or checkboxes, where the user can make selections or choose specific options.

Display

Display is a global styling approach that enables you to define how an element is displayed on your website.

The following display values are available:

Block - displays an element as a block-level element. It starts on a new line and takes up the full width available.
Inline - displays an element in a line. It flows within the text and does not start on a new line.
Inline-block - displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.
Flex - displays an element as a block-level flex container, enabling a flexible and dynamic layout of flex items.
Inline-flex - displays an element as an inline-flex container with three evenly spaced and vertically centered items arranged in a row. Flex items are laid out using the flexbox model while the container itself remains inline.
None - the element is not displayed at all and does not occupy any space on the layout canvas.

Flex

Flex is a global styling approach for positioning and arranging widgets or elements within a container. This style provides a flexible and efficient way to manage the widgets on your website, allowing easy modification and reordering of widgets within the container while maintaining a consistent visual and structural approach. Flex ensures consistent positioning and alignment of widgets on your website.

The Flex styling feature includes the following properties:

Direction - allows you to determine the direction in which the widgets are laid out: raw for a horizontal layout or *column *for a vertical layout.
Align - allows you to modify the position of the widget inside the container.
Justify - allows you to control the alignment and distribution of widgets along the main axis of the container.
Wrap - allows you to determine whether widgets should wrap to the next line when there is insufficient space in the container.

Alignment

Alignment is a global styling approach that refers to the positioning or arrangement of widgets within a layout. It determines how widgets are positioned relative to each other or the overall design grid. Alignment helps you create a sense of order, balance, and visual harmony in your website design.

The common alignment options are:

Horizontal alignment - allows you to determine how widgets are positioned along the horizontal axis. This includes options like left-aligned, right-aligned, and centered.
Vertical alignment - allows you to determine how widgets are positioned along the vertical axis. Common options include top-aligned, bottom-aligned, and centered.

Typography

Typography is a global styling approach that refers to the consistent use and styling of fonts and typographic elements of the widget. It involves establishing a set of typographic rules and guidelines to ensure consistency and visual harmony on your website.

Typography includes the following:

Heading - allows you to choose the heading of your text to structure the content and indicate the hierarchy of different sections within your webpage.
Font - allows you to choose a set of fonts or typefaces to be used throughout the design. You can add a new font and manage the fonts, to do so, click + New Font. Make the necessary configuration and click Save.
Style - allows you to choose the style of the text, define the font size, determine the spacing between lines of text, and specify the spacing between lines of text.
Note: You can enter negative values for letter spacing for the Title and Paragraph widgets.
Color - allows you to establish a consistent color scheme for text elements of the widget.
Alignment - allows you to determine the position of the text inside the widget.
Formatting - allows you to choose whether your text is capitalized, underlined, or strikethrough.
Text Shadows - allow you to apply a shadow effect to the text content of an element. You can create a visual shadow behind the text, enhancing its visibility and providing a stylistic effect.

Spacing

Spacing is a global styling approach that refers to the consistent application of spacing margins between elements throughout a layout. It involves defining rules and guidelines for the positioning, alignment, and spacing of various widgets.

Spacing settings include the following:

Margin - allows you to manage spaces between elements and widget borders maintaining a balanced and visually pleasing composition.
Padding - allows you to manage spaces within the widget borders.

Size

Size is a global styling approach that refers to the consistent application of dimensions or measurements for various widgets throughout the layout to maintain visual consistency.

Size settings include the following:

Width and Height - allow you to define the width and height of widgets.
Min W (Minimum Width)/Min H (Minimum Height) - allows you to define the minimum width and height of the widget.
Max W (Maximum Width)/Max H (Maximum Height) - allows you to define the maximum width and height of the widget.

When specifying the unit of the measurement (-), the size field (auto) is activated. Thus, you can enter the value and modify the default size of the element:

Aspect Ratio - allows you to set how the width of the widget relates to its height or vice versa.
Overflow - allows you to set the widget content into a smaller area by relevant properties.

Position

Position is a global style approach that refers to the positioning of a widget on a layout. It allows you to determine how the widget is placed and interacts with other elements on the layout.

Position can take several values:

Static - this is a default value. The widget is placed according to the normal flow of the page.
Relative - a widget is positioned relative to its normal position. By using the top, bottom, left, or right properties, you can offset the widget from its original position.
Absolute - a widget is positioned with regard to the Static position similar to the Relative one. When a widget changes its position, the neighboring widgets shift to fill the space left by the changes.
Fixed - a widget is positioned relative to the viewpoint and does not move when scrolling the page (headers, navigation menus).
Sticky - a widget is positioned based on the user’s scroll position. The widget acts as a hybrid of Relative and Fixed positioning. Initially, the widget behaves like Relative, but as the user scrolls past a specified threshold (defined by the top, bottom, left, or right properties), the element becomes "stuck" and remains fixed at that position.

Z Index - defines the order of overlapping between various widgets. Those with a higher index are placed on top of those with a lower index.

Background

Background is a global style approach that allows you to define the background styling of a widget according to your preferences.

It comprises:

+ icon - allows you to add background images and colors;
Visibility - allows you to activate/deactivate the visibility of the existing background.
Bin - allows you to delete the background color.
Color Picker - allows you to choose the color for your widget background and style the details.

When clicking on the color picker, a pop-up window opens with the following options:

Color picker
Variables

Color Picker

It comprises the following color types:

Solid - allows you to select a widget background color. Click the corresponding color on the color palette, enter the color's hex code, and adjust the RGBA and HSLA values.
Gradient - allows you to select gradient color of the following types:
- Linear - a color type that creates a smooth transition of colors in a linear direction.
- Radial - a color type where the colors radiate outward from a central point, creating a circular or elliptical gradient effect.

Note: The maximum number of color-stop points is five.

Image - allows you to add a background image to your widget. You can modify the uploaded image according to the following options:
- Cover - enables you to set the image for the whole widget’s background. You can move the image horizontally (Left) and vertically (Top) and select its position (Scroll, Fixed and Local).
- Contain - enables you to amplify the image, i.e. the background image is scaled proportionally to fit within the container while preserving its aspect ratio and is visible without exceeding the container boundaries. You can move the image horizontally (Left) and vertically (Top) and select its position (Scroll, Fixed and Local).
- Custom - allows you to modify the width and height size of the background picture.

Variables

Allows you to choose a color from your color variables (see Design System > Variables).

Box Shadow

Box shadow is used to add a shadow effect to an element. This property allows you to create shadows for elements, giving them a sense of depth and making them stand out from the page.

Borders

Borders is a global style approach that allows you to define the widget border style, radius thickness, and color. It enables you to customize the appearance of the border surrounding an element.

It comprises:

Radius - allows you to define the radius of the widget’s corners. It enables you to add rounded corners to the widget.
Width - allows you to define the width of the widget corners.
Color Picker - allows you to choose a color for your widget border frame. Click the corresponding color on the color palette, enter the color's hex code, adjust the RGBA and HSLA values, or select the corresponding color from the list of color variables.

You can set the line pattern style options: Solid, Dashed, or Dotted.

Transforms

Transforms refers to a set of properties that allows you to apply various transformations to widgets.

The following options are available:

Move - allows you to shift a widget from its current position (according to the parameters given for the X/Y-axis).
Scale - allows you to increase/decrease a widget size (according to the parameters given for the width and height).
Rotate - allows you to roll the widget clockwise or counterclockwise by a given angle.
Skew - allows you to tilt a widget along either the horizontal or vertical axis, or both.

Filters

Filters, in global styles, allow the application of visual effects or filters to widgets. You can modify their appearance by changing colors, adjusting brightness/contrast, applying blurs, and more.

To access Filters click + on the right side of Filters and select the corresponding option. The following options are available:

Opacity - applies transparency to the widget. A value of 0% is completely transparent, while a value of 100% leaves the input unchanged.
Drop Shadow - creates the illusion of shadow behind the widget, giving it depth and making it appear as if it is lifted off the background. It is a blurred and offset version of the widget shape drawn in a particular color.
Blur - creates the softened or out-of-focus appearance of a widget adding a visual effect of reduced clarity or smoothness.
Saturation - adjusts the saturation of a widget. Saturation refers to the purity or richness of color. By adjusting the saturation, you can make colors appear more vibrant or desaturated. A value of 0% indicates that the input is fully unsaturated, whereas a 100% one depicts that the input is entirely saturated.
Contrast - creates the contrast of a widget affecting the difference between light and dark areas and enhancing or reducing the visual distinction between them. It allows you to modify the degree of contrast in a widget's appearance.
Brightness - adjusts the brightness of a widget, affecting the overall lightness or darkness of its appearance. It allows you to make a widget brighter or darker by modifying the intensity of its colors. A value of 0% creates a completely black image, while a value of 100% leaves the input unchanged.
Invert - applies an inverted color scheme to a widget.
Sepia - applies a sepia tone to a widget, giving it a vintage or aged appearance.
Grayscale - converts the colors of widgets to shades of gray, effectively removing the color information and creating a grayscale effect.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.

Unknown Author