How to use the Landing Page feature in our themes

The Landing Page is not entirely brand new having made its appearance with Fluida v1.0 and being included with every new theme since (a trimmed down version even made it into Verbosa). However we’ve never got around to explaining it properly.

We feel that the time has come to be properly introduced to this landmark feature present in our themes and get a detailed view on all of the landing page’s options and controls as in-depth as possible.

This tutorial has been updated to include information for the additional options and sections available in the Plus themes

Activation

First of all note that the Landing Page is not enabled by default in our themes. To activate it you will need to go to WordPress’ Reading Settings or the Static Frontpage panel in the customizer and choose a static page as your homepage (you may need to create a new empty page first).

These controls can also be used to assign a separate page as your new Blog section of the site (to list the latest posts).

Note: Old Fluida releases (before 1.3.6.1) worked in reverse, by displaying the Landing Page when a static page was not assigned.

The landing page displays its constituent elements in a certain order. This order is configurable in the Plus themes:

Landing Page sections in the free themes

Landing page sections in the Plus themes in their default order

Each of these elements can be controlled and configured independently through the theme’s landing page options, available in the Landing Page panel in the customizer section of your WordPress dashboard, under Appearance » Customize » Landing Page.

General

The first eponymous named option controls the activation of the Landing Page feature as a whole – in case you decide not to use it.

 

Slider

These options control what to display in the slider block (this block has different designs between our themes but has mostly the same control options):

  • use the built-in support for our Serious Slider plugin to directly select the slider to be displayed
  • manually enter the shortcode for the slider plugin of your choosing
  • define a single static slider image (default)
  • use the site-wide header image (if set)
  • disable the block

Depending on the selected slider content option, other fields become available:

  • for “Serious Slider“, a direct slider selector
  • for slider shortcode,  a custom shortcode input field
  • for the static image: the image selector (and preview), static slider caption title and text and fields for call to action buttons (labels and links); leaving label field empty will hide that button; the number of available buttons may vary between themes;
  • for “header image” there are no additional options

Note: By default the themes come with a sample static slider image which is displayed on the frontend but due to technical limitations is not visible here in the control option.
To change this sample image with your own, simply assign a new image. To remove the sample image, assign any image first and then you’ll be able to remove it.

Icon Blocks #

The themes can include multiple icon blocks sections on the landing page. They function similarly but by adjusting their options they can each be set to display different content in a particular way.

The Section Title and Description define a general title and a short intro for the Icon Blocks element. Leaving these empty will hide them.

The Block Content option controls the length of the icon block text; it can be set to:

  • display an automatically generated excerpt for the selected source
  • display the complete source text
  • display no content (leaving only the icon visible)
  • disable the icon blocks section as a whole

The icon blocks can also display a ‘read more’ button (with configurable label) linking to the source page and also apply the same link on the icon itself.

Icon blocks are intended for specific content elements; for this each icon block’s source content and icon can be set individually. The number of icon blocks in each section and list of supported icons can vary between themes.

The Plus themes include extra functionality for the icon blocks:

  • icon block sections and have the additional option of setting how many icon blocks per row will be displayed
  • additional Icon Blocks sections
  • the themes can also use content elements created with the companion Featured Content plugin as source content – see the Featured Content information below

Note: The excerpt functionality also supports manually defined excerpts (this is not available by default in WordPress for pages but can be enabled through plugins or custom code. The Plus themes enable excerpts on pages).

Featured Boxes #

The themes include multiple featured boxes sections on the landing page. They function similarly but by adjusting their options they can each be set to display different content in a particular way.

The Section Title and Description fields define a general title and a short intro for the Featured Boxes section. Leaving these empty will hide them.

Icon blocks are intended for a list of content elements, such as posts; for this purpose the source content is configurable for the entire section as a whole.

The Boxes Content option selects the source of all the boxes in that section – these can be posts from all categories or just a specific category. This option can also be used to disable the entire section.

The themes include further options to control the total number of boxes displayed, boxes per row number, individual boxes (image) height.

The rest of the options control the visual appearance of the boxes:

  • full width or boxed layout
  • joined or apart stacking
  • appearance animation – the Plus themes include additional animation effects
  • ‘read more’ button label (displayed on each box)
  • box content text length

Note: Themes include several Featured Boxes sections – these all have the same options, however will come with different default values to create different designs.

The Plus themes include extra functionality for the featured boxes:

  • additional box animations
  • additional featured boxes sections
  • the themes can also use content elements created with the companion Featured Content plugin as source content – see the Featured Content information below

Text Areas

The themes include multiple text area sections on the landing page. These can be used to insert blocks of text (or entire content sections) between the other landing page sections.

Text areas are intended for specific content elements; each option in this section controls the source content for an individual text area.

The page’s title will be used as the text area’s title, page content will be displayed as text area inner content (depending on theme design, you may need to ensure it fits in the available space) while the feature image can be used in a theme specific way (either as a text area background image or with a specific placement) – the designs vary between themes.

Some of our themes also style images placed inside content in a particular way.

The Plus themes include extra functionality for the text areas:

  • additional text area sections
  • the themes can also use content elements created with the companion Featured Content plugin as source content – see the Featured Content information below

Portfolio * Plus only

The themes have built-in support for Jetpack’s Portfolio custom post type, which they display featuring a custom design.

The Section Title and Description fields define a general title and a short intro for the portfolio section. Leaving these empty will hide them.

The rest of the options control which and how portfolio elements are displayed in the section:

  • number of portfolio elements
  • number of columns per row they are dislayed in
  • items ordering criteria
  • items sort method
  • a ‘read more’ button label linking to the main portfolio page

Featured Content

The featured content section retains the core WordPress homepage functionality and can be set to:

  • display the static page assigned as the homepage (default)
  • display the homepage blog posts list (*default in Fluida until v1.3.6.1)
  • disable the featured content section

When posts are used, additional options to control the ‘more posts’ button label, posts layout (Plus only), posts number (Plus only) and category (Plus only) become available.

Note: When this option is set to latest posts and there are no posts on the site, the section will instead display the ‘not found’ message and search form. 

Display Order *Plus only

The Plus theme include functionality to re-arrange all of the landing page sections via a simple drag & drop interface. This interface also indicates the active state of the controlled section (via the eye icon and block color) and link to the controlled section (via the triangle arrow on the right).

The Refresh Visibility button can be used to refresh the visibility states of the sections after performing changes to their behaviour, while the Reset Order button can be used to reset the sections order to the theme’s default.

Companion Featured Content Plugin *Plus only

The Plus themes are capable of retrieving icon blocks, featured boxes and text areas content from custom items provided by our companion Featured Content plugin. This plugin is recommended by the Plus themes for installation.

To create the custom items, navigate to the Featured Content section in the dashboard, where you can add, edit and manage them the same way as you would posts and pages.

Once created, these extra sources will be selectable in the Plus themes in the source dropdowns for any of the 3 section types: icon blocks, featured boxes and text areas.

We will cover using the Featured Content plugin more in-depth in a future dedicated tutorial.

Note: featured content items are not accessible anywhere else on the frontend beside the assigned landing page sections (they will not show up in archives, search results nor feeds).

SEO

While including SEO markup and optimizations, our themes do not include SEO control functionality (due to such functionality not being allowed in repository themes). To fine tune the SEO attributes for the homepage you can use your favourite SEO plugin and define these attributes on the static page that’s currently defined as the homepage:
Note: Older Fluida releases (before 1.3.6.1) needed to have the SEO attributes defined for the general homepage instead (usually configurable in the SEO plugin’s settings interface).

This tutorial applies to our customize-based themes: Fluida, Septera, Anima and Kahuna and their Plus editions. Verbosa implements a lighter set of features with only some of the options described here (but they function the same).

More Tutorials This article is part of our WordPress general and theme specific tutorials series. For more useful information check out our tutorials section.

10 Comments

  1. If I disable the Landing Page and use the static Home Page can I reconfigure the layout in Kahuna? I am not planning to write any blogs for a while and just want the front page to show links to pages with maybe one text area.

  2. HI Zed, thanks for your explanation. I’m having trouble with the Kahuna Featured boxes. >My boxes are just grey boxes with text and a camera in the background. I have images in my posts and would like to use them or to have the option of picking an image. I can’t see to find where I can choose images for the boxes. Thank you

  3. Hi Zed,

    I’ve just installed the very attractive Kahuna theme and am beginning customizations. I’ve been trying to generate the Featured Boxes on the landing page. From what I can see, they pull in “Post” content. Is there any way to pull in “Pages” instead? I can do this using the Icon box feature, but I want to be able to use my Featured Images.

    Thanks,

    June.

    1. Featured boxes are intended to be used in sets (they can be displayed in any number) and use posts as their content, while icon blocks are limited in number, can be individually administered and use pages for their source.

  4. Dear Zed, thank you for this explanation of Landing Pages. It feels like something essential is missing. Can you begin your essay by stating the definition of a Landing Page?

    “A Landing Page is . . . .”

    And then: “A Landing Page is different from other pages in this way . . . .”

    If you want, put those two sentences right up top. This definition will give a solid basis for the rest of your careful explanation.

    As it is, your explanation feels like you have explained around the perimeter of a topic, without really saying what the topic is. =)

    All best,

    Eric

    1. From a technical point, I usually find the various attributes and properties of something more important than the particular thing as a whole. This is also true to how I look at our themes’ “landing page” feature – so I have tried my best to describe how its various elements and constituent parts work and can be configured.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.