Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Added instruction to add new page layout #6532

Merged
merged 7 commits into from
Feb 18, 2020
Merged

Added instruction to add new page layout #6532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c8363b3
Added instruction to add new page layout
ajithkumar-maragathavel Feb 2, 2020
5cb50b1
Changed example as 3-column-double-footer
ajithkumar-maragathavel Feb 3, 2020
c6d052a
Minor layout adjustments
rogyar Feb 5, 2020
4c7bd17
commit the changes requested
ajithkumar-maragathavel Feb 12, 2020
fb5085e
Merge branch 'layout-creation' of https://github.com/ajithkumar-marag…
ajithkumar-maragathavel Feb 12, 2020
44d877d
Table of content is updated for a new page
ajithkumar-maragathavel Feb 14, 2020
a27ba42
Merge branch 'master' into layout-creation
dobooth Feb 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/_data/toc/frontend-developer-guide.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
36 changes: 36 additions & 0 deletions src/guides/v2.3/frontend-dev-guide/layouts/layout-create.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
group: frontend-developer-guide
title: Create a new layout
functional_areas:
- Frontend
---

## Create a new page layout in custom theme

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 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/<VendorName>/<ThemeName>/Magento_Theme/page_layout/3-columns-double-footer.xml`.

```xml
<?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="3columns"/>
<referenceContainer name="page.wrapper">
<container name="footer-bottom" as="footer-bottom" after="-" label="Footer Bottom" htmlTag="footer" htmlClass="page-footer-bottom"/>
</referenceContainer>
</layout>
```

## Add the new layout to the layouts.xml file

Add the newly created page layout to the `layouts.xml` file of the theme directory `app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layouts.xml`.

```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="3-columns-double-footer">
<label translate="true">3 Columns Double Footer</label>
</layout>
</page_layouts>
```