Add a CSS ID or class name to a module

You can enter a custom ID or class name for any row, column, or module, and that name can be used as a selector in any custom CSS rules that you write.

To assign a custom CSS ID or class value to a row, column, or module:

  1. Open a row, column, or module for editing.
  2. Click the Advanced tab and scroll down to the HTML Element (Page Builder 2.x) or CSS Selectors (Page Builder 1.x) section.
  3. Add a unique ID or a class name or both, depending on how you plan to use it.
    Don't use a pound sign or period in the value. The following sections describe ID and class selectors in more detail.
    Multiple CSS classes can be entered by separating them with spaces.

About the ID selector

An ID selector must be unique, meaning it should only be used for only one element (meaning a row, column, or module).

IDs are used for two purposes:

  • To write custom CSS rules that apply to a single element.
  • To create an anchor so you can link to that element, for purposes such as scrolling down a page to a particular spot. (See the Related Article for how to do that.)

Here are the rules for ID selectors:

  • They must start with a letter
  • They cannot contain spaces
  • The only characters they can use are letters, numbers, dashes, or underscores

The symbol used to refer to an ID selector in a CSS rule is the pound sign (#). For example, if you assign an ID named my-element to a module, you can target that ID by writing a CSS rule for #my-element. The following rule says that the element with the ID my-element must be right-aligned:

#my-element {
    text-align: right;
}

Note: You should use the pound sign to name IDs in your CSS rule, but you should not use the pound symbol when you assign the ID name to the row, column, or module.

About the class selector

The same class selector can be used with as many elements as you want your CSS rule to apply to.

A class selector has the same constraints as IDs in terms of the letters, numbers, and symbols it can contain.

Suppose you have several modules that you want to center on the page. Assign the same class name, my-elements, to each of the modules. The CSS symbol to refer to a class is a period (.), so your CSS rule would look like this:

.my-elements {
    text-align: center;
}

Keep in mind that classes in the CSS rule should start with a period, but the value you enter into the CSS setting for an element should not include the period.