Kreativik

Thank you very much for your interest in Kreativik Wordpress template. In this document, we will try to cover the installation and customization of the theme. If you encounter yourself having a trouble with something that is beyond the scope of this help file, please feel fry to use our support system at support.udesign.sk.

Take a look at this video tutorial. It will guide you though the process of installation.

Table of contents

1. Installation of the theme
2. Achieving the correct page structure
3. Setting up the plugins
4. Working with billboard
5. Customizing featured services
6. Setting up the homepage, different variations of homepages
7. Setting up the portfolio
8. Changing the backgrounds
9. Adding pages
10. How to add a full-width page?
11. Adding posts
12. How do I add an Image to the blog post excerpt?

Installation of the theme

If you want to install Kreativik for wordpress properly on your server:

1. First of all, your server should support PHP. You will also need an installation of Wordpress. If you allredy dont have one, download it from here and follow instructions on wordpress site to install it correctly.
2. If you have a running installation of wordpress, place the theme files from download into “themes” folder. The path to this folder should be something like http://yourdomain.com/wp-content/themes/. Make sure that all theme files (without PSDs and help files !) are in the separate folder called “kreativik”. The path to the theme files should be http://yourdomain.com/wp-content/themes/kreativik upon completition of this step.
3. Enter you Wordpress Admin Interface. It should be available at http://yourdomain.com/wp-admin.
4. In the left menu, find appearance tab. Click it. Submenu should appear. Click themes.
5. Next screen should show all of your installed themes. Find kreativik 1.0 by uDesignStudios.
6. Click Activate.

Congratulations! You’ve just successfully installed Kreativik for wordpress on your server!

Achieving the correct page structure

One of the most common question that we have to answer over and over is: How do I achieve the same structure of homepage, blog page etc on my server as it is shown in your live preview?. If this is your case, read the following instructions carefully.

1. Login to your wordpress admin interface
2. In the left menu, click settings, then reading.
3. For Front page displays, select static page.
4. If you haven’t already added page titled “home” yet, do it now (pages >> add new)
5. Pick “home” from the first drop down list.
6. Pick “blog” from the second dropdown list.

This way, your homepage will show no posts whatsoever, (except if you switch it that way via advanced admin option, we will get to it), and your posts will appear under separate “blog” page. Pretty neat. Now, lets move on to some more interesting stuff.

Setting up the plugins

This themes uses two plugins, WP125 and cforms. They are not, for obvious reasons, redistributed with the theme itself, but they are available for free on the internet. You can get WP125 here. cForms is available here.

WP125 Plugin

WP125 Plugin manages your 125×125 adverts in sidebar. It is a really nice plugin, with a lot of features, like click trackings, displaying ads for limited time only etc. To install it, do following:

1. Download the WP125 Plugin from the link above
2. Copy the downloaded files into your plugins folder (http://yourdomain.com/wp-content/plugins)
3. Enter Wordpress Admin interface
4. Select Plugins from the left menu
5. Take a look at the list of available plugins, find WP125, and click Activate

Good job! WP125 Installed. However, we still have to set up a few things to make it work the way we want. But dont, worry. We are almost there.

1. Take a look at left menu in your wp admin, especially the bottom part. There should be new Item called Ads. Click it.
2. Select settings from ads submenu. You should see a list of settings for WP125. For our purpose, the most important are: Number of Ad Slots, Widget Titles, Ad Sales Page and Default Ad.
3. Number of slots: This is the total number of square ads displayed in your sidebar. In our preview, we use 4, but feel free to add as many as you wish.
4. Widget Titles: This is the title of the whole widget, the heading. In our live preview, we use “Our partners”.
5. Ad sales Page: If you have special page with ads pricing and policy, you can put url link to it here. Available slots without Ad will link to that page
6. Default Ad: This is the image that is shown at the slots with no ad. Again, to change it, put url of a new image into the field

Those were the general settings. Now, lets take a look at how we actually add the ads.

1. Go to Ads -> Add / edit.
2. Fill all the fields. Dont forget that image should be 125 x 125px. Also, pay attention to the Slot field. This defines the position of the Ad, with 1, being the top left position.
3. When you’re done, click Save add button.
4. Repeat the process for every other add that you wish to add.
5. Once you’re done, you can swith to Ads -> Manage. All your ads are available at one screen there, you can edit and delete them as you wish.

Regarding WP125, thats about it. If you have any further questions about this plugin, check out its homepage.

cForms plugin

Kreativik uses cForms to handle the contact form. To set it up properly follow the following instructions:

1. Download cForms plugin.
2. Copy the download content into your plugins directory ( http://yourdomain.com/wp-content/plugins ).
3. Enter your WP Admin Interface
4. Select Plugins from the left menu
5. Find cForms, and Activate it.
6. Take a look at the bottom part of your left menu. There should be a new item called “cformsII”. Click it.
7. Welcome to the cforms admin screen. Click Add new form.
8. Type in the form name (e.g form1 – remember this name, it is quite important)
9. I wont go through all the options of cforms (trust me, there is plenty of them) – if you need any special help that is beyond the scope of this file please start your search here.
10. We need to set up the email address which will receive all the messages from form. To this, click Admin Email Message Options in the accordion under menu.
11. Usually, all the mails go to the main wordpress admin email, but we can change it. To do it, please type your email address into the Admin email address(es): field.
12. Once youre done, click update settings in the menu on the right.

We have created our form, it is ready to use. All we have to do now is put into our contact us page. To do this:

1. If you haven’t already created the contact us page, do it now ( Pages -> Add new ).
2. Go to Pages -> edit and click the contact us page.
3. Switch to HTML tab.
4. Insert the following string into page content: <!–cforms name=”form1″–> , with “form1″ being the name of the form you created via cforms interface.
5. Save and update your contact us page

Thats it. Now you have a fully functional contact form.

Working with billboard.

We are very proud of the billboard in this theme. With this billboard, you can actually achieve some really stunning effects only with JS, no Flash is required.
Please make sure that your images are 940 x 376px.
To change billboard slides:

1. Login to the wordpress admin interface
2. Appearance -> kreativik
3. Click on Billboard settings tab.
4. Click on the grey space, upload your image (choose insert into post)
5. Click update options after each slide is added.

Advanced billboard options
You have the possbility to choose the delay between two slides, and the effect of transition.

Delay: Insert the value in miliseconds here (1 second equals 1000 miliseconds, so if you want the delay to be 8 seconds, type 8000).
Effect: You have these possibilities:

• Our slideshow -> sequence of three effects. First is the “random square transition”, Second is “left to right”, and third one is “top to bottom”
• Random square only
• Left to right only
• Top to bottom only

Customizing featured services

Featured services is the section that can be found on the homepage, right below the billboard.

In order to make editing them as easy as possible, we prepared an easy to interface specially for this purpose.
To change featured services:

1. Login into your WP Admin interface.
2. In the menu, click Appearance, then Kreativik.
3. Click on the 3rd tab – featured services .
4. You should see something like this:
   
5. Each Items has its own row. Heading is the first line of text (in bold). Text is the second line. And image is pretty self explanatory.
6. Edit items to fit your needs.
7. Once you’re done, click update options button.

Congrats. Featured services have been changed.

Setting up the homepage, different variations of homepages

We know that our customers may have different needs. Therefore, we tried to make this design usable for wide range of customers. In order to give you even more freedom, we prepared different variation of homepage content. Basically, you can choose one of the following:

1. Homepage with introductory text and little icons with text in the right column.
2. Homepage with introductory text and recent posts in the right column.
3. Homepage with introductory text and recent comments in the right column.
4. Homepage with introductory text and sidebar with widgets in the right column (with the column width ration as on innerpages).

To change the homepage layout, go to Appearance -> Kreativik -> General options. You should see the following screen.

Take a look at the highlighted area. You can choose different option from the highlighted drop down.

Basically, the part that changes is actually only the left part. Everything that is on the right is generated from normal wp page called Home.

Homepage with homepage content and little icons with text in the right column.

As you can see in this image, the homepage content space is divided in 2 parts. Left half consists of heading and some text. This is generated from your page called “Home”.

Now, you probably want to change little services icons in the right column. To do so:

1. Go to Appearance -> Kreativi.
2. Click on the 4th tab. (Homepage services)
3. Following screen should appear:
   
4. Every item has its own row.
5. Heading – The heading of service, highlighted in blue color.
6. Link – Put url here if you want heading to link somewhere.
7. Text – Text of your service description.
8. Image – Image for your service (We do not recommend using icons larger than 48 x 48px here).
9. Confirm your changes by clicking update options once you are done.

Homepage with introductory text and recent posts in the right column.

Homepage with introductory text and recent comments in the right column.

Same as the above, only the left parts is occupied by the recent comments.

Homepage with introductory text and sidebar with widgets in the right column (with the column width ration as on innerpages).

Setting up the portfolio

For those of you, who want a little space to showcase your work, we prepared a portfolio section with integrated PrettyPhoto plugin. Basically,
you upload images through admin interface, then, the thumbnails are cut to proper size, ribbon is added and the bigger image appears upon clicking. Pretty Photo also supports prev / next functionality.

Lets take a look at backend portfolio interface:

About the categories

So, at this point, probably all of you go around thinking: Great, but I dont do portfolio /multimedia/print. This is useless for me. Well, it is not. We include editable PSD file for ribbons. To change ribbons, do the following:

1. Open ribbon.psd file that comes with the package
2. If you dont have the nevis font, please feel free to download it from here.
3. Change the text / colors to whatever you want.
4. Click File -> Save for web and devices, for the format select PNG-24 and make sure that transparency is checked.
5. Name your files ribbon-1.png, ribbon-2.png and ribbon-3.png
6. Upload these image to your images folder. The path to it should be something like: http://yourdomain.com/wp-content/themes/kreativik/images
7. Thats it

Adding new portfolio entries

Again, we tried to make this as simple for you as possible. So here we go:

1. Login to your wordpress admin interface.
2. Appearance -> Kreativik
3. Click on Portfolio tab
4. To add an image click on the grey area are that says Click here to add
5. Upload your image, click insert into post.
6. Pick the category from the dropdown menu.
7. Save your new image by clicking the update options button.
8. Repeat this process until you fill your portfolio with your awesome previews.

How do I add this database of images into my frontend?

Again. Easy.

1. Add new page (you can call it whatever you want, it does not have to be portfolio).
2. Edit this page, turn HTML editing on and [ portfolio ] string into it (including the brackets, but make sure there are no gaps between brackets and string inside them. Example has look like this, otherwise wordpress would insert portfolio section into this doc file.
3. Save your page.
4. Thats it, your visitors are ready to be amazed!

Changing the backrounds

Kreativik comes with 5 background variations. They are:

1. Clean white
2. Parquet
3. Carbon
4. Bokeh
5. Vintage

You can change the background anytime from your theme options. To do so do following:

1. Login to Wp Admin interface
2. From menu go to Appearance -> kreativik.
3. Select first tab – general options.
4. Take a look at the background option.
   
5. Select the background that fits your needs.
6. Save your selection by clicking the update options button.

Adding pages

In order to add pages do following:

1. Login into your WP admin interface.
2. From the left menu: Pagess -> add new
3. Fill the fields as you need to.
4. Save the post by clicking the Publish button

If you want to add page as a subpage, be sure to add her a parrent page (right menu).
You can also edit the order in which pages appear in the navigation. Take a look at the right menu in add page screen. You should see a box called order. Now, all you have to do is enter number. Wordpress will then arrange the order of pages in the way that page with the lowest order value will be the first etc etc. So, for instance, if you have 3 pages called Home, About us and Service, and you want to show them in that order, Home should have order 0, About us 1 and services 3.

How to add a full width page?

So lets say you want to display only your main content and no sidebar (which is basically layout of this doc page). How do you do that?

1. Add a new page as always.
2. In add page screen pay special attention to “custom fields” box.
3. Add new one with the following strings: name: layout, value: full.
4. Update / publish your page.
5. Done.

Adding posts

In order to add posts do following:

1. Login into your WP admin interface.
2. From the left menu: Posts -> add new
3. Fill the fields as you wish.
4. Save the post by clicking the Publish button

How do I add an Image to the blog post excerpt?

Easy to do. While Adding blog post, scroll all the way down to the “Kreativik custom image box”. Upload your image here. It should be 610px wide for best perfomance.