Site Design Canvas
Equip yourself with the knowledge to visually engage with elements within your project directly on the Appmint site canvas.
The Site Canva section simplifies website development empowering you to design and customize your website like a pro.
On the site Canva you have the ability to interact with project elements visually, making it more convenient than searching through code snippets for editing.
Getting Started
Accessing the Site Design Canvas:
Sign in to your Appmint account and the editor panel will open up.
On the dashboard, select the website you want to work on from Approot, and click on the "Site Page" tab to enter the Site Design Canvas.
Understanding the Interface:
Familiarize yourself with the layout of the Site Design Canvas. You'll find a variety of tools and options to design and customize your website according to your preferences.
However, this guide will concentrate on the canvas and its four key aspects of element interaction:
- Selection - the act of clicking on elements to choose them.
- Hierarchy - the ability to view and select an element's parent.
- Movement - the action of clicking and dragging to relocate an element.
- Preview - observing how an element will appear on a live site.
Design Canvas Overview
In Appmint Site Design Canva, you can interact with elements in your project visually on the canvas, making editing a breeze.
1. Selection: Choosing Your Canvas Elements
Simply click on an element on the canvas to select it. A visual highlight will indicate the chosen element.
As you hover over elements, a green outline typically highlights their borders for easy selection.
Click on any element within the Orange indicator box, then click on the Tune item icon to open the element editorl.
2. Hierarchy: Knowing Your Element's Parent
Elements can sometimes be nested within others, creating a hierarchy. To view and potentially select an element's parent:
The selected element's label might display the names of its parent and grandparent elements. You can select the parent element by clicking its label in this menu.
On the right-hand side is also a set of design tools you can use when you select the element you want to edit.
3. Effortless Movement: Repositioning on the Canvas
Click, hold, and drag the selected element to a new location on the canvas.
This allows you to easily rearrange your website's layout. As you move the element, visual indicators might show where it will be positioned relative to other elements.
4. Live Preview: See Your Design in Action
Above the Site Design Canva is a live preview functionality. You see how your design or update appears on the live website.
Design Canvas Usage
The Design Canvas is where you'll visually construct your website pages.
A flexible environment where you can drag and drop elements, use prebuilt components or use your coding knowledge to create your desired website.
Here's how it works:
- Drag Content Here to Start: Begin by dragging elements onto the Canvas to start building your webpage. The Canvas is divided into three sections:
- Header Section: Add header elements such as navigation menus, logos, or banners.
- Website Body: Construct the main content of your webpage, including text, images, videos, and more.
- Footer Section: Place footer elements such as copyright information, contact details, or additional navigation links.
Learn how more about the header, content, and footer section
Adding Components into Site Canva
Appmint offers three types of components to enhance your website webpage:
- Standard HTML Component: Embed HTML code from external sources like Tailwind CSS or Figma UI directly onto your webpage.
- Basic Components: Use design elements like text, video, photo, or gallery to create web pages from scratch. Customization abilities are limited, and you can't edit the underlying HTML code.
- Design-Ready Components: Drag prebuilt sections like headers, footers, contact forms, or galleries onto your webpage. Customize these components to fit your needs.
Saving and Reusing Sections of the Site Canva
Any section you add to your webpage can be saved and reused for future projects. Simply click on the save icon below the section to save it to your library for easy access.
With Appmint's easy-to-use design canvas and powerful features, you have the flexibility to create stunning websites tailored to your unique needs.
Happy designing!