Start

klasik

Retina Responsive Wordpress Theme


Created: 06/06/2013

latest Update: 06/06/2013

By: Umbrella

Email: info@umbrella.al

 

Klasik is a minimalistic wordpress creative theme.

Build on a clean and classic design, and in a good thought funcionality Klasik can be your best choice for a minimalist blog, portfolio, gallery, presenting your work or photographies. Klasik is a simple to use and it's branding features gives you a great and powerful options to customize colors and fonts so you can simply make your own style. Also four different types of home page templates gives you opportunity to to be more unique.

link to PSD files:  here

 

Features

Setup

Just upload klasik.zip via theme uploaded on your wp-admin and you're ready to go.

If you get any error after you installed the theme than this could happen :

1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead
2.Or delete the Theme folder and install .zip file which is in this package

Options

Main Options

Branding Options

Header Options

Footer Options

Main

Main Options

Branding

Branding Options

 

Simply you can pick a color for every color fields above, just like this:

branding

Home 1

Home1 Options

Homepage1 comes with 2 different styles that you can choose from the Design field. Klasik and Static.

The Klasik Design shows your albums in it's way so it makes your albums in the size that will look better on the "klasik style". If you'll choose this style we will recommend the image sizes for your galleries that will be shown on home page:

First Album - 285 x 341

Second Album - 315 x 217

Third Album - 315 x 217

Forth Album - 651 x 353

Fifth Album - 285 x 227

modes

 

You can choose a mode to make images Gray scale or not. If you select this option than you can select Colorize Image effect that randomly will make a album image colored.

Note: if you check this effect and you didn't select Image Gray scale thew will turn grayscale randomly.

Or you can prefer Random Hover Effect that will animate your home albums as in mouse hover. This will take effect only when your not moving your cursor.

 

Static Design will make your home albums in the same size 300 x 200 and show 3 in a row. So for a simplicity and great looking you can choose Static Design.

 

You can change the views between the Klasik and Static by clicking the 2 button on Home1. This will change the view by Ajax (so no reload is needed).

changeView

 

So to get all  the Galleries to display on the home1 just  drag them to the position you want them to be.

home2

 

Home 2

Home2 Options

Home Page 2 is good selection for minimalist home page. Just choose your gallery posts that you want to show and your ready to go.

home2

Best picture size for Home 2 will be 720 x 390.

Note: less than 3 posts will not be shown on this page template.

Home 3

Home 3 Options

 

To setup the Home 3 Page just create a Page and select the template as Home 3

To select some works to be displayed  in the slider you can just drag and drop them.

home3slider

 

 

Home 3 will also display your latest works, services and blog. So you can change the name of the title.

Also you can disable Latest works, services and blogs.

home3options

 

 

Works - Template

Works Options

This template is created to present the galleries that you made.

You can add also  content to it  so you may use it to describe your  work in a brief.

The 'works on page' filed is a number that you will need add so this field will display the works when the page is loaded.

The "Load More" field is also a number that you will need to add so this field will display how many works will be shown when the user presses the Load More button

works

 

Services

To create a Service is easy, is just the same like creating a post. Just go to the admin panel and click Services.

You can create as many services as you like.

You need to add the name of the service, the content and the also you can choose a icon for that services. We support Font awesome so you can choose between 316 icon for you service.

Perhaps you have another website for that specific service so you can add the link in this web that will redirect you to that site.

 

services

 

Service 1 & 2 - Template

Services 1 and 2 template have the same purpose to display you services.

The difference is in the design.

Other difference is that the service 2 has more space to display the content. So in services 1 you have a "view more" button that will redirect you to a page that will be displayed the full content.

 

There are also a section "Partners".

You can add a image (logo) of you partners and a link that will redirect you to the partner website

servicesTemplate

 

 

Post - Blog Template

Blog Options

You will need to add the featured image. This featured image will Present that blog post and also will be shown inside the blog page (single.php)

About - Template

About Options

about-page

 

 

Simply add ass many paragraphs as you want in the 'Paragraphs' section. Use add a Paragraphs to add more rows.

 

Same as the Paragraphs you can add team members in the "Team" Section.

In the Team section you will also need to add there images, full name, description, Social networks.

Contact - Template

Contact Options

cantact

Short codes

On every page you can use shortcodes! On WYSIWYG (What You See Is What You Get) area you can an simply pres shortcode buttons on the toolbox and write the content of it.

 

Heading tags are simply to use, just click on the Heading tag you want and write your text inside [Hn]tags[/Hn]! (n-represents hedings number, like H1 is bigger and H6 is smaller one).

 

Also Buttons are too simply. Choose one from toolbox (which color and size you want) and just on te link part write your url and between opened and closed brackets write the button title (name).

 

The same simplicity goes on alerts too.

 

Videos can be added in the same way for youtube and vimeo.

Here is the sample:

the ID is the last part on the link, like this:

youtube

