Additional Content is our brand new feature. With Additional Content you may place any content anywhere on your website. There’re multiple locations available for each page type and you may place your content either before the location or after it.
You may find the Additional Content fields in Appearance → Customise → Additional Content.
It can be custom ads, shortcodes, simple HTML content or anything else!
Examples
Since the fields accept raw HTML, there’re some useful examples for your convenience:
Content Inside Container
<div class="cs-container">
You content goes here.
</div>Content Inside Container with Padding and Background
<div style="padding: 30px; background: #eeeeee;">
<div class="cs-container">
You content goes here.
</div>
</div>Content Inside Container with Top and Bottom Margins
<div class="cs-container" style="margin-top: 30px; margin-bottom: 30px;">
You content goes here.
</div>Full-Width Content with Padding and Background
<div style="padding: 30px; background: #eeeeee;">
You content goes here.
</div>Responsive Content
You may display different content (for example responsive ads) based on the viewport sizes of a user.
For example:
<img src="test.com/image.jpg" class="cs-d-lg-none">
<img src="test.com/image.jpg" class="cs-d-none cs-d-lg-block">This code will display the first image on mobiles (and will hide it on desktops), and the second image on desktops (and will hide it on smaller screens). Simply replace lg (desktop) with md (tablet) or sm (mobiles) to tweak it to your liking.