A CSS class is a label that connects an element or group to custom styling or functionality in your template. It may control how something looks, moves or responds on different screen sizes.
To check for a CSS class, select the element or group and open the Advanced tab in the right-side Properties Panel.
You can remove a CSS class if you are certain you no longer want its effect. Remove the class from the Advanced tab, confirm the change and preview the page before publishing.
These are some classes you may find in our templates:
- multi-font: Allows a heading to use two different fonts. When part of the text is set to italic, those words display in a different font (for example Oswald in Velvet Rage) creating a bold, emphasized look. You can replace the second font with another font by editing two simple lines of code, as explained here.
- desktop-text-shift: Moves the selected element or group slightly to the left on certain iPad and desktop screen sizes. This subtle adjustment improves alignment and responsiveness.
- desktop-text-shift-right: Works in the same way but moves the element or group slightly to the right.
- scroll-zoom: Creates a subtle zoom effect on an image as the visitor scrolls. You can see this effect in the Velvet Rage website template.
Despite their names, the two “text shift” classes may be applied to any type of element or group—not only text.
If a class is applied to a group, ungrouping it removes the group and its CSS class. Regrouping the elements will not restore the class automatically. We therefore recommend editing elements inside the existing group instead. See How to Edit Grouped Elements in Showit.