10

As all you know that magento2 have some layout template like 1column , 2 columns-left , 2 columns-right , 3 columns and I want to create custom homepage layout template in Magento2 for that I follow few tutorial and create module and files as said in that links but none of them are working and I can't get "home page" layout in cms page -> design tab.

I follow below all links but none of working so anyone have proper solution please share.

first link

second link

third link

forth link

Ablove all solutions are not working.

  • @Khoa TruongDinh Do you know answer of this question? – Dhaval Jun 3 '16 at 13:24
19

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:

enter image description here

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:

enter image description here

If we choose this layout, we can see it on the front page:

enter image description here

Note: Sure that our Magento cache was cleared.

  • 1
    perfect!!!!! I just follow your path and my work done.Thanks bro – Dhaval Jun 4 '16 at 10:33
  • I already upvoted but perhaps the last part of the answer could explain where exactly to find the design tab from your screenshot. – Joshua Flood May 12 at 22:38
0

It is easily achieved from Admin, I assume you have already created theme.

Most of the one confused after creating new theme they lost home page look and feel because home blocks are not assigned to the home page while we create new theme. We only do it manually.

please follow the instruction

login to admin, then navigate to

Conten -> Pages

find Home Page, then in action column click edit then

click the Content tab then place the below value in text area

{{block class="Magento\Cms\Block\Block" block_id="home-page-block"}}

note: here block_id is unique id of blocks, you could found the list blocks and block id under Content->Blocks

finally save page

then clear your cache of magento and browser, load the home page, you could see the home page look like luma home page.

if you want to find home page html content, find block home-page-block under the Content->Blocks then edit the block, you could see the html content of home page.

take the reference of this html conetent, after that you can develop your own html as per your requirement, Add CSS from your theme layout file.

you need any clarification just mention in comment

have good luck.

  • as you know in magento2 there are few templates like 1 column , 2column-left , 2 column-right , 3 column etc.I want to create template like this for ex : home-page and after that I want to assign this new layout to cms -> pages -> home page. Now do you get my point? – Dhaval Jun 4 '16 at 5:01
  • I thought you were tried to customize home page content :-) I have not tried before what you ask so I can't help you someone give hands to you. – Bilal Usean Jun 4 '16 at 5:12
  • I have tried that but does not work on my case – Yusuf Ibrahim May 8 at 3:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.