Documentation

Theme Requirements

In order to proceed with the theme installation, you need to make sure you have the latest version of WordPress.org (4.5+) on your self-hosted site or WordPress.com with a businessplan active.

Theme Installation

1. Log into your WP Admin and browse for Appearance → Themes.
2. Now navigate to the secondary tab: Install Themes and click the Upload link option.
3. Follow the instructions by choosing the file "theme_upload.zip", located in the archive which you have downloaded from the store and click "Install Now" button.
   
   Note: Do not upload the entire zip file you received after purchase, unzip the "do-not-upload.zip" file first. Within the unzipped folder you'll find another folder with the same theme name (theme_upload.zip). THIS is the zip file you will need to upload to WordPress.
4. Click Activate link, once the upload has finished, and you are ready for the next steps.

Plugins Installation & Activation

After you activated the theme you can see a message :
Click on install the required plugins.

• Install Plugins - On the new page you can select all plugins. Select Install under the Bulk Actions list and click apply.
  
  After the installations are finished press return to the Required Plugins Installer


• Activate plugins - After you installed the required plugins you need to activate them. Again, select both plugins, select Activate under the Bulk Actions list and click apply. That's it!

Demo Content (optional)

The theme comes with two things: Demo content and Theme Demos. The demo content is dummy data to fill up your empty website. To upload the demo content follow this steps:

1. Navigate to Appearance → Demo Content.
2. Click on Import Demo Data.
3. Wait untill the process is finished.
4. After the import you may uninstall the One Click Demo Import plugin.

Theme Demos (optional)

The Theme Demos help you create a similar look to our online demonstration website with a single click. You may easily activate a demo or switch between them without importing the demo content or affecting the existing content.

1. Navigate to Appearance → Customize → Theme Demos.
2. Click on Activate next to a demo thunbnail.
3. Wait untill the process is finished.
4. After the import click publish in the customizer menu to save it.

1. Make sure you’ve installed all recommended plugins.
2. Navigate to the WordPress dashboard to the Powerkit settings page and activate the Typekit module.
3. Add the required fonts to a new kit on Adobe Fonts.
4. Go to Appearance→Fonts→Adobe Fonts and add your Adobe Fonts API key.
5. Select the created kit from the select field.
6. Navigate to Appearance→Customise→Theme Demos and activate a theme demo.

• Kate: Proxima Nova (Regular, Regular Italic), Futura PT (500, Regular, Italic)

Regenerate Thumbnails

If you already had images in your Media Library when you installed our theme, you will have to regenerate your image thumbnails.

1. Navigate to Plugins → Install plugins and install the Regenerate Thumbnails plugin.
2. Then go to Tools → Renegerate Thumbnails.
3. Click the Regenerate All Thumbnails button.
4. Wait untill the process is finished and do not close the page.

Setting Up New Menus

Our themes support several logo locations - all can be change in Appearance → Customize → Layout Settings:

• Navigation Bar → Logo
• Header → Logo
• Off-Canvas Area → Logo
• Footer → Logo

Setting Up New Menus

Our themes supports two locations for a custom WordPress menu - the Primary and Mobile menu:

• The menu supports 2 levels of drop-downs.

• Navigate to Appearance → Menus and click Add Menu.
• Give it a name, add links and click "Save Menu" button.
• Click on Manage Locations tab (WP 3.6+), assign a Menu Location for your newly created menu.

Off-Canvas Area

Off-Canvas area is where your mobile menu is located. You may place any widget there.

• Navigate to Appearance → Widgets.
• Drag any widget from the left side to the Off-Canvas widget area to the right side.
• Click Save to save widget settings.

Mega Menus

If enabled, mega menus will display a list of recent posts with post thumbnails in the dropdown menu.

• Click on Screen Options in the top right corner of the screen.
• Make sure that the Enable mega menu checkbox is enabled.
• Activate the Enable mega menu checkbox next to a parent menu element.
• Make sure that the sub elements of that parent menu are links to your categories.
• Click Save Menu

Troubleshooting

Possible causes of a broken mega menu:

• If the menu element has no children elements, it has to be of the Category type.
• If the menu has children elements, they have to be of Category type.
• The Display Location of the menu is set to Primary, as only the main navigation supports mega menus.
• You’re editing menus in Appearance → Menus. Due to a technical limitation, it is not possible to enable mega menus from Appearance → Customise.

To customise your site colors, simply navigate to Apprearance → Customize → Colors.

Note: Some color controls support the Smart Colors feature. For example if you change background color to dark, the text color will automatically become white.

To customise your site typography, simply navigate to Apprearance → Customize → Typography.

To customise your shomepage, simply navigate to Apprearance → Customize → Homepage Settings.

Our themes comes with a clean and elegant homepage and are packed with options to style it. If you would like to adjust the amount of posts shown per page you can go to Settings > Reading > Blog pages show at most and change the number.

In our demo website we use 7 posts per page (12 post per grid style page).

Optional: To disable the admin bar when you are viewing the website while logged in go to: Users → Your Profile and disable "Show Toolbar when viewing site".

Integrate additional content

<div class ="ta-container">
You content goes here.
</div>

<div style="padding: 50px; background: #eeeeee;">
<div class="ta-container">
You content goes here.
</div>
</div>

Social Links

Display a list of links to your social accounts with beautiful icons and followers’ counts in pre-defined theme locations, sidebar widget or post content via a shortcode. Add social links for post authors with help of the new user contact fields.

• Enable the social accounts that you would like to display in the list of social links.
• For every added social link a new tab will appear.
• Open every tab and add your Username / User ID or User Slug. In most cases it’s the last part of the URL to your social account. For example for https://facebook.com/themesart, it will be simply themesart.
• Add your social links in the pre-defined locations, your sidebar with a widget or page content with a shortcode.

Widgets

To add a widget with your social links to your sidebar, navigate to Appearance → Widgets and drag the “Social Links” widgets to the target widget area.

Shortcodes

You may display social links inside your post content by adding a shortcode to the WordPress editor:

[powerkit_social_links labels="true" titles="true" counts="true" template="default" scheme="default"]

Author Social Links

To add links to your social accounts for your user, please navigate to the WordPress dashboard to Users → Your Profile.

Supported Links

The following social networks are supported: Facebook, Twitter, Instagram, Pinterest, Google Plus, YouTube, Vimeo, SoundCloud, Spotify, Dribbble, Behance, GitHub, VK, LinkedIn, Tumblr, Bloglovin, RSS.

Share Buttons

Display share buttons in theme-predefined or standard locations. Select from various social networks and add per-button and the total share counts with just a few clicks.

• Select share button location from the tabs on top of the settings page. If there’re no theme pre-defined locations, only one location will appear: After Post Content.
• Enable the share buttons that you would like to display in the selected location.
• Configure their parameters: order, total share count, display counts, count location, layout and color scheme.
• Save and check your posts to make sure that share buttons appear correctly.

Social Shortcodes

You may display social links inside your post content by adding a shortcode to the WordPress editor:

[powerkit_share_buttons accounts="facebook, twitter, pinterest" total="true" icons="true" titles="false" labels="true" counts="true" count_location="inside" mode="smart" layout="default" scheme="default""]

Pinterest Share Cover

If you want Pinterest to pull in a specific image as a post cover, add the class powerkit-pinterest-cover to your image.

Supported Links

The following social networks are supported: Facebook, Twitter, Pinterest, Mail, Google Plus, LinkedIn, StumbleUpon, Pocket, WhatsApp, Facebook Messenger, Viber, VK, Telegram, Line, Reddit.

Shortcodes

Add rich-content to your posts with integrated shortcodes, including tabs and pills, alers, progress bars, and others. Easily insert shortcode with our sleek shortcode generator UI. No coding required.

Inserting Shortcodes

To insert a shortcode into your post content, navigate to the post editor screen and click on the shortcode icon in the WordPress editor toolbar:

WordPress 5.x.x Compatibility

Currently this feature is supported within the Classic block only. To add this feature in the newer WordPress block editor first insert a Classic block.

Justified Gallery

Create beautifully tiled galleries with the Justified Gallery module. Control the image height and padding between images per gallery or globally. Both the Justified and Slider galleries are seamlessly integrated into the WordPress UI. To create a Justified Gallery follow the same steps as you would as if inserting a default WordPress gallery.

• Navigate to the post edit screen and click on the Add Media button above the WordPress post editor.
• Click on Create Gallery.
• Select the images to include in your gallery and click on the Create new gallery button.

WordPress 5.x.x Compatibility

Currently this feature is supported within the Classic block only. To add this feature in the newer WordPress block editor first insert a Classic block.

Slider Gallery

Create beautiful slider galleries with the Slider Gallery module. Show or hide slider bullets, current and total slide numbers, next and previous buttons per gallery or globally. Both the Justified and Slider galleries are seamlessly integrated in the WordPress UI. To create a Slider Gallery follow the same steps as you would as if inserting a default WordPress gallery:

• Navigate to the post edit screen and click on the Add Media button above the WordPress post editor.
• Click on Create Gallery.
• Select the images to include in your gallery and click on the Create new gallery button.

WordPress 5.x.x Compatibility

Currently this feature is supported within the Classic block only. To add this feature in the newer WordPress block editor first insert a Classic block.

Lightbox

Instead of opening images in a new window display them in fullscreen Lightbox for a distraction-free user experience. To configure Lightbox preferences, please navigate to Settings → Media and scroll down the page to the Lightbox section. In order to completely disable Lightbox, simply deactivate the Lightbox module on the Powerkit settings page.

Easily upload and integrate custom fonts on your site by using the Custom Fonts module. No coding required.

Prepare .woff and .woff2 files. It’s sufficient to use the .woff2 file only too.

• First enable the Custom Fonts module on the Powerkit settings page. Being an advanced module, it’s disabled by default.
• Navigate to Appearance → Fonts → Custom Fonts.
• Input name of the font family, upload files and select weight and style.
• Click Add Font.

You will find your custom fonts right in the typography fields in Appearance → Customise → Typography. This feature also supports live-preview and allows configuring your fonts without refreshing the browser page.

Easily add opt-in (subscription) forms to your website and grow your subscribers’ list with the Opt-In Forms module.

Currently the Opt-In Form module supports MailChimp as the only provider. We’ll be adding other service providers if more users request it.

Obtain API Key:

• Log in to your MailChimp account.
• Click your profile name to expand the Account Panel, and choose Account.
• Click the Extras drop-down menu and choose API keys.
• Copy an existing API key or click the Create A Key button.
• Name your key descriptively, so you know what application uses that key.

Integration:

Follow these steps to integrate your opt-in forms:

• Navigate to Settings → Opt-In Forms.
• Input your API Key.
• Click Save changes.
• Select a list from the Default List select field.
• Optionally enable Double Opt-In and a Data Privacy Checkbox.

Widget:

You may display your Subscription Form widget in your sidebar bu going to Appearance → Widgets.

Image requirements:

Our themes uses the WordPress Post Thumbnails function. These are the images for your posts/pages and are shown on different positions in different sizes. WordPress will automatically resize your images to all of these various sizes used. You should always use images for posts with at least 1920px width to function correctly on your website.

To set a post thumbnail for your post, go to Posts > Add New > Set Featured Image
The normal upload box will now appear. Upload your image and click "Use as featured image". Now simply close the box.

Video backgrounds:

To create a video background follow these steps:

• Navigate to the post edit screen in Posts → All Posts.
• Set the Post Format select field to Video.
• Scroll down to the “Video” meta box below the post editor and add a YouTube URL.
• Select the location of the video background in the “Video Background” meta box.
• Optionally add start and end time of the video.
• Save your post.

More details:

Troubleshooting:

If the video background doesn’t work, please make sure you’ve also added a preview image. A preview image is required as a fallback for some mobile devices, that cannot playback a video background.

Retina images:

Make your images ultra-crisp on Retina screens with the Retina Images module integrated in Powerkit. The module will fetch all registered image thumbnail sizes in the theme and plugins and will register doubled image sizes to support Retina desktops and mobile devices.

Configuration:

To enable Retina Images on your website simply enable the Retina Images module on the Powerkit settings page. It is an advanced module, it’s disabled by default. You may selectively enable Retina images for certain image sizes in Settings → Media → Retina Images.

General Recommendations

There’re a few general performance optimization recommendations, which will get you a decent result in Google PageSpeed Insights and other tools.

Enable Cache:

Install and activate a caching plugin. We generally recommend the WP Super Cache plugin.

Enable CSS and JS Minification:

CSS and JavaScript are static files. They will be loaded faster, if they’re minified. It’s very simple to automatically minify them. Simply install and activate the Autoptimize plugin plugin.

Go to the plugin’s settings page and enable the three options:

• Optimize HTML Code?
• Optimize JavaScript Code?
• Optimize CSS Code?

Hosting configuration:

Ask your hosting provider to do the following for you:

• Enable gzip compression.
• Leverage browser caching.

Enable Lazy Loading of Images

Go to the Powerkit settings page and enable the Lazy Load module. Make sure you regenerate thumbnails afterwards.

Regenerate Images

First make sure that you’ve regenerated thumbnails with the Regenerate Thumbnails plugin.

There are several ways to customize the theme without changing it's core files.

Theme Options Panel Custom CSS box

To style the theme with custom CSS, navigate to Appearance → Customize and click on the "Styling: Custom CSS" tab. This is where you can write your own CSS code.

We have used the following open source projects or other files as listed.

• jQuery http://jquery.com
• Fitvids http://fitvidsjs.com/
• Slicknav http://slicknav.com/
• Owl Carousel http://owlgraphic.com/owlcarousel/
• Font Awesome http://fortawesome.github.io/Font-Awesome/
• Contact Form 7 https://wordpress.org/plugins/contact-form-7/
• Instagram Slider Widget https://wordpress.org/plugins/instagram-slider-widget/

We have used the following images for our demo site

• Unsplash.com http://unsplash.com/
• deathtothestockphoto.com http://deathtothestockphoto.com/
• Freepik http://www.freepik.com/