Overview

Install

Installing your new theme is very simple.

Follow these steps

  1. Clean your wordpress install from all contents you don't need ( optional ).
  2. Download the ZIP package from Themeforest and Unzip it.
  3. Within the unzipped folder you will see a file named deca_v1.9.zip
  4. Log into your Wordpress Dashboard and click ->Appearance -> Themes.
  5. Next click on Add New then click on Upload Theme.
  6. Click Browse then locate the file named deca_v1.9.zip and click Install Now.
  7. After the theme has installed click on Activate Theme and you are all set! Deca is now installed!
  8. Note - After activating the theme do not forget to install the following plugins: Visual Composer, Contact Form 7 and Visual Composer Responsive Google Map.
  9. Install the WP Importer Plugin from Tools > Import and import there our xml file ( location folder demo_data ).
    Note The import data will make your site similar to the demo but without the images, it will use a placeholder image instead.
  10. Select the Home Page ( or other homes you like ) as static frontpage in the wordpress's Setting -> Reading options.
  11. Active the main menu in Appearange -> Menus.
  12. Import our demo Options in Deca Options -> Import/Export -> Import from file using the code we attached in the options.txt file. ( You can find it in our package into the folder demo_data ).
  13. Create your own widgets.

Note - If you installed the theme in already existing WP site please regenerate your thumbnail using a specific plugin ( we advice ->Regenerate Thumbnails ).

Theme Options

The theme options are linked like 'Deca' in the left wp bar, this is the control panel of the theme. Inside you can edit the global setting of the theme: set logo, favicon, fonts, headers, footer, socials, add a custom css, js and much more..

General Setting

This section allows to set the logos (Border Header, Border Menu, Top Header), a favicon, and all other app icons ( Apple Touch Icons ).

Styling

In the styling theme you can set a primary, secondary and details fonts, the menu border items and the menu top items, the body and content colors (primary font), the headings and big titles (secondary font) and details and meta info (details font).
In adding you can edit anything you want: headings fonts, font-weight, font-style, font-size, line-height, word-spacing, letter-spacing and font-color.

Header

In this tab you can set the header for all post page of the theme.
You can set the top or border header, if you select top header, you can choose between 4 types of header: with white background, black background or transparent (with menu white or gray). Use the transparent header if you have set an hero background. In adding you can enable or disable the search icon in the main menu.
and you can enalbe or disable the page navigation in all pages (this works only if you have set the border menu).

Footer

This tab allows you to set the number of footer widgets columns. In adding you can set the url for your social pages, thes will be shown at the bottom of the site or in the bottom of border header.

Home Page

To create your homepage, create a new page ( left wp bar -> pages -> add new ) then add a title and set as model page: Visual Composer page.
After set the model page use the elements of Visual Composer to built your layout.
All elements are detailed here.
To learn how to customize the homepage, clone or use an homepage already created ( only after to have installed the demo content xml ) and then start to edit your.

Post Types

In this section you can handle some settings for the post types of the themes which: Posts, Projects and Case Studies..
Here you can enable or disable the related items or enable or disable the comments on posts.

Shop

Here, you can set the header type for shop pages (woocommerce pages),
you can set your prefer header between 2 type: advanced and classic (simple title).
If you choose simple title you will see the classic hader with big title and vertical title on the left. The title it came from the title page.
If you choose an advanced header, you could set the background, overlay color, title, title color and enable or disable the breadcrumb.
You can set the product columns for your archive shop between 2, 3 or 4 columns.
Set also if you want display the related items in single products.<7br> Note - The columns products it's equald to related section.
At the end, you can switch on or off the sidebar for all shop pages.

Advanced

In this tab are included some extra options.
You can active or deactive the page loader in all site or only in home.
You can add a custom text for the Error page ( html allows ).
You can add a custom JS code in header ( ex. for google analytics ).
You can add a custom JS code in footer ( useful for scripts and codes ).
you can add a custom CSS ( useful to edit the style of the theme without open any file ). You can enable or disable the developer's notices.

Import/Export

Use this tab if you want import or export the options data.
If you want import options click on import from file or import from url.
To import the demo options use import from file and paste inside the text area the txt content data.
Otherwise, if you want export data options click on copy data and then copy the data code displayed below.
You can also dowload the json data options or copy the export url.

Visual Composer

Note - If you don't know VC Plugin, look first this detailed guide here -> VC Guide

Note - If you want create a layout full with, you can first set the Template -> Visual Composer Page in yuor page.
You can use the VC elements in a standard page or standard post too but it will add the elements in the content box.

By follow, ther's a list of all VC Deca's elements and some VC elements edited and improved for this theme.

Row

Use 'Row' element to put inside anything other vc elements: columns, rich text, html text, and all other addons vc.
Row Settings -> General - > Background Source - you can select the source for your background: parallax image, design options ( default VC ) or Video background.
If you have selected the parallax source, upload the image background in the area below
If you have selected the video source, paste the YouTube id in the area below.
If you have selected the design options ( from Row Setting -> Design Options ) you can upload an image or add a static color as background and much more..
Text Color - Set the color for the text inside row. You can select between light or dark ( white or black ).
Overlay Effect - Set the background overlay on your row. You can select between dark gradient, white gradient.
OnePage Menu - Compile this label if you want to link row to a onepage menu button.
Note - if you have added a label in onepage field, you will add a dots in the page navigation. The page navigation is active only in border header on the right side.
Row Settings -> Design Options - You can set the css box ( margin, padding, border ), background color or image ( only for design option source ).
Check the Full Height if you want create a background full screen.
Check the Boxed Container if you want create a row boxed ( bootstrap based - width 1200px ). In adding you can also add an extra class or id at your row. This feature is useful to add a custom css at your row.

Columns

you can set the alignment of text inside: auto, left, right, center, justify.
In adding only in this theme you can also add an animation for your column and content inside it, this is one of the best features that you can find in Deca. For all other options consult the VC official guide here.

Hero Head Type 1

This element adds an heading in your section. Note - Include it always in a row.
You can set your title size ( between 6 size ) and add a separator under title.
You can write a subtitle under the title or leave blank to unset it. You can add an icon to link it in another page (check 'use icon' first to enable the icon), and you can set also a label to show in the right corner of your content.

Hero Head Type 2

This element adds an heading in your section like an hero type 1,
but in this block, you can only set the subtitle or description and the details below.
In adding you can set the space under the title.

Separator

This element adds a simple short line. Use this one to separate sections.
Include this in a row form more customizations.
To add padding on this element, include it in a row and edit the box model of the row.
You can check 'Vertical Orientation' to create a vertical separator.
You can set the divider in full width mode, but this not works in vertical setup.

Service Type 1

This element creates a simple service block adding a title and description.

Service Type 2

This element creates a service block adding a vertical label above the sticky content
You can set multiple icons with links to use them for social block.
In adding you can set also a link url to link this block in another page.

Service Type 3

This element creates a simple service box with icon on the top a title and a description.

Service Type 4

This element creates a simple service box with a background image.
In this block you can set an image background, set height of the box, overlay color, title with link or without and a subtitle.

Quotes

Use this element to create your testimonials slider section.
You can add multiple blockquote and set a text and author for each ones.
You can active the autoplay and the slider delay too.
If you want create a blockquote slider with background, include the testimonials element inside a row, then apply a background image color or parallax in the design section of the row.

Clients

Use this element to create a carousel section in your page.
This element adds a client logo for column. So you must create your row before and then divide it in as many columns as there are clients.
You can add an url for each logo.
Use the media upload to put your logo inside.
If you want create a clients row with background, apply a background image color or parallax in the design section of the row.

Team Member

Use this elements to create a team section in your page.
This element adds a team person for column. So you must create your row before and then divide it in as many columns as there are people.
For each team element you can upload an image, set a name and his role. You can insert up to 4 social networks too.

Banner

This block allows you to add a simple callout in your page adding a title, subtitle and link.
Include this element in a row to make it more cool adding a background image, overlay and spacing.

Callout

Use this element to create a simple full width button with a link inside.
Use the wp link field to link the element in an external page.

Image Frame

Use this elements to create an image with a frame border.
Add an image using the upload media of wordpress and then add a background gradient above your photo.
In adding you can enable your border frame and add a title and the color.

Page Head

This element creates a big header to use as heading page on the top of your custom vc page.
If you compile title and description, the block will add also a vertical title on the left of the title.
Note - If you are using a simple page model (not vc template), the page head is already included in the page template.
If you want you can disable it via meta option at the bottom of the page.
Look the page chapter for more info.

Accordion

This is a classic accordion element edited and well formatted just for this theme.
Add one or multiple tab to create for example a FAQ section.
For each tab you can set a title and write a description.

Tabs

This is a classic tab element formatted just for this theme. You can add one or multiple tabs. For each tab you can add title and description.

SB Google Maps

Use this element to create your custom map.
You can use this element to add feature in your contact page or on the bottom home.
To create a map, you must set the width and height of the map. Set 100% (width) to create a full width map.
You can choose between more than 100 types of colors.
Then go to 'Zoom' panel on the top of window to set the coordinates of the centre of the map,
set the zoom level and enable or disable the zoom control, drag controll and scroll wheel.
Others functions are presents in the 'Controls' panel like 'scale control', street view mode, map type etc..
You can enable the POI indicators in the 'Nearest Places', and many other in the 'Map Layers' panel.
Open 'Miscellaneous' panel to set the language and active the reload on resize, this feature is usefull to block the center of the map when you reduce the window.
To include one or more marker on your map, save the map block, and add inside the marker block.
For each marker you must add the coordinates (latitude and longitude comma separated), upload the marker, and add an html text via wp area text.

Note - Include map element on a row and set it on full width mode ( not check boxed mode ) to make the map full width.

Pricing Title

Use this element to create your pricing area.
Before using this element create a row and then divide it in as many columns as they are the tabs.
For each table you can set a title, mark it as featured, set a price and currency.
Then you can compile your table adding multiple features. For each feature you can add a label.
In adding you can set a button link below the feature list.

Blog Grid

Use this element to create your custom loop of posts ( blog ) in your page or row.
This element will show a packery grid of posts with media and caption.
The best use of this element is like a section blog in your home.
Note - Before set this element make sure that you have already added at least one or more posts in your blog.
After have added some posts, you can set the blog grid.
You can set one category or all ( leaving the field empty ), the limit posts to show, the order and the direction.
In adding you can add a link to expand your loop in an external page.

Blog Feeds

Use this element to create your custom loop of posts ( blog ) in your page or row.
This element will show a list of posts with meta and exceprt.
The best use of this element is like a page blog.
Note - Before set this element make sure that you have already added at least one or more posts in your blog.
After have added some posts, you can set the blog grid.
You can set one category or all ( leaving the field empty ), limit posts to show, the order and the direction.

Blog Media

Use this element to create your custom loop of posts ( blog ) in your page or row.
This element will show a list of posts with media preview, meta and exceprt.
The best use of this element is like a page blog.
Note - Before set this element make sure that you have already adds at least one post in your blog.
After have added some posts, you can set the blog grid.
You can set one category or all ( leaving the field empty ), the limit posts to show, the order and the direction.

Portfolio Grid

Use this element to create your custom loop of items ( projects ) in your page or row.
With this bock you can customize your portfolio layout in 4 different types: masonry & packery, grid or cards.
Note - Before set this element make sure that you have already added at least one or more items in your portfolio.
To create items ( projects ) go to creation project here.
After have adding all items, you can set the portoflio grid.
You can enable or disable the filter category, you can set one category or all ( leaving the field empty ). Note if you set one category the filter will not show. Then you can also set the items limit ( integer ), the number of columns, the spacing (narrrow, large or none), set your prefer order ( between: title, date, date modified, slug or random ) and set the direction ( ascending or descending ).
If you have set the Grid type, you must only set the dimension of your items for your layout,
so you can open the panel 'grid options' on the top of window and choose between 5 different sizes.
If you have set the Masonry type, you must open the 'masonry option' panel and write the series of the sizes of your items.
To set the sequential of sizes you must write the sizes allowed between (xs,s,m,l,xl), you can use uppercase or lowercase, each size it must be follow by a comma.

If you have set the Packery type, you must open the 'masonry option' panel as done for masonry and write the series of the sizes of your items.
Then you have to open the 'Packery Options' and set the number for how many items you want to show a big (double width) item. The big item will create the packery layout.

p>

If you have set the Cards type, the size settings are equals to the masonry settings.
In adding you can add a link to expand your loop in an external page.

Item Gallery

Use this element to create a simple gallery in your portfolio page or row.
This element creates a gallery thumbs in square grid mode.
For each thumbs you must just upload an image via wp media uploader.
Each images are just ready for the lightbox zoom.
Remember that you can add or leave blank the description area above the gallery.

Gallery

This elements creates a layout of gallery in your page or row.
To create your gallery it's really easy. Set the columns that you want between: 2, 3, 4 or 6,
then set the spacing between items (narrow, large or none), then upload one or multiple thumbs via the wp media uploader.
For each thumb, you can set a title, categories or tags comma separated, set the size of your items between 5 sizes and check the 'double size' item (this feature allows you to create a layout in packery mode).
In adding you can set a link for each thumb so you can link the caption title in an external page.
If you set the link, the image it will be not ready for lighbox zoom.
Remember that you can add a link more to link your layout in an other page.

Case Studies

This element creates a loop of case studdy in your row or page
Note - Before set this element make sure that you have already added at least one or more case in your case studies.
The best use of this element is like a page of case of studies.
You can set one category or all ( leaving the field empty ), the case limit, the columns, the height of box, set the order and direction of your cases.
In adding you can add a link to expand your loop in an external page.

Case List

Use this element to create a block with some development's steps or features in your case study page, use it as first block.
You can set the text left or right ( check 'text right' to set the text on the right, leave blank to set the text on the left).
You can set the traslation of your box using the margin fields.
You can add one or multiple images in your case box.
For each image, you must upload an image via wp media uploader and set the dimension in pixels (height and wifth), then you must set the position of your image using 2 couple of coordinates: Top and Right, Top and Left, Bottom and Right or Bottom and Left, use only one of this couple, leave blank the other two coordinates.

Case Study

Use this element to create a block with a title, description and multiple images.
Use it as a case study block in your case study page after 'Case Study List'.
You can set the text right or left as just described in 'Case List' element, add space on the right or on the left to traslate the container,
add a title an excerpt in your block.
Then adding ore or more images as just described in the 'Case List' element.

Carousel

Use this element to create your gallery carousel.
Set first the images per row, then set the size for the height of carousel, than upload your images.
Note - Remember to upload more images than the number images set per row.
If you set 'Full' column, you will create a carousel slider, set the row before in 'full height' mode to create your hero slider.
If you enable 'Full Height' mode, you will create a carousel full screen.
Add a link on your layout if you want link the carousel in another page.
For each thumb, you can set a title, categories or tags comma separated.
In adding you can set a link for each thumb so you can link the caption title in an external page.

Slider hero

This element create a slider full width in your row.
Set the link to linking the slider in another page.
For each thumb added (upload your thumb via wp media uploader), you can set an overlay background gradient, set a title choosing by 6 different sizes,
set the color of the title, adding a description and set an external link.
Note - if you want create a slider hero, you must enable 'Full Height' mode in the row parent.

Sidebar

This element add a sidebar in your page or row.
You can choose between 6 types of sidebar.
First make sure that you have put one or more widgets in your sidebar selected.

Pages

The theme includes 3 types of model page: Default / Page Sidebar / VC Page
if you want use one of this model change the Template model in the window on the right.

Page - Default

The default page is a standard WP page.
By default the page is full width width margin both on the left and on the right.
You can use it to add a standard content in the area text.
General Settings
Header Type - Here you can set the header type for the current page,
if you set 'border' or 'top', you will override the general settings for this page.
If you set 'Top', you can choose between 4 types of header: white, black, transparent white or transparent gray.
Header Titlebr> - Here you can enable or disable the page header for current page.
Footer Widgets - Here you can enable or disable the footer section at the bottom page.

Page with Sidebar

If you set this model fo page, the page will show a sidebar page on the right of the content.
Note - to show the widgets on sidebar, you should put one or more widgets in the 'Sidebar Page'.
The page sidebar is equals to page standard. You can add title and content in wp content area.
General Settings
Header Type - Here you can set the header type for the current page,
if you set 'border' or 'top', you will override the general settings for this page.
If you set 'Top', you can choose between 4 types of header: white, black, transparent white or transparent gray.
Header Titlebr> - Here you can enable or disable the page header for current page.
Footer Widgets - Here you can enable or disable the footer section at the bottom page.

Visual Composer Page

The page is a built for use better the elements of VC.
Use backend Editor or Frontend Editor to customize your page layout.
You can write also in the area text without using the visual composer but you'll have some graphic issues beacuse the content text will starts under the menu in the top of page.
Note - We advice you to use always VC elements to compose this model page.
General Settings
Header Type - Here you can set the header type for the current page,
if you set 'border' or 'top', you will override the general settings for this page.
If you set 'Top', you can choose between 4 types of header: white, black, transparent white or transparent gray.
Header Titlebr> - not work in this model page.
Footer Widgets - Here you can enable or disable the footer section at the bottom page.

Shop Pages

To create your shop in Deca, install first the Woocommerce free plugin.
After installing will start a wizard to set all woocommerce standard pages.
The standart page which will came added in your site are: 'Shop', 'Cart', Checkout' and 'My Account'.
You can use the standard settings for woocommercce page or you can create yours manually.
To create a page woocommerce manually, you can create a 'Visual Composer' page, then you can add your prefer blocks in your content area like header, testimonials, banner etc.. Then you must put the woocommerce block take it from visual composer block list.
VC already included the standard blocks for woocommerce like 'Cart List', 'Product Archive', 'Checkout list', 'Top Rated', 'Best Sellers' etc..

Projects

Create one or more item portfolio to populate the portfolio layout.

To create your first item go to portfolio -> add new ( wp left bar )
Start to set the title of item ( project ) and then build your layout project using the visual composer.
Note - I advice you to always use the visual composer elements rather than standard area text, because if you use the stardard area text your content it will be placed in full width mode.
Remember to use the Page Head VC element to add an header title at your item ( optional ).
After creating your content, set the a category for it, this will be useful to filter the category project in your loop or portfolio page.
Set the Featured Image at your item, it will be useful to show the thumb of this item in the layout grid.
At the end rember to compile the excerpt field to show a brief description under the title in the caption of thumb.
To show the excerpt, open the label 'Screen Option' on the top of the page.

Case Studies

Create one or more item case study to populate the case studies layout.

To create your first item go to case studies -> add new ( wp left bar )
Start to set the title of item ( case study ) and then build your layout using the visual composer.
Note - I advice you to always use the visual composer elements rather than standard area text, because if you use the stardard area text your content it will be placed in full width mode.
Remember to use the Page Head VC element to add an header title at your item ( optional ).
To build your layout we advise you to use the case studies blocks: 'Case List' and 'Case Study'.
After creating your content, set the a category for it.
Set the Featured Image at your item, it will be useful to show the thumb of this item in the layout grid.
At the end rember to compile the excerpt field to show a brief description under the title in the caption of thumb.
To show the excerpt, open the label 'Screen Option' on the top of the page.

Widgets

Click ->Appearance -> Widgets.
Deca Theme includes some uncommons widgets.

Un Mega Projects

Creates a widgets which shows a list of projects.
Set the items to show, choose the category and set a custom order.
The widget will add also a thumb as preview on the left of the title.

Un Mega Posts

Creates a widgets which shows a list of posts.
Set the posts to show, filter the category and set a custom order.
The widget will add also a thumb as preview on the left of the title.
After have created each widgets, please click ->save to make active the widget.

Flickr Widget

To set your flickr widget, using the original flickr badge and then put the code generated into a simple text widget.
Use the follow link http://www.flickrbadge.com/