HostZine

Hostzine

Key Features

Fully Responsive
Fast Loading
Meaningful Trendy Layout
SEO Optimized
Dynamic Navigation Menu
Smooth Collapsing Transaction
Domain Searching Module
WHMCS Supported
Animation Slider
Redux Framework
CMB2
Elementor Pagebuilder
weForms
One Click Demo Import
MailChimp
Instagram Widget

Requirements

In order to run HostZine smoothly on your server, you need to fulfill this requirement listed below:

Wordpress: 3.9+

Download

Head over to HostZine download page on www.themeforest.net then download the hostzinepackage.zip file. In this .zip file, you have everything you need.

Installation

Installing WordPress

To install this theme, you must have a working version of WordPress already installed on your server. If you need help installing WordPress, go through the link and follow the instructions: Installing WordPress

Installing Theme

There are a couple of simple steps to install HostZine theme on your server. It's quite straightforward.

If you are starting from the scratch, we recommend you to follow the installation guide below to install with the pre-built existing demo data. This is the simplest way to get started.

On the other hand, if you already have an existing WordPress site and want to apply HostZine theme, in that case, you just need to install the following package:

hostzine.zip

You can find this package inside the downloaded .zip file of HostZine theme. So, before getting started with the installation process, Extract the .zip file and you'll find the desire hostzine.zip in the Theme folder after the extraction.

Log in to the WordPress Administration Panels.
Now, go to Appearance> Themes> Add New> Upload Theme then click on the Choose File button then select the hostzine.zip file and hit upload.
After installation being done, roll over to Appearance> Themes.
Find just uploaded theme on the Theme Thumbnail area.
Click the Activate button below to the theme's thumbnail, to set it as default.

Do not forget to Activate the theme as default after installation process successfully been done.

To know more, visit WordPress Codex

Active Required Plugins

There are four plugins, required for HostZine theme to work properly. Those are listed below:

HostZine Core : Theme core functionality (CPTs and shortcodes).
Elementor : Drag and Drop Page builder.
Redux Framework: Used to build its backend admin panel.
CMB2 : For building meta boxes.
WHMCS Bridge : For Purchasing a Web Hosting
One Click Demo Import : One Click Demo data importer.
weForms : For Creating Contact Form (optional)
Widget Importer & Exporter (optional)
Instagram Slider Widget : Showcasing Instagram Images (optional)
MailChimp for WordPress : Email Automation Tool (optional)

To activate those required plugins, simply go to Plugins

Select all those ten required plugins.

You can use the search module to find the desired plugins. The search box can be found on the right-top side of the module.

Select Activate from the drop-down menu just above the list of plugins.
Click to the Apply button next to the drop-down box and you are done.

To know more about the installation process of plugins, visit here: WordPress Codex

If there is any problem with automatic plugin installation, install them manually. You can find plugin bundle in your theme's /lib/plugins subdirectory. WooCommerce and Contact Form 7 can be found in WordPress plugins repository, install them through Plugins Screen

Import Demo Data

Log in to the WordPress Administration Panels.
Go to Appearance> Import Demo Data
Click on Import Demo Data button.

Demo Data

It will take some times to load all demo data on your server. Wait till it shows you a successful data importing message.

WHMCS Integration Settings

Global Settings

You can easily integrate HostZine with WHMCS, just go to settings > WHMCS Bridge. Place your WHMCS System URL and you are ready to go.

Theme Settings

You can differently customize theme according to your need using Easy Customization feature.

Click on HostZine at left-bottom corner of the module screen to open up Theme Setting panel.

Global Settings

Enable Breadcrumb : Allows you the control over enabling or disabling breadcrumb for your site.
Category Page Header Background Image : Upload your preferred category page header background image at here.
Search Page Header Background Image : Upload your preferred search page header background image at here.
404 Image : Upload media for your 404 page at here.

Header Options

Logo : Upload your branding logo using the Upload button.
Enable Header Top : Toggle on or off to show or hide header top.
Top Text : Put the message you want to show in header top position.
Email : Put the email address the customers are allowed to contact through.
Support URL : Put the link of your support page.
Login URL : Put the Link of your login page.
Phone : Put the phone no the customers are allowed to contact through.

Custom Color

Background Image

Enable Custom Color : Toggle to on or off custom color.
Primary Color : Select primary color from here and to make it transparent, tick on Transparent box.
Header Top Background : Allows you to choose Background Color for header top and to make it transparent, tick on Transparent box.
Header Top Text : Choose color for your header top text and to make it transparent, tick on Transparent box.
Header Top Text Link : Choose your preferred color for header top text link and to make it transparent, tick on Transparent box.
Menu Background : Select color for your menu background from here and to make it transparent, tick on Transparent box.
Menu Text : Allows you to choose color for text, which is place over menu and to make it transparent, tick on Transparent box.
Menu Hover/Active Color : Allows you to choose menu Hover color and to make it transparent, tick on Transparent box.
Custom Footer Color : Toggle to turn on or off the custom footer color.
Text Color : Choose the color for the text you want to insert on your footer and to make it transparent, tick on Transparent box.
Widget Title Color : Choose your preferred color for the widget title and to make it transparent, tick on Transparent box.
Background Color : Select the background color of footer from here and to make it transparent, tick on Transparent box.
Custom Copyright Color : From this option turn on or off the custom copyright color.
Text Color : Pick your preferred color for the text of copyright section and to make it transparent, tick on Transparent box.
Link Hover Color : Select your desired color for link hover form here and to make it transparent, tick on Transparent box.
Background Color : Choose the background color for the copyright from here and to make it transparent, tick on Transparent box.

Custom Fonts

Enable Custom Fonts Options : Toggle to enable or disable custom fonts options.
Body Typography : Choose your preferred font family, font-weight and styles, font subset, size, line height, color including define text align for body.
Heading Typography : Choose your preferred font family, font-weight and styles, font subset, size, line height, color including define text align for header.
Menu Typography : Choose your preferred font family, font-weight and styles, font subset, size, line height, color including define text align for menu.

Blog

Background Image

Show/Hide Related Post : Allows you enabling or disabling related post option.
Show/Hide Blog Details Page Social Share : This option enables you to show or hide blog details page social share.

Sidebar

Sidebar Settings

List Sidebar : Choose the position of List SIdebar. Either you can disable- showing list sidebar, just to pick No Sidebar from the drop-down.
Detail Sidebar : Choose the position of Details SIdebar. Either you can disable- showing details sidebar, unlikely the List Sidebar, just to pick No Sidebar from the drop-down.

Social

Enable Social Profile : Toggle to turn on or off the social profile.
Social Profile : Provide your social link for specific social networks at below boxes.
Facebook : Put your facebook profile URL.
Twitter : Put your Twitter profile URL.
Google Plus : Put your Google Plus profile URL.
LinkedIn : Put your LinkedIn profile URL.
Instagram : Put your Instagram profile URL.
Youtube : Put your Youtube profile URL.

Footer

Footer Columns : Define the number of columns to show the footer content.
Show Credit? : Toggle to show or hide credit on the footer.
Enable Footer Button : Allows you to enable or disable footer button.
Copyright Text : Put the copyright text here.
Bottom Left Banner : Upload the bottom left banner.
Bottom Right Banner : Upload the bottom right banner.

Import / Export

Import : This button allows you to import your custom theme settings if you have preserved any.
Download Data File : This button allows you to download the theme options as a .json file for further use in any other wp-themes. You just have to import that .json file using the Import button then.
Mega Menu Configuration

Mega Menu configuration is pretty much easy with hostzine. If you want to set the megamenu as demo then, after installing the theme go to Appearance > Menus. On Feature menu set the settings as the picture below and do not forget to put the exact class name “max-menu-clm6”.

To set Hosting ment as the demo menu set the setting as the picture below and do not forget to put the exact class name “max-menu-clm”.

Mega Menu

If you want you can do it all by yourself. Just customize the settings by yourself. To get the deafault style of mega menu, copy this code to a .json file and import it in Max megamenu.

