Build a page with Tatsu

Step 1 – Create a Page

On your WordPress Dashboard, add a new Page by navigating to PAGES > ADD NEW. Give the page a Name and Publish it.

Step 2 – Edit with Tatsu

Upon publishing the page, click on the Edit with Tatsu button at the top of the page. A page that is constructed already with TATSU, can be directly edited by clicking on the Edit with Tatsu link in the admin bar

NOTE

If you have clicked the Edit with Tatsu button, prior to publishing the page, the Page will be saved with a name based on the Post ID generate by WordPress.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Step 3 – Default State

When a new page is created and edited with TATSU, it will preloaded with one Empty Section. You can either load this section with an preset templates, or starting building the page using Tatsu Module.

Step 4 – Working on the Building Blocks and Modules

Sections –

Your page will basically comprise of a set of Sections that hold the Row, Column and Modules within it.

Edit a Section –

Any change you make will be reflected on the respective section in the Right panel. You can change the Background Color, Image, Padding etc. All the settings of a Section are explained in detail in this article on Section.

1. Using Right Panel –

To edit an existing Section, simply click on the Section in the RIght Panel. The List of settings will be displyed on the Left Panel.

2. From Layout Manager –

You edit the Section by using the Edit Option in the Menu present in the Layout Manager.

3. From Context Menu –

You can also edit the Section by using the Edit Option in the Menu present in the Layout Manager.

Add a Section

1. From Layout manager –

Go to Layout Manager and Click on ADD SECTION button. This option will add the new Section as the last section of the Page.

2. From context menu –

Right Click on any module on the right panel, and click on Add Section option to add a new Section right after the section that you are working on.

3. Using the “+” icon in Right Panel –

Hover over the bottom or top of any existing section and you will see a ‘+’ icon that pops up. Cliking on this will add a new Section on top/bottom of the Section that you are working on.

Delete a Section

1. From Layout manager –

Click on the menu icon in the Section Panel to delete any section.

2. From context menu –

Right Click on an existing Section to use the Delete option in the Context Menu to delete the Section.

3. Using the Observer –

Click on an existing Section in the right panel and you will be able to see the Observer popup at the top right corner. Click on the Delete Icon here to delete the Section.

Duplicate a Section

1. From Layout manager –

Click on the menu icon in the Section Panel to duplicate any section.

2. From context menu –

Right Click on an existing Section to use the Duplicate option in the Context Menu to duplicate the Section.

3. Using the Observer –

Click on an existing Section in the right panel and you will be able to see the Observer popup at the top right corner. Click on the Duplicate Icon here to duplicate the Section.

Rearrange a Section –

To rearrange a Section, naviate to the Layout Manger in the Left Panel. Drag the Section panel and Drop at the desired Location. The right panel will automatically scroll to the new location of the section.

Rows –

A Section can hold multiple Rows. Rows contain the Columns. Rows are by default wrapped to the width of the container. However, you have option to enable Full Width option on a specific Row.

Edit a Row –

1. From CONTEXT MENU –

Right Click on any existing Module present in that Row and navigate to CONTAINERS > ROW in the Context Menu to edit that particular Row.

2. From layout manager –

You can also edit the Row by using the Edit Option in the Menu present in the Layout Manager.

3. From Right Panel –

Simply click on the Row in the Right Panel. The List of settings will be displyed on the Left Panel.

Note –

Demarcating a Row may be difficult and hence we recommend using one of the above 2 methods to edit a Row.

Add a Row –

1. From CONTEXT MENU –

Right Click on any module on the right panel, and click on Add Row option to add a new Row right after the row that you are working on.

2. From layout manager –

Go to Layout Manager and select the corresponding Section within which you want to add the Row. Click on ADD ROW button. This option will add the new row as the last Row of the Section.

Delete a Row –

1. Using the Observer –

Click on an existing module in the right panel and you will be able to see the Observer popup at the top right corner. Open up the breadcrumb to select the Row and Click on the Delete Icon here to delete the Row.

2. From layout manager –

Click on the menu icon in the Row Panel to delete any row.

3. FROM CONTEXT MENU –

Right Click on an existing Row to use the Delete option in the Context Menu to delete the Row.

Note –

Demarcating a Row may be difficult and hence we recommend using one of the above 2 methods to edit a Row.

Duplicate a Row –

1. Using the Observer –

Click on an existing module in the right panel and you will be able to see the Observer popup at the top right corner. Open up the breadcrumb to select the Row and Click on the Duplicate Icon here to Duplicate the Row.

2. From Layout Manager –

Click on the menu icon in the Row Panel to duplicate any Row.

3. FROM CONTEXT MENU –

Right Click on an existing Row to use the Duplicate option in the Context Menu to delete the Row.

Note –

Demarcating a Row may be difficult and hence we recommend using one of the above 2 methods to edit a Row.

Rearrange a Row –

To rearrange a Row, naviate to the Layout Manger in the Left Panel. Open the Section that contains the Row and Drag the Row panel and Drop at the desired Location. You can also drop Row from one Section to a different one. The right panel will automatically scroll to the new location of the section.

Columns –

A row can have one or more columns. Columns will house the Modules.

NOTE:

A Column cannot be typically added to a Row. You can choose different Column Layouts that are present while adding a Row. You can switch the Column Layouts even after adding contents within a Column. Number of columns are added based on the chosen layout and their width can be modified later on.
A Column cannot be deleted. You can however choose the Delete option present in the Context Menu or Observer of the respective Column to delete all the contents (modules) within the Column.

Edit a Column –

1. From Right Panel –

To edit an existing Column, simply click on the Column in the RIght Panel. The List of settings will be displyed on the Left Panel.

3. FROM CONTEXT MENU –

Right Click on the respective Column and click on the Edit option in the Context Menu.

Rearrnging the Column –

The Columns can be rearranged using the Column’s Layout Manager. You can navigate to the Column’s Layout Manager in the following ways.

1. Using the Observer / right panel

Click on the respective column in the right panel or click on the layout icon in the Observer and you will see that the Left Panel will have the Column Switcher Icon. Click on this to open the Column Switcher panel.

2. From CONTEXT MENU –

Right click on the respective Column and choose the Manage Columns options to switch the column layouts.

Modules –

Modules are present within a Column. Columns can have any number of modules. The Modules are added one below the other within a Column.

Add a Module –

1. From Right Panel –

A ‘+’ icon will appear on Top and Bottom of any module as you hover around the region. Click on this icon to add a module in the Page.

2. FROM CONTEXT MENU –

Right Click on the respective Module and click on the Add Module option in the Context Menu.

3. IN AN EMPTY COLUMN –

Clicking on an empty column on the Right panel will open the Module List from which a module can be added to the page.

Edit a Module –

Click on the respective module on the Right panel. The editor fields of the module will open up on the Left Panel. Any change you make will be visible on the Right panel.

Delete a Module –

Below are various methods in which you can delete a Module.

1. Left panel –

Click on the respective Module. Use the Delete icon in the Left Panel (above the editor fields) to Delete the Module.

2. FROM CONTEXT MENU –

Right Click on the respective Module and click on the Delete option in the Context Menu.

3. using observer –

Clicking on an existing module will open up the Observer in the Top Left corner. Click on the Delete icon.

Duplicate a Module –

Below are various methods in which you can duplicate a Module.

1. Left panel –

Click on the respective Module. Use the Duplicate icon in the Left Panel (above the editor fields) to Delete the Module.

2. FROM CONTEXT MENU –

Right Click on the respective Module and click on the Duplicate option in the Context Menu.

3. using observer –

Clicking on an existing module will open up the Observer in the Top Left corner. Click on the Duplicate icon.

Rearrange a Module –

Below are various methods in which you can duplicate a Module.

1. Right Panel –

Clicking on the module in the Left Panel, will open the Observer. Click on the Drag Handle in the Observer and to Drop the Module within a different Column, Row or Section. While dragging a module, a Blue border will be visible on all possible Drop Targets as you move.

2. Left panel –

Click on the respective Module. Use the Layout icon in the Left Panel (above the editor fields) to view Layout Manager. The modules can be rearranged here. However, using this option the Modules can only be rearranged within a column.

Responsive Settings

The basic styling of Modules and the Building Blocks are inherently responsive. Over and above that, we have provided finer controls to further make all the modules in yours pages look appropriate in all the screen sizes. With Tatsu, you can optimise the layouts of your pages across all devices. Read this article to know more on how to use the Responsive Settings.

Advanced Operations

We have provided advanced controls in Tatsu, like keyboard Shortcuts, Multi Select CRUD operations for power users, who build huge pages more frequently. Read the articles below on Advanced Settings for more information on how to use these controls. –

Exponent Documentation

Related Articles