Top

Getting started

Installing WordPress

To use Float, you'll need a working version of WordPress installed. For information about installing WordPress, see the WordPress codex.

Installing Float

To Install Float, navigate to Appearance ➝ Themes ➝ Add New ➝ Upload Theme within your WordPress admin dashboard.

Upload the float.zip file located in the theme folder of your download.

Once Float has been successfully installed, click Activate.

Alternatively, if you’re an IT wizard, you can add the unzipped theme folder via FTP to the /wp-content/themes/ directory of your WordPress install.

Troubleshooting

Missing style.css

If you get this error while uploading your theme, it's probably that you're not uploading the correct file from the Float download folder.


Make sure you’re uploading the float.zip file within the “theme” folder of the download, and not the download folder itself (float-envato.zip).

Plugins

Float uses a variety of in-house and 3rd-party plugins to provide core and additional functionality. Once you've activated Float, you'll be directed to the Getting started page where you'll see a list of the required and recommended plugins.

We recommend that you install all the listed plugins so that you have Float's core functionality available to you. Once you click Begin installing plugins, you'll be directed to the Install Required Plugins page. Select Install from the Bulk Actions dropdown, check all listed plugins and click Apply to begin the automatic installation process.

You can also access this page via Appearance > Install Plugins.

Once installation is complete, click the Return to Required Plugins Installer link at the bottom of the page. In the Install Required Plugins page, check all the plugins that you've just installed. Select Activate from the Bulk Actions dropdown and click Apply to activate them.

We only support our in-house plugins (the pre-packaged Float plugins). For help with any 3rd party plugins used with Float, including those recommended, you'll need to contact the respective plugin author directly.

Add–ons

Float is compatible with a variety of in–house premium add–ons that further extend the functionality of Float. These add–ons include premium shortcodes, wishlists, a portfolio section and more. You can view a full list of Float's add–ons on the Pixelobject website.

From version 1.1, Float come bundled with Pixel Shortcodes, Pixel Wishlists and Pixel Portfolio.

Pixel Framwork

From Float version 1.6.5, Float Framework is now Pixel Framework. If you're using an earlier version of Float and have Float Framework activated, but want to upgrade to Float 1.6.5, first deactivate (not delete) Float Framework. Then, begin the process of installing and activating Pixel Framework as instructed above. If done correctly, all your data will be preserved in Pixel Framework. Once you've checked (and double checked) that all is working fine, you can delete Float Framework from your install. 


Any issues, please submit a ticket.

Automatic updates

Float comes pre-packaged with the Envato Market plugin, which enables you to get automatic updates for your theme without having to manually upload files.


Make sure you have installed and actived this plugin before continuing.

Once activated, click the Envato Market tab in your admin panel.

Within the Settings tab, click generate a personal token and follow the steps to get your Envato API Personal Token. Once you've received your token, paste it into the Token field (highlighted above) and click Save Changes.


You should now be connected to your ThemeForest account where you will see Float listed within the Themes tab. Your theme will automatically display notices within the admin panel whenever an update is available.

Updating your theme

When an update is available, navigate to the WordPress Updates page via Dashboard ➝ Updates, select Float in the list of updatable themes, and click the Update Themes button.


Alternatively, you can update your theme via the Envato Market plugin by navigating to Envato Market ➝ Themes and clicking the Update Available link on the Float thumbnail.

Add–on bundle licenses

Float comes bundled with 3 premium add–ons:

  • Pixel Shortcodes
  • Pixel Wishlists
  • Pixel Portfolio

To get automatic updates and support for these add–ons, you'll need to redeem and activate their license keys. Licenses can be redeemed via your Pixelobject support account, free of charge. You'll just need a valid Envato Market Purchase Code.

Redeeming add–on licenses

First create your support account and login. Navigate to Licenses ➝ Request a License and select Float from the product dropdown list, then paste your Envato Market Purchase Code into the input field. Click Request license.

You can only request a license once for each listed product. Make sure you complete the checkout process after you submit your request.

You'll be redirected to the Pixelobject shop checkout where you'll need to either create a new Pixelobject shop account (different from the support account you created above) or login to an existing shop account. 

Complete the checkout process by entering your details and clicking the Free Download button at the bottom of the checkout. You'll then be redirected to a confirmation page where your add–on license keys will be displayed. A copy of the receipt will also be sent to your email.

Manage your license keys

You can manage and upgrade your license keys from your Pixelobject shop account.

Activating your license key

Once you've redeemed your license keys, the final step is activating them. Learn more by reading: Activating your add–on license.

Dummy content

Why import dummy content?

Importing the provided dummy content is a great way to start building your website with Float. You'll get a clearer idea of how Float works with an admin panel populated with content that replicates the Float demo, rather than building from scratch. 

For your own website, you can modify or delete the content to fit your requirements.

Before importing the dummy content, make sure that you have installed and activated all required and recommended plugins.

The float-all-content.xml and float-media.xml files are large files as they contain all the data of the Float demo. Importing to servers that are not configured to accept large files may cause a server time-out. Here's an article with more information about this and possible solutions: https://tjkelly.com/blog/wordp...

One Click Demo Import (recommended)

Once you have installed and activated all required and recommended plugins (specifically, make sure the One Click Demo Import plugin is activated), navigate to Appearance > Import Demo Data.

Click the Import Demo Data button and wait for a few minutes for the demo to import.

It's important that you wait and do not click elsewhere on your browser while import is in progress as it will disrupt the import. This may take several minutes.

You'll get a notification on this screen once the import is complete. That's it!

WordPress Importer

To import the Float dummy content you must first install the WordPress importer. To do so, navigate to Tools ➝ Import within your WordPress admin dashboard, scroll to WordPress and click Install Now.

Once the importer has finished installing, click Run Importer

Within your download folder you will see a selection of dummy content xml files for each section of the Float demo located in the dummy-content folder. You can upload content for specific sections of the entire demo, whichever suits you. To upload the entire demo for example, select the float-all-content.xml file.

Next, you'll be prompted to assign authors and import attachments. In the Import Attachments section, check the Download and import attachments checkbox and click Submit.

The import will begin immediately after you click the Submit button. This could take a while depending on your internet speed. It's important that you leave the browser alone until the import is complete.

Once the import is complete, your browser will refresh to reveal a completion message.

Troubleshooting

Failed to import...

If you have installed and activated all required and recommended plugins and still get this noticed after importing the float-all-content.xml or float-downloads.xml file, it's likely that you have not activated a recommended plugin.

Import times-out.

This is usually a server issue. Please read: WordPress Import Failed? Here’s How to Fix It

Header

Logo setup

One of the first things you'll want to do is upload your company logos. To do this, navigate to Appearance ➝ Customize and click the Nav Bar tab.

Float uses 2 types of navigation bar logos: standard and white. When the navigation bar is transparent, the standard logo displays on white or light backgrounds, and the white logo displays on dark backgrounds. On non-transparent navigation bars, only the standard logo displays.


You can upload the white logo in the Logo white section and configure both logos in the options below.

To upload the main logo, navigate down to the Site Identity tab in the customiser and upload the logo image using WordPress' built-in custom logo feature.

Make sure both standard and white logos have the exact same dimensions. The only difference should be the color.

To achieve retina resolution, upload a logo twice it's normal size, then use the Logo height range slider to reduce back down to it's normal size. You can use the preview screen to view your height adjustments before saving.

You can also include a logo in the hidden side menu panel. This logo should be light enough to be visible on the dark panel background.  You can upload this logo and adjust its height in the Side menu logo and Side menu logo height sections respectively.

Navigation bar setup

There are several customisation options for the navigation bar which take affect across your website. You can choose to enable an animation that hides the navigation bar when not in use, providing more visible screen space. Or you can choose to show a site search icon on the bar. 


To enable both options, navigate to Appearance ➝ Customize, click the Nav Bar tab, and check the Enable nav bar animation and Enable site search checkboxes.

Click the Save & Publish button to save your changes.

Top bar

To enable the top bar, navigate to Appearance ➝ Customize, click the Nav Bar tab, and check the Show top bar checkbox.

