Categories

Featured templates

PrestaShop 1.6.x. “TM Mega Layout module” overview

Sandra Kim June 24, 2016
Rating: 4.3/5. From 6 votes.
Please wait...

This tutorial provides an explanation of how to manage the TM Mega Layout module in PrestaShop 1.6.x.

“TM Mega Layout module allows you to customize the layout of the main page of the website. Let’s overview the general settings of this module.

In order to locate the module, navigate to Modules and Services -> Modules and Services -> TM Mega Layout module and press the Configure button.

prestashop_tm_mega_layout_module_overview_1

First of all, the module allows you to customize the layout for 3 sections (hooks) on the home page: DisplayTopColumn, DisplayHome, DisplayFooter. Let’s review how you can change the layout of the DisplayTopColumn section.

prestashop_tm_mega_layout_module_overview_2

Each layout contains of 3 main parts: Wrapper, Row and Column. Wrapper is a container for rows and columns. You can use the following options in order to modify the Wrapper:

  1. Add Row option allows you to add another row to the wrapper.

  2. Delete row button (trash icon) lets you delete the entire wrapper.

  3. Edit button (brick icon) lets you specify the CSS class for wrapper section.

  4. Stylize option (pencil icon) allows you to select the styles for wrapper section such as: background color and background image, border styles and box shadow.

  5. Move option (cross arrow icon) allows you to drag and drop the entire wrapper section to the needed position.

prestashop_tm_mega_layout_module_overview_3

In order to modify the Row in your Wrapper, you need to click the three dots button at the right side. You will see the following options:

  1. Add Col option allows you to add columns to the row. You will need to specify the Bootstrap classes (col-xs, col-sm, col-md, col-lg) in order to define the width of the column. Also, you can add your own specific class to the respective field.

  2. Edit row lets you enter your custom CSS class for this row.

  3. Stylize option allows you to select the styles for this row.

  4. Delete option lets you delete the row.

prestashop_tm_mega_layout_module_overview_4

Each row contains the columns. In order to modify the Column, you need to click the three dots button at the right side. You will see the following options:

  1. Add Row option allows you to add inner row to the column.

  2. Add Module option lets you add the available module to the column as well as define a specific CSS class for it.

  3. Edit Column option allows you to edit the width of the column (you can change Bootstrap classes for each resolution).

  4. Stylize allows you to select the styles for this column.

  5. Delete option lets you delete the column.

prestashop_tm_mega_layout_module_overview_5

You can add the Module to your column, however, you can only choose the available modules. In order to modify the selected module, you need to click the three dots button at the right side. There are only two options:

  1. Edit settings allows you to define a specific CSS class for the module.

  2. Delete option lets you delete the module from this column.

prestashop_tm_mega_layout_module_overview_6

In addition to this, there are two extra buttons below your Wrapper section:

  1. Add wrapper allows you to add another wrapper, thus you will be able to create another section with rows, columns and modules.

  2. Add row lets you add another row to your home page’s layout.

prestashop_tm_mega_layout_module_overview_7

Another powerful feature of this module is a possibility to create your own layouts (so-called Presets). By default, there are 3 presets for DisplayTopColumn hook: TopColumn1, TopColumn2, TopColumn3. In order to change the preset, you need to choose the desired one in the list, and press the Use as default link. Once you refresh the website, you will see the changed layout.

prestashop_tm_mega_layout_module_overview_8

In order to add your own preset layout, you need to perform the following steps:

  1. Press the Add Preset button.

    prestashop_tm_mega_layout_module_overview_9
  2. Specify the Layout name and press the Save button.

    prestashop_tm_mega_layout_module_overview_10
  3. Add wrappers, rows, columns and modules to your liking.

  4. Press the Use as default link in order to apply your preset layout to your website’s home page.

    prestashop_tm_mega_layout_module_overview_11

We have covered the general settings for “TM Mega Layout module based on the DisplayTopColumn hook. You can customize the layout for DisplayHome and DisplayFooter hooks similarly as well as add your preset layouts to these sections on the home page.

Now you know how to manage “TM Mega Layout module in PrestaShop 1.6.x.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. “TM Mega Layout module” overview
Prestashop Themes Download
This entry was posted in PrestaShop Tutorials and tagged layout, Prestashop, TM Mega Layout. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket