---
title: "How to create Block, Layouts and Templates in Magento 2"
url: "https://dolphinwebsolution.com/how-to-create-block-layouts-and-templates-magento-2"
date: "2020-11-28T12:05:11+05:30"
modified: "2023-08-28T06:03:55+05:30"
author:
  name: "Payal Patel"
categories:
  - "Magento"
word_count: 516
reading_time: "3 min read"
summary: "In this topic Magento 2 Create Block, Layouts, and Templates we will teach you about View with including Block, Layouts, and Templates. In Magento 2 built by three paths: Block, Layout, and Templat..."
description: "In this topic Magento 2 Create Block, Layouts, and Templates we will teach you about View with including Block, Layouts, and Templates. In Magento 2 built by..."
keywords: "create block,create layout,create template magento 2,create template, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Dependent Fields In UI-Component Forms In Magento 2"
    url: "https://dolphinwebsolution.com/dependent-fields-in-ui-component-forms-in-magento-2"
  - title: "Top 10 Reasons to Why You Should Choose Magento for eCommerce"
    url: "https://dolphinwebsolution.com/magento-for-ecommerce-top-10-reasons-as-to-why-you-should-choose-it"
  - title: "How to add/remove column and other DB operations to table in Magento 2.3 using declarative schema?"
    url: "https://dolphinwebsolution.com/how-to-add-remove-column-and-other-db-operations-to-table-in-magento-2-3-using-declarative-schema"
---

# How to create Block, Layouts and Templates in Magento 2

_Published: November 28, 2020_  
_Author: Payal Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/Block-Layouts-and-Templates-1024x512.jpg)

> In this topic Magento 2 Create Block, Layouts, and Templates we will teach you about View with including Block, Layouts, and Templates. In Magento 2 built by three paths: Block, Layout, and Template. Here We will work by building on the Basic Module using the View path.

In this topic Magento 2 Create Block, Layouts, and Templates we will teach you about View with including Block, Layouts, and [Templates](https://dolphinwebsolution.com/shop/product-custom-option-templates-for-magento.html). Magento 2 built by three paths: Block, Layout, and Template. Here We will work by building on the [Basic Module](https://dolphinwebsolution.com/how-to-create-module-in-magento-2) using the View path.

First of all, we will create a controller to call a layout file.

### **Step 1:** Create Controller

Create **Index.php** file in the **app/code/Dolphin/MyModule/Controller/Index** with the following code.

```
<?php

namespace Dolphin\MyModule\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $pageFactory
    ) {
        $this->_pageFactory = $pageFactory;
        return parent::__construct($context);
    }

    public function execute()
    {
        return $this->_pageFactory->create();
    }
}
```

### **Step 2:** Create Layout file.xml

The layout file defines the page structure and will be located in **Dolphin/MyModule/view/{area}/layout/** folder. Here the area is can be frontend and adminhtml.

There is layout file name **default.xml** which will be applied for all pages in its area. Otherwise, the layout file have name as: **{router\_name}\_{controller\_name}\_{action\_name}.xml**

You can more instruction for layout structure, [click here](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-instructions.html).

When a rendering page, Magento will check the layout file to find the handle for the page and then load Block and Template.

Create **Index.php** file in the **app/code/Dolphin/MyModule/view/frontend/layout/mymodule\_index\_index.xml** with the following code.

```
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Dolphin\MyModule\Block\Index" name="mymodule.hello" template="Dolphin_MyModule::mymodule.phtml" />
    </referenceContainer>
</page>
```

In this file,

**Block class:** Dolphin\\MyModule\\Block\\Index

**Template file:** **Dolphin\_MyModule::mymodule.phtml** Magento will find the name **mymodule.phtml** in the templates folder of module **Dolphin\_MyModule**.

**name:** It is the required attribute and used to identify a block as a reference.

### **Step 3:** [Create Block](https://magento.stackexchange.com/questions/255924/magento2-how-to-add-custom-block)

Create **Index.php** file in the **app/code/Dolphin/MyModule/Block/Index.php** with the following code.

```
<?php

namespace Dolphin\MyModule\Block;

class Index extends \Magento\Framework\View\Element\Template
{
    public function __construct(\Magento\Framework\View\Element\Template\Context $context)
    {
        parent::__construct($context);
    }

    public function sayHello()
    {
        return __('Hello World');
    }
}
```

In Magento 2, Every block must extend from **Magento\\Framework\\View\\Element\\Template**.

### **Step 4:** [Create Template](https://dolphinwebsolution.com/shop/product-custom-option-templates-for-magento.html)

Create **Index.php** file in the **app/code/Dolphin/MyModule/view/frontend/templates/mymodule.phtml** with the following code.

```
<?php

/**
* @var \Dolphin\MyModule\Block\Index $block
*/

echo $block->sayHello();
```

In this template file, we use the variable $block for the block object. We call the method sayHello() in Block.

Now, open the URL **yourdomain/mymodule/index/index** in your browser and you should get something like this:

[![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2020/11/block_layout_template.png)](https://dolphinwebsolution.com/wp-content/uploads/2020/11/block_layout_template.png)

We hope our technical blog which looking is very effective for you. If any questions, please feel free to leave a comment below.

In the next tutorial, you will help [How to create Install, Upgrade, Uninstall Script in Magento 2](https://dolphinwebsolution.com/how-to-create-install-upgrade-uninstall-script-in-magento-2).


---

_View the original post at: [https://dolphinwebsolution.com/how-to-create-block-layouts-and-templates-magento-2](https://dolphinwebsolution.com/how-to-create-block-layouts-and-templates-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:54:45 UTC_