Blog

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:

Volto Blocks Grid (by kitconcept)

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:

• Grid: 
• Allows Teaser, Image, Listing and Text blocks.
• Teaser Grid:
• Only allows Teaser blocks.
• Images Grid: 
• Only allows Image 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.

volto-columns-block 

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

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:

• Text,
• Textarea,
• List (Select Field),
• Single Choice (Radio Buttons),
• Multiple Choice (Checkboxes),
• Date,
• Attachment, and
• E-mail.

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.

volto-dropdownmenu

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: 

• Simple Link:
• A single tab
• Dropdown: 
• A dropdown menu

A dropdown menu can be further customized by adding: 

• blocks, 
• “show more links” with associated link text and
• user-defined CSS classes.

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.

Get Started

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.