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.

 

 

NOTE: The original images are not included in the demo import due to licensing restrictions. All images will be replaced with sample images instead.

We introduced 1-click demo import in Kameron 1.5.0.

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

  1. Go to Theme Options > Demo Importer
  2. You’ll be able to choose between 3 demo import types – Green, Dark and White. Choose only one!demo import

Click on the “Import Demo” button and wait until the importing process is done.

This chapter covers theme download, installation, sample content import, menu and front page assigning and theme options import.

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 metabox 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
  • Locate “Style & Colors”
  • 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.

Responsive Logo – Here you have also can upload a Responsive Logo (if for example you want a different logo to show up on mobile devices) If you want the same logo s on desktop devices, don’t upload anything here.

Navigation 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 > Portfolio )

Here you can change a number of colors and opacity for your portfolio description overlay, switch the title and description off and upload a background image for your portfolio page/pages.

( Go to Theme Options > Gallery )

Here you can choose gallery image style, transitions, switch on/off descriptions, add social sharing and more, so just go and check it out!

( 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 > Fullscreen Slider )

Here you can control the fade and slide duration as well as basic transitions.

( 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.

If you imported one of the demo contents, you already have a portfolio page in your Pages.

Go to Pages > Add New, give it a name (in this example, Portfolio) and set its page template to “Portfolio”. Do not do anything else here.


All color and background image settings can be found by going to Theme Options > Portfolio

To create a gallery, go to Portfolio > Add New, give your gallery a name, for example “Wedding” ( 1. ).

The image that appears in your Portfolio page is the Featured Image, so upload your main/featured image in the Featured Image metabox ( 2. ). This image should be at least 560px high. The width of the image is up to you, since the image will not be cropped.

The description that shows up when you move your cursor over the image is written in the main content area ( 3. )

All of the images that will appear in this gallery need to be uploaded in the Gallery meta box by clicking on the blue “Add Image” button. You can switch between thumbnail view and list view of your uploaded images by clicking on the icons next to “Add Image” button.

To add a description, caption and Video URL for each or some of the images, place your cursor over one of your images until you see a pencil icon appearing.

Click on it to add your caption and description for this image. The gallery will show the text that’s written in the Caption and Description fields.

 

You can add Youtube and Vimeo videos to your galleries.

  1. Open up your portfolio entry and click on the blue “Add Image” button
  2. Upload an image that will serve as your video cover image
  3. When that is done, hover your cursor over this image until you see a pencil icon appear
  4. Click on the pencil and locate a field called “Video URL”, paste your link there.

You might want to have a page with only “Editorial” galleries, another page with “Wedding” galleries and another with “Personal” or “Models”. This is done you using Projects.

Go to Portfolio > Projects and in the “Name” field write in each of your “Projects” (separately). For example, Personal and Editorial.

Now open up each of your galleries and assign them to one of these projects.

To add these specific project galleries to your menu, go to Appearance > Menus, toggle open “Projects” and click the “Add to Menu” button.

You can see an example of “Image Strip” portfolio style in the Dark Kameron demo on Theme Forest. ( http://dark.kameron.themevillage.net/projects/portraits/ )

To create such a layout, follow these steps:

  1. Go to Theme Options > Portfolio and turn OFF “Enable Portfolio Descriptions”
  2. Go to Portfolio > New Entry
  3. Give this entry a name (ex. Portraits)
  4. Click on the blue “Add Image” button and select all of the images that will show up in this portfolio strip
  5. DO NOT upload a featured image in the Featured Image area. Leave it empty.
  6. If you plan to create multiple image strip pages, assign a Project to this entry (read more on chapter 4.2 )
  7. Click the “Publish” button

A background image for your portfolio is uploaded trough Theme Options > Portfolio, under “Style & Color”. Here you can also change the description overlay color, opacity or switch off the description and title completely

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. Do not do anything else here.

Creating posts

Now start creating your posts 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.

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 use the 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.

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.

enter-site

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.

Some of the pages you saw in Kameron demos were built in a simple page builder.

These pages include:

  • Services page from Green Kameron
  • Process page from Dark Kameron
  • Tips & Services page from White Kameron.

To build a page like that follow these steps:

  1. First 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. In the Featured Image area you can upload an icon or a small image. We used Ionicons ( http://ionicons.com/ ) and Simplicity Icons ( http://www.webiconset.com/simplicity-vector-icon-set/ ). In the Visual Options section choose the style (dark font or light font) and upload a background image.
  4. Repeat step 2 – 3 to create as many service block as you need.
  5. 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”
  6. Finally set the page Template to Page: Horizontal

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:

To arrange something in sets of columns use this shortcode:

size=” “:

  • 1/2 ; 1/3 ; 1/4 ; 1/6
  • 2/3 ; 2/4 ; 2/6
  • 3/4 ; 3/6