Help & Instructions

Creatica WordPress Theme by Skywarrior Themes

Welcome to the getting started guide for Creatica WordPress theme! Thanks for purchasing one of our awesome themes!

This document will cover the most important functionality of the theme and will help you start using your Creatica based website.

Need support? Go to support.skywarriorthemes.com

Installation

To install Creatica you must have a working version of WordPress already installed. For more info on how to install WordPress please see the WordPress Codex: http://codex.WordPress.org/Installing_WordPress

Once you have a running version of WordPress, extract the zipped package downloaded from Mojo Marketplace to your desktop. In the extracted folder you will find the Creatica.zip file, which is the installable WordPress theme file.

You can install the theme in two ways:

  • FTP: Extract Creatica.zip file and upload the extracted folder to the /wp-content/themes/ folder on your server. Change the ftp client transfer mode to Binary if you haven't done it already: Click here if you don't know how.

  • WordPress: Navigate to the Appearance -> Add New Themes -> Upload page. Select the Creatica.zip file. Press the Install Now button to upload and install the theme.

After uploading the theme, you have to activate it. Navigate to the Appearance -> Themes page to activate the theme.




Changing the URL structure

To change the URL structure so the URL looks more user-friendly (and will also improve your SEO) navigate to Settings -> Permalinks and under 'Common Settings' select 'Post name' or any other option except Plain.

Installing the demo data

Select Creatica > Demo importer button from your WP admin panel to access demo importer section.

This section allows you to view all demos available live by pressing view demo (Demo Agency in the image). This will take you to our demo page. Everything you see there (including images) will be imported using our demo import.

Once you decide which theme you would like to use, click on the import demo button, and confirm it. Please do not navigate outside the page while the data is being imported. You will see Pleases wait... information with loading icon (Demo App in the image). After the data is successfully installed, a success message should pop up and the button should be grayed out.

Note: Demo import doesn't remove your database content. It just add content to it. Using database import more than once will add same content again.

Admin panel options

All theme related settings are located in Theme options. If you want to do something, and you are not sure where could that be, check here first.

Admin panel options are divided in several categories, where some of them can have sub-categories. You can also find a Creatica instructions button which will lead you tho this webpage. Other than that, you can notice following buttons:

  • Save Changes - this will save all setting changes made in that section.
  • Reset Section - this will reset all setting changes made in that section to default state.
  • Reset All - this will reset all settings in all sections to default state.

To customize the look and feel of Creatica you need to use the Theme Options panel:

You can access it by pressing Creatica menu item in your wordpress admin sidebar:

General Settings

    General Settings
  • Upload your logo - Upload a logo image which will be used in your header.
  • Upload favicon - Upload image which will be used as small icon in your browser tab.
  • Enable smooth scroll - Makes scrolling more fluent.
  • To top - Once you scroll down a bit, you can press this button to get back to the top.
  • One page template - Whole website in one page, you can find more info here.
  • Choose website general color - Main color of your theme. This affects different elements in your website.
  • Choose website background color - General background color. Can be overwritten by page background if needed.
  • Page preloader
  • Enable page preloading - Shows blank page with a loading icon while loading actual page.
  • Loading icon - Icon which will be used while loading. You can choose between 11 different icons.
  • Preloader icon color - Add a color to your icon.
  • Preloader background color - Background color.

  • Back to navigation

Header

    Header General Settings
  • Background Color - Set a header background color.
  • Switch to left position - Move your header to the left instead of top. You will get different options if this option is ON or OFF.
  • While ON
  • Header Width (in px) - Set a side header width.
  • Background color for side header - Set a side header background color.
  • Side header logo - Set a logo for side header.
  • While OFF
  • Header Layout - Choose one of 6 layouts. Big rectangle shows your logo position, smaller rectangles represent nav menu and 3 stripes represent burger menu (or additional items).
  • Header Height - Set your header height in px.
  • Header fullwidth - Make your header fullwidth.
  • Header Style - You can choose fixed or regular header styles. Fixed style enables you to set header background color and text color.
  • Background color for fixed header - General background color. Can be overwritten by page background if needed. Note: This is available only with fixed header style.
  • Text color in fixed header - Select font color in fixed header.Note: This is available only with fixed header style.
  • Enable Social icons - If on you will have social icons previously selected in Socail Media section of theme options.
  • Search Settings
  • Enable Search - Enables search feature in your header. Also enables additional search settings.
  • If search is enabled
  • Enable Autocomplete Search - Icon which will be used while loading. You can choose between 11 different icons.
  • Search Background Color - Add a color to your icon.
  • Search Font Color - Background color.

  • Back to navigation