There are additional options in this section for you to customise the top bar exactly how you want it.

Menu type

Float has a specific menu location for the top bar. To add a menu to the top bar select Menu within the Top bar type option. Navigate to Appearance ➝ Menus, create and populate a new menu, then assign it to the Top Bar display location in Menu Settings.

Menus

Menu setup

Now that you have uploaded your logos and configured your navigation bar, you're ready to setup your menus. You can do this by navigating to Appearance ➝ Menus within your WordPress admin dashboard.


To create a new menu click create a new menu, enter a name for your menu within the Menu Name field and click the Create Menu button.

You can add pages, posts, and categories to your menu by clicking the respective tabs on the left, checking the boxes you wish to add and clicking the Add to Menu button.

To add custom links, click on the custom links tab on the left, fill in the URL and Link Text fields and click the Add to Menu button.

The checked menus then appear in the Menu Structure section where they can be arranged in any order by drag and drop. 

Once you've ordered the menu items click Save Menu.

Menu locations

There are 3 menu locations in Float, in the top navigation bar (Top), in the footer (Bottom), in the side panel (Side) and in the side panel on small mobile devices (Mobile). You'll need to assign a location for each menu that you create.


To do so, select the menu from the dropdown list and click Select. When the selected menu has loaded, scroll down to Menu Settings section at the bottom of the page and check the locations you wish this menu to appear in.

Once you've checked the desired locations, click Save Menu.

Dropdown menus

To achieve a dropdown menu with multiple levels, as illustrated above, simply drag a menu item in the Menu Structure section to the right for it to become a submenu of the menu item above it. A menu item can be dragged to the right of a submenu item to become a submenu of a submenu, achieving a multi-level dropdown menu.

Mega menus

There are several steps to achieving a mega menu. First, click the Screen Options tab located at the top of the Menu page, and check the CSS Classes checkbox in the Show advanced menu properties section.

Next, in the Menu Structure section of the Menu page, click a parent menu item that you want to initiate the mega menu. You'll see this item expand and reveal various field, including the CSS Classes field. In this field type po-mega followed by either po-cols4 for a 4 column mega menu, po-cols3 for a 3 column mega menu or po-cols2 for a 2 column mega menu.

To start building the mega menu, first drag all the menu items you wish to be included in the mega menu to the right of the initiator menu item (with the po-mega class, represented by the Elements sub item in the illustration above). 


In this group of submenu items that make up the mega menu, the first level sub items are the column titles (represented by the Shop sub item in the illustration above). These should be custom links with blank URLs as they are just titles and don't link to anything.


Menu items can then be dragged to the right of each of the column title sub items to be placed within that particular column. These become second level sub items in the menu tree (represented by the Product Categories and Products - Attribute sub items in the illustration above).


If you wish to hide a column title from displaying in the mega menu, type po-hide in its CSS Classes field. This will hide the title only and not the column. 

The best way to understand the mega menu implementation is to view the Elements menu item in the Top menu from the provided dummy content.

Fonts

Before you add posts and pages to your website, you may want to change the font to your desired font face. To do so, navigate to Appearance ➝ Customize within your WordPress admin dashboard and click the Typography tab.


Float integrates with Google Fonts and Adobe's Typekit to give you access to hundreds of high quality commercial fonts.

Google Fonts

To use Google Fonts typefaces within your website, open the Google Fonts website in another browser tab, select a font and expand the Family Selected tab at the bottom of the page.

Within grey box of the Embed Font section, you'll see a link tag with your selected font name (as well as numbers for selected font weights) within the family part of the href attribute. Copy the name and numbers (if any) only as highlighted above (Roboto:400,500,700). Paste this into the Google font family code field within Typography tab of your WordPress Customize panel (see illustration below).

Go back to the Family Selected tab in Google Fonts and in the grey box within the Specify in CSS section, copy the displayed font family, as highlighted above ('Roboto', sans-serif - without the semi-colon at the end). Paste this in the Font CSS field within Typography tab of your WordPress Customize panel (see illustration above).

You should now see the font change in the preview screen. Click Save & Publish.

Typekit

To use Typekit, make sure the Google font family code field is blank.

Typekit is a premium service that requires a subscription to use in Float. For more information, visit the Typekit website. To integrate your Typekit account, you'll need your Kit ID (follow this tutorial to get it).


Paste your Kit ID into the Typekit ID field of the Typography tab of your WordPress Customize panel (see illustration below).

Go back to your Typekit kit window and click the using fonts in css link in the Selectors section. This will open the popup shown below.

Copy the font family code, as highlighted above ('europa', sans-serif - without the semi-colon at the end). Paste this in the Font CSS field of the Typography tab of your WordPress Customize panel (see illustration above).


You should now see the font change in the preview screen. Click Save & Publish.

The Float demo uses Typekit's Europa font

Permalinks

At this stage you may want to change the way your permalinks are displayed. The default WordPress setting is Day and name, however the demo uses Post name, which is simpler to understand.


To change your permalink structure to Post name or another structure, navigate to Settings ➝ Permalinks and select a structure in Common Settings. Click Save Changes at the bottom of the page.

Posts

Creating a post

You're now ready to create your first post. Navigate to Posts ➝ Add New within your WordPress admin dashboard.

Here you can do WordPress' default actions such as enter the title, content, format and categories of your post, and click the Publish button to publish. However, with Float you can also 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 Post Options section at the bottom of the page (highlighted above), there are various options that allow you to further customise your post, such as configuring the banner, gallery, video and audio.

Adding a banner

A post banner appears as a thumbnail image on a blog index page, or a full width banner at the top of a post single banner. To add a banner to your post, scroll to the Featured Image section at the right of the Add New post page and click Set featured image

From the resulting media gallery popup, select an image thumbnail or upload an image and click the Set featured image button.

Banner image size

An image size of 1920 x 1280 pixels is sufficient to achieve a retina banner, and is the size used for all post banner images in the Float demo. However, You can adjust the size of your banner according to your requirements.

Banner options

There are several options available in the Post Options section that allow you to configure your banner. You can add a different image to the post thumbnail, vertically align the banner image on the post single page, modify the color of the banner's text and links, and change the logo color.

Video post

Float supports two types of video formats: YouTube and Vimeo. Videos from both of these popular platforms can be integrated seamlessly into your posts. To do so, first select Video in the Format section. 

YouTube

To create a YouTube video post, first locate the video you want to use on the YouTube website. Click on that video and on it's video page, copy the URL from the browser URL bar.

Go back to the Add New post page, scroll to the Video URL field in the Post Options section and paste the YouTube video URL that you just copied into the input. Click the Preview button to preview the video. 

Vimeo

For Vimeo videos, go through the exact same process as with YouTube videos. Visit the Vimeo website, locate the video you want to use, and copy the URL of that video page. Paste the copied URL in the same Video URL field in Post Options and click the Preview button to preview.

Modal or Background video

On the single page of video posts, you can choose to show a video background banner or a normal featured image banner with a link to a video modal. To do so, select either option in the Video single page display dropdown in the Post Options section.

Gallery post

A gallery post displays a slider in the post thumbnail of the blog index page. To create a gallery post, first select Gallery in the Format section. 

You'll then need to create a gallery shortcode. To do so, click the Add Media button above the editor.

This will bring up the media modal. Select Create Gallery from the menu on the left, then click on each thumbnail to include in the gallery (you'll need to upload images first if you haven't already. To do so, click the Upload Files tab). Your selection will appear at the bottom of the modal. Click the Create a new gallery button when you're finished.

You'll then see an Edit Gallery page in the modal. In the Gallery Settings section on the right, set the Link To dropdown to either Media File (to bring up a view modal when the plus icon on a gallery slide is clicked) or None for no modals.

To achieve a retina gallery, select Large from the Size dropdown.

Click Insert gallery to generate the shortcode. The shortcode will then appear in the editor. If your editor is in Visual mode, click the Text tab and copy the gallery shortcode (as hightlighed below).

