Blog

Adding a WordPress Hero Image Banner on your Website

WordPress Hero Image Banner is a unique element that you can add to your WordPress website to make it more dynamic.

ProfileGrid Hero Banner is an extension that allows you to create a WordPress Hero Image Banner of all the profile images on your website.

You can add this unique feature to your website using the ProfileGrid Hero Banner Extension.

The extension is immensely user-friendly and requires zero codings. In addition to that, the extension is completely free. You can also import demo images to create a WordPress Hero Image on website.

This is how a website Hero Banner looks on the frontend:

User Hero Banner WordPress

You can create a WordPress Hero Image Banner for more than one group on your website.

 

A unique user hero banner WordPress extension

Hero Banner

Try ProfileGrid Hero Banner!

ProfileGrid Hero Banner Extension is a simple yet valuable extension that helps in adding a banner that allows you to add a strip of user profile pictures as a banner on your WordPress. The website hero section can be created with the group profile pictures.

Using this WordPress banner extension, you can include various columns and rows of user profile avatars. The extension is easy to set up and can be used even by beginners.

Features of WordPress Hero Image Banner

Here are a few highlights of the WordPress hero banner extension:

  • As an admin, you can install a WordPress website banner and create a banner for more than one group profile of your website.
  • You can extract user avatars from one or more groups to design the homepage website hero banner.
  • As per your requirements and choice, you can add various columns and rows to your WordPress site banner or homepage hero image.
  • If the number of profile avatars is less in the starting, you can repeat profile avatars or use dummy avatar profiles for your WordPress banner widget.
  • The WordPress hero section changes the web hero image size for website depending upon the placement of the widget.

How to Use ProfileGrid Hero Banner Extension?

To get started with the Hero Banner Extension, download the extension from here and install it on your website.

If you already have ProfileGrid Membership Core, Premium, or Premium+, you do not need to install the extension separately. All the mentioned versions of ProfileGrid Memberships come with the Hero Banner Extension.

Once you have download and installed the extension follow the given steps to set up a WordPress Hero Image Banner and create a hero section of website:

Step1: Once the extension is installed on your website, go to your Admin Menu. Here, from the Appearance, click on Widgets.

WordPress Hero Image Banner

Step2: Scroll down and find ProfileGrid Hero Banner from the list of widgets. From the drop-down, select Sidebar, and Add Widget.

WordPress Hero Image Banner

Step3: After adding the widget, you will find the user hero banner WordPress in the Sidebar column, which is placed on the right of all widgets.

WordPress Hero Image Banner

Setting up WordPress Hero Image Banner

Step1: Add a Title name for your hero banner.

Hero banner

After adding the Title, add a Heading and Sub Heading, both of which will be displayed on top of your hero image website examples.

Step2: You can also select the background color of both Heading and Sub Heading.

WordPress Hero Image Banner

Step3: Further, you can choose the Button Text and Button Link to customize the CTA or link on your hero banner. You can also select how this link will open: in the Parent Tab or in a New Tab.

WordPress Hero Image Banner

Step4: Next choose the number of Rows and Columns in your hero banner.

WordPress Hero Image Banner

Step5: You can also add Dummy Images or Repeat Images to your banner if the number of user avatars is few.

WordPress Hero Image Banner

Step6: Finally, you can add a hero banner for one, multiple, or all the groups.

WordPress Hero Image Banner

Step7: Save the changes and check the hero banner on your WordPress website from the frontend.

WordPress Hero Image Banner Example

WordPress Hero Banner Frontend Examples

In this example, we will import 3 rows 10 columns along with a few more setting changes.

We will keep the Title, Heading, and Sub Heading the same as above.

WordPress Hero Image

Next, we will change the heading background color to Red and keep the Sub Heading background color, white.

WordPress Hero Image

Now, we’ll keep the button text and button link as it was. And we have kept the ‘Link open In’ as ‘Parent Tab’. That means whenever a user clicks on the button link, he/she will open the link on their parent tab. You can select ‘New Tab’ as well; in that case, the link will open in a new tab.

Parent Tab

Next comes the number of rows and columns, we’ll change the rows to 3 and columns to 10.

WordPress hero image banner

Further, for insufficient images, we’ll keep the setting as it to ‘Dummy Images’. In this case, if you do not have sufficient group members to fill the columns and rows, the extension will use the dummy images to fill the gap. And if you select ‘Repeat Images’ then the images will be repeated to fill the gaps.

hero banner

Now, we’ll save the setting and check out the frontend:

hero banner

You can change the position of the WordPress Hero Image Banner by editing the page using WordPress or Elementor. In addition to that, the website hero banner size adjusts according to the placement of the widget.

Winding-up

Using the WordPress Hero Banner feature, you can extend the functionalities of your website and improve user interaction. A unique feature like WordPress Hero Image Banner encourages the users to join groups and be a member.

Explore the above steps to utilize the WordPress banner for free on your website, and in case you face issues, reach out to us in the comment box. We will get back with expert advice on adding a user hero banner to your WordPress.

2 Comments

  1. Philip Purves

    Hi , how can I change the speed of the image swaps on the hero banner. Its way too fast at the present.

    1. ProfileGrid Editorial Team

      Currently, the speed of the image swaps on the hero banner cannot be changed. We have noted this requirement and forwarded it to our development team for possible changes in a future update.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares