Advanced settings

On this page

All advanced settings
Where each setting shows

In the right sidebar of a selected block or section, the Advanced group holds settings for linking to a part of a page and for styling it with your own CSS. Click the + beside Advanced and pick the setting you need. To remove one, select it again in that menu, or point at it and click the x beside it. Removing it clears its value.

All advanced settings

Setting	What it does
HTML element	Section only. The HTML tag the section is drawn with: `<section>` (the default), `<header>`, `<footer>`, `<aside>`, `<article>` or `<div>`. Visitors see no difference. Screen readers and search engines read the tag. Choose `<footer>` for your site footer, which usually sits in a layout, so you set it once.
HTML anchor	A name for the block or section, so a link can jump straight to it. Enter a word or two, such as `pricing`. A space or a `#` turns into a hyphen as you type. Then link to it with `#pricing` from a button or a menu on the same page, or with the page's address followed by `#pricing` from anywhere else. Each anchor should be used once per page. When the header is sticky, a link to a section's anchor stops the page below the header, so the header does not cover the section's top.
CSS classes	Class names added to the element, separated by spaces, such as `promo highlight`. Style them with CSS you write for the whole project, as Add custom CSS describes. The field also takes Tailwind CSS utility classes, short ready-made classes such as `uppercase`. Class names with characters such as quotes or braces are removed.
Custom CSS	CSS for this element only. Write the properties straight in, such as `opacity: 0.7;`. Use `&:hover` for how it looks when the pointer is over it, and a selector such as `img` for what is inside it. Up to 20,000 characters.

A short example for Custom CSS on a Group:

opacity: 0.7;

&:hover {
  opacity: 1;
}

img {
  filter: grayscale(1);
}

The Group shows at 70%, at full strength when the pointer is over it, and its pictures show in grey. Add custom CSS covers CSS for the whole site, classes and the theme's CSS variables.

Where each setting shows

Part	Settings
Section	HTML element, HTML anchor, CSS classes, Custom CSS
Navigation and Dialog	HTML anchor, CSS classes, Custom CSS
Post Content and Post Comments	CSS classes, Custom CSS
Blocks	HTML anchor, CSS classes and Custom CSS. Custom HTML and the Hidden and Option parts of a form have no HTML anchor. The Built-in Menu of a Navigation has no HTML anchor.

When you select several blocks, HTML anchor does not show, because an anchor names one element.

On a Dialog, a link to # followed by its HTML anchor, such as #newsletter, opens the dialog. Dialog section explains it.