Portfolio

Adding Portfolio Items

To set the portfolio section up, first of all you will need to add some portfolio items.

Here are the steps you should carry out to do this:

  1. Navigate to Portfolio -> Add Portfolio Item.
  2. Add a title.
  3. Set a featured image using the Featured Image box in the right column. This image will be used on your portfolio overview page on your site.
  4. Add or select a category for this portfolio item. You can add these using the Category box in the right column or by adding new categories under Portfolio -> Categories.
  5. Fill out the options for the portfolio item under Portfolio Options on the page.
  6. Add some content; we have used the Visual Composer to create our portfolio items as it allows more flexibility here. Below are two possibilities to get an image or a video portfolio item, but the possibilities are endless using the Visual Composer.

Image Portfolio Item

To add an image portfolio item You will need to:

  1. Follow the instructions on Adding a Portfolio Item above.
  2. Make sure the Visual Composer ‘Backend Editor’ is selected.
  3. Click to ‘Add Row’.
  4. Edit the row you just added by clicking the pencil icon in the top right.
  5. Add a class where it says ‘Extra Class Name’ of ‘ftcontainer’.
  6. Switch to the ‘Design Options’ tab and add some padding if you require; we generally add 30px to the top and 40px to the bottom here. Save.
  7. Add another row inside that row.
  8. Click ‘Add element’ and select the ‘Single Image’ option.
  9. Add an image and fill out the options as you require (we recommend entering the image size as ‘full’). Save.
  10. Now you have added the image you can add some content; so add another row.
  11. Edit this row and add a class of ‘ftrow’.
  12. On our example you can see we have split this row off into 3 section and added text elements to each section. To get the final column to display with the underlines we have used the DL tag in HTML which you can see here: http://www.w3schools.com/tags/tag_dl.asp. So be creative and do what you like here :)

Video Portfolio Item

Another example on our demo is to add a video to the portfolio item.

To do this:

  1. Follow the instructions on Adding a Portfolio Item above.
  2. Make sure the Visual Composer ‘Backend Editor’ is selected.
  3. Click to ‘Add Row’.
  4. Edit the row you just added by clicking the pencil icon in the top right.
  5. Add a class where it says ‘Extra Class Name’ of ‘ftcontainer’.
  6. Switch to the ‘Design Options’ tab and add some padding if you require; we generally add 30px to the top and 40px to the bottom here. Save.
  7. Add another row inside that row.
  8. Edit this row and add a class of ‘ftrow’. We have made this row split into 2/3 and 1/3, but you can of course do anything you like here.
  9. Add the Video Player element and add the URL to the video that needs to be displayed.
  10. Add any other content to any other sections of the page you require. To get the final column to display with the underlines we have used the DL tag in HTML which you can see here: http://www.w3schools.com/tags/tag_dl.asp.

Once you start playing around with the possibilities here you can achieve anything you like and then save that template for use on your other portfolio items.

Setting up the Portfolio page

Once you are content with the portfolio items you have, you may want to display them on a portfolio page for users to explore and see them in full.

To do this:

  1. Select the ‘Visual Composer Template’ as the template under Page Attributes in the right column.
  2. Make sure the Visual Composer ‘Backend Editor’ is selected.
  3. Click to ‘Add Row’.
  4. Edit the row you just added by clicking the pencil icon in the top right.
  5. Add a class where it says ‘Extra Class Name’ of ‘ftcontainer’.
  6. Switch to the ‘Design Options’ tab and add some padding if you require; we generally add 60px to the top and 40px to the bottom here. Save.
  7. Add another row inside that row.
  8. Click ‘Add element’ and add the ‘Portfolio’ element here.
  9. Fill in the options you are presented with and save.

This should now pull out your portfolio items onto the page. Users can filter them out and click through to view more details.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk