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 Eugene 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 Eugene theme, 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 Eugene Portfolio file (eugene-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 eugene-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 logo image by going to Theme Options > Branding

To make sure your logo image looks sharp on all devices, you will need 2 logo files (a smaller one and a bigger one).

  • The small one should be around 60px high (upload it under “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”)

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.

To add a large header image to any of your regular pages, go to Pages > Add New (or open an existing page) and upload an image in the Featured Image area.

Your header image needs to be 1100px wide to fit nicely in the header area.

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 the page title to show up, keep reading.

1. Turn OFF page title

If you do not want to have a page title in a page, set the page template to “Page Without Title”

Bring the readers attention to a special part within your content by adding a “highlighter effect”.

This is done by simply setting any part of your text in italic.

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

Portfolio is the main feature and this chapter explains how to set it up, manage and customize.

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. In the content area, you can write something about your portfolio page. (This text will show up if you activate Archive Titles & Descriptions in Portfolio > Portfolio Settings)
  4. Click the “Publish” button.

Continue reading the next chapter (Portfolio Settings) to finish setting up your portfolio page

After creating your portfolio page, you need to configure its settings.

  1. Go to Portfolio > Portfolio Settings
  2. Set the Main Portfolio Page to your portfolio page that you just created.
  3. Portfolio Archive Layout is where you choose if you want your portfolio page to be Horizontal Or Masonry.
  4. If you wrote something in your portfolio page content area, make sure that Show Archive Titles & Descriptions is set to “Enable”.
  5. When done, click “SAVE”
  1. Go Portfolio > New Portfolio Entry.
  2. Give this gallery a name (India, People, Jack & John …) 
  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 Photography Portfolio area 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.
  6.  You can write something about this gallery in the description area if you need to.
    single portfolio entry

 

If you don’t want to show the description and title box in the gallery, scroll down and set “Title & Description” to Disable Description.disable description

You can add a custom image title and description to each of your gallery images. To do that, follow these steps:

  1. Click on “Add Images” button in the Photography Portfolio area
  2. Upload or select an image that needs description
  3. Write the image caption (optional) in the Caption field and description in the Description field.

Keep the description short, to make sure that the text fits nicely. If you need to write a lot of thext, use the gallery description area at the start of the gallery instead.

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 different categories for your portfolio, follow these steps:

  1. Go to Portfolio > Categories
  2. Create your portfolio categories (for example, Colorized, Publications, 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 categories in the portfolio page you need to create at least 2 categories with at least 1 gallery in each category.

This works in the main portfolio page, not in the categories

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.

If you don’t want to display your whole portfolio page as a Front page, you can set a single, open portfolio entry to be your Front page.

To do that, follow these steps:

  1. Create your portfolio entry (Portfolio > New Portfolio Entry)
  2. Then go to Pages > Add New
  3. Give this page a name – example, “Front Page Entry”.
  4. Set the Page Template to “Single Portfolio Entry
  5. A new dropdown will show up. Choose the entry that you created in step 1
  6. Click on the “Publish” button
  7. Go to Settings > Reading
  8. Set your Front page to “Front Page Entry” (the page you created in step 3)

This chapter explains how to create your blog 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

After you have assigned your Posts page as your Blog you can start creating posts for your blog and they will automatically show up in 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)

For best results, the cover image should be 1100px wide.

You can create galleries inside your post.

Creating a simple gallery inside a post

  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.

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 meta (category, tags, comment count, post author, date.) by going to Theme Options > Blog.

“Welcome Page” is the fullscreen gallery, image or video with a logo image on top.

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 format. Check out FireFogg (works ONLY in FireFox) or Miro Converter

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 chaper to learn how to add widgets to your footer.

To activate footer in the vertical scroll pages, go to Appearance > Widgets and place any of the available widgets in the Footer area. Your Footer can hold 3 widgets.

To add your copyright information, go to Theme Options > Branding.

By default, Eugene does not come with pre-installed social icons, but you can install any social icon widget yourself.

To do that, follow these steps:

  1. Go to Plugins  > Add New
  2. Search for Social Icons (we recommend “Simple Social Icons”)
  3. Install and activate your chosen widget
  4. Go to Appearance > Widgets, locate your new widget in the” Available Widgets” area and place in the “Footer” area

 

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

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!