In this post I am going to explain how to create custom page layout in Magento 2.

Magento 2 provides five front-end page layouts as below.

1. Empty
2. 1column
3. 2columns-left
4. 2columns-right
5. 3column

You can find all layouts at below path.

Sometimes if amount of customization is too much then in this case you can override these layouts or you can different page layout for your page.

So, now we are going to make custom page layout.

First, make file “custom-layout.xml” at below path and here we will copy content from “1column” layout. It means our new custom layout is extended from “Empty” layout.

Path: app/design/frontend/<vendor>/<your_theme>/Magento_Theme/page_layout/custom-layout.xml


Next, we need to do declaration in the list of layouts. So you can see this new layout option in all layout drop-downs.

Make the file “layouts.xml” at below path and add below code in it.

Path: app/design/frontend/<vendor>/<your_theme>/Magento_Theme/layouts.xml

Now, Our new page layout is reday to use.

For example, Here I am going to change the contact page layout.

Make the file “contact_index_index.xml” at below path.

Path: app/design/frontend/<vendor>/<your_theme>/Magento_Contact/layout/contact_index_index.xml

The code of the file should like:

After all changes done, refresh cache and open contact page see your layout changes applied or not.