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 TREE VIEW –

Double Click on the Section from the Tree View to have the settings of that section open up. Clicking the Section Panel from Tree View once will scroll the page on right to that particular section.

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 TREE VIEW –

Go to Tree View 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 TREE VIEW –

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 / left panel –

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.

Alternatively, you can choose the DELETE option in the Left Panel 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 Tree View 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 observer –

Click on any module on the right panel, and use the Oberver to navigate to the respective Row. Then, click on the Style icon in left panel to edit the Row’s settings.

2. From breadcrumb bar –

Click on any module on the right panel, and use the Breadcrumb bar to navigate to the respective Row. Then, click on the Style icon in left panel to edit the Row’s settings.

3. From tree view –

Click on any module on the right panel and click the Tree View Icon. Navigate to the respective Row from the Tree view and “Double Click” to edit the Row settings.

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 TREE VIEW –

Go to Tree View in the left panel. The selected Row / Module will be highlighted in the Tree View. Use the ADD ROW button in the tree view to add new rows.

Delete a Row –

1. Using the Observer –

Click on any module on the right panel, and use the Oberver to navigate to the respective Row. Then, click on the DELETE button in left panel to delete the Row.

2. USING BREADCRUMB BAR –

Click on any module on the right panel, and use the Breadcrumb bar to navigate to the respective Row. Then, click on the DELETE button in left panel to delete the Row.

3. USING TREE VIEW –

Click on any module on the right panel and click the Tree View Icon. Navigate to the respective Row from the Tree view and choose DELETE option to delete the Row.

Duplicate a Row –

1. USING the OBSERVER –

Click on any module on the right panel, and use the Oberver to navigate to the respective Row. Then, click on the DUPLICATE button in left panel to delete the Row.

2. USING BREADCRUMB BAR –

Click on any module on the right panel, and use the Breadcrumb bar to navigate to the respective Row. Then, click on the DELETE button in left panel to delete the Row.

3. USING TREE VIEW –

Click on any module on the right panel and click the Tree View Icon. Navigate to the respective Row from the Tree view and choose DELETE option to delete the Row.

Rearrange a Row –

To rearrange a Row, naviate to the Tree View 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 Row’s Layout Manager. You can navigate to the Row’s Layout Manager in the following ways.

1. Using the Observer / right panel

Click on the respective column in the right panel and click on the layout icon in the Observer to open the Row’s Layout Manager (on the left panel) that can be used to switch/swap columns

2. From CONTEXT MENU –

Right click on the any module within the Column and choose the Manage Columns options to open the Row’s Layout Manager that can be used to switch/swap columns.

2. BY CHOOSING THE ENCLOSING ROW –

The row’s structural arrangement defines the placement of columns. Navigating to the corresponding parent row either by using the Breadcrumb Bar or Observer or Tree View will open the Row’s Layout Manager directly. And you can swap/switch columns from there.

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 option 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 option in the Left Panel (above the editor fields) to duplicate 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 rearrange a Module.

1. Right Panel –

Clicking on the module in the Right 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 – ( tree view ) –

Navigate to the Tree View and Click on the respective Module. The modules can be rearranged to different containers here.

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. –

Tatsu Documentation

Related Links