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

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. 

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. 

  • 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 panel in TATSU.
  • Tree View – The Tree View is the panel where the user can manage the macro level layout of the page. You can rearrange Sections and Rows using the Tree View. Learn More about using Tree View. 
  • 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.
  • Global Settings – This panel contains settings that will affect the whole page. This panel has options to edit the post/page name, change the “status” of the post/page. This panel also has option to add any custom Javascript and CSS to be triggered. 

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.
  • Revisions – Using this option, you can view the revisions for the current page right within tatsu panel. Note – to be able to see the revisions history, kindly ensure if the revision option is enabled for the site by your hosting provider. 
  • 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. 
  • Breadcrumb Bar – On the top left corner of the screen you will find the Bread Crumbs bar to navigate to the parent level modules. 
  • Preview Bar – On the top right corner of the screen, you will find the option to preview / reload the page. You can also navigate to the dashboard and front end from here.