Natured Splash Page

Home › Documentation › Natured Tutorials › Natured Splash Page

When setting up your website to use the WordPress “Static Front Page” function, Natured can give you the option to use a splash page.

screenshot displaying the full splash page from the live demo

NOTE: This works only when setting a static front page and does not work if your blog is set as the front page.

We’ve modified the WordPress Header Image feature to create the splash page with the capability of randomly rotating more than one photo. We also renamed the Header dashboard link to Splash Page.

screenshot showing how to get to the splash page setting in Natured

Splash Page Template

This template has a special Splash Menu location so that visitors can continue into your site. You can have more than one menu link, but we recommend having one setup that takes the visitor to an inside home page.

Setup Your Front Page and Blog

There are a few basic steps to perform where the first is to create a page and then choose the FrontPage Splash template from the Page Attributes (classic editor) or the Templates if using the Block Editor.

  1. Navigate to Appearance > Pages > Add New.
  2. Create a page and call it whatever you decide, such as “Welcome” 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 default splash page photo

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

  1. Go to Appearance > Splash Page (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 Enter Button

This tutorial will show you how to add a link or button to your splash page. You will 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. For this tutorial, 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. This will be a page that you want visitors to go to when they click on your enter link (button). 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 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

Splash Page Site Title and Overlay

When you set up your splash page, there will be an overlay transparent column. Your site title and the button will reside within this area. You can move this column to the other side.

screenshot for the Natured splash page overlay setting that moves it to the left or right
  1. Go to Appearance > Customize > Layout Options
  2. From the Splash Mask Position setting, choose left or right
  3. Click the Publish button