Magento 2 – Layout Customizado para uma Página CMS

Iremos trabalhar com dois arquivos XML, layouts.xml e o page_layout/custom-layout.xml, ambos no diretório do Tema.

custom-layouts.xml

Primeiro, vamos criar o arquivo XML custom-layout.xml

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/custom-layout.xml

Conteúdo:

<?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="empty"/>
 <referenceContainer name="page.wrapper">
 <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
 <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
 <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
 </referenceContainer>
</layout>

Nosso layout é baseado em uma página em branco “empty”, você também poderá criar um layout baseado em outros modelos, apenas altere o <update handle=”empty”/> com o modelo que você deseja utilizar, exemplo: <update handle=”3columns”/>

Layouts.xml

Agora vamos criar o layouts.xml:

app/design/frontend/_YOUR_VENDOR/_YOUR_THEME_/Magento_Theme/layouts.xml

Conteúdo:

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
 <layout id="custom-layout">
 <label translate="true">Custom Layout</label>
 </layout>
</page_layouts>

Uma vez atualizado o cache, já será possível selecionar o Custom Layout na lista de layouts durante a criação ou edição de uma página.

Obs: Não se esqueça de limpar o Cache.

2017-08-24T14:17:05+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x
close

MAESTRO

Renomada metodologia de desenvolvimento de loja virtual Magento