By Anne White
Custom classes are a vital component of the design of any website, but not many people actually know how and why they should use them. This guide will explain what custom classes are, why you should care about them, and how to actually use them.
In most cases you will not have to use custom classes, as we will have created and locked-down modules with custom classes already applied. However, more advanced users, or users who are looking to understand more about how the website-building process works, may find it useful to learn more about this vital element.
Custom classes are unique styles that can be applied to individual elements of the page, in order to change the way that the element is displayed. There are a huge number of custom classes that can be applied to almost every element of the page, with varying effects, allowing almost unlimited customisation. Depending upon the individual class, the function or appearance of the element to which it is applied may be changed.
Most page builders have some custom css options but not many have as many locations (atoms, modules, columns and rows) that custom classes can be applied like PageBox does. Typically, each custom class consists of an action (eg padding), a location (eg top, left etc) and a pixel size (eg 20). The example outlined would therefore read as padding-top-20 which would simply add an extra 20 pixels of space above the item you are adding it to, whether that be an atom, module, column or row.
There are a number of reasons why you might use custom classes on your site. Custom classes can be used to create unique effects, or simply to add or reducing space between elements. These custom classes allow you fine tune or indeed completely change the style of your site.
Each individual custom class will have its own benefit, but with so many there is no reason why you shouldn’t be using at least one on your own site. Even if custom classes have already been applied to your modules, knowing what they are and how to add and edit them means that you can make small edits to your page yourself, and quickly correct any minor mistakes. This means even less confident users will still benefit from understanding and using custom classes.
Custom classes can be added to rows, columns, and atoms, however, before adding custom classes you should ensure that you are adding them in the correct place, with the correct spelling and structure. Some custom classes can only affect certain elements, depending upon their design or function: for example, text-x can only affect elements containing text. Custom classes also need to be added in a specific order to be valid and need to be spelled correctly. If custom classes are added wrongly they will not have the desired effect.
Each custom class will have its own rules and structure; therefore, you should take a look at our “Adding effects with custom classes” page for more information on an individual custom class. One example is padding: when adding a padding class, the padding should be added first, the side that you would like the padding to be added to second, and finally, the amount of padding or margin that you would like to be applied. Other custom classes may have different rules.
It is also worth noting that some custom classes may conflict with each other when added in certain areas. To learn more, see our “Conflicting custom classes” guide.
Every atom contains a field where you can add custom classes, usually below the module ID field. Multiple custom classes can be added to a single atom as long as they are separated with a space. The appearance or functionality of the atom will be changed as long as the custom class is added correctly, and is compatible with the atom.
You can also add custom classes to settings within rows. If a custom class is added to a row, it will also be applied to every element within that row. Again, limitations of the custom class will mean that it may not affect all of the elements within the row. This means that you should consider the elements within your rows before adding any custom classes. For more information on row and column setting, take a look at our handy guide.
Custom classes can also be added within individual columns. This will add the custom class to all of the elements within the column, excluding any elements to which the class cannot be applied.
As long as you have added the custom class correctly, to an element that it is able to affect, you should see a change in the function or design of the element to which it was added.
Now that you understand more about custom classes, you can begin to add them to your own pages and posts. First, you may want to take a look at some of our other custom class guides. Find out more about one of the most common, and useful, custom classes, with our “Padding and Margins” guide. Or take a look at some other custom classes here.