Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Como conseguir um layout full witdh no Magento 2 Comunity ?

‎08-16-2020 12:05 PM
‎08-16-2020 12:05 PM

Como conseguir um layout full witdh no Magento 2 Comunity ?

Gostaria de criar uma uma parte do site full wifth, ou seja, que ocupasse 100% da tela na horizontal, não importa o redimensionamento da tela pelo navegador. Nenhuma tentativa por CSS funcionou, e a documentação só funciona na versão Magento Commerce, enquanto eu uso a versão Community.

0 Kudos
Reply
1 REPLY 1
‎09-29-2020 09:34 AM
‎09-29-2020 09:34 AM

Re: Como conseguir um layout full witdh no Magento 2 Comunity ?

Olá @paulosergi9743,

 

Para criar um tema full você precisa criar uma nova estrutura de layout, no Magento temas as estruturas de uma, duas e três colunas, também temos a vazia, mas nesse tutorial você pode criar uma extra chamada Full Width Layout.

 

Tutorial

 

Crie um full-layout.xml

app/design/frontend/SUA_EMPRESA/SEU_TEMA/Magento_Theme/page_layout/test-layout.xml

O conteúdo via ser esse:

<?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" after="-" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

Como pode ver você está utilizando o layout empty padrão do Magento como base, mas se quiser pode mudar para 3columns, por exemplo.

Depois disso crie a declaração do seu novo layout.

app/design/frontend/SUA_EMPRESA/SEU_TEMA/Magento_Theme/layouts.xml

O conteúdo via ser:

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

Para finalizar limpe o cache 😉

0 Kudos
Reply