Introducing BU Banners

Transcript

Hi there! My name is Ashley Kolodziej, and I work in Boston University’s Interactive Design department. Today I am so excited to show you BU Banners, our new plugin for creating banner areas at the top of your content. Let’s take a look.

What is BU Banners?

BU Banners is a plugin that you can use on your WordPress site to create hero images that help move people across the site. BU Banners supports several new features that are really great for helping users understand where to go from a page. You can add a headline, subheading, and a call to action on each page.

And what’s great about this is it lets you direct users to the most important information throughout the site. For example, let’s say that you’re in the middle of an admissions cycle, and you have an application due soon. You could put that in BU Banners and direct people right to that in a really timely manner.

Why should you upgrade to BU Banners?

BU Banners is a replacement for Content Banner. Content banner is the old plugin that used to do this in the Flexi Framework. As a reminder of what that looks like, you might be familiar with Content Banner from this UI here. And what you used to do was to add an image and choose from several different banner positions.

What would happen is that you could go add an image and then upload a new image that you had downloaded, or select one from the media library. Let’s try uploading and see some of the new features that BU Banners will give you in action.

Demonstration of the old Content Banner plugin

So now this is completed uploading. We’re going to click add banner image and you can see it as huge. One of the main new reasons that we use BU Banner over Content Banner is because of performance. It improves your site performance. So let’s go ahead and just publish this page and take a look at what happens to the page when we use this very large image.

When we refresh the page, now, it’s really big. Notice also that you can’t do things like add headings and subheadings very easily. You used to have to go into this HTML area and manually code this. This is where BU banners makes it so much easier. Let’s take a look at that exact same workflow, but now, with BU Banners.

Demonstration of the new BU Banners plugin

With BU banners, all you have to do is go to edit page at the top of any page.

When BU banners is enabled, you’ll see a new banner settings box. In the spanner settings box, you’ll be able to select the image just as easily as you could before, either from the media library or by uploading, just like we did in our example with the Content Banner. What’s great about BU Banners is that it automatically crops the image for you, so you don’t have to worry about performance.

You can also now add the title, subtitle, and call to action, including a link to point that button to, right in this user interface. So you don’t have to hand code these things anymore.

Introducing new design options

There are a number of custom design options in BU Banners, which we’ll go over in more detail later, as well as text color options that will help improve the banner for different uses.

As we change, the UI will automatically show exactly what you need to input. So here, if we were to go and update this, and we wanted to say welcome to BU Banners and add an exclamation point, it’s as simple as hitting update and refreshing the page here.

Responsive design support

Out of the box, BU Banners offers support for a number of different design options, as well as automatically crops for different sizes. So here we can see the on mobile, BU Banners automatically resizes to accommodate the text. And as we grow and shrink this, the banner will automatically change dimensions in order to best accommodate the content. This makes it great for your sites. Content Banner didn’t have these capabilities.

Requirements to use the new BU Banners plugin

As I mentioned, BU Banners is a replacement for Content Banner. Content Banner works with Flexi Framework sites. The new Responsive Framework only supports Content Banner through Responsive Framework version 1. Versions 2 and above support BU Banners out of the box. Version 1 can also support BU Banners, but there is a small amount of development work that has to happen in order to enable that.

How to upgrade to BU Banners

If you don’t know what version of Responsive you’re on, that’s perfectly okay. The best thing that you can do if you want to upgrade to BU Banners is to go to bu.edu/tech, the get help page, and then choose from this form client computing and collaboration services and the topic websites. From there, you’ll simply select which website type you are, and just let them know that you’d like to activate BU Banners on your site and are looking for more information on whether or not your theme or site supports it.

If you worked with Interactive Design for a custom theme, and you have an existing account management contact, you can also contact them for faster processing of this request.

What’s next?

So with that, I hope this helps and I am so excited to show you more about BU Banners today. Next, we’re going to go into some of the different custom functionality that we can enable on the Interactive Design side to push it even further beyond what comes out of the box.

I’ll see you in just a moment.