Home >How to Set Magento 2 Page Layout in 1 Minute

How to Set Magento 2 Page Layout in 1 Minute

Hi guys, 

In the previous articles, we learned about Magento 2 Layout overview and 3 common layout file types used to build pages. 

Are they all for Magento 2 layout? Absolutely not! We will gradually open each layout concern in this tutorial series.

Let’s get started today with 3 steps to set up the page layout. 

Before exploring the tutorial, we would like to give a small reminder that Magento 2 supports 4 basic page layout types such as 1 column, 2 columns-left, 2 columns-right, and 3 columns. These page layouts are used for a specific page in the page configuration file, in the attribute layout of <page>.

For example: The layout of the default category page is 2-left columns. If you want to change to 3 columns as in the design, you must extend the layout file catalog_category_view.xml in your theme.

Step 1: Create the catalog_category_view.xml file in the following folder:

app / design / frontend / Bss / default / Magento_Catalog / layout /.

Step 2: Add content to the catalog_category_view.xml file and save.

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
...
</page>

Step 3: Flush cache and check the result: 

magento 2 page layout

< Previous Post
Next Post >
+ posts