Thank you for purchasing our theme. If you have any questions that are beyond
the scope of this help file, please feel free to contact us via Support Forums or create a personal ticket in our Support System. Thanks so much!
Demo Content Installation
We've made it so easy for you to install the theme and upload demo content for your website in order to make it look the same as on our demo preview so you can review on all pages in order to get familiar with all theme features and functions. And here is a video tutorials on how get this done in few minutes
Main Theme Features
We are proud to introduce our new Accio WP theme. In this theme we have implemented lots of great useful features and as the result the theme became very flexible and universal.
As the best features we would like to highlight are Full Screen Layer Slider ($15 worth), Full Screen Parallax Slider,
And amazing Full screen video player which allows you to embed the video from youtube video or you can use self-hosted video. Accio theme has an option to add parallax effect to a video background.
We have upgraded our Layout constructor and have added lots of options for customizing your page and which helps you to get a unique design ana layout for all your pages.
And of course we would like to present you OnePage which allows you to combine pages into one. This is really great feature and in addition we have added for surfing within the Onepage by scrolling and even with help of keyboard navigation buttons.
We have implemented long list of usefull shortcode and variety of widgets.
With all this being said Accio WP theme is awesome and you definitely needed to try it out.
OnePage Creation
Some of you would find this complicated but if you practice little bit on creating OnePage you would understand how awesome it is.
In our Accio WP theme we have implemented great feature - an option to construct OnePage type of pages. OnePage collects created pages into one and allows you to surf through these pages by scroll bar, keyboard navigation or simply by clicking on menu bar.
Let's start from very beginning. We have created few pages with a demo content and will use theme in this tutorial. We are going to use:
Home fullscreen video
Blog
Team
Contact us
The main point you need to understand is that you create pages with your content the same way you did before and then combine them into OnePage.
The next step is to create a menu with these pages added in Appearance > Menu. In this example we named this menu "test OnePage menu"
After you created the menu you would need to go to OnePage menu and click Add new. We have named this One page "test OnePge".
In pages dropdown menu choose the pages you added to the menu and click "Add to page". You would need to add pages one by one.
Once you added pages please make sure they are in the same order as you have them in menu. Here all menu items are dragable, so you can drag and drop them to change the order if needed.
In the next section "One Page Attributes" you can choose the background video for this OnePage. In this sample on the home page we have full screen video and we embed youtube video there. You can choose to embed youtube, vimeo or self hosted video.If you don't need video to be displayed there you can keep the URL field empty.
Below The Background video you would need to choose the menu we have created above which is "test OnePage menu" and then publish the page.
Now your OnePage is ready but in order to show it up on your frontend you would need to create a separate page for it. So we go to Pages > Add new and give it a name "testing OnePage".
On the right side menu below the custom Page Option you will find OnePage section and in this dropdown you need to select the Onepage you created, in our case its "test OnePage" and then publish the page.
The last step is to go to Appearance > Theme Option > General and choose this created page in Frontpage settings dropdown menu and click Save All Changes.
And that's it, once you load up your website you would be able to navigate through your pages by staying on One Page.
This page "testing OnePage" will be show in pages list and as you have may noticed we have added one more column there OnePage.
Next to the title "testing OnePage" in OnePage column you will see "Yes", it mean that this page is used to display Onepage on it. Basically it just helps you to navigate through pages in admin panel and understand which page is regular page with the content and determine which page is used for showing OnePage.
In previous chapter you have seen how to create OnePage with the menu navigation bar. We have mentioned there that for creating OnePage you need to create a menu for it with the same pages and in the same pages order. But you still can add more pages to the menu and these pages could be separate pages that were not added to OnePage.
Lets review this example of OnePage with following pages on it:
Home fullscreen video
Blog
Team
Contact us
And we have added same pages while creating a menu that was applied to OnePage:
As the result we have OnePage on our frontend and can surf through pages by scrolling,clicking on pages or with keyboard navigation button same as seen on demo preview on our Accio WP theme.
On this example we are going to add additional page "Services" to the same menu which was assigned to OnePage, but please
note it was not added in OnePage. In OnePage we still have only 4 pages: Home fullscreen video, Blog, Team, Contact us.
As you can see "Services" page arises in the menu bar as shown on the screenshot
And within these pages: Home Fullscreen Video,Blog,Team,Contacts you can navigate by scrolling but in order to open the Services page you would need to click on it and it will load up as separate page. Once you entered this page you can not scroll back to these pages that are part of OnePage, you would need to click on one of the pages that are in OnePage and it will get you back to OnePage menu navigation.
Home Page Layouts: Layer Slider, Slider Parallax/Superslides, Videobackground
Layer Slider home page
On this page we have used LayerSlider WP plugin. Initially we have created HomePage slider group with 3 slides with images and demo content.
While Home page creation we have inserted one row with the help of Layout constructor and added one column which was adjusted to the full row width
In the Column editor we have used Slider Shortocde.
In Slider shortcode menu we choose Layerslider as Page Slider type and choose the layer slider plugin group.
The row we have added was assigned Group "0" by default and it could be edited by clicking on button below
In Group Settings make sure Full Width, Disable Padding top,Disable Padding bottom are checked.
Also please note that sidebar should be disabled
And as the resault you will get the page with full width Layer slider on it
Slider Parallax Home Page In this Home page layout we have used slider Superslides. And first step is to create a slider group for it. You would need to go to Slider Groups Menu and click Add new. We have created a slider group "Slider Parallax" with 3 images there. Please note for proper image displaying in this slider you need to use the exact image size 2045x950 or 2109x950
While Home page creation we have inserted one row with the help of Layout constructor and added one column which was adjusted to the full row width
In the Column editor we have used Slider Shortocde.
In Slider shortcode menu we choose Supeslides as "Page Slider type" and set Slider Parallax as "Slider groups".
The row we have added was assigned Group "0" by default and it could be edited by clicking on button below
In Group Settings make sure Full Width, Disable Padding top,Disable Padding bottom are checked.
Also please note that sidebar should be disabled
Once you followed all these steps you will get home page with full width slide with parallax effect on it
Home Page with videobackground
In our Accio WP theme we have implemented OnePage which allows to combine pages in one and also allows to add video on the background.
The video could be added while creating OnePage, but before that you would need to create a home page with transparent background and with some content one it. Let's review our example here.
We have created a page and named it "Home Fullscreen Video". While Home page creation we have inserted one row with the help of Layout constructor and added one column which was adjusted to the full row width
In column content editor we have used Full Content shortcode.
In shortcode editor window we have inserted demo content.
The row we have added was assigned Group "0" by default and it could be edited by clicking on button below
In Group setting menu make sure the following options are checked: Full Width, Disable Padding Top, Disable Padding bottom which will stretch this section to the full page width and hight. Also Transparent section should be checked as well and it set the transparent background to this section and set the section text color to too white for better visibility purposes
Also make sure the Sidebar is disabled
After this page is created the next step is to create OnePage with this "Home Fullscreen Video" page added. In this tutorial we have named OnePage "test OnePage". For more details regarding OnePage creation please review "OnePage Creation" in tutorials menu.
In OnePage Attributes you can set up a Background video. It allows you to embed video from youtube, vimeo or you can use self-hosted video and make sure its in mp4 format. In our example we use youtube option and on the right field you would just need to enter URL from youtube video.
Once your OnePage created (please review "OnePage Creation") you would need to set thos page in Frontpage Settings in Appearane > Theme Option > General
If you followed all steps accordingly you would get the home page with fullwidth video on it. Also please be aware the video will be displayed on background of all pages that were combined into OnePage.
Portfolios
First step to create portfolio page is to add few portfolio items. For this go to admin > Portfolios > Add new
From the very beginning give to your portfolio item a name.
In editor add some text if needed, and also fill in excerpt box to show a short preview of this portfolio. In case you do not have this special excerpt field take a look at right top “Screen Options” tab. Click on it you get a list of options to display
The main step is to add images to a portfolio. For this you go a bit down and find “Folio images” box, moreover there is an option to add Video items to portfolio.
You have media library in front of you
So you able to pick at once as many images for this current portfolio item as you like, simply press Shift. Also in case you are not satisfied with image size you are able to choose one which fits your needs. So once all images for the portfolio are selected press “Insert into page”.
Next step is portfolio data box
In “Portfolio attributes” you can specify release date of this project, to set URL, URL title and define tools as well.
At the right hand of your admin panel you see special boxes to fill. These boxes are: Tags, Clients, Skills and Categories.
Simply press “Add new” for each next item if you need more.
At the end you can also choose a cover for this portfolio item by setting featured image.
When all fields are entered, we can consider this portfolio finished. Keep going to add more and more portfolios in such way, since Accio theme allows to add as many portfolio pages as you need.
Now we are going to show our portfolio page on front-end on main navigation console. Please be aware that Portfolio page can be added in two ways: 1) with the help of shortcode “Portfolio”; 2) via Menus.
First option fits for general listing portfolio page. To get it worked we go to admin panel > Pages > Add new.
Name this page, for example “My portfolios”, and take a look at edit panel, where green “+” button for shortcodes is located.
Here choose Portfolio shortcode to insert.
In new pop-up window you are able to choose portfolio categories and posts amount per page to show.
Lets take a look at out Portfolio page on our demo
When you hover over the portfolio two options arises.
By clicking on the right icon the light box will be shown up
If you click on first icon it will get you to a single folio page
You can navigate through your portfolios by clicking navigation arrows and if you want to get back to the Portfolio list page you would need to click on this button on the top right side
In case your portfolio page is part of your OnePage same as we have on our demo preview and if you click on that button above it will get you to that specific section of OnePage and will load up a Portfolio page
Please make sure your Portfolio page which is the part of OnePage is set as Archeve Page layout in Theme Option > Portfolio, otherwise it will not redirect you back to portfolio page section in OnePage
Second option would be very useful and easy to use in case you need to show up single portfolio page or few pages on Main Navigation panel.
So, we go to Appearance > Menus and find Screen Options tab. Then enable Portfolios box to see.
Here you click on Portfolios and choose one or more to add to Main Menu
Shortcodes
NOTE: To get all shortcodes work make sure to install ThemeMakers Shortcodes Package plugin originally from your theme bundle
This theme provides with more than 30 different shortcodes.
Let's view each one in details.
Accordion
Accordion/Toggle shortcode can be greatly used for your FAQs list or for any other purpose.
Alert shortcode allows to add blocks to posts and pages with four notification types: info, warning, error, success. In case if you need to warn about something, to share any information or simply to point some particular text out, please use this Alerts shortcode.
Simply enter text to show and select alert type.
Blog shortcode can show up few posts on a page from all or one exact category. Setting this shortcode you can specify a category, choose posts selection (by ID, date, etc.), enable/disable meta data, choose posts amount per page, choose posts with higher priority to show.
This shortcode helps to add a button to the page. This shortcode options allow you to choose button text, pick color, size, URL, alignment and Animation type.
Charts shortcode allows the adding of 7 diagram types: Pie Chart, Bar Chart, Column Chart, Geochart, Line chart, Area chart, Combo Chart. In settings to this shortcode you need specify Chart Type, Title, Chart width, Chart height, Font family, Font size, Background color, Chart titles and Chart data.
These elements can help to highlight your partners' or clients' labels. Simply fill the form in with the image and URL, and also you are able to choose the animation effect. Make sure that your images for clients are no less than 135x35 px.
For more details how to create contact form please read Theme Options panel > Contact Forms section
Counter
New element with nice visual effect of counting is added. You can use it for any need to show the dynamic counting of any data: level or percentage of work, rate, vote, etc.
In Counter options pop-up window you need to set data speed (in milliseconds), then add new items. Also there is an option to add animation effect for your elements added.
Divider
You are able to divide your pages content with two types of divider shortcode: Divider and Empty space.
This shortcode helps to place any other data (text, images, etc.) for full width and height. You just need to enter text into the box.
Google Map
This shortcode adds Google map to the page. Settings allow to select height, width, latitude, longitude, specify Zoom (from 1 to 19), also choose the Map Type (ROADMAP, SATELLITE, HYBRID, TERRAIN), choose a Mode: Map or Image, put the address, show/hide marker, scrollwheel, make marker dragable, and enable pop up.
You can add any image to your pages with the help of this shortcode.
In pop-up window please upload image, choose action (open a link, or no link on image), set align (non, right, left, center), choose image size, your image title link, top indent (px), right indent (px), bottom indent (px), left indent (px) and also you can add the animation effect.
You are able to choose two list types within this shortcode: ordered and unordered list. If list is selected as unordered then you could add 20 different bullets for this list.
To set this shortcode is very simple.
specify the list type: ordered, unordered or circle
add the items
choose icons/bullets type, set a color and add item text
New shortcode which can be use for showing up of any percentage calculations or things of this nature. To insert this shortcode you need to add amount value, title and color attribute for each item.
To show up your latest posts with the help of this shortcode you simply need to select category, posts amount to show, show or hide post metadata, choose content symbols amount and add animation to these posts, and Show/Hide "View All posts" button. If you click the button "VIEW ALL POSTS" it would get to the blog page that you set as "Blog Page" in Theme Option which displays all the blog created in admin panel.
Recent projects shortcode shows some of your latest portfolios, you need only define the amount of them to be displayed per page: from 1 to 20 and also to specify the layout: 1/3 or 1/4.
Slider shortcode allows to insert slider on any place on any page: below the text, between words, etc. Choose the slider type to add and select slider group. Please keep in mind that images should be not less than 940x520px.
For each next item select Social Network from the list (Twitter, Facebook, LinkedIn, Pinterest, RSS, Google+, Youtube, Instagram, Dribble, Flickr, Dropbox, Blogger, Evernote, Behance, LastFM, Skype, Vimeo, Forrst, Digg, AppStore) and add the link to your account.
Staff shortcode adds your staff items to post or page.
Just select staff item and add the animation effect. Make sure that your images for Staff items are no less than 252x270 px, otherwise it will show "No image" cover.
To add one or more testimonials select one from the already existed ones, and choose showing up settings: show selected testimonials, show random testimonials, show latest testimonials, also you can enable/disable photo. We added an option to put an animation effect to the testimonials, so you can choose it as well.
This shortcode makes your content more dynamic and bright. You can add any text and apply the animation effect to it: opacity, scale, slideRight, slideLeft, slideUp, slideDown.
Audio shortcode helps to add audio files to the pages. Please be aware that theme allows to upload audio in .WAV .OGG .mp3 and many other formats. You need just upload file you would like to add and press Insert Shortcode.
In our Accio WP theme we have implemented Layout Constructor. The Layout constructor provides a view of the objects on your page or post and with the help of which the objects may be manipulated and controlled. It makes so easy to define your page or post structure.
Let's view it more detailed.
First of all you need to get this Layout constructor from your Screen Options panel:
Simply check box for Constructor and it appears under your Edit field:
Each item represents the object on front page. Layout constructor builds schematic view of page real layout.
To get it started press Add row button which creates a row for elements added.
All objects displayed in the Layout Constructor are dragable, so can be easily manipulated, e.g. added, edited, reordered, deleted.
Let's say you would like to split text in four columns in first row and 3 columns in second.
For this:
press Add column button four times
press Add row
in just added row press Add column button three times
Ending up all these pressings you should get this:
Now you see schematic layout template of your text. The Layout constructor allows you to regulate each box width by a click "+"
Let's try to fill all these boxes with content. You no longer need to insert shortcodes inside shortcodes, it's never been so simple.To add and edit content for each column just press
In pop-up window you get Column content editor:
Notice: Please keep in mind that effects for columns are available only under modern browsers, such as Firefox, Chrome, Safari, etc. and starts from IE 10.
Here you can add any content you like, add media files, add text, format text, moreover all shortcodes are available here under green "+" button. So once you are done and your first column is ready press "Apply".Here are simple examples how your text can be shown up with the help of this Layout constructor:
Now lets review Groups and Groups Settings for row. Each row can be assigned a different group. You can set the group by clicking in this button and enter the number in pop up window
in this example we have two rows and as you can see first has Group 1 and second Group 2. The particular Group can be edited by clicking on "Edit Group" Button bellow.
Let's review the Group settings. With the help of Groups you can set up different background effects, manage the padding, set overlay etc.
1)Full Width - you can stratch the row to the page full width
2)Disable Padding top and Disable Padding Bottom - By the default each of row has top and bottom padding
Lets disable Bottom and top padding of Group 2 and see what is going to happen
3)Transparent Section - Set transparent section background for using video background and set white color to section text. This option can be applied to a page which was added to OnePage with a video on background. With this attribute enabled the OnePage video background will be shown up on the background of the particular row. And also this option change the row text color to white for better visibility purposes. Let's check this option in Group "1" Settings.
4)Background Attachment- If checked the parallax effect would be applied to background image, otherwise the background image will scroll with scrollbar
5)Background Color - you can set any color to the row background
Let's review the frontend
6)Background image - allows you to set any image to the row background. We have added an image in Group 1
7) Image instead video - The video that added to the row background with Transparent section feature is not viewable on touch device, that is why we have implemented this option which allows you to add an image there instead of having white section while viewing it on the touch devices.
8) Opacity - allows you to add a color shade over background image, you can set it from "0" to "100". On this example we have set image background on Group "1" and its shown on previous screenshot. And lets add bluish shade to it with the opacity feature. You would need to set the background color and Opacity value to 40.
And here is a screenshot which shows how it looks like on the frontend:
9) Border Bottom color - you can set any color to a bottom row border.
10) Overlay - Set overlay on background image
Without overlay
With Overlay
In case you would need to break the column that created with the help of Layout construction for few more columns you can do that in Column content Editor.
We have implemented an option to add the column shortocode which allows you divide the column
Once you picked the desired column deving shortcode from the dropdowm and clicked on it arises in content editor area.
Lets add 2 staff mambers with the help of Staff shortcode and place them in the right Coulm created with Layout Consturctor.
Accio theme offers to create posts based on four types: Default, Video, Quote and Gallery
Posts are added in usual way – enter title, add text, fill in Excerpt box, tags, set featured image and choose category needed. In case you do not have special field for Excerpt please take a look at top right corner and find there Screen Options tab.
On front-end all post types have such look:
Default post
Video post
Quote post
Gallery post
Once you add as many posts as you need we are going to show them on our Blog page. Go to Pages > Add new, and here in Page Attributes box select Blog template type for this page.
For displaying posts on your website we have implemented few options.
The first option is to create a new page and for instalnce name it "My Blog".
After that go to Appearance > Theme Options > General and select this page from Blog Page dropdown menu and click Save All changes.
And all the posts you have created in admin panel will be displayed on this specific page. You can add this page to menu or to OnePage.
The other option is to display posts on any page with the help of Recent post shortcode. You can add this shortcode into row/columns created through Layout Constructor as well. Lets review the menu of this shortcode.
You can select the categoy
show/hide post metadata
add animation to the posts
choose the content symbols to be shown
and Show/Hide "View All posts" button
Let's add Recent post shortcode with 3 post and with "View All Posts" button enabled
If you click the button "VIEW ALL POSTS" it will get to the blog page that you set as "Blog Page" in Theme Option and in our case its "My Blog" page
Theme Options
Theme Options extended panel helps you to customize current theme the way you personally need. Let's get it started to view everything in depth.
Here is like Options Panel looks
General
It starts from section “General” which provides with next options:
In first section you need to choose the Onepage(for instructions review "OnePage Creation") which will be show on your frontend and choose the main Blog Page
to upload favicon for your website. It will appear in your browser's address bar as per example below. Recommended dimensions: 16x16. Recommended image types: png, ico.
1) for Apple Touch Icon.
Upload your favicon here. It will appear in your browser's address bar as per example below. Recommended dimensions: 57x57. Recommended image types: .png
2) for Apple Touch Icon (72x72).
Upload your favicon here. It will appear in your browser's address bar as per example below. Recommended dimensions: 72x72. Recommended image types: .png
3) for Apple Touch Icon (114x114)
Upload your favicon here. It will appear in your browser's address bar as per example below. Recommended dimensions: 114x114. Recommended image types: .png
choose your website Logo : either Image or Text. If you prefer to show text for your logo then check Text box, enter Logo name, choose font family and font size for it, choose color for it as well.
Also pay attention that system automatically remembers few last logo (color) variations. In case you want to get back to one from previously used simply click on appropriate arrow. To use default color press “Reset ” arrow.
If as a website logo you choose to show an image then check Image box and upload your logo image there. Recommended dimensions: width = 300px, height = any. Recommended image types: png, gif, jpg.
to select your default sidebar position
to enable/disable WPtextirize
to use Transparent Navigation or not
to place tracking code for Google Analytics. It will be inserted before closing body tag in your theme.
Styling
Next section is “Styling” the most capacious one. It includes options for:
General website stylization
Headings
Main Navigation
Buttons
Widgets
“General Styling” subcategory allows to:
to modify your website color schemes with the help of Skin Composer
Here you can create new skins, choose color mark, load skins from already existed ones or delete some you no longer need.
You can find more information regarding Skin Composer work within this help file in separate section "Skin Composer in Use".
to change website elements color. Here we mean general website elements color (such elements as icons, some backgrounds etc.). Do not edit this field to use default theme styling
to edit text:
website font family
website font size
website text color
website normal links color
website mouseover links color
to change backgrounds color:
1) for footer - the bottom area where is copyright info located
2) for general website. Here you are able to choose among three options available: use separate color, custom background image or patterns.
to apply your customization
In Headings section you can work with font families for all headings of your website from H1 to H6. You can select :
Font Family
Font Size
Font Color
Main Navigation section is responsible for:
General settings of Main Console:
font family of main navigation items
first level font size
second level font size
Links Color (First level):
normal
current
mouseover
Background Color (First level):
current
mouseover
Links Color (Second level):
normal
current
mouseover
Buttons styling section is divided into two blocks of settings for Buttons:
Normal Styles, where you can choose text and border color
Mouseover Styles, where you can select text and background color
Widgets styling section allows you to choose title color for normal color styles.
Sliders Settings
Sliders Settings panel provides with options for Superslides. Since the Layer slider is built-in plugin, you are able to set it on your admin panel > Layer slider
Options for Superslides help to:
set "Play" time - time between images automatic sliding, set it in milliseconds
In this section you can make all setting for your Blog/News page where your posts are shown up.
These options are divided into two blocks:
Options for Listing page (General view of your Blog/News listing page)
Options for Single page view.
Setting Listing page you can:
define Excerpt Symbols Count. This option will excerpt full article content with a necessary amount of symbols on the blog listing page
set Meta Data: show or hide All Meta Info, only Date Info, only Author Info, Tags Info or Category Info
Single page can:
show or hide Comments and Facebook Comments
control Meta Data showing up: show or hide All Meta Info, only Date Info, only Author Info, Tags Info or Category Info
Portfolio
Archive page layout can be managed here - choose items amount per page to show and sidebar position
Next go options for Single Page Layout:
choose either show related works on single page or not
show or hide single folio date
show or hide single folio clients
show or hide single folio skills
show or hide single folio tags
show or hide single folio tools
Contact Forms
Accio has an option to build special contact form to get messages from your visitors, users and customers.
You do not need any additional plugins or application. This function is already built in. Moreover, you are allowed to add as many contact forms as you need and use them on few different pages.
So, let's get it started!
At first we go to admin > Appearance > Theme Options > Contact Forms. System asks you to add new form. For this enter a title for the form and press “+” Add.
Once you press "+", new added contact form appears in the general list below. Click on special pencil symbol to edit this contact form. Nex you'll get special contact form constructor
Please be aware that you can add as many blocks as you need by pressing “+” button at the right top corner
All blocks are dragable, in case you need to change blocks order simply drag and drop them.
So, first block asks you to choose “Submit” button color, put recepient's e-mail address and also you are able to change "submit" text of your button.
All next blocks are added in depends on your personal wish and need: choose field type to each next block (Textinput, e-mail, website, message body, select, radio buttons and checkbox) and put field label (text which will be displayed inside this field).
Each block gives you an option to make it required or not. So in case you need to enable * simply check “Required field” box. Also theme allows to add field for attachments, for this you would also need to check "Enable Attachments" box.
When all blocks are added and you basically finished your form building then we are going to show it up on front-end. We do it with the help of shortcode “Contact Form”. For that we go to admin > Pages and add new page called “Contact us”, for example. Then, take a look at green “+” shortcodes icon and click on it. In front of you full shortcodes list appears. Choose “Contact form” among others.
In new pop-up window you get Contact forms list, from which you need to choose one to display.
Do not forget press “Publish” to save all changes.
The theme includes built-in SEO tools and options. For more detailed information please go to SEO options chapter
Footer
Here you are able to change footer area of the theme.
Firstly you have an option to upload Footer Background Image. Please note that recommended image formats are .png, .gif, .jpg
Next goes Copyrights text where you can simply remove existing text or put your own.
Also in case you do not need footer area at all you can simply turn it off
The last option allows to disable or enable Logo in Footer area
Skin Composer in Use
We created amazing tool to help you customize the theme with no complications and saving your time. Skin Composer allows to edit already existed color skins, add new based on ready ones and create your own. The point is that each skin you modified can be saved and in case you need to get back to one from previously created just pick it to use.
Let's walk trough the new skin creating with our Skin Composer. We will try to show it in step-by-step way, so please be attentive in order do not miss anything.
At first take a look at the Skin Composer location on Theme Options panel
Please pay your attention that at first we have to make all customizations for Styling section and only then just created skin will be saved. So, if you already know how you are going to arrange the future skin and you defined few main colors, fonts, etc. then we can start.
First section to customize is Styling > General where you can:
change website elements color. Here we mean general website elements color (such elements as icons, some backgrounds etc.). Do not edit this field to use default theme styling
to edit text:
website font family
website font size
website text color
website normal links color
website mouseover links color
to change backgrounds color:
1) for footer - the bottom area where is copyright info located
2) for general website. Here you are able to choose among three options available: use separate color, custom background image or patterns.
to apply your customization
In Headings section you can work with font families for all headings of your website from H1 to H6. You can select :
Font Family
Font Size
Font Color
Main Navigation section is responsible for:
General settings of Main Console:
font family of main navigation items
first level font size
second level font size
Links Color (First level):
normal
current
mouseover
Background Color (First level):
current
mouseover
Links Color (Second level):
normal
current
mouseover
Buttons styling section is divided into two blocks of settings for Buttons:
Normal Styles, where you can choose text and border color
Mouseover Styles, where you can select text and background color
Widgets styling section allows you to choose title color for normal color styles.
When all these settings are made and you are ready to save them in one Skin we go to Styling > General and here in special field "Create a new skin" enter a name for this new skin. Do not forget to pick the color mark for this exact skin you are adding
Only one thing left to create new skin is to press "+" button
In new pop-up window you'll get the notification that new skin has been added.
That's it! We have just added new Skin.
In this way you can create as many skins as you like and anytime you are able to choose some of them to load for the whole website, to modify if needed or even delete.
Videocast: this video has been recorded for our other WordPress theme, but please use it as an example, it shows the main features of Skin Composer
Skin Composer in Use
Custom Page options
Accio theme provides with variety of options and abilities. We did our best to make it maximum customizable in order for
you to be not limited by default settings. That is why you are able to choose and customize each individual page and post with these options: choose Page Title and Page Description,
decide either Hide or Show Page Title and select the Page Sidebar Position.
Another Page Title and Page Description
This option allows to change page name and description which is placed on the top of the pages. For example, page original title is "About Us", but you would like to get it as "Who we are?" on the page header part and also add few words about your team.
Page sidebar position
For each page and post you are also allowed to control sidebar position
Simply check box needed and save all changes
SEO options
This theme allows to control Meta fields for each post, page, portfolio and gallery. Just fill each field (Meta Title, Meta keywords and Meta description) with proper information.
Also you are able to manage SEO options in tab Theme Options > SEO Tools > General.
Here you can set Meta fields for your Home Page, Post listing, Portfolio listing and Gallery listing as well.
On tab Theme Options > SEO Tools > SEO Groups you can create few groups for the categories, however pay attention that one SEO group can be used only for one category.
Widgets
Accio provides with 3 sidebars for widgets to be located. Once theme is installed and activated your sidebars contain default widgets. All widgets are dragable, so to replace default items with other ones you simply need to drag and drop a widget needed to any of sidebars.
Default sidebar on front-end
Footer Sidebars 1, 2 on front-end
There are next widgets available within this theme:
ThemeMakers Facebook LikeBox
Shows up people who liked your website, and also give an ability to press "Like" button.
Insert title for this widget, you Facebook page ID, amount of people to show, and specify box height.
ThemeMakers Latest Tweets
The widget can display your latest tweets from Twitter. For this you need to enter a title, Twitter widget ID, number of tweets to display. Here you can ask where you can get this Twitter ID, please read the following instructions very carefully:
Go to www.twitter.com and sign in as normal, go to your settings page.
Go to "Widgets" on the left hand side.
Create a new widget for what you need eg. "user timeline" or "search" etc.
Feel free to check "exclude replies" if you don't want replies in results.
Now go back to settings page, and then go back to widgets page, you should see the widget you just created. Click edit.
Now look at the URL in your web browser, you will see a long number like this: 345735908357048478
Use this as your ID!
Sometimes it takes some time to generate and process all new data, so be ready to wait.
Shows up your accounts in Social networks, such as Twitter, Facebook, Dribbble, Vimeo, Youtube, RSS.
ThemeMakers Contact Form
With the help of this widget already created contact form can be shown. Just pick the name of the form needed in dropdowm menu
ThemeMakers Flickr feed
This widget makes possible to display all images from your account http://www.flickr.com if you have some.In options just set title for this widget, your Flickr username and number of images you would like to be shown.
ThemeMakers Recent Posts
Makes available to show up recent posts in widgets. You need just specify posts categories, number of posts, enable or disable thumbnails, excerpt, See All Button, and specify excerpts symbols count.
ThemeMakers Testimonials
All your web-site testimonials selected are displayed in this widget. Just make all appropriate settings.
ThemeMakers Contact Us
With the help of this widget you can add your personal or corporate information in order for users and customers easily reach you vie e-mail, phone, etc. You need to set a title for this widget, add e-mail address and phone number.
ThemeMakers Google Map
ThemeMakers Google Map allows you to add map from Google to one of sidebar. Set a title for this widget, specify latitude and longitude, define zoom, select map type and chose either display marker or not.
ThemeMakers Recent Projects
All recent portfolio projects will be displayed in this widget. Add a title, items number to show, enable or disable thumbnails and excerpts, specify excerpt symbols count.
Javascript files are located in js folder. By default theme uses minified version of the all scripts to reduce page loading times and to save your site bandwidth.
jquery.modernizr.js - A small JavaScript library that detects the availability of native implementations for next-generation web technologies
jquery.blackandwhite.min.js - This plug-in can easily convert any colored image into a B&W greyscale image
jquery.selectivizr.min.js - CSS3 pseudo-class and attribute selectors for IE 6-8
jquery.cycle.all.js - A slideshow plugin that supports many different types of transition effects
jquery.easing-1.3.min.js - More easing options for sliders
mediaelement-and-player.min.js - HTML5 audio and video players in pure HTML and CSS
jquery.fancybox.pack.js - Fancy lightbox alternative
jquery.jquery.flexslider-min.js - An awesome, fully responsive jQuery slider toolkit
Let's view each one in details.
Simply enter text to show and select alert type.
In Counter options pop-up window you need to set data speed (in milliseconds), then add new items. Also there is an option to add animation effect for your elements added.
It's easy to set, you just need choose an icon, title and content for each next item. All items are dragable in case you need to change their order
Just select staff item and add the animation effect. Make sure that your images for Staff items are no less than 252x270 px, otherwise it will show "No image" cover.
to edit this contact form. Nex you'll get special contact form constructor
All blocks are dragable, in case you need to change blocks order simply drag and drop them. 
