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, sample content import, menu and front page assigning and theme options 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 (of course after you`re logged in Themeforest) and then click Download.

Here you will find all the items that you have purchased. Locate Camilla, click the “Download” button and choose “All files & documentation” and save the package on your computer.

cam-download

UNZIP the package you just downloaded.

Inside you will find this documentation, license and a zipped Camilla theme file (camilla.zip) that you will need to install onto your WordPress.

Here’s a short video showing you how to install the theme and import the demo content.

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

Clicking on ‘Begin installing plugins’ .

Then select all of the plugins in the plugin list and bulk install them like shown in the screenshot below.

 

NOTE: Images are not included in the demo import due to licensing restrictions. All images will be replaced with black image holders.

Since Camilla 1.9.0 demo import is super easy and fast.

After you installed your Camilla 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 4 demo import types – Starter Theme, Light Theme, Dark Theme, Red Theme. Choose only one!demo-import

If you liked one of our 3 demos (Light, Red or Dark) choose and import the corresponding demo.

 

If you would like to start fresh and build the theme yourself, we strongly advise that you import Starter Theme. That way all the core settings will be assigned automatically (page builder setup, front page, blog page, menu) as well as one portfolio entry and one blog entry will be created for you to help you along.

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

Follow the steps described in this article ONLY IF you decided that you do not want to use the 1-Click demo install option and import the demo content manually instead.

Camilla theme comes with all 3 demo contents (Light, Dark, Red). The images from these demos are not included in the sample content.

To upload the sample content, follow these steps:

  • Go to Tools > Import
  • Choose “Wordpress” and
  • Upload one of the Camilla Demo.xml files which came with the theme when you purchased it (If you want the Light Camilla layout, you choose Camilla Demo – Light.xml end so on.)
  • After that, go to Theme Options > Core Settings
  • Set the “Generate Menu From:” to One Page Menu and “Select the One-Page Page” to One-Page page.

core settings

  • Now go to Appearance > Menus and assign the menu that you see there as your Primary Menu and click “Save”.

assign menu

  • Lastly go to Settings > Reading , choose the Front Page Displays A static page option and set Front page: One-Page page and Posts page: Diary (or Journal, or Blog depending on which demo you imported).

settings>reading

 

Importing Theme Options

Things like colors, styles, portfolio thumbnail width, gallery settings etc. are imported trough Theme Options. To import theme options from a specific demo, follow these steps:

  1. Go to the same folder in which you found the Camilla Demo.xml files and in this folder you will see another folder called Theme Options.
  2. Open it up and choose one of the Camilla Settings.json files
  3. Open one of the .json files up (this can be done in TextEdit or similar text editing program).
  4. You will see lines of text/code, select it all and copy it.
  5. Now go to Theme Options > Import/Export click on the “Import from file” button and paste in the copied .json code, then click the “Import” button.


You can customize a great deal of things trough the Camilla Options Panel, located in your admin panel menu.

(Go to Theme Options > General > Branding)

Site Logo – In General settings you can upload your custom Site Logo. Your logo image shouldn’t go over 300px width and 100px height. The Camilla logo is 120×70 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 on desktop devices, don’t upload anything here.

(Go to Theme Options > General > Blog)

Layout Style: Disable / Enable the sidebar for your blog

Display Post Categories and/or Post Tags

Use WordPress Excerpts: By turning OFF WP Excerpts your blog page will show the full post content (except the comment area) so that your user doesn’t have to open the post to read it. (See example of this in Red Camilla demo)

The Loading Screen is used to notify your visitor that the site content is loading and will be visible when the bar hits 100%

loading-screen

In the Loading Screen panel you can:

  • Disable the loading screen if you don’t want it
  • Enable/Disable the logo graphic
  • Upload a logo graphic
  • Customize the loading screen fade transition
  • Change the Background Color
  • Foreground Color (the loading bar and percentage color)
  • Options for the progress/loading bar

( Go to Theme Options > One-Page )

The settings in this panel refer to the things that are within the One-Page layout.

Core Settings

( Go to Theme Options > One-Page > Core Settings )

This could be called the core of Camilla theme. These settings were assigned automatically if you used the 1-Click demo install option. core settings

Page Navigation

( Go to Theme Options > One-Page > Page Navigation )

The page navigation refers to the left and right arrows on the sides of the screen and the animations that take place when you click on these arrows.

( Go to Theme Options > One-Page > Scroll Notification )

The Scroll Notification refers to the pop-up message that shows up when you go to a horizontal page layout (portfolio, horizontal content page)

In this panel you can write a custom message that will appear when in horizontal layout pages and change the color or light or dark style.

( Go to Theme Options > Portfolio  )

The portfolio entries themselves are created in Portfolio > New Entry but here you van customize the look and functionality of the portfolio page itself as well as the gallery that shows up when someone clicks on your portfolio entry.

Thumbnail Settings

( Go to Theme Options > Portfolio > Thumbnail Settings )

Here you can:

  • Set a specific Height and width of your portfolio thumbnail
  • Thumbnail height on a mobile device
  • Thumbnail overlay color

Galley Options

( Go to Theme Options > Portfolio > Gallery )

Here you can choose:

  • gallery image fit style,
  • transitions, 
  • switch on/off descriptions,
  • Turn on/off the thumbnails
  • add social sharing
  • … and more

( Go to Theme Options > Colors )

Here you can change a number of colors and opacity for the site. These include:

  • Background Color
  • Gallery Colors
  • Page-to-page Navigation Colors
  • Menu (Header) Colors
  • Text Colors
  • Pricing Table Colors
  • Button Colors
  • … and more

colors

( Go to Theme Options > Advanced )

Project Types Taxonomy for Portfolio If you plan to create multiple portfolio pages with specific entries in each page, turn this setting ON.

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.

(Theme Options > Demo Importer)

Read 1-Click Demo Import to learn how to use this setting.

NOTE: You should choose and import ONLY ONE of the 4 demo contents!

If you imported one of the demo contents and decided that you want to use another one instead, first Reset your WordPress to a fresh start by using WordPress Reset plugin.

Then activate Camilla theme again and only then import the new demo content.

If you imported the sample content you already have a One-Page layout and you do not need to follow these steps. Continue on to Use The Page Builder.

Even though Camilla looks like a multi-page site, in the backend it actually is one-page site where you can navigate back and forth by using the arrows n the sides of the screen. We call this layout “One-Page layout” and in this chapter you will learn how to set it up properly.

The very first thing you need to do is create a new page (Pages > Add New) and call it, for example, “One-Page page”. Set its template to “Page: One-Page Layout”.

set page template

Now go to Theme Options > One-page > Core Settings and in the “Select the One-Page Page” area select the page that you just created.

select one-page page

The page order itself is achieved by using the Page Builder. You can find it under Appearance > Page Builder.

The first thing you do here is give a name, example – One Page Menu, to the layout you’ll be creating and “Save Template” button and copy the template-id that was generated after you saved.

creating a page builder template

Navigate back to the page that you called One-Page Page and paste in the template id there.

paste-id-in-one-page

Finally go back to Theme Options > One-Page > Core Settings, locate Generate Menu From: and assign to it the “One Page Menu” Page Builder template that you created.

This is important because now your menu will automatically generate itself in Appearance > Menus, while you create your page order inside the Page Builder.

The last thing you need to do is navigate to Settings > Reading and set the One-Page page as your Front page.

set your front page

Now you can start to arrange the order of your One-Page layout, but of course first you need the pages themselves.

So go to the Pages > Add New and create all the pages you’ll want in your layout (like About, Pricing, Contact … ) except portfolio..that is done a bit differently. Read more about it in chapter “Portfolio”.

When that is done, go back to Page Builder (Appearance > Page Builder) and drag-and-drop “Section” block inside your canvas, click on the cog icon and give this section a name. Whatever name you will give it, this name will appear in your main navigation.

use Section block for each page

Inside the Section you can place:

  1. the “Page” element where you can choose which of you page will show up
  2. the “Slider” element where you can upload multiple images and create the Home slider.
  3. the “Portfolio Entries” to display some or all of your portfolio entries (you need to create the portfolio entries first for this to work. To see how, read the Portfolio chapter)

Place other elements inside the Section block

 

How to add a Page to the Page-Builder

To create your homepage slider go to Appearance > Page Builder. Place a new Section block inside your page builder and then place the Slider element inside it.

Slide Settings

Since theme version 2.1 Camilla slider has new slider controls. slider settingsThese include:

  1. option to disable image cropping (if you do not want your image to fill the screen of any device therefore cropping your image a bit, activate this feature)
  2. image anchor position (if the main element in your image is in the top left corner, click on the arrow in the top left corner to prevent your slider from cropping that area.)
  3. slide settings (duration, transition effect and speed)
  4. kenburns effect (this effect looks as if you are slowly zooming in or out of the image.)

Adding a new slide

To add a new slide, click on the “Add New” button located under the last slide you created.

It is really easy to set a background image for one or more of your pages, you just do the following:

  1. Go to Appearance > Page Builder and locate the Section inside which is the page that needs a background image. For example, “Contact” page 
  2. Click on the blue cog icon to open the Section blockOpen section block
  3. Upload your background image under “Background Image” and set whether you want a light or dark text for this page in “Style Preset”

Upload background image

 

Scalable Background Image

There are situations when you need your background image to scale together with the browser window in a way that it’s not cropped. You can see this in the Red Camilla demo,. In this example it is important that the background image does not get cropped on smaller screens because it contains the man’s face.

To achieve this, place the image as a regular background image (see above). The only difference is that in the ‘Custom CSS Class’ field you write background-cover

background-cover

The portfolio in Camilla is group based, meaning that you can create multiple groups that hold many images. These groups can, of course, be grouped/categorized however you like.

Go Portfolio > Add NewGive this gallery a name (Weddings, Anne Marie, People …)

The cover image of each gallery is the Featured Image, so upload an image as a Featured Image (the size of this image is specified in  Theme Options > Portfolio and you can change it however you like).

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.

portfolio

You can switch between thumbnail view and list view of your uploaded images by clicking on the icons next to “Add Image” button.

portfolio thumbnail view

Since Camilla version 2.1.5 you can upload a separate portfolio cover image that will be displayed on mobile devices.

cover images

To upload a different cover image for each portfolio entry:

  1. go to Portfolio > All Entries
  2. Open a portfolio entry
  3. Locate Featured Image: Mobile metabox and upload an image theremobile image

We recommend that you either crop your original image to a square or use a landscape-oriented image.

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

add description add description 2

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.

To do that follow these steps:

  1. Open an existing gallery or create a new one.
  2. Click on the blue “Add Image” button in the Gallery meta box.
  3. Upload an image that will be your video cover image.
  4. Then place your cursor over this image until you see a pencil icon appear.
  5. Click on it and paste your video URL address in the “Video URL” field.

uploading a video in portfolio

Camilla galleries can display your images in four ways – None, Contain, Cover and Scale-down.

You can access this setting by going to Theme Options > Portfolio > Gallery and choosing your style under “Image fit Style”.

See all four image fit style explanations here.

After all your galleries are created, go to Appearance> Page Builder, add another “Section” to your one page layout, click the blue cog icon, give it a name and set the Section Style to Horizontal Scroll Page. Drag-and-drop the “Portfolio Entries” element inside the Section.

adding portfolio to site

If you want to display on your Portfolio page only 3 (or less) Portfolio entries, and you want them to fill up the entire width of the screen without leaving any blank space on the right side (if you have less than 3 Portfolio entries) and without having to scroll through them, then go to Appearance > Page Builder, click on the blue “cog” icon next to your section which holds the Portfolio entries, and set the “Section Scroll Direction” to “Disable Scroll”, then save the template.

  1. Create a new page Pages > Add New and give the blog a name.
  2. Go to Settings > Reading and set the Posts page to your new blog page.posts page - your blog
  3. Now start creating your posts by going to Posts > Add New.

Blog is the only page that is designed to be a separate page, not a part of the one-page layout. 

To do this, navigate to Appearance > Menus and add your blog page to the menu, make sure that the menu is set as Primary Menu and Save.

add blog to menu

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

  • change Layout Style – Disable / Enable the sidebar for your blog
  • Display Post Categories and/or Post Tags
  • Use WordPress Excerpts – By turning OFF WP Excerpts your blog page will show the full post content (except the comment area) so that your user doesn’t have to open the post to read it. (See example of this in Red Camilla demo)

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 regular form will be generated for you.

If you want your contact form to look like the one in Camilla demo (with thin lines, italic text and centered send button) do the following:

  1. Create a new form or open an existing one
  2. Replace the automatically generated HTML code that you have there with the following one (click on the “copy” icon in the right corner of the following code area):

This HTML will add custom styling to your regular form.

horizontal-content-blocksThe horizontal content block can be used in various creative ways – for service descriptions, portfolio gallery descriptions etc.

This block is created directly inside the page builder.

  1. Go to Appearance > Page Builder,
  2. place the “Section” block inside your One Page Menu canvas.
  3. Click on the Cog icon and give it a name, for example ‘Resume’
  4. set the Section Scroll Direction to Horizontal.reume
  5. Now place the Horizontal Content Block inside your new Section and open it up.place-HC-block-inside-section

You need to give this block a width (in pixels), just write the number there (for example 450, for 450pixels).

Next fill in the text. As you might notice there isn’t any styling options, but you can use regular HTML to style your text. If you are not familiar with it, here’s a trick – simply create a new page, write your desired text there, then switch to Text Mode and copy the text you wrote and styled from there and paste it inside the horizontal content block.

You can also upload a background image for your block or set it to custom color by using the color picker. If you set a background image, you can also choose a color and set its opacity below 100% so that your image would shine trough the colored background.

Horizontal Link block is designed to look exactly like a regular portfolio thumbnail. It can be used to create a page with gallery thumbnails that leads to another page instead of opening up a galley. This is demonstrated in the Red Camilla demo.

This block is created directly inside page builder.

  1. Go to Appearance > Page Builder.
  2. place a “Section” block inside your One-Page Layout,
  3. Click on the Cog icon and give it a name, for example ‘Work’
  4. set the Section Scroll Direction to Horizontaladd a section and set it to Horizontal
  5. Then place a “Horizontal Link” block inside this section, open it up.add-Horizontal-Link

Set its width (for example, “500” for 500 pixels), write a link in the Link field and upload a background image.

If you want to link to a page that’s a part of your site, you need to write only the part that starts with /#.

For example /#client-work

use-the-last-part-of-URL-link

In this chapter you’ll learn how to create a toggle widget area, sidebar and add static social icons.

social-icons

To add the social icons that stick to each page, do the following:

  1. Navigate to Appearance > Widgets
  2. Locate the Simple Social Icons in the “Available Widgets” area and drag-and-drop them inside the Sticky Bottom Area meta box on the right side of your screen.
  3. Toggle open the Simple Social Icons to enter their edit mode
  4. Customize the icons appearance to your liking by choosing their size, corner  radius and colors. (in the screenshot below you can see the main Camilla settings)social icon settings
  5. Assign the URL’s to the networks you want to display
  6. Click the blue Save button.

 

The Top Widget Area refers to the “+” sign in your menu which toggles a widget area when clicked.

widget-area

You can add from 1 to 4 widgets in this area.

  1. Go to Appearance > Widgets
  2. Drag and drop 1 – 4 widgets from the Available Widgets area inside the Header Widget Area meta box.

Styling Widget Area

To style the widget area (add a background image, font color, “+” sign behavior) go to Theme Options > General > Top Widget Area.

To create a sidebar for your blog go to Theme Options > General > Blog and set the Layout Style: Enable Sidebar.

To add widgets to your sidebar go to Appearance > Widgets and drag and drop widgets from the Available Widgets area inside the Sidebar meta box.

  1. Go to Appearance > Widgets and drag and drop the Text widget inside the Sidebar area.
  2. Open it up and fill out the title and the main content. You’ll see the URL field where you need to paste in the image link
  3. To get the image link, go to Media > Add New and upload your desired image there. After it has uploaded, click on the Edit link
  4. Locate the File URL on the right side of the Edit Media panel and copy it copy-link
  5. Go back to the Widgets panel and paste in the file URL in the Text widget Image URL field. Click the Save button.pate link in text widget

A shortcode is a WordPress-specific bit of code that lets you do nifty things with very little effort. Shortcodes can create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

Camilla comes with 3 types of shortcodes:

  1. Pricing table shortcode
  2. Button shortcode
  3. Column shortcode

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.

Let’s go trough each section:

  • [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. So if you have 3 pricing tables, you put all 3 inside this one wrapper so that all 3 pricing tables would be aligned.

  • [village_column size=”1/3″] and [/village_column] this shows how many columns this pricing table will use in a page. 1/3 means that it will take 1/3 of the page or the screen 1/2 means that it will take half of the page/screen.

  • [village_pricing] and [/village_pricing] this shows the start and end of 1 pricing table

  • [village_pricing_title][/village_pricing_title] write your pricing table title between these

  • [village_pricing_price][/village_pricing_price] write the price between these. You can take it out it you don’t need it.

  • [village_pricing_content][/village_pricing_content] here you list the content of your table. Be sure to add /// after each entry.

  • [village_button link=”your link”][/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:

[village_wrapper]

[village_column size=”1/2″]
[village_pricing]
title, price, content, button shortcode sections
[/village_pricing]
[/village_column]

[village_column size=”1/2″]
[village_pricing]
title, price, content, button shortcode sections
[/village_pricing]
[/village_column]

[/village_wrapper]

Use this shortcode whenever you want to create a button:

 

To arrange something in sets of columns use this shortcode:

Replace # in size=”#” with :

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