How to Create a Portfolio Page

Learn how to create Portfolio Posts, assign them to Categories and create a Portfolio Page with Filtering.

Creating a Portfolio Page Video Tutorial

Learn how to create a Portfolio Page using this video tutorial.

STEP 1.

Install Plugin
Ensure the Portfolio Plugin is installed – to install the Portfolio plugin, goto WordPress Admin > Appearance > Install Plugins > Locate Portfolio Post Type > Click Install.

STEP 2.

STEP_2-3.png

Create Post
Let’s create our Portfolio Posts. Goto WordPress Admin > Portfolio > Add New Item > Once the page has loaded Enter a Post title.

For this stage, we need to ensure we see the Visual Composer Editor buttons are displayed.

If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure Portfolio is Checked.

STEP 3.

STEP_3-4.png

Adding Content
Next, we need to add content to our Portfolio Post. We’ll use the Visual Composer to do this.

You can use the many Elements to add content to the post – at this stage we have a few choices – see diagram for reference.

  1. Backend Editor – Click the Backend Editor to start adding Elements to the post
  2. Frontend Editor – Click the Frontend Editor button to start adding Elements to the post on the Frontend of your site ( Add / Edit Elements in real-time )
  3. Use Demo Portfolio – Click the Text view button and paste in the HTML from the Classic Demo ( See below ).

Use Demo Portfolio
If you would like to use the format used on the Classic Demo and have not installed the Demo Content ( recommended ) you can use the following steps to paste the HTML from the demo into the post:

  1. To do this, click the Text view button ( see diagram )
  2. Copy all of the following HTML from this File
  3. Paste the HTML into the Editor field ( See arrow in diagram )

Once you have pasted the HTML into the Editor field, follow these steps:

  1. Click the Visual button
  2. Click the Backend Editor button
  3. You should now see all of the content on the Post and you can edit it with your own text and images

 

 

STEP 4.

STEP_4-2.png

Assign Post to Categories
Once we’re happy with our Portfolio Post content, we can assign the Post to a Category. This is essential if you wan to use Animated Filtering to filter your Portfolio posts by Category.

To add a post to a Category, follow these steps, see the diagram above for reference.

  1. Locate the Portfolio Categories section of the post.
  2. Click + Add New Portfolio Category
  3. Enter the Name of your Category
  4. Click the Add New Portfolio Category
  5. Select the Categories you wish to assign this Portfolio Post to
  6. Click Publish

STEP 5.

STEP_5-1.png

Create a Template
If you would like to use the same format for all your other Portfolio Posts, you can save the Portfolio Post you’ve just created as a Template. This will save you time and keep your Portfolio Posts consistent.

To create a Template, follow these steps – see diagram for reference:

  1. Whilst editing the post you wish to create a Template from, click the Templates Icon
  2. Give the Template a Name e.g. My Portfolio Template
  3. Click Save Template

STEP 6.

STEP_6-1.png

Load a Template
If you wish to load a template you’ve created or one of the default templates, create a new Post and follow these steps:

  1. Click the Templates Icon,
  2. Goto the Default Templates tab
  3. Search for your Template e.g. My Portfolio Template
  4. Hover over your Template
  5. Click the + icon or template name to add the template to the post

STEP 7.

STEP_7-2.png

Create the Portfolio Page
Once you have created all of the Portfolio Posts, it’s time to create the Page which displays them all. Follow these steps to create a Portfolio Page and add an element to the page.

  1. Goto WordPress Admin > Pages > Add New > Once the page has loaded Enter a Page title
  2. Enable the Visual Composer Backend Editor or Frontend Editor
  3. Click + Add Element

STEP 8.

STEP_8-1.png

Choosing a Gallery or Slider
We’re going to use the Visual Composer again to create a Gallery or Slider to display our Portfolio Posts. Follow these steps to add a Gallery to the Page.

  1. Once you’ve clicked the + Add Element button, you’ll see all of the Elements within Visual Composer
  2. All of the Elements you can use for a Portfolio page are highlighed in the diagram above
  3. For this example, we’re going to select the Grid Gallery

STEP 9.

STEP_9.png

Select Image / Media Source
Next we need to select the source of our Grid Gallery content, in this case our Portfolio Posts. Follow these steps to select our Portfolio posts and use the diagram for reference:

  1. Select Build Query from the Select Image / Media Source select box
  2. Click the Build Query button
  3. Select Portfolio Post type
  4. Enter All to display all posts
  5. Goto the Taxonomies field,
  6. Start typing the Name’s of the Categories you created in STEP 4. )
  7. Once it finds a match, click the Category Name

STEP 10.

STEP_10.png

Configure the Gallery or Slider
Once we’ve selected the Source, all that’s left to do is configure the Gallery or Slider to suit your content. For this example, I’ve used the settings in the diagram above:

  1. Image Size – large
  2. Content – Title on Hover + Image
  3. Columns – 3 Columns
  4. Animated Filtering Click to Filter – this displays our Categories at the top of the page which we can click on to filter.
  5. Masonry – Enabled – if you content has different sized content, this option fits the content together with equal spacing

If you’re using the Frontend Editor, you can experiment with the settings to see what works best for you. Once you’re happy with the settings, click Save Settings and click Publish on the page.

STEP 11.

STEP_11.png

Assign to Portfolio Parent Page
Once you’re happy with your portfolio page, you can assign it as a Portfolio Parent Page. This means when the icon above is clicked or Portfolio is clicked in the Breadcrumbs, it will take the user back to the Portfolio Page you’ve created.

Assign the page via WordPress Admin > Appearance > Customize > Portfolio > Portfolio Parent Page.

Using Flexishapes

Learn how to use the Flexishapes Element.

FlexiShapes Video

Watch the video on how to create FlexiShapes.

STEP 1.

STEP_1-3.png

Ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

STEP 2.

STEP_2_1-1.png

We’ll first add a Row Element to the page:

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

STEP 3.

STEP_3-3.png

Change Row stretch Setting
Next, we’ll configure the Row Stretch setting, this determines the width of the Flexishape.

  1. Edit the row
  2. Select the General tab
  3. Select Stretch row from the Stretch Row select menu ( Default will limit the Flexishape to the width of your content, any other option will set the Flexishape to full width )

 

STEP 4.

STEP_4-1.png

Add a Background Color to the Row
Next we’ll add a Background Color to the row, this will highlight what how the Flexishape manipulates the content within a Row.

  1. Cick the Design options tab
  2. Add a Background Image or Color e.g. #ffd300
  3. In this example, I’m only using a small amount of conent within the Row, therefore we’ll add some Padding to the Top and Bottom of the Row
  4. Set the Background Image to Cover the entire Row
  5. This part is optional, we can click on the Background Extras tab and enable the Parallax Effect & add a Color Overlay
  6. Click Save Settings

STEP 5.

STEP_5_1.png

Add Some Content to the Row
Next we’ll add some simple content to the Row, this can be anything you like, in this example we’ll add a Text Block.

  1. Click the Add Element Icon
  2. Use the Search bar to search the Text Block Element > Click the Text Block Element > Add Some Text to the Text Block and click Save Settings > Click the Close button

STEP 6.

STEP_6.png

Add a Flexishape
We’re ready to add a FlexiShape, we’re going to add this below the Text Block as it’s going to be placed at the bottom of the Row.

  1. Click the Add Element icon below the Text Block or use the icon highlighted in the diagram above.
  2. Use the search bar to search for the FlexiShape element
  3. Click to add the FlexiShape

STEP 7.

STEP_7-1.png

Configure the FlexiShape
Next, we’ll configure the FlexiShape, using the Frontend Editor, you can get creative with the settings to see what works for you.

  1. In this example we’ve used the Pointed Inverted Shape
  2. We’ve set the Position to the Bottom – this means the FlexiShapes will appear at the bottom of the Row
  3. The Color of the shape has been set to #ffffff ( white ) – it’s been set to white because the color below the row is white
  4. The Height can be any value you like ( within reason )
  5. Once you’re happy with how the FlexiShape looks, click Save changes
  6. As you can see from the diagram above, the FlexiShape has manipulated the content within the Row is complete

STEP 8.

STEP_8.png

Add multiple FlexiShapes
We can “Layer” the FlexiShapes to create different effects. In this example we’re going to add a semi-transparent FlexiShape

  1. Add another FlexiShape – Placing this FlexiShape below the previous one, we want it to appear beneath the pevious FlexiShape
  2. In this example we’ve used another Pointed Inverted Shape
  3. The position is set to Bottom
  4. This time, we’ll use a sem-transparent yellow instead of white, the color used in this example is: rgba(255,211,0,0.5)
  5. We’ll use a bigger Height than the previous FlexiShape this will complete the effect
  6. Click Save changes

Finished Example

Finished_Example-1.png

Using Rows

Learn how to use the Visual Composer Row Element – including: Slider & Video background, Parallax, Color Overlays and more.

Using Rows Video Tutorial

Watch the video tutorial for how to Using Rows here.

Getting Started with Rows

Getting_Started_with_Rows.png

Ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

Adding a Row

Adding_a_Row.png

Let’s add a Row Element to the page:

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

General Settings

General_Settings.png

Once the Row has been added to the page, we’ll need to edit it to access the settings.

  1. Hover over the Row and click the “Pencil” icon to access the Row Settings
  2. Click the General tab
  3. Row Stretch – this option Stretches the Row background or Row Background & Content. Set to Row Stretch to make a background color / image that spans the width of the site
  4. Row Height – this option sets the minimum height of the row. Use the 100% option combined with the Row Stretch option above to create a full screen effect
  5. Content Position – this works in combination with the Row Height option, position your content within the Row. The Row Height has to be set to 25% or more
  6. Anchor Link Name – use this option for One Page setups, it will allow you to link the menu to this Row
  7. Font Color – set the default Font Color for this Row
  8. Extra class name – only use this option if you’re familar with using CSS to customize the Theme

Design Options

Design_Options.png

The Design Options tab allows you to set Background Images, Colors, Borders, Background Position and more.

  1. Click the Design options tab
  2. Border Color – set a Border color for the Row
  3. Border style – set a Border style
  4. Border radius – use this option to add curved edges to a Row
  5. Background Color – add a Background Color to a Row
  6. Background Image – add a Background Image to a Row
  7. Background Image Control – set the image to Repeat or Cover to stretch the image across the Row background
  8. Background Horizontal Position – use this option to Position the Image Horizontally ( will not work with Cover )
  9. Background Vertical Position – use this option to Position the Image Vertically ( will not work with Cover )
  10. CSS – use these fields to control the Row Margins, Row Padding & Row Border ( be sure to check your site on Mobile device if using Margin values )

Background Extras

Background_Extras.png

The Background Extras tab allows you to add a Slider background, set a Color Overlay, add Video background & add Parallax Effect

  1. Click Background Extras tab
  2. Parallax – enable the Parallax Effect on the Row ( Ensure you have an image set in the Design Options tab )
  3. Slider Images – add images to create a Slider background on the Row ( Parallax will not work with this option )
  4. Slider Effect – choose a transition Effect for the Slider
  5. Slider Timeout – set the timeout between each image change in seconds
  6. Video URL – add a Video Background to the Row, you can use self-hosted .mp4 formats or YouTube and Vimeo Videos
  7. Overlay Color – add a Color Overlay to your background image or video