{"id":77600,"date":"2016-12-08T11:00:45","date_gmt":"2016-12-08T16:00:45","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=77600"},"modified":"2017-03-01T09:24:30","modified_gmt":"2017-03-01T14:24:30","slug":"opencart-2-x-tm-layout-builder-module-overview","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-tm-layout-builder-module-overview.html","title":{"rendered":"Opencart 2.x. &#8220;TM Layout Builder&#8221; module overview"},"content":{"rendered":"<p>Our Support team is ready to present you a new tutorial that will become an indispensable guide on editing Opencart 2.x templates and make this process easy and effortless. One click on the button and the video will smoothly take you through this step by step.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/A4dYhF958_o\"><\/iframe>\r\n<\/div>\r\n<p>We are going to provide you with short overview of <strong>&#8220;TM Layout Builder&#8221;<\/strong> module. This module serves for quick, simple and handy creation of different variants of the store main page.<\/p>\r\n<h3 class=\"custom\">&quot;TM Layout Builder&quot; module configuration<\/h3>\r\n<ol>\r\n\t<li><p>To configure this module, please, login to your site admin panel.<\/p><\/li>\r\n\t<li>\r\n\t\t<p>Navigate to the <strong>Extensions<\/strong> > <strong> Extensions<\/strong> page and choose the extension type. &quot;TM Layout Builder&quot; extension type is <strong>Modules<\/strong>.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Search for the <strong>Template Monster Layout Builder<\/strong> module.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t<p>You will see several layouts available here. Click on the <strong>Edit<\/strong> button to configure one of the layouts available.<\/p><\/li>\r\n\t<li>\r\n\t\t<p>Alternatively, you can add your layout by clicking <strong>Add New<\/strong> button next to the <strong>Template Monster Layout Builder<\/strong>.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1.jpg\" alt=\"Openart_2.x._TM_Layout_Builder_module_overview_1\" width=\"1280\" height=\"760\" class=\"alignnone size-full wp-image-77601\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1.jpg 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1-150x89.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1-300x178.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1-768x456.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_1-1024x608.jpg 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p>On the next screenshot you can see the <strong>Template Monster Layout Builder<\/strong> module interference. We will check the basic module features further.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2.jpg\" alt=\"Openart_2.x._TM_Layout_Builder_module_overview_2\" width=\"1280\" height=\"760\" class=\"alignnone size-full wp-image-77602\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2.jpg 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2-150x89.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2-300x178.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2-768x456.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_2-1024x608.jpg 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\r\n\t<\/li>\r\n<\/ol>\r\n<h3 class=\"custom\">Basic options overview<\/h3>\r\n<p>To create a new layout, press the <strong>New Layout View<\/strong> button.<\/p>\r\n<p>Module has several buttons available. Those buttons make editing process much easier. Let&#8217;s take a closer look on them:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3.jpg\" alt=\"Openart_2.x._TM_Layout_Builder_module_overview_3\" width=\"1280\" height=\"600\" class=\"alignnone size-full wp-image-77603\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3.jpg 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3-150x70.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3-300x141.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3-768x360.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_3-1024x480.jpg 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n<ol>\r\n\t<li><p>Press <strong>Add Column<\/strong>. After clicking this button you will be able to add rows. This option has several sections available:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4.jpg\" alt=\"Openart_2.x._TM_Layout_Builder_module_overview_4\" width=\"1280\" height=\"587\" class=\"alignnone size-full wp-image-77604\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4.jpg 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4-150x69.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4-300x138.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4-768x352.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_4-1024x470.jpg 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t\t<ul class=\"list\">\r\n\t\t\t<li><p>After adding a column, insert a row. To add rows, press the <strong>Add Row<\/strong> button. The number of columns in the row is unlimited, and you can add as many columns as you need. The width of the columns can be set right after adding them with the help of the Drag and drop function by dragging the right border of the column.<\/p><\/li>\r\n\t\t\t<li><p><strong>Delete<\/strong> button allows you to remove unnecessary columns.<\/p><\/li>\r\n\t\t\t<li><p>After clicking the <strong>Edit<\/strong> button opens pop-up window with a great customization tool which allows you to change column\/row style. It allows you to set the background and change margin values for your blocks.<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_5.jpg\" alt=\"Openart_2.x._TM_Layout_Builder_module_overview_5\" width=\"810\" height=\"590\" class=\"alignnone size-full wp-image-77605\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_5.jpg 810w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_5-150x109.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_5-300x219.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Openart_2.x._TM_Layout_Builder_module_overview_5-768x559.jpg 768w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><\/a>\t\t\t\r\n\t\t\t<\/li>\r\n\t\t\t<li><p>After adding the columns, you should fill them in with some content (modules). To add a module, press the <strong>Add Widget<\/strong> button and select the needed one among the dropdown.<\/p><\/li>\r\n\t\t<\/ul><\/li>\r\n\t\t<li><p>Use the <strong>Delete<\/strong> button to remove column you don&#8217;t need.<\/p><\/li>\r\n\t\t<li><p><strong>Edit<\/strong> button allows you to adjust column style. We have mentioned it above.<\/p><\/li>\r\n\t\t<li><p><strong>Duplicate<\/strong> is a great tool that allows you to duplicate columns without coping them manually.<\/p><\/li>\r\n\t\t<li><p><strong>Sort<\/strong> option allows you to change columns order.<\/p><\/li>\r\n<\/ol>\r\n<p>Check out a large array of top-quality <a href=\"https:\/\/www.templatemonster.com\/opencart-templates.php\"target=\"_blank\"title=\"OpenCart Templates\">OpenCart themes<\/a>.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=A4dYhF958_o?width=1280&amp;height=720\" rel=\"prettyPhoto\">Opencart 2.x. &#8220;TM Layout Builder&#8221; module overview<\/a>\r\n<p>If you&#8217;re looking for a professional template to build a website, view <a href=\"https:\/\/www.templatemonster.com\/blog\/best-opencart-themes-2017\/\" title=\"Best OpenCart Themes 2017\" target=\"_blank\">Best OpenCart Themes 2017<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>We are going to provide you with short overview of <strong>&#8220;TM Layout Builder&#8221;<\/strong> module. This module serves for quick, simple and handy creation of different variants of the store main page.<\/p>\n","protected":false},"author":55,"featured_media":77606,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[482,2285,1376,2499],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77600"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=77600"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77600\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/77606"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=77600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=77600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=77600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}