How To Add Different CMS Header Pages In A Magento 2 Website?

How To Add Different CMS Header Pages In A Magento 2 Website?

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: 


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="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">


        <referenceContainer name="top.container">

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





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="" after="-">


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





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.

Back to blog