0

I am not very experienced in Magento 2 and I need to put together a demo which contain's a homepage custom structure and css too.

Basically I'm going to use the Blank theme but I need to change the Homepage where the Nav, page content and colors will be changed and the Nav will be moved in position. So I need to change Colors and Structure or the homepage.

What is the fastest's, simplest way to do this on Magento 2, even if it's a dirty way to do it (as it's only for a demo) ?

user159500
  • 347
  • 4
  • 6
  • 18

1 Answers1

1

By default, Magento is providing structure Layout like , empty, 1 column, 2 column-left, 2 column-right, 3 columns. Sometime when we implement the design we need to create new structure layout and set the design as per our theme.

How to create custom structure layout

1) We need to create layout.xml on the app/code/your-module/Customtheme/view/frontend

Code:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/View/PageLayout/etc/layouts.xsd">
<layout id="homepage">
<label translate="true">Home Page</label>
</layout>
</page_layouts>

Now check this layout, It will display in cms >> Design tab, Catalog >> Design tab, Categories >> Design tab.

Form the above page we can choose the layout.

Then create homepage.xml which are define as a layout id in the path app/code/your-module/Customtheme/view/frontend/page_layouts. In the File we can define the structure of the page.

code:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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>

Now Clear the cache from admin side and check the home page design.

you can chk http://www.magestore.com/magento-2-tutorial/quick-tour-design-your-magento-2-0-homepage-layout/ for reference. It also might help you.

Arjun
  • 3,576
  • 23
  • 59