Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 is here โ€“ Learn More

Skip to content

Custom Elements

Design Block

Below is the basic JS for creating a custom design block. The FroalaPages.RegisterDesignBlock method can be used to achieve that.

// FroalaPages.RegisterDesignBlock takes 3 params:
//   - category name
//   - the HTML for the design block
//   - the path for the image
FroalaPages.RegisterDesignBlock('Call To Action', 
'<section class="fdb-block">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8 text-center">
<p class="lead">"Separated they live in Bookmarksgrove right at the coast of the Semantics, far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast."</p>
<p class="mt-5 mt-sm-4"><a class="btn btn-primary" href="https://awsstage.froala.com">Download</a></p>
</div>
</div>
</div>
</section>', 'call-to-action/1.jpg');
Sign up

Download the code by signing up for our newsletter

Sign up

Download the code by signing up for our newsletter

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. - Froala as described in the Privacy Statement. Froala, Inc. - Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement.