Layout Grid

Grid Layout Definition and Configuration

This guide provides step-by-step instructions for defining and configuring grid layouts in the StoryBoard AI application. The layout grid defines the physical arrangement of sections on a page. Follow these steps to effectively create, modify, and configure layouts for your storyboards.

1. Accessing Grid Layout Definition

Navigation: From the main menu, go to Setup: Story Boards > Setup: Story Board Grid Layouts.
This will open a summary page displaying all existing layout grids.

2. Overview of Summary Page

The summary page lists all the existing grid layouts with the following actions available:
- View: Click the view icon to see the layout configuration.
- Edit: Click the edit icon to modify an existing layout.
- Create New: Use the button at the top to define a new grid layout.
A Refresh button allows you to reload the page to view any updates made by you or others.

3. Creating a New Grid Layout

Start New Layout:
- Click the Create New button.
- Enter the following fields:
  - Template Name: Provide a unique name for the layout.
  - Template Description: Add a brief description to identify the purpose of this layout.
  - Type: This is a free-text field for classification; use it to organize templates (e.g., "Book Layout" or "Presentation Layout").
  - Layout Style: Choose from the dropdown options: Book Portrait, Book Landscape, or Presentation HD.
Saving the Layout:
- Click the Save button at the button.
- To clear fields and start over, click Reset.
- If you decide not to proceed, click the Close button. If there are unsaved changes, a confirmation prompt will appear.

4. Editing an Existing Grid Layout

Open for Editing:
- Select a layout from the summary page and click the edit icon.
Open for Editing:
- Template Name, Description, and Type: All can be updated.
- Layout Style: It is recommended not to change this if the layout is already in use. If necessary, ensure no pages are affected.
Refresh Option:
- Use the Refresh button to discard uncommitted changes and restore the last saved version.
Saving Changes:
- Once edits are complete, click Save.
- If exiting without saving, click Close and respond to the confirmation prompt as needed.

5. Configuring the Grid Layout

Access Configuration:
- Click the Configure button for the chosen layout on the summary page.
Grid Map:
- Opens a visual grid map showing the available sections and their layout.
- Use the + icons to add new sections.
- Zoom: Adjust the zoom level with the slider at the top for better visibility.
Adding Sections:
- Click on any + icon to add a section.
- Close the Grid Map to return to the layout screen, where the new sections appear.
Modifying Sections:
- Resize: Mouse over a section to reveal handles for resizing.
- Move: Drag a section to a new location, ensuring it does not overlap.
- Remove: Right-click a section and select Remove.
Locking Sections:
- Right-click a section to lock it, preventing further adjustments without unlocking.

6. Tips and Best Practices

Layout Style: Set this upfront to avoid issues with proportions later.
High-Resolution Grids: Use the zoom tool for precise configurations.
Responsive Design: Grids are responsive, but verify how content fits to avoid scroll or truncation issues.
Template Reuse: Plan and save reusable templates to maintain consistency across pages.

7. Error Handling and Warnings

If unsaved changes are present, the system will prompt you when attempting to exit.
If a layout change affects existing content, ensure to review the impact on linked pages.