Header and Footer in Luma theme

magento.stackexchange https://magento.stackexchange.com/questions/333522

  •  15-04-2021
  •  | 
  •  

Question

I want some customization theme luma in my magento 2 website, so I need add in header for all pages banner - custom blocki created - (banner-section) below menu and in footer I need add custom block (listing-area) above footer, what I need add in default.xml for display these blocks? Thanks.

Was it helpful?

Solution 3

So, if I need add also template - for adding custom structure, I can use this structure:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo@2x.png</argument>
                <argument name="logo_width" xsi:type="number">300</argument>
                <argument name="logo_alt" xsi:type="string">Car Portal</argument>
            </arguments>
        </referenceBlock>
        
        <referenceContainer name="header-wrapper">
        <block class="Magento\Framework\View\Element\Template" template="html/below-menu-section.phtml" name="below-menu-section"/>
    </referenceContainer>

        
        <referenceContainer name="footer-container">
        <block class="Magento\Framework\View\Element\Template" template="html/listing-area.phtml" name="listing-area" before="-"/>
    </referenceContainer>
        
    </body>
</page>

but if I no need use Vendor_Module::, my example will correct?

OTHER TIPS

You will need something like that for header :

    <referenceContainer name="header-wrapper">
        <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::banner-section.phtml" name="banner-section"/>
    </referenceContainer>

And for footer :

    <referenceContainer name="footer-container">
        <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::listing-area.phtml" name="listing-area" before="-"/>
    </referenceContainer>

before="-" means it will be the first block of this container.
You can ajust to for need to choose order of block in container

First of all, you have to create a new static block from the backend for the header and footer.

After that, you have to create a file on the below path.

app/design/frontend/{{YOUR THEME NAME HERE}}/default/Magento_Theme/layout/default.xml

After creating the file please add the below code with your block identifier which you created in the backend.

<referenceContainer name="page.top">
<block class="Magento\Cms\Block\Block" name="home.banner" before="breadcrumbs">
    <arguments>
      <argument name="block_id" xsi:type="string">header_banner_section</argument>
    </arguments>
</block>
</referenceContainer>

<referenceContainer name="footer-container">
    <block class="Magento\Cms\Block\Block" name="footer.banner" before="-">
        <arguments>
          <argument name="block_id" xsi:type="string">footer_banner</argument>
        </arguments>
    </block>
</referenceContainer>

After doing the above things please flush the cache and check.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top