Magento 2 – New Module – Hero Banner and Slider

Magento 2 – boxleaf Digital – Hero Banner and Slider widget

Here at boxleaf digital we like to make sure, we share some of our custom modules for FREE, why because we like to help smaller businesses with functionality. If we have written it feel free to use it.

We are proud to release our Hero Banner and Slider widget was written to give you more flexibility. As we know the most important part of any site, is to catch your customers attention, with nice looking banners and sliders.

What does our Hero Banners do ?

Our hero banner module has a number of uses, and flex-abilities.

  1. You can upload mobile and desktop versions of your Hero Banner Images.
  2. You can give each Hero banner a SEO beneficial title.
  3. You can enable and disable each hero banner.
  4. Finally you can enable HTML banner overlay, styled for H1-H5 tags and a tags styled as buttons.

With each hero banner you can add as a widget to either your CMS or under Magento 2 / Backend / Content / Widgets you can add the hero banner to specific page templates.

The Magento 2 widget also has its own settings. Each hero banner can be:

  1. Set to be full width
  2. Set to be parallax
  3. Set to be full height.

What does our Hero Banners Slider do ?

The slider part of our NEW hero banner slider module has a number of uses and configurations also:

  1. You can add create a Banner slider
  2. With the banner slider, you can associate as many of your hero banners as you like.

Just as the hero banners, you can add the sliders to content in cms or as widgets, each again having its own configurations:

  1. Each slider can be full width
  2. Each slider can be parallax
  3. Each slider can be full height
  4. You can also show the names of each hero banner, under the slider as a clickable link to each slide.

Great! Now how do i install it?

There is two ways to install our module:

Type 1: Zip file
  •  Go to releases download the latest from our github https://github.com/danrcoull/magento2-hero-banner-slider
  • Unzip the zip file in app/code/BoxLeaf
  • Enable the module by running php bin/magento module:enable BoxLeaf_BannerSlider
  • Apply database updates by running php bin/magento setup:upgrade
  • Flush the cache by running php bin/magento cache:flush
Type 1: Composer install

Run the following commands while inside the magento 2 root directory on the server:

If you want more information about composer read our article on Using Composer, or Creating your first magento 2 module.

composer config repositories.productpricelist vcs https://github.com/danrcoull/magento2-hero-banner-slider.git
composer require boxleaf/module-bannerslider:1.0.1

Once you have installed it tell Magento 2 about it using the below commands:

php bin/magento module:enable BoxLeaf_BannerSlider
php bin/magento setup:upgrade
php bin/magento setup:di:compile #yes do this we use extension attributes so you can see the original price and the custom price.
php bin/magento setup:static-content:deploy en_GB en_US -f 
php bin/magento cache:flush

See our module in action below

 

Hero Banner widget options:

Each widget has its own set of options the hero banner will look like below

Hero banner module widget options

Banner ID: This is a dropdown showing you all the available banners you can choose from.

Full width: This is if you wish to show the banner full with of the page, or constrained to the container.

Parallax: If you enable this option for larger images, you will see a smaller parallax effect on the banner a you scroll

Full Page height: If set to yes the banner will take the screen height.

Slider widget options:

Hero banner Slider widget options

Slider ID: This is a dropdown showing you all the available sliders you can choose from.

Full width: This is if you wish to show the banner full with of the page, or constrained to the container.

Parallax: If you enable this option for larger images, you will see a smaller parallax effect on the banner a you scroll

Full Page height: If set to yes the banner will take the screen height.

Show tabs under banner: This option allows you to show the hero banner names as a separate slider under the main, to use as links to the slides.

 

Hope you guys enjoy our module, leave your feedback in our github or below.

Send us a Skype message

boxleafdigital

Call boxleaf Digital