Creating a custom homepage template in Magento2
First of all, we need to know how to create a custom theme Magento 2, we can more here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
After creating a new custom theme. We're going to create new custom layout for our homepage. For example, our folder structure:
We should focus on two xml files: layouts.xml
and page_layout/custom_home.xml
under Magento_Theme
folder
app/design/frontend/Boolfly/book/Magento_Theme/layouts.xml
<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="custom_home">
<label translate="true">Custom Home</label>
</layout>
</page_layouts>
The layout id custom_home
is the name of page layout below.
app/design/frontend/Boolfly/book/Magento_Theme/page_layout/custom_home.xml
(I made a copy from 1column.xml
default)
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="page.wrapper">
<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
<container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
<container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
</referenceContainer>
</layout>
Login to Magento Admin, find cms home page. Now, our custom layout home page is in the list of layouts:
If we choose this layout, we can see it on the front page:
Note: Sure that our Magento cache was cleared.