With the Argento theme, you have got the opportunity to use a custom layout for Magento 2 pages.
There are 3 layout types available:
- Full-width layout
- Standard layout
- Boxed layout
You can switch between these layouts in the Theme Editor.
To implement one of the following layouts, please follow the instructions below.
Note: Make sure, that you don’t use the theme editor layout section for using layout LESS variables in _argento_custom.less.
Full-width layout
Full-width layout removes width from the content wrapper which makes wide content. This layout type requires additional changes into content settings, like category columns count, homepage slider and banner widths, etc. The full-width layout uses the following LESS variables:
| Variable | Value |
|---|---|
| @layout__max-width | none |
| @page-wrapper__max-width | none |
| @page-wrapper__margin | 0px auto |
Product List changes
| Variable | Value |
|---|---|
| @product-grid-items-per-row-layout-1-screen-l | 6 |
| @product-grid-items-per-row-layout-2-screen-l | 5 |
| @product-grid-items-per-row-layout-3-screen-l | 4 |
You have to put these variables into _argento_custom.less file, and run then static content deploy command as mentioned in the article about adding custom CSS.
You will also need to update homepage slider width, "easy banner" images, "easy category" and "highlight" widgets columns count. See details in the homepage content articles for each Argento design.
Standard layout
This is the default Argento layout. It displays centered content with a white background around it. The Standard layout uses the following LESS variables:
| Variable | Value |
|---|---|
| @layout__max-width | 980px |
| @page-wrapper__max-width | none |
| @page-wrapper__margin | 0px auto |
You have to put these variables into _argento_custom.less file, and run then static content deploy command as mentioned in the article about adding custom CSS.
Boxed layout
The boxed layout has paddings around the page wrapper, which makes it possible to use a body background. The boxed layout uses the following LESS variables:
| Variable | Value |
|---|---|
| @layout__max-width | 980px |
| @body__background | #f5f5f5 |
| @page-wrapper__max-width | 1024px |
| @page-wrapper__margin | 0px auto |
You have to put these variables into _argento_custom.less file, and run then static content deploy command as mentioned in the article about adding custom CSS.
