In this blog, we will discuss how we created different CMS header pages in a Magento 2 website for Uncle Harrys.

Firstly, there are a number of extensions available on the Magento Marketplace to add banners/header images for CMS images. However, there is a drawback that there is little control while adding different banner/header images on each CMS page. Below, we will show how to add different banners on CMS pages for a Magento 2 website.

 

Step 1: 

Add

cms_page_view.xml file on your custom theme in app/design/package/theme/Magento_Cms/layout path

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>

        <referenceContainer name="top.container">

            <block class="Magento\Theme\Block\Html\Title" name="page.main.title" template="html/title.phtml"/>

        </referenceContainer>

    </body>

</page>

 

Step 2:

Create new CMS block “blank-header” and banner image on it like

<p><img title="farm header image" src="{{media url="wysiwyg/pageheaders/PageHeaders_Blanks.jpg"}}" alt="farm header image" width="1600" height="300" / style=”width:100%”></p>

Step 3:

Next is to go to CMS page under design tab and then add this xml code on layout update xml:

<referenceContainer name="page.main.title">



 <block class="Magento\Cms\Block\Block" name="any.name" after="-">

            <arguments>

                <argument name="block_id" xsi:type="string">blank-header</argument>

            </arguments>

        </block>

        </referenceContainer>

 

These are the three steps that you need to follow while heading different CMS header pages for your Magento 2 website. If you have any queries about your website, contact us and we will assist you.