Blocks, Design Your Site, Theme Blocks

Theme Blocks » Site Title Block

The Site Title block displays your site’s title set at Settings → General. The Site title, along with the Site Tagline, defines your website or blog’s identity in Search Engines and social networks. It’s what people see when they get a preview of your site in search results or in posts on social networks like Facebook, Twitter, and LinkedIn.  

Table of Contents

Add the Site Title Block

To add the Site Title block, click on the + Block Inserter icon and search for “Site Title”.

💡

Using your keyboard, you can also type /title on a new line, press the down arrow to select Site Title, and press enter to quickly add a new Site Title block.

GIF showing adding a site title block using the keyboard shortcut.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear:

site title block toolbar

The Site Title block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Set the title to show in wide width or full width.
  • Choose a heading level from 1 to 6, or regular paragraph text. If you’re not sure what to set here, H1 is the most common choice for a site title.
  • Align the site title to the left, center, or right.

📌

If you do not see the option to change the width of the block to wide or full-width and your theme supports these options, it is possible the block has been added to a Group block. You can learn more about the Group block here.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Block settings
Typography

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

Color

Here, you can set the background color and link color of your site title.

Site title block color settings.
Spacing

Under Spacing, you can control the amount of padding used around your site title.

Enter a value in the single box available to set the padding around your entire title. Alternatively, click the link icon to set more specific values for the top, right, bottom, and left sides of the title individually

The default unit is pixels (px). You may click the unit to choose from:

  • Pixels (px)
  • em
  • rem
  • Viewport width (vw)
  • Viewport height (vh)
Site tagline block spacing settings

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help