Attributes Panel

• Attributes Panel
  • Layer Attributes Section
  • Media Attributes Section
  • Wrapper Attributes Section

Attributes Panel

The Attributes panel is accessed by selecting a layer via the Canvas or Layers sidebar, and in the Right Sidebar clicking the Design icon ¹ to enter Design Mode. Then click the Attributes tab icon ² to open the Attributes panel.

Through the Attributes panel you add HTML attributes to a layer, so it can be targeted by your own CSS and JavaScript, and so its media carries the alt and title text you want. The panel divides into attributes placed on the layer itself, attributes describing the layer’s media, and attributes placed on the element that wraps the layer.

Layer Attributes Section

In the Layer Attributes section set the HTML attributes carried by the layer element itself.

ID (Text)

Set the HTML id attribute on the layer. An id has to be unique within the page, and gives your CSS or JavaScript a single reliable handle on this one layer.

Classes (Text)

Add one or more CSS class names to the layer. Separate several class names with spaces. Use this to style the layer from your theme’s stylesheet, or to hook it up to your own JavaScript.

Rel (Text)

Set the HTML rel attribute on the layer. The rel attribute describes how the linked resource relates to the document containing the link, and takes values such as nofollow, noopener and noreferrer.

Internal Classes (Text)

Add one or more CSS class names to the layer’s inner content element, rather than to the layer element that Classes targets. Separate several class names with spaces.

Tab Index (Text)

Set the HTML tabindex attribute on the layer, which decides where the layer falls in the order visitors reach when tabbing through the page with a keyboard. A value of 0 leaves the layer in the natural document order, a positive number moves it earlier, and -1 takes it out of tab navigation while still allowing focus to be set by script.

Media Attributes Section

In the Media Attributes section choose where the alt and title text for the layer’s media comes from, and enter your own where you would rather not use the values already stored against the file.

Alt (Dropdown)

Choose the source of the layer’s alt text. Alt text describes the image to screen readers and appears in place of the image when it cannot be loaded, so it matters for both accessibility and search engines.

Options:

• _Custom: Use the text typed into Custom Alt.
• _{From Media Library}: Use the alternative text saved against the file in the WordPress media library.
• _Original: Use the alt text carried by the original file.

Custom Alt (Text)

Type the alt text to use for this layer’s media. What is entered here applies to this layer only and does not change the alternative text stored against the file in the media library.

Title (Dropdown)

Choose the source of the layer’s title text. The title attribute is shown by most browsers as a tooltip when the pointer rests on the media.

Options:

• _Custom: Use the text typed into Custom Title.
• _{From Media Library}: Use the title saved against the file in the WordPress media library.
• _Original: Use the title carried by the original file.

Custom Title (Text)

Type the title text to use for this layer’s media. What is entered here applies to this layer only and does not change the title stored against the file in the media library.

Wrapper Attributes Section

In the Wrapper Attributes section set the HTML attributes carried by the element that encloses the layer, rather than by the layer element itself. Use these where a style needs to sit on the outer element.

Wrapper ID (Text)

Set the HTML id attribute on the element wrapping the layer. An id has to be unique within the page.

Wrapper Classes (Text)

Add one or more CSS class names to the element wrapping the layer. Separate several class names with spaces.