🍱 Layouts

The Layout component allows you to create custom containers that organize your app’s content. It supports advanced configuration for slide effects, pagination, slide direction, and several toggles to enhance interactivity. You can also adjust the number of slides visible per view and the space between them.

1. Add the Layout

• Drag and drop Layout component onto the Canvas.
• Place the layout container where desired and adjust its size using percentage values or by dragging its edges.

1. Set and Customize:
   • Left Toolbar:
     • Effect Setting: Choose the transition effect for your layout.
       • Options include Slide, Fade, Coverflow, Flip, Cube, Creative.
     • Pagination Setting: Select the style for pagination controls within the layout.
       • Options include Progress Bar, Fraction, Dynamic Bullets, Static bullets, None.
     • Direction Setting: Define the layout’s slide orientation.
       • Options include Horizontal or Vertical.
     • Toggle Settings:
       • Show Arrows: Turning on this toggle displays arrow controls on the layout, allowing users to manually navigate between slides.
       • Show Scrollbar: When enabled, a scrollbar appears on the layout, giving users an additional method to scroll through slides.
       • Autoplay: Enabling autoplay will automatically advance the slides after a predefined time interval, offering a dynamic presentation.
       • Loop Slides: When the loop toggle is active, the slides will continuously cycle without stopping, creating an infinite looping effect.
       • Free Mode: Activating free mode allows users to scroll through the layout items with no fixed boundaries or snap points, giving them a more fluid control over the movement.
       • Template Based: Enabling this toggle allows you to create reusable templates from the components within the layout container. This lets you save time by replicating consistent styling and structure across your application while simplifying future updates.
     • Slide Settings:
       • Slides Per View: Set how many slides are visible in the viewport at one time.
       • Space Between Slides: Adjust the spacing between individual slides for better visual separation.
     • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
     • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.

• Right Toolbar:
  • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
  • Refer to the Customization Guide for detailed instructions.

tip

The settings available in the right toolbar may vary depending on the selected component type.

---

Best Practices

• Plan Your Structure: Begin by outlining your page’s layout on paper or a whiteboard to decide where content sections and interactive elements belong.

• Keep It Simple: Avoid over-complicating your layout with too many nested containers. A clear and straightforward structure improves readability and performance.

• Consistent Spacing: Maintain uniform spacing between slides and components for a neat, balanced appearance. Adjust the "Space Between Slides" setting as needed.

• Appropriate Transition Effects: Choose effects and pagination styles that complement your content. For instance, use subtle fades for professional designs or dynamic effects for creative presentations.

• User Navigation: Enable navigational toggles like "Show Arrows" and "Show Scrollbar" when manual slide control is beneficial. If you use autoplay or loop slides, ensure users still have the option to interact with the content.

---

Need Assistance?

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].