Written by on

More Flex in Flexx, configurable (Landing) Pages

Inspired by the number of support requests for a Landing Page in Flexx, aka Squeeze or Sales Page, I decided to revisit the tutorial I wrote, and create a fully configurable landing page for Flexx by harnessing the power of Child themes. By using a Child theme, no modification to the core Flexx code is required, so that updates to the parent theme will not result in loss of functionality.

Fully configurable? well yes, by using a child theme, you can create not only one, but endless (landing) pages, each with its own configuration.

So what can be configured?

The page will take into account your default “Flexx Layout” settings. Sections from that layout can be “stripped” all the way down to the bare page content only. The following image shows what can be included/excluded on your page, on a per-page basis.

Flexx landing page configuration

So how does this work?

  • First of all, you need to have Flexx theme installed. The theme version needs to be at least 4.0.0, so that Flexx is able to handle child themes.
  • Then, download, install and activate the Flexx_landingpage_Childtheme as you would download and install any other theme. Make sure the child theme is uploaded to the same directory as the Parent theme (your version of Flexx). In order for the child theme to recognize its parent theme, you need to adjust the stylesheet style.css of the child theme for your Flexx theme specifics as follows:
    /*
    Theme Name: Flexx Configurable Landing Page - Child Theme
    Theme URI: http://ithemes.com/purchase/flexx-theme-wordpress-blog-themes/
    Description: Child theme for all Flexx versions (<strong>requires Flexx version 4 and up</strong>). Adds a configurable landing page template, adds support for featured images in the blog posts, to be displayed on the blog index page, archive pages, and on single post pages. <strong>Instructions and more information on using a Child Theme with Flexx <a href="http://ithemes.com/codex/page/Flexx_Child_Themes">here</a></strong>.
    Author: iThemes
    Author URI:	http://www.ithemes.com
    Version: 0.9.0
    Template: FlexxYYYYYYYY
    Requires: Flexx Parent theme version 4.0.0 and up
    Instructions: Change the "Template" and the @import Flexx value to your Flexx version, e.g. FlexxProfessional, FlexxBlue etc.
    */
    
    @import url("../FlexxYYYYYYYY/style.css");
    /*
    

    important: Make sure that the “Template:” (line 08) and the url for the stylesheet @import (line 13) refers to the exact name of the directory where your Flexx theme is installed, e.g. FlexxBlue, FlexxCanvas-Arial, FlexxProfessional etc.

  • Write a new page, and make sure to select the Configurable Landing Page page template. The configuration options will work for this page template only. For a new page, the configuration fields will not be visible until the page is either “published”, or “saved as draft”. Only then will the page “exist” for WordPress, and will the page template become active.
  • If you have saved the page, reopen the page, and tick the sections you wish to include on the page. The options will be visible below the main Editor window.

And that should be it.

More images

The settings in your WordPress dashboard > Theme selection.

Themes Dashboard Settings

The modifications to the Child theme’s stylesheet.

modifications to the Child themes stylesheet

Add a new page, select the page template, and “save as draft” to add content later, or “publish”.

Select the page template

The configuration settings.

Landing Page configuration

What is what?

Settings and Page layout

Anything Else?

The child theme is based on the existing default child theme, so it will also include the additional functionality to facilitate Featured Post images. For more information on Child themes in Flexx, visit the iThemes Codex, from where you can also download the Landing Pages Child Theme.

Comments, recommendations and more regarding this article are very welcome in the comments section of this blog. Please do not post support requests in the comments section of this article, these are not actively moderated. If you have any questions or issues, please post in the Flexx support forum.

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35