In this post, we will show you how to create magento 2 block in 2 ways. The first one is to write code to test out functionality. The second one is to use magento 2 block builder. This tool is included in Magento 2 Page Builder extension. Learn more here.

I. How To Create Magento 2 Blocks by writting code

1. Create a module.xml in in app/code/Lof/HelloWorld/etc

<!?xml version="1.0"?>

2. Create app/code/Lof/HelloWorld/registration.php file

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Lof_HelloWorld',
    __DIR__
    );

3. Create a layout file in the following directory app\code\Lof\HelloWorld\View\frontend\layout\cms_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"?-->

4. Lets create a block for our module. Create block file app/code/Lof/HelloWorld/Block/HelloWorld.php

getTitle(); ?>

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

II. How to create block with block builder

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 http://easycaptures.com/fs/uploaded/889/0595276340.png - 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