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 Aventine 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.download

Locate Aventine, 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 Aventine file (aventine-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 aventine-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.

Call to Action

The “Call to action” banner, located just above the footer area was designed to help your prospect clients find a way to easily get to your contact (or any other) page.

To edit this area, go to Theme Options > Branding and look for Footer: Call to action

Background image

For best results, your background image should be at least 1800 x 800 px big.

Aventine theme will automatically place a light, semi-transparent color block over your image to ensure better readability.

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

Aventine’s portfolio is its main feature and this chapter explains how to set it up and manage.

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)
  3. In the content area you can write a couple of words about this page. This text will show up if you are using the header image option. Read more here.portfolio page
  4. Click the “Publish” button.
  5. 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 Portfolio > New Portfolio Entry.
  2. Give this gallery a name (Anne & John, New York, 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.
  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 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 Masonrysingle portfolio layout

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. Now open a portfolio entry where you want to add a video
  3. Click on the “Add Images” button in the Photography Portfolio box
  4. Choose an image that will serve as your video cover image.
  5. On the right side of the popup screen you will see a Video URL field where you can paste your video link.add video
  6. Drag and drop the video placeholder image to rearrange the 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/categoriesassing 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

To add a header image for your portfolio category page, read trough the second part of capther.

Main Portfolio header image

portfolio header image

If you want to have a header image in your portfolio page, just like in the image above, follow these steps:

  1. Go to Portfolio > Portfolio Settings
  2. Make sure that “Show Archive Titles & Descriptions” is activated
  3. Now you can go to Theme Options > Branding and upload your header image in the Portfolio Header.
  4. To add/change the text that appears in the box on top of the image, go to Pages > All Pages, open the page you use as your portfolio page and edit the text there.portfolio page

For best results, this image should be landscape oriented, at least 1800×800 px big.

This is how you upload a header image for your MAIN portfolio page. To upload a header image for your portfolio category , continue reading.

 

Portfolio Category header image

You can create multiple portfolio pages by splitting up your portfolio into categories (for example, a page with only wedding galleries, a page with only engagement galleries etc.)

To create a multiple portfolio pages, follow the instructions in this chapter.category header

To upload a header image (and add a short description) follow these steps:

  1. Go to Portfolio > Categories
  2. Here you will see all the categories you have created, click on one of them
  3. Upload your image in the Image area and ad an optional description in the Description area.edit portfolio categories

If the header image, title and description does not appear after you followed the steps above, go to Portfolio > Portfolio Settings and make sure that “Show Archive Titles & Descriptions” is checked.

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. 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 in Aventine 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:

  1. Regular –  post title on top, post image underneath it
  2. Classic – post image on top, title and excerpt next to each other under the image
  3. Masonry – 3 column masonry layout.

You can test and choose a layout for yourself by going to Theme Options > Blog.

After you have assigned your Posts page 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 metabox. (just like in your portfolio)

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). See an example of this here.

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 SETTING area set the columns, 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 like in this example or similar, 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 settings by going to Theme Options > Blog. There you can:

  • Choose your blog layout – Regular, Classic or Masonry
  • Enable/disable the blog sidebar
  • Activate or disable your blog meta data – Category, tags, comment count, post author, date

“Welcome Page” is the fullscreen video (or a static image) with a logo image on top that you see when you visit Aventine 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.

 

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. Upload both WebM and MP4 video file formats in their designated places.upload videos
  3. Upload a Background Image under “Background Image”.
  4. Click on the “Save Changes” button.
  5. 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)

 

To upload a Background Image:

  1. Go to Theme Options > Welcome Page
  2. 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 under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.

  1. 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)

 

If you don’t want to a background video, you can upload only the background image to serve as your Welcome Page.

You can have a sidebar in your blog and post pages. This chapter will cover the creation of the sidebar and where to find widgets.

To activate a sidebar in your blog page, follow these steps:

  1. Go to Theme Options > Blog
  2. Set “Sidebar” to Enable in Blog or Enable in Blog and Posts
    1. Enable in Blog will enable a sidebar only in your Blog page
    2. Enable in Blog and Post will make the sidebar show up not only in your blog page but also in a single post page.
  3. Now go to Appearance > Widgets and place any of the available widgets in the Sidebar area
  4. Now you will see a sidebar in your Blog page.

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

To get a large footer with widgets inside it, go to Appearance > Widgets and place any of the available widgets in the Footer area.

To modify the Call to Action banner just above the footer, read this chapter.

  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.

There are a couple of strict steps you need to follow in order to create a services page, so please read carefully.

  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 brackets button located above the main content area.columns

  • Choose any column layout available there and click on it.
  • You will see that you get a little shortcode in your content – for example [one_half][/one_half]
  • Place your 1st column text in between the shortcode.

  • Then in a new line click on the bracket button again, choose your second column to generate another shortcode and place your second column text in between that and so on!

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.callout text

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 regarding Aventine.
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! photection plugin