The Gridbox Design System. Chapter 3: Introduction to Presets

Introduction to Gridbox Presets

We are continuing series of Gridbox Design System updates, and today we want to introduce you Gridbox Presets. Presets it's a fantastic tool for Joomla Website Builder Gridbox which allows you to style Gridbox items much faster, create your own UI library and override default styles of the Gridbox items.

What is a Gridbox Preset?

Gridbox Preset is a Saved Item Style. You can to configure the style of any Gridbox item and save it for future using. Saved item style (preset) can be assigned to other Gridbox items with the same type.

By changing the style of the item with an active preset, the style also will be changed for all other Gridbox items which have the same preset.

Gridbox Presets - Joomla Website Builder Gridbox

If you are familiar with Gridbox Library Tool, looks like as a "Preset" is very similar to "Library Global Items", but this is only at first glance.

Unlike "Library Global Items" presets includes only item style info, settings from tabs: design, background and layout (typography, colors, shadows, borders, margins, paddings, etc.). Preset does not include information about item labels, links, etc., settings from the tab "General".

Preset can be compared with classes in the CSS, by changing the rules for the CSS class, changes will be assigned to all items which have the same class.

Managing Presets in Gridbox

Gridbox Presets you can find in the item settings panel, tab "General".

Managing Presets in Gridbox - Joomla Website Builder Gridbox

Creating and Saving Presets

To save an item preset, open Presets Library and click on the icon "Save Preset".

Creating and Saving Presets - Joomla Website Builder Gridbox

In the opened window, you need to enter a name for preset and click on the button "Save"

We want to note, that in a preset library are available only presets with the same type, that's mean, for the Gridbox plugin button, will be available only saved button presets, etc.

To assign created preset to other item with the same type, just open item settings and select created preset.

Assign Created Preset - Joomla Website Builder Gridbox

All items with an active preset comes with an icon "Preset". This will help you quickly understand whether this element is with the preset or not.

Active Preset - Joomla Website Builder Gridbox

Overriding the Default Styles

Gridbox presets allows you to override the default style of the Gridbox items. Using this option you can configure the default items style to fit your website design.

In order to set a preset as a default, you need to select a preset from the list and click on the icon "Edit".

Default Preset - Joomla Website Builder Gridbox

In the opened window, you need to pick the "Default" and click on the button "Save". After that by adding a new item, item will come with your preset styles.

Gridbox Default Presets - Joomla Website Builder Gridbox

If you decide to return the standard element styles, you’ll need to open the Preset editing window and uncheck "Default".

4 Reasons Why You Should Start Using Presets

We strongly recommend you to start using presets in your projects. Presets, Gridbox Color Variables and Typography Inheritance System are advanced tools, and require a professional approach to website building. The advantages of a Gridbox presets are obvious!

1. Build Faster
Using presets, you can greatly speed up the process of customizing the style of elements. For example, you need to configure 3 columns in the same style. With the help of presets it will be very easy and fast, you will just need to adjust 1 column, for the rest of the columns you can assign the preset of the first column.

2. Configure The Default Style
Customize the default style of Gridbox items to fit your website design.

3. Create Your Own UI Kit
You can create your own starter UI Kit. Configure the default style of Gridbox items as you need, export the theme and use it for all your future projects.

4. Think About The Future
Trends in web design change very often and if in a one day you decide to change the style of all buttons on your site, you will need to change the style only for the one button, other buttons will inherit the same style. But of course, it will work you'll start adding presets.


v.2.4.2 - 10/05/2018

  • Added: Presets;
  • Added: Gradients Overlays to Slideset and Carousel Plugins;
  • Added: Align for Smooth Scrolling Plugin;
  • Added: Value None for Overlay option;
  • Fixed: Issues with a plugin Facebook Comments;
  • Fixed: Issue with 404 Page.

Step by step we came to the finale. Very soon we plan to release the 4th chapter, it will be the final chapter of the Gridbox Design System! If you have any questions about Gridbox presets, feel free to write in to comments form bellow. Let's Rock!