We recently published an article called “How to make a photography portfolio website”. It describes everything you need to think about while building your personal portfolio.
Check it out here.

This chapter covers Kameron theme download from ThemeForest, installation, plugin install and demo import.

After purchasing this theme download the package from Themeforest.

To do that, go to your themeforest.net profile move your mouse cursor over your login name in the right top corner and then click “Download”.

Here you will find all the items that you have purchased.

Locate Kameron, click the “Download” button and choose “All files & documentation” and save the package on your computer.

download

UNZIP the package you just downloaded.

Inside you will find a copy of this documentation, license, purchase code and a zipped Kameron file (kameron.zip) that you will need to install onto your WordPress.

  1. Login into your WordPress Admin panel
  2. Go to Appearance > Themes
  3. Click on the “Add New Theme” > Upload Theme
  4. Choose file and select kameron.zip (this file is INSIDE the zipped file you’ve downloaded from Theme Forest)
  5. Hit “Install Now” and the theme will be uploaded and installed.
  6. Then click on the Activate link.activate theme

 

Installing Plugins

  • After successful theme installation, you will be presented with a set of plugins which were used in the live theme preview.
  • Clicking on ‘Begin installing plugins’ .
  • Then select all of the plugins in the plugin list and bulk install them.

 

 

After you installed your theme and all required plugins, follow these steps:

  1. Go to Appearance > Import Demo Data
  2. Click on big “Import Demo Data” button and wait until the importing process is done.Import demo data

After the import process is complete, you get all pages, images, posts and portfolio items you saw in the main Kameron demo before purchasing the theme.

After the import is done, go to Settings > Permalinks and click on the Save Changes button, to make sure all links are working.

Now all you have to do is replace the demo images and sample content with your own and change your colors if you wish to do so.

This chapter goes through all Kameron global settings and where to find them.

If you wish to change the font that is used in Kameron, follow these steps:

1. Go to Plugins > Add New
2. Search for and install WP Google Fonts (by Adrian Hanft, Aaron Brown )
3. Now go to Settings > Google Fonts and change the fonts.
4. Go to Options > Advanced and switch off “load default theme fonts”

To set a background image for a page,  follow these steps:

  • open up the page that will have a background image (except Portfolio and Blog)
  • on the right side of the screen in the General Page Settings, meta box upload your image or set a background color. You can also choose light or dark text color for this page.

If you don’t see General Page Settings, toggle open the “Screen Options” and make sure that “General Page Settings” is activated.

Add a background image for Portfolio page

background image in portfolio

If you wish to set a background image for the portfolio page, follow these steps instead:

  • Go to Theme Options > Portfolio
  • Upload an image under “Background Image”

 

navigation background image

To set a background image for your navigation, go to Theme Options > General Settings and upload it under Navigation Background Image.

Since this image moves when you scroll, it looks best if the image is long and narrow. Its height should be at least 1080px (preferably 1400px), otherwise it will repeat on big screens.

The width of the image is up you. The thing that you want to remember here is – the narrower the image the slower it will move horizontally, the longer the image the slower it will move vertically.

To change the width of the side navigation itself, go to Theme Options > Style

To add widgets to your left hand navigation area (such as social icons and text), follow these steps:

  • Go to Appearance > Widgets
  • Choose a widget from “Available Widgets” area and place it inside into “Menu Widget Area”.add widgets
  • Open the widget to add info to it.

You can customize a great deal of things trough the Kameron Options Panel, located in your admin panel menu.

( Go to Theme Options > General Settings )

Site Index – If you are using the full-screen slider/welcome page at the root of your site, you have to tell the theme which page to treat as your site index page. For example when clicking on the Logo, what page should open up.

( Go to Theme Options > Site Navigation )

Site Logo – In General Settings you can upload your custom Site Logo. Kameron logo size is 190 x 164 px.

Menu Background Image – Here you can upload a background image for your side navigation.

As well as navigation width, parallax and toggle/responsive navigation.

( Go to Theme Options > Blog )

Here you can choose weather the featured image should be shown when a single post is opened as well as other options.

( Go to Theme Options > Style )

Here you can change colors and opacities of the theme. These include pricing table, links, text color, background color and more

( Go to Theme Options > Scroll Settings > Scroll Notification )

Here you can enable and control the scroll notification pop up.

( Go to Theme Options > Scroll Settings > Scrollbar Style )

Here you change the color and size of both the vertical and horizontal scrollbar.

( Go to Theme Options > Advanced )

Default theme fonts – Switch this off if you are using custom fonts in your theme. This will help your site load faster, because it won’t be downloading the origin fonts in the background.

Custom CSS – Here you can modify the theme by typing in your custom CSS code.

Scroll Settings – manipulate the scroll intensity. Use this with caution as it will change your user site browsing experience.

Modify Portfolio URLs – This setting can be used to change the permalinks when an image is viewed in the gallery. Use this setting with caution. All the changes and its consequences will be your responsibility.

This chapter will teach you how to set up your portfolio page and galleries.

If you want your portfolio page to be the first thing people see when they visit your website, you can set your portfolio page to be your Homepage.

Go to Settings > Reading and set your portfolio page as your Front page.front page

If you imported the demo content, you already have a pre-made portfolio page and you do not need to create a new one.

  1. Go to Pages > Add New
  2. Give this page a name (ex., Portfolio) This page will contain all of your galleries.
  3. Click the “Publish” button.
  4. Now go to Portfolio > Portfolio Settings and under Main Portfolio Page select the page you just created and click on the SAVE button.

Scroll down and under Layout, you can set the layout for your portfolio page and post as well. For example, you can choose between Horizontal (demonstrated in the demo) and Masonry.

  1. Go Portfolio > New Portfolio Entry.
  2. Give this gallery a name (Engagements, Editorial, People …) 
  3. Add a subtitle (optional) to your gallery in the Sub Title area.
  4. All of the images that will appear inside this gallery need to be uploaded in the Gallery meta box by clicking on the “Add Images” button. You can “drag” the image thumbnails around to change the image order
  5. The cover image of each gallery is the Featured Image, so upload your cover image in the Featured Image area on the right side of your screen. Your featured image should be at least 500px high and preferably portrait oriented.
  6.  You can write something about this gallery in the description area if you need to.

Cover Image

For best results, your cover image should be at least 600px high. It can be any length.

Since Kameron 2.0 you can choose whether you want your portfolio page and galleries to be horizontal or vertical (masonry layout).

You can change the layout by going to Portfolio > Portfolio Settings > Layout

Let’s say you have 4 portfolio entries – Weddings, Children, Portraits, Couples. You want to change the order to – Couples, Weddings, Portraits, Children.

Here’s what you do:

Step 1

  1. Go to Settings > Intuitive CPO (if you don’t see this option in Settings, install a plugin called “Intuitive Custom Post Order”)
  2. Under “Sortable Post Types” choose what you would like to reorderIntuitive CPO
  3. Click the “Update” button

Step 2

  1. Go to Portfolio > All Entries
  2. Place your mouse cursor over the entry that you would like to move until you see the “move arrow” icon showed in the image belowarrow-move
  3. Drag and drop the entries in your preferred order.

To create multiple portfolio pages with different galleries in each portfolio page follow these steps:

  1. Go to Portfolio > Categories
  2. Create your portfolio categories (for example, Weddings, Engagement, Nature etc.)
  3. Go to Portfolio > All Entries,
  4. Open an entry and on the right side of the screen locate ”Portfolio Categories” and assign it to a specific category/categories

To see your new category portfolio page, add it to your menu (continue reading to learn how.)

Adding Categories To Menu

Now that the categories are created and galleries assigned to it, add your categories page to your menu. To do that:

  1. Go to Appearance > Menus
  2. On the right side of your screen click the “Screen Options” button and activate “Portfolio Categories”add to menu
  3. Toggle open “Portfolio Categories”, select the ones you want to use and add them to your menu.
  4. Click the “Save Menu” button

A background image and colors for your portfolio are managed in Theme Options > Portfolio, under “Style & Color”.

If you imported one of the sample contents you already have a Blog/Journal page in your Pages.

 

To create a blog page, follow these steps:

  • Create a new page (Pages > Add New)
  • give the blog a name but do not write anything in the content area

Now go to Settings > Reading and set the Posts page to your new blog page.blog page

 

Your posts are created by going to Posts > Add New.

To add a Featured Image to your post, upload it in the Featured Image metabox that is located on the right side of the screen. (just like in the portfolio)

You can change a number of blog options by going to Theme Options > Blog.

The contact form is generated by the Contact form 7 plugin that came with the theme.

 

To create a contact form, go to Contact > Add New and a form will be generated for you. Fill in the requested fields and Save.

Remember to add your e-mail address in the Mail tab!

