1. Home
  2. Voda WordPress
  3. Organizing Content
  4. Portfolio / Gallery

Portfolio / Gallery

Step 1. Create “Single Portfolio”

Start with creating categories Portfolio -> Categories. To create a single portfolio post, go to Portfolio -> Add Portfolio, fill in the details (title, featured image) and choose styles for it. All settings you can see at the bottom of page.

Single Portfolio Settings:

  • Portfolio style – you have a choice of content view one of 3 template styles (fullwidth gallery, large gallery, small gallery) or create a page with Visual Composer builder (blank).
    Note: Other settings not applicable for Portfolio style -> Blank
  • Add Gallery – upload images to your portfolio post
  • Gallery view – assign one of 4 gallery view (Images, Slider, Grid, Masonry)
  • Gallery position – if you chose portfolio style “large gallery” or “fullwidth gallery”, you can add gallery under or below content
  • Portfolio text – add content to portfolio
  • Add attributes – additional information below text eg. date of photos
  • Back to page – page will be loaded after click in link

Portfolio Settings (for Visual Composer) – change settings to achieve the look of portfolio elements you want.

  • Grid size – option is available only for type masonry and masonry layout “from elements” in Voda Portfolio Masonry. Assign one of 4 sizes (small square, tall rectangle, wide rectangle, large rectangle).
  • Custom link – add link to page which will be opened after click in portfolio item. Option is available only for “Open portfolio -> in portfolio page”.

 

Step 2. Create “Portfolio” page

From your site WP dashboard, add a new page, assign one of portfolio VC element to it. We have 4 elements (3 portfolio elements and 1 single portfolio element), each presenting different looks.

  • Voda Portfolio
  • Voda Portfolio Carousel
  • Voda Portfolio Split Slider
  • Voda Single Portfolio Item
  • Voda Portfolio Project Slider

You can create multiple portfolio pages.

Step 3. “Portfolio” settings overview

 

Voda Portfolio

Grid 3 columns

Options in Portfolio element:

  1. Select query criteria (categories or posts) – choose which of portfolios will be shown in element.
  2. Show filters and filters position – lets you decide if filter should be shown and there’s position.
  3. Posts per page – lets you define number of items per page
  4. Select type – we created 19 types of portfolio. You have 4 main styles (Grid, Masonry,
    Masonry scattered, Pinterest, Parallax) with different number of columns.
  5. Select style – select where you want to show title and categories (on hover or below images). Assign one of 4 hover types to portfolio: text on hover (small), text on hover (large), text follows cursor, text below portfolio item.
  6. Select header size
  7. Open portfolio – decide how portfolio images will be shown.
  8. Show spacing between elements – lets you decide if any space should be present between elements
  9. Colors & Button – change settings to achieve the look you want.

 

Voda Portfolio Carousel

Options in Portfolio Carousel:

  1. Select query criteria (categories or posts) – choose which of portfolios will be shown in element.
  2. Posts per page – lets you define number of items per page
  3. Image size – enter image size: “thumbnail”, “medium”, “large”, “full”, “voda-vertical-slide” (810×1080), “voda-square” (800×800). Alternatively enter size in pixels (Example: 200×100 (Width x Height)).
  4. Select style – select where you want to show title and categories (on hover or below images). Assign one of 4 hover types to portfolio: text on hover (small), text on hover (large), text follows cursor, text below portfolio item.
  5. Carousel height – select fullheight or add custom height.
  6. Select header size
  7. Open portfolio – decide how portfolio images will be shown.
  8. Show arrows – decide if portfolio carousel should contain arrows
  9. Show pagination – decide if portfolio carousel should contain pagination
  10. Mouse wheel control – decide if slides should change on mouse wheel function
  11. Autoplay – decide if autoplay should be active.
  12. Color – change colors to achieve the look you want.

 

Voda Portfolio Split Slider

Options in Portfolio Split Splider:

  1. Select query criteria (categories or posts) – choose which of portfolios will be shown in element.
  2. How many posts to display – set “-1” to display all posts
  3. Autoplay – decide if autoplay should be active.
  4. Select links size
  5. Show arrows – decide if portfolio should contain arrows
  6. Show pagination – decide if portfolio should contain pagination
  7. Mouse wheel – decide if slide should change on mouse wheel function
  8. Show categories – decide if portfolio should contain categories
  9. Show button – decide if portfolio should contain “See project” button

 

Voda Single Portfolio Item

Options in Single Portfolio Item:

  1. Insert portfolio ID – ID you can find in 5th column in Portfolio (image below).

  2. Select header size
  3. Open portfolio – decide how portfolio images will be shown.
  4. Select style – select where you want to show title and categories (on hover or below images). Assign one of 4 hover types to portfolio: text on hover (small), text on hover (large), text follows cursor, text below portfolio item.
  5. Color – change colors to achieve the look you want.

 

Voda Portfolio Project Slider

Change slide by click on part of next portfolio project or use right arrow on keyboard.

Options in Portfolio Project Splider:

  1. Select query criteria (categories or posts) – choose which of portfolios will be shown in element.
  2. Posts per page – lets you define number of items per page
  3. Autoplay – decide if autoplay should be active.
  4. Select links size
  5. Show dots – decide if portfolio should contain pagination

Note: Slides move only from right to left (to next slide).

Was this article helpful to you? Yes No