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 theme download, installation, and basic Horizon theme setup.

After purchasing this theme download your purchased 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 Horizon Portfolio, 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 Horizon Portfolio file (horizon-portfolio.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 horizon-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 completed 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 personal logo image by going to Theme Options > Branding

Horizon theme has a couple of logo rules you should follow for best results:

  1. You will need a light logo (for example white) and dark logo (for example black).
    • “Site Logo”  will be used in pages without image backgrounds so it should be in a dark color.
    • “Invert Site Logo” will be used in pages with page backgrounds so choose a logo color that looks well in those situations.
  2. To make sure your logo image looks sharp on all devices, you will need 2 logo sizes (a smaller one and a bigger one).
    • The small one should be around 60px high (upload it under “Site Logo” and “Invert Site Logo”)
    • The bigger one should be exactly 2x bigger. If your smaller logo was 150x60px then your bigger logo image should be 300x120px (upload it under “Site Logo @2x” and “Invert Site Logo @2x”)

100 free logo templates

You can add your copyright information by going to Theme Options > Branding. Scroll to the bottom of the Branding options panel and look for Footer: Copyright.

Go to Theme Options > Style to change basic theme colors to better suit your personal brand.

Pages in WordPress are static documents. They are a good way to publish information that doesn’t change much, like an About page, Contact page, Services page etc. Portfolio and blog is not considered a “regular” page in this theme.

In this chapter, we will look at three ways you can style your pages.

By default when you create a new page (Pages >Add New) your page title will show up at the top of your page.

If you do not want to have a page title on a page, locate the Page Attributes box on the right side of your screen and set the page template to “Page: Disable Title”

If you do not want to have a page with a large, full-screen image at the top of the page, locate the Page Attributes box on the right side of your screen and set the page template to “Page: Top Featured Image”.

If you do not want to have a page with a large image on the left side of the page, locate the Page Attributes box on the right side of your screen and set the page template to “Page: Left Featured Image”.

This chapter explains how to set up and manage your portfolio pages.

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.
  1. Go to Portfolio > New Portfolio Entry.
  2. Give this gallery a name (Adventure, New York, People …) 
  3. 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
  4. 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.
  5.  You can write something about this gallery in the description area if you need to.

 

You can choose between Horizontal layout 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 Horizontal or Masonry

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, Events, Personal, Active 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

You can add Vimeo and Youtube videos to your portfolio entries.

 

To do that, follow these steps:

  1. Go to Portfolio > Portfolio Settings and change Pop-up Gallery to LightGallery
  2. Open a portfolio entry where you want to add a video
  3. Click on the “Add Images” button
  4. Choose an image that will serve as your video cover image.
  5. In the Video URL field paste in your video.
  6. Click on the “Use These Files” button.
  7. You can drag and drop the video placeholder image to rearrange it.

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

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.

This chapter explains how to create your blog in Horizon and how to choose a blog layout.

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

You choose between 3 blog layout styles: Modern, Masonry or Classic. You can test and choose a layout for yourself by going to Theme Options > Blog.

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)

Bring more attention to your blog post by making some of the title words bolder than others. To do that you will need to place the word/-s  in between <strong> </strong> tags. It should look like in the image below.

 

You can create beautiful galleries inside your post. This is especially useful if you need no showcase a particular photo session.

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.

You can access blog settings by going to Theme Options > Blog. There you can:

  • Choose your blog layout –  Modern, Masonry or Classic
  • Activate or disable your metadata – Category, tags, comment count, post author, date.

“Welcome Page” is the fullscreen gallery, image or video with a logo image on top that you see when you visit the site for the first time.

If you enable Welcome Page in Theme Options > Welcome Page, it will automatically show up when someone first visits your site. After clicking on it, the visitor will be directed to the page that you set up as your front page in Settings > Reading.

 

To upload a single Background Image:

  • Go to Theme Options > Welcome Page
  • Look fo Welcome Screen: and set it to “Image”
  • Upload an image under Background image

