Skip to main content
Learnengineawesome

Design

Designing Your Layout with Design Blocks

Design blocks in Engine Awesome are essential tools for creating visually appealing layouts. They give you the flexibility to arrange content in a way that improves both design and user experience. The key design blocks include:

  • Group : This block allows you to combine multiple elements into a single unit. Grouping is beneficial for maintaining visual consistency and logical organization, especially when managing complex layouts with various components.
  • Row : This block aligns elements horizontally, making it perfect for creating side-by-side displays, such as navigation menus or comparison views. It enhances the flow of information by allowing users to see related content at a glance.
  • Stack : This block vertically aligns your content, ideal for structured forms or lists. Stacking elements helps to guide users through processes, ensuring they complete tasks in a logical sequence.

Why Use Design Blocks?

Incorporating design blocks is a best practice because they provide structure and flexibility. Wrapping all fields, widgets, query blocks, and actions inside these blocks ensures that your layout remains adaptable, visually balanced, and user-friendly . By combining and nesting these blocks, you can create unique and interactive interfaces that match your specific needs, offering seamless navigation and interaction for your users.

In this section

Text
The Text block adds static written content, labels, headings, or instructions, to a layout that stays the same for every user.
Group
The Group block wraps multiple layout blocks so you can apply styling, backgrounds, borders, and conditional visibility to them as a unit.
Row
The Row block places multiple layout blocks side by side horizontally, letting you position fields, buttons, and text on the same line.
Stack
The Stack block arranges content vertically and gives you explicit control over spacing, alignment, and visibility of grouped blocks.
Grid
The Grid block arranges content in a structured multi-column, multi-row layout, ideal for dashboards and card-style galleries.
Image
The Image block adds a fixed image to a layout for branding, decoration, or instructional visuals that stay the same across all records.
Tab Panel
The Tab Panel block divides a layout into multiple named tabs, each with its own set of blocks, keeping complex pages organized.
← PreviousGo to External URLNext →Text