Paste the copied shortcode in the Gallery Shortcode field in the Post Options section, and click Publish.

Audio post

Float supports two types of audio formats: a SoundCloud embed and an MP3 file. Each audio format can be integrated seamlessly into your posts. To do so, first select Audio in the Format section. 

SoundCloud

To create a SoundCloud audio post, first locate the audio you wish to use on the SoundCloud website. Click the share icon of your audio selection, as highlighted below.

This will bring up a popup. Click the Embed tab at the top, click the standard embed thumbnail (on the right) and copy the embed code from the Code and preview section. 

Go back to the Add New post page, scroll to the Soundcloud embed code field in the Post Options section and paste the embed code that you just copied into the input. Click Publish.

MP3

To create an MP3 audio post, scroll to the Upload MP3 file field in the Post Options section and click select. From the resulting media gallery popup, select or upload an .mp3 file and click the Select button. 

You'll then see the path of your .mp3 file appear in the input field.

Click Publish.

Lightboxes

Lightboxes can be created within posts in the following ways:

  • Gallery images (set to Link to Media File)
  • Images with captions

To activate the lightbox for gallery images, the images will have to link to their media file. You can set this in Gallery Settings within the model via Add Media ➝ Create Gallery.


Blog

Header

Now that you have published a few posts, you're ready to configure your blog archive page. The first thing you'll want to do is configure the header. To do this, navigate to the customizer via Appearance ➝ Customize and click the Blog tab.

Here you'll see a large list of header configuration options for the blog archive page header, with descriptions for each option; from making the navigation bar transparent, to configuring a video banner. You can preview each option in real time as you make changes and before you save.

Widgets

The next thing you'll want to configure on the blog archive page are the blog widgets, which appear when the "+" icon is clicked on the top left.

To do so, navigate to Appearance ➝ Widgets. There are two widget locations on the blog archive page: at the top and on the side. These locations are represented by the Blog Top Widgets and Blog Side Widgets tabs on the right, as highlighted below. 

You can drag and drop a variety of widgets on the left in the Available Widgets section into each of these locations. Once a widget has been placed into a location, you can click on it for further configuration options.

To set the widget locations that you want to display on the blog archive page, navigate to the customizer via Appearance ➝ Customize and click the Blog tab. Scroll down until you see the Top widget area and Side widget area checkboxes. Check either or both.

Columns

You can set the amount of post columns to display in the blog archive page. You can set this from 2 columns to 5. To do so, navigate to the customizer via Appearance ➝ Customize and click the Blog tab. Scroll down until you see the Blog columns input field. Use the arrows to adjust the figure.

The amount of post columns can not be adjusted when the Side widgets area is visible or on mobile devices.

Infinite scroll

As you can see from the image above (below the Blog columns field), your can enable infinite scroll on the blog archive page as an alternative to a standard pagination. To so so simple check the Enable infinite scroll checkbox in the Blog tab of the customizer via Appearance ➝ Customize.

Subscription form

Now that your archive page is configured, the last touch to add to your blog is an email subscription form. Float integrates with MailChimp to allow visitors to sign up to your email list via a form in the single post page (and footer. See Footer for more information).


To configure your subscription form, first log into your MailChimp account and select Lists from the top menu. On the Lists page, click the arrow icon on the list you want to integrate and select Signup forms.

On the following page, scroll to Embedded forms and click the Select button.

In the Copy/paste onto your site section of the resulting page, copy the form action code only, as highlighted below.

Paste this copied code into the MailChimp action form field in the Blog tab of the customizer via Appearance ➝ Customize.

Displaying posts on custom pages

To insert posts within a page that that you have already created, use the Posts shortcode. See Shortcodes for more informarion.

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.

Shop

The shop section of Float is powered by the WooCommerce plugin. Make sure this plugin is installed and activated before attempting to configure your shop. See Plugins for more information.

Create a product

To create a product for your shop, navigate to Product ➝ Add Product within your WordPress admin dashboard. Since WooCommerce is a third-party plugin, please read through the official WooCommerce documentation for complete product setup instructions.

Below is a list of official WooCommerce guides that will help you create products:

Product page style 

Float has two product page styles to select from: Scroll (Default) and Slider. This can be selected within the Product Options section of a product page, from the Product page style dropdown.

If you select a Slider page style, you can also select how many thumbnail columns appear below the slider.

Extended product

An extended product is simple a product with an extended description. In the demo we have used shortcodes with the content area to extend the product description. You can also select to have the product description area full screen by checking the Extended product mode option within Product Options.

Product image size 

To set your image sizes in WooCommerce, navigate to WooCommerce ➝ Settings. Click on the Products tab at the top of the screen and click the Display link below. Scroll down to the Product Images section. Here you can set dimensions of your shop images. Below are a settings for the Float demo.

  • Catalog Images: 1200 x 1200px
  • Single Product Image: 1400 x 1400px
  • Product Thumbnails: 180 x 180px
After changing these settings, you'll need to use the Regenerate Thumbnails plugin to regenerate the thumbnails in your shop.

An image size of 1462 × 1462 pixels is sufficient to achieve retina product images, and is the size used for all product images in the Float demo. However, You can adjust the size of your banner according to your requirements.

Set color of product page

You can change the color of the single product page to suit your product images. To do so, navigate to the Shop tab in the customizer via Appearance ➝ Customize, scroll down to Product panel color and select a color. You can preview your changes before saving, within the preview screen on the right. Click Save & Publish when done.

Shop page

To setup your shop page, create a blank page in Pages ➝ Add New titled Shop. Then, navigate to WooCommerce ➝ Settings. Click on the Products tab at the top of the screen and click the Display link below. Scroll to the Shop & Product Pages section, and select your page in the Shop Page dropdown.

You can configure your shop page in the customizer via Appearance ➝ Customize. Again, the shop page is configured in exactly the same way as the blog and portfolio archive pages. Click the Shop tab in the customizer to configure the header, widgets, columns and pagination of your shop archive page. See Blog for more information.

Widgets

To configure the widgets on your shop page, navigate to Appearance ➝ Widgets. There are two widget locations on the shop page: at the top and on the side. These locations are represented by the Shop Top Widgets and Shop Side Widgets tabs on the right, as highlighted below. 

For more information on shop-specific widgets, read the Widgets included with WooCommerce guide.

Footer

Float has 3 footer sections:

  • Featured
  • Columns
  • Bottom

Featured

The featured section of the footer is a slider populated with blog posts to display a collection of featured blog posts.

Once you have published a number of blog posts categorised under the same category, you can configure this section within the Footer tab of the customizer, via Appearance ➝ Customize.

Columns

Footer columns are columns of footer specific content, populated by plain text or shortcodes.

These columns can be created and configured within the Footer Columns menu tab within your WordPress admin dashboard. To add a column, navigate to Footer Columns ➝ Add New, enter the column title and populate the text editor with either plain text or a shortcode.

Below is a list of footer shortcode suggestions:

  • Tweets
  • Mailbag
  • Recent Products (WooCommerce)
  • Featured Products (WooCommerce)
  • Product Categories (WooCommerce)
  • Best-Selling Products (WooCommerce)

Bottom

The bottom footer section has 2 configurable areas: The menu and credits. See Menu for more information on how to configure the footer menu. To modify the footer credits, navigate to the the Footer tab of the customizer, via Appearance ➝ Customize. Scroll to Footer credit and enter your desired credit text within the input field.

Customizer

Besides the customizer options already discussed in this guide, the customizer offers several other customisation options for your theme. Navigate to Appearance ➝ Customizer to access all the options.

Social

Here you can add your social profiles from a variety of social media platforms. A logo icon for each social profile entered will appear in the footer, side panel and within the Social shortcode (see Shortcodes for more information). 


To add your social profiles, click the Social Tab within the customizer.

Colors

Setting colors in Float is very flexible. You can modify the general accent color of your theme in the Color tab of the customizer, within the Accent section. However, colors can also be coordinated within the shortcode of each element. See Shortcodes for more information.

Additional CSS

If you have some basic CSS skills, you can add custom CSS to your theme via the customizer. To do so, click on the Additional CSS tab and enter your CSS code within the input box. Your changes will be visible in the preview screen as you type.

Customer support is not offered for anything relating to CSS modifications. Float class and ID names need to be looked up within the files independently, as well as the CSS code you wish to use. Any changes made to the theme as a result of CSS modifications will be outside the scope of our customer support.

Shortcodes

Shortcodes in the Float theme are powered by the Pixel Shortcodes plugin. For a full list of available shortcodes, please see this Pixel Shortcodes guide.

Icons

Inside shortcodes

Float is packaged with a collection of beautifully designed icons that can be used within your content via the following shortcodes:

  • Lightboxes
  • Progress Bars
  • Count
  • iBox

To use Float's icons within these shortcodes, you'll need to insert the icon name within the icon attribute of each shortcode. You can find a full list of icon names in the icon-guide.html file, located within the guides/icon-guide folder, of your download.

In this guide, you'll see that each icon name is prefixed with icon-. When inserting the icon name within a shortcode, you need to remove the prefix and just include the unique name after the prefix. For example, inserting the icon-mail icon into the Progress bar shortcode will look as follows:

[po_progress title="Title" icon="mail" value="88"]

As you can see, the icon- prefix was removed and only mail was inserted.

Inside HTML

Icons can also be inserting within html elements via classes when adding custom HTML to Float. The icon names with the prefix included should be used as class names.

<span class="icon-mail"></span>

Inside CSS

You can also add icons via custom CSS, by using the the font name (po-font) and the four character codes that appear below each icon in the guide.

.example::before
{
  font-family: 'po-font';
  content:'\e002';
}
Customer support is not offered for anything relating to HTML or CSS modifications. Any changes made to the theme as a result of these modifications will be outside the scope of our customer support.

Child theme

What is a child theme?

A child theme is a theme that inherits the characteristics and functionality of the parent theme. In this case, Float Child is the child theme and Float is the parent theme.

Why should I use the child theme?

Modifying Float Child is the safest way to modify Float. Instead of modifying Float's theme files directly, you can use the Float Child child theme to override any styles and functionality.

What happens if I modify the parent theme?

Float is updated regularly with new functionality, styles and bug fixes. If you modify the parent theme and then download an updated, all your changes will be lost. With a child theme, you can update the parent theme and still keep your changes after an update.

How do I use a child theme?

Once the parent theme is installed and activated, install and activate the child theme. This is done in the same way you would install and activate any other theme. Navigate to Appearance ➝ Themes ➝ Add New ➝ Upload Theme within your WordPress admin dashboard.


Upload the float-child.zip file located in the theme folder of your download.

Once activated, Float Child will inherit everything from its parent. The style.css file included within the child theme folder allows you to make CSS modifications. Should you wish to modify a particular file, simply copy that file from the parent theme into the child theme’s root folder. Once that file exists in your child theme folder, it will be used instead of the original file in the parent theme.

Customer support is not offered for anything relating to theme customisations via the child theme. Any changes made to the theme as a result of these modifications will be outside the scope of our customer support.

What happens to my theme content?

When changing from the parent theme to it’s child theme, all your content will be transferred to the child theme, except for your customizer panel settings. Although these settings will not be lost, they will not be transferred to the child theme, so you’ll have to re-enter them in your child theme’s customizer. If you wish to revert back to the parent theme’s customizer settings, you’ll have to re-activte the parent theme.

Tips

Keep your website fast

Float was built from the ground up with speed in mind. A combination of the latest lazy and asynchronous loading techniques have been built into the code to help make your website pages load as quickly as possible. 


Fast page load times are very important to consider in website devepment, as it translates into a better visitor experience, better SEO, more page views and subsequently, more sales.

Despite Float's solid codebase, there are still a few steps for you to take to ensure that your website remains as fast as possible.

Use recommended image sizes

Banner images are one of the common causes of slow page loading times. Use the recommended banner sizes in this guide or less to ensure that your pages don't carry more weight than necessary. 

Reduce content overpopulation

Although Float lazy loads images as they appear within the viewport, it's still good practice to curate your content as much as possible, keeping each page lightweight and efficient. Too much congested media content, especially within the initial viewport, will slow down your page load time and create a poor experience for your website visitors.

Optimise images

Always optimise your images before uploading them to WordPress. Images should be compressed at around 90% image quality.  Also, try to keep the use of lossless image files, such as uncompressed pngs to a minimum.

  • JPEGmini is a free online tool that optimises jpeg images without losing quality.
  • TinyPNG is a free online tool that optimises both jpegs and pngs.

Use a good hosting service

The servers that your theme is running on is another important factor in determining the page speeds that your website will experience. Therefore, choosing the right hosting service is essential. Below are some recommended hosting providers:

  • Flywheel is a beautiful, easy to use hosting provider with great tools for designers and creatives at a very competitive price.
  • SiteGround is emerging as a popular hosting solution within the WordPress community. It ticks all the boxes for WordPress and provides great customer support.
  • WPEngine is a dedicated WordPress hosting service, offering super fast servers and ease of use.
  • Media Temple is one of the longest serving hosting services in the industry, offering top-tier servers and support.
Before choosing a hosting provider, research their services thoroughly. Don’t go for the cheapest option, just because it’s cheap. Read what others say about their experiences, and shop around.

Use a Content Delivery Network (CDN)

A CDN optimises the performance, reliability and security of your website, by in part, moving content physically closer to website visitors. Most of the hosting services recommended above include a CDN. However, if you're using a service or plan where a CDN is not included, Cloudfare offer a free CDN that's fast and efficient 

Plugins can help

There are a number of plugins available within the WordPress repository that can help further in keeping your website pages fast and efficient. Below are a few we recommend:

  • W3 Total Cache is a caching plugin that increases website performance and reduces download times via features like content delivery network (CDN) integration.
  • WP Rocket is a caching plugin for WordPress that's easy to use and delivers immediate results.

SEO

With Float's standards-driven code, use of the latest lazy and asynchronous loading techniques, and your use of the above page-speed related suggestions, your website is already optimised for search engines such as Google. However, for further optimisation, we recommend using the popular Yoast SEO plugin.

Despite all the optimisations built into Float, the most important factor in determining whether your website is indexed in search engines is content. Therefore, your main focus should be creating the best content possible.

Translating your theme

Float is localised and translation ready. This means that with the help of a 3rd-party translation plugin, you can translate Float into any language you like. To do this, you will need to upload the float.pot file to a translation plugin, located within the languages folder within the Float root directory.

Below are a list of translation plugins that you can use to translate Float:

Customer support is not offered for usage of translation plugins. For help with translating your theme using a translation plugin, consult the plugin author directly. 

Customisations

Want to create a new page design? Customise a feature or layout? Or just need to make a few minor tweaks to Float? Unfortunately, this is beyond the scope of customer support and requires a developer. 


However, we've partnered with Codeable to provide you with best-in-class customisation services at a good price from handpicked experts. To get stated, post your project in the form here, and a developer will be in touch with a quote and details of how to proceed.

Support

We support you

We’re happy to help you with theme-specific support should you run into a road block that this guide couldn't help you solve. Unfortunately we can’t help you modify your theme further than its advertised features. Read our Support Policy for more information.


If you require further support after reading this guide, visit our ticket system, where you can read or submit a support ticket.

If you're experiencing a theme issue, deactivate all third-party plugins and check if the problem still persists, before submitting a ticket. 

You support us

If you're happy with Float and the service we've provided, we'd really appreciate a rating and review on ThemeForest. Ratings help get Float to more customers and expand the Pixelobject community, which helps us build and support better products. 


To rate and review Float, log into your Envato Market account, hover over your account name at the top-right of the screen, and click Downloads. Scroll to the Float download and in the Rate this item section, click the number of stars you wish to give Float, then provide a quick review in the following window.

If you feel we can do better, drop us a line at hello@pixelobject.com and let us know. Your feedback is appreciated, and will help us continuously improve our products and service.

Powered by Pixelsmile