Layout Settings

The Layout section in the Universal Wescle Block allows you to configure the structure, spacing, and responsiveness of your block. This section gives you full control over columns, margins, paddings, alignment, and breakpoints, ensuring that your design looks great on all screen sizes.

Responsive Breakpoints & Flexbox Options

The Breakpoints settings allow you to control how your block behaves on different devices:

Desktop 🖥️

Tablet 📱

Mobile 📲

You can enable:

✔ Flex Grow – Allows the block to expand dynamically within the available space.

✔ Flex Shrink – Reduces the block size when necessary to fit smaller screens.

✔ Flex Basis – Defines the initial size of the block before it adjusts to screen size.

💡 Use breakpoints to adjust block layouts for better mobile responsiveness.

Column Layout & Structure

You can divide your block into multiple columns for better organization:

Main Column (Default content area)

Column #2

Column #3

Column #4

💡 Drag and drop elements between columns to reorganize your layout efficiently.

Width & Height Control

You can adjust the Max-Width and Max-Height to control the size of the block using:

PX (Pixels) – Fixed size, best for precise layouts.

EM / REM – Scales with text size for a more flexible design.

% (Percentage) – Adapts the block size based on its parent container.

💡 Set width limits to maintain consistent spacing and prevent oversized elements.

Spacing & Alignment

Margin – Controls the space outside the block.

Padding – Adjusts the space inside the block.

Main Gaps – Defines the spacing between elements within the block.

Border Radius – Allows rounding of corners for a softer look.

Vertical Align – Aligns content to the top, center, or bottom of the block.

💡 Use padding for inner spacing and margins for external gaps to maintain a balanced design.

Border & Column Settings

Border – Customize the block’s border size and style.

Columns – Enable multi-column layouts for better content organization.💡 Borders help create visual separation between sections, improving readability.