In this post, we will show you how to create magento 2 blocks in 2 ways. The first one is to write code to test out functionality. The second one is to use magento 2 blocks builder. This tool is included in Magento 2 Page Builder extension. Learn more here.
Table of Contents
1. Create a module.xml in in app/code/Lof/HelloWorld/etc
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Lof_HelloWorld" setup_version="1.0.0"> </module> </config>
2. Create app/code/Lof/HelloWorld/registration.php file
<?php MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::MODULE, 'Lof_HelloWorld', __DIR__ );
3. Create a layout file in the following directory appcodeLofHelloWorldViewfrontendlayoutcms_index_index.xml
The cms_index_index.xml name will make our block only appear on the home page (module_controller_action.xml).
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="LofHelloWorldBlockHelloWorld" before='-' template="helloworld.phtml"/>
</referenceContainer>
</body>
</page> 4. Lets create a block for our module. Create block file app/code/Lof/HelloWorld/Block/HelloWorld.php
<?php
namespace LofHelloWorldBlock;
/**
* Helloworld Block
*/class Helloworld extends MagentoFrameworkViewElementTemplate
{
public function getTitle()
{
return __("LOF Hello World");
}
}
5. Create a template file app/code/Lof/HelloWorld/View/frontend/templates/helloworld.phtml
6. Active Lof_HelloWorld extension
We have two ways to active Lof_Helloworld extension
1) Open Command line in folder root of magento and run commands:
php bin/magento setup:upgrade
2) Directly edit file app/etc/config.xml: In the array module, add the element: ‘Lof_Helloworld’ => 1
7. Run the command line refresh cache and check home page
php bin/magento cache:flush
Ves Block Builder is  one of amazing tool that let you to build any type of blocks with ease. This tool included in Magento 2 Page Builder extension. Learn more here:
1. Add block profile
Please go to Admin panel >> Ves page builder >> Add new block profile
2. Design your block
Then, you need to open “design” tab to start designing your own block
– Prefix class: This class is to custom
– Enable container: If you want to enable container, you can select yes and vice versa
– Use backup layout: You can take use of backup layout from select box
– Design in: This funtions lets you create responsive blocks on lagre screen, laptop, tablets, mobile.
– Enable Grid: you can enable/disable grid
3. Manage blocks
Do you want to develop a mobile app for your business, but don’t know what…
Vanta vs Drata — According to Cybersecurity Ventures, global cybercrime is set to cost $10.5…
Salesforce cybersecurity threats 2025 are becoming more advanced as cybercriminals increasingly target CRM platforms that…
Custom web design for business growth is essential in today’s highly competitive and fast-paced digital…
Software Development Models have evolved dramatically as technology and user expectations continue to grow. These…
Travel apps are the new-age way of breaking down the travel hard work people used…
