Page Builder Overview

You can edit your pages with a live preview of your changes and get to see your results as you build. The fundamental blocks of the Builder are Sections, Rows, Columns, and Modules. The Page Builder is divided into two main panels namely the Left Panel and  Right Panel. The left panel contains the tools required to edit the page and the right panel displays the Web Page that is currently being edited.

Left Panel

The top of Left Panel of the Builder has the Tree View, Modules, Module Editor, and Global Settings.

  1. Panel/Page Title - This is the title of the current page that is being edited by default. The title will change as you navigate within the various panels in TATSU.
  2. Tree View - The Tree View represents the macro-level layout of the page. Learn More
  3. Module List - This panel contains a list of modules that have been included in the builder. To add a module to the page, drag a module from this panel and drop it inside a column in the right panel.
  4. Global Settings - This panel contains settings that will affect the whole page. Learn More about each of the options. 
The bottom of the Left Panel has the following options -
  1. Back to Dashboard - This option takes you back to the dashboard front end page.
  2. Undo & Redo - As the name specifies these options are used to undo and redo the changes that you do within the page builder.

Right Panel

The Right Panel is the actual page that you are editing/creating. You can navigate within modules, create new modules, update and delete modules in the Right panel. The important interactive components of the right panel are the Modules, Context Menu, and the ObserverModules - Components used in building the page such as Sections, Rows, Columns, Text Block Button, etc are called the modules. 

  • Modules - The components that are used to build the contents of the page such as the Heading, Text Block, Button, Icon, etc are called the Modules. Section, Row, and Column are the Structural Modules within which the contents are arranged.
  • Observer - The blue bar that shows above any module upon selection is the Observer bar. The observer can be used to navigate to parent modules and also perform Delete and Duplicate operations.
  • Context Menu - Right-clicking any module opens the Context menu. This has the option to "copy and paste" the settings among modules of the same kind. 
  • Breadcrumb Bar – On the top of the screen you will find the Bread Crumbs bar to navigate to the parent level modules. 
  • Device Switcher - These responsive options are used to display your current page in various screen sizes i.e mobile, tablet, laptop, and desktop which makes it easy for you to have a look at the appearance of your page across various devices at once and also make necessary adjustments to the settings. 
  • Preview Bar – On the top right corner of the screen, you will find the option to Preview, Save, and Publish the page.
  • Manage Variants - On the top left corner of the screen, you will have the option to switch between page variants and also create new ones. Learn More