Introduction to Layout & Design Tool

Navigating the Topbar of Layout & Design Tools

This document aims to provide comprehensive guidance on various functionalities available within the TopBar of the tool. The following are the topics to be discussed:

  • Share feedback & device selection
  • Page settings
  • Code Mode
  • Save AB test
  • Add Element
  • Cut, Copy or Paste element
  • Delete element
  • A/B test order
  • Undo, redo & Timeline
  • General and Code View

Share Feedback and Device Selection:

On the right corner of the TopBar within the L&D tool interface, you will notice two essential buttons: Share Feedback and Device Selection

Share Feedback

This button facilitates the submission of suggestions for improving our tool. We highly value your input and encourage you to share any ideas or feedback you may have.

Device Selection

The Device Selection button allows you to seamlessly switch between different devices. You can choose between Desktop, Tablet, and Mobile devices.

Page settings

Navigate to the Page Settings section to customize your page preferences. Here, you can edit settings such as displaying archived tests, tailoring the page layout to suit your needs effectively.

Code Mode

Selecting the Code Mode option grants you access to the underlying code of the page.

Save AB test

The Save AB Test button enables you to save the progress of any B-tests you have been working on. It is essential to provide a descriptive text for record-keeping purposes

Add Element

The Add Element option allows users to incorporate various elements into their layouts, they can choose between a variety of elements and is used throughout all L&D.

Additionally, users can add sub-elements by selecting this option if they have selected an element that allows more sub-elements to be added.

Here you can also search for any desired element to be added.

Cut, Copy or Paste element:

Need to replicate elements across different layouts? The L&D tool simplifies this process with the Cut, Copy, or Paste Element functionality. Users can easily duplicate desired elements onto preferred layouts, facilitating efficient workflow management.

Delete element

The Delete Element icon serves the purpose of removing unwanted elements from the layout.

A/B test order

In the A/B Test Order section, users can modify the display order of A/B tests. Options include "Original Order" and "Last Modified," allowing the user to review the layouts in the desired order

Undo, redo & Timeline

  • Undo: Revert to the previous action with the Undo feature. Note that this action history resets upon saving the layout.
  • Redo: Move forward to the next action after utilizing the Undo option, facilitating seamless navigation and revision.
  • Timeline: The Timeline feature provides a comprehensive overview of all changes made to the layout, enabling users to track modifications effectively.

General and Code View

  • General View: Check and modify default settings for elements within the General View,
  • Code View: Access the specific code corresponding to each element within the Code View

Table of Contents