Storytime Splash Page

Storytime Splash Page

If you decide to use the WordPress “Static Front Page” feature, this theme gives you a few choices when it comes to styling your front page. Please note this works only when setting a static front page and does not work if your blog is set as the front page.

Splash Page Template

This is a full browser window splash page that uses the WordPress Header Image functionality. You can have one photo displayed or you can add more photos and select the “Randomize” header option setting. This means that each time the page is refreshed, a different photo appears. This template also has a special Splash Menu location so that visitors can continue into your site.

screenshot of the splash page demo for Storytime
This can be one image or you can randomize multiple images

Setup Your Front Page and Blog

If you decide to use one of these options, there are a few steps, but the first is to create a page and then choose the appropriate template. In this case, you will use the FrontPage Splash template.

If you are using the Classic editor for WordPress, this will show up in the right side column:

screenshot showing how to select a page template - classic editor view
storytime readings settings for static front page
  1. Go to Appearance > Pages > Add New.
  2. Create a page and call it whatever you decide, such as “Welcome” or “Home” and then in the page attributes, choose the Front Page Splash template.
  3. Create a second page for your blog, so we can call this one “Blog“. You just need the title for the page, no content and no template needs to be set.
  4. Go to Settings > Reading
  5. Set the front page setting to the page you created for it.
  6. Set the blog posts setting to the page you made for the blog.
  7. Click the Save Changes button.

Splash Page Photo

This theme comes with a default splash page image:

screenshot of the Storytime default splash photo

You can add more images and take advantage of the WordPress randomize feature so that each time the page is visited or refreshed, it should rotate through all the images you have added.

  1. Go to Appearance > Splash Page Image (Header)
  2. There is a default image installed, but you can hide it and use your own. When uploading, I recommend using the best quality photo and make sure it’s large enough. This function will crop your image to 1920×1080 pixels, so make sure your photo is at least that size. This is a showcase image, so make it a good one as this is used as first impressions.
  3. Click the Publish button

Splash Page Button

This tutorial will show you how to add a link or button to your splash page. You will actually be making a custom menu with a couple of options to link a button. You can refer to the Create Menus tutorial to make one, but basically, you will make a new menu and call it, for example, Splash Menu.

  1. Navigate to Appearance > Menus.
  2. Create a new menu
  3. Name your menu Splash Menu (you can name it what you want).
  4. Drag a page from the Add Menu Items panel to where you want this menu to link to. You can also use the Custom Links setting if you prefer to manually add a URL to a page on your site.
  5. Click on the Screen Options tab at the top right of the window
  6. Check the box next to CSS Classes. This will add the CSS Classes field to your menu items.
  7. In the CSS Classes field, type in splash-button (Make sure this is lowercase).
  8. Select the Splash Menu location under the Menu Settings section.
  9. Click the Save Menu button