Kinetika Help Guide 1
Hope you enjoy Kinetika theme! 3
Table of Contents Important Links 6 Theme Options - Setting Up Logo 26 Cover Photos 44 Applying Revolution Slider Slides 71 Important Notes 7 Logo for Horizontal Menu and Border Menus 26 Cover Photo - Page Settings 45 Setting Fullscreen Page as Homepage 72 Uploading Kinetika via FTP to Wordpress 8 Logo for Vertical Menu 27 Cover Photo - Changing UI Color 46 Setting Fullscreen Slideshow 73 Activating required Plugins 9 Theme Options - Responsive Logo 28 Cover Photo - Font Settings 47 Readings Settings 74 Installing Plugins 10 Fullscreen Social Footer 29 Fotorama 48 Photo Stories 75 Plugins Activated 11 Fullscreen Social Footer 30 Adding Titles to Fotorama Images 50 Photo Stories 76 Plugins & Theme Activated 12 General Footer 31 Fullscreen Carousel 51 Photo Stories - Upload Images 77 Widgets 13 General Footer 32 Fullscreen Carousel 52 Photo Stories - Page Settings 78 Importing Demos 14 Page Builder 33 Adding Title and Description to Carousel Images 53 Photo Stories - Sort Galleries 79 Importing Demos 15 PageBuilder 34 PhotoWall Lightbox 54 Page Builder 80 Building Main Menu 16 Shortcode Generator 35 Photowall - Lightbox 55 Building with Page Builder 81 Building the Menus 17 Shortcode Generator Overview 36 Photowall - Lightbox Titles & Description 56 Building Pagebuilder Pages 82 - Create Menu 17 Page Background Settings 37 PhotoWall Portfolio 57 OnePage Site 83 Building the Menus 18 Building Fullscreen Pages 38 Photowall - Portfolio Items 58 Building OnePage 84 - Create an Item 18 Slideshows 38 Fullscreen Vimeo Video 59 OnePage Menu 85 Building the Menus 19 KenBurns 38 Fullscreen Vimeo Video 60 OnePage Menu - Home Link 86 - Displaying Menu Sections - Screen Options 19 Cover Photo 38 Fullscreen Youtube Video 61 Setting OnePage as Homepage 87 Building the Menus 20 Photowall 38 Fullscreen Youtube 62 Creating Portfolios 88 - Adding more items 20 Carousel 38 Fullscreen HTML5 Video 63 Creating Portfolio Posts 88 Building the Menus 21 Video 38 Fullscreen HTML5 Video 64 Portfolio Slideshow Posts 88 - Activating the menu 21 Revolution Slider 38 Setting Passwords to Fullscreen Pages 65 Portfolio Vertical Image Posts 88 Mobile Menu 22 Fullscreen Slideshow / Kenburns Page 40 Password Protection 66 Password Protected Portfolio Posts 88 Theme Style 23 Fullscreen Slideshow - Adding images 41 Fullscreen Revolution Slider 67 Sorting Portfolio Posts 88 Menu Style 24 Fullscreen Slideshow - Page Settings 42 Getting familiar with Revolution Slider 68 Creating Portfolio Galleries 88 Logo 25 Fullscreen Slideshow - Audio Settings 43 Importing Slider Revolution 70 Creating Portfolio Posts ( Step 1 of 2 ) 89
Table of Contents Step 1 89 Page Settings 90 Create or Select Work Type Category 92 Slideshow Portfolio Post ( Part of Step 1 ) 93 Password Protected Portfolio Posts ( Part of Step 1 ) 95 Portfolio Admin Listing 96 Portfolio Gallery ( Step 2 of 2 ) 97 Step 2 97 Portfolio Drag and Drop Sorting 99 Portfolio Albums 100 Creating Albums 100 Portfolio Albums 101 Album - Adding a Work type category image 103 Album List 104 Generating Albums 105 Photo Proofing 106 Photo Proofing - New Photo Proofing Gallery 107 Photo Proofing - Selection 108 Photo Proofing - Client Information 109 Photo Proofing - Communication 110 Photo Proofing - Download Link 111 Post Formats 112 Standard 112 Audio 112 Video 112 Slideshow Gallery 112 Image 112 Link 112 Quote 112 Aside 112 Custom Post Formats 113 1. Standard Post 114 2. Aside post 115 3. Link post 116 4. Audio post 117 5. Quote post 118 6. Image post 119 7. Video Post 120 8. Gallery post 121 Blog List Page 122 Blog Standard Listing 123 Blog Fullwidth Listing 124 Blog with Small Thumbnails 125 Blog Grid 126 Blog Timeline 127 Contact Page 128 Contact Form using Contact 7 Plugin 129 Creating the Contact Page. 130 Adding Background image to the Row 131 Sidebars 132 Custom Sidebars 133 Thumbnail Gallery 134 Slideshows 134 Thumbnail Galleries 135 Slideshows 136 { end } 137
Icons used from (INCLUDED no need to install) http://fortawesome.github.io/font-awesome/ Important Links MEDIA USED IN THE THEME DEMO Supersized (INCLUDED no need to install) http://buildinternet.com/project/supersized/ Videos by Blender Foundation http://www.blender.org, http://www.bigbuckbunny.org JPlayer (INCLUDED no need to install) http://www.jplayer.org/ HTML5 Videos http://mazwai.com Magnific (INCLUDED no need to install) http://dimsemenov.com/plugins/magnific-popup/ 6
RECOMMENDED IMAGE SIZES Portfolio Images : 1400px Width Fullwidth Post images : 1400px Width Standard Post images : 1400px Width Important Notes WPML Multilingual Translation Theme options string variables is provided in theme root folder by file name wpml-config.xml. It requires WPML string translation plugin to translate these strings. SUPPORT FORUM http://support.imaginemthemes.co/ VIDEO TUTORIALS http://support.imaginemthemes.co/kinetika-video-tutorials/ Please post a note to support forum if you'd like a specific section covered by video tutorials. 7
Uploading Kinetika via FTP to Wordpress 1. Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer. 2. Using an FTP client to access your host web server. 3. Upload the Theme files in the extracted folder called kinetika (its inside the extracted kinetika-packed ) to wp-content/ themes directory provided by WordPress. Please make sure you re uploading the files from the extracted kinetika zip. 4. Visit Administration > Appearance > Themes, under the Manage Themes tab, under the Available Themes, if necessary navigate to the page displaying that Theme, then click the Activate link to make the Theme, the Current Theme. 1 2 8
Activating required Plugins Theme Activated Once theme is activated you can begin Installing the mentioned plugins. 1. Imaginem Pagebuilder ( Bundled ) REQUIRED 2. Imaginem Fullscreen Post Type ( Bundled ) REQUIRED 3. Imaginem Portfolio Post Type ( Bundled ) REQUIRED 4. Imaginem Shortcodes ( Bundled ) REQUIRED 5. Imaginem Widgets ( Bundled ) REQUIRED 6. Slider Revolution ( Bundled ) 7. Contact 7 plugin ( WordPress plugins library ) 3 9
Installing Plugins Installing Plugins Install and Activate each plugin one by one. Once you hover over the title of each plugin you'll get choices to install and activate. 1 10
Plugins Activated 11
Plugins & Theme Activated 1 2 3 4 5 Events Fullscreen Posts Photo Proofing Photo Stories Portfolio Items 6 Contact 7 7 WooCommerce 8 Theme Options 9 Revolution Slider 12
Widgets 1 13
Importing Demos 14
Importing Demos 1 2 Activate Kinetika Demo plugin for this feature availability Click 'Kinetika Demos' and select the Demo you choose to import. 15
Building Main Menu 16
Building the Menus - Create Menu Enter a Name Enter an name for your Menu and Click Create Menu tab 2 Create Menu 2 1 17
Building the Menus - Create an Item 1 Create Home Button 2 From Custom Links box, enter URL and Label. Click Add to Menu Title Fill Title 18
Building the Menus - Displaying Menu Sections - Screen Options 3 2 1 19
Building the Menus - Adding more items 1 Creating more items Pages, Categories or Custom Post Types can be added easily by selecting and clicking Add to Menu 2 Indenting Indenting the items creates sub menus. 20
Building the Menus - Activating the menu 1 Select where the menus should appear Selecting this options will populate your menu. NOTE: Refer to Official Wordpress Menu Guide http://codex.wordpress.org/wordpress_menu_user_guide 21
Mobile Menu Mobile Social Header Set the Mobile Social Header by populating the Social Widget in Widgets Section. 1 Mobile Menu Select a menu for mobile devices which is usually the same menu as the main menu. You can also create a different set which focuses for mobile users. 22
Theme Style 1 Choose between Dark & Light Theme 2 3 4 23
Menu Style 2 1 3 Choose style of menu 24
Logo 25
Theme Options - Setting Up Logo 1 Logo for Horizontal Menu and Border Menus 2 3 Upload Logo 4 Adjust Logo Dimension and Position 26
Logo for Vertical Menu 1 2 3 Upload Logo 4 Adjust Logo Dimension and Position 27
Theme Options - Responsive Logo 1 2 Responsive Logo Upload 3 Adjust Logo Dimension and Position 4 Custom WordPress login page logo 28
Fullscreen Social Footer 29
3 Social icons The social icons can be generated by populating your social links in the input fields. Social Widget 2 for WordPress The Social widget can be found in the Widgets list area in wp-admin. 1 NOTE: Drag and drop the Social widget to Social Header Widget area are and activate your social links. KINETIKA Fullscreen Social Footer Expand the Widget Expand widget and enter links to your social profiles to activate the icons Social footer for Fullscreen in fullscreen slideshows. 30
General Footer 31
General Footer 1 32
Page Builder 33
PageBuilder Imaginem Pagebuilder Help Guide Kinetika theme uses the imaginem PageBuilder. A separate Help Guide is provided in the same folder as this Help Guide to describe how the PageBuilder works. Please go through the Help Guide to familiarize with using the PageBuilder. 34
Shortcode Generator 35
Shortcode Generator Overview Shortcode Generators Shortcodes can be used to enrich your content. You can also use shortcodes combined with columns shortcode to create different layouts. This feature of theme doesn't require you to remember any of the shortcode syntaxes, and helps generate shortcodes on demand through the Visual Editor. Shortcode generator tab is displayed on all Visual content editors, Post, Page & Portfolios. Clicking on each shortcode generator displays a window with choices to generate the shortcode. 36
Page Background Settings Page Color Set a page color as background Page Opacity Increase/Reduce Page Opacity Select Background Type Select type of background for page. Fullscreen Slideshow post selector Choose a fullscreen slideshow post for background Fullscreen Vide post selector Choose a fullscreen video post for background 37
Building Fullscreen Pages Slideshows KenBurns Cover Photo Photowall Carousel Video Revolution Slider 38
Fullscreen Slideshow / Kenburns Page 1 2 3 4
Fullscreen Slideshow - Adding images 6 Title, description and buttons are optional. You can leave those fields empty to not display them. 7 Fill Title Fill title for your slide 8 Fill Description Fill description for you slide. 9 Button Text Full for button text 10 Button Link Full for button link 5 11 UI Color Select either Bright or Dark choice for UI change when slideshow image is in display. UI includes: Menu, Logo, Title, Captions and Slideshow Controls. 12 Save Featured Gallery Save Featured Gallery to save. DRAG AND DROP SORT: You can drag and drop images to order them affecting the ordering of the slideshow images
Fullscreen Slideshow - Page Settings SAVED GALLERY: Saved galleries will appear under the add images section. You can edit / add / re-arrange images in existing gallery by Editing Gallery button shown after the post is published. 11 Select Slideshow Type 12
Fullscreen Slideshow - Audio Settings 13 Fill all image formats for best cross-browser playability OGA/OGG audio format native playback is supported in Firefox, Opera and Chrome MP3 audio format native playback is supported in Safari,Chrome and IE 14
Cover Photos 44
Cover Photo - Page Settings 1 Attach more than One image for Slideshow 2 3 45
Cover Photo - Changing UI Color 4 5 6 UI Color Select either Bright or Dark choice for UI change when slideshow image is in display. UI includes: Menu, Logo, Title, Captions and Slideshow Controls. 7 Save Featured Gallery Save Featured Gallery to save. 46
Cover Photo - Font Settings 1 2 Title Font Font size in pixels 3 Line height adjustment 4 Letter spacing 5 Cover Photo title 6 Description 7 Button Text 8 Button Link 47
Fotorama 48
1 SAVED GALLERY: Saved galleries will appear under the add images section. You can edit / add / re-arrange images in existing gallery by Editing Gallery button shown after the post is published. 2 3 4
Adding Titles to Fotorama Images 1 Title. You can leave those fields empty to not display them. 2 Fill Title Fill title for your slide DRAG AND DROP SORT: You can drag and drop images to order them affecting the ordering of the slideshow images
Fullscreen Carousel 51
Fullscreen Carousel 1 SAVED GALLERY: Saved galleries will appear under the add images section. You can edit / add / re-arrange images in existing gallery by Editing Gallery button shown after the post is published. 2 6 Optional Set a Featured image if a background image is required. 3 4 5
Adding Title and Description to Carousel Images 1 Title, description and buttons are optional. You can leave those fields empty to not display them. 2 Fill Title Fill title for your slide 3 Fill Description Fill description for you slide. 4 DRAG AND DROP SORT: You can drag and drop images to order them affecting the ordering of the slideshow images
PhotoWall Lightbox 54
Photowall - Lightbox 1 SAVED GALLERY: Saved galleries will appear under the add images section. You can edit / add / re-arrange images in existing gallery by Editing Gallery button shown after the post is published. 2 3 4 6 Optional Set a Featured image if a background image is required. 5
Photowall - Lightbox Titles & Description 1 Title, description and buttons are optional. You can leave those fields empty to not display them. 2 Fill Title Fill title for your slide 3 Fill Description Fill description for you slide. 4 DRAG AND DROP SORT: You can drag and drop images to order them affecting the ordering of the slideshow images
PhotoWall Portfolio 57
Photowall - Portfolio Items 1 2 3 6 Optional Set a Featured image if a background image is required. 4 5 Optional Leave Blank to list all
Fullscreen Vimeo Video 59
Fullscreen Vimeo Video 1 2 3 4 Enter VIMEO Video ID 5 6
Fullscreen Youtube Video 61
Fullscreen Youtube 1 2 3 4 Enter Youtube ID 5 Select information box to display 6
Fullscreen HTML5 Video 63
Fullscreen HTML5 Video 1 2 5 6 3 7 8 9 4
Setting Passwords to Fullscreen Pages 65
Password Protection Password protected fullscreen pages, portfolio galleries and pages. 1 Once you publish a WordPress post, it is visible to the public (by default). 2 You can set a password to posts requiring anyone visiting the page to enter a password. 3 Fullscreen slideshows and Fullscreen Video protected screen displays Theme Options set Image as background when requesting for password.
Fullscreen Revolution Slider 67
Getting familiar with Revolution Slider Revolution Slider will be available after activating the plugin. Please check "Plugin" section if this isn't visible in wp-admin Help Guide of Revolution Slider 2 1 3 68
1 2 69
Importing Slider Revolution For the theme styles to pick up by Revolution Slider you'll need import the slides packed with the theme. 1. Browse and goto the Kinetika download packed folder. You'll see a folder called 'Revolution Slider Demo Slides' 2. Select file to import ** Make sure to provide images and videos as the ones in demo aren't included. 70
Applying Revolution Slider Slides 1 2 3 Revolution Slider Selector Revolution Slider Slides can be set from any page from the Metabox 4 71
Setting Fullscreen Page as Homepage 72
Setting Fullscreen Slideshow 1 3 2 4 5
Readings Settings 2 1 Only required if WordPress default settings has changed. By default as shown in screenshot for all fresh WordPress installs.
Photo Stories 75
Photo Stories 1 2 3 4 5 76
Photo Stories - Upload Images Title, description and buttons are optional. You can leave those fields empty to not display them. 1 6 Fill Title Fill title for your slide 7 Fill Description Fill description for you slide. 8 DRAG AND DROP SORT: You can drag and drop images to order them affecting the ordering of the slideshow images 77
Photo Stories - Page Settings Edit Gallery Edit slideshow images. Thumbnail Description Displays under the thumbnail Page Color Apply background color for fit mode Display Title and Description Display title and description in Slideshow Fotorama Slideshow Fit or Fill mode. 78
Photo Stories - Sort Galleries Drag and Drop to sort the Portfolios 79
Page Builder 80
Building with Page Builder 1 2 3 100% Width Page 4 Build the page using blocks seen in blog archive 81
KINETIKA Building Pagebuilder Pages for WordPress 82
OnePage Site 83
Building OnePage Placing Anchors Kinetika theme supports "OnePage" pages. A web page which fits in a single page with jump points from menu, giving visitors a more fluid user experience. To make this works we require anchor points. Anchors are created by defining an ID in the pagebuilder Column Container. 1 Edit Column Container 2 Add Anchor by defining an ID. The ID needs to be a unique ID for the particular page. Next step, let's create the Menu item to make the jump. 84
OnePage Menu 1 4 3 2 #works Enter the unique ID in the Column Container module here. It has to be prefixed with a # tag as seen in the screenshot. if the anchor ID is "works" then url should be "#works" If the ID is "clients", the url should be "#clients" Both those links will open the respective pages to the anchor point. 85
OnePage Menu - Home Link 2 #home By default without assigning the #home ID to columns, the theme uses the ID to jump to top of page. 1 3 #home is a predefined ID of theme. 86
Setting OnePage as Homepage 1 2 3 Only for Setting OnePage Fullscreen posts require a different method. 4 87
Creating Portfolios Creating Portfolio Posts Portfolio Slideshow Posts Portfolio Vertical Image Posts Password Protected Portfolio Posts Sorting Portfolio Posts Creating Portfolio Galleries 88
Creating Portfolio Posts ( Step 1 of 2 ) Step 1 1 2 3 Click Set Featured image and upload. 4 Upload and click the images to select it 6 Image displayed once an image is set as featured Drag and drop an image file 5 Set Featured image
Page Settings 1 Attach Images for Slideshow and Vertical Image sets 2 Choose Portfolio Type 3 Page Layout 90
4 5 Gallery thumbnail text. A short description of the project which appears along with the thumbnail in gallery. Ajax Portfolio description. The text will appear in Ajax portfolios as a previewing of the project. Not a requirement if Ajax Portfolio isn't used. 6 Choice of sidebar for sidebar active pages 7 How the thumbnail in gallery is linked. 8 For youtube and vimeo videos that need to be displayed as a lightbox. 9 If thumbnail is to be linked as a custom link. 10 Displayed in standard portfolio layout 11 Displayed in standard portfolio layout 12 Displayed in standard portfolio layout 13 Displayed in standard portfolio layout 14 Custom thumbnail displayed in portfolio galleries. All portfolio post still require a featured image. 91
Create or Select Work Type Category Work Type Category All portfolio posts require added to at least one work type category. 15 16 92
Slideshow Portfolio Post ( Part of Step 1 ) 1 2 3 Click Upload images This brings up the uploader popup where you can add multiple images by drag and dropping the files. You can also add existing images uploaded before. 4 5 93
SAVED GALLERY: Saved galleries will appear under the add images section. You can edit / add / re-arrange images in existing gallery by Editing Gallery button shown after the post is published. Displayed as thumbnail for galleries to represent the portfolio item. Select Slideshow as Portfolio post header type from portfolio editor meta options. 7 8 94
Password Protected Portfolio Posts ( Part of Step 1 ) Password protected fullscreen pages, portfolio galleries and pages. Once you publish a WordPress post, it is visible to the public (by default). You can set a password to portfolio item requiring anyone visiting the page to enter the password. 1 2 3 95
Portfolio Admin Listing Repeat Step 1 to create a set of Portfolio items and make sure they are added to Work Types. Once these steps are complete proceed to Step 2 on next Page. 96
Portfolio Gallery ( Step 2 of 2 ) Step 2 1 2 3 4 5 6
7 6 Work Types. Leave blank to list all. If listing is Filterable, Ajax or without filters Landscape, portrait or masonry thumbnails. Thumbnails to display with gutter spacing or without spacing. Grid columns, 4, 3, 2, 1 Display box title & category on hover. This is ideal if you don't want to display the title and description below the thumbnail. Disable title below thumbnail Disable description below thumbnail Limit the number of projects display. -1 (minus one) will display all Generate pagination if a limit is entered. 8
Portfolio Drag and Drop Sorting 1 2 Drag and Drop to sort the Portfolios 99
Portfolio Albums Creating Albums 100
Portfolio Albums Portfolio Albums Generate a gallery of thumbnails with title and description representing the Work type categories. 1 2 101
3 4 102
Album - Adding a Work type category image 4 5 6 7 103
Album List Work type categories Set a Featured image to each of your Work type categories. Once done proceed to generating albums on next page. 104
Generating Albums 1 2 3 4 5 Worktype Albums Edit the album block to set hover icons and column layout. 6 105
Photo Proofing 106
Photo Proofing - New Photo Proofing Gallery 1 2 Add images to display as selector. Choose Proofing Status 1 Choose Date of Photoshoot 2 Client Name Location of Photoshoot 3 A Zipped file url as download link. 107
Photo Proofing - Selection Number of selected images 1 2 3 Lightbox Click check symbol to choose the image Selection will appear with an accented border. 108
Photo Proofing - Client Information Proofing Status for Client Photoshoot Details for Client Optional Content 109
KINETIKA Photo Proofing - Communication for WordPress Comments section for discussion of proofing gallery. It can be used as an exchange of communication between Client and Photographer 110
Photo Proofing - Download Link Download link for Client. This can be any link external or internal for download. Photo Selection based on the Download Link. 111
Post Formats Standard Audio Video Slideshow Gallery Image Link Quote Aside 112
Custom Post Formats Kinetika theme can build custom post formats. Post formats can be chosen from the Post Edit screen. The list appears as shown in the following screen shot. When you select a post format additional options will relating the chosen post format. These extra options are available for Gallery. Link, Image, Quote, Video and Audio. 8 Custom post formats displayed on Right hand side of Edit Screen. 1 2 Sidebar or Fullwidth Select blog post with sidebar or fullwidth without sidebar 113
1. Standard Post 1 2 3 4 Fill contents Featured Image 5 6 Upload and set your Featured Image 114
2. Aside post An Aside is a custom post format which doesn t have a title. Very useful for small notes and such. 115
3. Link post Linked post can be linked anywhere. 116
4. Audio post Audio post formats can generate an audio player for your post. 117
5. Quote post Display quotes as posts 118
6. Image post You can display image post either as a standalone image or activated with a lightbox. 119
7. Video Post Video post formats can generate a video player for your post. 120
8. Gallery post 1 2 Click Upload images This brings up the uploader popup where you can add multiple images by drag and dropping the files. You can also add existing images uploaded before Gallery post can display a slideshow gallery in the post head. You can populate slideshow images by uploading them as image attachments. 3 4 121
Blog List Page 122
Blog Standard Listing 1 2 NOTE: Once published this page using the bloglist template will populate your posts. Select Without Sidebar For FULLWIDTH BLOG option. 4 3 4 5 Choose Template Blog list 123
Blog Fullwidth Listing 1 2 NOTE: Once published this page using the bloglist template will populate your posts. Select Without Sidebar For FULLWIDTH BLOG option. 4 3 5 Choose Template Blog list 124
Blog with Small Thumbnails 1 2 NOTE: Once published this page using the bloglist template will populate your posts. Select Without Sidebar For Fullwidth blog option. 3 4 5 Choose Template Blog Small Thumbnails 125
Blog Grid 1 2 NOTE: Once published this page using the bloglist template will populate your posts. Select Without Sidebar For Fullwidth option. 3 6 4 5 7 126
Blog Timeline 1 2 3 6 4 7 5 127
Contact Page 128
Contact Form using Contact 7 Plugin 1 2 Use shortcode displayed here to display your Contact 7 form anywhere. 3 129
Creating the Contact Page. 1 2 Google Maps Greetings Enter Address Edit and add Contact 7 shortcode 130
Adding Background image to the Row Edit first Column to apply a backgorund image. Adding an image to the split columns will apply the background image seamlessly to the Row 131
Sidebars 132
Custom Sidebars 1 3 Activate Sidebars by entering a Name for it You can activate sidebars on demand by giving the sidebars a name. Active sidebars are listed in the Widgets area. 2 Sidebar Selecting for Post & Pages Choice of Sidebar option is found in all Post and Page editing screen. 4 133
Thumbnail Gallery & Slideshows 134
Thumbnail Galleries 1 2 3 4 5 Edit and attach images to the thumbnails grid block 135
Slideshows 1 2 3 4 5 Edit and attach images to the slideshow block 136
{ end } 137
Thank you for purchasing Kinetika theme. I d be glad to help you if you have any questions relating to this theme. The support forum can be found at http://support.imaginemthemes.co 138