Custom HTML Classes

"Classes" or "class bames" refer to the HTML class attribute. These classes are often used by scripts to target specific elements. Custom classes can be added to nearly any element, such as blocks and paragraph entities, in NHMLAC's Drupal sites. This is especially useful for targeting elements with Google Tag Manager (GTM) classes.

Adding a class to an element

It is best practice for class names to be unique.
If it is for GTM make sure it is designated by Google in case it overlaps with other class names

Edit the element to add a class to

For example, to add a class to the "Become a member" button in the Join & Give bottom banner, navigate to the custom block: https://nhm.org/block/6?destination=/admin/structure/block/block-content (opens in a new tab).

Scroll to either the "Attributes" or "GTM Class"

Both the "Attributes" > "Class" field and "GTM Class" field will add custom GTM fields to the element. The Attributes section was added to CTA buttons and block elements, whereas the GTM Class field was added to paragraph entities.

The "Attributes" section will usually be collapsed and will need to be expanded. Attributes section of block

The "GTM Class" field is often found in paragraphs (such as the CTA example used in the screenshot below). GTM Class section of block

Add class names

Multiple class names should be seperated by space and should not contain any special characters.

Do:

apple pear banana

Don't:

"apple, pear, banana"

Save the changes

Click the "Save" button at the bottom of the page.

Examples

"Become a member" button

To target the "Become a member" button in the Join & Give bottom banner, navigate to the custom block: https://nhm.org/block/6?destination=/admin/structure/block/block-content (opens in a new tab).

Become a Member

Scroll to the specified element, and there will be an Attributes dropdown where you can add a class name.

Add to Become a Mamber

"Sign up for newsletter" button

To target the "Sign up for newsletter" button in the Social Footer, navigate to the custom block: https://nhm.org/block/7?destination=/admin/structure/block/block-content (opens in a new tab).

Social Footer

Again, you can pull down Attributes section to add a designated class. For using GTM's class name, please make sure to refer to the class names that are provided by Google Tag Manager.

Add to Social Footer

Make sure to hit "Save" to see the latest changes take effect.

URL Redirects Adding Two-Factor Authentication