Page Options

Access the Page Options via WordPress Admin > Pages > Add New or Edit an Existing Page > Scroll to the Page Options.

Note: The default settings for the options below are inherited from Appearance > Theme Options.

Only change these settings if you wish to override the global setting for the Page you’re editing.

Page Layout

The Page Layout Tab consists of the following Page Options:

  • Page Layout:
    Change the Page Layout for this page only. This overrides the default Page Layout set in the Theme Options
  • Sticky Sidebar:
    If you have selected a Page Layout which includes one Sidebar, you can use this option to pin the Sidebar to the edge of the Page.
  • Column One Sidebar:
    If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
  • Column Two Sidebar:
    If you have set a Page Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )

Site Layout

  • Site Layout:
    Override the global Site Layout option, choose between Default, Wide or Boxed

Header

  • Display Header:
    Choose to disable the Header or display the Header on the Left or Top of the site.
  • Header Style:
    Choose to display the Header in different Styles.

    1. Inline: The default is Inline, the logo and menu are displayed horizontally inline. Control the alignment of both Logo and Menu Vertically and Horizontally.
    2. Stacked: This option displays the Logo stacked on top of the Menu.  Control the alignment of both Logo and Menu.
    3. Logo in Middle of Menu: This option allows for the Logo to appear in the center of the menu.
  • Header Width:
    Set the Header width to the Site Width, defined by the the Maximum Site Width value ( Theme Options > Layout ) or the width of the Browser using the Browser Width option.
  • Sticky Header:
    The Sticky Header option will allow the Header to follow the user as they scroll down the page.
  • Floating Header:
    Set the Header to Float over the page content. Float + Transparent will remove the Header Background Color / Image.

Logo

  • Display Logo:
    Use this option to display or disable the Logo on this page.

Menu

  • Display Menu:
    Use this option to display or disable the Menu on this page.
  • Menu:
    Use this option to choose an alternative menu for this page.

Title Area

  • Display Title:
    Use this option to display or disable the Page Title
  • Alternative Page Title:
    If you wish to display an Alternative Title to the actual Page Title, use this option.
  • Subtitle:
    Use this option to enter a Sub title for the page. This will appear directly below the Page Title text
  • Title & Breadcrumb Alignment:
    Use this option to set the alignment for the Title & Breadcrumbs.
  • Breadcrumb Display:
    Override the global Breadcrumb option set in the Theme Options.

Footer

  • Footer Display:
    Choose to Display or Disable the Footer on this page.

Social Icons

  • Display Social Icons:
    Choose to Display or Disable the Social Icons on this page.
  • Share Icon:
    Enable or Disable the Social Icons Share icon for this page.

Page Skin

  • Use this option to display an alternative Skin for this page.
Blog Template

Use the following options to turn the page into a Blog Page, these settings override the Settings within the Theme Options ( Appearance > Theme Options > Blog )

To enable a Blog on this page, Select “Blog Template” from the Template drop down menu under Page Attributes.

  • Display Format:
    Choose to display the Posts Stacked ( Normal ), Grid or Masonry Grid
  • Boxed Post Style:
    Choose to display the Posts in Boxed or normal style
  • Grid Columns:
    If you have set the Layout Format to Grid or Masonry Grid, use this option to set how many Grid Columns to display
  • Display Search Bar:
    Choose to display a Search box on this page
  • Pagination Type:
    Choose the pagination type
  • Posts Per Load:
    If you have set the Pagination to an Ajax option, you can set how many Posts to load in at a time

Blog Page Images

  • Image Alignment:
    Choose the post image alignment
  • Image Effect:
    Set an image effect the post images
  • Image Size:
    Set the image size for post images, use thumbnail, medium, large, full or a custom size e.g. 500×500
  • Select Categories:
    Choose what post categories to display on this page
  • Exclude Post Format(s):
    Use this option to disable certain Post Formats on this page

Post Options

Access the Post Options via WordPress Admin > Posts > Add New or Edit an Existing Post > Scroll to the Post Options.

Note: The default settings for the options below are inherited from Appearance > Theme Options.

Only change these settings if you wish to override the global setting for the Post you’re editing.

Post Layout

The Post Layout Tab consists of the following Post Options:

  • Post Layout:
    Change the Post Layout for this Post only. This overrides the default Post Layout set in the Theme Options
  • Sticky Sidebar:
    If you have selected a Post Layout which includes one Sidebar, you can use this option to pin the Sidebar to the edge of the Post.
  • Column One Sidebar:
    If you have set a Post Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 1 ( Left Column )
  • Column Two Sidebar:
    If you have set a Post Layout to a layout which consists of a Sidebar, use this option to choose which Sidebar Widget Area to use for Column 2 ( Right Column )
  • Display Related Posts:
    Choose to display the Related Posts at the bottom of this post.
  • Display Featured Image:
    Choose where to display the Featured Image for this post.