Menu Settings

    Menu General Settings
  • Menu Hover Effects - Choose one of 7 additional effects on mouse hover for your menu.
  • Menu Font - Different options for font customization like choosing a font and its size and color. Align your font to the left, right, center etc. Set letter spacing or line height. More info here
  • Menu Hover Color - A color which will be shown once you hover your cursor over menu.
  • Dropdown Menu
  • Dropdown Menu Font - Different options for font customization. More info here
  • Dropdown Menu Link Hover Color - Color of link in dropdown while hovering.
  • Dropdown Menu Background Color - Dropdown menu background color.
  • Dropdown Menu Separator Color - Change color of line between two dropdown menu elements.
  • Burger Menu
  • Color - Choose color of your burger menu icon.
  • Full Screen Background Color - Choose a color of background which will be displayed when you click on burger icon.
  • Item Background Hover Color - Choose a background color of items in burger menu.

  • Back to navigation

Page Header

    Header General Settings
  • Show Page Header - This will enable or disable page header.
  • Select Default Background Image - Upload a default header background image.
  • Page Subtitle Breadcrumbs - Enable or disable headcrumbs in header.
  • Enable Header Parallax Effects - Enable or disable effect while scrolling, where header image scrolls slower than page itself.
  • Page Header Tint - Add an overlay effect with selected color for easier reading.
  • Header Typography
  • Page Heading Title Font - Different options for heading title font customization. More info here
  • Page Heading Subtitle Font - Different options for heading subtitle font customization. More info here

  • Back to navigation

Typography

    Explanation
  • Font Family- choose font family to set design of your font.
  • Font Subsets- subset of selected font family.
  • Font Weight & Style- basicaly define how thick will letters be (like bold).
  • Text Align- sets text position in general (left, right, centered, justified...)
  • Font Size- size of font in pixels.
  • Line Height- gap size between two rows in pixels.
  • Letter Spacing- gap size between letters in pixels.
  • Font Color- choose font color.
  • Text Transform- make your text UPPERCASE or lowercase etc.
    General HTML elements
  • Body Font - Body font is basic font used for text.
  • Anchor - Here you can modify linked text.
  • Anchor Hover - Choose different style for linked text while hovering.
  • Heading 1-6 - Customize each heading separately. Heading 1 is the biggest one, heading 6 is the smallest one.
  • Italic - Customize all italic fonts in your website.
  • Strong - Customize all bold fonts in your website.
  • Form Labels - Customize your form fonts.
  • Other elements
  • Widget Title - Give your widget titles unique look.

  • Back to navigation

Portfolio

    Layout
  • Portfolio Homepage - Set one of your pages as portfolio homepage.
  • Portfolio Navigation Style - Choose one of two styles (Navigation with image or simple navigation), or don't use navigation at all.
  • Sharing options
  • Social Media Sharing Buttons - Enable or disable sharing button on portfolio single page. Supported social networks are Facebook, Twitter and Google+.

  • Back to navigation

WooCommerce

    Woo General Settings
  • Enable cart in Nav - Enable or disable shopping cart in navigation.
  • Show cart in WooComerce pages - This option is available only if previous one is set to ON. If checked, shopping cart will be shown in WooCommerce pages only.
  • Shopping Cart Background Color - Set shopping cart background color.
  • Shopping Cart Font Color - Set shopping cart font color.
  • Layout
  • Main Shop Page Layour - Set layout of main shop page to right/left or no sidebar.
  • Single Product Page Layout - Set layout of main shop page to right/left or no sidebar.

  • Back to navigation

Footer

    Footer General Settings

    Main Footer Area - Enables footer area and gives 6 more options for customization.

  • Footer Columns - Select how many columns will be available in footer. You can have at least one, and at most 4 columns.
  • Main Footer Area Background Image - Add a background image to the main footer area.
  • Main Footer Area Background Image Repeat - Set repeat option for background. Choose between Cover, Repeat and No repeat.
  • Main Footer Area Color - Select background color for main footer area.
  • Main Footer Area Top Padding - Add custom top padding to your footer.
  • Main Footer Area Bottom Padding - Add custom bottom padding to your footer.

  • Sub Footer Area - Enables sub footer area and gives 3 more options for customization.

  • Sub Footer Area Color - Set a color of sub footer area.
  • Footer Copyright Section Text - Set copyright section text. You can use HTML code also.
  • Enable Social Icons? - Add social icons to your sub footer.
  • Typography
  • Footer Widget Areas Font - Footer Widget Areas Font. More info here
  • Footer General Font - Specify general font properties for footer. More info here
  • Subfooter Font Color - Subfooter Font Color.

  • Back to navigation

