What Is Spacer and How Can You Use It Effectively?

Visual clutter can be overwhelming and off-putting to users. With a clear, organized layout, your app becomes more user friendly and easier to navigate. MageNative’s Spacer is the means through which you can achieve perfect balance in your app’s layout.

MageNative‘s Spacer is a simple yet effective feature that helps you adjust the space between different components, making your app not only look better but also enhance its functionality.

How to Set Up the Spacer in Your Mobile App

1. Start by dragging and dropping the Spacer element to your desired location on the app screen.

2. Open the settings by clicking on the edit icon. This will open the customization options in the center of the dashboard.

• Set Height: Select a value between 4 to 24 for the space between components.
• Set Color: Select a color that compliments your app’s design for the spacer background.

3. Click Save to apply and view your changes.

4. If needed, you can delete the spacer by clicking Delete or press Reset to undo any changes made to the spacer.

Note: Delete option is available only in Custom themes.

Best Practices for Using the Spacer

• It can be used to separate blocks of text or, for that matter, group similar items together so that it becomes more readable and visually appealing.
• Use the same spacer height across corresponding sections of your app to improve the overall experience.
• Match the color of the Spacer with your brand’s color scheme to ensure a consistent look.

Use Cases for the Spacer Element

Spacers can be used in home pages to create separation between different categories of products, featured products, and promotional banners.

Feel free to reach out to our support team if you have questions or need support. We are here to help and address any issues you may have!