[youtube width="450" height="300" id="8ptfyhBjXj8" ][/youtube]

vimeo example:

vimeo

 

 

Accordions have a construction like this.

[accordion]
[accordion_item title="Title1"]For at least 40,000.[/accordion_item]
[accordion_item title="Title2"]A highly developed[/accordion_item]
[/accordion]

Just replace the “Title1” with your title and the text with your content.
To add more accordions just copy one of the existing and change the tile and conent. Careful with the starting & ending tags [accordion][/accordion]

 

Tabs has a similar structure with tags too:

[tabgroup]
[tab title="Tab1"]The earliest.[/tab]
[tab title="Tab2"]A highly.[/tab]
[/tabgroup]

Just replace the “Tab1” with your title and “the earliest” with your content and you're done. To add more tabs, just copy one of the lines ex. [tab title="Tab1"]The earliest.[/tab] and edit the data in it.

 

On Sliders you should choose a theme for it. Available themes are: "Default, Minimalist, Round, Clean, Square".

A size: "Large, Medium, Small".

Note: If you don't choose a size it will be large by default.

An effect and of course an image source. You have to write the source, NOT adding a media. You can get the sources of images by pressing "Add Media" button, selecting an image, and copying the link of the image in your right side on the properties panel.

Note: If you let the effect section blank it will show on "fade" effect by default.

Note: Be careful on the Image Sizes you select!!!

recommended image sizes are:

Large: 800 x 300.

Medium: 500 x 200

Small: 200 x 100

 

That's all. Here is the list of slider effects:

cube
cubeRandom
block
cubeStop
cubeHide
cubeSize
horizontal
showBars
showBarsRandom
tube
fade
fadeFour
paralell
blind
blindHeight
blindWidth
directionTop
directionBottom
directionRight
directionLeft
cubeStopRandom
cubeSpread
cubeJelly
glassCube
glassBlock
circles
circlesInside
circlesRotate
cubeShow
upBars
downBars
hideBars
swapBars
swapBarsBack
swapBlocks
cut
random
randomSmart

 

Font Awesome is a shortcode to add icons with up to 316 icons.

It's easy to add an icon anywhere you want, just like this:

[fontAwesome name="icon-name" size="icon-size"] [/fontAwesome]

 

You can use 3 different sizes, like:  icon-large, icon-2x, icon-3x, icon-4x, or leave it blank for normal size.

here they are a list of icons you can use:

icon-glass
icon-music
icon-search
icon-envelope-alt
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file-alt
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key
icon-cogs
icon-comments
icon-thumbs-up-alt
icon-thumbs-down-alt
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter
icon-facebook
icon-github
icon-unlock
icon-credit-card
icon-rss
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud
icon-beaker
icon-cut
icon-copy
icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck
icon-pinterest
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope
icon-linkedin
icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee
icon-food
icon-file-text-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign-alt
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop
icon-tablet
icon-mobile-phone
icon-circle-blank
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt
icon-expand-alt
icon-collapse-alt
icon-smile
icon-frown
icon-meh
icon-gamepad
icon-keyboard
icon-flag-alt
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-mail-reply-all
icon-star-half-empty
icon-location-arrow
icon-crop
icon-code-fork
icon-unlink
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle-piece
icon-microphone
icon-microphone-off
icon-shield
icon-calendar-empty
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-sign-down
icon-html5
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-rss-sign
icon-play-sign
icon-ticket
icon-minus-sign-alt
icon-check-minus
icon-level-up
icon-level-down
icon-check-sign
icon-edit-sign
icon-external-link-sign
icon-share-sign
icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-eur
icon-gbp
icon-usd
icon-inr
icon-jpy
icon-cny
icon-krw
icon-btc
icon-file
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up
icon-thumbs-down
icon-youtube-sign
icon-youtube
icon-xing
icon-xing-sign
icon-youtube-play
icon-dropbox
icon-stackexchange
icon-instagram
icon-flickr
icon-adn
icon-bitbucket
icon-bitbucket-sign
icon-tumblr
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows
icon-android
icon-linux
icon-dribble
icon-skype
icon-foursquare
icon-trello
icon-female
icon-male
icon-gittip
icon-sun
icon-moon
icon-archive
icon-bug
icon-vk
icon-weibo
icon-renren

 

Widgets (Sidebars)

You have two options for widgets:

To display them on a main sidebar or on the footer sidebar.

Main Sidebar can be displayed in left or right side. (You can change it's side by going to Options > Main).

Main sidebar will be displayed on: blog page, single blog page, default pages and archives.

 

Or the Footer Sidebar will be displayed on every page you like.

To set them up just go to Appearance > Widget and drag and drop the widgets by your wish.

 

We offer also 2 custom widgets.

Twitter

Just drag and drop the Twitter widget and add the follow link without an @ ... ex: for @9GAG just add 9GAG

Find us

Just drag and drop the Find us widget and fill the text boxes with the Address, Phone and e-mail