How to Use Custom Classes to Style Webpage Content

 

Your Locable website or microsite is very flexible when it comes to design. This article is meant to help you understand a few basics so that you can add pages and apply other changes as needed.

As always, our Support Team is happy to help with any design questions or implementation. If this article concerns you, please contact us directly for assistance.

 

What Are Custom Classes? A Primer...

Modern websites use HTML, CSS, and JS. Classes can be added to the HTML structure and used for styling and other application.

Custom classes are a simple way to customize the structure of your web pages to enhance the default structure and customize how your content looks on the page. They let you apply styling, spacing, background treatments, or layout adjustments, without needing much technical or coding knowledge.

This article gives you a basic, easy-to-follow overview of how built-in custom classes work and how to apply them.

Using Custom Classes

Think of custom classes like labels you attach to a block of content: Hero, Content Blocks, Columns, Simple Text blocks, and various Embed feeds (Embeddable Resources).

These are applied to one block at a time, which means you can style specific sections without affecting the rest of the page. When added, the system knows how to display that block based on rules that are already set up behind the scenes, or custom rules that have been added to your account.

Custom classes are commonly used to:

• Add space around content

• Adjust background colors or sections

• Create visual separation between sections

• Improve readability and layout

 

How to Add a Custom Class to a Content Block

Adding a custom class only takes a few steps.

1. Click on the block of content you want to style.

2. In the content block's toolbar, click the gear icon to open the block settings.

3. Find the field labeled Set a Custom Class.

4. Type the class name into the field.

   

5. Save the element update.

Once the page is saved, the styling will be applied automatically.

 

Common Built-In Custom Classes

Every website includes a small set of built-in custom classes that are safe to use and work the same way across sites. These are typically used for basic spacing, layout, and visual structure.

Below are examples of common types of built-in classes you may see and use:

p-t-0

What it does:
Removes extra space at the top of the content block.

When to use it:
Use this when there is too much space above content and you want sections to sit closer together.

p-b-0

What it does:
Removes extra space at the bottom of a column or content block.

When to use it:
Use this when there is too much space below content and you want sections to sit closer together.

m-t-0

What it does:
Removes extra space above a block or section.

When to use it:
Use this when there is too much space between this block and the content above it, and you want them to sit closer together.

Good to know:
This affects spacing outside the block, not the content inside it.

m-b-0

What it does:
Removes extra space below a block or section.

When to use it:
Use this when there is too much space between this block and the content below it.

Good to know:
This affects spacing outside the block and does not remove any content.

m-t-xl

What it does:
Adds extra space above a content block.

When to use it:
Use this when a section needs more visual separation from the content above it, such as before a new section, headline, or callout.Your

hide-button

What it does:
Hides the linked button in a column.

When to use it:
Use this when you want the image in a column to act as the clickable link instead of showing a separate button.

parallax

What it does:
Creates a subtle scrolling effect of the content block's background image, if set.

When to use it:
Use this on sections with background images when you want a more dynamic, visually engaging effect as visitors scroll. Parallax works best on larger background images and should be used sparingly.

narrow-column

What it does:
Narrows the overall width of a content block.

When to use it:
Use this for text-heavy sections to improve readability or when you want content to feel more focused and less wide on the page.

 

Using More Than One Custom Class

You can apply more than one custom class to the same block if needed. To do this, enter multiple class names in the Custom Classes field, with a single space between each one.

For example: Spacing classes like p-t-0 and p-b-0 are often used together to fine-tune how content lines up within columns or sections.

 

Keep It Simple

Most content blocks only need one or two custom classes. Using too many can make it harder to keep your design consistent.

Only use class names that have been provided by our team.

What If My Site Has Custom Design Elements?

Some websites include custom coding to style elements of your website, using design work that goes beyond the standard built-in classes. If your site has custom styling, we are happy to provide additional details tailored specifically to your website.

We are pleased to provide our Locable website Lookbook to share a variety of packaged styling options that can be applied to elements of content on your website. If you would like any of these styling designs applied to your website, reach out to our Support Team and we can install the proper coding styles in your account.

 

When to Contact the Support Team

Custom classes are intended for basic, repeatable styling. Please reach out to our Support Team if you want to:

• Create a new layout

• Change the design in a major way

• Use a class you are unsure about

• Add something that is not covered in your class list

We are always happy to help and make sure changes are applied correctly.