Settings & Style Panels

The Settings Panel appears on the right side of the editor when a block is selected. It contains two main sections:

Settings tab

Controls the structural or functional aspects of the block. Contains three main tabs:

Specific Settings

Options that vary depending of block type:

Shortcut Settings

A series of most used settings, taken from the styling tab:

Advanced

Set the tag, block visibility, ID, Class and Attributes:

Style tab

Handles all visual customization options and remains consistent across all UiCore blocks throughout the builder — so you’ll find the same styling controls no matter which block you’re editing, such as:

Layout

Allows you to control the structural behavior and spacing of your block. It includes flexible display options and responsive alignment tools that define how elements are arranged within a container:

Display

Choose how the elements inside the block are displayed:

a) Block – standard vertical stacking of elements

b) Flex – enables flexbox controls for advanced alignment and distribution. This will enable the following options:

Direction

Sets the flow of elements:

Horizontal (→), Vertical (↓), or reversed directions.

Align & Justify

Use these controls to position content inside the container:

Align manages vertical alignment.
Justify manages horizontal spacing and distribution.

Wrap

Defines whether flex items stay on one line or wrap onto multiple lines.

c) Grid – creates a grid-based layout, that will enable the following options:

Grid Outline (helps visualize your grid directly inside the editor).

The Grid Outline toggle helps visualize your grid directly inside the editor.

Show – Displays grid lines to help you see the boundaries and placement of elements.
Hide – Hides the guide overlay for a cleaner editing view.

Auto Flow (defines the direction in which grid items are placed automatically).

Row – Items are arranged from left to right, then wrap to the next row.
Column – Items are stacked vertically before creating new columns.

Columns & Rows (Control the structure of your grid).

Add Column / Add Row buttons let you increase the grid’s dimensions.
Each new column or row dynamically updates the layout, allowing for flexible, responsive designs.

Tip: Use Grid layout when you need to align multiple elements in both directions — ideal for galleries, card grids, or feature sections that require balanced spacing and structure.

d) Inline – displays elements in a single line.

Gap

Sets the space between elements — independently for rows and columns.

Margin & Padding

Control the outer and inner spacing of your block:

Margin adds space outside the block.
Padding adds space inside the block.
Each side (top, right, bottom, left) can be adjusted individually.
Use the link icon to synchronize values across all sides.

Size

Lets you define the exact dimensions and scaling behavior of your block. These options help ensure consistent spacing and layout across different screen sizes and elements).

Width & Height

Set fixed or automatic dimensions for your block:

Auto – the block adjusts its size based on its content.
PX / % / VW / VH – manually define custom dimensions using common CSS units.

Use these settings to create uniform layouts or emphasize certain elements (e.g., equal-height cards or fixed-width columns).

Min / Max Width & Height

Set boundaries for how large or small a block can grow:

Min Width / Height – ensures your element never shrinks below a specific size.
Max Width / Height – prevents the element from expanding too much, maintaining balance in flexible layouts.

These controls are especially useful for responsive designs where block dimensions need to remain consistent across devices.

Overflow

Determines how content behaves when it exceeds the defined dimensions:

Auto – scrollbars appear only when necessary.
Hidden – hides any overflowing content.
Visible – allows overflow to be displayed outside the block’s boundaries.
Scroll – always shows scrollbars for contained scrolling areas.

Background

Allows you to design rich visual layers behind your block. Each background can be customized using multiple layers, giving you full creative control over color, gradient, and image combinations.

You can stack several background layers — each with its own type and settings. Available layer types include:

Solid Color – apply a flat color background (using global or custom colors).
Gradient – create smooth color transitions using linear or radial gradients.
Image – use background images with control over size, position, and attachment.

Typography

Gives you complete control over text appearance and hierarchy within your block. It allows you to adjust font properties, alignment, spacing, and overall readability—all without writing custom CSS.

Font & Style

Font – choose from the available typefaces or inherit the global typography settings.
Style – control font weight and style (regular, medium, bold, italic, etc.).

Size, Line Height & Letter Spacing

Fine-tune the proportions of your text for clarity and balance:

Size – adjust text size using px, em, rem, or %.
Line Height – defines the vertical spacing between lines.
Letter Spacing – controls the space between individual characters.

Color & Link Color

Set custom text and link colors, or inherit values from your global palette to keep design consistency across your site.

Alignment & Transform

Alignment – position text left, center, right, or justified.
Transform – quickly change letter case (uppercase, lowercase, capitalize).

Word & Line Breaking

Control how text wraps and breaks across lines:

Word Breaking – ensures long words or URLs don’t overflow their container.
Line Breaking – adjusts how the browser handles line wrapping and spacing.
Wrap – determines whether text should stay on one line or wrap naturally.

Border & Shadow

Gives you full visual control over the edges and depth of your block. These options help define separation, layering, and focus within your layout.

Border Style & Size

Border Style – choose from border styles such as Solid, Double, Dotted, Dashed, Groove, Hover Glow, Gradient Rotate or None.
Size – set individual border widths for each side (top, right, bottom, left), or link them to apply a consistent value.

Custom Animated Borders

In addition to standard border styles, UiCore Blocks includes a series of custom animated border effects — perfect for adding subtle motion and visual interest to interactive elements.

Hover Glow – adds a soft glowing border animation that activates when the user hovers over the element. It’s ideal for highlighting clickable components such as buttons or cards.
Gradient Rotate – creates a rotating gradient border animation for a more dynamic, modern visual style.

Each animated border has its own set of customization options, allowing you to adjust color, speed, intensity, and direction to match your design aesthetic.

Color

Define the border color using either global palette values or custom colors for perfect visual alignment with your design.

