Setting up your theme

WooCommerce

This theme has the WooCommerce plugin pre-installed for you. If it is deactivated, you can go under Plugins > WooCommerce and activate it. Also go under WooCommerce > Settings and in the Products tab set the image sizes that best fit your shop under the Product Image Sizes section, in case you need different values than the theme sets by default.

1) Creating basic pages

Start by adding the basic pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home. This will serve as your homepage. Assign to it the Frontpage with Slider or the Frontpage with Video page template from the Page attributes panel and publish the page.
  2. Blog. This will be your posts page. Just create and publish a blank default page named “Blog” (or whatever you wish to name it) without adding any content for now.
  3. Contact. Here you can place your contact form, which you will create using the Contact Form 7 plugin.
  4. Features. In this page you will list your features. Apply to it the Post Type Listing template. From the Listing Options panel that appears once the template is set, select Features and select between column or sidebar based listing (if available). Also select the column number, the number of items you want to show on the listing page or enable the isotope filtering system. Publish the page.
  5. Partners. In this page you will list your partners. Apply to it the Post Type Listing template. From the Listing Options panel that appears once the template is set, select Partners and select between column or sidebar based listing (if available). Also select the column number, the number of items you want to show on the listing page or enable the isotope filtering system. Finally publish the page.
  6. Portfolio. In this page you will list your portfolio items. Apply to it the Post Type Listing template. From the Listing Options panel that appears once the template is set, select Portfolio and select whether you want column or sidebar based listing (if available). Also select the column number, the number of items you want to show on the listing page or enable the isotope filtering system. Publish the page.
  7. Services. In this page you will list your services. Apply to it the Post Type Listing template. From the Listing Options panel that appears once the template is set, select Services and select between column or sidebar based listing (if available). Also select the column number, the number of items you want to show on the listing page or enable the isotope filtering system. Publish the page.
  8. Team. This page will display your team members. Apply to it the Post Type Listing template. From the Listing Options panel that appears once the template is set, select Team and select between column or sidebar based listing (if available), select the column number, the number of items you want to show on the listing page or enable the isotope filtering system, then publish the page.

(TIP: all page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading, set the “Home” page to be your static front-page and the “Blog” page to be your posts page, as demonstrated in the image below:

reading-settings

2) Populating your blog

To add new posts to your blog, go to Posts > Add new, title your post and enter your content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel, add a category and/or tag to the post from the respective panels and publish the post by clicking Publish.

add-new-post

3) Adding portfolio items

To add a new portfolio item go to Portfolio > Add New. Set a featured image from the panel on the right, fill in the text you have for the portfolio item and move to the Portfolio Details panel below. Upload your project related photos in the Portfolio Gallery section (have a look at the end of this document for more information on gallery creation). Then, select the layout of your portfolio item from the Portfolio Template drop down. The Image List will display your images one below the other and the Image Slideshow will create a slider.
Finally you have to fill in Project Details. Click the Add Field button to create a new field. Enter a client name, date of creation, suggested price, etc. Finally you can add an external URL (if available) to demonstrate your product.

flevr-portfolio-details
TIP: The number of portfolio items on listing pages & the category filtering system can be controlled in the Listing Details panel when creating the listing template.

4) Adding Slideshow items

To add items to your homepage’s slider go to Slideshow > Add New, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage, images for the slider should be at least 1920×850). Add text in the text editor (optional), then in the “Slider Details” panel you can set a URL to which the user will be redirected when clicking its button. Change the button’s text or use a URL to a video which will be displayed on the slider item and publish the slider item. Slider speed and auto-slide functionality can be adjusted under CSSIgniter settings > Slider Options.

flevr-slider-details

Slider items can be separated into categories. You have the ability to display one of these categories on your homepage by selecting it in the Frontpage Options panel drop down. This allows you to create thematic sliders and switch between them very easily. For example, if your e-shop features weekend offers, you can create two slider categories, one for the featured items you want to display during working days and one for the weekend ones and switch between them easily.

5) Adding Services

To create a service go to Services > Add New, set a title for it and upload a featured image. Then in the Service Details panel you can select where the featured image will appear and provide an icon for it by following the instructions the FontAwesome set has.

flevr-service-details

6) Adding Feature items

To add a feature go to Features > Add New, set a title for it, upload a featured image and publish the item.

7) Adding Team Members

To add a team member go to Team > Add New, set a title for it (the person’s name) and upload a featured image. Then in the Member Details panel you can set the person’s job title(optional) and add links to the person’s social profiles (follow the on-screen instructions to add the icons, the functionality is similar to the one provided by the Socials Ignited plugin).

flevr-member-details

8) Adding Partners

To add a partner go to Partner > Add New, set a title for it, upload a featured image and publish the post.

9) Adding Testimonials

To add a testimonial go to Testimonials > Add New and set a title for it (the author’s name). Then in the “Testimonial Details” panel you can add a byline for the testimonial’s author.

business3ree-testimonial

10) Adding products

(Optional – Only if you choose to use WooCommerce)
To add your products, check this detailed guide provided by WooThemes here.

11) Creating your menu

Now that your content is in place, you will need a menu. Go to Appearance > Menus, check the pages you want on your menu and add them. Give your menu a name and save it. You will need to set your menu as Main menu. This can be done either by checking the Main menu box in Menu Settings or just below your menu items in Menu Structure or by going to the Manage Locations tab and selecting the menu you just created.

flevr-menu

(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)

12) Setting up your homepage

The homepage on Flevr consists a slider or video area and a widget area to provide you with maximum flexibility upon the content displayed. The widget area can be accessed under Appearance > Widgets > Front Page Widgets.
To add a video to your homepage, select the Frontpage with Video template and in the Video Details box that will appear below the editor, select whether you are using an external or self hosted video. Proceed to paste in the proper video URL(s). If you choose to use a self hosted video you will need to use three different file formats to ensure maximum compatibility among different browsers.

Duplicating the demo’s layout

The homepage on the demo consists three slideshow items in the Frontpage with Slider version or a video in the Frontpage with Video version, plus a few widgets. These are: One CI Items displaying three service post types in a three column layout. One CI Hero, one CI Testimonials displaying three random testimonials, one CI Items displaying four team members on a four column layout, another CI Hero, one CI Items displaying three portfolio items on a three column layout, one CI Social Engagement widget displaying the newsletter signup form and links to a few social profiles, and one CI Items displaying three portfolio items in a three column layout.

13) Changing Footer text

The theme’s footer features an area for you to enter your copyright info, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options (5th box down).

footer-text

14) Default and custom Header backgrounds

You can set a default background for your theme’s headers under CSSIgniter settings > Appearance Options, in the header display panel. Below the main text editor in your posts, pages and custom post types you will find the Header background metabox. You can use it to set a custom header background for the specific item.

15) Sloped Edges

The theme features sloped (diagonal) bottom edges. If you don’t want the edges sloped, you can disable them under CSSIgniter settings > Appearance Options.

flevr-sloped-lines

16) Newsletter Icons

You may add up to five linked icons to appear on the left of the newsletter form. These may be social icons or anything else you might choose to display. These can be set under CSSIgniter settings > Newsletter Options.

flevr-social-icons

17) eCommerce Options

Under CSSIgniter Settings > eCommerce Options you can customize the number of columns and products on shop pages, enable or disable related products and more.

flevr-e-commerce-options

18) Widgets

The theme features eleven custom widgets specially crafted to help you display your content. They can be found under Appearance > Widgets.

flevr-widgets

Below each widget there is a small description describing their function.

Additional Information

Creating Galleries

To create a gallery using the gallery management system follow these steps:

  1. On the Gallery Information panel click the Add Images button.
    gallery-settings-add-images
  2. To upload your images, drag & drop them in the Edit Gallery window that will pop-up. Select Add to Gallery in order to select already uploaded ones. Once you are done, click the Update Gallery button on the lower right side.
    gallery-settings-update-gallery
  3. Your “Gallery Information” panel will look like this:
    gallery-settings-gallery
  4. You can re-arrange the order of images by drag & drop.
    gallery-settings-rearrange
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below:
    gallery-settings-remove
  6. By checking the Randomize order box your gallery images will appear in a random order that will change on every page refresh.
  7. When you are done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same procedure.

Useful Plugins

  • CSSIgniter Shortcodes Use this shortcode plugin to create a variety of layouts and elements on your site. Instructions can be found here.
  • Socials Ignited Use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks. A guide can be found here.
  • Contact Form 7 Use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

Image Sizes

The recommended image sizes for the Flevr theme are:

  • Blog thumbnail: 750×350px
  • Header images: 1920×300px
  • Homepage slider: 1920×550px
  • Listing page thumb: 700×500px
  • Portfolio thumbs: 750×430px
  • Testimonial thumb: 130×130px

Please keep in mind that any image uploaded should be larger than 750px for best results. Generally for each section use images that are larger or equal than the recommended width.