Design Pages

This document explains how to design elements inside the page types that support visual elements: EBook, Form, Main, Profile, Listing, Wizard, and Text.
You will learn how to create, edit, quick-edit, duplicate, reorder, and delete elements with ease.
Follow along to master the full design workflow inside Applin Studio.

The following pages support UI elements and element-based layout design: EBook, Form, Listing, Main, Profile, Term, Text, Wizard.

Adding an Element

When you are inside any of the supported page types, adding a new element is very simple.
Just click on Add Element — or tap on an existing element and choose Add Element from the menu.

Adding an Element in Applin

Now select the element you want to insert into the page.
For example, here we choose a Button element:

Add Button in Applin

And just like that, the element is placed on your page.
Let’s continue with customizing it.

Button in Applin

Clicking on an Element

To work with any element in the editor, all you need to do is click on it.
Once an element is selected, a set of quick actions will appear, allowing you to:

Edit Element in Applin

  • Edit the element
  • Edit (fast) (faster inline editing)
  • Move it Up or Down within the layout
  • Duplicate the element
  • Delete the element

These options make it easy to manage your content and structure your page exactly the way you want.
You can see these controls in the image below.

Editing an Element

Every element comes with a dedicated static editor that displays all of its configurable fields.
You can easily modify any field, and all changes are saved instantly and live.

Edit Element in Applin

For example, here we change the button text:

Edit Element in Applin

Then we change its color:

Edit Element in Applin

And you can immediately see the updated result on the preview:

Edit Element in Applin

Edit (Fast) Element

If you want to quickly access the most essential fields and make changes faster, simply click Edit Element (Fast).
This option gives you immediate access to the key settings of the selected element, allowing you to modify it without opening the full editor.

Edit Element in Applin

After clicking Edit Element (Fast), you can easily update the element with much greater speed and efficiency.
Edit Element in Applin
This is especially useful when you need to make small adjustments or quickly refine multiple elements in your design.

Reordering Elements

Using the Up and Down buttons, you can adjust the position of an element relative to others:

Edit Element in Applin

This helps you organize your layout exactly the way you want.

Duplicating an Element

With the Duplicate option, you can instantly create a complete copy of any element:

Edit Element in Applin

This is perfect for speeding up your design process when you need similar components.

Edit Element in Applin

Deleting an Element

Click Delete to remove an element from the page:

Edit Element in Applin

No unnecessary steps — it’s fast and straightforward.

Available Elements

Below is a complete list of design elements you can insert and customize.
Click each item to explore its detailed fields and configuration options:

  • Box
    A container used to group other elements together.

  • Br
    Adds a line break (empty vertical space).

  • Button
    A clickable button that triggers an action or navigation.

  • CheckBox
    A multi-select option allowing users to toggle choices on/off.

  • Code
    Displays code with syntax highlighting.

  • Column
    Organizes elements vertically in a column layout.

  • Headings
    Title or subtitle text with various sizes (H1–H6).

  • Hr
    A horizontal line divider.

  • Icon
    Displays an icon from the Applin icon library.

  • Input
    A text input field for user typing.

  • Item
    A list-style item often used in menus or lists.

  • Li
    A simple bullet list item.

  • Listing
    A structured multi-item layout (e.g., cards, rows).

  • Loading
    A loading spinner or animation.

  • Logo
    Displays the app logo or an uploaded logo.

  • P
    Standard paragraph text.

  • Page
    A navigation link to another page.

  • Photo
    Displays an image.

  • Progress
    A progress bar showing completion status.

  • Quote
    A styled quotation block.

  • Radio
    A single-choice option within a group.

  • Row
    Organizes elements horizontally in a row.

  • Select
    A dropdown list for choosing one option.

  • Slider
    A draggable slider for photos.

  • Switch
    A toggle switch (on/off control).

  • Tag
    A colored label or tag.

  • Term
    Displays legal text with an optional accept button.

  • Upload
    Lets users upload files or images.

  • Video
    Displays a video player.

  • Web
    Embeds external web content inside the page.