想在 Magento 2 主题的顶部增加一个额外的 header 部分,即页眉。里面放上联系电话。
关键词是什么
从官方主题 demo 的 HTML 代码中,可以看到这个 header 部分的标识是:
header-panel-info
配置文件
vendor/swissup/theme-frontend-breeze-blank/Magento_Theme/layout/default.xml
默认配置
<!-- CMS block inside header panel -->
<referenceContainer name="header.panel">
<block class="Magento\Cms\Block\Block" name="header_panel_info" after="skip_to_content">
<arguments>
<argument name="block_id" xsi:type="string">header_panel_info</argument>
</arguments>
</block>
</referenceContainer>
可以看到 header_panel_info 是默认启用的。只需要去 magento admin 后台去新建一个 block 即可。
怎么自定义 block 呢?
mageno admin 后台的 content - blocks 新建一个 block。
这个直接使用 html 即可。
<p class="header-panel-info" style="margin-bottom: 0;">
<a href="mailto:sales@breezefront.com"><svg xmlns="http://www.w3.org/2000/svg" class="icon" style="display: block;" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
test@x.com
</a>
<a href="tel:916-814-5395"><svg xmlns="http://www.w3.org/2000/svg" class="icon" style="display: block;" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
+86-xxxx
</a>
</p>
唯一不爽的地方
Page Builder 的 row 的宽度是个迷,设置了 full width 并没有生效。
继续阅读 🌳
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式