Top

Pages

Creating a page

To create a page, navigate to Pages ➝ Add New within your WordPress admin dashboard. 

Here you can do WordPress' default actions such as enter the page title, add content and featured image, then click the Publish button to publish your page. As with Posts, you can insert shortcodes into your content by clicking the Insert Shortcode button above the editor (highlighted above), which opens the shortcode generator (see the Shortcodes section of this guide for more information). 


In the Page Options section (highlighted above), there are various options that allow you to further customise your page, such as configuring the banner and removing padding for full width pages.

Header

In Page Options, you'll see a list of header configuration options, from making the navigation bar transparent to configuring the banner. There are various types of banners that you can use within the header of each page. Below are setup instructions for specific types of banners.

Slider Revolution

The popular Slider Revolution plugin is integrated seamlessly into Float. To use Slider Revolution within any page, select it from the Banner Type dropdown within Page Options. Then, in the Slider Revolution slider dropdown, select a slider created within the Slider Revolution settings panel (see documentation).

Featured Image banner

To add a featured image banner to the header, first scroll to the Banner type dropdown and select Simple Banner or Default Banner. Then upload a featured image by clicking Set featured image in the Featured Image section, as highlighted below.

Slider related banners

Several page banners are powered by the Slider post type, which can be accessed via the Slider menu tab on the left of the WordPress admin panel. These banners are:

  • Standard Banner
  • Video Banner
  • Advanced Banner
  • Slider 

To configure these banner types, navigate to Slider ➝ Add New within your WordPress admin dashboard. The title field inputs the main title of the slide, and the content field populates the side panel of an Advanced Banner slide. Upload the slide image via the Featured Image section, and configure your slide further in Slide Options

For a Slider or Advanced Banner, create multiple slides and assign them to the same category in the Slider Categories section on the right. Then select this category in Page Options when configuring your banner.

Simple Default Banner

To add a Simple Default Banner to the header, first scroll to the Banner type dropdown in Page Options of the Add New page, select Simple Default Banner and publish or update your page. Then, navigate to the Header Image tab in the customizer via Appearance -> Customizer, and upload an image from your media gallery by clicking the Add new image button. You can crop the uploaded image if you need to.

Other pages (as well as the blog, portfolio, and shop archive pages) can use the same banner by setting their Banner type to Simple Default Banner.

Banner image size 

An image size of 1920 x 650 pixels is sufficient for all image-based banner types to achieve a retina banner, and is the size used for all banner images in the Float demo.

Video banner

As mentioned earlier with Video posts, Float supports two types of video banner formats: YouTube and Vimeo. To create a video banner, first locate the video you want to use on the YouTube or Vimeo website. Click on that video and copy the URL from the browser URL bar.

Go back to the Add New slide page, scroll to the Video URL field in the Slide Options section and paste the copied URL into the input. Click the Preview button to preview the video. 

Configuring slides within pages

To select the slides you've created within the page header, navigate to Page Options in Pages ➝ Add New, scroll to Banner type and select the type of banner you wish to create. For Slider and Advanced Banners, check the category that you assigned the slides to in the Slider categories option, highlighted below.

For Standard and Video Banners, scroll down to the Standard/Video Banner slide dropdown and select the title of the slide that you created in the Slider post type.

In Page Options, you can add parallax effects to any image based banner by checking the Enable parallax scrolling checkbox. You can also make the Slider banner play automaically by checking the Autoplay slider checkbox.

Page templates

Float comes with a categories archive page template, which can be used to display archived posts and product categories for blog, portfolio or shop.

To create a category archive page, navigate to Pages ➝ Add New, and select Categories Archive in the Template dropdown within the Page Attributes section on the right.

Then scroll down to the Category Archive post type option in Page Options and select the type of post type that you want the archive page to represent.

Page setup

Now that you know how to build pages, you can create a home and a blog page via Pages ➝ Add New. You'll then want to assign them as the front and posts pages to form the foundation of your website. 


To do so, navigate to Appearance ➝ Customize and click the Static Front Page tab. Within this tab, click the A static page radio button in Front page displays option, then select your created home and blog pages in the Front page and Posts page dropdown lists respectfully.

Click Save & Publish.


Visual Composer

Visual composer has been added to Float as an additional component to the theme, and is not a required feature. All the demo files have been built using Float's default shortcode generator and not VC.


VC was added for those who prefer to use it rather than the shortcode generator that ships with the theme.

Float elements not showing in Frontend Editor

VC uses its own Row and Column elements/shortcodes for their grid system which is different to Float's default Section and Column system. 


When trying to view the demo pages built with the default Section and Column system, the elements contained within the Column shortcodes will not be shown in VCs Frontend Editor. This is because VC does not recognise this system in the Frontend view.


For them to appear in VC's Frontend Editor you will have to remove all instances of Section and Column elements/shortcodes from the page, and substitute (if necessary) with VC's Row and Column elements.


Alternatively, you can view and edit the page in the Backend Editor.

Hope this helps.

Powered by Pixelsmile