Thank you for purchasing our theme. We are happy that you are one of our customers and we assure you will not be disappointed. We do our best to produce top quality products with unique design and clean code. Hostiko is a responsive and clean WordPress theme, made by Team Designing Media.
Hostiko is specially designed for Web Hosting Companies. It is based on the Elementor and Revolution Slider.
Hostiko is built with the latest web technologies (Bootstrap framework, icon font, etc.) with the care of coding quality to make sure the theme works with all browsers and all devices.
Hostiko is professionally designed for web hosting, business, company, multi-purpose, domain sale sites. Hostiko theme includes different page layout for VPS hosting, shared hosting, and dedicated hosting.
You can build powerful web hosting sites with our awesome pricing tables and custom hosting page examples. Our Price sliders are easily customizable as well.
Don’t forget to visit our Portfolio Link.
Rate This Theme
We would appreciate it if you rate this theme on Theme Forest. It only takes a second but it helps more than you think and of course, it is always good to know what others think about our work.
If you like our theme, please consider rating it with 5 stars. You can rate it in the "Downloads" section of your account:
How to Use this Documentation
Before you get started, we highly encourage you to get familiar with this documentation file. Spending half an hour reading the manual may save a lot of your time and avoid questions with obvious answers.
To quickly find the necessary information click on the "Search" button in the upper right corner of this documentation file and type the "Keyword" you are looking for in the opened "Find Window" search box.
Alternatively, you can use your browser's built-in "Search" tool. Press the CMD+F (in macOS) or CTRL+F (in Windows) shortcut to open the search bar.
License
With Theme Forest regular license, you are licensed to use this theme to create one single End Product (i.e. The final website customized with your content) for yourself or one client. In short:
What is allowed with a single regular license?
You can create one website for yourself or your client and you can transfer that single website to your client for any fee. This license is then transferred to your client.
You can install the theme on your test server for testing/development purposes (that installation shouldn't be available to the public).
You can modify or manipulate the theme; you can combine it with other works to create the End Product.
Theme updates for that single End Product (Website) are free.
What is not allowed:
With a single regular license, it is not allowed that you create multiple websites. For multiple websites, you will need multiple regular licenses.
To resell the same website (Single End Product) to other clients. You will need to purchase an extended license for this.
For more information regarding license regulations and policies, please check the links below:
Please read this user guide carefully, it will help you eliminate most of the potential issues with the incorrect configuration for using this template.
To be able to request technical support assistance, you need to have a valid purchase code. To get the code, please navigate to your Theme Forest "Download" page and click on the theme download link. Check this Guide for more information on this matter.
PLEASE NOTE! As authors of this theme, we do provide support only for the theme-related features.
We do not provide support for additional customization, 3rd party plugins integration, or any other compatibility issues that might arise. Nevertheless, there is an exception that is only applied to the plug-in(s) we have developed and integrated ourselves.
If you have any questions that are beyond the scope of this help file, feel free to post them on our support message board (forum) at https://designingmedia.com/support/. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 10 am to 7 pm (GMT)UTC +5, from Monday till Friday.
Please be aware that a lot of the questions that are posted in the forum have been posted many times before, and get the same answers each time. Before submitting a new ticket, please try searching the forum for an answer.
II. Third-Party Extensions
Unfortunately, we do not provide support for third-party extensions. Please contact the author of the extension if needed. If you feel that you might have trouble with installing an extension, we advise you to order a professional installation service.
PLEASE NOTE! This theme may not be compatible with some third-party extensions. It is impossible for theme authors to make the theme compatible with all the existing extensions by default.
Only the standard (“default”) WordPress theme is compatible with all third-party extensions. Please be aware that an author of the extension should provide detailed instructions on how to integrate it with a custom theme (since nobody uses “default” themes).
III. Customization
As we have mentioned above the theme's customization/modification is beyond the scope of our support policy.
As for minor CSS tweaks, the best way is to use Web Inspector (available in Safari/ Safari Technology Preview ), Developer Tools (for Firefox and Google Chrome), or other similar tools.
Check these short video tutorials regarding Firebug functionality features:
IMPORTANT Please be aware that we do not include theme-related.PSD files into the theme package, because it might significantly increase the size of a downloadable archive. Please also be advised that all the clipart images included in this theme are copyrighted to their respective owners and are not available for download with this theme. Clipart images can not be used without express permission from the owner and/or need to be purchased separately.
Refund Policy
Hi, we're Envato and welcome to the Envato Market Refund Rules. Because we are a platform, these rules outline what you can expect from the authors of the items you buy. They apply to all authors and customers.
The products that authors sell on the platform are digital goods and cannot be "returned", so your entitlement to a refund is designed with this in mind. Of course, in addition to these rules, each country has its laws surrounding refunds, and these local laws are not excluded if they apply to you.
Before you ask for a refund from an author
If you have purchased an item from our “Web Themes and Templates” or “Code” category on Envato Market and you are experiencing a technical issue with the item we recommend that you contact the author of that item and seek assistance. Often they’ll be able to help to troubleshoot your problem.
Asking for refunds from authors via the Envato platform
We understand, however, that sometimes the author may not be able to solve your issue or there may be circumstances in which a refund is warranted. In this case, here are the circumstances in which we would expect an author to provide you with a refund:
Item is "not as described" or the item doesn’t work the way it should.
Item has a security vulnerability
Item support is promised but not provided
Item support extension not used
Items that have not been downloaded
Resolving disputes - asking Envato to help
Item is "not as described" or the item doesn’t work the way it should.
If an item doesn’t work the way it should then the author is required to promptly fix the issue by updating the item. An item is "not as described" if it is materially different from the item description or preview. If the issue can’t be fixed or it turns out that the item is “not as described” then you would be entitled to a refund from the author.
Item has a security vulnerability
If an item contains a security vulnerability and can't easily be fixed you would be entitled to a refund from the author. If the item can be fixed, then the author should do so promptly by updating the item. If the item contains a security vulnerability that is not patched in an appropriate timeframe then we would expect the author to provide a refund for the item.
Item support is promised but not provided
If an author advertises their item as including item support, you have a current support entitlement, and you are not provided that support in accordance with the item support policy the author should provide you with a refund.
Item support extension not used
If you purchase an item support extension and request a refund of that extension before your existing item support expires we would expect the author to provide you with a refund of that item support extension
Items that have not been downloaded
If you have not downloaded a purchased item within 3 months from the date of purchase, you may be eligible for a refund. You will be required to provide the author of that item your purchase code in order for the author to verify your claim that you have not downloaded an item. Although we think 3 months is a reasonable time, depending on where you are located, you might have a longer period to claim a refund if you have purchased for personal use and haven't downloaded the item.
Resolving disputes - asking Envato to help
If you and an author can't come to an agreement about a refund, you can raise a dispute and have Envato investigate the matter. We may ask you to provide supporting documentation or evidence. Any refund issued by Envato is entirely discretionary. We will make a decision based on all available information and you agree that our decision is final.
Neither Envato nor the authors are obliged to give policy refunds in any of the situations listed below.
You don't want it after you've downloaded it
The item did not meet your expectations or you feel the item is of low quality
You simply change your mind
You bought an item by mistake
You do not have sufficient expertise to use the item
You claim that you are entitled to a refund but do not provide sufficient information as to why you are entitled to a refund
You can no longer access the item because it has been removed or the author who previously provided the item is no longer active on our platform (we advise you to download items as soon as you have purchased them to avoid this situation).
Getting Started
WordPress Installation
Hostiko Theme can only be used on WordPress. So you will need to have wordpress installed on your local system or hosting domain. If you’re new to Wordpress and need help understanding how to install it then the following links can guide you on how to install and use Wordpress.
To use this theme you must be running at least WordPress 3.9, PHP5, MySql 5, or higher. If you use low-end hosting with limited resources (e.g. GoDaddy!), you may experience issues with "one-click" demo data installation features.
Many hosting services try to keep PHP limits low without any reason so if you’re facing any issue installing the theme wordpress, we recommend that you contact your web hosting service provider to make sure that your server PHP configuration limits are as follows:
max_execution_time 600
memory_limit 128M
post_max_size 32M
upload_max_filesize 32M
If you are running an unmanaged dedicated server or VPS, you should check your php.ini file. You can access your .htaccess and php.ini file through cPanel or FTP. Alternatively, you can edit the .htaccess file in the root of your website and add the following values:
php_value max_execution_time 600
php_value memory_limit 128M
php_value post_max_size 32M
php_value upload_max_filesize 32M
Setting these values will ensure you will not get error messages during the installation. To safeguard your website, please use secure passwords and the latest version of WordPress and plugins.
Hostiko Theme Installation
Hostiko installation can be done in two ways via Wordpress or FTP. Before Hostiko Theme Installation you need to download all the necessary Hostiko Theme Files from your Theme Forest account.
How to Download Files from Theme Forest:
If you’re downloading files from Theme Forest for the first time then you should download the Complete Theme Package so you can receive documentation for the essential plugins that you will be using with this Theme and demo files too. But if you have downloaded the full package before then you just need to download Wordpress Essential Files for the Theme.
Step 1: To download these files you need to Log In to your Theme Forest account and go to your “Download” tab and find your Hostiko purchase.
Step 2:After clicking the Download button you can choose whether you want to download the Installable Wordpress file only i.e just theme’s wordpress installable files or you can choose to download All files & Documentation i.e Complete Hostiko’s Theme Package.
I. Hostiko Theme Installation with Wordpress
If you have downloaded the Complete Hostiko Package, then before installing the theme, open the downloaded Zip file and navigate to the Elementor Theme folder.
To use Hostiko Elementor Theme, you need to upload a hostiko.zip file that is placed in the Elementor Theme folder.
Step 1: Log In to your wordpress website, once you’ve opened the admin area of your site then find the Appearance Tab on the left side menu and navigate to Appearance > Themes
Step 2: Click the “Add New” button on the top of the page and then click on the “Upload Theme” button.
Step 3: Now by clicking on the “Choose File” button, find the Hostiko Theme files in your system. If you have downloaded the “Installable Wordpress File” then you do not need to unzip that file but if you’ve downloaded Complete Hostiko Package then navigate to the Elementor Theme folder in a downloaded zip file and upload the hostiko.zip file that is placed in the Elementor Theme folder as mentioned earlier.
Step 4: Click on the “Install Now” button and your theme will start installing.
Step 5: Once your Hositko Theme is installed click on the Activate button to activate the newly installed theme.
Step 6: Once your theme is activated you will be prompted to install recommended plugins. You can see the Plugin Installation section to see how to install plugins properly.
All these plugins are included in the theme archive or can be installed from the WordPress.org repository.
The theme can function without the recommended plugins if you are using it for Blogs, Forms, Posts, etc, But it won’t work for Demo Pages. To make your website look more similar to the demo page, you will have to install the recommended plugins and import the demo content.
However, if you have an existing website, you should be very careful with plugins installation and importing demo data: this may affect an entire website's content, it looks, behavior, and structure. Please refer to the Demo Content section for more details.
Step 7: Once you have installed and activated all the required plugins, the new menu item “Hostiko” will appear at the bottom of the Wordpress Dashboard Menu on the left side.
II. Hostiko Theme Installation via FTP
If you have downloaded the Complete Hostiko Package, then before installing the theme, open the downloaded Zip file and navigate to the Elementor Theme folder.
To use Hostiko Elementor Theme, you need to upload a hostiko.zip file that is placed in the Elementor Theme folder.
Step 1: If you’re accessing your site through FTP for the first time then, I will recommend you download Filezilla and install it on your system. Then read this. This is a step-by-step guide on how to obtain your FTP credentials and how to connect FileZilla with your website.
Step 2: Once you have connected your site with Filezilla you will be able to access all of your website files on FileZilla. They will appear like this:
Step 3: Now navigate to wp-content > themes folder. Locate your extracted Hostiko Theme files in the right window. Open the folder and navigate to Elementor Theme folder > hotsiko. Right-click on the hositko folder and select ‘Upload’.
Step 4: Once your folder is uploaded in the themes directory, then Log In to your Wordpress Site. Navigate to Appearance > Themes. Locate Hostiko Theme and activate it.
Step 5: Once your theme is activated you will be prompted to install recommended plugins. You can see the Plugin Installation section to see how to install plugins properly.
All these plugins are included in the theme archive or can be installed from the WordPress.org repository.
The theme can function without the recommended plugins if you are using it for Blogs, Forms, Posts, etc, But it won’t work for Demo Pages. To make your website look more similar to the demo page, you will have to install the recommended plugins and import the demo content.
However, if you have an existing website, you should be very careful with plugins installation and importing demo data: this may affect an entire website's content, it looks, behavior, and structure. Please refer to the Demo Content section for more details.
Step 6: Once you have installed and activated all the required plugins, the new menu item “Hostiko” will appear at the bottom of the Wordpress Dashboard Menu on the left side.
Plugins Installation
Step 1: Once you’ve installed and activated Hostiko Theme, click on Begin installing plugins link, to make the theme look more similar to the demo page. You will have to install all recommended plugins so your theme can look more similar to the demo page.
Step 2: Select all the plugins by clicking on the checkbox that is right next to the Plugin heading in the table. Click on “Bulk Actions”, select “Install” and click on the “Apply” button. All the plugins will start installing it may take a few minutes.
Step 3: Once all the plugins are installed, navigate to the bottom of the page and click on “Return to Required Plugins Installer”.
Step 4: Select all the Plugins and navigate to Bulk Actions > Activate and click on ‘Activate’. All required plugins will be activated.
Step 5: Once all the plugins are activated click on ‘Return to Dashboard’ and the new menu item “Hostiko” will appear at the bottom of the Wordpress Dashboard Menu on the left side.
Alternatively, you can use the Appearance > Install Plugins menu that redirects to the plug-ins installation page. Check all the listed plug-ins, select the Install option, and click on the Apply button. Installation may take a few minutes, please be patient and do not refresh the page.
Plug-ins activation should be done in the same way. Navigate to Appearance > Install Plugins menu, check all the listed plug-ins, choose the Activate option, and click on the Apply button. Activation may take a few minutes, please be patient and do not refresh the page.
Available plug-ins:
AKD Framework
Hostiko Importer
ElementPress
Slider Revolution
Elementor
WHMCS Bridge
WP Domain Checker
Contact Form
Theme Registration
The very first step is before importing the demo content is to register them.
Step 1: Navigate to Hostiko in WP-Dashboard Menu
Step 2: Type in your registration code in the key input box and click on the “Save Changes” button.
Step 3: Once you see the “Settings Saved” message, click on the “Register this code” button.
Step 4: You’ll get a message saying “The License is verified” at the bottom.
Step 5: Once your license is verified you’ll see all your demo’s in the “Import/Export” tab. You can see the Demo Content section to see how to install the demo properly.
Demo Content
Our theme includes a simple One-click demo data import tool. It allows getting a copy of our demo website in just 1 click.
Before installing demo data, please make sure you have installed all the required plugins, check the Plugins installation section for more information.
To import demo content into a WordPress site, please follow these steps:
Step 1: Navigate to WP-Dashboard Menu > Hostiko > Import/Export. Choose the demo content you want to install and click on the “Install Button”.
Step 2: A dialog box will appear at the top asking to ‘Install demo data’, click on “Ok”. Your demo content will start importing. It may take a while for demo data to be copied from our server to your site. It depends significantly on the Internet connection speed between your website and our server. Please wait patiently and do not refresh/leave the page.
Once your Demo Content is imported your site will look like the demo and now you can use Hostiko Theme and all its features.
Alternatively, you can also install demo data by navigating to Tools > Instal Demo
Theme Update
Theme Update is required if you received the notification that a new version of the theme is available. You can see this information in the Changelog section at the bottom of the item's details page.
IMPORTANT! Before you go ahead with the update make sure you backup your old theme's folder. Download it to your computer locally.
It is a good practice to backup both your files and database regularly and especially before making some serious updates.
How to Update Hostiko via FTP?
Step 1: Log into your ThemeForest account and get the latest version of the theme.
Step 2: Connect to your site’s FTP using desktop client software like FileZilla. If you’re using Filezilla for the first time then read this. This is a step-by-step guide on how to access your site’s FTP.
Step 3: Once you’re connected to your website’s FTP, navigate to the wp-content > themes folder.
Step 4: Don’t delete any files, you have to overwrite the new files.
Step 5: Extract the theme Installable files you’ve downloaded from Theme Forest and upload it to the theme folder.
Step 6: Once the files start to upload, a dialog box will appear asking whether to overwrite files or not. Select the “Overwrite”, “Apply to current queue only” and “Apply only to uploads” options and click on “Ok”.
Step 7: Log In to your WordPress site. Navigate to Appearance > Themes. Click on Hostiko Theme and you will see that your theme is now updated.
Quick Start
After the theme activation and demo content import, we are ready to get started with basic theme settings like site title, tagline, logo, favicon, etc.
To change your site title and tagline, navigate to Settings > General. Please note, these parameters are important for search engines.
Another great idea may be setting a custom permalinks structure to make them more SEO friendly and human-readable. Go to Settings > Permalinks and make changes according to the example below.
Header Builder
Hostiko Elementor Theme provides you with Header Builder. By using this option you can either choose an already built Header template by our team to display on your website or you can build your own Header as you like.
If you’re new to WordPress and want help setting up your menus for Header then you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Header Template?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to change your site’s Header Design. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Header in Navigation Tab. Now you’ll see already built Header Templates provided by Hostiko.
Step 4:Hositko also provides you with an option to display Headers with conditions on specific posts or pages. Select the header you want to display on your site. Hover over it, and click on the Edit button.
You can view the Headers by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Header Template name in the Title input field.
Note: Don’t change the Type option, as we are in the Header Section.
Step 6: In Hostiko, you can choose where this Header Template will appear on your website. In Conditions Drop Down, you have three conditions:
Entire Site => If you select this condition then this Header Template will display on all pages of your site.
Singular => If you select Singular condition, then another dropdown will appear with 6 options.
All Singulars: In this condition, your Header Template will display on all Singular Pages of your site.
Front Page: This condition will display your Header Template only on the Front Page of your website.
All Posts: This condition will display your Header Template on the All Posts that are live on your website.
All Pages: This condition will display your Header Template on the All Pages that are live on your website.
Selective Singular: On choosing this condition, a dropdown input box will appear. Here you can Select Single Page where you want to display your Header Template.
404 Page: This condition will only display your Header Template in 404 Error Page.
Archive/Blog => This condition will display your chosen Header Template on Blog/Archive pages.
Step 7: After you're done setting conditions for your Header Template, switch on the Activation Toggle Button. This will activate your chosen Header Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 8: Click on the Save Changes button. Now your Header Template will display on your site under the conditions you set.
Step 9: If you want to change something in already built Header Templates, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Header Template.
How to create your own Header Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to design a custom Header, according to your site design. Hostiko provides you with tools, so you can easily design your own Header. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Header in Navigation Tab. Now you’ll see All Header Templates in the table. Click on the Add New button, to create & design Custom Header Template as you like.
Step 4: A dialog box named Template Settings will appear. Add the name of your custom Header in the Title input field. In the Type option select Header from the dropdown, as you’re creating a custom Header Template here so the type should be specified.
Step 5: In Hostiko, you can choose where this Header Template will appear on your website. In Conditions Drop Down, you have three conditions:
Entire Site =>If you select this condition then this Header Template will display on all pages of your site.
Singular => If you select Singular condition, then another dropdown will appear with 6 options.
All Singulars: In this condition, your Header Template will display on all Singular Pages of your site.
Front Page: This condition will display your Header Template only on the Front Page of your website.
All Posts: This condition will display your Header Template on the All Posts that are live on your website.
All Pages: This condition will display your Header Template on the All Pages that are live on your website.
Selective Singular: On choosing this condition, a dropdown input box will appear. Here you can Select Single Page where you want to display your Header Template.
404 Page: This condition will only display your Header Template in 404 Error Page.
Archive/Blog =>This condition will display your chosen Header Template on Blog/Archive pages.
Step 6: After you're done setting conditions for your Header Template, switch on the Activation Toggle Button. This will activate your chosen Header Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Header.
Step 8: You will be redirected to Elementor Editor, here you can design your Header Template easily. If you have never used Elementor before then watch this video.
Step 9:Hostiko provides you with an easy to use Navigation Menu Widget. By using this widget you can add your site Menu in your Header Template and design it easily. You can also use other widgets provided by Elementor to design your Header Template. In the Elementor Editor, type “Nav Menu” in the search bar.
Step 10: Once you find it, drag & drop Nav Menu Widget in the Editor area.
You can design the Navigation Menu as you like by using Custom CSS. Hostiko with the help of ElementPress provides you with an amazing feature of adding your own Custom CSS to every section or element. By using this feature you can style your elements as you like. You can see the ElementPress Custom CSS section to learn more about it.
Step 11: Now your Navigation Menu will show like this. Nothing is displayed in the Navigation Menu Widget because we haven’t yet selected which Menu to display.
Step 12: In the Edit Nav Menu sidebar on the left side of the screen, navigate to Menu Settings > Select Menu. Select the menu you want to display in your Header Template.
Step 13: Now that you have selected the menu for your Header Template. It will show in the editor.
Step 14: Now you can style your Header Template from Edit Nav Menu sidebar. You can set Content and its style in the Content Section.
Step 15: You can further style your Header Template in detail, by clicking on the Style tab. In the Style Section, you can style your Header Template for Desktop, Tab, Mobile. You can also easily style the Sub Menus and Hamburger Button for Mobile among other things.
Step 16: Once you’re done designing your Header, click on the Update button and your Header Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Header Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Header in Navigation Tab. Now you’ll see all Header Templates.
Step 3: Hover over the header you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can edit the Header Template name in the Title input field and conditions in Conditions Dropdown.
Note: Don’t change the Type option, as we are in the Header Section.
Step 5: Now if you want to change the Header Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Header Template.
Step 6: Once you’re done editing your Header, click on the Update button and your changes in Header Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to setup Mega Menu
Footer Builder
Hostiko Elementor Theme provides you with Footer Builder. By using this option you can either choose an already built Footer template by our team to display on your website or you can build your own Footer as you like.
If you’re new to WordPress and want help setting up your menus for Footer then you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Footer Template?
If you’re new to WordPress and Visual Composer then you might be looking for already built Templates. Hostiko Footer Builder provides you with already built Footer templates. Below are the steps on how to use them:
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to change your site’s Footer Design. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Footer in Navigation Tab. Now you’ll see already built Footer Templates provided by Hostiko.
Step 4:Hositko also provides you with an option to display Footers with conditions on specific posts or pages. Select the footer you want to display on your site. Hover over it, and click on the Edit button.
You can view the Footers by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Footer Template name in the Title input field.
Note: Don’t change the Type option, as we are in the Footer Section.
Step 6: In Hostiko, you can choose where this Footer Template will appear on your website. In Conditions Drop Down, you have three conditions:
Entire Site => If you select this condition then this Header Template will display on all pages of your site.
Singular => If you select Singular condition, then another dropdown will appear with 6 options.
All Singulars: In this condition, your Header Template will display on all Singular Pages of your site.
Front Page: This condition will display your Header Template only on the Front Page of your website.
All Posts: This condition will display your Header Template on the All Posts that are live on your website.
All Pages: This condition will display your Header Template on the All Pages that are live on your website.
Selective Singular: On choosing this condition, a dropdown input box will appear. Here you can Select Single Page where you want to display your Header Template.
404 Page: This condition will only display your Header Template in 404 Error Page.
Archive/Blog =>This condition will display your chosen Header Template on Blog/Archive pages.
Step 7: After you're done setting conditions for your Footer Template switch on the Activation Toggle Button. This will activate your chosen Footer Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 8: Click on the Save Changes button. Now your Footer Template will display on your site under the conditions you set.
Step 9: If you want to change something in already built Footer Templates, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Footer Template.
How to create your own Footer Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to design a custom Footer, according to your site design. Hostiko provides you with tools, so you can easily design your own Footer. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Footer in Navigation Tab. Now you’ll see All Footer Templates in the table. Click on the Add New button, to create & design Custom Footer Template as you like.
Step 4: A dialog box named Template Settings will appear. Add the name of your custom Header in the Title input field. In the Type option select Footer from the dropdown, as you’re creating a custom Header Template here so the type should be specified.
Step 5: In Hostiko, you can choose where this Footer Template will appear on your website. In Conditions Drop Down, you have three conditions:
Entire Site => If you select this condition then this Header Template will display on all pages of your site.
Singular => If you select Singular condition, then another dropdown will appear with 6 options.
All Singulars: In this condition, your Header Template will display on all Singular Pages of your site.
Front Page: This condition will display your Header Template only on the Front Page of your website.
All Posts: This condition will display your Header Template on the All Posts that are live on your website.
All Pages: This condition will display your Header Template on the All Pages that are live on your website.
Selective Singular: On choosing this condition, a dropdown input box will appear. Here you can Select Single Page where you want to display your Header Template.
404 Page: This condition will only display your Header Template in 404 Error Page.
Archive/Blog =>This condition will display your chosen Header Template on Blog/Archive pages.
Step 6: After you're done setting conditions for your Footer Template switch on the Activation Toggle Button. This will activate your chosen Footer Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your Footer Template easily. If you have never used Elementor before then watch this video.
Step 9: Hostiko provides you with an easy to use Navigation Menu Widget through ElementPress. By using this widget you can add your site Menu in your Footer Template and design it easily. You can also use other widgets provided by Elementor to design your Footer Template.
In the Elementor Editor, type “Nav Menu” in the search bar.
You can also use the Navigation Menu widget provided by Elementor through Wordpress.
Step 10: Once you find the widget you want to use, drag & drop Nav Menu Widget in the Editor area. You can design the Navigation Menu as you like by using Custom CSS. Hostiko with the help of ElementPress provides you with an amazing feature of adding your own Custom CSS to every section or element. By using this feature you can style your elements as you like. You can see the ElementPress Custom CSS section to learn more about it.
Step 11: If you’re using the Nav Menu Widget provided by Hostiko through ElementPress. Now your Navigation Menu will show like this. Nothing is displayed in the Navigation Menu Widget because we haven’t yet selected which Menu to display.
Step 12: In the Edit Nav Menu sidebar on the left side of the screen, navigate to Menu Settings > Select Menu. Select the menu you want to display in your Footer Template.
Step 13: Now that you have selected the menu for your Footer Template. It will show in the editor. Mostly in the Footer designs menu is displayed vertically. So you can show your menu vertically by selecting Hide on toggle Horizontal Align Menu button.
Step 14: Now you can style your Footer Template from the Edit Nav Menu sidebar. You can align Content and its style in the Content Section.
Step 15: You can further style your Footer Template in detail, by clicking on the Style tab. In the Style Section, you can style your Footer Template for Desktop, Tab, Mobile. You can also easily style the Sub Menus and Hamburger Button for Mobile among other things.
Step 16: Once you’re done designing your Footer, click on the Update button and your Footer Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Footer Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Footer in Navigation Tab. Now you’ll see all Footer Templates.
Step 3: Hover over the footer you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Footer Template name in the Title input field and condition in Conditions Dropdown. Note: Don’t change the Type option, as we are in the Footer Section.
Step 5: Now if you want to change the Footer Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Footer Template.
Step 6: Once you’re done designing your Footer, click on the Update button and your Footer Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
Single Post
Hostiko Elementor Theme gives you the option to either use already built Single Post Templates designed by Hostiko to display your posts in your site or you can design your Single Post Template as you like.
If you’re new to WordPress and you haven’t set up your Post before then click here to read how to add a Post in your Wordpress Site.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Single Post Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to edit Single Post Templates for your site or you might want to choose another already built template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Single in Navigation Tab. Now you’ll see already built Single Post Templates provided by Hostiko.
Step 4: Hositko also provides you with an option to display your Single Post with conditions on specific posts or pages. Select the post you want to display on your site. Hover over it, and click on the Edit button.
You can view the Single Post by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Single Post Template name in the Title input field. Note: Don’t change the Type option, as we are in the Single Post Section.
Step 6: In Hostiko, you can choose where this Single Post Template will appear on your website. In Conditions Drop Down, for Single Post Template there is only 1 condition Singular.
When Singular condition is selected, there is a dropdown below it with 2 conditions:
All Singulars: In this condition, your Single Post Template will display on all Singular Pages of your site.
Selective Singular: On choosing this condition, a dropdown input box will appear. Here you can Select Single Page where you want to display your Single Post Template.
Step 7: After you're done setting conditions for your Single Post Template, switch on the Activation Toggle Button. This will activate your chosen Single Post Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 8: Click on the Save Changes button. Now your Single Post Template will display on your site under the conditions you set.
Step 9: If you want to change something in already built Single Post Templates, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Single Post Template.
How to create your own Single Post Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to design a custom Single Post, according to your site design. Hostiko provides you with tools, so you can easily design your own Post Template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Single in Navigation Tab. Now you’ll see All Single Post Templates in the table. Click on the Add New button, to create & design Custom Single Post Template as you like.
Step 4: A dialog box named Template Settings will appear. Add the name of your custom Single Post in the Title input field. In the Type option select Single from the dropdown, as you’re creating a custom Single Post Template here so the type should be specified.
Step 5: In Hostiko, you can choose where this Single Post Template will appear on your website. When you select Single from Type dropdown, then the condition will automatically set to Singular and Conditions Drop Down will display only 1 condition i.e Singular.
When the Singular condition is selected, there is a dropdown below it with 2 conditions:
All Singulars: In this condition, your Single Post Template will display on all Singular Pages of your site.
Selective Singular: On choosing this condition, a dropdown input box will appear. Here you can Select Single Page where you want to display your Single Post Template.
Step 6: After you're done setting conditions for your Single Post Template, switch on the Activation Toggle Button. This will activate your custom-designed Single Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your Single Post Template easily. If you have never used Elementor before then watch this video.
Step 9: Hostiko provides you with an easy to use Elementor Widgets through ElementPress, so you can design your Single Post Template. ElementPress provides you with multiple widgets to design your posts. In the Elementor Editor Sidebar scroll down until you see the Single Post section.
You can design your Single Post as you like by using Custom CSS. You can apply custom CSS to any Widget. Hostiko with the help of ElementPress provides you with an amazing feature of adding your own Custom CSS to every section or element. By using this feature you can style your elements as you like. You can see the ElementPress Custom CSS section to learn more about it.
Step 10: After you’ve navigated to the Single Post section, you’ll see all the widgets that are needed to design a Single Post Template. The following widgets are provided by Hostiko to make designing a single post easier. You can also use other widgets provided by Elementor to design your Single Post Template.
Share Post Widget: By using this widget you can link your Post with any of the social media platforms. You can add social media icons and contents in the Content section and you can style those icons in the Style section of the widget.
Post Images Widget: This Widget is used to show Post Images in a Post. When you use this Widget in your Custom Single Post Template it will show you a sample image that you can style and your post images will show with those styles when your Posts are viewed on your site. Image size and Alignment can be set in the Content Section. You can set a border to images from the Style Tab.
Post Content: This Widget is used to show Post Content in a Post. When you use this Widget in your Custom Single Post Template it will show you dummy content that you can style and your post content will show with those styles when your Posts are viewed on your Site. You can align your post content in the Single Post Content tab. Post Content can be styled in the Style tab of the widget.
Post Comments: This Widget is used to show Post Comments in a Post. When you use this Widget in your Custom Single Post Template, it won’t show you any comments in the editor. Through this widget, you can style your post comments so they display at your site with those styles. You can align and show as many comments as you want on a single post under Single Post Comment Tab. You can style the comments according to your site’s design under the Style tab in the Post Comments Widget.
Post Author Image: This Widget is used to show Post Author Image in a Post. When you use this Widget in your Custom Single Post Template, it won’t show the image in the editor. Through this widget, you can style your author image, so it displays at your site with these styles. You can style your author image in the Content Section under the Single Post Author tab.
Post Meta Widget: This Widget is used to show Post Meta in a Post. Post Meta includes information like post date, author, categories and tags, or custom taxonomies. Through this Widget, you can style these Meta’s, so they will display on your Post with those styles. This Widget will display metas only on your Post. It won’t show meta in the editor. You can add which Meta’s you want to display under the Single Post Meta tab in the widget. You can style these meta’s under the Style tab.
Post Breadcrumbs: This widget is used to show Breadcrumbs in a Post. Through this widget, you can display and style Post Breadcrumbs. You can align Breadcrumbs under the Single Post Breadcrumbs tab. You can style these Breadcrumbs under the Style tab.
Step 11: Once you’re done designing your Single Post Template, click on the Update button and your Single Post Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Single Post Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Single in Navigation Tab. Now you’ll see all Single Post Templates.
Step 3: Hover over the single post template you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Single Post Template name in the Title input field and condition in Conditions Dropdown.
Note: Don’t change the Type option, as we are in the Single Section.
Step 5: Now if you want to change the Single Post Template design, then click on the Edit Content button.
will redirect you to Elementor Editor, where you can edit anything in the Single Post Template.
Step 6: Once you’re done designing your Single Post Template, click on the Update button and your Single Post Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
Archive Page
Hostiko Elementor Theme gives you the option to either use already built Archive Page Templates designed by Hostiko to display on your website’s Archive Page or you can design your own Archive Page Template as you like.
If you’re new to WordPress and want help setting up your menus for Footerthen you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Archive Page Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to change your site’s Archive Page Design. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Archive in Navigation Tab. Now you’ll see the already built Archive Page Templates provided by Hostiko.
Step 4: You can edit the Title and Activation status of the Archive Page Template that you chose by hovering over it, and clicking on the Edit button.
You can view the Archive Page Templates by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Archive Page Template name in the Title input field.
Note: Don’t change the Type option, as we are in the Archive Section.
As Archive Page Templates can only be displayed on the Archive Page of your site, so Conditions will be set to Archive/Blog.
Step 7: In the Template Settings dialog box, switch on the Activation Toggle Button. This will activate your chosen Archive Page Template and it will automatically display on your site’s Archive Page.
Step 8: Click on the Save Changes button. Now your Archive Page Template will display on your site’s Archive Page.
Step 9: If you want to change something in an already built Archive Page Template, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Archive Page Template.
How to create your own Archive Page Template?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to design a custom Archive Page, according to your site design. Hostiko provides you with tools, so you can easily design your own Archive Template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Archive in Navigation Tab. Now you’ll see All Archive Templates in the table. Click on the Add New button, to create & design Custom Archive Templates as you like.
Step 4: A dialog box named Template Settings will appear. Add the name of your custom Archive Page in the Title input field. In the Type option select Archive from the dropdown, as you’re creating a custom Archive Page Template here so the type should be specified.
Step 5: In Hostiko, you can choose where this Single Post Template will appear on your website. When you select Archive from Type dropdown, then the condition will automatically set to Archive/Blog and Conditions Drop Down will display only 1 condition i.e Archive/Blog.
Step 6: After you're done setting conditions for your Archive Page Template, switch on the Activation Toggle Button. This will activate your custom-designed Archive Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your Archive Page Template easily. If you have never used Elementor before then watch this video.
Step 9: Hostiko provides you with an easy to use Elementor Widgets through ElementPress, so you can design your Archive Template. ElementPress provides you with all essential widgets that you need to design the Archive Page Template. In the Elementor Editor Sidebar scroll down until you see the Single Post section.
You can design your Archive Page as you like by using Custom CSS. You can apply custom css to any Widget. Hostiko with the help of ElementPress provides you with an amazing feature of adding your own Custom CSS to every section or element. By using this feature you can style your elements as you like. You can see the ElementPress Custom CSS section to learn more about it.
Step 10: After you’ve navigated to the Single Post section, you’ll see all the widgets that are needed to design a Single Post Template. But for the Archive Page Template, you just need the last four widgets. The following widgets are provided by Hostiko to make designing the archive page easier. You can also use other widgets provided by Elementor to design your Archive Page Template.
Search: This widget is used just to place a Search Icon. If you don’t want to use a search bar then you can place a search icon on your site.
Blog Post Widget: The archive page is used to display all your posts in one page. This widget is used to display all your blog posts on one page i.e Archive Page. You can also design your Blog Posts through this Widget. In the Content section, you can choose what to display in each post.
You can then style these single postcards in the Style section.
Step 11: Once you’re done designing your Archive Page Template, click on the Update button and your Archive Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Archive Page Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Archive in Navigation Tab. Now you’ll see all Archive Templates.
Step 3: Hover over the Archive Template you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Archive Template name in the Title input field and condition in Conditions Dropdown. Note: Don’t change the Type option, as we are in the Archive Section.
Step 5: Now if you want to change the Archive Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Archive Template.
Step 6: Once you’re done designing your Archive Page Template, click on the Update button and your Archive Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
404 Page
Hostiko Elementor Theme gives you the option to either use the already built 404 Page Templates designed by Hostiko, to display on your website or you can design your own 404 Page Template as you like.
If you’re new to WordPress and want help setting up your menus for Footerthen you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko 404 Page Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: After installing demo data you might want to change your site’s 404 Page Design. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on 404 in Navigation Tab. Now you’ll see the already built 404 Page Templates provided by Hostiko.
Step 4: You can edit the Title and Activation status of the 404 Page Template that you chose by hovering over it, and clicking on the Edit button.
You can view the 404 Page Templates by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the 404 Page Template name in the Title input field. Note: Don’t change the Type option, as we are in the 404 Page Section.
Step 6: As 404 Page Templates will be displayed whenever a user enters the wrong URL or a page is unavailable. So the Conditions will be set to the Entire Site.
Step 7: In the Template Settings dialog box, switch on the Activation Toggle Button. This will activate your chosen 404 Page Template whenever there is an unavailable page or URL.
Step 8: Click on the Save Changes button. Now your 404 Page Template will display whenever there is an unavailable page or URL.
Step 9: If you want to change something in an already built 404 Page Template, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the 404 Page Template.
How to create your own 404 Page Template?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: After installing demo data you might want to design a custom 404 Page, according to your site design. Hostiko provides you with tools, so you can easily design your own 404 Page Template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on 404 in Navigation Tab. Now you’ll see All 404 Page Templates in the table. Click on the Add New button, to create & design a Custom 404 Page Template as you like.
Step 4: A dialog box named Template Settings will appear. Add the name of your custom 404 Page in the Title input field. In the Type option select 404 from the dropdown, as you’re creating a custom 404 Page Template here so the type should be specified.
Step 5: In Hostiko, you have the option to choose where a template should display on your site but a 404 page should display on wrong or unavailable URL. So when you select 404 from Type dropdown, then the condition will automatically set to Entire Site and Conditions Drop Down will display only 1 condition i.e Entire Site.
Step 6: After you're done setting conditions for your 404 Page Template, switch on the Activation Toggle Button. This will activate your custom-designed 404 Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your 404 Page Template easily. If you have never used Elementor before then watch this video.
Step 9: Here you can design your 404 Page Template using Elementor Widgets.
Step 10: Once you’re done designing your 404 Page Template, click on the Update button and your 404 Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any 404 Page Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on 404 in Navigation Tab. Now you’ll see all 404 Templates.
Step 3: Hover over the 404 Template you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the 404 Template name in the Title input field and condition in Conditions Dropdown. Note: Don’t change the Type option, as we are in the Archive Section.
Step 5: Now if you want to change the 404 Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the 404 Template.
Step 6: Once you’re done designing your 404 Page Template, click on the Update button and your 404 Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
Under Maintenance
Hostiko Elementor Theme gives you the option to either use the already built Under Maintenance Templates designed by Hostiko, to display on the main URL of your site when it’s Under Maintenance, or you can design your own Under Maintenance Templates as you like.
If you’re new to WordPress and want help setting up your menus for Footer then you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Under Maintenance Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to use an Under Maintenance Page Template while you design and set up your site properly. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Under Maintenance in Navigation Tab. Now you’ll see the already built Under Maintenance Page Templates provided by Hostiko.
Step 4: You can edit the Title and Activation status of the Under Maintenance Page Template that you chose, by hovering over it, and clicking on the Edit button.
You can view the Under Maintenance Page Templates by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Under Maintenance Page Template name in the Title input field. Note: Don’t change the Type option, as we are in the Under Maintenance Section.
Step 6: Now Under Maintenance Page Templates will be displayed on your Site URL if activated. So the Conditions will be set to the Entire Site.
Step 7: In the Template Settings dialog box, switch on the Activation Toggle Button. This will activate your chosen Under Maintenance Page Template. Once it’s activated your Site URL will display this page.
Step 8: Click on the Save Changes button. Now your Under Maintenance Page Template will display on your Site URL.
Step 9: If you want to change something in an already built Under Maintenance Page Template, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Under Maintenance Page Template.
How to create your own Under Maintenance Template?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: After installing demo data you might want to design a custom Under Maintenance Page, according to your site design. Hostiko provides you with tools, so you can easily design your own under the Maintenance Page Template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Under Maintenance in Navigation Tab. Now you’ll see All Under Maintenance Page Templates in the table. Click on the Add New button, to create & design Custom Under Maintenance Page Template as you like.
Step 4: A dialog box named Template Settings will appear. Add the name of your custom Under Maintenance Page in the Title input field. In the Type option select Under Maintenance from the dropdown, as you’re creating a custom Under Maintenance Page Template here so the type should be specified.
Step 5: In Hostiko, you have the option to choose where a template should display on your site but an Under Maintenance page should display on the site url. So when you select Under Maintenance from Type dropdown, then the condition will automatically set to Entire Site and Conditions Drop Down will display only 1 condition i.e Entire Site.
Step 6: After you're done setting conditions for your Under Maintenance Page Template, switch on the Activation Toggle Button. This will activate your custom-designed Under Maintenance Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your Under Maintenance Page Template easily. If you have never used Elementor before then watch this video.
Step 9: Here you can design your Under Maintenance Page Template using Elementor Widgets.
Step 10: Once you’re done designing your Under Maintenance Page Template, click on the Update button and your Under Maintenance Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Under Maintenance Page Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Under Maintenance in Navigation Tab. Now you’ll see all Under Maintenance Templates.
Step 3: Hover over the Under Maintenance Template you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Under Maintenance Template name in the Title input field and condition in the Conditions Dropdown. Note: Don’t change the Type option, as we are in the Under Maintenance Section.
Step 5: Now if you want to change Under Maintenance Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Under Maintenance Template.
Step 6: Once you’re done designing your Under Maintenance Page Template, click on the Update button and your Under Maintenance Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
Search Page
Hostiko Elementor Theme gives you the option to either use the already built Search Page Templates designed by Hostiko to display on your site, or you can design your own Search Page Templates as you like.
If you’re new to WordPress and want help setting up your menus for Footer then you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Search Page Templates?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: After installing demo data you might want to use Search Page on your website, so customers can search easily. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Search in Navigation Tab. Now you’ll see the already built Search Page Templates provided by Hostiko.
Step 4: You can edit the Title and Activation status of the Search Page Template that you chose, by hovering over it, and clicking on the Edit button.
You can view the Search Page Templates by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Search Page Template name in the Title input field. Note: Don’t change the Type option, as we are in the Search Section.
Search Page Templates will be displayed wherever an on site Search Page link is added,. so the Conditions will be set to the Entire Site.
Step 6: In the Template Settings dialog box, switch on the Activation Toggle Button. This will activate your chosen Search Page Template.
Step 7: Click on the Save Changes button. Now your Search Page Template will display on your Site.
Step 8: If you want to change something in an already built Search Page Template, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Under Maintenance Page Template.
How to create your own Search Page Template?
Step 1: First you have to make sure that the ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin.
Step 2: After installing demo data you might want to design a custom Search Page, according to your site design. Hostiko provides you with tools, so you can easily design your own Search Page Template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Search in Navigation Tab. Now you’ll see All Search Page Templates in the table. Click on the Add New button, to create & design Custom Search Template as you like.
Step 4: A dialog box named Template Settings will appear. Add name of your custom Search Page in the Title input field. In the Type option select Search from the dropdown, as you’re creating a custom Search Page Template here so the type should be specified.
Step 5: In Hostiko, you have the option to choose where a template should display on your site but a Search page should display on site url. So when you select Search from Type dropdown, then condition will automatically set to Entire Site and Conditions Drop Down will display only 1 condition i.e Entire Site.
Step 6: After you're done setting conditions for your Search Page Template, switch on the Activation Toggle Button. This will activate your custom designed Search Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your Archive Page Template easily. If you have never used Elementor before then watch this video.
Step 9: Hostiko provides you with an easy to use Elementor Widgets through ElementPress, so you can design your Search Template. ElementPress provides you with all essential widgets that you need to design the Search Page Template. In the Elementor Editor Sidebar scroll down until you see the Single Post section.
Step 10: After you’ve navigated to the Single Post Section, you’ll see all the widgets that are needed to design a Search Page Template. Following widgets are provided by Hostiko to make designing the search page easier. You can also use other widgets provided by Elementor to design your Search Page Template.
Search: This widget is used just to place a Search Icon. If you don’t want to use a search bar then you can place a search icon on your site.
Search Post Widget: This widget is used to style search results. For example: If a user searches for a post then the result of that search can be designed to display through this widget. You can style everything that search result will contain.
EPress Search: This widget is used to display & style a search bar.
Step 11: Once you’re done designing your Search Page Template, click on the Update button and your Search Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Search Page Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Under Maintenance in Navigation Tab. Now you’ll see all Under Maintenance Templates.
Step 3: Hover over the Search Page Template you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Search Template name in the Title input field and condition in Conditions Dropdown. Note: Don’t change the Type option, as we are in the Search Section.
Step 5: Now if you want to change Search Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Search Template.
Step 6: Once you’re done designing your Search Page Template, click on the Update button and your Search Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
Blog Page
Hostiko Elementor Theme gives you the option to either use the already built Blog Page Templates designed by Hostiko to display on your blogs, or you can design your own Blog Page Templates as you like.
If you’re new to WordPress and want help setting up your menus for Footer then you can look at this guide here.
If you’re using Elementor for the first time, then you can read this documentation to get started.
How to use the already built Hostiko Blog Page Templates?
Step 1: First you have to make sure that ElementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: After installing demo data you might want to use a design for Blog Page. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Blog Page in Navigation Tab. Now you’ll see the already built Blog Page Templates provided by Hostiko.
Step 4: You can edit the Title and Activation status of the Blog Page Template that you chose, by hovering over it, and clicking on the Edit button.
You can view the Blog Page Templates by Hovering over it and clicking on the View button.
Step 5: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Blog Page Template name in the Title input field.
Every Blog post on your site will be displayed as Blog Page Templates, so the Conditions will be set to Entire Site.
Step 7: In Template Settings dialog box, switch on the Activation Toggle Button. This will activate your chosen Blog Page Template, and every Blog Post in your page will be displayed in this design.
Step 8: Click on the Save Changes button. Now every Blog Post in your page will be displayed in the design you chose.
Step 9: If you want to change something in an already built Blog Page Template, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Blog Page Template.
How to create your own Blog Page Template?
Step 1: First you have to make sure that EelementPress plugin is installed and activated. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: After installing demo data you might want to design a custom Blog Page, according to your site design. Hostiko provides you with tools, so you can easily design your own Archive Template. Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 3: Click on Blog Page in Navigation Tab. Now you’ll see All Blog Page Templates in the table. Click on the Add New button, to create & design Custom Blog Template as you like.
Step 4: A dialog box named Template Settings will appear. Add name of your custom Blog Page in the Title input field. In the Type option select Blog Page from the dropdown, as you’re creating a custom Blog Page Template here so the type should be specified.
Step 5: In Hostiko, you can choose where this Blog Page Template will appear on your website. When you select Blog from Type dropdown, then condition will automatically set to Entire Site and Conditions Drop Down will display only 1 condition i.e Entire Site.
Step 6: After you're done setting conditions for your Blog Page Template, switch on the Activation Toggle Button. This will activate your custom designed Blog Template and it will automatically display on pages according to your set conditions in the Template Settings dialog box.
Step 7: Now click on the Edit Content button to start designing your Footer.
Step 8: You will be redirected to Elementor Editor, here you can design your Blog Page Template easily. If you have never used Elementor before then watch this video.
Step 9: Hostiko provides you with an easy to use Elementor Widgets through ElementPress, so you can design your Blog Template. ElementPress provides you with all essential widgets that you need to design the Blog Page Template. In the Elementor Editor Sidebar scroll down until you see the Single Post section.
Step 10: After you’ve navigated to the Single Post Section, you’ll see all the widgets that are needed to design a Single Post Template. But for the Blog Page Template you just need the two widgets i.e. Search, Blog Post. Following widgets are provided by Hostiko to make designing the blog page easier. You can also use other widgets provided by Elementor to design your Blog Page Template.
Search: This widget is used just to place a Search Icon. If you don’t want to use a search bar then you can place a search icon on your site.
Blog Post Widget: This widget is used to display all your blog posts on one page i.e Blog Page. You can also design your Blog Posts through this Widget. In the Content section you can choose what to display in each post.
You can then style these single post card in Style section.
Step 11: Once you’re done designing your Blog Page Template, click on the Update button and your Blog Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
How to edit any Blog Page Template?
Step 1: Navigate to ElementPress > Template Options in WP-Dashboard Menu.
Step 2: Click on Blog in Navigation Tab. Now you’ll see all Blog Page Templates.
Step 3: Hover over the Blog Template you want to edit. Click on the Edit button.
Step 4: When you click on the Edit button, a dialog box named Template Settings will appear. In the dialog box, you can change the Blog Template name in the Title input field and condition in Conditions Dropdown. Note: Don’t change the Type option, as we are in the Blog Page Section.
Step 5: Now if you want to change Blog Template design, then click on the Edit Content button.
It will redirect you to Elementor Editor, where you can edit anything in the Archive Template.
Step 6: Once you’re done designing your Blog Page Template, click on the Update button and your Blog Page Template will be saved. You can also preview your header by clicking on ‘Eye Icon’.
If you want to go back to Wordpress Dashboard, then click on the Hamburger button in the top left corner of your editor. Click on “Exit to Dashboard”.
WP Domain Checker
WP Domain Checker is a WordPress plugin which allows you to check domain name availability from your wordpress site. To use WP Domain Checker with Hostiko Theme, first you have to make sure that WP Domain Checker plugin is installed and activated. Navigate to Plugins in WP Dashboard Menu. Check if the plugin is activated.
How to use WP Domain Checker?
WP Domain Checker can be used in your site in 2 ways:
Through a Shortcode
Through a Widget
Shortcodes:
If you want to display WP Domain Checker Form in any of your site’s pages or posts, you will need to insert a shortcode in that page. Following are the shortcodes that you can use to display WP Domain Checker form:
Parameter
Description
Example
Button
Change button text.
Default: “Check”
[wpdomainchecker button="SEARCH"]
width
Change search box width.
Default: 900px
[wpdomainchecker width="600"]
item_id
Integrated to specific product ID.
(Product ID in settings will be ignored).
[wpdomainchecker item_id="1234"]
size
Change search box size (small or large).
Default: large
[wpdomainchecker size="small"]
recaptcha
Enable/disable recaptcha.
Site Key & Secret Key required.
Default: no
[wpdomainchecker recaptcha="yes"]
allowed_tld
Allow only specific tld to be checked.
Separate by comma for each extension.
Default: no
Add additional Class to the Search Box
You can use “mobile” class if you place
the shortcode in small container,
This will make the design fit with the container.
[wpdomainchecker class="mobile"]
IMPORTANT! All above shortcode parameters will override the WP Domain Checker settings in WP Admin Dashboard. Now to use these shortcodes in your page or posts. Select the page you want to show WP Domain Checker form on. Navigate to Pages in WP Dashboard Menu. If you want to create a new page for WP Domain Checker search bar then click on “Add New” button.But if you want to add WP Domain Checker in an already existing page then click on “All Pages”. Find the page you want to use WP Domain Checker on and click on the “Edit with Elementor” button.
Now in the “Elementor Editor”, type Shortcode in the Search Bar.
Now Drag & Drop this Shortcode Widget into your editor.
Now in the Shortcode Widget Content section, Enter the shortcode you want to use from the list like [wpdomainchecker button="SEARCH"]
Now you’ll see a Search Bar in your Shortcode area. You can design the Search Bar and Search button as you like by using Custom Css. Hostiko with the help of ElementPress provides you with an amazing feature of adding your own Custom Css to every section or element. By using this feature you can style your elements as you like. You can see the ElementPress Custom CSS section to learn more about it.
After you’re done adding shortcode and styling, update your page by clicking on the “Update” button. And then click on the “Eye Icon” to view your changes in your page.
In your page, you can see a domain search bar is added to search a domain through WP Domain Checker.
Widgets:
Follow these steps to setup WP Domain Checker for Widgets:
Step 1: Navigate to Appearance > Widgets in WP Dashboard Menu.
Step 2: Scroll down until you find the WP Domain Checker Widget section. Click on WP Domain Checker Widget and a dropdown will display. Here you can choose where you want to display it on your site. Select it and click on the “Add Widget” button. For Example I want to display it in the Sidebar.
Step 3: Once I added the widget, a WP Domain Checker dropdown select tab will appear in that section.
Step 4: In this dropdown, you can set Title, Width, Button Name, reCaptcha, Size and Style. You can also add Class to design it like you want. Once you have set everything like on “Save” and your WP Domain Checker Widget will be set.
Now your WP Domain Checker Widget will appear in the sidebar
WhoIs Lookup Button:
In WP Domain Checker, the WhoIs button appears when a domain is unavailable. Follow the steps below to setup WhoIs Lookup Button:
Step 1: To enable WhoIa Button function, first you need to create a WhoIs page. Navigate to Pages > Add New in WP Dashboard Menu.
Step 2: You can create the page with whatever name you want. Example: “WhoIs Domain” or “WhoIs Button”. But make sure that it is a page and not a post. In the text block section, insert shortcode [wpdomainwhois]. Click on the “Publish” button.
You can also use Elementor Editor to design your page properly. Click on “Edit with Elementor” button on the top of your editor page shown in screenshot above. Here you can use the Shortcode Widget to insert a shortcode.
Once you’re done click on the “Publish” button.
Step 3: After your page is published, navigate to WP Domain Checker in WP Dashboard Menu. Find WhoIs Page settings option. From dropdown, select the page you created.
Step 4: In WhoIs Button Text input box, you can add your button text that will show on the page. In the WhoIs Custom URL input box, you can directly add your page url instead of using WhoIs Page option.
Step 5: After setting up your WhoIs Page settings, scroll down to the end of the page and click on the “Save Changes” button.
Now when you search a domain that isn’t available, a WhoIs Button will display. Using this button you can check unavailable domain details.
WHMCS Integration
Hostiko provides you with the WHMCS plugin too. To set it up, you can see the WHMCS Integration section. In WHMCS Integration with WP Domain Checker, a Purchase Button will appear when the domain is available. Through this button you will be redirected to your WHMCS Domain Configuration and your domain will be added to your WHMCS cart.
Follow these steps to integrate WHMCS:
Step 1: Navigate to WP Domain Checker in WP Dashboard Menu. Find the Integration option section. Select WHMCS from dropdown.
Step 2: In the WHMCS URL input box, add your WHMCS Site Url.
Step 3: You can add your Button Text & Button Icon in Buy Button Text and Buy Button Icon input box.
Step 3: Click on the “Save Changes” button.
Now a Purchase Button will appear when the domain is available. Through this button you will be redirected to your WHMCS Domain Configuration and your domain will be added to your WHMCS cart.
Custom Link Integration
WP Domain Checker also provides you with the option to Integrate a Custom Link. Step 1: Navigate to WP Domain Checker in WP Dashboard Menu. Find the Integration option section. Select Customer URL from dropdown.
Step 2: Custom URL input box will appear once you select Integration > Custom URL. Enter your URL in the Custom URL input box.
Step 3: You can add your Button Text & Button Icon in Buy Button Text and Buy Button Icon input box.
Step 4: After updating WP Domain Checker settings, scroll down and click on the “Save Changes” button.
Google ReCaptcha
WP Domain Checker gives you an option to protect your domain checker from spam and abuse while letting real people pass through with ease.
Follow these steps to use Google reCaptcha with WP Domain Checker:
Step 1: To use reCaptcha in any site, first you need to get a Site Key and a Secret Key for your website. If you already have a Site key and Secret Key then skip ahead to Step 5. Step 2: Open this link to get reCaptcha Site & Secret Key. Login to your Google or Gmail Account. Once you’re logged in, the page shown in the screenshot will open.
Step 3: In this page, enter your site name in the Label input box. Choose whether you want to use a score or challenge reCaptcha.in reCaptcha Type. Add your site’s domain name in the Domain Name input box. In the Owners input box, enter any other email address you might want to add. Check Accept the reCAPTCHA Terms of Service checkbox. When you are done click on the “Submit” button.
Step 4: Once you’ve submitted the form with correct information, then the page will load with your website’s Site Key & Secret Key. Now copy both these keys and save them somewhere in a text document on your computer.
Step 5: Now Login to your WordPress website, navigate to WP Domain Checker in WP Dashboard Menu. Go to the reCaptcha tab.
Step 6: Now paste your Site Key & Secret Key that you copied earlier in Google reCAPTCHA v2 Site Key & Google reCAPTCHA v2 Secret Key respectively. Click on the “Save Changes” button.
Step 7: Navigate to Pages in WP Dashboard Menu. Select the page where your WP Domain Checker is displayed. Click on Edit. Now edit your Text Block where your WP Domain Checker shortcode is placed. Replace your shortcode with [wpdomainchecker button="SEARCH" recaptcha="yes"] or just add recaptcha = “yes” in the shortcode. Click on the Save Changes button.
Now update your page by clicking on the “Update” button. And then click on the Eye Icon to view your changes in your page.
reCaptcha button will now display with WP Domain Checker on your site.
Transfer WHMCS Domain Button
WP Domain Checker does not provide a Transfer Domain button, but there is an alternative way to get Transfer Domain Button on your site with WP Domain Checker. We can achieve this by transforming Whois Button into Transfer Domain Button that will be linked to WHMCS Add To Cart.
Step 1: Navigate to WP Domain Checker in WP Dashboard Menu. In the WhoIs Page option, select Custom URL from dropdown.
Step 2: In WhoIs Button Text input box, write “Transfer Domain”.
Now when you will search a domain that it isn’t available, you’ll see a Transfer Domain button that will be linked to your WHMCS Add to Cart.
WHMCS Integration
WHMCS Installation
If you’re using WHMCS for the first time, then read this. There is a step-by-step guide & a video guide explaining how to Install WHMCS through cPanel.
WHMCS Bridge
To use WHMCS Bridge with Hostiko Theme, first you have to make sure that WHMCS Bridge plugin is installed and activated. Navigate to Plugins in WP Dashboard Menu. Check if the plugin is activated.
Following are the steps to setup WHMCS Bridge plugin:
Step 1: Navigate to Settings > WHMCS Bridge.
Step 2: In the Integration Settings section, enter your WHMCS URL in the WHMCS URL input field.
Step 3: After entering the URL, scroll down to the end of the page and set the Footer option to None.
Step 4: Now click the “Save Settings” button.
Step 5: After saving your settings WHMCS will auto create WHMCS Page that will have all your WHMCS options. Go to the “Help” tab. Under The Bridge Page section you’ll see the full WHMCS url of your site.
Step 6: Under “Check my Installation” section, click on “Check for problems with my setup” button. This will check if there are any errors in your setup. If you receive any errors then we recommend you to resolve those errors first and then proceed further. If there are no problems with your setup then a message saying “As far as we can see, it all looks good!” will display under the “Check for problems with my setup” button.
Step 7: Open WHMCS Url that is mentioned in Step 5. On this url page you will see that WHMCS Bridge has been set up for your website. Your page will look something like this. You can see WHMCS Bridge is set up but it isn’t displaying properly.
Step 8: You can see in Step 7 that WHMCS Bridge is set up but it isn’t displaying properly. Now to display it properly, click on “Edit Page button located at the top of your page.
Step 9: Now go to the “Page Attributes” section in the right column. Navigate to Templates option.
Step 10: Now, select “Elementor Full Width” from Template dropdown.
Step 11: Click on the “Update” button to save changes.
Step 12: After updating, view your page by clicking on the “Preview” button.
Now you’ll see that your WHMCS Page is displayed properly.
WHMCS Bridge CSS
While using WHMCS Bridge you might need to change it’s style according to your site. So Hositko provides you with the option to change CSS or add your Custom CSS through ElementPress.
Following are the steps to change CSS in WHMCS Bridge in Hostiko:
Step 1: Navigate to ElementPress > Template Options.
Step 2: In the navigation bar under Template Options title. Click on Footer. Select the Footer that is being used in your website. Click on “Edit with Elementor”.
Step 3: In the Elementor Editor at the bottom of Elementor editor sidebar, click on Navigator Icon.
Step 4: A Navigation Dialog box will appear on the editor. Now click on the first Section in Navigator. Now the first section settings will open in the Elementor Editor Sidebar. You can close the Navigator after you have opened First Section settings.
Step 5: Now click on the Advanced section and navigate to ElementPress CSS.
Step 6: In ElementPress CSS tab, Click on WHMCS Bridge and now you’ll see all the CSS already written by Hostiko Team. You can edit this CSS according to your site.
WHMCS Templates
Hostiko WordPress Theme also provides WHMCS Templates, if you don't want to use WHMCS-Bridge you can use WHMCS Templates. Follow these steps to install WHMCS Templates via FTP:
Step 1: Get the Hostiko Package you downloaded from Theme Forest. Find the “Hostiko_WHMCS_TEMP_UD4.9” zip file and extract it in a desired location in your computer. Open the extracted folder, go to “Templates” folder and choose the latest WHMCS version folder and open it. Extract “hositko light” & “hostiko dark” zip files somewhere in your computer.
Step 2: Connect to your site’s FTP using desktop client software like FileZilla. If you’re using Filezilla for the first time then read this. This is a step-by-step guide on how to access your site’s FTP. When you’re connected to the FTP, Go to the root location for your WHMCS Installation. This is the topmost directory and has subdirectories like /admin, /includes and others. Look for a sub-directory named /templates. This directory contains all your WHMCS client area templates.
Step 3: Now locate the folders “hositko light” & “hostiko dark” you extracted on your computer. Upload both these folders through FTP in the WHMCS templates folder.
Step 4: Now that you have uploaded your templates. Log In to your WHMCS Dashboard. Navigate to tab Setup > General Settings.
Step 5: Under General Section, you can see our Hostiko templates that you just uploaded in Template Dropdown. Now you can easily choose WHMCS Templates.
WHMCS Cart
Whatever type of products and services you offer, Hostiko Order Cart Template has a variety of order form styles you can choose from to showcase your products in the most effective way possible.
Upload Hostiko Cart Template
Step 1: Get the Hostiko Package you downloaded from Theme Forest. Find the “Hostiko_WHMCS_TEMP_UD4.9” zip file and extract it in a desired location in your computer.
Step 2: Connect to your site’s FTP using desktop client software like FileZilla. If you’re using Filezilla for the first time then read this. This is a step-by-step guide on how to access your site’s FTP. When you’re connected to the FTP, Go to the root location for your WHMCS Installation. This is the topmost directory and has subdirectories like /admin, /includes and others. Look for a sub-directory named /templates. This directory contains all your WHMCS client area templates.
Step 3: Now locate the folder you extracted on your Computer in FileZilla. Open it and you’ll see a folder “orderforms”. Now upload “orderforms” folder in “templates” folder we located in Step 2, by right clicking on “orderforms” folder.
Now you have uploaded Hostiko Order Cart Templates in WHMCS.
Setting/Editing a Product Group Template
WHMCS allows you to specify an order form template for each product group you create. This allows you to use different order form styles for different types of products you offer. Follow these steps to edit group templates:
Step 1: Log In to your WHMCS Dashboard. Navigate to Setup > Product/Services.
Step 2: In the Product/Services page you have the option to Create a new product and Create a new group product.
You can also Edit or Delete a product or group of products through these buttons.
Step 3: Click on the Edit icon in the product. On the Edit Product page, navigate to Details tab > Product Description. While editing or setting up a new product, keep in mind the Feature Highlights for Product Description.
Note: Hositko uses this code in Product. For best results we recommend that you use the same features and in the same order for all products within the same product group. RAM: 4 GB Core: 4 CPU SSD: 120GB Bandwidth: 4TB Domains: 1 ul li Once per Four Weeks strong VHD Backup /strong /li li strong Free /strong DNS & Email Services /li li strong RDNS /strong Setup /li li 1 strong Dedicated IP /strong /li li Additional IP /li li Operating System Reinstallation /li li Server Reboot /li /ul
Step 4: Feature Highlights are specified as part of the Product Description. They must be entered in the following format, with one feature per line.
Feature: Value
For example, the description for a shared hosting product using Feature Highlights might look like this:
Disk Space: 1000MB
Dandwidth: 5GB
Email Accounts: 5
Subdomains: 3
Addon Domains: 1
Setting a Hostiko Order Cart Template
The Hostiko Order Cart form template will be used for any product group for which no custom template is set. Follow these steps to st your Hostiko Template with WHMCS:
Step 1: Log In to your WHMCS Dashboard. Navigate to tab Setup > General Settings
Step 2: Navigate to the Ordering tab in the General Settings Page.
Step 3: Scroll Down until you see Hostiko Cart Templates.
Step 4: Click on “Hostiko Cart”.
You will be directed to the Hostiko Order Cart Dashboard. Here you can choose your Order Cart Templates.
ElementPress CSS
Hostiko Elementor gives you the option to design your site using Custom CSS through ElementPress plugin. Using this functionality you can style any section, column or element by using your own CSS. Here we will explain how to use this functionality so you can get the best results.
Step 1: First step is to make sure that EelementPress plugin is installed and activated, as you can only add custom CSS in Elementor through this plugin. Navigate to Plugins > Installed Plugins in WP Dashboard Menu, check if ElementPress plugin is installed and activated.
This plugin is included in Hostiko’s Theme. If it is not installed then, you can see the Plugin Installation section to see how to install this plugin. Step 2: Now the Page or Template where you want to add Custom Styling, open it in Elementor Editor. ElementPress gives you the option to add Custom CSS in three ways:
Section Custom CSS
Navigate the Section you want to style with Custom Css. In the Edit Section, click on Advanced. Under Advanced tab navigate to CSS ID & CSS Classes. CSS ID: Enter ID name for the section through which CSS will be applied on the div. CSS Classes: Enter Class name for the section through which CSS will be applied on the div.
Column Custom CSS
Navigate the Column you want to style with Custom Css. In the Edit Column, click on Advanced. Under Advanced tab navigate to CSS ID & CSS Classes. CSS ID: Enter ID name for the section through which CSS will be applied on the div. CSS Classes: Enter Class name for the section through which CSS will be applied on the div.
Widget Custom CSS
Navigate the Widget you want to style with Custom Css. In the Edit {widget name}, click on Advanced. Under Advanced tab navigate to CSS ID & CSS Classes. CSS ID: Enter ID name for the section through which CSS will be applied on the div. CSS Classes: Enter Class name for the section through which CSS will be applied on the div.
Step 3: Navigate to ElementPress CSS. Click on the Add Item button, here you can add CSS. You can make your styling responsive using the Enable Media Query toggle button.
Theme Translation
Hostiko uses English Language but it also supports other languages. Now to translate Hostiko Elementor to the language of your choice, Read this step by step guide provided by Elementor.