CMS Elements

About

In this guide you’ll find how to create various html coded elements that are not available in Magento’s Pagebuilder.

Accordion

Looking for collapsible component?

<div data-mage-init='{"accordion":{"active": -1}}'>
  <div data-role="collapsible">
    <span class="h4" data-role="title" data-trigger="true">Question 1</span>
    <div data-role="content" style="display:none">Content 1</div>
  </div>
  <div data-role="collapsible">
    <span class="h4" data-role="title" data-trigger="true">Question 2</span>
    <div data-role="content" style="display:none">Content 2</div>
  </div>
</div>

Magento’s Pagebuilder allows to create slider with one slide per screen. Here is how you can create a slider with multiple slides per screen:

<div data-content-type="slider" data-mage-init='{"Magento_PageBuilder/js/content-type/slider/appearance/default/widget":{"arrows": true, "dots": true}}'>
  <div class="slick-list" style="gap:15px">
    <div><img width="180" height="100" src="{{media url=image1.png}}"/></div>
    <!-- ... -->
    <div><img width="180" height="100" src="{{media url=image8.png}}"/></div>
  </div>
</div>

Collapsible

Looking for accordion component?

<div data-mage-init='{"collapsible":{"active":false}}' data-collapsible="true">
  <span class="h4" data-role="title" data-trigger="true">Question 1</span>
  <div data-role="content">Content 1</div>
</div>
<div data-mage-init='{"collapsible":{"active":false}}' data-collapsible="true">
  <span class="h4" data-role="title" data-trigger="true">Question 2</span>
  <div data-role="content">Content 2</div>
</div>

Youtube video

We recommend using lite-youtube tag to keep high pagespeed score:

<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>