Welcome to Nikko Photography portfolio documentation!

Here you will find everything you need to know about your new WordPress theme.

After purchase, download your new theme file 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 Nikko Pro, click the “Download” button and choose “All files & documentation” and save the package on your computer.

UNZIP the package you just downloaded.

Inside you will find a copy of this documentation, license, purchase code and a zipped Nikko Portfolio Pro file (nikko-portfolio-pro.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 nikko-pro-portfolio.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.

Installing Plugins

  • After successful theme installation, you will be presented with a set of plugins which were used in the live theme preview.plugins
  • 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 ThemeForest demo before purchasing the theme. Now all you have to do is replace the demo images and sample content with your own.

This chapter contains information about basic theme controls and their location so please read this chapter to avoid any confusion and get to know your theme better.

You can upload your logo image by going to Appearance > Customize > Site Identity

Upload your logo image and delete any text that might be in the Site Title and Tagline fields.

Useful Logo Information

  • Your logo can be any size and shape, but for best results, it should be about 180px in height.
  • Your logo should be a .png file with a transparent background
  • If you are looking for a new, free logo, you can check out our 100 free photography logo templates here.
  • If you loved our “Nikko Jonas” hand-written calligraphy logo – send a mail to [email protected] and we will design one just like that for you! (logo service cost – starting from 25€)

To upload a custom background image for your website, go to Appearance > Customize > Background image.

Nikko “Default” background is set to a dreamy, dusty pink mountain scene that you are free to use as your own but if you want to change that, click on “Change Image” and upload your own image.

You will be presented with multiple customization options for your background image.

Nikko Portfolio theme comes bundled with Elementor Page Builder (free version). It is a powerful content creation tool and we used it to create the Nikko homepage.

Elementor page builder is not made by Colormelon, so in this documentation, we won’t be explaining how it works exactly, but luckily the internet is full of useful Elementor guides. Here are a couple of links you might find useful:

Nikko Pro homepage was built using Elementor page builder.  In this chapter, we will go through each element you saw on the homepage, but if you want to learn more about Elementor and how it works – click here.

If you used the one-click demo import, you should have the exact same layout you saw in the demo.

To explore your Elementor homepage, go to Pages > All Pages and open Home. Then click on the large blue Elementor button to enter edit mode.

If you want to create a layout like you saw in the demo, we advise that you either import the demo content or download and import the Elementor Homepage template and then edit it to replace the demo content with your own.

 

Let’s look at the elements that built up Nikko Portfolio Pro homepage, but to do that, first make sure that you have Elementor and Elementor for Nikko Portfolio installed and activated.

If you don’t have one or both of these plugins, go to Appearance > Install Plugins and install them.

Homepage Setup

Either you plan to build a homepage from scratch or just edit the existing homepage, make sure that the page Template is set to Blank Canvas (in the Page Attributes area).

Then click on the blue ” Edit with Elementor” button and you will enter the edit mode.

The slider demonstrated in the Nikko Portfolio Pro homepage is called Triple Slider and it was custom designed for Nikko theme.

To edit it, click on each image holder and upload your images. All images that are inside the same slider should be the hight and width. To make it easier for you to prepare your images, we made 3 Photoshop files (one for each slider box).

Download triple slider image templates here.

Note that the logo graphic in the first slider is a part of the image, so you can replace it with your own logo or delete it while you’re preparing your images in Photoshop.

After the slider comes “Welcome Text” block that consists of a Heading element and two Text Editor elements (one for content and one for link)

  • The heading is set to Heading One (H1)
  • The content has some text styles applied to it and it can be edited in the Style tab.
  • And the Read More link is edited as well

 

The tree blocks after the Welcome text are three “Image box” elements placed in three columns.

Content settings: see image below

Note that all three images are the same height and width.

Style settings: see image below

The testimonial was created by using the Testimonial element.

The content font was adjusted to fit the theme design better. You can see the font settings in the image below.

The last block on the Homepage actually consists of two elements – text and image.

The section was split into two columns (1:2), in the smallest column we placed title and text elements. In the largest column, an image was placed.

Nikko Pro portfolio is one of the theme’s main features and this chapter explains how to set it up, manage and customize it.

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.

Under Layout, you can set the layout for your portfolio page and post as well. For example, you can choose between Grid Layout (demonstrated in the demo) and Masonry with hover.

  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 Images

Nikko Pro portfolio page is using a styled grid layout. This means that it will crop your gallery thumbnails. If you need control over how your images are cropped, we suggest preparing them beforehand. Using photoshop or any other image editing program, crop your cover images to about 400x500px in size.

 

While you’re at it, consider decorating your cover images, to give the final look a bit of flair. For example, we decorated some of our cover images with a free font called Loveletter No.9 and some gold dust glitter from Creative Market.

You can choose between a Slider Gallery or Masonry layout for your portfolio galleries.

To do that, follow these steps:

  1. Go to Portfolio > Portfolio Settings
  2. Locate “Single Portfolio Layout” and set it to either Slider Gallery or Masonry.

If you’re not using a Homepage like in our Nikko Pro demo, 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

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

This chapter explains how to create your blog in Nikko.

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

  1. Create a new page Pages > Add New and give the blog a name (for example “Blog”), DO NOT write anything in the content area.
  2. Go to Settings > Reading and set the Posts page to your new blog page.blog page

After you have assigned your Posts page as your Blog you can start creating posts for your blog and they will automatically show up on your blog page.

To create a post:

  1. Go to Posts > Add New
  2. Give your post a name
  3. The main text goes into the main content area.
  4. Upload a cover image for your post inside the Featured Image area. (just like in your portfolio)

There are a couple of creative ways you can display images in your blog posts and pages. This chapter will show you how to do it.

A full-width image is an image that is wider than the page or post content.

To set an image to be fullwidth, follow these steps:

  • In any post or page click on the “Add Media” button and upload an image.
  • Click on the image and then click on the little pencil icon
  • In the “Image CSS Class” field type in full-width
  • Click on the Update button.

You can create beautiful galleries inside your post. This is especially useful if you need no showcase a particular photo session (such as “Jane and John” wedding).

Creating a simple gallery inside a post

See example of a simple gallery.

  1. Open a post in which you need a gallery
  2. Click on the “Add Media” button
  3. Click on “Create gallery” linkcreate-gallery
  4. Select the images that should be in the gallery (for best results, these images should be the same height.)
  5. Click on the “Create a new gallery” button
  6. In the GALLERY SETTINGS area set the column count, set “Link to” None (if you don’t want them to be clickable) or “Link to” Media File (if you want them to open up in a fullscreen slider), and set the size to what’s appropriateadd gallery
  7. Click on the “Insert gallery” button

When creating a galley, all images will show up in 1; 2; 3; 4 …. or 9 columns. If you want your images to show up in a more complex layout, you will need to create multiple galleries – 1 for eash column. Keep reading to find out how.

Creating a mixed gallery inside a post

To create a gallery where some of the images appear in 1 column, some in 2 or 3 columns, each column will need its own gallery. See an example here.

To do that follow the steps 1- 7. that are described above, but:

  • If the first image (or a couple of the first ones) should be in one column, you select only these images and set the column count to 1.
  • If the next 2 images should be next to each other, create a new gallery under the first one, select these two images and set the column count to 2
  • continue in this way until you’re done.

Add a little visual interest to your content by adding a rounded image somewhere in your content.

To create a round image, follow these steps:

  • In any post or page click on the “Add Media” button and upload a SQUARE image.
  • Click on the image and then click on the little pencil icon
  • In the “Image CSS Class” field type in image-circle

Nikko theme is using “Ninja Forms” to create its contact form.

To edit the existing form or create a new one go to Ninja Forms > Dashboard

Learn how to build a contact form here.

Read this chapter to learn how to add widgets, Instagram and copyright to your footer.

To add an Instagram image strip, follow these steps:

  • Go to Plugins > Add new
  • Search for and install “WP Instagram Widget”
  • Now go to Appearance > Plugins
  • Locate “Instagram” widget and drag-and-drop it inside the “Instagram Footer” area
  • Fill out the settings like shown in the image below (except, use your own Instagram username)

Add your copyright text and/or Impressum in the footer.

To do that, go to Appearance > Widgets and place the “Text” widget inside the “Footer Copyright Area”. Write your text in the content area and leave the Title area empty.

If you need to add extra widgets to your footer (recent posts or comments, text, categories etc. ) you can do so by going to Appearance > Widgets and placing your widgets in the “Footer Widget Area”.

Events are created by using a WordPress plugin. If you need events on your website, follow these steps:

  1. Go to Plugins > Add New
  2. Search for “Very Simple Events List”
  3. Install and Activate this plugin

Now that you have the event plugin activated, you need to configure a few settings and create an Events page.

  1. Go to Settings > VSEL (Very Simple Events List)
  2. And check Page title and summery settings. You can go read through other settings on this page and activate anything else you need for your Evens list.
  3. Remember to click on the Save Changes button when you’re done.
  4. Now go to Pages > Add New and give this page a name (for example, Events)
  5. In the content area type in [vsel] – this will make your events appear on this page.
  6. Set the page template to Black Canvas
  7. Publish page and add it to your Menu. (Appearance > Menus)

Finally, you’re ready to create your Events.

  1. Go to Events > Add New and fill out all the necessary fields.

All upcoming events will show up on your Events page. Events that have already happened will automatically disappear from your events page.

FAQ

Here we answer some of the most frequently asked questions.
If you do not find the answer to your question here or in the rest of the documentation, please visit our support forum.

Prevent people from stealing your work. They do that by right-clicking on your images and choosing the “Save Image As…” option.

We created a plugin specially for this, it works great with all our themes and its free!

Follow these steps:

  1. Go to Plugins > Add New
  2. Search and install “Photection” by Colormelonphotection
  3. After you installed it, go to Settings > Photection and add a custom message that shows up when someone Right-clicks on an image! 

If you’re stuck and can’t find the answer to your question in this documentation or if you found a bug that needs fixing, head straight to our Support Forum and create a new support topic. We will talk soon!