Site Layout

  • Site Layout:
    Override the global Site Layout option, choose between Default, Wide or Boxed

Header

  • Display Header:
    Choose to disable the Header or display the Header on the Left or Top of the site.
  • Header Style:
    Choose to display the Header in different Styles.

    1. Inline: The default is Inline, the logo and menu are displayed horizontally inline. Control the alignment of both Logo and Menu Vertically and Horizontally.
    2. Stacked: This option displays the Logo stacked on top of the Menu.  Control the alignment of both Logo and Menu.
    3. Logo in Middle of Menu: This option allows for the Logo to appear in the center of the menu.
  • Header Width:
    Set the Header width to the Site Width, defined by the the Maximum Site Width value ( Theme Options > Layout ) or the width of the Browser using the Browser Width option.
  • Sticky Header:
    The Sticky Header option will allow the Header to follow the user as they scroll down the Post.
  • Floating Header:
    Set the Header to Float over the Post content. Float + Transparent will remove the Header Background Color / Image.

Logo

  • Display Logo:
    Use this option to display or disable the Logo on this Post.

Menu

  • Display Menu:
    Use this option to display or disable the Menu on this Post.
  • Menu:
    Use this option to choose an alternative menu for this Post.

Title Area

  • Display Title:
    Use this option to display or disable the Post Title
  • Alternative Post Title:
    If you wish to display an Alternative Title to the actual Post Title, use this option.
  • Subtitle:
    Use this option to enter a Sub title for the Post. This will appear directly below the Post Title text
  • Title & Breadcrumb Alignment:
    Use this option to set the alignment for the Title & Breadcrumbs.
  • Breadcrumb Display:
    Override the global Breadcrumb option set in the Theme Options.

Footer

  • Footer Display:
    Choose to Display or Disable the Footer on this Post.

Social Icons

  • Display Social Icons:
    Choose to Display or Disable the Social Icons on this Post.
  • Share Icon:
    Enable or Disable the Social Icons Share icon for this Post.

Multimedia

Use these options to add a Video or Audio to a post. The Media Tab consists of the following Post Options:

  • Media URL:
    Enter the URL of the Video or Audio file ( YouTube & Vimeo is supported too ) – use oEmbed and you’ll need to set the Post Format to Video or Audio
  • Embed Type:
    Choose to set the Video or Audio as an oEmbed ( Playable from the Page ) or within a Lightbox ( Uses the Featured Image as a placeholder, when clicked, the video will play within the Lightbox ).

Post Skin

  • Use this option to display an alternative Skin for this Post.
Metadata

Override the Metadata Theme Options set within Appearance > Customize > Blog.

  • Display Date:
    Display or Disable the Date on this post
  • Display Author: 
    Display or Disable the Author on this post
  • Display Categories:
    Display or Disable the Categories on this post
  • Display Tags:
    Display or Disable the Tags on this post
  • Display Comments:
    Display or Disable the Comments on this post

Extras

The Additional Tab consists of the following Post Options:

  • Post Link:
    Disable the post from linking anywhere.
  • Alternative Link:
    If you require to link the post to an alternative URL, enter that URL here.
  • CSS Classes:
    Enter CSS classes to help with Custom styling for this post.

How to Create a One Page

Learn how to create One Page sites easily, including 3d pages.

Creating a "One Page" Video Tutorial

Learn how to create a One Page site using this video tutorial.

Creating a "One Page" Site

Creating_a_One_Page_Site.png

Creating a One-Page is very simple, using the Visual Composer, each Row you add to the page will act as a Slide / Page ( depending on how you want to describe it ). In this example, we’re going to create 3 Rows ( Slides ).

If you want ready made One-Page content, it’s recommended to import one of the demos that use a One Page setup.

To create one from scratch – ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

STEP 1.

STEP_1-5.png

Create Row ( Slide ) 1
Go ahead and create the first Row – if you’re not sure on how to add Rows, check out the Using Rows section.

  1. Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  2. Anchor Link Name – this option is important for the Menu later on in the section, enter intro for the first slide ( this needs to be a unique name to describe the Slide )
  3. Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  4. Click Save changes and Close
  5. Add some content within the Row e.g. Text Block element e.g. Slide 1 ( You can add more content later once the setup is complete )

STEP 2.

