Notebook is a clean and modern one-column theme that’s ideal for bloggers of all types. With balanced typography, colors, and attention to detail, Notebook makes the content on your site stand out.
Responsive
The theme’s design is responsive, so the content on your site will always look beautifully on smartphones, tablets, laptops, and desktop screens.
Custom Homepage Template
Notebook comes with an optional custom homepage template that displays an introduction area and recent posts section.
Introduction Section
The introduction section is the perfect way to acquaint yourself with your site’s visitors. It displays your homepage title and content along with an optional background image.
Recent Posts Section
This section displays a list of your recent posts. For each post, the title, date, author, and category name are displayed. There’s also a View All link that lets your site’s visitors quickly access the main blog page.
Sidebar
Notebook comes with a toggle sidebar that displays site’s header (logo, title, tagline and search form), custom menu, and widget area.
Featured Images
Assigning a Featured Image to your post will display it next to the post’s content in archive views and as a background image on single posts. The featured image is also used as a background for the bottom navigation linking to the next and previous posts.
Single Post Page
Archive View
Post Navigation
Social Links
Notebook allows you to add social icons using a custom menu – learn how to set it up.
Quick Specs (
all measurements in pixels):
- The maximum content width is
820
.
- Recommended featured image width is
1080
.
- Recommended featured image height is at least
600
.
Setting up Your Pages
Setting Up a Homepage Template
By default, your site’s homepage displays your latest blog posts, but Notebook is designed to use a static front page, with blog posts displayed on a separate page. Notebook also comes with an optional Homepage template that you can assign to your front page. Here’s how to set it up:
- Create a new Page. The page title should be what you want the Homepage introduction section title to be.
- Add content to the page. It will be displayed in your introduction section under the page title.
- Assign the Homepage template from the Page Attributes box.
- To add a background image to your introduction section, set a featured image.
- Publish the page.
Setting Up a Blog Page
- Create a new Page. You don’t have to add any content or assign a page template.
- Publish the page.
Be sure to assign your homepage and blog page under Settings → Reading, as described in the guide to setting up a static front page.
Changing the Number of Posts in the Recent Posts Section
The number of posts displayed in the Recent Posts section is the same as the amount of blog posts that are displayed on your blog page. You can change this number in Settings → Reading.
Adding Featured Images
Notebook supports Featured Images. Learn how to add a Featured Image to your post or page.
Displaying Post Excerpts
You can display post excerpts on the blog page by using the More Tag, as seen in the demo.
Displaying Social Icons
Notebook automatically adds social icons based on the link you’ve set in the Social Menu. The following social platforms are supported:
- Twitter
- Facebook
- YouTube
- Dribbble
- Flickr
- GitHub
- Google+
- Instagram
- LinkedIn
- Pinterest
- Tumblr
- Behance
- Vkontakte
- Soundcloud
- deviantART
- Vimeo
- Reddit
- RSS
- Email
- Navigate to Appearance → Menus.
- Create a new Custom Menu.
- Check the box next to the “Social Menu” label and then click Save Menu.
- To add your social links, select Links from the menu on the left.
- Add a URL and Link text for each social profile.
- Click the Save Menu button when you are ready.
Text Styling Options
You can style your post introduction and add optional drop caps to your paragraphs. Those two styling options are available only for the Single Posts and Pages.
Post Introduction
Wrap your paragraph with a “p” tag that has the “intro” class.
<p class="intro">Dummy text is text that is used in the publishing industry or by web designers to occupy the space...</p>
Drop Cap
Wrap the first letter of your paragraph with a “span” tag that has the “dropcap” class.
<span class="dropcap">M</span>aecenas nec nunc et ligula egestas mattis ac eget sem.