From c8363b3f19d73f30b7281e000d77ff6a31a3ac90 Mon Sep 17 00:00:00 2001 From: Ajith Date: Mon, 3 Feb 2020 01:30:14 +0530 Subject: [PATCH 1/5] Added instruction to add new page layout --- .../layouts/layout-create.md | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md diff --git a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md new file mode 100644 index 00000000000..ad3c7ec4423 --- /dev/null +++ b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md @@ -0,0 +1,36 @@ +--- +group: frontend-developer-guide +title: Create a new layout +functional_areas: + - Frontend +--- + +### Create a new page layout in custom theme + +create a custom page-layout xml file in the below directory. +app/design/frontend///Magento_Theme/page_layout/4columns.xml + +```xml + + + + + + + +``` + +### Add the new layout in layouts.xml file + +Add the newly created page layout in the `layouts.xml` file in the below directory +app/design/frontend///Magento_Theme/layouts.xml + +```xml + + + + + + + +``` From 5cb50b1488ddff5424cd13fc016d2b677541e810 Mon Sep 17 00:00:00 2001 From: Ajith Date: Mon, 3 Feb 2020 20:45:18 +0530 Subject: [PATCH 2/5] Changed example as 3-column-double-footer --- .../v2.3/frontend-dev-guide/layouts/layout-create.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md index ad3c7ec4423..062d604fefb 100644 --- a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md +++ b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md @@ -7,15 +7,17 @@ functional_areas: ### Create a new page layout in custom theme -create a custom page-layout xml file in the below directory. -app/design/frontend///Magento_Theme/page_layout/4columns.xml +If an existing page layout doesn't meet your requirements, then you can create a new page layout in Magento. + +For example, If a new page is going to be designed in `3-columns-double-footer` layout, you may create the new layout in the following way. Create a custom page-layout xml file in the below directory. +app/design/frontend///Magento_Theme/page_layout/3-columns-double-footer.xml ```xml - + ``` @@ -29,8 +31,8 @@ app/design/frontend///Magento_Theme/layouts.xml - - + + ``` From c6d052ac4b79821589a3695ef150e39f3566c00c Mon Sep 17 00:00:00 2001 From: Yaroslav Rogoza Date: Wed, 5 Feb 2020 14:53:36 +0100 Subject: [PATCH 3/5] Minor layout adjustments --- src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md index 062d604fefb..5fccb3806aa 100644 --- a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md +++ b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md @@ -9,8 +9,7 @@ functional_areas: If an existing page layout doesn't meet your requirements, then you can create a new page layout in Magento. -For example, If a new page is going to be designed in `3-columns-double-footer` layout, you may create the new layout in the following way. Create a custom page-layout xml file in the below directory. -app/design/frontend///Magento_Theme/page_layout/3-columns-double-footer.xml +For example, if a new page is going to be designed as `3-columns-double-footer` layout, you may create the new layout in the following way. Create a custom page-layout XML file in following directory `app/design/frontend///Magento_Theme/page_layout/3-columns-double-footer.xml`. ```xml @@ -24,8 +23,7 @@ app/design/frontend///Magento_Theme/page_layout/3-columns ### Add the new layout in layouts.xml file -Add the newly created page layout in the `layouts.xml` file in the below directory -app/design/frontend///Magento_Theme/layouts.xml +Add the newly created page layout to the `layouts.xml` file of the theme directory `app/design/frontend///Magento_Theme/layouts.xml`. ```xml From 4c7bd17efd08a962a344ed54a16ea2aab665d8b6 Mon Sep 17 00:00:00 2001 From: Ajith Date: Thu, 13 Feb 2020 00:57:23 +0530 Subject: [PATCH 4/5] commit the changes requested --- src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md index 062d604fefb..999df096065 100644 --- a/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md +++ b/src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md @@ -5,9 +5,9 @@ functional_areas: - Frontend --- -### Create a new page layout in custom theme +## Create a new page layout in custom theme -If an existing page layout doesn't meet your requirements, then you can create a new page layout in Magento. +If an existing page layout does not meet your requirements, then you can create a new page layout in Magento. For example, If a new page is going to be designed in `3-columns-double-footer` layout, you may create the new layout in the following way. Create a custom page-layout xml file in the below directory. app/design/frontend///Magento_Theme/page_layout/3-columns-double-footer.xml @@ -22,7 +22,7 @@ app/design/frontend///Magento_Theme/page_layout/3-columns ``` -### Add the new layout in layouts.xml file +## Add the new layout to the layouts.xml file Add the newly created page layout in the `layouts.xml` file in the below directory app/design/frontend///Magento_Theme/layouts.xml From 44d877de3491268cb2ad6f6a67239ecde10ee853 Mon Sep 17 00:00:00 2001 From: Ajith Date: Fri, 14 Feb 2020 23:56:45 +0530 Subject: [PATCH 5/5] Table of content is updated for a new page --- src/_data/toc/frontend-developer-guide.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/_data/toc/frontend-developer-guide.yml b/src/_data/toc/frontend-developer-guide.yml index d1d28fc66c9..646cad9ff39 100644 --- a/src/_data/toc/frontend-developer-guide.yml +++ b/src/_data/toc/frontend-developer-guide.yml @@ -71,6 +71,9 @@ pages: - label: Product layouts url: /frontend-dev-guide/layouts/product-layouts.html + - label: Create a new layout + url: /frontend-dev-guide/layouts/layout-create.html + - label: Extend a layout url: /frontend-dev-guide/layouts/layout-extend.html