Ucraft NextUC Academy

Global Styles

Suggest Edits

Introduction

This article describes the utilization of Global Styles in Visual Editor.

Overview

Global Styles are the principal styling features for customizing widgets. Contrary to the Features generated per the widget characteristics, the Global Styles are designed for each widget.

The Global Styles provide you with quick and easy access to the relevant information as well as enable you to create and manage generic styling for widgets.

To access the Styles section, press the Widgets icon on the Visual Editor Left Panel, select any widget, and drag-and-drop/adjust it onto the Layout Canvas. Afterward, click on that widget and reach the Styles division on the Property Panel on the right.

This section includes the following styles:

Alignment

The Alignment section arranges the widget in a correct relative position:

Accordingly:

  • Horizontal Left Align

  • Horizontal Center Align

  • Horizontal Right Align

  • Vertical Top Align

  • Vertical Middle Align

  • Vertical Bottom Align

Typography

The Typography formatting intends for designing the texts. It is applied to widgets that include written elements in their design. It enables you to make any formatting adjustments you require in this area, such as:

  • Font
  • Text Style
  • Size
  • Color
  • Alignment
  • Line Height
  • Letter Spacing
  • Capitalization

Spacing

The Spacing formatting defines how to place elements within layouts and components.

This unit comprises:

  • Padding - the space between its frame and content.
  • Margin - the area around a widget's border.

Size

The Size formatting sets the dimension of the element by choosing the desired value term.

This unit comprises:

  • Width
  • Height
  • Min W (Minimum Width)
  • Min H (Minimum Height)
  • Max W (Maximum Width)
  • Max H (Maximum Height)
  • Aspect Ratio - sets a widget's width-to-height and vice versa ratios.
  • Overflow - fits the widget's content into a smaller area by relevant properties.

The following values configure the dimensions previously stated:

  • px (Pixel)
  • % (Percentage)
  • em (Element)
  • rem (Root Element)
  • vh (Viewport Height)
  • vw (Viewport Width)

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:

Position

The Position property specifies the type of positioning method applied for a widget. Refer to the Position properties for more information.

This unit comprises the following adjustments:

  • Type
  • Z Index - defines the order of overlapping between various widgets. The higher index has the advantage of being positioned on top.

The Type adjustment involves the below position values:

  • Static - this is the default positioning for each widget placed in the crafting area. The widget is placed according to the standard flow of the page.
  • Relative - widget with a Relative position is placed with regard to its normal position. The widget adjusts from its normal position by setting the top, right, bottom, and left properties.
  • Absolute - a widget with an Absolute position is set with regard to the Static position similar to the Relative one. That is, when a widget changes its position, the neighboring widgets shift to fill the space left by the changes.
  • Fixed - a widget with a Fixed position is placed with regard to the viewport, meaning it always stays in the same place even when scrolling the page (for instance, a Header). Use the top, right, bottom, and left properties to position the widget.
  • Sticky - a widget with a Sticky position value, such as the Fixed one, fastens the element to the viewport. However, in this case, the widget can be fixed until a specific point, which is adjusted by setting the furthest point.

Display

The Display section comprises:

  • Switcher - enables to show/hide the widget:

Background

The Background section sets the background parameters based on your design requirements.

This unit comprises:

  • + Sign - adds up to five background colors or images.
  • Visibility - activates/deactivates the existing backgrounds.

📘

Adding an opacity will display the Structure Tree according to the “From Top to Bottom” hierarchy.

  • Bin icon - deletes the colors.

  • Color Picker - this enables you to choose the color for your widget background and style the details. When clicking on the color picker, the window pops up with the following options:

    • Solid - pick a color from your preset color library, or select the + Sign on the bottom left to add a new color:

  • Gradient - a gradient line defines a Linear gradient.

The maximum number of color-stop points is five.

  • Image - add image background to your widget and activate the following options:

  • Cover - this button enables to set the image for the whole widget's background. While depending on the widget proportions, you can move the image horizontally (Left) and vertically (Top):

  • Contain - choose this button to amplify the image. It also enables to move the image horizontally (Left) and vertically (Top) as in the Cover option. You can amplify the image: up, down, and both options in one:

  • Custom - click this button if you require all of the Contain button's features and the image width and height size modification option:

Borders

The Border section sets the parameters defining the Radius and Thickness values, as well as the Border Style.

This unit comprises:

  • Radius - defines the radius of the widget’s corners. It allows you to add rounded corners to the widget.
  • Thickness - sets the thickness of a widget.

Choose the Square icon from the Settings and set an identical value for all the corners/sides.

Select the Rounded icon and set various values for each corner/side custom-made.

  • Color Picker - sets the color and opacity to finalize your Border Frame:

Set the size through the following values:

  • px (Pixel)
  • em (Element)
  • rem (Root Element)
  • vh (Viewport Height)
  • vw (Viewport Width)

Set the line pattern style options from the dropdown menu as follows:

Transforms

The Transforms section enables the following options:

  • Move - shifts a widget from its current position (according to the parameters given for the X/Y-axis):

  • Scale - increases/decreases a widget size (according to the parameters given for the width and height):

  • Rotate - rolls an element clockwise/counter-clockwise (according to a given degree):

  • Skew - inclines a widget along the X/Y-axis by the given angle:

Filters

The Filters section applies graphical effects to a widget. Filters aim to adjust the rendering of images, backgrounds, and borders:

Click on the + Sign and access the following filters:

  • Opacity - applies transparency to the widget. A value of 0% is completely transparent, while a value of 100% leaves the input unchanged.
  • Drop Shadow - applies a drop shadow effect to the widget. It is effectively a blurred and offset version of the widget's shape drawn in a particular color.
  • Blur - applies a focus loss to the widget.
  • Saturation - to saturate the widget, adjust the amount value property. A value of 0% indicates that the input is fully unsaturated, whereas a 100% one depicts that the input is entirely saturated.
  • Contrast - to adjust the contrast of the widget, modify the amount value.
  • Brightness - this applies the effect of making the widget appear brighter or darker. A value of 0% creates a completely black image, while a value of 100% leaves the input unchanged.
  • Invert - inverts the colors of the widget.
  • Sepia - converts the widget colors to sepia.
  • Grayscale - makes the widget appear in grayscale.

👍

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.

Updated 8 months ago