News

vHost offer 16 different short-codes. Our short-codes are designed to reduce the workload of composing pages by giving comprehensive short-codes.  You can use Short-codes with or without Visual Composer. Visual composer’s self explanatory user interface make it easy to understand short-code parameters while working with them.

 

Custom Header –  Style 1

Use custom header to show a fancy looking header, it gives you options to show an image along with a transparent background image to make stunning titles. Every thing is fully customize-able.

Demo: Custom header -style 1 Example

Available short-code parameters
  • title: Title for header, It is shown in H2 tab
  • content: Sub Title/ Content to show on left side of header
  • bg_image: Background image for header, usually a pattern
  • header_image: Image to show to right of title, Usually a .png file with transparent background
  • title_color: Sets color for title, accepts a hexcode (#000000)
  • content_color: Sets color for subtitle/ content, accepts a hexcode (#000000)
  • bg_color: Sets background color header, accepts a hexcode (#000000)
  • bg_color_transparency: Sets transparency level for background color , accepts a numeric value between 0 to 1. Default is .5

 

Custom Header – Style 2

“Custom Header Style2”  is extended version of Custom Header Style1, it offers you a big and bold styled header, which can also be used as a call to action.

Demo: Custom header -style 2 Example

Available short-code parameters

 

  • title: Title for header, It is shown in H2 tab
  • subtitle_line1: First line of subtitle
  • subtitle_line2: 2nd line for subtitle
  • component_margin: This is the spacing betwen title, subtitle_line1, subtitle_line2 and button.
  • button_text: Text/ Label for button
  • button_url: URL for landing page, where button will link to
  • bg_image: Background image for header
  • alignment: Allignment for title, subtitles, right or left. button will always alligned in oposite direction.
  • button_style: There are 3 styles to select from, Classic,  Simple & Hollow
  • title_bg_color: Sets background color for title, accepts a hexcode (#000000)
  • subtitle_bg_color: Sets background color for sub-titles, accepts a hexcode (#000000)
  • button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • button_text_hover_color: Sets hover text color for button, accepts a hexcode (#000000)
  • button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_bg_hover_color: Sets background hover color for button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

 

Order Menu – Style 1

Order menu gives  you a unique combination of an order button with a menu. It can be used on any page as secondary menu. from page options you can select if you want to sticky it. Order section pulls price directly from WHMCS and link you direct to order button. It can create auto links of sub pages or the pages on same level, or you can select a menu of your choice to show. It can also be used as one page anchor links to scrol to different sections of page.

Demo: Order Menu – style 1 Example

Available short-code parameters
  • replace: replace me replace me replace me
  • menu_source: Menu source, select from
    • custom-menu: Link through Custom menu ,
    • sub-pages: Link Sub pages of this page
    • sibling-pages: Link sibling of this page
  • custom_menu: menu slug of a menu, required only if menu_source parameter is set to “custom_menu
  • whmcs_display_order_section: Show Order button and price for order page
  • whmcs_button_text: Text/ Label for button
  • whmcs_button_url: URL of page order page, leave empty to auto link with product selected above
  • whmcs_price_info: Enter WHMCS product-ID, It is usually the product with minimum price in that group
  • menu_bg_color: Sets color for background color for menu, accepts a hexcode (#000000)
  • link_color: Sets color for links, accepts a hexcode (#000000)
  • link_bg_hover_color: sets background color header, accepts a hexcode (#000000)
  • link_hover_color: Sets hover text color for link, accepts a hexcode (#000000)
  • price_color: Sets color for price, accepts a hexcode (#000000)
  • price_bg_color: sets background color for price area , accepts a hexcode
  • button_bg_color: button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_text_color: button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

 

Sticky Menu – Style 2

Sticky Menu – Style2 is another version of sticky menu with different styling. if you like bolder looks and want to emphasize on order buy now button that is visible through out the page, this style is for you. When used as one page links, it gives you a smooth scrolling effect.

Demo: Sticky Menu – style 2 Example

Available short-code parameters
  • menu_source: Menu source, select from
    • custom-menu: Link through Custom menu ,
    • sub-pages: Link Sub pages of this page
    • sibling-pages: Link sibling of this page
  • custom_menu: menu slug of a menu, required only if menu_source parameter is set to “custom_menu
  • whmcs_display_order_section: Show Order button and price for order page
  • whmcs_button_text: Text/ Label for button
  • whmcs_button_url: URL of page order page, leave empty to auto link with product selected above
  • whmcs_price_info: Enter WHMCS product-ID, It is usually the product with minimum price in that group
  • menu_bg_color: Sets color for background color for menu, accepts a hexcode (#000000)
  • link_color: Sets color for links, accepts a hexcode (#000000)
  • link_bg_hover_color: sets background color header, accepts a hexcode (#000000)
  • link_hover_color: Sets hover text color for link, accepts a hexcode (#000000)
  • price_color: Sets color for price, accepts a hexcode (#000000)
  • price_bg_color: sets background color for price area , accepts a hexcode
  • button_bg_color: button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_text_color: button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

Content Box – Style 1

content box element is one of kind with 29 parameters to customize it. it can link you directly to WHMCS, you can select from a big collections of icon fonts to show. If you want to show images in content box, choose content image style 2.

Demo: Content Box – Style1 Example

 

Available short-code parameters
  • title: Title for content box, It is shown in H3 tab
  • description: description/content for content box
  • style: You have 4 different styles to select
    • vhost-service-style1: Style-1 (No Icon)
    • vhost-service-style2: Style-2 (Icon/Image Above)
    • vhost-service-style3: Style-3 (Icon/Image On side)
    • vhost-service-style4: Style-4 (Small Icon With Heading)
  • icon: icon to show in content box for styles 2,3 & 4
  • reverse_icon: used to show icon in reverse style, choose from yes or no.
  • show_border: Show or hide box border, choose from yes or no
  • show_button: Show or hide button, choose from yes or no
  • button_text: Text/ Label for button, for example “More details..”
  • button_link: URL path for landing page
  • button_size: Button size, use one of these values
    • button-small: Small size button,
    • button-medium: Medium size button,
    • button-large: Large size button,
  • button_style:
    • simple: A link, with only text color and hover color option.
    • classic: A classic button, with text, background properties
    • hollow: A hollow button, with a border
  • whmcs_show_price: Show or hide product price and link to order page from WHMCS. Only works if WHMpress is installed, active and linked to WHMCS.
  • whmcs_package_price: Package id of a WHMCS product
  • whmcs_price_prefix: Prefix for price, for example ‘starting from’
  • whmcs_show_button: Show or hide button to product order,
  • enable_hover: Enable or disable hover effect for content box, use yes or no
  • title_color: Sets color for title, accepts a hexcode (#000000)
  • text_color: Sets color for text other than title, accepts a hexcode (#000000)
  • border_color: Border color for content box, accepts a hexcode (#000000)
  • bg_color: Sets background color, accepts a hexcode (#000000)
  • bg_hover_color: Sets background hover color , accepts a hexcode (#000000)
  • icon_color: Icon color, accepts a hexcode (#000000)
  • icon_bg_color: background color for the icon, accepts a hexcode (#000000)
  • button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • button_hover_text_color: Sets hover text color for button, accepts a hexcode (#000000)
  • button_border_color: Sets border color of button if button style is set to hollow, accepts a hexcode (#000000)
  • button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_bg_hover_color: Sets background hover color for button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

 

Content Box – Style 2

Content Box Style 2 is image version of icon based content box style-1.

Demo: Content Box – Style 2 Example

Available short-code parameters
  • title: Title for content box, It is shown in H3 tab
  • description: description/content for content box
  • style: You have 4 different styles to select
    • vhost-service2-style1: Style-1 (Image Above)
    • vhost-service2-style2: Style-2 (Image On side)
  • icon: icon to show in content box for styles 2,3 & 4
  • reverse_icon: used to show icon in reverse style, choose from yes or no.
  • show_border: Show or hide box border, choose from yes or no
  • show_button: Show or hide button, choose from yes or no
  • button_text: Text/ Label for button, for example “More details..”
  • button_link: URL path for landing page
  • button_size: Button size, use one of these values
    • button-small: Small size button,
    • button-medium: Medium size button,
    • button-large: Large size button,
  • button_style:
    • simple: A link, with only text color and hover color option.
    • classic: A classic button, with text, background properties
    • hollow: A hollow button, with a border
  • whmcs_show_price: Show or hide product price and link to order page from WHMCS. Only works if WHMpress is installed, active and linked to WHMCS.
  • whmcs_package_price: Package id of a WHMCS product
  • whmcs_price_prefix: Prefix for price, for example ‘starting from’
  • whmcs_show_button: Show or hide button to product order,
  • enable_hover: Enable or disable hover effect for content box, use yes or no
  • title_color: Sets color for title, accepts a hexcode (#000000)
  • text_color: Sets color for text other than title, accepts a hexcode (#000000)
  • border_color: Border color for content box, accepts a hexcode (#000000)
  • bg_color: Sets background color, accepts a hexcode (#000000)
  • bg_hover_color: Sets background hover color , accepts a hexcode (#000000)
  • icon_color: Icon color, accepts a hexcode (#000000)
  • icon_bg_color: background color for the icon, accepts a hexcode (#000000)
  • button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • button_hover_text_color: Sets hover text color for button, accepts a hexcode (#000000)
  • button_border_color: Sets border color of button if button style is set to hollow, accepts a hexcode (#000000)
  • button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_bg_hover_color: Sets background hover color for button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

 

Domain Search

 

Call to Action – Style 1

This is simpler version for call to action, shows bold text with an action button. Best suited to show single line short call to actions. Comes with different styling options.

Demo: Call to Action – styel 1 Example

Available short-code parameters
  • title: Title for Call to action
  • description: description/content
  • style: You have 2 different styles to select
    • simple: Simple (button on side)
    • classic: Classic (button below)
  • button_text: Text/ Label for button, for example “More details..”
  • button_link: URL path for landing page
  • button_style:
    • simple: A link, with only text color and hover color option.
    • classic: A classic button, with text, background properties
    • hollow: A hollow button, with a border
  • title_color: Sets color for title, accepts a hexcode (#000000)
  • bg_color: Sets background color, accepts a hexcode (#000000)
  • button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • button_hover_text_color: Sets hover text color for button, accepts a hexcode (#000000)
  • button_border_color: Sets border color of button if button style is set to hollow, accepts a hexcode (#000000)
  • button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_bg_hover_color: Sets background hover color for button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

 

Call to Action – Style 2

Style 2 is extended version for call to action with image options. It comes with an image it is best viewed when used on full width. It has two button options, each can can have its own styling and landing page.

Demo: Call to Action – styel 2 Example

Available short-code parameters
  • title: Title for Call to action
  • description: description/content
  • content_image: image path to show image, if you are in VC you can select it using standard procedure. Recommended Image height is 410 pixels, Use of wider images is recommended
  • image_direction: use from one of following values
    • imageleft: Image on Left
    • imageright: Image on Right
  • text_color: Sets color for title, accepts a hexcode, defaults to (#ffffff)
  • bg_color: Sets background color, accepts a hexcode, defaults to (#000000)
  • button_text: Text/ Label for button, for example “More details..”
  • button_text_2: Text/ Label for 2nd button, for example “More details..”
  • button_link: URL path for landing page
  • button_link_2: URL path for landing page for 2nd button
  • button_style:
    • simple: A link, with only text color and hover color option.
    • classic: A classic button, with text, background properties
    • hollow: A hollow button, with a border
  • button_style_2: Button style for 2nd button
    • simple: A link, with only text color and hover color option.
    • classic: A classic button, with text, background properties
    • hollow: A hollow button, with a border
  • button_text_color: Sets text color for button, accepts a hexcode (#000000)
  • button_text_color_2: Sets text color for 2nd button, accepts a hexcode (#000000)
  • button_hover_text_color: Sets hover text color for button, accepts a hexcode (#000000)
  • button_hover_text_color_2: Sets hover text color for 2nd button, accepts a hexcode (#000000)
  • button_border_color: Sets border color of button if button style is set to hollow, accepts a hexcode (#000000)
  • button_border_color_2: Sets border color of second button if button style is set to hollow, accepts a hexcode (#000000)
  • button_bg_color: Sets background color for button, accepts a hexcode (#000000)
  • button_bg_color_2: Sets background color for second button, accepts a hexcode (#000000)
  • button_bg_hover_color: Sets background hover color for button, accepts a hexcode (#000000)
  • button_bg_hover_color_2: Sets background hover color for second button, accepts a hexcode (#000000)
  • custom_class: Custom wrapper class for the shortcode

 

Contact Us From

Ajax based contact us form, you can easily set success and failure messages and set receivers address other than WP admin email. Select from horizontal or vertical styling options.

Demo: Contact Us Form Example

Available short-code parameters
  • title: Title for contact us form
  • description: Any description/content
  • button_text: Text/ Label for button, for example “Submit”
  • text_color: Sets text color, accepts a hexcode, defaults to (#000000)
  • receiver_email: Receivers email address, this is the email address where form will be submitted.
  • success_message: message to show if email is sent successfully
  • error_message: message to show if email sent is failed
  • custom_class: Custom wrapper class for the shortcode

Recent Posts

This elements show recent posts from your blog from the categories of your choice.

Demo: Recent Posts Example

Available short-code parameters
  • number_of_posts: No of posts to show, accpets a number
  • excerpts_length: length of excerpts to show
  • read_more_text: read more text to link to full post, leave read more field empty if you don’t want to display it
  • category_id: category filter, ids of category to show recent posts from

 

List

if you want to style to ordered or un-ordered lists, this is the shortcode for you. Simply wrap your list with this short-code. If you are using visual composer paste the list contents and select a style. There are 9 bullet styles, you can choose to use number, roman numbers, or alphabets for bullets. Or you can use an icon for that purpose.

Demo: List

Available short-code parameters
  • title: Title for list, Leave empty if not needed
  • content: Any description/content
  • style: One of style from following
    • list-upper-alpha: List – Upper Alpha
    • list-lower-alpha: List – Lower Alpha
    • list-upper-roman: List – Upper Roman
    • list-lower-roman: List – Lower Roman
    • list-decimal: List – Numbers
    • list-circle: List – Empty Circle
    • list-disc: List – Filled Circle
    • list-square: List – Square
    • list-icon-simple: List – Custom Icon
  • bottom_border: Shows a light border at bottom of east item, use yes or no
  • icon: Select an icon color that best suits your needs, use a font-awesome name or select from the list if using visual composer
  • icon_color: Icon color, accepts a hexcode (#000000)

 

Clients

You can use this element to show your work/client portfolio. It lists clients logos from clients custom posts. Each client can be linked or you can link the element to show full clients listing.

Demo: Clients Example

Available short-code parameters
  • title: Title for clients section. Leave blank to use default widget title.
  • description: description/content for clients, leave blank to hide
  • style: One of style from following
    • clients-slider: Show clients in carousel style
    • clients-simple: Show clients simply in plain
  • alignment: Alignment for content, use one
    • left: Align left
    • center: Align center
    • Right: Align right
  • number_of_posts: Enter How many clients to show from “clients” custom post type
  • view_all: Link to clients listing/ “Clients” Custom posts, use yes or no
  • view_all_url: Enter a link for view all link, leave empty to link to clients listing
  • view_all_text: Texty for view all button
  • text_color: Sets color for text, accepts a hexcode
  • bg_color: Sets background color, accepts a hexcode

Our Teams

Teams shortcode/element shows basic team member profile from teams custom posts in a fancy style. You can customize each and every color of this element.

Demo:Teams Example

Available short-code parameters
  • title: Title for clients section. Leave blank to use default widget title.
  • description: description/content for teams, leave blank to hide
  • number_of_posts: Enter How many clients to show from “teams” custom post type
  • view_all: Link to clients listing/ “Clients” Custom posts, use yes or no
  • view_all_url: Enter a link for view all link, leave empty to link to clients listing
  • view_all_text: Texty for view all button
  • text_color: Sets color for text for team section, accepts a hexcode
  • bg_color: Sets background color for teams section, accepts a hexcode
  • team_text_color: Sets text color for team persons name, position and social links color, accepts a hexcode
  • team_overlay_color: hover overlay color when mouse is over team member image, use a hexcode
  • name_bg_color: background color for name of team member, use a hexcode
  • position_bg_color: background color for position of team member, use a hexcode
  • soical_bg_color: background color for social links of team member, use a hexcode
  • custom_class: Custom wrapper class for the shortcode

Testimonials

This elements displays testimonials in a carousel, you can mange testimonials in testimonials custom post.

Demo:Testimonails Example

Available short-code parameters
  • title: Title for testimonials section
  • number_of_posts: Total number of testimonials to show from testimonials post type
  • container_bg_color: Sets background color for testimonials container, accepts a hexcode
  • custom_class: Custom wrapper class for the shortcode

Technologies

Technologies element is designed to meet needs of webhosts. It can be used to show scripts that you support, OS or any other technologies that you work with and want to highlight on your page. Since technologies are managed with technologies custom post type with some interesting linking options.

Demo:Tecnologies Example

Available short-code parameters
  • title: Title for clients section. Leave blank to use default widget title.
  • description: description/content for clients, leave blank to hide
  • style: One of style from following
    • clients-slider: Show clients in carousel style
    • clients-simple: Show clients simply in plain
  • alignment: Alignment for content, use one
    • left: Align left
    • center: Align center
    • Right: Align right
  • number_of_posts: Enter How many clients to show from “clients” custom post type
  • view_all: Link to clients listing/ “Clients” Custom posts, use yes or no
  • view_all_url: Enter a link for view all link, leave empty to link to clients listing
  • view_all_text: Texty for view all button
  • text_color: Sets color for text, accepts a hexcode
  • bg_color: Sets background color, accepts a hexcode
  • custom_class: Custom wrapper class for the shortcode

Leave A Comment

*
*