Camilla Documentation

Camilla WP Theme by Theme Village

!

!

!

!! of !1 29

CamillaPremium WP Theme for Photographers

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 !2 29


Table Of Contents !!1. Basic Setup 5

1.1 Installation 5

1.2 Importing Sample Content 6

1.3 Font Change 7

2. Options Panel 7

2.1 General Settings 7

2.3 Portfolio Options 8

2.4 Slider Options 8

2.5 Color Options 8

2.6 Footer Options 9

2.7 Advanced 9

3. Creating The One-Page Layout 10

3.1 Page Background Image 13

3.1.1 Scalable Background Image 14

4. Portfolio 16

5. Blog 18

5.1 Adding Blog to Menu 18

!! of !3 29


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 !4 29


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 !5 29


• 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 !6 29


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

If you can to change the font that is used in Camilla, do the following:

!1. 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 shouldn’t go over 300px width and 100px height. The Camilla logo is

120x70 px. !! of !7 29


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, don’t upload anything here.

!Select the One-Page Page - It is very important that you choose your main page

here. It’s 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 !8 29


! ( 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 it’s 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 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.

!! of !9 29


!

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 it’s 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 !10 29


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 you’ll 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 !11 29


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 you’ll 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 !12 29


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 it’s the Contact page.

2. Click on the cog icon in this Section.

!! of !13 29


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 it’s not cropped. You can see

this in the Red Camilla demo, in the “About” page. There it is important that the

!! of !14 29


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 !15 29


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 !16 29


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 !17 29


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 !18 29


!<div class=“village-form">

! 

<label for="name">Your Name (required)</label>

[text* your-name id:name]



! 

<label for="email">Your Email (required)</label>

[email* your-email id:email]



! 

<label for="subject">Subject</label>

[text your-subject id:subject]



! 

<label for="message">Your Message</label>

[textarea your-message id:message]



! [submit “Send"]

!</div>

This HTML will add custom styling to your regular form.

!!!

!! of !19 29


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 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 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 !20 29


7. Widgets

In this chapter you’ll 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 !21 29


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 url’s to the networks you want to display

6. Click the blue Save button.

!!!!

!! of !22 29


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. You’ll see the URL field

where you need to paste in the image link

!! of !23 29


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 !24 29


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 !25 29


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 !26 29


[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 !27 29


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 !28 29


!!!

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

Documents

Camilla Documentation