purchase now

Exponent Documentation

Related Articles

Tatsu

Tatsu is a live, front-end, fully visual page builder, that is fast and fluid. You can edit your pages with live preview of your changes and get to see your results as you build. The fundamental blocks of Tatsu are Sections, Row, Column and Modules. We will be explaining how Tatsu is structured and the various controls and options that are present. 

LAYOUT

Tatsu Page Builder is divided into two panels, the left panel, right panel and top bar. 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

There are 3 sections in the Left Panel of the Tatsu Page Builder namely the Layout Manager, Modules, Module Editor. 

  • Layout Manager – The layout manager is the panel where the user can manage the macro level layout of the page. You can rearrange Sections and Rows using the Layout Manager. 
  • Module List – The module list panel contains a list of modules ( pre-styled content blocks like text field, buttons, icons etc ) 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.
  • Module Editor – This panel contains all the settings and inputs that control the styling of the various modules. To access this panel, click on a module in the right panel or you can also use the EDIT menu button from the layout manager.

At the bottom of the left panel of the you can find set of buttons such as the save , undo , redo , responsive options , save as template and load template. 

  • Save – This option is used to save all the changes that you have made inside the page builder.
  • Undo & Redo – As the name specifies these options are used to undo and redo the changes that you do within the page builder.
  • Responsive options – 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 you page across various devices at once.
  • Save as Template – This option is used to save the entire page as a template. In order to save the entire page as a template click on this button and assign a unique template name which can be loaded in any other page with your website by using the load template option.
  • Load template – This option is used to load the section or page that is saved as template.
Right Panel

The Right Panel is the actual page and this is where you will see the changes as you make modifications to the options in the Left Panel. You can also 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, Contexual Menu and the Observer. 

  • Modules – The structural modules in Tatsu are Section, Row and Column.
  • Observer – The bar that shows on top left of any module when clicked is called the observer. The observer can be used to navigate to parent modules. You can also find the options to navigate to the Layout Manager of the respective module, and perform Delete and Duplicate operations. Read this article on Observer for more details.
  • Context Menu : Right click on any Module to open the Context Menu. Using the options in this menu, you can Edit, Delete, Duplicate modules. You can navigate to parent modules. Additionally you can copy the Styles of a module and paste them on a similar module elsewhere in the page. Read this article for explanation on each option in the Context Menu. 

oBSERVER

Context Menu