The Style Manager provides a complete set of tools to customize the look and layout of any element. It helps you visually control positioning, spacing, fonts, and other styling details without needing to write custom CSS.
Below is a breakdown of each section in the Style Manager and what it includes:
The General section handles the element’s basic structure and placement on the page.
You can configure:
Display Type – Defines how the element behaves in layout (e.g., block, inline, flex).
Positioning – Controls the element’s position (static, relative, absolute, or fixed).
Margin – Sets space outside the element on all sides (top, bottom, right, left).
Use this section to control how your element interacts with surrounding components.
The Dimension section determines the element’s overall size and spacing.
You can set:
Width and Height – Define the base size of the element.
Max Width and Max Height – Limit the maximum size for responsive layouts.
Margin and Padding – Adjust the spacing outside and inside the element.
This section helps maintain consistent spacing and proportion across your layout.
The Typography section defines how text appears within an element.
Available options include:
Font Family – Choose the font style.
Font Size – Adjust text size for readability.
Font Weight – Control the thickness or boldness of text.
Letter Spacing – Set spacing between individual characters.
Color of the Text – Pick the text color.
Line Height – Adjust the vertical spacing between lines.
Text Alignment – Align text to the left, right, center, or justify.
This section is essential for achieving clean, legible, and visually consistent text design.
The Decorations section allows you to enhance the appearance of your element.
You can adjust:
Background Color – Apply a solid color behind your element.
Border – Add a border around your element and select the border style (solid, dashed, dotted, etc.), width, and color.
Border Radius – Round the element’s corners for a softer look.
Box Shadow – Add shadow effects to create depth or visual contrast.
Background – Set custom backgrounds, such as gradients or images, to give your element more visual appeal.
This section is ideal for adding visual emphasis and subtle design touches to make elements stand out.
The Extra section offers advanced styling options.
Available controls include:
Opacity – Adjust the transparency level of the element.
Transition – Set animation timing for smoother style changes (e.g., hover effects).
Use this section to add polished, dynamic effects to your design.
Here’s the step-by-step tutorial on how to create a simple custom page: