Overview & Features

Important Informations

FlatFolio for Visual Composer can be also used alone (without Visual Composer plugin) but it reach its best results using Visual Composer
Please note that WPBakery Visual Composer is not included in the package so you have to buy your own license of plugin on CodeCanyon.

Plugin Installation

Installing your new plugin is very simple. Follow these steps
  1. Download the ZIP package from Codecanyon and Unzip it.
  2. Within the unzipped folder you will see a file named flatfolio-vc_v1.5.zip - this is the Plugin itself.
  3. Log into your Wordpress Dashboard and click on Plugins.
  4. Next click on Install Plugin then click on Upload.
  5. Click Add new -> Upload -> Browse then locate the file named flatfolio-vc_v1.5.zip and click Install Now.
  6. After the plugin has installed click on Activate Plugin and you are all set! New FlatFolio is now installed!.

Layout Setting

Basic Setting

Set your general option for your grid

  1. Insert a name for your layout
  2. Option
    • SOURCE - You can decided which post type insert on your grid or slider: Projects, Gallery and Posts.
    • Category (active only for posts and projects) - Select your category item to view in the layout
    • Gallery (active only for gallery) - Select a gallery already created
    • Order by - Select the order the item between many cases: Title, Created Date, Modified Date, Post Slug, Author, Post ID, Random or none.
    • Direction - Asceding or descending order.
    • Limit Posts - Set the number of posts to view in the layout (0 = all posts)
    • Type - Set which layout type you want use to view your item: Grid, Carousel and Slider.
    • Filtering Buttons (active only for type Grid) - Tun OF/ON the filter categories
    • Grid Spacing (pixels) - Set the number of pixels between the items
    • Loading - Enable/Disable the loading feature
  3. Update the layout.

Add a Project

Portfolio Type

You can create a lof types of items: Image, Slider, Logo, Audio, Video or other codes.

  1. Basic Setup - Set the type icon between: Image, Gallery, Video or Code
    1. IMAGE TYPE - Upload a singular image as item background
    2. GALLERY TYPE - Upload multiple image as slider in background
      For each image you can set a title
    3. VIDEO TYPE - Insert a youtube video as item background
      You must paste the ID Youtube in the field.
    4. CODE TYPE - Upload an embed code as item background
      You must paste your custom code in the field.
  2. Project Content
    • Title - Insert the title of item
    • Subtile - Insert a subtitle for your item (optional)
    • Description - Insert an item description, this will be displayed when you open the full project
    • Social - Insert an address url for each social to displayed the social icon in your project.
      you can set Facebook, Twitter, Google+, Linkedin and Pinterest.
    • Extra Info - You can set multiple informations about your project.
      For each extra information you must set a label and value.
  3. Project layout
  4. Basic Options
    • Shape - Set the shape of the item. You can choose between 4 shape. You can create a mosaic or grid layout.
    • Overlayer - If you check this option you can attach a colored layer over the image.
    • Content - You can choose between: Informations, Logo or none
      • Informations - You can set the Info Position (top-left, top-right, bottom-left, bottom-right), the Text Color (rgba or hex) and the Button Text Label.
      • Logo - You must upload a logo image - This will be placed at the center of the box item.
  5. Hover Options
    • Image Effect - You can set the zoom effect when you're over the image
    • Overlay Effect - You can select between Curtain and Gradient.
      Curtain reduce the overlay up to 50%, Gradient dissolve the overlay and put a light shadow.
    • Logo Effect - You can set the zoom effect when you're over the logo
    • Button Color - You can set the rgba or hex color
  6. Click Options - You can select Custom URL or open the Project Preview
    • Custom URL - insert the full address to link to item.
    • Project Preview - open the full content of the project.
  7. Categories - Select the category item, this will be used to filter the items.
  8. Skills - Add multiple skills used in the item.
  9. Update the project

Add a Gallery

Gallery Type

You can create a gallery using grid, slider or carousel layout.

  1. Go to Flatfolio - > Galleries
  2. Add new gallery
  3. Set a name for this gallery
  4. Update two or more image
  5. You can set a title for each image
  6. Publish the gallery

Add a Post

Blog Type

You can create a blog using grid, slider or carousel layout.

  1. Go to Posts -> Add new
  2. Set name and content post
  3. Set the category for each post - This is used as filter on grid page
  4. Set a featured image for each post - This is used as thumb on grid page
  5. Publish the post

Use Layout WITH Visual Composer

Using Layout

Use our Flatfolio Element in VC

  1. Edit your page using Visual Composer builder
  2. Click on the button to add elements and choose Flatfolio Layout element
  3. Select the layout you have already created before

Use Layout WITHOUT Visual Composer

Using Layout

Paste a shortcode layout in a new page

  1. Copy the shortcode layout already created and paste it in a new page.
  2. Insert a title for your portfolio, blog or gallery page.
  3. You can create a lot of layout changing some options for each layout.