---
title: "Adding markup to an element"
date: "2017-11-12T15:53:56+00:00"
summary: "Learn how to enhance your Drupal elements with custom markup. This guide covers adding classes, IDs, attributes, prefixes, and suffixes to improve functionality and styling of your site's components."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/adding-markup-element"
id: "50edd623-e3d8-41e1-891b-a47e2d869b64"
---

Table of contents will be added

The Markup settings allow you to add additional Classes, ID, Attributes and Prefix and Suffix to your element.

To add additional markup to an Element:

1.  Navigate to a component or a template with the Layout canvas on it
2.  Double click an Element on the Layout canvas to open its settings
3.  Click the **...ellipsis tab**
4.  In the menu click **Markup**
5.  The default form displays the Add classes field
6.  Click the **Properties** button to add ID's Attributes, Prefix and Suffix.

![57c3fa90-markup-tab.png](https://acquia.widen.net/content/d055b223-65cd-4729-aa21-808ec702df53/web/57c3fa90-markup-tab.png)

Add classes
-----------

To add classes:

*   Enter your classes in the **Classes field**
*   Do not include the "**.**" before the class name
*   You can add multiple classes separated by spaces.

![533b10aa-markup-add-classes.png](https://acquia.widen.net/content/11d00e81-2519-44c4-a903-a8c0509ca0e2/web/533b10aa-markup-add-classes.png)

Add an ID
---------

To add an ID:

*   Enter your ID in the **ID field**
*   Do not include a # before the ID
*   The ID must be unique to the page.

![100f8051-markup-add-id.png](https://acquia.widen.net/content/75d1fefc-b5c3-43fd-9bd6-d6b4ec2b4449/web/100f8051-markup-add-id.png)

Add attributes
--------------

To add attributes:

1.  Enter the attribute name and Value in the **Attribute** and **Value** fields
2.  To add more attributes, click on **Add another**
3.  To remove an Attribute, click on the **Delete button.**

![afbc1cb7-markup-add-attributes.png](https://acquia.widen.net/content/617eaf71-fa75-4b2c-ad9c-247be3fc7ae5/web/afbc1cb7-markup-add-attributes.png)

Add a prefix and suffix
-----------------------

You can add a prefix (something before) or a Suffix (something after) to an element. This is developer functionality and should only be used if you know what you are doing.

*   Enter your prefix into the Prefix field
*   Enter your suffix into the Suffix field

![7c4f5570-markup-prefix-suffix.png](https://acquia.widen.net/content/90bbc0f6-f0f4-4a21-b54b-fb062df18940/web/7c4f5570-markup-prefix-suffix.png)