Blog

    Blog Feed
  • Blog Page Template - Select one of six available templates. You can choose left sidebar, right sidebar or full width, available as standard or masonry type.
  • Number Of Posts - Set number of posts which will be shown in blog feed page.
  • Posts Animation - Choose one of seven appearing effects.
  • Single Page
  • Blog Single Layout Type - Select layout for single page. Available layouts are left sidebar, right sidebar and full width.
  • Social Media Sharing Buttons - Enable social media sharing button in the bottom right corner. Supported social networks are Facebook, Twitter and Google+.
  • Show author section in single page - This option enables or disables author section in single post page..

  • Back to navigation

Social Media

  • Facebook
  • Twitter
  • Google+
  • Vimeo
  • Dribbble
  • Pinterest
  • Youtube
  • Tumblr
  • LinkedIn
  • RSS
  • Behance
  • Flickr
  • Spotify
  • Steam
  • Instagram
  • GitHub
  • StackExchange
  • SoundCloud
  • VK
  • Vine

  • Back to navigation

Demo Importer

If you want to change your website completely, you can visit this section. Importing demo content is available in one click.

Choose one of many demos available, and find the one which suits you the best.

You can find more info here

Import/Export

This place will allow you fast backup of your theme options settings. You can import your backup or export a new one whenever you want.

Setting up the homepage

If you want to have different homepage than provided in demo, you can use Visual Composer plugin to make one. You can find more info on Visual Composer and making pages here.

Now that you have successfully created your home page, head to SettingsReading in your WordPress admin panel. In the Front page displays setting choose the A static page (select below) option. Select the page you have just created from Front page select menu and save changes.

Widgets

This template supports 7 widget-ready areas: 4 for the footer area, 1 for the blog sidebar, 1 page sidebar and 1 for WooCommerce pages.

Adding widgets is very easy, just head to 'Appearance' and then 'Widgets'.

Here you will be able to drag and drop the widgets that you want in one of the four sidebars.

More info on these widget areas:

  • Blog sidebar - widgets added in this area will be visible in pages using blog template.

  • Page sidebar - widgets added in this area will be visible in every page which has sidebar enabled.

  • Footer widget areas - You have 4 of them available. Each of them corresponds to one footer column. Footer columns can be set in theme options > footer section. Once you choose number of used columns, you can start adding widgets to them.

  • WooCommerce sidebar - It is available only when WooCommerce plugin is enabled. Sidebar will be used in Woocommerce related pages - shop for example.

Adding widgets to sidebar:

  • Drag and drop - easier method. Just drag widget to sidebar of your choice and drop it there.
  • Left click on item you want, select a widget location, press Add widget.

Creating pages

Creatica uses Visual Composer addon for page creation. Visual Composer is a tool that gives you full control over your WordPress pages with a nice drag and drop editor. You can use it to make your homepage, as well as other pages on your website.

As we said, Visual Composer is a tool and if you do not know how to use it - we suggest to visit Visual Composer's website: http://vc.wpbakery.com/video-academy/. There you will find a complete set of video tutorials that will help you get started with Visual Composer.

We will show you the basics of making pages now.

First thing we want to do is using Wordpress to make a new page. You can do it in several ways:

Once we made it we can now focus on different sections:

  • Page title - This will be page name, which will be used in permalinks. You will see permalink as soon as you enter some page title.
  • Page content - Text area which enables you to see page code, or if backend editor is enabled, you will see Visual Composer blocks here.
  • Page header - this section overrides all global settings you have and it will apply specific options only to page you are editing at the moment. So if you decide to show header everywhere, but to exclude it in this page, it is possible. Also you can set different image, show breadcrumbs if you want or maybe some unique text instead of breadcrumbs.
  • Page color - You can set different background color for each page by editing this field. It will override global page background color.
  • Publish - managing your page. Edit page visibility, publish page or delete it, set it as draft or preview your changes.
  • Page attributes - Select specific page template, but remember it will override all content in page content section.
  • Featured image - Once you set this image it will be used as preview image in front end.
Adding content using Visual Composer.

Click on backend editor button and you will get Visual Composer editor. You will see now 3 buttons: Add Element, Add Text Block and Add Template.

Lets start with the simpliest one, Add Text Block. Once you press that green button, VC will insert an text block with some predefined text.

Next button we will cover is blue Add Element button. Pressing this button will open a large VC block library where you can see all blocks available to you. Also, there are category tabs at the top and search field to make your search faster. Clicking on any of these blocks will insert that block in page and block settings window will appear.

And the last, yellow button Add Template, will open a VC template library, where you can select some template and add it in your page. It is also possible to preview them before adding. Don't mistake these templates with page templates from Page Attributes section.

Editing blocks using Visual Composer.

After we insert our block, we want to modify it. VC has simple solution for this also. Hover your cursor over block and you will see couple of options: Drag to move, Edit, Clone and Delete with block name after.

Once you press edit button, block Settings window will appear. Each block has different settings and fields, so we suggest visiting VC website for detailed tutorials. Link can be found here

.
Page templates

While the content of your WordPress pages can be controlled via Visual Composer, there is also few special page templates, like WooCommerce or blog templates. Page templates often have special layouts or even special functionality which can be changed only by editing template code.

'Blog' templates won't display any page content (that includes Visual Composer content), but will instead show a list of your blog posts.

'WooCommerce template will show product list.

You can assign templates to pages by editing the Template field in Page Attributes section when creating / editing a page.

Skywarrior Visual Composer blocks

We have made couple of useful blocks with different effects. You can find them in Tab named "by Skywarrior" once you hit Add Element button. Also, all of their names are starting with SW.

    Sliders

    Sliders will show content in a single row.

  • SW Image Slider - Add images which will be used in this slider.
  • SW Post Slider - Define post category (or categories) which will be included in this slider.
  • SW Woo Slider - This slider will show WooCommerce product categories.
  • SW Post Slider and SW Woo Slider

    Galleries

    Galleries will show content in multiple rows.

  • SW Isotope Image Gallery - Add images which will be used in this gallery.
  • SW Isotope Portfolio Gallery - Select portfolio categories which will be used in this gallery.
  • SW Isotope Post Gallery - Select post categories which will be used in this gallery.
  • SW Isotope Woo Gallery - Select woocommerce categories which will be used in this gallery.
  • SW Isotope Portfolio Gallery

Ultimate Visual Composer Addons plugin

Check our tutorial on Ultimate VC addons plugin.




Important: Most of these Ultimate VC blocks have their own tutorial, which you can find once you edit block, or in plugin website:

Once you are in block settings, just scroll at the very bottom and you will find a link to tutorial.

Portfolio

Portfolio pages are the best way to present your work. We offer a simple solution to make great portfolio pages. Portfolio is a page which acts like a posts, since it copies its structure. First thing we need to do is to make some categories for our portfolio pages. Once in your website backend, you will notice portfolio item in admin sidebar. Hover it and you will see categories, click on categories and make a new one. As soon as you are finished adding categories, you can start making portfolio pages. We talked about making pages in Creating pages using VC and about Skywarrior VC blocks. Well, there is a block called SW Isotope Portfolio block, which can display portfolio categories selected under block settings. Unlike regular page, portfolio page has navigation at the bottom which looks like this:

As you can see you can navigate to the left, right or to the specific portfolio page. Navigation, its style and navigation page can be set under theme options > portfolio settings.




One page template

One of the most interesting features of this theme is One page template. Your website is using single page to show all content. First thing that needs to be done is visiting theme options > general settings, and switching One Page Template to ON.

Setting up blog

Blog posts can be added / managed in Posts section of your WordPress admin panel.

Creating a blog post is as easy as going to Posts -> Add New, inputting a title, post content, uploading an image and setting it as a post's featured image (in the bottom right corner of the page). Once you have written a post, you can publish it by pressing the blue Publish button in the right column.

Blog posts will appear on pages with Blog page template - please go to Pages section to learn how to assign a template to a page.

WooCommerce - Set up your own shop

Now you can add your own shop to your site with WooCommerce compatibility. To get started you will need to install the free WooCommerce plugin, which you can do from Plugins section of your WordPress admin panel. Here is a list of external documentation that you may need to work with WooCommerce:

Further help

What we can help you with

We can help you with any questions about how the theme works and any bugs or errors you might find, for example:

  • Which file is some particular code in?
  • What can the theme do (and what it can't do)?
  • Are there future updates and enhancements planned?
  • I found a bug/error!

What we cannot help you with

Mojo Marketplace does not require authors to give support in any way shape or form, nor does your purchase of a Mojo Marketplace item come with any guarantee of support in any way. However, we still spend a great deal of time each week providing support for our themes because it's important to us that you get a top-notch product and service.

That said, it is not feasible for us time-wise to provide support beyond questions about how the theme works and fixing any bugs or errors. This includes:

  • Customizing the theme
  • Adding or modifying the theme functionality
  • Teaching you how to use WordPress
  • Teaching you how to use image editing programs like Photoshop
  • Teaching you how to code
  • Support for external plugins

Understood, take me to the support forum!

If you believe that you have found any errors or bugs, do not hesitate to let us know via our support forum. We will try to get it fixed as soon as possible.

Do you like Creatica? Rate it!

We hope you guys enjoy using Creatica! If you are happy with it, please don't forget to rate it on Mojo marketplace! (We will love you forever ^^)