Veello Theme uses an excellent Bootstrap 5 grid system, which users worldwide have battle-tested for many years. It is a standard setup with 12 columns and a 32px gutter width. Since the grid is managed using particular content elements, you can use it everywhere, where the content elements are supported – articles, news, sections, etc. Moreover, those elements are also available as form fields.
There are several content elements and form fields that ease working with the grid:
|Content element / form field||Description|
|Row||Opens the grid row with columns inside.|
|Row stop||Closes the grid row.|
|Column start||Opens the grid column.|
|Column stop||Closes the grid column.|
Backend user interface
The new grid content elements are wrappers similar to the slider or accordion wrappers already present in the Contao core. Each column content element has a slight hint of how it behaves under different breakpoints. Note no buttons next to column stop and row stop elements – those are managed automatically.
This is how things look like by default:
The real revolution happens when you click the "Enable grid view" button at the top. After the page reloads, you will see an entirely re-designed list of content elements, visualizing how elements are arranged within a grid.
You can see a toolbar with buttons to switch between the different breakpoints just below the article details. The grid system is fully responsive so that you can adjust column width or visibility for every breakpoint individually.
Naturally, it is possible to create nested rows and columns, as shown on the image below:
Row content element
The row content element is the primary grid content element and controls the columns inside it. In this place, you specify a number and layout of the columns of the default breakpoint (medium).
You can quickly create a row element using the "New row" button at the top of the page.
Column content element
Once you created a row content element, you can adjust the settings of each column inside it. The column settings are simple and narrow down to the column width and its offset.
The column width can also be adjusted from within the grid view using the plus and minus buttons.
As with most of the things in Veello Theme, general grid settings are adjustable in the design settings:
Backend user settings
For the backend users with limited access, you can restrict the backend view to one of the possible options:
- No restriction
- The user can enable/disable grid view.
- Force grid view
- The user always sees the grid view.
- Force list view
- The user always sees the list view (Contao default).
You can adjust this setting in the user group settings or the user settings.
Toggle whole wrappers
The Contao backend UI is excellent but lacks one important feature. In version 1.1.0 of Veello Theme, we added the button to publish/unpublish the wrapper element and all its child elements. It works with all wrapper types: accordions, sliders, and grid content elements.