Using the page editor

In this article, we'll go through the layout of the page editor as well as how to use it. You can use the links below to skip to the relevant section:


Once you've clicked the edit icon on the name of a page (or clicked Save when creating a new page), the page editor will open and you'll see a screen similar to the below:

Page editor layout example

On the left, you have the list of available Tastics that you can drag into a section (for example, HEAD or MAIN) on the page. The list is searchable so you can easily find what you're looking for:

Editor Layout Example Tastic Highlighted

The middle section is the page layout where you add your Tastics to order the content on your page:

Editor Layout Example Page Layout

On the right is the preview section. By clicking the pink link (or typing it into a browser), you can see instantly the changes you make within your page on any browser on any device. If you scan the QR code on your mobile device, it'll open instantly. You can also access the preview by clicking the Preview button on the top right of your screen:

Page Editor layout preview example

If you click a Tastic in the middle section, or you drag a Tastic into your page layout, the right of your screen will change so you can edit the settings of that particular Tastic, including which devices you want to show that Tastic on:

Page Editor layout configuration example

The device icons in the center of the screen highlight which device version you're currently editing, below shows we're editing the mobile version. You can select the different versions (tablet and desktop) to view the different structures per device:

Page Editor Layout Example Icons Highlighted

You can undo or redo any unsaved changes using the arrow icons:

Page editor layout example undo redo

Once you're happy with your changes, click the Save button on the top right of your screen which will save your changes. You can exit the page without saving your changes by clicking the arrow on the top left of your screen:

Page editor layout example save back

Using cells and kits

A cell must be added to a page for you to be able to add Tastics into it.

To add a cell layout to your page, click the blue + icon and select one of the page widths. If you want to add more of the same cell layout, you can click the duplicate icon after you've clicked the more icon (three vertical dots) or by clicking the trash can icon, you can delete the cell and anything within it. If you want to change the width of a cell already in your page, click it and use the Cell width dropdown in the Configuration panel on the right to change it.

Adding cells to a page

Cells create automatic breakpoints for different devices: Mobile, tablet, and desktop. Below is how they will display on each device:

Cell Mobile Tablet Desktop
1/1 1/1 1/1 1/1
1/2 1/1 1/2 1/2
1/3 1/1 1/3 1/3
2/3 1/1 2/3 2/3
1/4 1/2 1/4 1/4
1/6 1/1 1/3 1/6

Once you have your cells in place, you can add your Tastics to them.

You can also add a Tastic kit that you've created in Master by clicking the blue + icon and selecting the Tastic kit you want to add. This article shows you how to create a Tastic kit.

Adding kits to a page

Searching for Tastics

You can either search for the name of a Tastic if you know it, or you can scroll through the list of available Tastics until you find the one you want to add. Tastics are grouped under categories to help you find what you're looking for more easily.

Searching for Tastics

Adding Tastics

Once you've added a layout element to your page, you can add a Tastic to it by dragging it from the list and dropping it into your cell. You can add multiple Tastics within 1 cell or just have 1.

Adding Tastics to pages

The Tastics available in your list will depend on what your developers have made available to you. In the next article, we'll look at what kind of Tastics are possible.

Duplicating Tastics

You can copy a Tastic within the same page to save you time on inputting the same details.

You just need to hover on the Tastic you want to create, click the duplicate icon and it will copy the Tastic within the same cell. You can then move the Tastic to where you want it to be and adjust the Configuration as you wish.

The same can be done for a cell and any Tastics within that cell.

Duplicating Tastics and Cells

Reordering or removing Tastics

To reorder a Tastic, you can just drag and drop it to where you want it to be. That can be within one cell or moving it into another cell. You can even create a new empty cell and drag it into there. But you can't drag it into a kit, the kit must be edited in Master.

Reordering Tastics

To remove a Tastic, you just need to hover on the Tastic you want to delete, select the More icon, select the Trash Can icon, and then click the Save button for your page.

Removing Tastics

Configuring Tastics

When you add a Tastic to your page or you click on one within your page, you activate the Configuration panel for that Tastic. Any changes you make will only affect this specific Tastic.

Every Tastic has a General configuration that is accessible using the expand button. You can select if you want the particular Tastic to be available on certain devices (mobile, tablet, and desktop) using the toggle switch. You can also add a name so you know what the Tastic is and it isn't shown anywhere to your customers.

Configuration panel settings

The other configuration sections will be shown depending on what type of Tastic you're configuring. These generally include Position (for where it will sit within your cell on your page), Image (where you can change your image and edit the text over the image), Stream Selection (where you can select, edit, or add an API search for a list of products), Links (where you add URLs for your users to open), and Content (where you add text).

Later, we'll show you what's possible within these configurations, but first, let's look at what Tastics can be available to you.

‹ Back to article list

Next article ›

List of Tastics

Still need help? Contact us Contact us