Thank you for Purchasing!
Hyper-X is at first simple, easy to use, clean and modern theme for any kind of webworker. Wordpress Live Theme Customizer gives you ability to create almost any kind of Portfolio/Blog layout in a very short time. But even if you don't like customizations that much, you can choose between multiple predefined designs. 15 premade Designs are available for now. In addition to all of this Hyper-X Theme comes with 3 Premium Plugins which gives your website powerful abilities and saves you 77$ in totall.
If you have any kind of presale or theme related question, please send us an email from our Profile Page or directly on Theme Support Page. Theme Support forum is available 24/6 and you'll get answer on your question as soon as posible. Normally with 1 hour delay.
After purchasing Hyper-X template, it's recomended to download "All files & documentation" from Themeforest.
Extract the donwloaded .zip archive contents on your local machine (wherever you like) and you're done.
You should see the following list of files:
- Documentation folder
- Licensing folder
There are two common ways to install Wordpress theme: via Dashboard or via FTP. You can read this Famous 5 Minute Install on Wordpress Codex Page or follow my steps.
- Log in to your Wordpress Admin Panel, then go to Appearance > Themes
- Click on Add New then Upload Theme
- Click on and select hyperx.zip archive
- Click on Install Now and you're done.
- Extract hyperx.zip archive on your local machine
- Log in to your FTP program and go to Wordpress themes folder wp-content/themes
- Upload extracted hyperx folder in this directory
- Log in to your Dashboard, then go to Appearance > Themes
- Now you'll see Hyper-X theme in your themes list.
After you activate Hyper-X theme and all necessary plugins, please navigate to Hyper-X Templates page. From there you can Activate/Import any of designs. Ares will be activated by default, but you need just a single click on "Activate" button and another design will be instantly installed on your website. Some of them you see here, more and more is comming very soon!
After installing and activating the theme you will see plugin avtivation message. You should install and activate them. I'll discuss all theme required and recomended plugins one by one later in Plugins Section.
Important Note for Cufo Theme Users!
If your previous theme was Cufo you should disable Royal Portfolio and Royal Recent Portfolio Widget Plugins before you install/activate Royal Core Plugin which comes with Hyper-X Theme. Also it's important to know that when you activate Hyper-X theme you will loose your previous design which was made by Cufo Theme (means, activating Cufo Theme won't give you a rollback).
One Click Demo Import
If you are new to Wordpress it's strongly recomended to import demo content, if not you can skip to Site Setup.
It's very easy to import demo content on Hyper-X Theme, you will need just a single click and patience. Navigate to Appearance > Hyper-X Templates and click on "Import" button which is under that Design you have already activated. You can also import Demo Content from other Designs too, but the Demo Content which comes with the Design will feet to it the most.
If you want your site to work correctly, you need to do some basic setup. At first we'll create basic, must have pages, then we'll display them in Navigation Menu and then will set up Front Page and Posts Page.
To create a new page, within your dashboard you should go to Pages > Add New. Enter page title and leave editor field empty, select page templates and hit Publish. Each page has its unique options which I'll discuss later on.
The following templates should be used for following pages:
- Blog - Default Template
- Portfolio - Portfolio Page
- Contact - Contact Page
Now, once we've created all necessary pages we should display them in Navigation Menu. Within your Dashboard go to Appearance > Menus and click on Create Menu
For Ares Design you should create 2 different - ex: "Left" and "Right" Menus and then assign Theme Locations: Left - Top Left Menu and Right - Top Right Menu. After that click on Save Menu and you're done.
But in the other cases when you are using design, for ex: Athena, which supports only one Theme Location(Menu Position) you need to create only one menu called for ex: "Menu 1" and assign Theme Location to Main Menu.
In addition You can remove Home and Sample Page items and also rearrange others.
Front Page & Posts Page
To determine which would be displayed as Front Page and which one as Posts Page, within your dashboard navigate to Settings > Reading and setup like on this picture below. Then click on Save Changes and basic site setup is done.
We have already created Portfolio Page, but it's not enough for that to work properly. Let me explain you how Portfolio system works. First of all we need to create Portfolio Post. This is a basic template which teachs you how to do that:
These are minimum requirements for Portfolio Post to be created, for more options see Portfolio Single Advanced
- Within your Dashboard navigate to Portfolio > Add New
- Add Title and Content (if you like, not necessary)
- Set Featured Image (REQUIRED for all portfolio post formats)
- Set 2nd Featured Image (OPTIONAL if you want to create before-after effect on thumbnail hover)
- Add at least one category (REQUIRED)
- Click Publish and you're done
It's REQUIRED for each Portfolio Post to have at least one category, in the other case this post won't be displayed on the Portfolio Page. It's also important to know that categories are filters itself and any category which is assigned to the Portfolio Post will be added in the filters list on the Portfolio Page.
In case of multiple Portfolio Pages only the categories will be displayed which are assigned to the Portfolio Posts on the current page
Now we know how to create Portfolio Posts. If you want to have working example of Single or Multiple Portfolio Pages, go ahead and create 4 posts with:
- Title: Classic Music and Category: classic
- Title: Rock Music and Category: rock
- Title: Nature Photo and Category: nature
- Title: Fashion Photo and Category: fashion
After all that we should get the same result as on this picture below:
Hyper-X Theme supports Single and Multiple Portfolio Pages as well. For more information see step by step explanation below and be careful not to miss something.
Within your Dashboard navigate to Pages > All Pages > Portfolio (I consider you have already created one, if not go to Site Setup and see how to create a Portfolio Page). Here, on the Portfolio Page editing screen, under the content editor you should see Page Template: Portfolio metabox. This is a single option which controls whether to display all posts or posts from custom categories on the current page. It's configured to display all posts by default. If you want to have Single Portfolio Page skip this option and update the page.
But if you are going to have Multiple Portfolio Pages follow this steps:
This is only example, in your case you should select those Categories which you want your posts to be displayed from.
- Set Display Portfolio Items From: to Custom Categories
- Check classic and rock categories
- Change Page Title from Portfolio to Music Portfolio
- Update the Page
Repeate this process one more time and create Portfolio Page with Title: Photo Portfolio and check cateogries fashion and Nature. After all that navigate to Appearance > Menus and add newly created pages to our already existing menu.
Now if you've done everything right you should have 2 Portfolio Pages with 2 different posts on them.
Music Portfolio (from categories: classic, rock)
- Classic Music (category: classic)
- Rock Music (category: rock)
Photo Portfolio (from categories: nature, fashion)
- Nature Photo (category: nature)
- Fashion Photo (category: fashion)
Portfolio Single Advanced
Each Portfolio Post comes with its unique options. Majority of them are located below the Post Content Editor. Let me explain them in details:
Everything explained here is the same for Blog Posts as well.
Masonry Metro Layout metabox.
Select Post Width option only works if in Theme Customizer > Portfolio(Blog) Page > General > Layout Mode is set to Metro (Masonry - Different Width). This is 3 columns layout and by default each Post has 1x column width, but with this option you can change them to 2x or 3x and the post size will increase accordingly.
- 1x Width - 1 column.
- 2x Width - 2 column.
- 3x Width - 2 column (Full Width).
Post Formats metabox. About this I'll talk later on here.
Portfolio Post Options metabox. Options in this metabox are actually self-explanatory.
Note! empty fields won't be displayed.
If Project Info block is globally disabled from Theme Customzier you can enable it on several posts with Show Project Info option and also you can force it to be Sticked to the post content with Sticky Project Info option and whenever user scrolls down the page, Project Info will follow a browser scroll.
Information from the following fields will be displayed only on the Single Post page.
- Project Description Title
- Project Description
- Project Details Title
- Project Client
- Project Link
Information from the following fields won't be displayed on the Single Post page, but on the Portfolio Page for each post individually.
- Testimonial Author
- Testimonial Content
Portfolio Skills metabox. By default, is located on the right side of a screen. This is Portfolio Post meta information and will be displayed on the Single Post page in the Project Info block.
If you aren't familiar with Post Formats please read this article on Wordpress Codex. Hyper-X Theme supports 6 Post Formats for Blog Posts and 4 Post Formats for Portfolio Posts.
Blog Post Formats
Portfolio Post Formats
Please note that Featured image is REQUIRED for all Post Formats, except Video and Gallery formats on Blog. Each post format has its unique options and when you change them from one to another you will notice that Post Format metabox options will change acordingly. Let me explain you these options one by one:
Standard - this is default Post Format, which displayes Feutured Image and Post Content only. For this format you can exclude Featured Image on the single post page.
Audio - this format supports Embed and Self-hosted audio types. For Audio type: Embed you should copy-paste Audio Embed Code (SoundCloud) in the given textarea, but for Audio type: Self-hosted you should upload files in .mp3 and .ogg formats, if you want your Audio Post to be displayed in all browsers correctly.
Audio Type: Embed
Audio Type: Self-hosted
Video - this format is quite the same as Audio, but in case of Video Type: Self-hosted you should upload files in .mp4 and .ogv formats.
Video Type: Self-hosted
Gallery - this format supports Slideshow and Stacked gallery types. You can add images via clicking Add Image button which opens Add Media popup, then upload them from your local machine or load them from your media library. Also you can Add, Remove or Edit images any time you want. It's important to know that image Title will be used on image Captions for Slideshow and Stacked Gelleries. You can manage them from your Media Library or via clicking on button which links to an image editing screen.
Link - this format supports Link Description, Link Title (may be author) and actual URL fields. Note that URL will be attached only to the Link Title.
Quote - this format is quite the same as Link, but it doesn't require additional URL field.
In this section I will explain you how to build famous OnePage Websites. Actually it's very simple and easy to understand. The logic how it works is: we create a single page (ex: Home), which will be divided by Sections (Blog, Portfolio, Contact, About...) and each section will have an unique ID which will be linked from Navigation Menu. For examle: we create a Menu Item - Blog, which will have custom link - #blog (with hashtag and lowercase) and then we'll create a section via Visual Composer plugin and give it an ID - blog (no hashtag, but lowercase). Now we have A menu item - Blog which is linked to Blog section on the page and when we click on menu item Blog, it will scroll down to Blog Section. Thats it, so simple, but now let me explain you step by step.
Go to your Dashboard -> Pages -> Add New and create a new page called Home.
Now add a Visual Composer Row element to this page and give a specific ID which is very important. After this you can insert any kind of content in this section.
Go to your Dashboard -> Appearance -> Menus and create a custom link Blog and add to main menu with Custom Url #blog. And don't forget that to get all this working you shoud give the same ID to a Visual Composer section, but without hashtag (#) as in Step 3.
You can repeat Step 2 and Step 3 for other sections (#portfolio, #about, #contact ...) as much as you want.
Go to your Dashboard -> Settings -> Reading and setup a Home as a Front Page.
And finally, go to your Dashboard -> Appearance -> Customize and Enable Onepage Future option.
Congratulations! Now you have a working example of a OnePage Website.
Hyper-X supports several plugins, which I've tested in different situations and they work perfectly on this theme.
- Royal Core - this is must have plugin, which adds Portfolio, Portfolio Categories, Portfolio Skills, Royal Recent Portfolio Widget and Royal Shortcodes future to the theme. And the most important: All Hyper-X Templates are located in this plugin.
Visual Composer (34$ value), Ultimate Addons for Visual Composer (18$ value) and Slider Revolution (19$ value) are must have plugins aswell, because some of the pages in demo import are built with these plugins and + you are getting them for FREE!
Please Note that some of the elements of Visual Composer/Ultimate Addons are not compatible with Wordpress Theme Customizer. If you see some bugs in relation with them, please don't panic and keep calm ;) Because they are working fine in standard mode.
If you are not familiar with Visual Composer / Ultimate Addons For VC / Slider Revolution you can read/watch tutorials on their authors websites.
1. Visual Composer - Tutorial
2. Ultimate Addons for Visual Composer - Tutorial
3. Slider Revolution - Tutorial
Envato Toolkit - The Envato WordPress Toolkit plugin lets you view your ThemeForest purchases within the WordPress dashboard and select whether or not to receive updates. You can ppdate Hyper-X Theme with it as well.
To get it working you will need:
- You will need to generate an API key to link your WordPress site to your Themeforest account. Go to your Themeforest Account > Settings > API Keys and generate it.
- Whenever you install the plugin "Envato Toolkit" link will appear on your dashboard menut. Go there, enter your marketplace username and secret API key. Click "Save Settings."
- The plugin will now alert you to theme updates.
AJAX Thumbnail Rebuild - this plugin should be used in several scenarios:
You can always rebuild your thumbnails from Tools > Rebuild Thumbnails
- If you aren't running fresh installation of wordpress and changing from other theme to Hyper-X.
- If you have changed Blog or Portfolio Posts image sizes from Theme Customizer > Portfolio(blog) Page > General > Aspect Ratio X or Aspect Ratio Y.
- Lightweight Social Icons
- Flickr Badges Widget
- Simple Twitter Tweets
- Snazzy Maps
- Envato Toolkit
Slider Revolution (18$ value)
With Slider Revolution Plugin you can add Sliders on Posts and on Pages aswell. If you are familiar with Slider Revolution you should know that, when you "Create New Slider" you should give it an Alias(Name). After you create/import new Sliders they(slider names) will appear on the Post/Page creation screens in the Slider select dropdown.
Revolution Slider can be added on Posts/Pages on 2 different locations. You can display it on the Top of everything - under header or you can display it normally in the Post/Page Content. To display Sliders on the top of Post/Page you should add them via Add Revolution Slider metabox.
If you don't know how to create new Revolution Slider then go ahead and download this Demo Slider fom Plugin author website. Import it from: Dashboard -> Revolution Slider -> Import Slider and then go to that page editing screen on which you want to display Slider, Ex: Dashboard -> Pages -> Portfolio -> Add Revolution Slider (metabox) and choose your uploaded Slider Demo Alias(Name).
WooCommerce - The Best eCommerce!
WooCommerce is the best eCommerce solution for Wordpress CMS ever created so far. Since the 2.0 version of Hyper-X theme WooCommerce is fully supported. So as you can create an awesome portfolio websites with this theme you can sell your products as well. Hyper-X comes with premium styling controlles for your shop page, which means you can have an almost exactly the same shop page layout as your portfolio page, or even more. Also there are a predefined demos to showcase an eCommerce solutions as well. NOTE: each Hyper-X demo desing comes with integrated (predefined) shop page layout.
Theme Customizer is Wordpress core future since Wordpress 3.4. Wordpress Theme Customizer gives you(admin) ability to tweak settings and see a preview of those changes in real time. By default there are a few options, but Hyper-X comes with Amazing Customizaion Panel (all theme settings are located there), where almost each Section is divided by Tabs. To be honest I'm not going to discuss them one by one(they are too many), but I'll show you where to find major ones.
If your server supports Wordpress websites, Theme Customizer should work 100%. But sometimes there are some server side issues when customzier does not run. In that case you should increase PHP Memory Limit on your server. To do that please follow steps on This Link. If this method does not solve your issue, please contact to your Hosting Provider and ask to increase PHP Memory Limit.
Now let me explain you a bit complicated options, others you can explore yourself.
Within your Dashboard navigate to Appearance > Customize.
From this section you can limit page width and set pixel perfect Boxed Layouts and then Align it if you like. Also you can change Background Color, set Background Gradient or Background Image.
This is a first time when you meet with Tabs in Section. Now I'll explain how they are managed on Body Section > General Tabs example. Each Tab is divided by different number of Tab Windows, the maximum number is 5. See full list here:
- General Options Window
- Spacing Options Window
- Styling Options Window
- Font Options Window
- Info Window
From this section you can change Sidebar General Position. It may appear in 2 positions: Left or Top. In majority options are the same for both, but please note that Left Sidebar Menu supports only 1 level sub menu, while Top Sidebar Menu supports 3 levels.
Logo & Tagline
From this section you can change your site Logo and Tagline. Hyper-X Theme supports 2 types of Logo: Image and Text. For type Image you can upload Normal and Retina versions of Logo. And for type Text you can 'draw' your own Logo with awesome customization options.
Blog Page, Portfolio Page
From these sections you can change Layout Modes, set Posts Per Page for Portfolio Pages, increase/decrease Posts Columns Rate and change Image Sizes.
- For Masonry (Unlimited Height) post thumbnails will be displayed with original image sizes.
- Metro (Masonry - Different Width) layout is beta feature. Pages with this layout will be displayed like Masonry (Unlimited Height) if you don't change Post Width from backend (see explanation here).
- You can change Image Sizes only when Layout Mode is set to FitRows (Limited Height).
- After you change Aspect Ratio X or Aspect Ratio Y you should Rebuild Thumbnails, because Wordpress will crop Post Thumbnails with these dimensions.
- For Blog Page Posts Per Page by default is controlled from Dashboard > Settings > Reading > Blog pages show at most.
Custom Font Upload
Since Hyper-X v4.0 you can upload custom font on your website. Just navigate to Appearance > Custom Fonts page. In the first field enter Font Name (font-family), this is very important, because if this value is incorect your custom font will not work. After that, upload all accepted font files you have. If you did everything correctly you should see your new font in any Font Family select of the Theme Customizer.
- 24/7 Support Forum and Knowlidge Base
- Enhanced Wordpress Theme Customizer with:
- Countless options - everything updates in Real Time
- Easy & beautiful user interface
- NO backend Admin Panel - All Theme Options are located here in Theme Customizer
- Real Time Theme Customization
- Multiple Unique predefined Theme Designs (coming soon) - with advantages:
- One Click Design Activation
- One Click Demo Import
- Slider Revolution - 19$ cost for Free
- Visual Composer - 34$ cost for Free
- Ultimate Addons for Visual Composer - 18$ cost for Free
- 100% Responsive & Retina Ready
- Built with HTML5 and CSS3
- SEO Optimized
- Clean & Commented Code
- Translation Ready - .po & .mo files included (WPML friendly)
- Child Theme example included (with screenshot)
- Fullwidth and Boxed(set in pixels) Site Layouts
- Page Preloader:
- Preloader Icon Select
- Preloader Background Color
- Preloader Background Transition
- Multiple Animations of Page Loading
- Multiple Portfolio Pages
- Portfolio Page Options:
- Layout Modes: Masonry, Metro Masonry and FitRows(equal post height)
- Custom Post Thumbnail Aspect Ratios(image sizes)
- 2, 3, 4, 5 Columns with brakepoints
- or 1, 2, 3, 4 Constant Columns (brakepoints only for mobile devices)
- Post Likes and Sharing
- Client Testimonials
- Move Post Title and other elements independently above, below or on posts image Info Hover
- 20+ CSS image Info Hover effects with Transition control
- Before/After Image effect on Thumbnail Hover
- Info Hover effect Randomization
- Lightbox Image/Video Popup
- Image Overlays: Color & Transparency, Grayscale, Zoom
- Optional Post Format Icons with Icon Select
- and much more, even you can't imagine
- Blog Page Options:
- Almost all above Portfolio Page Options are the same for Blog
- Except CSS Info Hovers and Testimonials
- Portfolio Single Project Options:
- Project Header Position: Above/Below Featured Image
- Previous/Next Project navigation arrows (optional)
- Project Sharing Icons (on/off separately)
- Project Info - floated to the right side or below the Project Content
- Project Info - Sticks to the Content
- Additional fields for Project Description
- Categories, Skills, Project Link, etc...
- Blog Single Post Options:
- Almos the same as Portfolio Single Project Options
- Except: Project Info (Description and Details)
- Royal Shortcodes: (Integrated into the Visual Composer)
- Royal Portfolio Grid
- Royal Blog Grid
- Royal Contact Form
- Royal Before/After Image Effect
- Background: Colors, Transparent Colors, Images, Patterns and even Gradients for:
- Footer, etc...
- Sidebar Includes: Logo, Menu, Filters and Widgets
- Sidebar Options:
- Attachment Fixed/Static
- Scale On Scroll
- Position Top/Left
- Folding Button (left sidebar, optional)
- Custom Scrollbar (left fixed sidebar)
- 2 types of Logo - Image/Text
- Site Tagline below Logo with Advanced Font Options
- 'Draw' your own Text Logo with amazing Logo options:
- Advanced Font Options - Font Family, Size, Letter Spacing, etc...
- Background color, Text color, Text hover color
- Border: Size, Style, Color
- Corner Radius
- Text & Box Shadows, etc...
- Menu Options:
- Menu Title (left sidebar, optional)
- Text or Button style - with multiple styling options
- Menu button with fullscreen popup
- Active Item Highlight (optional)
- One level Sub Menu (left sidebar)
- Multi level Sub Menu (top sidebar)
- Show Sub Menus on - Hover/Click
- Advanced Font Options
- Filters Options:
- Filtrable Portfolio and Blog Pages
- Deeplinking future for Portfolio Filters
- Drag & Drop future for Portfolio Filters
- Text or Button style - with multiple options
- Active Ttem Highlight (optional)
- Advanced Font Options
- Fontawesome Icon Select - Left/Right side
- Isotope or Classic - links based Filters
- Gallery Options:
- Slideshow and Stacked
- Gallery Captions (optional)
- Advanced Slideshow options
- 7 Slideshow transition effects
- Arrows and Navigation controls
- Gutter control for Stacked Galleries
- Enhanced Wordpress' native Gallery Shortcode
- 1, 2, 3, 4 and 5 Collumns support for native Galleries
- Gutter control for native Gallery
- Similar Posts Carousel Options:
- For Portfolio and Blog
- Different Carousel Title
- Display Random or Related Posts (separately for Portfolio/Blog)
- Number of posts to show
- Increase/decrease Columns Rate
- Autoscroll and Transition options
- Previous/Next Arrows (optional)
- Image Hover Overlay - Color and Transparency
- Comments Options:
- Disable globally on Portfolio/Blog
- Comment author Avatar Sizes: Small, Medium, Large
- Post author comment Background Color highlight
- Input Fields Options:
- for Comments and Contact Page
- 5 layouts
- Background, Text, Border Colors
- Background, Text, Border Focus Colors
- and even Error Color
- Search Input - Icon Select
- Posts Pagination Options:
- 4 different types for Portfolio and Blog pages
- Numeric - with optional Previous/Next and First/Last
- Default - only Previous/Next
- Infinite Scroll - Automatic
- Load More - Manual
- Icon Select For: Prev/Next, First/Last and Load More button
- Contact Page Options:
- 7 Custom Fiels - for contact info (optional)
- Form and Info Titles (optional)
- Google Map positions - Top/Bottom
- Advanced Google Map options
- 5+ Layout combinations with above options
- Custom Copyright Text with Advanced Font Options
- Social Icons Options:
- 10 Social URL fields
- FontAwesome Social Icon Select
- Rearrange ability - with Icon Select
- Icons Size, Corner Radius, Border, Color, Hover Color, Shadow, etc...
- Copyright & Socials Block:
- Attachment: Fixed/Static
- Fixed - Folding Button (optional)
- Static - 3 different layouts
- Back to Top Button Options:
- Turn on/off
- Show up Transition
- Page scroll Transition
- Advanced Styling Options
- Global change of Heading and Body Text Families
- Websafe and 650+ Google Fonts
- Google Font Subsets: Latin, Cyrillic, Greek, Vietnamese
- Advanced Typography options From H1 to H6 including Paragraphs:
- Font Family
- Font Size
- Line Height
- Letter Spacing
- Font Weight (100 to 900)
- Custom CSS with - Editor styling and FullScreen options
- Favicon upload: Default and Apple Touch Icons
- Left Sidebar, Top and Footer Widgets - Advanced Styling Options
- Globally enable/disable Widget Titles
- 2, 3, 4 columns select for Top & Footer Widgets
- Disable Footer Widgets separately on different Pages.
Thank You All !
And after all this, if you like Hyper-X Theme, please don't hesitate to Rate it on Themeforest from your Downloads Page. Thank you in advance!
Have fun and Enjoy ;)