diff --git a/src/common/images/fdg/custom_layout_footer_bottom.png b/src/common/images/fdg/custom_layout_footer_bottom.png new file mode 100644 index 00000000000..872af090656 Binary files /dev/null and b/src/common/images/fdg/custom_layout_footer_bottom.png differ 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 f6bb6beda94..e51d52378a2 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,16 +7,20 @@ functional_areas: ## 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. +When an existing page layout does not meet your requirements, 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///Magento_Theme/page_layout/3-columns-double-footer.xml`. +If the new page has a `3-columns-double-footer` layout, create a custom page-layout XML file: `app/design/frontend///Magento_Theme/page_layout/3-columns-double-footer.xml`. ```xml - + + + + + ``` @@ -33,7 +37,8 @@ Add the newly created page layout to the `layouts.xml` file of the theme directo ``` - {:.bs-callout-info} + +{:.bs-callout-info} Note that the value of the new layout `id` attribute should match the name of the newly created page-layout XML file. Clean the cache by going to **System** > **Cache Management** > **Flush Magento Cache** or by entering the following command: @@ -47,3 +52,8 @@ bin/magento cache:clean The new page layout displays in all `Layout` dropdowns. ![Custom page layout]({{ site.baseurl }}/common/images/fdg/custom_layout_admin_backend.png) + +On the storefront, there is a new footer for those pages that use the `3 Columns Double Footer` layout. + +![Storefront two footers layout]({{ site.baseurl }}/common/images/fdg/custom_layout_footer_bottom.png) +