Add custom images div like this sample app block. How can we create it for our custom theme ?

enter image description here



<div class="block-with-image">
    <img class="image1" alt="image1" src="<?php echo $this->getViewFileUrl('images/homepage/your_image_name.png'); ?>">


<?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">
    <referenceContainer name="content.top">
        <block class="Magento\Framework\View\Element\Template"  name="content-block1" template="Magento_Cms::new_block_1.phtml" />


to avoid the xml part, you can directly call your phtml where you want like this:

<?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Magento_Cms::new_block_1.phtml")->toHtml();?>
  • ok thanks this worked for me for home page but how can we re-use it as custom widgets and if you have any reference to learn about creating and customising theme in magento 2 it will be great. – patel Mar 6 '19 at 7:37
  • you have to replace the cms_index_index.xml by the layout handle of your page, cms_index_index.xml is the layout handle of the home page for example – PЯINCƏ Mar 6 '19 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.