{"id":131,"date":"2019-01-22T08:30:22","date_gmt":"2019-01-22T08:30:22","guid":{"rendered":"https:\/\/exponentwptheme.com\/documentation\/?page_id=131"},"modified":"2021-07-23T09:10:35","modified_gmt":"2021-07-23T09:10:35","slug":"tatsu-overview","status":"publish","type":"page","link":"https:\/\/exponentwptheme.com\/documentation\/tatsu-overview\/","title":{"rendered":"Tatsu Overview"},"content":{"rendered":"<div  class=\"tatsu-fzfg7u8k7k2d4tgc tatsu-section    tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-fzfg7u8k9x1sxqgw\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fzfg7u8kdh7udx1x\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner  tatsu-column-sticky\" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-fzfg7u8keta69h0g   \"  ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-tatsu-container\"><ul id=\"menu-tatsu\" class=\"menu\"><li id=\"menu-item-266\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-266\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/tatsu-overview\/\" title=\"Tatsu Overview\">Tatsu Overview<\/a><\/li>\n<li id=\"menu-item-267\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-267\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/tatsu-components\/\" title=\"Tatsu Components\">Tatsu Components<\/a><\/li>\n<li id=\"menu-item-268\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-268\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/\" title=\"Build a page with Tatsu\">Build a page with Tatsu<\/a>\n<ul class=\"sub-menu\">\n\t<li id=\"menu-item-231\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-231\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#section-operations\" title=\"Sections\">Sections<\/a><\/li>\n\t<li id=\"menu-item-232\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-232\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#row-operations\" title=\"Row\">Row<\/a><\/li>\n\t<li id=\"menu-item-233\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-233\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#column-operations\" title=\"Column\">Column<\/a><\/li>\n\t<li id=\"menu-item-234\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-234\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/build-a-page-with-tatsu\/#module-operations\" title=\"Modules\">Modules<\/a><\/li>\n<\/ul>\n<\/li>\n<li id=\"menu-item-269\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-269\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/context-menu\/\" title=\"Context Menu and Observer\">Context Menu and Observer<\/a><\/li>\n<li id=\"menu-item-270\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-270\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/responsive-controls\/\" title=\"Responsive Controls\">Responsive Controls<\/a><\/li>\n<li id=\"menu-item-271\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-271\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/multi-select-operations\/\" title=\"Multi Select Operations\">Multi Select Operations<\/a><\/li>\n<li id=\"menu-item-272\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-272\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/copy-and-paste\/\" title=\"Copy and Paste\">Copy and Paste<\/a><\/li>\n<li id=\"menu-item-274\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-274\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-tatsu\/copy-and-paste-module-styles\/\" title=\"Copy and Paste Module Styles\">Copy and Paste Module Styles<\/a><\/li>\n<li id=\"menu-item-275\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-275\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-tatsu\/keyboard-shortcuts\/\" title=\"Keyboard Shortcuts\">Keyboard Shortcuts<\/a><\/li>\n<li id=\"menu-item-273\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-273\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-tatsu\/global-sections\/\" title=\"Global Sections\">Global Sections<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-fzfg7u8kdh7udx1x.tatsu-column{width: 25%;}.tatsu-fzfg7u8kdh7udx1x.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fzfg7u8kdh7udx1x > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fzfg7u8kdh7udx1x > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzfg7u8kdh7udx1x > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fzfg7u8kdh7udx1x > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fzfg7u8kdh7udx1x.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fzfg7u8kdh7udx1x.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fzfg7u8kdh7udx1x.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fzfg7u8rwo66kug9\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJcV8LNXE   \" ><style>.tatsu-SJcV8LNXE .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJcV8LNXE .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Tatsu<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SkvBwKNm4   \" ><style>.tatsu-SkvBwKNm4 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SkvBwKNm4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>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 <strong>Sections, Row, Column and Modules<\/strong>. We will be explaining how Tatsu is structured and the various controls and options that are present.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-video tatsu-youtube-wrap tatsu-mpdvCkQ69   \" ><div class = \"be-video-embed be-embed-placeholder\"><div class = \"be-youtube-embed\" data-video-id = \"GH1e34J0SiU\" data-autoplay = \"0\" data-loop = \"1\"><\/div><\/div><\/div><div  class=\"tatsu-module tatsu-divider-wrap  tatsu-fzfmhs334umjwrw   \"  ><style>.tatsu-fzfmhs334umjwrw .tatsu-divider{height: 1px;width: 100%;background: #efefef;}.tatsu-fzfmhs334umjwrw.tatsu-divider-wrap{text-align: left;}<\/style><hr class=\"tatsu-divider\"\/><\/div><div  class = \"tatsu-special-heading-wrap  tatsu-fzfmhs32jvg4vg3y \"  \"  ><style>.tatsu-fzfmhs32jvg4vg3y.tatsu-special-heading-wrap{font-size: 15px;margin: 0px 0px 20px 0px;text-align: left;}.tatsu-fzfmhs32jvg4vg3y.tatsu-special-heading-wrap .tatsu-title{letter-spacing: 2px;color: #313233 ;}.tatsu-fzfmhs32jvg4vg3y.tatsu-special-heading-wrap .tatsu-border{background: #313233;}.tatsu-fzfmhs32jvg4vg3y.tatsu-special-heading-wrap .special-heading-inner-wrap:hover .tatsu-title{color: #ffffff ;}<\/style><div class = \"special-heading-inner-wrap tatsu-border-style1 tatsu-expand\" ><div class = \"tatsu-border\" ><\/div><h6 class = \"tatsu-title\">LAYOUT<\/h6><\/div><\/div><div  class=\"tatsu-module tatsu-divider-wrap  tatsu-fzfmhs31y98on1d6   \"  ><style>.tatsu-fzfmhs31y98on1d6 .tatsu-divider{height: 1px;width: 100%;background: #efefef;}.tatsu-fzfmhs31y98on1d6.tatsu-divider-wrap{text-align: left;}<\/style><hr class=\"tatsu-divider\"\/><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SywjKYVmV   \" ><style>.tatsu-SywjKYVmV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SywjKYVmV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>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.<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r156YKEm4   \" ><style>.tatsu-r156YKEm4 .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-r156YKEm4.tatsu-inline-text{margin: 0px 0px 15px 0px;}@media only screen and (max-width: 767px) {.tatsu-r156YKEm4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Left Panel<\/h5>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJI19Y4QN   \" ><style>.tatsu-rJI19Y4QN .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJI19Y4QN .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>There are 3 sections in the Left Panel of the Tatsu Page Builder namely the Layout Manager, Modules, Module Editor.\u00a0<\/p>\n<\/div><\/div><div class=\"tatsu-row-wrap  tatsu-row-has-one-half tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols tatsu-inner-row-wrap  tatsu-clearfix tatsu-SJl_MctNXE\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-half tatsu-column-image- tatsu-column-effect-  tatsu-BJ5GqYV7V\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-S1nGqtEX4  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-S1nGqtEX4.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;}<\/style>\n<ul class=\"exp-step-list\">\n<li><strong>Layout Manager<\/strong> &#8211; 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.\u00a0<\/li>\n<li><strong>Module List<\/strong> &#8211; 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.<\/li>\n<li><strong>Module Editor<\/strong> &#8211; 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.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-BJ5GqYV7V.tatsu-column{width: 50%;}.tatsu-BJ5GqYV7V.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 00px 0px;}.tatsu-BJ5GqYV7V.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-BJ5GqYV7V > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-BJ5GqYV7V > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BJ5GqYV7V > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-BJ5GqYV7V > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-BJ5GqYV7V.tatsu-column{width: 50%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-BJ5GqYV7V.tatsu-column{width: 50%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-BJ5GqYV7V.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-half tatsu-column-image- tatsu-column-effect-  tatsu-S1xqMqFNXE\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-HyixRKVQN  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 323px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 238.39009287926%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/left-panel-top-1.jpg\" ><img class = \"tatsu-gradient-border\" alt = \"\" title = \"left-panel-top\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/left-panel-top-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-HyixRKVQN .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 60%;}.tatsu-HyixRKVQN.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-S1xqMqFNXE.tatsu-column{width: 50%;}.tatsu-S1xqMqFNXE.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-S1xqMqFNXE > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-S1xqMqFNXE > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-S1xqMqFNXE > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-S1xqMqFNXE > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-S1xqMqFNXE.tatsu-column{width: 50%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-S1xqMqFNXE.tatsu-column{width: 50%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-S1xqMqFNXE.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HJCNjFVXV   \" ><style>.tatsu-HJCNjFVXV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HJCNjFVXV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>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.\u00a0<\/p>\n<\/div><\/div><div class=\"tatsu-row-wrap  tatsu-row-has-one-half tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols tatsu-inner-row-wrap  tatsu-clearfix tatsu-ryx3OstN74\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-half tatsu-column-image- tatsu-column-effect-  tatsu-BkpuiKN7N\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-HJdKiFEQN  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-HJdKiFEQN.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;}<\/style>\n<ul class=\"exp-step-list\">\n<li><strong>Save<\/strong> &#8211; This option is used to save all the changes that you have made inside the page builder.<\/li>\n<li><strong>Undo &#038; Redo<\/strong> &#8211; As the name specifies these options are used to undo and redo the changes that you do within the page builder.<\/li>\n<li><strong>Responsive options<\/strong> &#8211; 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.<\/li>\n<li><strong>Save as Template<\/strong> &#8211; 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.<\/li>\n<li><strong>Load template<\/strong> &#8211; This option is used to load the section or page that is saved as template.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-BkpuiKN7N.tatsu-column{width: 50%;}.tatsu-BkpuiKN7N.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-BkpuiKN7N > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-BkpuiKN7N > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BkpuiKN7N > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-BkpuiKN7N > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-BkpuiKN7N.tatsu-column{width: 50%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-BkpuiKN7N.tatsu-column{width: 50%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-BkpuiKN7N.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-half tatsu-column-align-middle tatsu-column-image- tatsu-column-effect-  tatsu-BJlpOiY4m4\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-single-image tatsu-module align-center tatsu-image-lazyload tatsu-BkphfcVQN  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 297px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 176.43097643098%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"left-panel-bottom\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/left-panel-bottom-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-BkphfcVQN .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 100%;}.tatsu-BkphfcVQN.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-BJlpOiY4m4.tatsu-column{width: 50%;}.tatsu-BJlpOiY4m4.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-BJlpOiY4m4 > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-BJlpOiY4m4 > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BJlpOiY4m4 > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-BJlpOiY4m4 > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-BJlpOiY4m4.tatsu-column{width: 50%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-BJlpOiY4m4.tatsu-column{width: 50%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-BJlpOiY4m4.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzfnxl0nci4auvk0   \" ><style>.tatsu-fzfnxl0nci4auvk0 .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-fzfnxl0nci4auvk0.tatsu-inline-text{margin: 0px 0px 15px 0px;}@media only screen and (max-width: 767px) {.tatsu-fzfnxl0nci4auvk0 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Right Panel<\/h5>\n<p>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 <strong>Modules, Contexual Menu<\/strong> and the<strong> Observer.\u00a0<\/strong><\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-SkdFTTUXN  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1920px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 44.010416666667%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"right-panel\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/right-panel.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-SkdFTTUXN{margin: 0px 0px 30px 0px;}.tatsu-SkdFTTUXN .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 100%;}.tatsu-SkdFTTUXN.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-BkPvVRVXV  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-BkPvVRVXV.tatsu-text-block-wrap .tatsu-text-inner{width: 90%;text-align: left;}<\/style>\n<ul class=\"exp-step-list\">\n<li><strong>Modules<\/strong> &#8211; The structural modules in Tatsu are Section, Row and Column.<\/li>\n<li><strong>Observer<\/strong> &#8211; 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 <strong>Observer<\/strong> for more details.<\/li>\n<li><strong>Context Menu<\/strong> :\u00a0Right 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 <strong>Context Menu.\u00a0<\/strong><\/li>\n<\/ul>\n<\/div><\/div><div class=\"tatsu-row-wrap  tatsu-row-has-one-half tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols tatsu-inner-row-wrap  tatsu-clearfix tatsu-BygrquC47N\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-half tatsu-column-image- tatsu-column-effect-  tatsu-S1I9uRN7E\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-B16CKRVm4   \" ><style>.tatsu-B16CKRVm4 .tatsu-inline-text-inner{width: 100%;text-align: center;}.tatsu-B16CKRVm4.tatsu-inline-text{margin: 0px 0px 10px 0px;}@media only screen and (max-width: 767px) {.tatsu-B16CKRVm4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><span class=\"palette-2 h9\">oBSERVER<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-B1a5OAEQ4  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 958px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 106.68058455115%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"observer\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/observer.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-B1a5OAEQ4 .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(237,237,237,1); max-width: 100%;}.tatsu-B1a5OAEQ4.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-S1I9uRN7E.tatsu-column{width: 50%;}.tatsu-S1I9uRN7E.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-S1I9uRN7E > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-S1I9uRN7E > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-S1I9uRN7E > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-S1I9uRN7E > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-S1I9uRN7E.tatsu-column{width: 50%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-S1I9uRN7E.tatsu-column{width: 50%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-S1I9uRN7E.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-half tatsu-column-image- tatsu-column-effect-  tatsu-BkeU9OCEQV\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzfwh6gd9icb6t7k   \" ><style>.tatsu-fzfwh6gd9icb6t7k .tatsu-inline-text-inner{width: 100%;text-align: center;}.tatsu-fzfwh6gd9icb6t7k.tatsu-inline-text{margin: 0px 0px 10px 0px;}@media only screen and (max-width: 767px) {.tatsu-fzfwh6gd9icb6t7k .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><span class=\"palette-2 h9\">Context Menu<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-BJZeFCEQ4  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 964px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 126.55601659751%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"context-menu\" data-src = \"https:\/\/exponentwptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/context-menu-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-BJZeFCEQ4 .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(237,237,237,1); max-width: 100%;}.tatsu-BJZeFCEQ4.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-BkeU9OCEQV.tatsu-column{width: 50%;}.tatsu-BkeU9OCEQV.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-BkeU9OCEQV > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-BkeU9OCEQV > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-BkeU9OCEQV > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-BkeU9OCEQV > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-BkeU9OCEQV.tatsu-column{width: 50%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-BkeU9OCEQV.tatsu-column{width: 50%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-BkeU9OCEQV.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-external-image tatsu-ryRddRVmN  \" ><div class=\"tatsu-single-image-inner \" style=\"\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"\" ><\/div><img class = \"tatsu-gradient-border\" data-src = \"\" alt =\" \"  src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-ryRddRVmN .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-ryRddRVmN.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByLIIcVmN   \" ><style>.tatsu-ByLIIcVmN .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByLIIcVmN .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\"><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-fzfg7u8rwo66kug9.tatsu-column{width: 75%;}.tatsu-fzfg7u8rwo66kug9.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 0px 40px;}.tatsu-fzfg7u8rwo66kug9.tatsu-column > .tatsu-column-inner{border-width: 0px 0px 0px 1px;border-color: rgba(237,237,237,1); }.tatsu-fzfg7u8rwo66kug9.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fzfg7u8rwo66kug9 > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fzfg7u8rwo66kug9 > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzfg7u8rwo66kug9 > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fzfg7u8rwo66kug9 > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fzfg7u8rwo66kug9.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fzfg7u8rwo66kug9.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fzfg7u8rwo66kug9.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><style>.tatsu-fzfg7u8k7k2d4tgc .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-fzfg7u8k7k2d4tgc > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzfg7u8k7k2d4tgc > .tatsu-top-divider{z-index: 9999;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/exponentwptheme.com\/documentation\/tatsu-overview\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-131","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":0,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"wp:attachment":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}