Site Tagline Block

Go to the List of Blocks

Use the Site Tagline block to display the tagline of the site on the page or to edit the site tagline.

Note: Updating this block and saving the template will apply the changes wherever the Site Tagline is used including the browser title bar, search results and the Tagline text field in Settings > General.

To add a Site Tagline block, click the Block Inserter icon when editing the page template. Search for the Site Tagline block. Click on it to add the block to your page template.

Note: The Site Tagline block is primarily used when editing the Template files in the Site Editor.

Video showing how to add the Site Tagline block

You can also type /site-tagline and hit enter in a new paragraph block to add the Site Tagline block quickly. 

How to add Site Tagline block quickly
How to add Site Tagline block quickly

Detailed instructions on adding blocks can be found here.

Block Toolbar

To view the block toolbar, click on the block and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Site Tagline block shows five buttons in the block toolbar:

  • Transform to
  • Drag icon
  • Move arrows
  • Change text alignment
  • More options
Site Tagline Block Toolbar
Site Tagline Block Toolbar

Transform to:

Transform options for Site Tagline Block
Transform options for Site Tagline Block

Click on the “Transform” button to convert the Site Title block into a “Group” block or “Columns” block.

Drag icon:

Drag icon in the Site Tagline Block
Drag icon in the Site Tagline Block

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move arrows:

Move arrows in the Site Tagline Block
Move arrows in the Site Tagline Block

The left and right arrow icons can be used to move the block left or right inside the group of nested blocks.

Detailed instructions on moving a block within the editor can be found here.

Change text alignment:

Change text alignment for the Site Tagline Block
Change text alignment for the Site Tagline Block

Click the “Change alignment” button in the Block toolbar to display the alignment drop-down. You can align the block text to the left, make it center-aligned or align it to the right.

More option:

The More option on a block toolbar gives you more features to customize the block. 

More option in the Site Tagline Block
More option in the Site Tagline Block

Show/Hide more settings

The (Show)Hide more settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Select parent block

The Select parent block lets you navigate to the parent block inside which the selected block is nested.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate the selected block.

Insert before

Insert a new block before the selected block(s).

Insert after

Insert a new block after the selected block(s).

Move to

When you select Move To, a blue line will be displayed inside your content. You can then use the arrow keys to move the blue line up or down based on where you want the selected block to be moved into. Once the blue line is in the new location, hit ’Return’ on your keyboard. This will move the selected block to the new position.

Lock

The Lock option allows you to restrict the movement of the block or prevent the removal of the block.

Make template part

The Make template part option allows you to convert the selected block into a template part.

Add to Reusable blocks

The Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other pages.

Group

Select the Group option if you want to group multiple blocks into one unit. This option is useful if you want to add a background color to multiple blocks.

Remove Site Tagline

With the Remove Site Tagline option, you can delete the selected block from your page.

Click here to learn more about the More options.

Top ↑

Block Settings

In addition to the block toolbar, every block has specific options in the editor sidebar.

If you do not see the sidebar, click the ‘cog’ icon next to the Save button.

How to turn on the Block Settings sidebar
How to turn on the Block Settings sidebar
Block Settings in the Site Tagline Block
Block Settings in the Site Tagline Block

Color settings:

You can customize the text color and background color for the Site Tagline block. The color options available will vary based on the theme.

Color Settings in the Site Tagline Block
Color Settings in the Site Tagline Block

Typography settings:

On this tab, you can adjust the Font size, Appearance, Line height, Letter case, Letter-spacing, and Font family. 

To access all the typography options click on the + button in the right corner of the Typography tab.

Typography Settings in the Site Tagline Block
Typography Settings in the Site Tagline Block

To change the font size, you can select the numbers 1 (for small), 2 (for medium), 3 (for large) or 4 (for extra large). 

Font size setting in the Site Tagline Block
Font size setting in the Site Tagline Block

Click on the slider icon to the right of Size to add custom font size in the text field.

