Camilla WP Theme by Theme Village

Camilla
Premium WP Theme for Photographers
by Theme Village

!
!
!

1! of !29

Camilla WP Theme by Theme Village

!
!
!
!
!
!
!
!

!
!
Thank you for purchasing our theme, we appreciate it greatly.

!
This documentation covers the installation and set-up of this theme. If you did
not find the answers to your questions in this documentation please feel free to
use our support forum: http://help.themevillage.net

! of !29
2

Camilla WP Theme by Theme Village

Table Of Contents

!
!

1. Basic Setup

1.1 Installation

1.2 Importing Sample Content

1.3 Font Change

2. Options Panel

2.1 General Settings

2.3 Portfolio Options

2.4 Slider Options

2.5 Color Options

2.6 Footer Options

2.7 Advanced

3. Creating The One-Page Layout

3.1 Page Background Image

10
13

3.1.1 Scalable Background Image

14

4. Portfolio

16

5. Blog

18

5.1 Adding Blog to Menu

18

! of 29
3
!

Camilla WP Theme by Theme Village

6. Contact Form

18

6. Horizontal Content Block

20

7. Widgets

21

7.1 Social Icons

21

7.2 Toggle Area / Footer

23

7.3 Sidebar

23

7.3.1 About Me Widget

23

8. Shortcodes

25

8.1 Pricing Tables

25

8.2 Button Shortcode

27

8.3 Column Shortcode

28

! of 29
4
!

Camilla WP Theme by Theme Village

1. Basic Setup

1.1 Installation
!
To install this theme you must have a working, latest version of WordPress
already installed. For information in regard to installing the WordPress platform,
please see the WordPress Codex -http://codex.wordpress.org/
Installing_WordPress

!
!

You can install the theme in 2 ways:

1. WordPress Upload:

Login into your WordPress Admin section (http://www.your-web-site.com/

wp-admin)

Navigate to Appearance > Themes

Click on the Add New Theme area -> Upload

Choose file and select camilla.zip (this file is INSIDE the zipped file you've
downloaded from Theme Forest)

Hit Install Now and the theme will be uploaded and installed.

Then go to Appearance > Themes and activate your new theme.

2. FTP Upload:

Login to your WordPress site with your preferred FTP client

Navigate to the /wp-content/themes/ directory

Upload the unzipped theme folder into /wp-content/themes/ folder on

your server.

! of !29
5

Camilla WP Theme by Theme Village

Then login into your WordPress Admin section and go to Appearance >
Themes and activate your new theme.
When installing the WordPress theme for the first time you will be

presented with a set of plugins which where used in the Live Preview to add
features and make it as flexible and as easy to use as possible.

You should install these plugins by clicking on Begin installing plugins to

get the full theme experience.

1.2 Importing Sample Content

!
Camilla comes with the demo sample content. The images from the demo
are not included in the sample content.

To upload the sample content, go to Tools > Import. Choose Wordpress

and upload the Camilla Demo.xml file which came with the theme when you
purchased it.
After that is done, go to Options > General Settings and set the Main
One-Page to One Page Menu and Select the One-Page Page to One-Page
page.

! of 29
6
!

Camilla WP Theme by Theme Village

Now go to Appearance > Menus and assign the menu that you see there as
your Primary Menu and click Save.
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.

1.3 Font Change

!
1.

If you can to change the font that is used in Camilla, do the following:
Go to Plugins -> Add New

2. Search for and install WP Google Fonts (by Adrian Hanft, Aaron Brown )
3. Now go to Settings > Google Fonts and change the fonts.
4. Go to Options > Advanced and switch off load default theme fonts

2. Options Panel

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

2.1 General Settings

!
(Go to Options > General Settings)
Site Logo - In General settings you can upload your custom Site Logo. Your logo
image shouldnt go over 300px width and 100px height. The Camilla logo is
120x70 px.

7! of !29

Camilla WP Theme by Theme Village

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 s on desktop devices, dont upload anything here.

Select the One-Page Page - It is very important that you choose your main page
here. Its the one that has the Page: One Page Layout template

2.3 Portfolio Options

( Go to Options > Portfolio ) Here you can change both the hight and width
of the portfolio cover image.
If you change one or both of these values, you must use the Regenerate
Thumbnails plugins next. This plugin will resize all of the images, so that they
look properly.

2.4 Slider Options

!
!
( Go to Options > Slider ) This is the Home slider. Here you can manipulate
the slide transition style, fade duration etc.
The slider images themselves must be created in the page builder, in your
one page layout, by using the Slider element.

2.5 Color Options

!

! of !29
8

Camilla WP Theme by Theme Village

!
( Go to Options > Colors ) Here you can change a number of colors and
opacity for the site.

2.6 Footer Options

!
(Go to Options > Footer) This refers to the + sign in your menu bar, that
opens up the widget area. Basically it works like a footer, only its in the header
area.
Here you can upload a custom background for your footer and change the
color of the + sign.
To add widgets to your footer, you need to go to Appearance > Widgets.
Read more about this in chapter 6.2 Toggle Area / Footer

2.7 Advanced
!
( Go to Options > Advanced )
Default theme fonts - Switch this off if you are using custom fonts in your
theme. This will help your site load faster, because it wont 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.

! of 29
9
!

Camilla WP Theme by Theme Village

3. Creating The One-Page

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

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

! of !29
10

Camilla WP Theme by Theme Village

The page order itself is achieved by using the Page Builder. You can find it
under Appearance > Page Builder.
First thing you do here is give a name, example - One Page Menu, to the
layout youll be creating and Save.

Now copy the template id that was generated after you saved. Navigate
back to the page that you called One-Page Page and paste in the template id
there.

Finally go back to Options > General Settings again, find Main One-Page
and assign to it the One Page Menu that you created in the page builder.

! of 29
11
!

Camilla WP Theme by Theme Village

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

Now you can start to arrange the order of your One-Page layout, but of
course first you need the pages itself, so go to the Pages > Add New and create
all the pages youll want in your layout (like About, Pricing, Contact ) except
portfolio..that is done a bit differently. Read more about it in chapter 4 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. Inside the Section you can place:

! of 29
12
!

Camilla WP Theme by Theme Village

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)
The last thing you need to do is navigate to Settings > Reading and set the
One-Page page as your Front page.

3.1 Page Background Image

!
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 in which is the page
that needs a background image. Lets say its the Contact page.

2. Click on the cog icon in this Section.

! of !29
13

Camilla WP Theme by Theme Village

3. Upload your background image under Background Image and set whether
you want a light or dark text for this page in Style Preset

3.1.1 Scalable Background Image

There are situations when you need your background image to scale
together with the browser window in a way that its not cropped. You can see
this in the Red Camilla demo, in the About page. There it is important that the

! of !29
14

Camilla WP Theme by Theme Village

background image is not cropped on smaller screens because it contains the

mans face.

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

! of 29
15
!

Camilla WP Theme by Theme Village

4. Portfolio

The portfolio in Camilla is group/category based, meaning that you can

create multiple groups that hold many images. These groups can of course be
grouped/categorized however you like.
Go to Portfolio > Add New. Give this group/section a name (Weddings,
Anne Marie, Project X)
The background images/cover of each group is the Featured Image, so
upload an image as a featured image (the size of this image is specified in
Options>Portfolio and you can change it however you like).
All of the images that will appear in this group need to be uploaded in the
Portfolio Options meta box.

!
!
!

! of !29
16

Camilla WP Theme by Theme Village

After all your groups are created, go to Appearance> Page Builder, add another
Section to your one page layout, click the 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.

!
!

! of 29
17
!

Camilla WP Theme by Theme Village

5. Blog

Create a new page (Pages > Add New) and give the blog a name.

Now start creating your posts by going to Posts > Add New.

5.1 Adding Blog to Menu

The blog is designed to be a separate page, not a part of the one page
layout. This is presented in the Camilla demo.
To achieve this, navigate to Appearance > Menus and add your blog page
(or any other page) to the menu, assign then as Primary Menu, make sure that
the menu is set as Primary Menu and Save.

6. Contact Form
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:

! of 29
18
!

Camilla WP Theme by Theme Village

!
<div class=village-form">

<p class="input">
<label for="name">Your Name (required)</label>
[text* your-name id:name]
</p>
<p class="input">
<label for="email">Your Email (required)</label>
[email* your-email id:email]
</p>
<p class="input">
<label for="subject">Subject</label>
[text your-subject id:subject]
</p>
<p>
<label for="message">Your Message</label>
[textarea your-message id:message]

