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.