{"title":"Default","container_background_from":"rgba(0, 0, 0, 0)","container_background_to":"rgba(0, 0, 0, 0)","menu_item_align":"right","menu_item_background_hover_from":"rgba(0, 0, 0, 0)","menu_item_background_hover_to":"rgba(0, 0, 0, 0)","menu_item_link_height":"75px","menu_item_link_color":"rgb(138, 136, 136)","menu_item_link_weight":"bold","menu_item_link_text_transform":"uppercase","menu_item_link_color_hover":"rgb(44, 102, 251)","menu_item_link_weight_hover":"bold","panel_background_from":"rgb(255, 255, 255)","panel_background_to":"rgb(255, 255, 255)","panel_border_color":"rgb(221, 221, 221)","panel_border_top":"1px","panel_header_border_color":"#555","panel_font_size":"14px","panel_font_color":"#666","panel_font_family":"inherit","panel_second_level_font_color":"#555","panel_second_level_font_color_hover":"#555","panel_second_level_text_transform":"uppercase","panel_second_level_font":"inherit","panel_second_level_font_size":"16px","panel_second_level_font_weight":"bold","panel_second_level_font_weight_hover":"bold","panel_second_level_text_decoration":"none","panel_second_level_text_decoration_hover":"none","panel_second_level_border_color":"#555","panel_third_level_font_color":"#666","panel_third_level_font_color_hover":"#666","panel_third_level_font":"inherit","panel_third_level_font_size":"14px","flyout_width":"200px","flyout_menu_background_from":"rgb(255, 255, 255)","flyout_menu_background_to":"rgb(255, 255, 255)","flyout_border_color":"rgb(221, 221, 221)","flyout_border_bottom":"1px","flyout_menu_item_divider":"on","flyout_menu_item_divider_color":"rgb(247, 247, 247)","flyout_link_padding_left":"15px","flyout_link_padding_top":"3px","flyout_link_padding_bottom":"3px","flyout_background_from":"rgb(255, 255, 255)","flyout_background_to":"rgb(255, 255, 255)","flyout_background_hover_from":"rgb(255, 255, 255)","flyout_background_hover_to":"rgb(255, 255, 255)","flyout_link_size":"14px","flyout_link_color":"#666","flyout_link_color_hover":"rgb(44, 102, 251)","flyout_link_family":"inherit","mobile_columns":"2","toggle_background_from":"#222","toggle_background_to":"#222","mobile_background_from":"#222","mobile_background_to":"#222","mobile_menu_item_link_font_size":"14px","mobile_menu_item_link_color":"#ffffff","mobile_menu_item_link_text_align":"left","mobile_menu_item_link_color_hover":"rgb(44, 102, 251)","mobile_menu_item_background_hover_from":"rgba(0, 0, 0, 0)","mobile_menu_item_background_hover_to":"rgba(0, 0, 0, 0)","custom_css":"\/** Push menu onto new line **\/ \r\n#{$wrap} { \r\n    clear: both; \r\n}\r\n\r\n\/* Apply Hover Styling to active Mega Menu - Second Level Links *\/\r\n#{$wrap} #{$menu} &gt; li.mega-menu-megamenu &gt; ul.mega-sub-menu &gt; li.mega-menu-item.mega-current-menu-item &gt; a.mega-menu-link,\r\n#{$wrap} #{$menu} &gt; li.mega-menu-megamenu &gt; ul.mega-sub-menu li.mega-menu-column &gt; ul.mega-sub-menu &gt; li.mega-menu-item.mega-current-menu-item &gt; a.mega-menu-link {\r\n    color: $panel_second_level_font_color_hover;\r\n    font-weight: $panel_second_level_font_weight_hover;\r\n    text-decoration: $panel_second_level_text_decoration_hover;\r\n    @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to);\r\n}\r\n\r\n\/* Apply Hover Styling to active Mega Menu - Third Level Links *\/\r\n#{$wrap} #{$menu} &gt; li.mega-menu-megamenu &gt; ul.mega-sub-menu &gt; li.mega-menu-item li.mega-menu-item.mega-current-menu-item &gt; a.mega-menu-link,\r\n#{$wrap} #{$menu} &gt; li.mega-menu-megamenu &gt; ul.mega-sub-menu li.mega-menu-column &gt; ul.mega-sub-menu &gt; li.mega-menu-item li.mega-menu-item.mega-current-menu-item &gt; a.mega-menu-link {\r\n    color: $panel_third_level_font_color_hover;\r\n    font-weight: $panel_third_level_font_weight_hover;\r\n    text-decoration: $panel_third_level_text_decoration_hover;\r\n    @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to);\r\n}\r\n\r\n\/* Apply Hover Styling to active Flyout Links and ancestors *\/\r\n#{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item &gt; a.mega-menu-link,\r\n#{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-ancestor &gt; a.mega-menu-link {\r\n    @include background($flyout_background_hover_from, $flyout_background_hover_to);\r\n    font-weight: $flyout_link_weight_hover;\r\n    text-decoration: $flyout_link_text_decoration_hover;\r\n    color: $flyout_link_color_hover;\r\n}"}

Mega Menu Setting

General Settings

Mega Menu

From here set the click event behaviour, mobile menu behaviour, css output, menu item descriptions, unbind JS events, prefix menu item classes and change setting for active menu instances.

Menu Themes

Mega Menu

