cms area created using div tag in the tpl file.Add the div tag in code. Then deploy the theme. And after that taking the SMT the created area can be seen in the desired pages. Then we can drag the contents to it.
Each div tag has the two following attributes that name the area and set its scope:
data-cms-area — The value of the data-cms-area attribute is a user-defined name given to the area.
data-cms-area-filters — This attribute determines the scope of an area
| All Pages | global | The All Pages area displays content on any page |
| Page Type | page_type | The Page Type area displays content on any page of the designated type like, product list or product detail. |
| This Page | path | The This Page area is the most specific area with regard to when content displays. Content displays only on the page specified by the path in the page URL. This is the type of area to use if you want to display content for a specific product, facet, or home page. |
Examples of three scope areas div code:
<div data-cms-area="main" data-cms-area-filters="global"></div>
<div data-cms-area="item_info_bottom" data-cms-area-filters="page_type"></div>
<div data-cms-area="item_info" data-cms-area-filters="path"></div>