Invicta - WordPress Theme

Documentation File
Created on 2013/10/18 by Oitentaecinco

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

Hi. First of all I would like to thank you for purchasing Invicta!
This theme was crafted with much dedication... Hope you enjoy it.

I’ve prepared this documentation file to teach you how to set up and use the theme. If you have any questions that are beyond the scope of this document, please feel free to ask your them at the support platform.

Informations about updates and other important stuff will be announced on Twitter and Facebook.  Please follow them.

Have fun with your Theme!


------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
Table of Contents

1. About the Theme
2. Getting Started
	2.1. Uploading the Theme
	2.2. Installing the Required Plugins
	2.3. Importing the Demo Content
3. Setting Up the Theme
	3.1. Theme Options
	3.2. Menus
	3.3. Widgets
		3.3.1. Widget Areas (Sidebars)
		3.3.2. Custom Widgets
	3.4. WP Settings
	3.5. Translating the Theme
4. Adding Content
	4.1. Pages
		4.1.1. The Page Builder Concept
		4.1.2. Content Elements
		4.1.3. Operations with Content Elements
		4.1.4. Page Builder Templates
		4.1.5. Shortcodes Behind the Page Builder	
	4.2. Posts
		4.2.1. Page Layout
		4.2.2. Post Formats
	4.3. Portfolio
		4.3.1. Creating Portfolio Projects
		4.3.2. Creating the Portfolio Page
	4.4. Photos
		4.4.1. Creating Photo Galleries
		4.4.2. Creating the Photos Page
	4.5. Videos
		4.5.1. Creating Videos
		4.5.2. Creating the Videos Page
	4.6. Revolution Slider
		4.6.1. Creating a Slider
		4.6.2. Creating Slider’s Slides
		4.6.3. Editing Slides
		4.6.4. Using Text Layer Styles
		4.6.5. Adding a Revolution Slider to the Homepage
		4.6.6. Adding a Revolution Slider to a Page
	4.7. Contact Form 7
		4.7.1. A custom Contact Form
		4.7.2. Adding a Contact Form to a Page
	4.8. Twitter Feed
	4.9. Instagram Feed
5. Using the Included PSD Files
	5.1. Maps
	5.2. Devices
	5.3. MacBook Pro with Magnifier
	5.4. Signature
	5.5. Slideshows
	5.6. Page Mockups
6. Updating the Theme
	6.1. Updating Theme’s Plugins
		6.1.1. Updating Contact Form 7 Plugin
		6.1.2. Updating Visual Composer Plugin
		6.1.3. Updating Revolution Slider Plugin
7. Sources & Credits
	7.1. JavaScript Plugins
	7.2. WordPress Libraries
	7.3. WordPress Plugins
	7.4. Other Resources

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
1. About the Theme

This theme was created to be used with WordPress 3.6 or higher. The code was written to be backwards compatible where possible, however it’s highly recommended using at least 3.6 version. If you are using an old version, please upgrade it before the theme’s installation.

All the main WordPress features are covered by this theme. Widgets, Sidebars, Shortcodes, Menus, Post-Formats, among many other things, are entirely supported and ready to use.

In addition, you will have at your disposal a Theme Options Panel and a powerful drag-n-drop Page Builder, that will allow you to easily create beautiful pages within a few minutes.

Regarding the technology... 

This theme was coded in HTML5 and CSS3. Your website will have a search-engines-optimized structure, several smooth animations, video and audio support and many other modern features. 

It is also fully Responsive. The content will be automatically adjusted to fit nicely on different viewport sizes. The entire mobile experience from your website visitors are guaranteed.

All the major browsers, like Safari, Chrome, Firefox and IE8+ are supported.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
2. Getting Started

To install this theme you must have a working version of WordPress already installed. For more information about how to install WordPress on your server, please take a look at the WordPress Codex Installing WordPress page.

After unzipping the theme’s package downloaded from ThemeForest, you will have the following material:

 invicta.zip
The theme file that should be uploaded to WordPress.

 invicta_documentation.pdf
The file that your are just reading.

 resources
Folder that contains all the resources you’ll need to further customize the theme.

 graphics
Folder that contains all the PSD files created for the theme. You can use them to let your inspiration flow, by playing colors, content structuring, images, whatever.

 sample_data
Folder that contains the XML files needed to quickly put your website looking like the theme’s demonstration. It could be helpful starting your development journey working over a pre-created content.

 wp_plugins
Folder that contains the source files of every plugins used by the theme. If, in the future, any of these plugins needs to be updated, the new files will be added to this folder.

 licensing
Folder that contains the license files required by the theme

 changelog.txt
File that contains all the information regarding the theme updates


 Here is a short video on How to install the Theme

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
2.1. Uploading the Theme

When you have your WordPress installation ready, you should upload the theme and then activate it. The theme can be uploaded in two ways:

FTP Upload: Using your FTP program, upload the unzipped invicta.zip folder into the /wp-content/themes/ folder on your server.

