Create a CMS block for Cevoid’s UGC widgets

Follow this general tutorial for best practices when building a reusable Cevoid block for your CMS.

Erik Droh avatar
Written by Erik Droh
Updated over a week ago

Please note: This is a general tutorial and the steps you need to follow might vary depending on what CMS you are using for your website.

Creating a block for a gallery

1. First, log in to your CMS and navigate to the section where you can create new content blocks.

2. Create a new content block and give it a name that describes its purpose, such as “Cevoid Gallery”.

3. Add a text field for the data-gallery ID. This will allow the user to input the ID for the specific gallery they want to display.

Add fields for a title and description if you want to.

In the content block’s HTML editor, add similar code as the one below.

<div class="cevoid-gallery">
<h2>{{title}}</h2>
<p>{{description}}</p>
<div id="cevoid-container" data-gallery="{{gallery_id}}"></div>
</div>


4. When adding the content block to a page, the user can input the title, description, and gallery ID in the appropriate fields. The gallery will be displayed using the Cevoid code in the HTML editor.

This block can then be reused on multiple pages, simply inputting a different gallery ID for each instance.


Creating a block for a Card

1. First, log in to your CMS and navigate to the section where you can create new content blocks.

2. Create a new content block and give it a name that describes its purpose, such as “Cevoid Card”.

3. Add a text field for the data-card ID. This will allow the user to input the ID for the specific gallery they want to display.

In the content block’s HTML editor, add similar code as the one below.

<div class="cevoid-card">
<div id="cevoid-container" data-card="{{card_id}}"></div>
</div>


4. When adding the content block to a page, the user can input the card ID in the appropriate fields. The card will be displayed using the Cevoid code in the HTML editor.

This block can then be reused on multiple pages, simply inputting a different card ID for each instance.

How to implement our galleries follow these guides:

Did this answer your question?