In this option you got general settings, menu bar, mega menus, flyout menus, mobile menu and custom styling. From general setting tab you can set theme title, arrow style, Z index, shadow, hover transitions, reset widget styling.

From Menu bar you can set menu height, menu background, menu padding, menu border radius, menu items align, menu item background, menu item background(hover), menu item spacing, font, font(hover), menu item padding, menu item border, menu item border(hover), menu item border radius, menu item divider and highlight current item.

From Mega menus tab you can set the margin , padding, radius and typography for the mega menu.

From Mobile menu tab set the options for mobile menu.

How To's

Setup Homepage

Go to Settings > Reading
Select A Static page on Your homepage displays option.
Choose your preferred home variation from the Homepage drop-down menu.
Select Blog from the Post page drop-down menu.(optional)

Homepage Setup

Use the left-bottom Save Changes button to save the settings.

Front-end appearance :

Home 1: Homepage

Home 2:

Homepage

Home 3: Homepage

Home 4:

Homepage

Home 5:

Homepage

Elements

You can simply add an element on a page. All you need to do, just drag the element you want to add and drop it in a page then customize its setting as your preferences. You will have plenty of default elements to add or you can add our developed elements those are only for HostZine theme from the HOSTZINE ELEMENTS tab on the elementor.

Elements

Elementor

Elementor is the one of the best Drag and Drop visual editor for building pages, posts etc. in a WordPress site. If you are not familiar with Elementor, we recommend you to take a look at the following videos:

Getting Started with Elementor: Getting Started With Elementor - YouTube
Sections & Columns Part 1 : Learn How to Build Your Page Layout on Elementor
Sections & Columns Part 2 : Style Options for Sections and Columns
Sections & Columns Part 3 : Padding, Margin, Responsive and Other Settings in the Advanced Tab

Under https://docs.elementor.com/ you can find see the complete documentation of elementor page builder.

IMPORTANT: You have to disable Disable Global Colors and Disable Global Fonts options from Elementor> General in order get your custom styles worked on any elements.

Our theme specific elements can be found in HostZine tab under Elementor.

Slider

To add Slider element on a page, first-

Go to Pages
Click on Edit With Elementor
Drag the Slider from the left HOSTZINE ELEMENTS area and drop on your page.
Customize the settings how you prefer and click on Save button to save the pages.

Content

Slider

Under Slides, you have this options

ADD ITEM : This button allows you to create new slider items. Having created an item, just by a single mouse click- there are a couple of options will appear below this.

Inside slider options, on Background tab you have this option

Background : Choose the background image for your slider at here.

On Content tab you have these options

Content : Define Image, Description and Title for your slider.

Under Global Options you have this functions

Slider Height : Define the slider height.
Caption Position : Define position for the caption.
Content Alignment : Choose content alignment from here.
Slider Interval : Choose the time for slider interval. [Time is calculated in milliseconds.]
Background Overlay : Define background overlay from here.
Background Repeat : Define the repeat option.
Background Size : Define the size of your background.
Background Position : Choose the background position.
Background Attachment : Choose the background attachment type.

Under Nav Options you have this options.

Nav Enable/Disable : Toggle to enable or disable nav.
Arrow Enable/Disable : Toggle to enable or disable arrows.
Nav & Arrow Icon Color : Define Icon color for Nav & Arrow.
Nav & Arrow Bg Color : Define background color for Nav & Arrow.

Style

Slider

Under Title you have these options:

Title Color : Choose preferred title color from here.
Title Typography : Set custom typography from here.
Span Color : Choose preferred span color from here.
Span Typography : Set custom span typography from here.
Title Padding : You can set custom padding from here.

Under Content you have these options:

Content Color : Choose color of your content.
Content Typography : Set custom typography for your slider contents from here.
Content Spacing : Manage letter spacing between contents from here.
Description Padding : Set custom padding on the description from here.

Under Button option you have these options.

Typography : Set typography for button from here.
Background Color : Set background color for your button from here.
Border Type : Set border type from this option.
Width : Set Border Width.
Color : Set Border Color.
Border Radius : Set Border Radius.
Box Shadow : Access different box shadow options from here.
Padding : Give custom padding to box from here.

Under Front Image you have these options.

Front Image Position : Set image position.
Image Size : Make your image bigger or smaller according to your need.

Advanced

Slider

Element Style : Control margin, padding, z-index, entrance animation and add additional id or class to apply your custom design to an element.
Background : Control element background color, hover style and more.
Border : Apply your custom border style configuring different options from this tab.
Responsive : Control making this element to appear on various devices.
Custom CSS : Write your custom CSS code at here.