Designer projectsCreator prototype
Tips and Tricks
Use Grid Alignment Settings

Creator prototype

Tips and Tricks
Use the navigator
Copy the whole content of a page
Copy / Paste from / to Modals
Configure Path Sales Coaching
Use Grid Alignment Settings
Add text next to another element
Center block elements inside a page
Center an element
Set an active value on the Path
Create blank space between fields
Starting with the right design
Drag elements
Why prototyping?
Copy the whole content from one page to another
Copy / Paste elements
Add a background color to a page
Community Design
Export to Aura or LWC
Creator User Interface
Export as PNG
Sharing a folder
Console View
Lightning Component Design
Suggesting mode
Center block elements inside a page
Adding comments
Data and Data table
Organizing designs into folders
Overview actions
Design a calendar
Design a console page layout
Lightning Flow Design
Center an element
Button
Design a search bar
Design a multi-step wizard
Lightning Application design
Path
Use Grid Alignment Settings
Set an active value on the Path
Add text next to another element
Standalone App Design
Copy / Paste from / to Modals
Modal box
Create blank space between fields
Use the navigator
Charts
Copy the whole content of a page
Configure Path Sales Coaching
Design a FAQ
Sharing a Creator project
Share with a public link
HTML Element
Design a custom list-view page
Link action
This article ONLY works when using Avonni Creator. Only customers with an active subscription that was activated on or before December 31, 2021 have access to Avonni Creator.
This article is only valid when working on a Creator project.

Use Grid Alignment Settings

To configure alignment for multiple elements, use a grid element and play with the horizontal and/or vertical alignments.

Horizontal Alignment

You can set horizontal alignment to have your element appear at the left, center or right side.

No Alignment

Spread Horizontal Alignment

End Horizontal Alignment

Center Horizontal Alignment

Vertical Alignment

Top vertical Alignment

Middle vertical Alignment

Bottom vertical Alignment


Avonni Designer vs Avonni Builder comparison table

View all the differences between Avonni Designer and Avonni Builder.

COMPARISON TABLE

TABLE OF CONTENTS

Example H2
Example H3
Example H4
Example H5
h6
Example H6
Support

Contact us about anything you couldn’t find here.

Suggest an article
Article feedback
Product
Interface BuilderBuilding BlocksData SourcesPrototypingCustom BrandingInteractions
Use Cases
Data VisualizationData EntryClient PortalInternal ToolMobile App
Resources
Success PlansVideo GuidesHelp DocsBlog
Company
About UsProduct PricingJobsBecome a Partner