!
!

</p>
<p>[submit Send"]</p>

</div>

!
!
!

This HTML will add custom styling to your regular form.

! of 29
19
!

Camilla WP Theme by Theme Village

6. Horizontal Content Block

The 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.
Go to Appearance > Page Builder , place the Section block inside your
One Page Menu canvas. Click on the Cog icon and give it a name, for example
Services and set the Section Style to Horizontal Scroll Page.
Now place the Horizontal Content Block inside your new Section and open
it up.
You need to give this block a width (in pixels), just write the number there
(for example 600, for 600pixels).
Next fill in the text. As you might notice there isnt any styling options, but
you can use regular HTML to style your text. If you are not familiar with it,
heres 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 an background image, you can also
choose a color and set its opacity below 100% so that your image would shine
trough the colored background.

!
!
!
!
!

! of 29
20
!

Camilla WP Theme by Theme Village

7. Widgets
In this chapter youll learn how to create a toggle widget area, sidebar and
add static social icons.

7.1 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

! of 29
21
!

Camilla WP Theme by Theme Village

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)

5. Assign the urls to the networks you want to display

6. Click the blue Save button.

!
!
!
!

! of !29
22

Camilla WP Theme by Theme Village

7.2 Toggle Area / Footer

!
This toggle area serves as a footer, only its hidden beneath the navigation.
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

Footer Widgets meta box.

7.3 Sidebar
!
To create a sidebar for your blog go to Options > General Settings and set
the Layout Style: Enable Sidebar.
To add widgets to your sidebar go to Appearance > Widget and drag and
drop widgets from the Available Widgets area inside the Sidebar meta box.

7.3.1 About Me Widget

!
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. Youll see the URL field
where you need to paste in the image link

! of 29
23
!

Camilla WP Theme by Theme Village

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

5. Go back to the Widgets panel and paste in the file URL in the Text widget

!
!

Image URL field. Click the Save button.

! of 29
24
!

Camilla WP Theme by Theme Village

8. Shortcodes
8.1 Pricing Tables
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.
Here is the shortcode:
[village_wrapper]

[village_column size="1/3"]
[village_pricing]
[village_pricing_title]Basic[/village_pricing_title]
[village_pricing_price]500$[/village_pricing_price]
[village_pricing_content]
1-2 hours on location///
No outfit changes///
100 images///
25 edited images///
Lo-res images for Facebook///
[/village_pricing_content]
[village_button link=#]Book A Session[/village_button]
[/village_pricing]
[/village_column]

[/village_wrapper]

! of !29
25

Camilla WP Theme by Theme Village

Lets go trough each section:

1.

[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

2. [village_column size=1/3]and[/village_column] this shows

how may columns will this pricing table use. 1/3 means that it will take 1/3
or the screen 1/2 means that it will take hall of the screen.
3. [village_pricing] and [/village_pricing] this shows the start
and end of 1 pricing table
4. [village_pricing_title] [/village_pricing_title]write your
pricing table title between these
5. [village_pricing_price] [/village_pricing_price] write the
price between these. You can leave take it out it you don't need it.
6. [village_pricing_content] [/village_pricing_content] here
you list the content of your table. Be sure to add /// after each entry.
7. [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:

!
!
!
!
!
!
!
!

! of 29
26
!

Camilla WP Theme by Theme Village

[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]

8.2 Button Shortcode

!
!

Use this shortcode whenever you want to create a button:

[village_button link=your url]Button Text[/village_button]

!
!
!
!
!

! of !29
27

Camilla WP Theme by Theme Village

8.3 Column Shortcode

!
!

To arrange something in sets of columns use this shortcode:

[village_wrapper]
[village_column size=#]

Sizes= :
1/2 ; 1/3 ; 1/4 ; 1/6
2/3 ; 2/4 ; 2/6
3/4 ; 3/6

[/village_column]
[/village_wrapper]

!
!
!
!
!

! of !29
28

Camilla WP Theme by Theme Village

!
!
!
Again thank you for purchasing our theme and using the documentation,
we appreciate it greatly.

!
If you did not find the answers to your questions in this documentation please
feel free to use our support forum: http://help.themevillage.net

! of !29
29