This module is designed to allow creating custom layouts (presets) for hooks and displaying them at site instead of
默认位置. This module advantage is allowing you to create different hook markups and modify them up to
你的需求.
模块的功能特点和特点
要求:
PrestaShop 1.6+
PHP 5.4+
特点:
Module includes 5 hooks: 'Header', 'Top 列', '首页', 'Footer' and '产品 Footer'.
In case module is not present in the hook, it can't be added to 预设.
Module can be displayed in 预设 only once, the same as in a hook.
Module position in 'Modules and Services -> Positions' section does not affect 预设.
The module does not allow you to configure different modules. 不能设置不同的模块
配置各种预设.
Module provides you with an option for changing module position and setting up the grid for 3 hooks:
displayTop列, display首页, displayFooter. Changing the modules position in 'Modules and Services -> Positions'
section will not affect the modules position in 预设. 如果模块没有被添加到钩子中,它就不能
可以添加到预设中.
将模块集成到主题中
Without this step your presets will not be displayed at the frontend.
上面列. In order to add custom preset to the top列 hook, you need to perform the following 步骤:
'Header' is a hook that combines 2 standard hooks: displayNav and displayTop. 这个钩子对应于
网站标题.
'Top 列' corresponds to the original displayTop列 hook. 这个钩子紧跟在Header钩子之后.
'首页'对应于最初的display首页钩子. 这个钩子只出现在主页面上.
'Footer'对应于原始的displayFooter钩子.
'产品 Footer' corresponds to the original displayFooter产品 hook, 产品页面显示的是哪个
footer.
TM巨型布局主面板
The main TM巨型布局 module configuration panel that allows you to add a preset to the required hook and configure
预设.
添加预设
在所需选项卡中按“+添加预设”(1).
下一个, fill in the 'Enter layout name' field in the popup typing the new preset (2) title there and press
“保存”(3).
Preset was successfully created, it's listed among the available presets (4) now. 新创建的预置为
选择编辑(5).
预设激活
首先,从列表(1)中选择所需的预设.
按“默认使用”(2)切换器.
预设被激活. If you need to display this preset only on some pages, open the dropdown (3) and
选择您需要的页面. 要应用更改,请在列表区域外单击. 在所有设备上显示的预设
pages will be marked with a filled star in 预设s list, 另一种是只在一些
页面将被标记为部分填充的星号.
移除预设
删除后没有恢复预设的选项.
In order to remove 预设, choose the required preset among the list (1).
接下来,按预设标题附近的购物车(2).
预设被成功移除.
重命名预设
In order to rename 预设, choose the required preset among the list (1).
接下来,按预设标题旁边的铅笔图标(2).
Specify the new preset title (3) in a popup and press 'Rename layout' (4).
已成功重命名预设.
包装器
包装器在默认情况下没有类,它不是一个强制项.
添加包装器
为了创建一个包装器,按“+ Add wrapper”(1).
添加了包装器(2).
向包装器添加自定义CSS类
Adding the custom class will let you create a specific styling for your wrapper by using CSS rules.
为了添加包装器类,按下按钮(1).
您将看到一个弹出窗口, fill in the 'Enter wrapper classes' (2) field there and press a “确认” (3)
button.
成功添加自定义类.
删除包装器
Deleting 预设 item will also cause all of its child items and their styles removing.
为了移除包装,按下购物车按钮(1).
成功删除包装器.
样式化包装器
In order to add custom styles to the wrapper, press the 'pencil' (1) icon in the wrapper block.
In the following pop-up window fill in all the needed fields (you may refer to the documentation 'Styling'
节),然后按“保存”(2)按钮.
If all of the fields are filled in correctly, styles will be saved.
行
从Bootstrap网格中获取行项. 这是必备品.
添加行
来插入新行, 按“+ Add row”(1)进入包装块, 或“+ Add row”(2)
preset block, or '+ Add row' (3) in the column dropdown list.
成功添加行.
向行添加自定义CSS类
Custom class adding allows you to create custom row styling using CSS rules.
In order to add the class to the row, you should press the 'ellipsis' button (1).
在下拉列表中选择“编辑行”(2).
Fill in the 'Enter row classes' (3) field in the pop-up window and press “确认” (4) button.
成功添加自定义类.
删除行
Removal of preset item will also cause removal of its child items and their styles.
In order to remove the row, open the menu (the 'ellipsis' icon) in the row block.
在下拉菜单中选择“删除”(2)选项.
该行已成功删除.
向行添加样式
In order to add row styles, open the menu (the 'ellipsis' icon) (1) in a row block.
在下拉菜单中按“样式化”(2).
您将看到弹出窗口, fill in all the needed fields there (you may refer to the documentation
“样式”部分),然后按“保存”(3)按钮.
If all of the fields are filled in correctly, styles will be saved.
列
It is an item with configurable block width for different dimensions, based on Bootstrap grid.
添加列
In order to insert a column into a needed 'row', open the menu (the 'ellipsis' icon) (1)
选择列表中的“+ Add Col”(2).
填写字段(col-xs*), col-sm *, col-md *, col-lg - bootstrap classes) in the pop-up window and press
“确认”(3)按钮.
添加列成功.
移除柱子
Preset item removing will also cause its child items and their styles deleting.
In order to remove the column, open the menu (the 'ellipsis' icon) in a column block (1)
在列表中按“删除”(2).
该列及其所有子项被删除.
编辑列
In order to edit the column, open the menu (the 'ellipsis' icon) (1) in the column block.
在列表中按“编辑列”(2).
填写字段(col-xs*), col-sm *, col-md *, col-lg - bootstrap classes) in the pop-up window and press
“确认”.
专栏编辑成功.
向列添加样式
In order to add column styles, open the menu (the 'ellipsis' icon) (1) in a column block.
在选项列表中按“样式化”(2).
您将看到弹出窗口, fill in all the needed fields there (you may refer to the documentation
“样式”部分),然后按“保存”(3)按钮.
If all of the fields are filled in correctly, styles will be saved.