Understand the basics of static blocks in Magento 2
Creating engaging web content is a real challenge in today’s day and age especially if you’re not a front-end developer. Web content management has become the cornerstone of delivering a personalized digital experience and is expected to grow irrevocably in the times to come. Projected growth of this industry seems limitless. As per research, its market is expected to grow from $ 6.9 Billion in 2021 to $14.3 Billion by 2026. And even though as common as it may seem, “A book should not be judged by its cover”, websites very often face extreme snap judgments. For instance, it takes a user about 50 million seconds (0.05 seconds) to decide if they either want to stay or not. 38% of the web users will stop engaging with a website if the content or its layout appears unattractive to them.
In order to ensure that, we’ll be leveraging one the most important features of Magento 2.0 i.e., Static blocks for a more promising and engaging user experience. Static blocks, simple blocks or CMS blocks are pieces of reusable content that can be displayed using a widget or a short code. ‘Static’ implies that they are based on fixed information that can be text, images, videos or any kind of dynamic information. Once created, they can be used in different pages of the website, saving oneself a lot of time while creating and updating content. Moreover, they can be used for a variety of purposes. For instance, they allow sharing information regarding special discounts, coupons and announcements.
Static blocks make most part of the content on a website. Most of the time they are used along with widgets in order to re-position that information elsewhere. Therefore, it could be said that both static blocks and widgets are considered as the key features of Magento 2.0’s page layout. It is necessary that once a static block is created it is ‘Called’ in order to display its content among relevant pages. There are certain predefined areas in Magento 2.0 where they can be called which can include the header, footer or top header etc.
In order to understand the basics of static blocks one should have a brief introduction on widgets since they are interrelated. Widgets play a crucial role in Magento development. They are smaller sets of code that can display all sorts of data tailored for targeted content and enhance user experience at its best. Magneto 2’s widget is a Magento extension designed with a set of advanced configurations. One of its greatest perks is that they can be called from anywhere on the website and most importantly provide webs store administrators the opportunity to add static content to blocks that leads to high functionality and straightforward implementation.
Magento 2.0 Static block extensions:
Due to the fact that Magento 2 static block at default doesn’t provide the store administrator much room for creativity and isn’t flexible enough to target customers with a specific kind of content. Therefore, we use different extensions to somehow overcome its limitations. For instance, extensions like Mageplaza Better static block or any other advanced static block extension can help with the below mentioned things:
· It helps in targeting specific customer groups with special and target driven content. For instance, content related to affiliate policies and refund policies should only be visible to wholesalers and affiliate customer groups.
· Secondly, it allows admins to add labels to different blocks so that there can be an easy way of filtering different blocks based on them. For example, a label ‘Policy’ can be assigned to all those blocks with information relating to policies. Incase, a change is required in those blocks, they can be filtered accordingly.
· Finally, it allows you to edit block content in mass actions. It saves the store admins of time which helps in easing up the whole content handling process.
How to create static blocks:
In order to get a basic understanding of static blocks one should know how to create static blocks in Magento 2.0. Follow the steps below to create one:
- Go to the admin panel in the extreme left, move to elements and then under Content on Blocks. After clicking a new page layout pops up. On this page, every single static block that has ever been created will appear displayed in order of date modified. In case one wants to edit the already existing block click on the ‘select ‘option and from there choose edit. Otherwise, in order to create a new block, click on “Add New Block” in the extreme right.
- After that, choose and select to enter a new block. Primarily, swipe the Enable option if it’s not enabled. By default, Magento already has it enabled, if one wants to change the status then swipe block to No. Add the Block title which is used for internal references but once saved will appear on the front end. Every block has a unique identifier which should be only written in lowercase letters with an underscore in between. In addition to this, we have the store view which can be used to customize where we want the block to be visible. Finally, we have the ‘Edit with page builder’ option which can only be used if the page button has been enabled by the store admin at the back-end. Through this feature one can add any text, image or embedded video. However, if one prefers to work with HTML codes then we can use the Show\hide editor option.
- Once all of the above steps have been carried out click the Save & Close button. A new block will appear at the bottom of the block list in the blocks grid.
Positioning static blocks in different areas:
Call static block using widgets:
As mentioned earlier, a static block cannot be used alone and can be only executed on different web pages with the help of widgets. Widgets tend to play a very important role in terms of standpoint functionality and can be called from anywhere on the website. In order to do that follow the below steps:
- Go to content and then under elements click on Widgets this time. Again, in the page layouts one can see all the widgets created earlier. So, to create a new one, click on ‘Add widget’.
- A new page pops up. Select CMS Static block as type and choose the design theme as per desire then click on Continue.
- After this go to storefront properties. Here, add the widget title and then select where you want it to appear with the help of store view. Secondly, add the store order which represents the number at which the widget will be ranked at in the list of widgets while being positioned at the website.
- In addition to this, in the layout updates we can select the pages or group of pages we want the static block to appear at.
- ·Finally in the widget option select the static block you want the widget to help display.
Call static block using xml layout:
If the store administrator is a front-end developer and wants to code everything then he/she can use the following code to call the static block:
The only difference is you need to replace “my_block_identifier” with your Static block Identifier.
Call static block from template phtml file:
Use the code below in case you want to show the static block in any template of Magento 2:
Add another block in the Static block:
In order to show another static block in the already created static block use the code below:
Display Static block on Category page:
· In order to choose the product category where you want to display the static block go Catalog Categories.
- Then go to the content section of that category and with the help of that choose the specific static block you want to display using the ‘Add CMS Block’ option. Finally go to the display settings and decide if you want to just display just the static blocks, products or both the static blocks and products.
In conclusion, it can be said that static blocks are small modular units of information that can be used anywhere on the website with the help of either widget if one doesn’t know how to code or through widgets. Anyone who has an understanding of the basics of static blocks can play with its different features that enhance the content management of the website which in turn improves the customer user experience (UX). Websites with better engagement forces the user to come back again and again.