Styla Modular Content is used for embedding any Module inside a template that is used for multiple pages like product details or category grid. It can be displayed or not on specific pages using this template. Same as Pages and Magazines, it is managed by Styla CMS at editor.styla.com.
Modular Content covers a different use case than Pages and Magazines. Instead of large sets of modules, it is mostly used to embed only one module in a specific template which also includes content from different sources.
The most important feature of Modular Content is its reusability:
Integration of Modular Content on your website is simply embedding a JS file and a <div> tag on your page. Compared to Pages and Magazines, the main differences are:
This goes into page's <head> tag:
<script src="https://engine.styla.com/init.js" async></script>
This goes into <body>, where you need Slot contents to be rendered:
If you're having timing issues and, for instance, Styla div is loaded after Styla JS has checked for it, please use the below to load the content in a specific moment:
This is a simple example page that we've created to demonstrate how Modular Content works:
The three pages use the same template with these two Slots embedded:
<div class="fixml dinHeight" data-styla-slot="7b35a82e-8e8d-4b09-a080-fa110dcc85df"></div>
<div class="fixml" data-styla-slot="9f83f29d-e989-4a97-98e5-4baf4ae0a59c"></div>
However, each of the pages displays a different set of two modules. This happens because two modules are assigned to each of the two Slots and the modules have different paths "whitelisted".
The 1st Slot: data-styla-slot="7b35a82e-8e8d-4b09-a080-fa110dcc85df":
The 2nd Slot: data-styla-slot="9f83f29d-e989-4a97-98e5-4baf4ae0a59c":