Plone 6 combines the development ease of React with the dependability of the Plone Content Management System (CMS). Volto — the front-end for Plone 6 — boasts a rich through-the-web (TTW) editing experience and is largely focused on usability and customization. Volto also offers in-place editing, a drag-and-drop layout configuration and a toolbar that dynamically changes to show only the actions needed in the moment.
While Volto comes with a default set of Blocks and functionality which allows users to create dynamic websites right out-of-the-box, more advanced users may want to customize and extend Volto’s functionality with add-ons.
Not ready to build your own add-on? Need to quick way to get started? These Volto add-ons will jumpstart your editing experience. Let’s dive in:
The Volto Blocks Grid add-on enables editors to create “Unidimensional (x-axis) grids for blocks.” The parent block can contain up to four columns and supports drag and drop reordering.
This add-on contains 3 type of parent blocks:
The package also includes a Teaser block that allows editors to source content from other areas of the site.
Need a different type of grid? Editors can create a new block type and create a personalized grid by defining the type of blocks allowed.
The Volto-columns-block add-on allows editors to group Volto blocks into columns through a variety of layouts with pre-defined widths, such as 50/50 or 25/50/25. Editors can use up to four columns. Plus, blocks can be vertically stacked within each column.
Editors can change the layouts and reorder columns at any time.
Additionally, each column’s background color and vertical alignment can be set.
Volto-block-form adds a form block that allows editors to create forms TTW. Form fields can be reordered with drag and drop. Additional settings and form details like “Recipients,” “Sender” and “Mail Subject” can be set in the right sidebar panel. Also — since this is a block — it can be moved around the page and used along with other blocks.
Volto-block-form ships with a variety of field types including:
Form field details are also set using the sidebar panel:
Note: This add-on works together with collective.volto.formsupport
on the Plone backend which adds helper routes and functionalities to support the frontend.
Editors can create custom dropdown menus TTW with the volto-dropdownmenu add-on.
Once installed, editors should navigate to controlpanel/dropdown-menu-settings
to define their dropdown menus. Editors can specify different menu structures according to the site path, which are ideal for child sites.
Each navigation tab has two modes:
A dropdown menu can be further customized by adding:
Need to customize the look even more? Create Navigation.jsx
based on the add-on’s src/addons/volto-dropdownmenu/src/customizations/Navigation.jsx.
Note: This add-on works together with collective.volto.dropdownmenu
on the Plone backend which adds a control panel for the menu configuration and the Rest API view to expose the settings to Volto.
Visit the awesome-volto repo on GitHub to explore more Volto add-ons and contribute your own.
Sign up for our newsletters to read more about best practices and get tech tips in your inbox.