Build and Arrange Content
Putting Pro Mode into Practice
Now that you understand the building blocks, let's get hands\-on with creating and arranging content in Pro mode\. This lesson covers the essential steps for adding elements, managing layouts, and manipulating blocks effectively\.
Entering and Using Pro Mode
To begin creating or editing content, you first need to access the Pro mode editor\. Once inside, the interface is designed for intuitive interaction\.
VideoOpen your content in the editor and click on the dedicated Pro mode icon to activate the advanced editing environment\.
Utilize the '\+' icon in the left menu or on a selected layout to open the pop\-up window for adding elements, layouts, or saved resources\.
Select an item from the left sidebar and drag it directly onto your layout area to place it\. This intuitive process allows for flexible arrangement without being restricted to single\-element columns\.
Adding and Managing Content
The editor offers powerful tools for adding new content and managing existing components efficiently\. You can add elements, layouts, or saved resources from the 'Elements', 'Resource', and 'Deleted' tabs in the pop\-up window\.
Adding Items
Click the '\+' icon\. Select the 'Elements' tab for default items, 'Resource' for saved assets, or 'Deleted' to restore removed items\. Drag and drop from the sidebar\.
Managing Layout Types
Select a layout and use the dropdown menu to change its type \(Cell, Container, Absolute\)\. The module will adjust the arrangement accordingly\. You can also lock/unlock layouts via the 'Block Structure' tab using Shift \+ L\.
Layout Configuration Details
Cell Layout (Grid)
Repeatable Cells & Grid Editing
Click 'Make repeatable' to turn a cell into a template for lists \(Complex List\)\. Enter grid editing mode via Cmd \(Ctrl\) \+ E to adjust columns/rows and their sizes\.
Row and Column Management
Add/delete rows and columns using context menus or shortcuts \(Cmd \(Ctrl\) \+ Up/Down Arrow for rows\)\. Configure row height \(pixels, percentages, fractions, auto\) and column settings individually\.
Container Layout (Flex)
Direction and Alignment
Choose the primary direction \(row/column\) and alignment along the main axis \(Start, Center, End\) and cross\-axis\. Define spacing between items using the 'Gap' setting\.
Growth and Shrink Behavior
Elements within a container can be set to grow or shrink \(Shift \+ G/Shift \+ S\) to adapt to available space, crucial for responsive design\.
Absolute Layout (Canvas)
Precise Placement & Sizing
This layout uses coordinate\-based positioning\. You can set specific dimensions \(width/height\) in pixels or percentages, along with min/max size constraints\.
Transform Origin & Anchors
Define the point around which transformations occur and set anchor points for resizing, offering fine\-tuned control over element behavior\.
Each layout type offers specific controls for fine\-tuning arrangement and behavior\. Understanding these settings is key to achieving precise designs\.
50% of users have to churn from this block and do not click on tabs\.Advanced Block and Element Management
Pro mode streamlines the handling of multiple elements and complex compositions through intuitive selection, grouping, and manipulation tools\.
Selection & Grouping: Select individual elements or multiple items \(usingCmd \(Ctrl\)\) for coordinated movement\. Grouping elements lets you rearrange complex compositions without disrupting their internal structure\. Use the 'Block Structure' tab to navigate hierarchies\.
Copy, Cut, Paste & Duplicate: Standard Cmd \(Ctrl\) \+ C/X/V operations apply\. Cmd \(Ctrl\) \+ D duplicates an element adjacent to the original\. Copying and pasting blocks allows for efficient reuse\.
Wrap & Ungroup: Use 'Wrap in Container' \(Shift \+ C\) or 'Wrap in Absolute Row' \(Shift \+ X\) to quickly organize elements\. 'Ungroup' \(Shift \+ U\) extracts a block to a higher level in the hierarchy\.
Save as Resource: To reuse custom blocks or elements across projects, save them to 'Resources' via Cmd \(Ctrl\) \+ S\. This builds your personal library of on\-brand assets\.
Explore detailed documentation
Do not download the file\!
Which shortcut is used to enter grid editing mode for Cell Layouts?
Choose only one correct answer\.
Single Choice QuestionOptions:
- [ ] Cmd \(Ctrl\) \+ D
- [ ] Shift \+ L
- [x] Cmd \(Ctrl\) \+ E
- [ ] Shift \+ C
[Button: Submit]
Streamlining Your Workflow
These tools for adding, arranging, and managing content are designed to accelerate your creation process\. Mastering drag\-and\-drop, layout settings, and management shortcuts will significantly enhance your productivity in Pro mode\.
[Button: Continue]
[Button: Next ]