首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
Magento设计配置
Magento主题概述
Magento安装新主题
Magento管理主题资源
Magento主题计划任务
Magento主题页面分区
Magento页面布局
Magento店面布局示例
Magento页面布局更新
Magento内容页面CMS
Magento页面工作区控件
Magento添加和删除页面
Magento内容管理主页设置
Magento翻译内容页面
Magento内容块Block
Magento添加内容块
Magento定位内容块
Magento小组件
Magento创建和管理小组件
Magento使用小组件定位块
Magento新产品列表小组件
Magento订单和退货小组件
当前位置:
首页>>
技术小册>>
Magento零基础到架构师(内容设计)
小册名称:Magento零基础到架构师(内容设计)
商店中每个页面的布局由不同的部分或容器组成,这些部分或容器定义页面的页眉、页脚和内容区域。 根据布局,每个页面可能包含一列、两列、三列或更多列。 我们可以将该布局视为 平面图 ,并分配特定布局以用作CMS、产品和类别页面的默认布局。 在页面上,内容块会浮动以填充可用空间,具体情况可根据 页面布局 指定显示它们的位置。 请注意,如果将布局从三列更改为两列,则主区域的内容将展开以填充可用空间。 另请注意,与未使用的侧栏关联的任何块似乎都消失了。 但是,如果恢复三列布局,块会重新出现。 这种流动进刀,或 液体布局,无需重新处理内容即可更改页面布局。 如果我们习惯于使用单个HTML页,则此模块化、 构建基块 方法需要不同的思维方式。 ![](/uploads/images/20240706/fb48f1795311e8387d32af615729dfc4.png) **配置默认布局** 在 管理员 侧栏,转到 Stores > Settings>Configuration. 在左侧面板中的 General,选择 Web. 展开 扩展选择器 该 Default Layouts 部分。 ![](/uploads/images/20240706/3c396a81cd158a99ccaa4045e8bf297c.png) 选择 Default Product Layout 要用于产品页面的URL。 此设置确定默认用于产品页面的布局。 - No layout updates — 布局更新不适用于产品页面。 - Empty — 对产品页面使用空白布局。 - 1 column — 对产品页面使用单列布局。 - 2 columns with left bar — 对于产品页面,使用左侧带有侧栏的双列布局。 - 2 columns with right bar — 对于产品页面,使用右侧带有侧栏的双列布局。 - 3 columns — 对于产品页面,使用左右两侧带有侧栏的三列布局。 时间 页面生成器 已启用,则还有其他完整的宽度选项可用。 然后,我们可以使用页面生成器内容工具来设计产品页面的布局。 - Page -- Full Width — 使用 页面 — 全宽 产品页面的布局。 - Category -- Full Width — 使用 类别 — 完整宽度 产品页面的布局。 - Product -- Full Width — (推荐)使用 产品 — 完整宽度 产品页面的布局。 - 选择 Default Category Layout 要用于类别页面的URL。 此设置确定默认情况下用于类别页面的布局。 - No layout updates — 布局更新不适用于类别页面。 - Empty — 对类别页面使用空白布局。 - 1 column — 对类别页面使用单列布局。 - 2 columns with left bar — 对于类别页面,使用左侧带有侧栏的双列布局。 - 2 columns with right bar — 对于类别页面,使用右侧带有侧栏的双列布局。 - 3 columns — 对于类别页面,使用左边和右边带有侧栏的三列布局。 时间 页面生成器 已启用,则还有其他完整的宽度选项可用。 然后,我们可以使用页面生成器内容工具来设计类别页面的布局。 - Page -- Full Width — 使用 页面 — 全宽 类别页面的布局。 - Category -- Full Width — (推荐)使用 类别 — 完整宽度 类别页面的布局。 - Product -- Full Width — 使用 产品 — 完整宽度 类别页面的布局。 - 选择 Default Page Layout 要用于CMS页面的对象。 此设置确定CMS页面默认使用的布局。 - No layout updates - CMS页面不提供布局更新。 - Empty — 对CMS页面使用空白布局。 - 1 column — 对CMS页面使用单列布局。 - 2 columns with left bar — 对于CMS页面,使用左侧带有侧栏的双列布局。 - 2 columns with right bar — 对于CMS页面,使用右侧带有侧栏的双列布局。 - 3 columns — 对于CMS页面,使用左边栏和右边栏的三列布局。 时间 页面生成器 已启用,则还有其他完整的宽度选项可用。 然后,我们可以使用页面生成器内容工具来设计CMS页面的布局。 - Page -- Full Width — (推荐)使用 页面 — 全宽 CMS页面的布局。 - Category - Full Width — 使用 类别 — 完整宽度 CMS页面的布局。 - Product - Full Width — 使用 产品 — 完整宽度 CMS页面的布局。 完成后,单击 Save Config. **标准页面布局** **一列** ![](/uploads/images/20240706/32b7db34d90d7613f9392db7ba13d64c.png) 此 1 Column 布局可用于创建具有大图像或焦点的生动主页。 此外,它还是登陆页面或包含文本、图像和视频组合的任何其他页面的理想选择。 **带左栏的两列** ![](/uploads/images/20240706/b1601ed295a1594e5ad0b3053bd0d739.png) 此 2 Columns with Left Bar 布局通常用于左侧导航的页面,例如具有分层导航的目录或搜索结果页面。 此外,对于需要在左侧添加导航或支持内容块的主页而言,它也是一个非常好的选择。 **带右栏的两列** ![](/uploads/images/20240706/23c07032655f6683847b783a08b3bba3.png) 带有 2 Columns with Right Bar 布局,主内容区域足够大,可形成引人注目的图像或横幅。 此布局还经常用于右侧包含支持内容块的产品页面。 **三列** ![](/uploads/images/20240706/6898d50008039fc619ad0fd2d8b6fe0c.png) 此 3 Column 布局的中心列宽得足以容纳页面的主文本,两边都有空间用于额外的导航和支持内容块。 **空** ![](/uploads/images/20240706/f426e43cfd9d14cd563b58085828ae6e.png) 此 Empty 布局可用于定义自定义页面布局。
上一篇:
Magento主题页面分区
下一篇:
Magento店面布局示例
该分类下的相关小册推荐:
PHP合辑1-基础入门
全栈工程师修炼指南
ThinkPHP项目开发实战
PHP8入门与项目实战(1)
PHP程序员的设计模式
Shopify应用实战开发
Swoole高性能框架-Hyperf
Magento2主题开发高级实战
PHP程序员面试笔试真题与解析
Swoole高性能框架-SwooleWorker
Laravel(10.x)从入门到精通(一)
Laravel(10.x)从入门到精通(七)