An element library is composed of pre-built snippets of HTML code that can be added during the editing process of a template.
Implement an element library by attaching it to a default template from the back-end.
The elements become accessible in the front-end by clicking on the Elements button. Once the dialog box is open the user can drag and drop the pre-built elements inside the preview area.
1 – To add new elements from back-end click on Live Editor > Web Resources
2 – Elements Library can be accessed by clicking on HTML button.
3 – You can now add a new element library or edit an existing one.
4 – To add new element to an Element library click on Add element
5 – Use the “Droppable Classes” field to target the sections in the template after or before which an element can be dropped. In other words, Droppable Classes allows you to define the droppable area between sections of the template. It is highly recommended not to use nested classes when setting up the drag and drop features.
6 – The type field allows to categorize the elements by type of content:
- Headers
- Blogs
- Products
- Pricing
- Testimonials
- Projects
- Features
- Teams
- Contacts
If any CSS, JavaScript or Font resources are necessary to fully render the snippets refer to the respective libraries below: