Magento – Magento 2 Creating custom homepage

homemagento2theme

I've just started on magento 2, read (most) of the documentation and started my project. I want to create custom homepage first with my own header/section/footer (NOT the one that comes by default). I already have it done through html&css like static stuff so I "just" need to make it Magento 2 way.

Untill now I have created a theme, registered it, chose it and in my theme folder I have Magento_Theme folder which contains page_layout folder and layouts.xml. Page_layouts folder contains homepage.xml

so my homepage.xml looks like this

<?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>

and my layouts.xml looks like this:

<?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="homepage">
        <label translate="true">Custom Homepage</label>
    </layout>
</page_layouts>

When I navigate to admin / content / pages I can set my layout to Home page, but when i comment out <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" /> from homepage.xml it changes nothing. I also tried adding remove="true", nothing changed.. I also tried to edit htmlClass name and check it out in inspector – nothing changed.

How can I remove magento header/footer content on homepage.xml and add my own html&css? Would be awesome if someone can give me a simplest example that will add a <div>test</div> to my homepage.xml so when I go to localhost I only get that div, without Magento header/footer.

Best Answer

There is already a footer container being added by a higher level xml, you need to remove or hide this:

<referenceContainer name="footer-container" remove="true" />

If you want to add a block with html in you can do this:

<block class="Magento\Framework\View\Element\Template" name="header.wrapper" template="Magento_Theme::home/test.phtml">

Choose a container to put this inside Creating "home/test.phtml" in:

theme/Magento_Theme/templates/

"home" and "test" can be whatever you like.

Check this file for the basic structure:

/vendor/magento/module-theme/view/base/page_layout/empty.xml
Related Topic