Border Radius

Adjust the corner rounding for your block:

Set values individually for each corner, or link them to apply a uniform radius.
Ideal for creating cards, buttons, or containers with soft, rounded edges.

Box Shadow

Add depth and contrast with one or multiple shadow layers. Each shadow layer can be customized with:

Offset – horizontal and vertical shadow position.
Blur & Spread – control shadow softness and intensity.
Color & Opacity – define tone and transparency for subtle or dramatic effects.

Position

Lets you control how a block is placed within its parent container and how it interacts with surrounding elements. These options are useful for creating layered layouts, overlapping elements, or fixing components in specific areas of the page.

Position Type

Static (none) – default positioning; the block follows the normal document flow.
Relative – allows you to shift the element slightly from its normal position using offsets (useful for minor layout adjustments).
Absolute – positions the element precisely relative to its nearest positioned parent, ideal for overlays or floating content.
Fixed – keeps the element anchored in place when scrolling, often used for headers or floating buttons.
Sticky – behaves like relative positioning until a defined scroll threshold, then becomes fixed.

Z-Index

Defines the stacking order of elements along the Z-axis (front-to-back).

Higher values bring the block forward.
Lower values send it behind other elements.

Tip: If you want to place one element on top of another and control its exact location, set the block’s Position to Absolute. This lets you freely adjust its position (top, right, bottom, left) within the parent container. Then set it’s Z-Index to a higher value than the first block. This technique is perfect for creating overlays, badges, or decorative elements that require precise, pixel-perfect positioning.

Effects

Allows you to enhance your block with visual transformations, filters, and transitions — perfect for adding subtle depth or motion to your designs. These tools help you create polished, professional interactions without custom code.

Opacity

Control the transparency of your element.

Use values between 0 (fully transparent) and 1 (fully visible).
Great for layering effects or creating fade-in animations.

Filter & Backdrop Filter

Filter applies visual effects directly to the element (e.g., Blur, Brightness, Drop Shadow, Grayscale, Hue Rotate, Invert, Opacity, Saturate, Sepia).
Backdrop Filter affects the area behind the element, ideal for frosted glass or blurred overlay effects.

Transform

Use transforms to modify the element’s appearance through rotation, scaling, translation, or skewing.

Perfect for creative layouts, hover effects, or dynamic visual emphasis.

Transition

Define smooth animations between style changes (like hover or state effects).

Control duration, delay, and easing for refined motion.

Blending Mode

Determines how the element’s content blends with the background.

Common modes include: Normal, Multiply, Overlay, Screen, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity.
Useful for creative overlays, highlights, or layered visual effects.

Cursor

Change the mouse cursor when hovering over the element.

Use this to indicate interactivity (e.g., Custom, Pointer, Grab, Move, Text, Not Allowed, Zoom In, Zoom Out).

Tip: Combine filters, transforms, and transitions for modern, engaging micro-interactions that respond smoothly to user actions.

Animations

Allows you to bring your elements to life with smooth, attention-grabbing motion effects. These animations can be triggered when elements enter the viewport or interact with the user, helping guide attention and create a more dynamic browsing experience.

Trigger

Defines when the animation starts:

Entrance – the animation plays when the element first loads or becomes visible on screen.
Scroll – the animation is triggered as the user scrolls through the page, often used for progressive content reveal effects.

Animation Type

Choose from a selection of ready-made animation effects such as Fade In, Slide Up, Zoom, Bounce and many more types that are available in the dropdown menu, covering both subtle and dynamic effects.

Each effect is lightweight and optimized for performance, ideal for enhancing user experience without slowing your site.

Duration

Controls how long the animation lasts — from Fast to Slow — allowing you to adjust pacing for smoother transitions.

Delay (ms)

Adds a delay before the animation begins, useful for sequencing multiple animations or staggering elements in a layout.

Preview

Use the Play Animation button to test the selected effect directly in the editor before applying it to your block.

Tip: Combine Scroll triggers with subtle effects like Fade In for elegant, professional transitions that enhance readability and flow.

Mask

Allows you to apply creative shapes and cutouts to your blocks, giving your layouts a unique, custom-designed look. Masks can be used to crop images, text, or entire sections without external editing tools.

Source

Default Masks – choose from UiCore’s built-in collection of shapes, including circles, rounded rectangles, polygons, and organic blobs.
Custom Masks – upload your own SVG or image file to create personalized shapes or branded layouts.

Mask Size

Defines how the mask fits within the element:

Cover – scales the mask to fill the entire block area.
Contain – keeps the entire mask visible within the block.
Custom – gives full control over the size and position of the mask.

Tip: You can apply a mask to any block directly from the Style tab — not just images or containers. This makes it easy to create unique compositions, creative shapes, and layered visual effects across any part of your design.

10. Custom CSS (allows you to add your own CSS directly to individual blocks, providing maximum control over styling and layout. This feature is perfect for developers or advanced users who want to fine-tune designs beyond the standard visual options).

Note: Custom CSS is a premium feature available exclusively with the UiCore PRO theme.

How it works

The CSS editor lets you write custom styles that apply only to the selected block.
To target the current block, use the {{SELECTOR}} tag — this automatically references the block’s unique class.

This ensures your code affects only that specific element, without overriding other blocks or global styles.

Best practices

Use {{SELECTOR}} for all block-specific styles to keep your CSS scoped and maintainable.
Avoid targeting global elements unless necessary — this keeps your layout stable and easy to adjust.
Combine Custom CSS with the Style panel for full creative control: use visual options for general design, and custom code for precision tweaks.

Tip: Custom CSS changes are instantly reflected in the editor, letting you preview your results in real time.

BUILDER