Since the image will be covering the whose screen, it should be landscape oriented and around 1920x1080px big. To ensure speedy loading the image should be well under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.

  • Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

  • Select an appropriate background color. This color will show up while your image is loading in the background. The closer the color to your image overall color the smoother the transition will be.

To upload multiple images (a slider gallery):

  • Go to Theme Options > Welcome Page
  • Look fo Welcome Screen: and set it to “Gallery”
  • Upload your images under Gallery.

For fast load speed use no more that 3 images.

Since the image will be covering the whose screen, it should be landscape oriented and around 1920x1080px big. To ensure speedy loading the image should be well under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.

  • Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

  • Select an appropriate background color. This color will show up while your image is loading in the background. The closer the color to your image overall color the smoother the transition will be.

Video background rules:

  • Video backgrounds (autoplay videos) will only show up on desktop devices. Tablets and mobile devices will not show the video background, instead these devices will show a Background Image that you need to upload as well. If you are wondering why it works this way – you can read detailed explanations here and here.
  • The video background should be as short as possible (about 10 sec long) since the shorter the video the faster it will load
  • There should be no sound
  • Minimum size should be 852 x 480 but if possible you can use 1920×1080
  • You will need 2 file formats for the video background – MP4 and WebM

There are a lot of tools to convert videos to WebM and MP4 formats. Check out CloudConvert. It can do both formats.

To upload a video background, follow these steps:

  1. Go to Theme Options > Welcome Page
  2. Choose Video as your Welcome Screen.
  3. Upload both WebM and MP4 video file formats in their designated places.upload videos
  4. Upload a Background Image under “Background Image”.
  5. Click on the “Save Changes” button.
  6. Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background.

Read this chapter to learn how to add widgets to your footer.

To add the Instagram image strip in your footer, follow these steps:

  1. Go to Appearance > Widgets
  2. Place “Instagram” widget inside Instagram Footer
  3. Set it up just like in the image below (except in Username field type your own Instagram username)

Horizon theme can accommodate 1 – 6 widgets but it looks best when using no more than 3 widgets in the footer area.

To add widgets to your footer, go to Appearance > Widgets and place any of the available widgets in the Footer area.

Large text in the footer area.

To make text bold and large in your footer area, follow these steps:

  1. Go to Appearance > Widgets
  2. Place “Text” block inside the Footer area
  3. Place all information that should be bold in between <b> .. </b> tags

To break the text in multiple new rows, type <br> (it stands for “break”) at the end of each row.

  1. Go to Contact > Add New
  2. Fill in your email information in the “Mail” tab, otherwise, you won’t receive e-mails!!
  3. Click the “Save” button at the top of the page
  4. Copy the shortcode generated for you at the top of the pagecontact form shortcode
  5. Paste this shortcode into the page where you want your new contact form to show up.

Both Services and Testimonials are created using the same theme elements – the Services Block.

To create your services, follow these steps:

  1. Go to Pages > Add New
  2. Give your page a name (ex., Services)

Creating a service block

  1. In your new service page, click on the “Add Post Element” button, right next to the Add Media button.
  2. Choose Services Block
  3. Fill out the form presented to you there and then click on the INSERT ELEMENT button
  4. To add another services element, just repeat steps 1 – 3.

In this chapter you will learn how to add columns to your page or post layouts and how to create buttons and callout text.

If you wish to use columns in any of your pages, go to the page that needs columns and click on the little “Add Row” button located above the main content area.

If you do not see the “Add Row” button, go to Plugins > Add New and search for and install “Gridable” plugin.

To bring attention to some part of your content you can style it as a “Callout text”. Such text will appear in a slightly larger type size.

To create such text style in a post or page, click on the Add Post Element button and choose “Callout Text”.

add post element

 

If you need to place a button somewhere in the content, click on the Add Post Element located above the main content area, next to Add Media button and choose the Button element.add post element

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!