BUY OSHINE
BUY EXPONENT
Buy Tatsu Pro

Tatsu Documentation

Note** -  If you find the screenshots in this article not similar to tatsu interface in your site, it is likely that you are using an older version of the Plugin. You can refer the docs for old version of TATSU for Oshine and Exponent in that case. 

Related Links

The ease of building a page using page builder is highly reliant on how easily a user can navigate from one module to another. There are 4 major components that can be used to navigate between modules within Tatsu. You will always have more than one ways to cruise across the modules while you are editing the pages. 

Tree View

Tree view is the foremost tab on the Left Panel of TATSU. This precisely has the entire contents of your page displyed in a tree structure. The Tree View has a preview text of all your modules and has an indicator if the module is “hidden” in any specific view port. 

  • Single Click – Expand and Navigate to respective module in the right panel
  • Double Click – Navigate to the Editor Panel of the respective module.
  • Drag to Rearrange – Drag and drop a panel in the tree view to rearrange it’s placement in the page.
  • Add Module – You can add Section, Row and Module from the Tree view using the Button.
  • Menu – There are also menu options in the Tree View to Delete, Duplicate and Rename the modules.

Context Menu

Right Click on any module on the Right Panel and you will find the Context Menu that will open up. The context menu has the following options that enables you to navigate and perform the important operation within the builder. 

  • Cut – This option cuts the selected component be it a section, row or a module and moves them to the clipboard along with its short code.
  • Copy – This option copies the shortcode of the selected component to its clipboard so that it can be pasted later in your desired module or place. ( kindly note that the columns cannot be copied or cut)
  • Paste – Used to paste the shortcode that is copied to the clipboard.
  • Delete – This option is used to delete the selected section, row, column or module.
  • Duplicate – This option is used to duplicate the selected section, row, column or module.
  • Add Section – This option is used to add a section below the selected component.
  • Add row – This option is used to add a row below the selected component.
  • Add module – This option is available only if you select a module or a column and right click on it and is used to add a module below the existing module.
  • Save as Template – This option is used to save the entire section as a template along with it rows and modules which can be loaded in any other page of your site.
  • Edit – Click on this option in order to edit the selected section column or a module, the various edit option will available on the left side page builder. The uses of the various editing option that is present in the editing panel are discussed here (link to the page).
  • Manage columns – This option will navigate you to the Column Switcher that can be used to modify the layout of the columns in the corresponding row. This option is visible when you open the context menu from the Column or Modules. 
  • Copy styles – Copy the Styles of a particular module. This option will copy just the settings and not the contents. Ex. on a Button Module, Copy Styles will copy just the Color, BG Color and Animations, but not the Button Text or the URL.
  • Paste Styles – Styles that are copied using Copy Styles option can be pasted on another module of the Same type. The contents of the Source and Target modules are kept intact. This option can be used when you want many of the modules in your page to have the same appearance.

Observer

Observer is the Blue Box that appears around a modules as you select them on the Right Panel. The observer has 4 parts. The Title of the module and option to navigate to Editor Panel of the parent components, link to go to Tree View, Delete and Duplicate icon. 

NOTE – You will note that the observer of a “Column” block will have to icon to take you to the Column Manager in addition to the above options. You will not find the icon to Duplicate a Column, as a coulmns cannot be duplicated. 

Breadcrumb Bar

Breadcrumb bar is visibile in the Top Left corner of the Right Panel. This is visibile and changes as you select the modules from the Right Panel. You can click on the Parent modules and you will find that the Edtior fields of the parent opens up in the Left Panel.