Personalizing your website’s appearance

Noto takes full advantage of the Customizer to manage the settings for your layout, spacings, sizes, and more as easily as possible.

And what better way to make style twists than with the live preview? Simply change any setting and see it take effect right way from Appearance → Customize. Make sure it represents your overall style and is in line with your brand personality. Consistency matters and helps you stand out from the crowd.

Theme Options

One of the most important customization component can be found under Appearance → Customize → Theme Options. Here you’ll see options related to the Main Content, Header, Footer, and more.

Before diving into the settings related to colors, make sure you read this documentation article to make the right decisions.

General settings

By going to Appearance → Customize → Theme Options → General, you can access several essential settings to customize your website to your liking.

First off, you can disable two settings. The first one is the auto-style for the first paragraph on articles (here’s what you’ll be removing). The second one is the image reveal effect on archives, which means there won’t be an image showing up when you hover over a blog post.

The following settings are related to the underline pattern you see below the blog posts title. There are five stylings to choose from (Waves, Bubbles, Triangles, Lines, and Zig Zag), or you can disable it altogether.

In the following section, you can customize the Note Title and Content that show up on your home page. Just as with the underline pattern, you can choose to disable it.

The final section is related to the colors of your website. Our recommendation is not to dive into this area if you don’t have good design knowledge. Instead, you can use the much more intuitive Style Manager system that comes with pre-designed color palettes that you can easily customize. You can read more about where to find it and how to use it in this article.

One of the most visible parts of the website is the Header area. Here, you can change the Layout, Colors, and Fonts of the Logo, as well as the Navigation (top menu) area.

From the Layout section, you can set the Logo Height and Navigation Link Spacing.
The Colors section allows you to change the Navigation Links color, Links Active color, and the Header Background color. You can also customize the style of active links.
From the Fonts section, you can set the Site Title and Navigation text (font family, weight, subset, size, letter spacing, and text transform).

Main Content

The Main Content section represents the spotlight of the website and it highlights your content from the blog post pages.

The Layout area allows you to change the Site Border Color.
From the Colors area, you can set the Page Title Color, Body Text Color, Body Link Active Color, Underlined Body Links, Headings Color(H1→H6), and Content Background Color.
On the Fonts tab, you can change the Page Title Font, Body Text Font, Quote Block Font, and Headings Fonts (H1→H6).

Buttons

You have many options when it comes to the call to action buttons from your website. You can choose their style, shape, colors, and pick a custom font.

Blog Grid Items

The main page of your website is the blog post archive. This showcases the articles from your website in a fashionable manner, and helps you grab the right type of attention.

Before we dive in, there’s one thing we need to clarify: item(s) in all the mentions below refers to your blog post(s) (e.g., items per row translates into blog posts per row).

Let’s got through each section and see what customization options you have available:

In the Layout section, you can adjust the meta info displayed around the title.
From the Colors tab, you can set the Item Footer Color.
You can change the blog posts title, meta, excerpt, dropcap, and footer font in the Fonts area.

The last, but not least section of a website is the Footer. Here you can display copyright text and much more than that.

The Layout section allows you to set the Copyright Text, Top Spacing, Bottom Spacing, Hide Back To Top Link and Pixelgrade Credits. Plus, you can select how the footer widgets are stacked.
From the Colors area, you can change the text and links color, and the Footer Background.

Site Title & Logo

Naming your website is an important part of the customization process. By going to the Site Identity section, you can change the Site Title, Tagline, Logo, and more.

Add custom CSS code

You have the ability to insert your own custom CSS code straight into the Customizer and get a live preview of it. Go to Appearance → Customize → Additional CSS and add your custom code.

Updated on April 12, 2024