Copy the shortcode that is generated ( it looks something like this: [contactform-7 id="49" title="Contact form 1"] ).

Now go to Pages > Add New, call it Contact and in the content area paste in the shortcode. Where ever you paste this shortcode, your contact form will appear on the live site.

A Welcome slider is a fullscreen image slider that greets your website visitors.

 

The Slider that shows up when you first visit Kameron is actually a regular page with a specific page template.

To create such slider go to Pages > Add New, give it a name, for example Welcome Slider.

Now in the “Page Attributes” metabox that is located on the right side of the screen choose Template Fullscreen Welcome Page.Template

New options will automatically appear:

1. Enter Site Options

Logo – Upload your logo image here. For best results it should be a .png file format with transparent background.

Enter Site Image – you can upload a custom “Enter Site” image here. It should be a .png format with transparent background and a little space above the image, so that it wouldn’t “stick” to your logo image.

If you don’t have an Enter Site image, you can write the text that will tell your users what to do in the “Enter Site” Text field (for example, Enter Site or Click Here, or Scroll Down).

In the Link Type drop-down choose “WordPress page” if you want the slider to lead to a specific page (like Portfolio or About Me) or choose “Custom Link” if you want the Slider to lead to a specific link (paste in the link in the Custom Link area)

In the Logo Width and “Enter Site” width fields type “50” to make sure that the graphics fill maximum of 50% of any screen size.

settings

2. Overlay/Slider Options

In the Background Slider Images area upload your images. You can select multiple images at once by holding the Command/Control key.

Last steps

When the slider is created go to Settings > Reading and set your “Front page” to Welcome Slider.

Finally go to Theme Options > General Settings and in the “Site Index” area choose which page will the user go to when she/he clicks on the logo that is in your navigation, otherwise, each time a user clicks on the logo she/he will be led back to the fullscreen slider.

Kameron theme came with Photoshop files for the “Enter Site” and “Logo” images that we used in the Green Kameron demo, so feel free to use them as guides.

You can control the slider speed and transitions in Theme Options > Fullscreen Slider.

You can create a horizontally scrolling page with blocks of text and images. You can use these elements to display your services, work process, features and more. See a live example here.

To build  horizontally scrolling page follow these steps:

  1. Go to Appearance > Page Builder, create a new template, call it, for example, Services.
  2. Now drag and drop the “Service” block from the Available Blocks into your canvas.
  3. Open up the Service block to access its options.
  4. In the Featured Image area, you can upload an icon or a small image.
  5. In the Visual Options section choose the style (dark font or light font)
  6. upload a background image.
  7. Repeat step 2 – 3 to create as many service block as you need.
  8. Now go to Pages > Add New, give it a name, click on the “Add Template” button that is located next to “Add Media” button and choose “Services”
  9. Finally set the page Template to Page: Horizontal

You will notice that in the page builder, you have 2 more blocks (Image and Text) use them as well to create interesting and creative layouts!

pricing

The pricing table shortcode may look quite long and confusing, so the best way to work with it is just to copy the following pricing table shortcode, paste it in your Page (in the Text mode, not Visual mode) and then just modify the places that you need to change.

Here is the shortcode:

Lets go trough each section:

  1. [village_wrapper] and [/village_wrapper] this is your container/box/div inside which you put the pricing tables, so that they would align nicely with each other
  2. [village_column size="1/3"] and [/village_column] this shows how may columns will this pricing table use. 1/3 means that it will take 1/3 or the screen 1/2 means that it will take hall of the screen.
  3. [village_pricing] and [/village_pricing] this shows the start and end of 1 pricing table
  4. [village_pricing_title]...[/village_pricing_title] write your pricing table title between these
  5. [village_pricing_price]...[/village_pricing_price] write the price between these. You can leave take it out it you don’t need it.
  6. [village_pricing_content]...[/village_pricing_content] here you list the content of your table. Be sure to add /// after each entry.
  7. [village_button link="YourLinkHere"]...[/village_button] this is optional, if you don’t need a button simply delete this portion of the shortcode.

If you want, for example, 2 pricing tables, you would paste in this shortcode in your page two times, but use only one 1 wrapper for both of them:

Use this shortcode whenever you want to create a button:

If you wish to use columns in any of your pages, follow these steps:

  1. Go to Plugins > Add New
  2. Search for and install “Gridable” by Pixelgrade
  3.  Now go to a page that needs columns and click on the “Add Row” button to add columns to your layout.