Container
The Container block is the core structural element in UiCore Blocks. It acts as a flexible wrapper that holds and organizes other blocks, giving you full control over layout, spacing, and alignment. Practically every section of your page begins with a Container.
You can think of it as a building frame — it defines how your content is positioned and how elements inside it respond to different screen sizes.
Key Features
- Flexible Layout Options: Choose between Block, Flex, Grid, or Inline display modes to create anything from simple stacked layouts to complex multi-column designs.
- Advanced Alignment Controls: Use the layout settings to precisely align, justify, and distribute child elements.
- Responsive Design: Adjust spacing, padding, and structure per device directly from the Responsive View.
- Custom Styling: Apply backgrounds, borders, shadows, and typography to create visually distinct sections.
- Nested Containers: Place containers inside other containers for full layout flexibility — ideal for creating layered or modular designs.
Flex Layout
Grid Layout
The unit fr stands for “fractional unit”, and it represents a portion of the available space within the grid container.
So when you see 2fr, it means that the column will take up two parts of the total available space — relative to the other columns’ fr values.
Shape divider
The Shape Divider allows you to add stylish, customizable dividers to the top or bottom of a container, helping you create smooth visual transitions between sections.
You can choose from multiple shape types such as waves, angles, or curves, and adjust their color, height, width, and offset for pixel-perfect alignment.
Each shape can be flipped, inverted, or layered, giving you full creative control over how your section dividers look and interact with the content.
Tip: You can even animate the divider for dynamic, eye-catching section transitions.
Heading Block
The Heading block is used to create titles and text elements that define your page structure and visual hierarchy. It offers extensive styling and formatting options, making it one of the most versatile text blocks in UiCore.
Key Features
- Tag Control: Choose the appropriate HTML tag (H1–H6) to maintain proper SEO and accessibility structure.
- Background Options: Apply solid colors or gradients directly behind your text for more dynamic heading styles.
- Formatting Flexibility: Supports advanced inline formatting, including text highlighting, inserting inline images, adding links, dynamic data, and more.
- Counter Option: If your heading includes a number, you can enable the Counter feature in the settings to animate it as the number becomes visible.
Paragraph Block
The Paragraph block is designed for adding and styling body text or smaller content elements within your layout. It works similarly to the Heading block but uses different HTML tags for proper semantic structure.
Key Features
- Tag Control: Choose between tags such as paragraph or span depending on the text’s role in your layout.
- Text Styling: Customize typography, color, spacing, and alignment directly from the style panel.
- Inline Formatting: Supports rich text features like highlights, inline images, links, dynamic data, and other formatting options.
Button Block
The Button block lets you create call-to-action elements that encourage user interaction. It’s one of the most essential components in UiCore Blocks and is designed to stay visually consistent across your entire site.
Key Features
- Global Styling: All button styles — including colors, typography, and spacing — are managed through Global Styles, ensuring consistency throughout your design.
- Text Toolbar: The button text uses the same inline toolbar as other text blocks, allowing you to quickly edit formatting, add links, or apply basic styling.
- Icons and Images: You can easily include an icon or image alongside your button text and control its position using layout settings such as Flex direction.
- Hover Effects: Supports custom hover animations and interactive visual changes, including transformations and inherited hover behavior.
Tip: You can add an arrow icon to your button, set the layout to Flex, and change the direction to position the icon after the text.
For a smooth hover animation, use a transform effect like translateX(5px).
To make the icon animation trigger when hovering over the whole button, enable the Inherit Hover option.
Image Block
The Image block lets you add and style images with full control over loading behavior, sizing, and presentation — all within the block editor.
Add Image
- Upload from Media Library – select an existing file or upload a new one directly from Media
- Upload from an external URL – paste the direct image link into the field, and it will load automatically without needing to upload it to the Media Library.
Loading Behavior
- Auto – lets the browser decide the optimal strategy.
- Preload – prioritizes loading for above-the-fold or critical images.
- Lazy – defers loading until the image is near the viewport, improving performance on long pages.
Responsive Images
Images are automatically served at an appropriate resolution per device (desktop, tablet, mobile), improving performance while maintaining clarity.
Custom Size & Fitting
- Set custom dimensions (e.g., 500 × 200).
- Use Object Fit to control how the image fills its box:
Mask
You can apply a Mask to shape the image (and any block) from the Style tab.
Works with Default Masks or Custom SVG/image masks.
Note: Mask is available for all blocks in the same Style panel, not just Image.
These are just a few examples — other basic blocks and their detailed functionality will be covered in separate articles.
