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.
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.
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:
Go to Theme Options > Demo Importer
You’ll be able to choose between 4 demo import types – Starter Theme, Light Theme, Dark Theme, Red Theme. Choose only one!
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.
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.
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 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.
( Go to Theme Options > Portfolio > Thumbnail Settings )
Here you can:
Set a specific Height and width of your portfolio thumbnail
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.
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.
Inside the Section you can place:
the “Page” element where you can choose which of you page will show up
the “Slider” element where you can upload multiple images and create the Home slider.
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)
It is really easy to set a background image for one or more of your pages, you just do the following:
Go to Appearance > Page Builder and locate the Section inside which is the page that needs a background image. For example, “Contact” page
Click on the blue cog icon to open the Section block
Upload your background image under “Background Image” and set whether you want a light or dark text for this page in “Style Preset”
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
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.
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.
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)
place the “Section” block inside your One Page Menu canvas.
Click on the Cog icon and give it a name, for example ‘Resume’
set the Section Scroll Direction to Horizontal.
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 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.
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.
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.
[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: