You can define the new website identity by inserting a text logo into its pages.
It’s best practice that, when users click on the site logo, they will be taken to the home page of the website.
So, inserting a text logo into the website is available from the Navigation section in the Customizer.
Go to the Customizer -> Navigation -> Site Logo.
Click on Site Logo to open the subsection for logo settings.
You can adjust the logo settings differently for homepage and inner pages.
*Note! Usually, the text of the logo will be the same as the title you’ve chosen for your website. In case you want to change that text, click on the pencil icon inside the logo section (in the live preview mode). Open the subsection of the Customizer containing fields for the Site title and Tagline. To change the text of the logo, edit the Site Title field:
Front-Page Logo Settings
You have the option to customize the text logo colors and typography for 2 different states:
Text Logo Color
- Text logo color in normal state
Click on the square symbol next to Text Logo Color, to change the color of the text corresponding to the logo of the front-page.
- Text logo color as it appears in a sticky navigation bar (when users scroll down the page and the navigation bar – containing the text logo – sticks to the top).
Click on the square symbol next to Sticky Nav Text Logo Color, to change the color of the text corresponding to the logo of the front-page, when the navigation bar is set to sticky.
Text Logo Typography (it is common to both text logo in normal state and text logo when the navigation bar sticks to top)
Click on Text Logo Typography to open the panel with settings for text typography:
You can adjust:
- Font Family
- Font Variant
- The dimensions of the font
- The dimensions of the font on mobile
- Line height (the vertical distance of the text line)
- Letter spacing (also known as kerning) – which defines the distance between the letters of the logo text.
- Text Transform – the text can be set to uppercase/lowercase, capitalized, etc.
Customized text logo in normal state:
Customized text logo when the navigation bar is set to sticky:
Inner Pages Logo Settings
For specific settings of the text logo on inner pages, you have to ensure an inner page is open in the Customizer. Otherwise, the changes you make here won’t be visible.
Text Logo Color
You can set the colors and typography of the text logo corresponding to inner pages, in 2 states:
- Text logo in normal state
Click on the square symbol next to Text Logo Color and select the color you want to apply to the text of the logo.
- Text logo when the navigation sticks to top, as users scroll down the page
Click on the square symbol next to Sticky Nav Text Logo Color and select the color you want to apply to the text of the logo, when users scroll down the page and the navigation bar is set to sticky.
Text Logo Typography
Click on Text Logo Typography to open the panel with settings for the text typography:
You can adjust:
- Font Family
- Font Variant
- The dimensions of the font
- The dimensions of the font on mobile
- Line height (the vertical distance of the text line)
- Letter spacing (also known as kerning) – which defines the distance between the letters of the logo text.
- Text Transform – the text can be set to uppercase/lowercase, capitalized, etc.
Customized text logo (inner pages) in normal state:
Customized text logo (inner pages) when the navigation bar is set to sticky:
