Blocks of content

In addition to individual content elements, the theme allows you to create entire blocks containing different content elements.

⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider to simulate a change in screen resolution.

Example 1
Example 2

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Example 3

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.

A horizontal rule:

A paragraph with the separator class:



How to

The general procedure for creating content blocks is:

  1. Use the Code View tool to create a <span>
  2. Fill the <span> with content
  3. Add a Grid classes to that <span> to place it in the Grid.
  4. More about it you can find in Tips & Tricks

⚠️ The Summernote Editor cannot create <span> elements using standard buttons. Because of that you have to use the Code View tool to create it manually using the code. Because the Summernote Editor is oriented toward inline creation of elements, the most convenient way is to create blocks of content using the <span> tag instead of <div>.

Code examples

Below you can see the code used to create the content blocks above.

Example 1 code

<span class="col s12 m6 l4">
  <h5>Example 1</h5>
  <img src="http://localhost/data/files/example.jpg" class="responsive-img">
</span>

Example 2 code

<span class="col s12 m6 l4">
  <h5>Example 2</h5>
  <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  <div class="video-container">
    <iframe width="640" height="360" src="https://www.youtube.com/embed/L_LUpnjgPso" frameborder="0" allowfullscreen=""></iframe>
  </div>
</span>

Example 3 code

<span class="col s12 m12 l4">
  <h5>Example 3</h5>
  <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
  <p>Horizontal rule:</p>
  <hr>
  <p>Paragraph with the separator class</p>
  <p class="separator"><br></p>
  <audio playsinline="" controls="" preload="auto">
    <source src="/data/files/example.mp3" type="audio/mpeg">
  </audio>
</span>