Featured Content Carousel
Booklet uses Featured Content to highlight 10 of your featured posts in a beautiful carousel on the homepage. Featured Content works by tagging the posts you’d like to highlight with a common tag.
To get started with Featured Content, visit My Sites → Customize → Featured Content.
- Tag Name: Select the tag you’d like to feature in the header. Start typing to search for your tag or to create a new tag. Once you’ve selected a tag with associated posts, the Featured Content header will appear on your homepage.
- Hide tag from displaying in post meta and tag clouds: This option can be checked to ensure that the tag selected for Featured Content doesn’t show up in that post’s list of tags or the Tag Cloud widget. Your tag’s archive will continue to be displayed in normal fashion.
- Display tag content in all listings: This option can be checked to ensure that the Featured Content tag will display in all pages and archives.
- Featured Content Height: Use this slider to change the height of your featured content area. Your featured image will be scaled proportionally to fit any size you choose.
The recommended image width for the Featured Content carousel is 1200-1500px.
Using the Theme Customizer
Booklet is customizable via the Customizer, under My Sites → Customize. Here, you can change the various theme options and customize the appearance of your site.
Booklet’s settings are separated into various Customizer panels:
- Index Post Style: Customize the number of columns to display on your index, search, and archive post layout. You can choose from a one-, two-, or three-column layout.
- Grid View Excerpt Length: If you choose a two or three column layout, you’ll have the option to change the excerpt length on grid posts. An excerpt for two or three column layouts is generated automatically, but this option will let you fine-tune the excerpt to your liking.
- Auto Generate Excerpt: If you choose a one column layout, you’ll have the option to display the full post content on index pages or automatically generate a 55 word excerpt with a Read More link instead. By default, your full post will be displayed.
- Header Category Menu: Add a Browse button to the fixed navigation bar, which allows users to explore the latest categorized content via instant post loading.
- Header Category Button Text: Change the text of the Browse button mentioned above.
- Site Title & Tagline: By default your site will display a site title and tagline, which can be customized here. You also have the option to hide the site title and tagline if you’d rather use your own logo image.
- Site Logo: Upload your own logo to use in place of your site’s title and tagline or alongside it.
If you choose to add a custom header to your site, we’ve included a few options to help you customize the header image.
- Header Image Opacity: Change the opacity of the header images in your header.
- Header Height: Change the height of your header.
Creating the Header Category Menu
With the Header Category Menu enabled (My Sites → Customize → Theme Options → Header Category Menu), you can turn a standard category menu into an awesome post-loading drop-down menu. By default, Booklet uses your most popular categories to create a menu for users to browse, but you can also override this with your own category menu.
- First, let’s enable the Header Category Menu. Go to My Sites → Customize → Theme Options → Header Category Menu. Make sure the menu is Enabled.
- Next, you need to create a menu to populate the drop-down. Go to Appearance → Menu and create a new menu and assign it as the Header Category Menu.
- Now you can start adding menu items. Using the Category menu items box, add categories that you’d like to populate your menu. Posts from these categories will be shown when the user clicks the link.
- Once your menu is complete, save the menu and check out the drop-down menu on the front end of your website.
Creating the Footer Category Menu
Booklet also includes an optional Footer Category Menu, allowing you to create another area for users to explore your content. To enable the Footer Category Menu, follow the steps above and create a new category menu in Appearance → Menus, and assign it as the Footer Category Menu. Once a menu is assigned to this area, the Footer Category Menu section will be shown on your site.
Social Icon Menu
Create a social icon menu to the fixed navigation bar to let visitors know where to find you.
- To add a social icon menu, go to Appearance → Menus.
- On the left side of the Menu page, click the Links menu item to add to your social links.
- Add the URL for each of your social profiles and a label for the link. Booklet will detect which site you are linking to and display a matching graphic. Icons are supported for the following sites: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Flickr, Codepen, Behance, Dropbox, Pinterest, Reddit, Soundcloud, Spotify, WordPress, LinkedIn, Stack Overflow, RSS and Email.
- Now that you have the menu created, you need to assign it to the Social Icon Menu in the Theme Locations section.
- Save the menu when finished.
The widget section of Booklet is found by clicking the Menu button in the top left corner of the fixed navigation bar. Add widgets to the sidebar by going to Appearance → Widgets and adding widgets to the Sidebar panel. If you remove all of the widgets from the sidebar, the Menu button will not show on the fixed navigation bar.
Additional Post Styles
Booklet comes with a few custom element styles, which are used to add extra styling to your posts. These styles require the use of the HTML Editor.
Pull quotes are similar to block quotes, but are reserved for less text. See Booklet’s Style Guide to see the suggested usage. To use pull quotes, you can add a class of pull-left or pull-right to your content. See an example below.
<span class="pull-right">This text will be pulled right.</span>
Text highlight adds a yellow background to your text, useful for in-paragraph emphasis. To use the highlight style, you can add a class of highlight to your content. See an example below.
<span class="highlight">This text will be highlighted.</span>