# Work in the No-Code Editor

## What is Editor Pro Mode?

**Pro mode** is an editor mode that allows you to modify existing block templates and create unique block designs using **units**.

A Pro mode **unit** is an item to operate within a block. There’s 2 unit types:

* A **layout** is a structural basis of how all the parts of the block will be positioned relative to each other to look harmonious;
* An **element** is a building unit of a block that contains different types of content (e.g. image, video, text, etc.).

{% hint style="success" %}
You can grant access to the **Content+ mode** to users who should be able to edit templates but not have access to all the Pro mode features.\
\
**Content+ mode** allows to use basic Cells layout and elements capabilities.
{% endhint %}

## Work in Pro Mode

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FkRHSOYOlf5BHACNktR3Q%2FWork%20in%20the%20Pro%20Mode.png?alt=media&#x26;token=c312dfa9-527c-469e-90db-f8a322a5190a" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
Open an editor and click the **Pro mode** icon.

{% hint style="warning" %}
Templates will not be automatically migrated from the old Pro mode version to the new one; we recommend rebuilding them manually. Until you do this, you'll have to work in both versions of the pro mode.

Old templates now have an icon for switching to Pro mode. Clicking it will delete the template structure, but it can be restored from the deleted elements.
{% endhint %}
{% endstep %}

{% step %}
[Configure units](https://help.parta.io/no-code-editor/edit-units) to change the block structure.
{% endstep %}

{% step %}
[Animate units](https://help.parta.io/no-code-editor/edit-units/animate-a-unit) in single or multiple steps.
{% endstep %}

{% step %}
Customize the specific element [branding settings](https://help.parta.io/~/changes/541/branding/introduction)
{% endstep %}

{% step %}
Manage the element [data settings](https://help.parta.io/~/changes/541/editor/edit-elements).
{% endstep %}

{% step %}
Configure courses for different devices to maximize the user convenience.

{% hint style="success" %}
Tablet and mobile device settings are separate and do not affect each other.
{% endhint %}
{% endstep %}
{% endstepper %}

## Get Started in Pro Mode

{% stepper %}
{% step %}

### Pro-mode’s overview

In this video, you’ll get an overview of Parta’s Pro-mode — a powerful no-code editor for building fully custom layouts.&#x20;

Take a peek at the grid-based canvas, drag-and-drop, containers, animations, and responsive layouts, that will help you create modern, flexible learning experiences that go far beyond standard templates.

{% embed url="<https://youtu.be/rAGoCrCHiYg?si=6R6fNNNRgFAkvCtc>" %}
{% endstep %}

{% step %}

### Block Building 101

In this tutorial, you’ll learn how to build a custom block from scratch in Parta’s Pro-mode using core tools like drag-and-drop, multi-select, and on-canvas resizing.&#x20;

We'll show you how quickly you can add elements, align layouts, edit content, and fine-tune visuals—all directly on the grid without relying on preset templates.

{% embed url="<https://youtu.be/WOQJWF2QzbM?si=k4ot4iFi-4sMpddV>" %}
{% endstep %}

{% step %}

### Creating layers in Pro-mode

In this tutorial, you’ll learn how to layer elements in Parta’s Pro-mode to create richer, more interactive designs.&#x20;

Using real-world examples, the video shows how to stack videos, text, images, and buttons, manage layers, and build branching scenarios with navigation buttons—unlocking dynamic layouts and choice-based learning experiences.

{% embed url="<https://youtu.be/JXNe3g3lJwg?si=ryypu8OD_PXaFpSg>" %}
{% endstep %}

{% step %}

### Complex elements with nested structures

In this video, you’ll learn how to combine and nest elements in Parta’s Pro-mode to build more complex, interactive structures.&#x20;

The tutorial shows how to work within nested grids, customize tabs, and replace static content with simulations to create richer, more dynamic learning experiences.

{% embed url="<https://youtu.be/KmXvjIRAFZI?si=0pW-ofOigcsXQe9Z>" %}
{% endstep %}

{% step %}

### Grouping

In this tutorial, you’ll learn how to use containers in Parta’s Pro-mode to group elements into reusable, structured components.&#x20;

The video shows how to wrap elements into containers, control alignment, spacing, backgrounds, and gradients, and quickly duplicate or save components to Assets for efficient, scalable design.

{% embed url="<https://youtu.be/--byiPN6aLI?si=-ozJV6yhKiZ9sshO>" %}
{% endstep %}

{% step %}

### Customization Part 1: Backgrounds

In this tutorial, you’ll explore Pro-mode customization tools for styling your designs in detail.&#x20;

The video covers adding and fine-tuning backgrounds (colors, gradients, and images), customizing borders and corner rounding, and applying visual effects and backdrop filters to create polished, visually rich layouts.

{% embed url="<https://youtu.be/cWQEY1523R4?si=hjd5ihdxjlP1x0nj>" %}
{% endstep %}

{% step %}

### Customization Part 2: Animations

In this video, you’ll learn how to add animations in Parta’s Pro-mode to bring your designs to life. \
\
The tutorial covers applying preset animations to elements and containers, previewing results, and creating custom animations by defining triggers, steps, and transformations for more engaging, web-like interactions.

{% embed url="<https://youtu.be/qZxccpjZ9mo?si=5vZ0lRIpDKFOr2Sl>" %}
{% endstep %}

{% step %}

### Mobile adaption in Pro-mode

In this tutorial, you’ll learn how to optimize custom blocks in Parta’s Pro-mode for mobile devices. \
\
The video covers adjusting grid and container behavior, and creating device-specific experiences by hiding elements -ensuring your content looks and works great on any screen.

{% embed url="<https://youtu.be/q2H-U_X1pkU?si=2oDXvGRAVKHkICc9>" %}
{% endstep %}

{% step %}

### Productivity hacks

In this tutorial, you’ll discover workflow-boosting features in Parta’s Pro-mode designed for course creators. \
\
The video covers essential keyboard shortcuts, saving elements and containers to Assets, multiselect for bulk edits, and saving blocks as templates - helping you streamline your design process and work more efficiently across projects.

{% embed url="<https://youtu.be/MXlGmOzVuyQ?si=1VT12KB8cEGjJx3j>" %}
{% endstep %}

{% step %}

### All about Embedded code

In this tutorial, you’ll learn how to use Parta’s Embedded code element to bring external content and interactive simulations into your blocks. \
\
The video covers adding HTML, links, and SCORM embeds, combining them with standard Parta elements, and creating richer, interactive learning experiences.

{% embed url="<https://youtu.be/1nDg4b2to6E?si=9xluwTWn2TnFJUpM>" %}
{% endstep %}
{% endstepper %}