WordPress Upload: In the admin-area, navigate to Appearance > Install Themes > Upload. Go to browse, select the invicta.zip file and click Install Now.

Once the theme is installed, activate it.

 If you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues. 

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

2.2. Installing the Required Plugins

Once you have activated the theme you will see a warning message telling that you should install some plugins that are required by the theme:

 Contact Form 7
A free plugin from WordPress plugin directory to create flexible contact forms

 Revolution Slider
A premium plugin that will allow you to create powerful layered slideshows

 Visual Composer
A premium plugin that will add a drag-n-drop Page Builder to the WordPress editor

To install the required plugins click on the Begin installing plugins link on that warning message or navigate to Appearance > Theme Plugins. Once you are on the Theme Plugins page, mark the checkboxes, select Install (on the Bulk Actions drop down) and hit the Apply button. 

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
2.3. Importing the Demo Content

Sometimes users prefer to start their customization work from the theme’s demonstration website, because it’s easier for them to understand how to work with the theme, by seeing how each content was set up. If this is not your case, please skip this chapter.

To import the demo content, in the admin-area, navigate to Tools > Import. You will be asked from where you want to import. Select WordPress. 

If you still doesn’t have the WordPress Importer plugin installed you will be prompted by the installer popup. Click on the Install Now button. After the installation is complete, click on the Activate and Run the Importer link.

Once you are on the importer page, pick the pages_post.xml file that you have on your theme’s package under the resouces/sample_data/ folder. Set the author info as you wish and mark the Download and import file attachments checkbox. Then click Submit, wait a few seconds and it’s done... 



After importing the demonstration content, there is one last thing you need to do: Telling WordPress which are your Front and Blog pages. To do that navigate to Settings > Reading, pick the Static Page option and choose Front Page in the Front page dropdown and Blog in the Posts page.

 Here is a short video on How to import the dummy content

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
3. Setting Up the Theme

Once you have fully installed the theme, it’s time to setting it up: adding your logo, changing some colors and fonts, enabling some options, among many other things.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

3.1. Theme Options

The Theme Options panel is where you will be able to configure almost everything on the theme. To view the Theme Options panel navigate to Appearance > Theme Options. 

The options are grouped into different “pages” according to it’s context... To view each group click on the left-sided tabs. After doing the modifications, click on the Save All Changes button located at the right top and bottom of this page.



Each option is self-described on the Theme Options page; you will know what each one does, when you start interacting with them... So here is just a quick summary about each options group.

 General

Here you will be able to set up the general theme settings. Basically on/off settings, like show slideshow on frontpage, show breadcrumb, show comments on pages, etc.

You will also find in this tab a Custom CSS Code field. This is where you should add any CSS customization you need for the theme. If you add them here, they will be safely maintained whenever you update the theme.

 Branding

Here you will be able upload your logos to the multiple parts of the website (header, favicon, iOS homesreen, admin, etc.)

 Styling

Here you will be able to customize the theme to match your company/business brand, by changing all the colors of the theme (backgrounds, text, links, menus, etc.). You can also specify if you want to use a boxed or a stretched layout.

 Header

Here you will be able to customize the Header of the website. Mainly the meta information that appears at the top, like social networks, fast contacts, etc.

 Footer

Here you will be able to customize the Footer of the website, most notably the ability to specify how many columns you want to use in the footer. This field is linked with the WordPress Widgets panel, so if you specify X columns for the footer in the Theme Options panel, you will have at your disposal 3 Footer Widget Areas in the Widgets panel.

 Sidebars

Here you will be able to specify how you want to display the sidebars on the different kind of pages. This will be the default setting applied to all pages, but you will be able to override this setting individually, when you create each page.

 Icons

Here you will be able to specify which icons you want to use across the website. 

The icons are based on the Font Awesome iconic font, so despite only some of them are included by default in the theme, you will be able to use all of them. Just grab each icon name from their full list of icons and add it to textarea at the bottom of the page.

 Typography

Here you will be able to set up the typography for the body and headings of the website. Besides the native and common operating system fonts, there are also some Google Web Fonts available. 

 Blog, Portfolio, Photos and Videos

Here you will be able to change the settings of the different post-types available. Basically you will be able to change the layouts, the visible information, ordering preferences, etc.

 Feeds Authorization

The theme comes packed with some widgets that show content from some external services, like Twitter and Instagram. Some of the services, require you to get some kind of authorization codes, before you can get content from them. 

I these tab you will be able  can specify those authorization codes, then they will be automatically configured for each widget.

 Maintenance

Many times in WordPress the websites are created directly on the production server. In this tab you will be able to activate the Maintenance Mode, so your visitors couldn’t see what’s going on before the website is ready. However the website will be fully visible and functional for authenticated administrators.

This mode could also be helpful if for some reason you want to “shutdown” your website for a period while you perform some kind of advanced modification.

 Backups

Sometimes is helpful experiment some options but keeping the old settings in case they are needed back. Here you will be able to save the current options and also restore the latest saved options.

There is also a field with a code that could be used to transfer the saved options data between different  WordPress installs. Just copy the code from the source install and paste it in the target install.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
3.2. Menus

This theme have the WordPress 3.0 Navigation Menus feature implemented, which provides you an easy to use mechanism for introducing navigation menus in the website.

To create a menu navigate to Appearance > Menus. If you need more information on how to create and manage this WordPress Menus, please read the Appearance Menus Screen page from the WordPress codex.



You will have at your disposal two different menu locations to which you can assign your created menus: 

Main Menu: the menu located at the top of the website. This location should have the most complete menu assigned to it, since it is the primary navigation system of the website.

Footer Menu: the menu located at the bottom of the website. This location should have a more simple menu assigned to it, maybe the less important pages like Privacy Policies, Terms & Conditions,  etc.

 To perform this task you should already have the WordPress Pages created3.3. Widgets

This theme have the WordPress Widgets feature implemented, which provides you an easy to use mechanism for adding content to the page sidebars and footers.

To manage your website widgets navigate to Appearance > Widgets. If you need more information on how to work with WordPress Widgets, please read the Appearance Widgets Screen page from the WordPress codex.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

3.3.1. Widget Areas (Sidebars)

This theme has a powerful dynamic Widget Areas mechanism. 

You have a specific sidebar for each kind of page (Page, Blog, Photos) that will only be visible on the respective page. 

You have a Global Sidebar that will be visible in all pages. You have multiple Footer Sidebars corresponding to the number of columns you defined for the Footer, under the Theme Options page. 

But you also have the possibility to create your own sidebars. Later, when you are creating the pages and posts of the website, you will be able to specify the custom sidebars you’ve created here.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

3.3.2. Custom Widgets

All the default WordPress widgets are properly styled according to the look & feel of the theme. They will fit nicely in all widget areas available. Besides the default widgets this theme adds a few more:

 Invicta Latest Posts
A widget to display latest post entries

 Invicta Popular Posts
A widget to display popular post entries

 Invicta Combo Posts
A widget to display latest and popular post entries, within different tabs

 Invicta Instagram Feed
A widget to display a Instagram’s Feed

 Invicta Twitter Feed
A widget to display a Twitter’s Feed

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
3.4. WP Settings

There are a couple things related to the WordPress platform that you should configure to get your theme working properly.

The most important thing that needs to be configured is the Home and Blog pages mapping. By default WordPress shows the blog posts on the front page. If you want to have a different homepage, navigate to Settings > Reading and change the Front page displays fields.



Then you might want to change the permalinks structure of the website in order to get prettier URLs. To do that navigate to Settings > Permalinks and choose the structure you want. 

 To perform the previous task you should already have the WordPress Pages created



One of the common used structure is: /%category%/%postname%/ 
It will give you URLs similar to this one: www.your-website.com/about/services/

If you need more information on how to deal with WordPress Permalinks, please read the Settings Permalinks Screen page from the WordPress codex.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
3.5. Translating the Theme

This theme is translation ready. That means that you can have it in your language, just by providing the adequate translation to each word or phrase used in the theme.

The original translation file is located in the languages folder (/wp-content/themes/invicta/languages/). To edit it you will have to use a specific software. 

The most popular one is the Poedit, a cross-platform gettext catalogs (.po files) editor. If you need more information on how to use Poedit to translate an WordPress theme, please type “how to translate wordpress theme with poedit” on your preferred search engine, you will find a lot of articles explaining it.

However, there is also a good WordPress plugin out there, called CodeStyling Localization that allows you to manage the translations within the WordPress environment, which might be very more simple. 

Is up to you decide which method you prefer to use. Once the translation file is ready and stored in the languages folder, make sure that the WPLANG prefix of your wp-config.php file is similar to the translations file name. 

 The translation mechanism could also be useful you simply want to change some labels of the theme.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4. Adding Content

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.1. Pages

One of the required plugins you’re asked to activate after installing the theme is Visual Composer. This premium plugin, adds a drag-n-drop Page Builder to the native WordPress pages editor. That means that you’ll be able to create beautiful pages within a few minutes, in a very intuitive way. Basically all you have to do, is adding lines, setup the number of columns for each line, and add widgets to each cell.

 Here is a short video on How to create pages with Visual Composer

To use the Page Builder, once you are in the page editor screen, click in the Visual Composer button, displayed under the title field. The WordPress default rich textbox will be replaced by the page builder interface.


------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.1.1. The Page Builder Concept

In the Visual Composer editor mode you’ll have three main buttons at the top of the form. One for adding content elements, other for adding rows (that will hold the added elements) and other manage builded templates. 

 Rows
Rows are used to divide your page into the logic blocks. Each row can have one or more columns. Columns, will hold your content blocks. Rows can have different layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row’s positions, click and drag row’s drag handler (top left row’s corner) and drag row around (vertical axis).

 Columns
Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag columns around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

 Content Elements
Content elements are the elements that can be placed on the working canvas (inside rows and/or columns). Think of them as bricks. With those bricks you are building your page layout. Content elements can be repositioned, just click and drag them around to wherever you want.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.1.2. Content Elements

To add a new content element to the page, click on the Add element button. A popup will open with a form to select the type of element you want to add. You’ll have at your disposal multiple content elements that you can add you the page.



All the content elements (except the Row one) have a quick form that will guide you through the element setup process. You just have to fill those forms and click save. Here is a summary of all the content elements you can add to your pages.

 Text Block
A simple text block...

 Separator
A separator line to divide your content blocks

 Separator with Text
A separator line, with a title in the middle, to divide your content blocks

 FAQ
Pretty much a toggle element, usually used for FAQ info.

 Single Image
As the name says, add a single image to the page.

 Tabs
Adds tabbed content to the page. You can create multiple tabs and add different content to each tab.

 Tour Section
Works like the Tabs element, but the the buttons are position at the side instead of the top.

 Accordion
Adds an accordion to the page. Inside of each accordion section you can add other content elements.

 Video
Adds an external video to the page. More about the supported formats at the WordPress Codex Page.

 Google Maps
Adds a Google Map iFrame to the page.

 Raw HTML
Allows you to add a piece of HTML to the page.

 Raw JS
Allows you to add a piece of JavaScript to the page.

 Contact Form 7
Adds a contact form to the page. You should create your contact forms before, using the Contact Form 7 plugin. All the created forms will be available for choosing in this element settings screen.

 Revolution Slider
Adds a slider to the page. You should create your sliders before, using the Revolution Slider plugin. All the created sliders will be available for choosing in this element settings screen.

 WP Search
Adds an WordPress search box.

 WP Pages
Add a list with all the WordPress pages available on the site

 WP Custom menu
Adds a menu to the page. You should create your menus before, in the WordPress Menus interface. All the created menus will be available for choosing in this element settings screen.

 Heading
Adds a specially formatted heading to the page. A header, composed by a primary and a secondary line, matching the theme’s styling. Nice to add more visual relevance to your page titles.

 Iconbox
Adds an icon with a small piece of text to the page. Useful for listing your services on the page.

 Steps
Adds a connected sequence of iconboxes to the page. Useful for listing related and sequenced information.

 Partners
Adds a set of hyperlinked images to the page. Useful for listing your sponsor or partner logos.

 Testimonial
Adds a testimonial block where you can specify the text and the author.

 Person
Adds a personal info block to the page. You can specify almost everything about a person: photo, name, contacts, etc.

 Letter
Add a text to a page, styled like a letter.

 Portfolio
Add a portfolio items list to the page, based on the portfolio projects you’ve created before. You can specify the number of projects, the filtered categories, among other things.

 Contacts
Add a set of contacts to the page

 Timespan
Adds a kind of a timespan clock to the page, based on the begin and end time you specify. Useful for showing the working schedule of your company.

 Progress Bars
Adds a set of progress bars to the page, that you can use for multiple purposes, e.g. showing the skiils involved in your business.

 Button
Adds a button to the page. Useful for redirecting users for other pages.

 Social Links
Adds a set of icons for your social networks.

 Instagram Feed
Adds a set of photos fed by an Instagram account. 

 Twitter Feed
Adds a set of tweets fed by a Twitter account.

 Icon 4 Tab
If you add this element inside a tab element, your tab will have display an icon near the tab title. This element will only work inside a tab element.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.1.3. Operations with Content Elements

After adding the content elements to the page, you have a couple of extra things that you can do with them:

Repositioning: click and drag the element to another position of the canvas;
Edit: click on the pencil icon that appears on the element when you hover it, to edit its values;
Duplicate: click on the pages icon that appears on the element when you hover it, to duplicate the element within the canvas;
Remove: click on the cross icon that appears on the element when you hover it, to remove the element from the canvas

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.1.4. Page Builder Templates

If you need to create a page with a similar structure of another page you have already built, there is an easy way to get your page layout duplicated. By using the Visual Composer Templates, you can save the layout of a page and load it later in another page. 

To do that, you just need to click in the Templates button at the top of the form, and then Save Current Page as Template. Later, on the other page, click again in the Templates button and select the template you’ve created before. Then you just need to change the values of each content element.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.1.5. Shortcodes Behind the Page Builder

Behind all of these Page Builder feature, are common WordPress shortcodes that you can also access and manipulate. To do that, just click on the Classic editor button, below the Title textbox in the page editor screen. The page builder interface will be replaced by the default WordPress rich textbox, and you will be able to see all the shortcodes used within the page.

Unless you are a WordPress Shortcodes specialist, I recommend you to not work with shortcodes in the Classic editor mode. A mis-positioned character or word might break your entire layout.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.2. Posts

Writing a post doesn’t differ from doing so when using other themes. You set the title, add some content, choose the categories and thats about it. 



For more information about how to writing posts, please take a look at the WordPress Codex Writing Posts page.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.2.1. Page Layout

There are a just one thing that differs from the usual... That it’s specific from this theme: the ability to control the layout of this specific post: choosing the sidebar of the post, and its position. 

Under the Theme Options panel you’re able to specify the general layout for all your posts, but if you need some exception, here you can change it individually. 

You could set a right aligned sidebar, a left aligned sidebar or a post without any sidebar. If you have a sidebar, you can choose the any of the registered sidebars, even the custom ones you’ve created before.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.2.2. Post Formats

This theme implements the Post Formats feature, introduced with WordPress 3.1. That means that your could have your posts presented in a more proper way, according to its format.

Here is a quick explanation of what changes in each format.

 Standard
The default and common post format. Nothing special here.

 Video
The post thumbnail will be a video-player instead of the traditional featured image. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL.

 Audio
The post thumbnail will be an audio-player instead of the traditional featured image. The first <audio /> tag in the post content could be considered the audio.

 Link
The post thumbnail is invisible, some metadata is also invisible. The first <a href=””> tag in the post content as the external link for that post. The text of this <a href=””> tag will be the title of the post.

 Gallery
The post thumbnail will be a gallery instead of the traditional featured image. The photos used in this gallery are the photos contained within the post, as a gallery or image attachment.

 Image
The post thumbnail will be an image found in the content instead of the traditional featured image. The first <img /> tag in the post could be considered the image.

 Aside
The post thumbnail is invisible, as also the title and the metadata. Only the post content and the date is visible.

 Quote
The first blockquote found in the post content.

 Status
The post thumbnail is invisible, as also the title and the metadata. Only the post content, the author and the date are visible.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.3. Portfolio

The portfolio is where you could showcase your projects. The method of managing porfolio projects is pretty much the same of managing blog posts. 



 Here is a short video on How to setting up the Portfolio

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.3.1. Creating Portfolio Projects

To create a portfolio project navigate to Portfolio > Add New. For each project you’ll be able to specify the title, the content, the featured image and a couple of extra fields (that correspond to the project metadata):

Categories: will work as filters in the front-office portfolio page
Skills: will appear in a check list format
Project Price 
Project URL
Client Info (Name and Website)

Besides the project information, you will also be able to specify the page layout. You have three options:

 Condensed
The project content will appear in the right side of the project featured image. 
You should use this option if your project content is short.

 Extended
The featured image will be full-with, the project content will appear at the bottom. 
You should use this option if your project content is large.

 Automatic
The page will automatically decide which of the two previous modes is the best, based on the content available. This method isn’t 100% accurate, for some cases you might need to specify the best mode.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.3.2. Creating the Portfolio Page

Once you have your portfolio projects, you need to create a page to showcase them. To create a portfolio page navigate to Pages > Add New. Then select Portfolio in the Template dropdown under the Page Attributes panel.

You’ll notice that the usual page textarea will be replaced by a new form with all the settings available for the portfolio page.



This allows you to create multiple portfolio pages, each of them with different parameterization. You will be able to specify how many columns you want for the project grid, how many projects will be shown per page, which project categories should be included, etc.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.4. Photos

Besides Portfolio, this theme has a similar feature useful for showcasing your photo galleries: Photos. The method of managing photo galleries is pretty much the same of managing blog posts. 



 Here is a short video on How to setting up the Photo Galleries

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.4.1. Creating Photo Galleries

To create a photo gallery navigate to Photos > Add New. For each photo gallery you’ll be able to specify the title, the content, the featured image and a category.

In the content area is where you’ll have to add your photos gallery. To do that click on the Add Media button (above the main texbox) and select Create Gallery. Then you just need to upload or pick the already uploaded images you want to include on the gallery. Once you have picked all the photos you need click on the Create a new gallery button and the gallery will be added to the page.



This gallery system is based on the defaults WordPress Galleries. For more information about how to create WordPress galleries, please take a look at the WordPress Codex The WordPress Gallery page.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.4.2. Creating the Photos Page

Once you have your photo galleries, you need to create a page to showcase them. To create a photos page navigate to Pages > Add New. Then select Photos in the Template dropdown under the Page Attributes panel. 

And that’s it... You have your photo galleries system working.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.5. Videos

Just like Photo Galleries, this theme has a similar feature for showcasing your videos. The method of managing videos is pretty much the same of blog posts, but with much less information to deal: Just a title, and the URL of the Video. This system only supports videos hosted on Youtube or Vimeo.



 Here is a short video on How to setting up the Videos

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.5.1. Creating Videos

To create a video navigate to Videos > Add New. For each video you’ll be able to specify the title and the external URL of the video. Once you have saved the video, a thumbnail retrieved for the video host will automatically be attached to the video. If you don’t want to use the provided image as video cover, please specify the featured image field.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.5.2. Creating the Videos Page

Once you have your videos, you need to create a page to showcase them. To create a videos page navigate to Pages > Add New. Then select Videos in the Template dropdown under the Page Attributes panel. And that’s it... You have your video system working.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.6. Revolution Slider

This theme comes packed with a premium plugin that will allow you to create amazing slideshows: Revolution Slider. After installing and activating it you can find it at the bottom of the admin-area menu.

For more information about what you can do with Revolution Slider, please read the Revolution Slider Presentation page.

For more information on how to work with Revolution Slider, please read the Plugin’s Documentation page. 

Plus, on each Revolution Slider screen you have a Help button at the top-right corner. Click it to read the specific documentation chapter for each action you are performing.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.6.1. Creating a Slider

To create a new slider, navigate to Revolution Slider in the admin-area menu, then click on the Create New Slider button.

You will be presented with a form where you should enter the slider title and the slide alias (a slug that is used to display the slider in the theme; try to keep it simple, without spaced and special chars).



The options in the boxes on the right side will allow you to customize the slider appearance and behavior - each option have helping tooltips on mouseover.

After setting up the slider information, click on the Create Slider button.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.6.2. Creating Slider’s Slides

After creating a slider you need to create slides. Each slider can have multiple slides. To create a slide click on Edit Slides button in the Revolution Slider page.

Press the New Slide button and the native WordPress Media Upload dialog window will appear. Choose or upload the slide’s background image. 



Use the arrow handles on the right to change the slides order in the slider. You can also delete, duplicate or edit each slide by clicking on the respective buttons.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.6.3. Editing Slides

Once you have created your slider’s slides, you could enhance each slide by adding text or images layers over it. To do it click on the Edit Slide button. In the slide editor screen you will have a large set of settings allowing you to do almost everything you want with the slide, most notably the drag-n-drop caption/layer editor.

To create a new layer click on the Add Layer, Add Layer: Image or Add Layer: Video button. For each kind of layer you add you will have a full set of options to control the layer behavior (styling, transitions,  delays, etc.). After adding layers you can move the around by clicking and dragging each element.



If you have any doubt on how to work with slider’s editor, click on the Help button at the right-top corner.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.6.4. Using Text Layer Styles

When you add a text layer, you could pick a predefined style on the Style dropdown. 

However you can define your own custom styles. To do that click on the Edit CSS File button. A dialog window will open, and you are now able to set up your own styles.

If you want to use the styles defined for the theme’s demonstration website grab the following CSS definitions:
/* Invicta Custom Styles */

.tp-caption.invicta_h1 {
	color: #282828;
  	font-size: 26px;
	line-height: 150%;
	font-family: "Open Sans";
	text-shadow: 0 1px 0 #FFF;
    }
    .tp-caption.invicta_h1 strong {
    	font-weight: normal;
      	color: #fb652b;
    	}

.tp-caption.invicta_h2 {
	color: #777777;
  	font-size: 15px;
	line-height: 150%;
	font-family: "Open Sans";
	text-shadow: 0 1px 0 #FFF;
      }
    .tp-caption.invicta_h2 strong {
    	font-weight: normal;
      	color: #fb652b;
    	}

.tp-caption.invicta_p {
	color: #737373;
  	font-size: 12px;
	line-height: 150%;
	font-family: "Open Sans";
	text-shadow: 0 1px 0 #FFF;
      }

You should replace the color definition of each rule, to match your website’s accent color.

If, in the future, you update your Revolution Slider plugin, you should backup all the extra CSS definitions you’ve added to this file. However, this will be explained in Updating the Theme chapter.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.6.5. Adding a Revolution Slider to the Homepage

To display a Revolution Slider on the homepage header, navigate to Appearance > Theme Options > General. Turn on the Front Page Slideshow option, then use the dropdown to select the slider you have just created.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

4.6.6. Adding a Revolution Slider to a Page

To add a Revolution Slider to a page you just need to use the Page Builder feature. There is an element called Revolution Slider that will grab your already created sliders, then you just need to pick the one you want to use. 


------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.7. Contact Form 7

One of the theme’s required plugins is Contact Form 7. It will allow you to create flexible and powerful contact forms, that are completely styled by this theme. To manage your contact forms just click on the Contact button on the admin-area’s menu.



It’s really simple to create a new contact form. Almost everything you need to do is click on the Add New button at the top of the Contact Form page... You will immediately have a form created with a couple default fields. Just provide a name for the form, hit Save and it is ready to use. However you will be able to create forms a lot more complex and customize almost everything on it. 

For more information on how to work with this plugin, please read the Contact Form Documentation page.

 Here is a short video on How to create a Contact Form 7

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.7.1. A custom Contact Form

When you start to play with the form’s tag generator, you will see that you’ll be able to create almost every kind of forms, specially if you have some HTML knowledge. 
Here is the code of the form used in the theme’s demonstration Contacts page:
<div class="form_field_group group_2">

<div class="form_field name"><label>Name<cite class="accentcolor-text">*</cite></label>[text* your-name]</div>

<div class="form_field email"><label>Email<cite class="accentcolor-text">*</cite></label>[email* your-email]</div>

</div>

<div class="form_field subject"><label>Subject</label>[text your-subject]</div>

<div class="form_field message"><label>Message<cite class="accentcolor-text">*</cite>[textarea* your-message]</label></div>

<div class="form_field send">[submit "Send"]</div>
Just copy it into the Form field in your Contact Form.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.7.2. Adding a Contact Form to a Page

To add a Contact Form to a page you just need to use the Page Builder feature. There is an element called Contact Form 7 that will grab your already created forms, then you just need to pick the one you want to use. 



If you don’t want to use the Page Builder feature, you could use the shortcode that is provided for each form on the Contact Form 7 page. Something like this: 

[contact-form-7 id="1234" title="Contact form 1"]

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.8. Twitter Feed

This theme comes packed with a widget that displays a list of tweets from a given account. However, in order to being able to get the data from their servers, you will have to get some kind of “permission” from Twitter. Here are the steps of how to get that “permission”:

Go to https://dev.twitter.com/apps and login, if necessary
Click on the Create a new application button in the top right corner
Enter your Website Name, Description and Address. You can leave the callback URL empty
Accept the Terms of Service and solve the Captcha
Submit the form by clicking the Create your Twitter Application button
In the new page, click the Create my Access Token button

By this time you already have everything you need to be authorized to retrieve the tweets for your website: Consumer Key, Consumer Secret, Access Token and Access Token Secret.



Now, in your website’s admin-area navigate to Appearance > Theme Options > Feeds Auth and paste the Consumer Key, Consumer Secret, Access Token and Access Token Secret values in the respective fields. Hit Save All Changes and you’re done. 

You can add add your Twitter Feed widgets. The authorization info will already be specified in the widget form, you only have to specify the username from which you want to retrieve your tweets.

 Here is a short video on How to generate the authorization tokens for the Twitter widget

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
4.9. Instagram Feed

This theme comes packed with a widget that displays a list of Instagram items from a given account. However, in order to being able to get the data from their servers, you will have to get some kind of “permission” from Instagram. 

Unfortunately, the steps will to get that “permission” are not so simple like the Twitter Authorization steps explained in the previous chapter. But here it is what you have do:

Go to http://instagram.com/developer and login, if necessary
Click on the Register Your Application button
Click on the Register new client button, at the top-right corner
Enter your Website Name, Description and Address. And repeat your website address on the OAuth redirect_uri field


Among some other info, you should now have the Client ID value, that you will need in the next steps

Copy the following URL to your browser and replace the CLIENT-ID and the REDIRECT-URL token with the values you’ve provided and obtained in the previous step.

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

Submit the URL to the browser

You’ll be presented with a confirmation screen, where you should approve the access to your Instagram data

After approving the access you’ll be redirected you the URL you provided in OAuth redirect_uri fileld in step 4. After being redirected, notice in your browser’s url field that they added some kind of code to your original URL. Something like:

http://your-redirect-uri#access_token=292515076.f59def8.c111a4554f22404683f5f26ee3682962

 Grab the code added after the “access_token=” word. This is your Access Token.

Now, in your website’s admin-area navigate to Appearance > Theme Options > Feeds Auth and paste the Access Token value in the respective field. 

The last thing you need to do is to get the Instagram User ID from the account you want to get the data. Open this Instagram User ID Lookup page, type the Instagram username and get the User ID. Paste that User ID in the Appearance > Theme Options > Feeds Auth page’s respective field. Hit Save All Changes and you’re done. 

You can add add your Instagram Feed widgets. The authorization info will already be specified in the widget form, you only have to specify how many items you want to display

 Here is a short video on How to generate the authorization tokens for the Instagram Widget

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
5. Using the Included PSD Files

This theme comes packed with several PSD files, that you can use for generating your own customized images, or simply to try different layout approaches by graphically reorganizing contents.

The files are located in your downloaded package under the /resources/graphics/ folder.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

5.1. Maps

A map is always a nice eye-catching element on a page. You probably already seen some of them in the theme’s demonstration page. If your company/business operates in multiple locations across the globe, including a map could probably be a good bet. 

This theme comes with a PSD file that allows you can generate your own map. It already comes with a couple of locations, you just need to adjust the markers and the labels. 


 Here is a short video on How to generate a map from the PSD file

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

5.2. Devices

This theme comes with a PSD file that allows you to generate your own device screens. It has included an iMac, a MacBook, an iPad and an iPhone template, ready for being customized. You only have to edit the smart objects named edit me, save them and they will be automatically applied to the main image.

 Here is a short video on How to generate a devices graphic from the PSD file

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

5.3. MacBook Pro with Magnifier

This theme comes with a PSD file that allows you to generate your own macbook pro with magnifier graphic. You only have to edit the smart objects named edit me, save them and they will be automatically applied to the main image.

 Here is a short video on How to generate a macbook with magnifier graphic from the PSD file


------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

5.4. Signature

One of the page builder available element is the Letter shortcode. It allows you to display a letter formatted text. That element, besides of allowing you to specify the author’s photo, also allows you to specify the author’s signature. 

The theme comes packed with a PSD file of the signature used in the demonstration website. You can use it to generate your own signature. 

You’ll have two options: scan your real signature and add it to this file; or use a handwritten font you like, to simulate the signature. The font used in the demonstration website is the Scriptina Font and can be downloaded for free in the dafont.com website’s.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

5.5. Slideshows

In the resources folder you will also find PSD files that might help you to design your Revolution Slider slides. 

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

5.6. Page Mockups

Last, but not least, you will also have all the PSD files created during the theme’s design process. You can use them for experiment different layout approaches before putting your hands on the WordPress’s Page Builder. 

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
6. Updating the Theme

This theme will be frequently updated, either for fixing bugs or adding new features. To be informed about new updates, you might want to follow the Twitter and Facebook accounts.

When you update an WordPress theme your contents are totally safe, because the only thing that it’s affected are the theme files. The database isn’t touched. That also means that all changes you might have done to the theme files will be lost, you might need to reproduce them again in the new theme files.

Before updating the theme you should make a backup of your current theme folder, so you can recover some old file you might need later (or even the entire theme in the case something goes wrong during the upgrade). To backup your current theme folder just make a copy your current /wp-content/themes/invicta/ folder.

Once you have the backup ready, you need to download the latest theme version. Login to ThemeForest, head over to your Downloads section and re-download the theme like you did when you bought it. 

You can download the entire theme package or the installable WordPress file only. If you have downloaded the entire package, extract the zip content, locate the invicta.zip file and extract it too. If you have downloaded only the installable WordPress file, you only need to extract its zip content.

For both cases you should end up with the unzipped invicta theme folder.

Then upload that folder, using FTP, to the /wp-content/themes/ folder in your server, overwriting the old one.

Once all the files are uploaded, you will need to restore your Theme Options settings, so the CSS rules can be rewritten to the theme’s CSS files. To do that, in your admin-area, navigate to Appearance > Theme Options and just click on the Save All Changes button. It’s done!

If you have ever changed the theme’s translation (.pot) files, you will need to restore them to, by recovering the languages folder from your backup. Just copy the languages folder form the old (and backed up theme’s folder) to the new theme’s folder.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
6.1. Updating Theme’s Plugins

Sometimes, you might need to update the plugins that comes packed with the theme: Contact Form 7, Visual Composer and Revolution Slider.

To upload the theme plugins you should download the entire theme package from the ThemeForest, not only the installable WordPress file. You could find the plugin’s zip files under the /resources/wp_plugins folder, from your extracted package file.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

6.1.1. Updating Contact Form 7 Plugin

The Contact Form 7 plugin can be updated directly from the WordPress environment, like you update all the other free plugins, hosted in the WordPress plugins repository.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

6.1.2. Updating Visual Composer Plugin

Since Visual Composer it is a premium plugin and it is not hosted in the WordPress plugins repository you will have to update it manually.

To do that, extract the jc_composer.zip file located in your main package file downloaded from ThemeForest. Then upload the extracted folder, using FTP, to the /wp-content/plugins/ folder in your server, overwriting the old one.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

6.1.3. Updating Revolution Slider Plugin

The Revolution Slider plugin has an incorporated update mechanism. You only need to open the Revolution Slider page and click on the Update Plugin button, on the right-bottom corner. Then grab the revslider.zip file located in your main package file downloaded from ThemeForest. It’s done!

 There is an identified issue on Revolution Slider updater: The modifications that you have might done in the CSS file aren’t being saved. So, while this issue isn’t solved, before updating the plugin you should backup the Revolution Slider CSS file, and restore the changes after the upgrade.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
7. Sources & Credits

In order to achieve the best results with some features, I’ve used a couple of external resources, all of them properly licensed.

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

7.1. JavaScript Plugins

jQuery BlackAndWhite by Gianluca Guarini
jQuery Easing by George McGinley Smith
jQuery Superfish Menu Plugin by Joel Birch
jQuery FancyBox 1 by Janis Skarnelis
jQuery Cookie by Klaus Hartl
jQuery MiniColors by Cory LaViska
FlexSlider by WooThemes
FitVids by Chris Coyier and Dave Rupert
Isotope by Metafizzy
Add to Home Screen by Matteo Spinelli
HTML 5 Shiv by @afarkas, @jdalton, @jon_neal and @rem

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

7.2. WordPress Libraries

Slightly Modded Options Framework by Syamil MJ
Aqua Resizer by Syamil MJ
Codebird by J.M.
FirePHP by Christoph Dorn
TGM Plugin Activation by Thomas Griffin and Gary Jones

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

7.3. WordPress Plugins

Revolution Slider by ThemePunch (purchased on CodeCanyon with extended license)
Visual Composer by Mixey (purchased on CodeCanyon with extended license)

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

7.4. Other Resources

Font Awesome by Dave Gandy
All the photos used in the demonstration website were purchased on PhotoDune.







------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

Once again, thank you for purchasing this theme!

Hope this document is self explanatory.However, if you need any kind of assistance, please feel free to ask your question at the support platform.