37. Using Volto add-ons#

37.1. Volto Add-ons#

Add-ons enrich a Volto app with specialized blocks, themes, integration of Node packages, and more. A selection of add-ons can be found on:

One typical add-on is about adding a new block to present content in columns: @eeacms/volto-columns-block

The eea volto-columns-block package gives you a block with columns. Each column is its own separate blocks container.

Here is how you would install a Volto add-on:

Update package.json:

"addons": [
  "@eeacms/volto-columns-block"
],

"dependencies": {
  "@plone/volto": "12.3.0",
  "@eeacms/volto-columns-block": "github:eea/volto-columns-block#x.y.z"
},

Add-ons that are already released on npm:

1"addons": [
2  "@eeacms/volto-columns-block"
3],
4
5"dependencies": {
6  "@plone/volto": "8.3.0",
7  "@eeacms/volto-columns-block": "^1.0.0"
8},

Install new add-ons and restart Volto:

$ yarn
$ yarn start

37.2. Complementing Volto with Plone add-ons#

With some additional features of Volto add-ons in place, where do we need to work on the Plone side? With the split of Plone in backend and frontend, Plone is still the place to shape your data model. For our training story 'Platform for a Plone Conference' we need to model the content type talk. So in an earlier Dexterity I: Content types chapter we created a new Plone add-on ploneconf.site that adds the content type talk and the correspondent views for a talk and a list of talks in our Volto app volto-ploneconf in chapter Volto View Component: A Default View for a "Talk".