Editor Layout

Once you've clicked the Edit icon, the Editor will open and you'll see a screen similar to the below:

Editor Layout Example Welcome

On the left, you have the list of available Tastics that you can drag into a Region (eg 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 will open instantly. You can also access the Preview via the Preview button on the top right of your screen:

Editor Layout Example Preview Highlighted

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 details of your Tastic, including which devices you want to show that Tastic on:

Editor Layout Example Configuration Panel Highlighted

The Mobile Phone icon with the dropdown shows that you are currently editing the Mobile version of your Page. You can select the different versions (Tablet and Desktop) to view the different structures per device. The Eye icon next to the preview button allows you to Hide or Show the Tastics with the setting of not visible on the device you are editing:

Editor Layout Example Icons Highlighted

You can Undo or Redo any changes using the Arrow icons:

Editor Layout Example Redo Undo Icons Highlighted

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 click the arrow on the top left of your screen:

Editor Layout Example Back Save Icons Highlighted

Later, we'll explain in more detail how to utilize the Editor, but for now that's the end of the First Time Users. Please pick the next user section to learn more about using Frontastic specifically for your role.


Next Section: For Developers ›

Next Section: For Frontend Managers ›


JUMP INTO ANOTHER ARTICLE IN THIS SECTION:

Welcome to Frontastic
Who We Are and What We Do
Frontastic Terms
Logging In To Frontastic
Backstage Homepage Layout
Stage App Layout

Still need help? Contact Us Contact Us