Create Row ( Slide ) 2
Go ahead and create the second Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

  • Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – enter services for the second slide
  • Design Options – click the Design options tab and add a Background Image or Color ( example #E0E0E0 )
  • Add some content to the Row e.g. Text Block element e.g. Slide 2

STEP 3.

STEP_3-5.png

Create Row ( Slide ) 3
Go ahead and create the third Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

  • Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – enter contactus for the last slide
  • Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  • Add some content to the Row e.g. Text Block element e.g. Slide 3

As long as we’ve kept the Row Height as default, it should look similar to the diagram above.

Once we’re happy with the content, click Update and then click the Backend Editor button

STEP 4.

STEP_4-3.png

Choose what Type of Singe Page
Now we’re back in the Backend Editor, scroll down to the bottom of the Page and goto the Single Page tab.

  1. Animate Type – Choose the Animate Type – let’s use 3d Vertical for this example
  2. Bullet Navigation – enabling this option will show Bullet point icons to navigate through the Slides ( Does not work with Normal )
  3. Directional Navigation – If you’re having trouble with the visibility of the Directional Navigation, use the Icon + Background ( Only in rare circumstances is it recommended to disable them ).

STEP 5.

STEP_5-2.png

Configure the Header
To configure the Header, there are a number of options we can use to setup the page. For this example we’ll keep it simple and not make many changes, but I’ve provided some information about each option that’s relevant.

  1. Click the Layout tab
  2. If we’re not going to use a Menu or Logo, we can choose to disable the Header using this option
  3. If you’re using any of the Horizontal Animate Types, I’d recommend setting the Sticky Header option to Off
  4. Set the Horizontal Layout of the Logo & Menu for this page ( For a Horizontal layout like the Restaurant demo – use Menu Center + Logo Center )
  5. Set the Vertical Layout for the Logo & Menu for this page ( For a Header layout like the Restaurant demo – use Middle + 100% )
  6. If we want to change the Logo and Margin position for this Page only, we can use these fields to set the Margin values of the Logo and Menu
  7. Set the Floating Header option to Float + Transparent ( For a Header layout like the Restaurant demo – use Float + Transparent ) Please Note: Only set this option to Float or Float + Transparent if you want First Row ( Slide ) to have a Header Floating Over it.

STEP 6.

STEP_6_1.png

Create a Menu
Although a Menu is not essential, we’ll create one for this example.

To create a Menu, follow this guide:

  • Save the current page
  • Goto WordPress Admin > Appearance > Customize > Menus
  • Click Add a Menu button
  • Give the Menu a name e.g. One-Page
  • Click Create Menu
  • Once it’s created, assign the Menu to a location i.e. Main Navigation
  • Click Add Items
  • Click Custom Links and do the following for each Slide you’ve created:

            1. Enter the URL using the # character and the Anchor Link Name we assigned earlier. e.g. #contactus
            2. Enter the Link Text – this is the name that appears on the Menu e.g. Contact us
            3. Click Add to Menu
            

  • Click Save & Publish

STEP 6.

STEP_6-2.png

Assign the Menu
Once the Menu has been created, go back to the Single Page you’ve created.

  • Scroll down to the Page Option tabs
  • Locate and click the Layout tab again ( See STEP 5. )
  • Scroll down to the Menu option and select the menu you’ve just created e.g. One-Page

STEP 7.

STEP_7-3.png

Disable the Title & Breadcrumbs
It’s rare the Title & Breadcrumbs will be needed and in this example we’re going to disable them.

  1. Click the General tab
  2. Set the Display Title to Disable
  3. Set the Breadcrumbs to Disable

That’s it, we can now Save the page and checkout the result.

Finished Example

Finished_Example-2.png

Create a Blog Page

Learn how to create a Blog page using the Blog Template.

Using Blog Templates

By using the Blog Template, you can set any page and any number of pages as a Blog page. Using the Page options, you can make each Blog Page unique, by setting options like Format, Grid Columns, Lazy Load and more. You can also specify the Categories you wish to display.

STEP 1.

STEP_1-4.png

Apply the Blog Template

  1. Create a new page via WordPress Admin > Pages > Add New and Give the Page a title e.g. My Blog
  2. Goto Page Attributes and select Blog from the Template select menu – without this option set, the page will not function like a Blog

STEP 2.

STEP_2-4.png

Configure the Blog Format
See the Page Options section for a definition of each of the Blog Template options ( Scroll to Blog Template ). For this example we’re going to set the following options, which are the same options I’ve used for the You Theme online Documentation.

  1. Click the Blog Template tab to reveal the Blog Page options
  2. We’ll set the Layout Format to Masonry Grid – this format works best with content that has variable sizes
  3. Enable the Boxed Post Style – this uses the Skin > Shaded colors to style the posts
  4. Set the Grid Columns to Three
  5. The You Online Documentation makes use of the Search Filter + Highlight function
  6. Choose a Category you wish to display on this page

You page is now a Blog page.

Warning: Do not assign this or any other Blog Template page as a Posts page in WordPress Admin > Settings > Reading – the Blog Page will cease to function.