Custom font size setting in the Site Tagline Block
Custom font size setting in the Site Tagline Block

Clicking on PX will open a drop-down with options for other font units -PX, Em, and Rem. 

Changing the font size unit in the Site Tagline Block
Changing the font size unit in the Site Tagline Block

Click on the Font family drop-down to change the font for the site title. The values in the drop-down will vary based on the theme.

Font-family setting in the Site Tagline Block
Font-family setting in the Site Tagline Block

Click on the Appearance drop-down to change the font weight for the site title. The values in the drop-down will vary based on the theme.

Appearance setting in the Site Tagline Block
Appearance setting in the Site Tagline Block

You can increase or decrease the value for the line height by clicking on the up or down arrow handles in the Line height text field or by typing in your custom value inside the text field.

Line height setting in the Site Tagline Block
Line height setting in the Site Tagline Block

You can change the Letter case from uppercase (all letters are in uppercase), lowercase (all letters are in lowercase) or capitalize (where the first letter of each word is uppercase).

Letter case setting in the Site Tagline Block
Letter case setting in the Site Tagline Block

You can adjust the Letter-spacing by typing in a custom value in the Letter-spacing text field. Clicking on PX will open a drop-down with options for other units -PX, %, EM, REM, VW, VH. 

Letter spacing setting in the Site Tagline Block
Letter spacing setting in the Site Tagline Block

You also have the option to Reset all the typography changes you made by clicking on the Reset all option in the dropdown.

To reset all the typography changes
To reset all the typography changes

Dimensions settings:

Click on the ‘+” icon to the right of Dimensions to explore the Dimensions Settings for the block.

Dimension settings in the Site Tagline block
Dimension settings in the Site Tagline block

Click on Margin and the Padding from the drop-down to display the Margin and Padding Dimension Settings for the Site Tagline block. 

The Margin setting affects the space around the selected block. You can type in a custom value in the text field if you want the same spacing all around the block.

Margin setting for the Site Tagline Block
Margin setting for the Site Tagline Block

You can change the unit for Margin by clicking on PX to display a dropdown with the other supported units- %, EM, REM, VW, and VH.

Changing the margin's unit for the Site Tagline Block
Changing the margin’s unit for the Site Tagline Block

Click the Link icon to the right, to set different spacing values for top, right, bottom and left of the block.

Link icon
Link icon

You can type in a custom value in any of the four text fields. You can also change the unit for margin by clicking on PX to display a dropdown with the other supported units- %, EM, REM, VW, and VH.

Margin setting for the Site Tagline Block
Margin setting for the Site Tagline Block

Click on the Link icon once again if you want to have the same value for margin all around the block.

The Padding setting affects the space between the block’s content and its border. You can type in a custom value in the text field if you want the same spacing for the padding.

Padding setting for the Site Tagline block
Padding setting for the Site Tagline block

You can change the unit for Padding by clicking on PX to display a dropdown with the other supported units- %, EM, REM, VW, and VH.

Changing the padding's unit for the Site Tagline Block
Changing the padding’s unit for the Site Tagline Block

Click the Link icon to the right, to set different spacing values for top, right, bottom and left.

Link icon
Link icon

You can type in a custom value in any of the four text fields. You can also change the unit for padding by clicking on PX to display a dropdown with the other supported units- %, EM, REM, VW, and VH.

Padding setting for the Site Tagline block
Padding setting for the Site Tagline block

Click on the Link icon once again if you want to have the same value for padding.

You also have the option to revert all the Dimension changes you made, by clicking on the Reset all option from the dropdown. 

Reset all Dimension settings
Reset all Dimension settings

Click here to learn more about the Dimensions Settings.

Advanced settings:

The “Advanced” tab lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles to the block.

Advanced option in the selected Block
Advanced option in the selected Block

Changelog:

  • Created 2022-04-04

Was this article helpful? How could it be improved?