Documentation

Hero Banner Ultimate Pro

Getting started with Hero Banner Ultimate Pro

Hero Banner Ultimate adds a Menu tab in WP Admin side with the name “Hero Banner Pro” tab where you can add new Hero Banner, edit and delete.

Add Hero Banner with the help of background image OR background color OR background video. Hero Banner Ultimate comes with 4 types of layouts where you can manage you hero banner design.

In web design, a hero banner is a large web banner image, prominently placed on a web page, generally in the front and center. The hero banner is often the first visual a visitor encounters on the site; it presents an overview of the site’s most important content. A hero image often consists of background image OR background color OR background video and text.

Below screen shows Hero Banner Pro after plugin installed successfully!

Hero Banner Pro

Below screen shows how to add a Hero Banner. You just click on “Add Hero Banner” and insert Hero title and content as you add for WordPress post.

Like this you can add blog posts as much you want to add.

Following Hero Banner Setting

  • Banner Layout :
  • We have 9 Layout of Hero Banner. You can set any layout.

  • Banner Type :
  • We have 5 types of Banner

    • Background Color : Set your banner background color only.
    • Background Color and Image : Set your banner background color and image also.
    • Background Image : Set banner background image only.
    • Background Video : Set background video. E.g YouTube eg wuY3TAeixus OR vimeo eg 187799034.
    • Background Video and Image : Set banner background video and image also.
  • Wrap Width :
  • Enter banner inner warp width in PX.

  • Title Font Size :
  • Enter banner title font size in PX.

  • Uppercase Title :
  • Banner Title in Uppercase or not.

  • Sub Title Font Size :
  • Enter banner Sub-title font-size in PX.

  • Uppercase Sub-Title :
  • Banner Sub-Title in Uppercase or not.

  • Padding :
  • Set Padding from left, right, top and bottom. You can give padding in PX or Percentage.

  • Title Color :
  • Set banner title color.

  • Content Color :
  • Set banner content color.

  • Overlay Color :
  • Select banner overlay background color.

  • Overlay Opacity :
  • Set the overlay opacity level. Range: 0 to 1.

  • Button Name :
  • Set your desired text for button.

  • Button Link :
  • Enter button link url

  • Button Class :
  • Select button class. There are many types of button class.

Mobile Setting of Banner

  • Title Font Size :
  • Enter title font size in PX.

  • Sub-Title Font Size :
  • Enter sub title font size in PX.

  • Padding :
  • Set padding from Left, Right, Top or Bottom. You can give padding in PX or Percentage.

How to display Shortcode

Display a Hero Banner is very simple. Just go to Pages > Add New and add page title ie Hero Banner and add below shortcode as per your need.

Shortcode Of Hero Banner

[hbupro_banner id="40"] – Display by Hero banner id.