Atri LabsAtri Labs

No results

Help CenterDocumentation (Docs)Atri Visual Builder Guide

Atri Visual Builder Guide

Last updated October 30, 2023

Introduction:

The Atri Visual Builder is a cornerstone tool of Atri Labs, designed to empower users to create stunning digital projects without the need for coding. Its intuitive drag-and-drop interface ensures that even those new to the digital realm can craft professional-quality websites, applications, and more. This guide will take you through the essentials of the Atri Visual Builder, helping you harness its full potential.

Step-by-Step Guide:

  1. Accessing the Visual Builder
  • From your Atri Labs dashboard, select the project you wish to work on.
  • Click on the "Visual Builder" option to launch the tool.
  1. Understanding the Workspace
  • Familiarize yourself with the builder's layout, including the toolbar, element palette, and canvas area.
  • Hover over icons and tools for tooltips that explain their functions.
  1. Adding Elements
  • Browse the element palette, which houses components like text boxes, images, buttons, and more.
  • Drag your desired element onto the canvas and position it as needed.
  1. Customizing Elements
  • Click on any element to reveal customization options, such as size, color, font, and more.
  • Use the side panel to delve deeper into advanced settings and styles.
  1. Working with Layouts
  • Explore the layout tools to create sections, rows, and columns.
  • Adjust spacing, alignment, and responsiveness to ensure your design looks great on all devices.
  1. Incorporating Media
  • Add images, videos, and other media files to your project.
  • Use the built-in media library or upload your own assets.
  1. Interactive Features
  • Integrate interactive components like sliders, carousels, and accordions.
  • Customize their behavior, transition effects, and user interactions.
  1. Preview & Responsiveness
  • Use the "Preview" mode to see your design in action.
  • Toggle between desktop, tablet, and mobile views to ensure responsiveness across devices.
  1. Saving & Versioning
  • Regularly save your progress to avoid any data loss.
  • Utilize the versioning feature to create checkpoints, allowing you to revert to previous designs if needed.
  1. Seeking Inspiration & Templates - Browse Atri Labs' template library for design inspiration - Import templates and customize them to fit your unique vision.

Conclusion:

The Atri Visual Builder is more than just a design tool; it's a gateway to digital creativity. With its user-centric features and intuitive interface, you're equipped to transform your ideas into tangible digital masterpieces. Dive in, explore, and let the Atri Visual Builder be the canvas for your digital artistry.

Was this article helpful?