How to preview and edit a BU Banner without disrupting your live site

Transcript

Hey folks! Ashley Kolodziej here from Boston University Interactive Design, back with another tutorial on how to use BU Banners. In this tutorial, we are going to look at how to edit a banner on a page and how to preview the new BU Banners on a private page so that you don’t disrupt either your staging content or your live content. Let’s get started.

Log into WordPress

The first thing you’re going to want to do is log in to your website. I’m going to use ID demos, but you can use your staging or your live environment just fine. You’ll get a similar interface to this in the WordPress admin.

What is a privately published page?

We’re going to start by setting up a privately published page. Privately published pages are the easiest way to preview content and new features like this without disrupting the rest of your site.

Add a new page

Under add new page, we’re going to write a quick title. I’m going to do BU Banners Demo Test. You can select any page template you want. I’m going to add sample content here so you can see how the banner interacts with the rest of the page.

Change the visibility from Public to Private

Before we make any changes to the banner, let’s go ahead and make sure that we save this correctly so that it won’t show up for users. We’re going to change, under visibility, from public to private. Hit okay. And you’ll see that the status has changed to privately published.

This means that when you hit update, only your site admins, editors, people who actually have control over adding content to your site, will be able to see this. And you can always double check by making sure that private is in front of your title when you go to look at the page.

Double check the page is private

Let’s test this and make sure that nobody can see this for sure. I’m going to open up a new private window in my browser, paste this in, and I’m going to get a 4 0 4 error. It’s not going to be able to find the page. The reason why is because you’re not able to see this unless you’re logged in.

So if you encounter this error and you’re like, oh, I knew I made that page. Why can’t I see it? It’s probably cause you need to be logged in, in order to see it. This is really important for reviews and approvals, so just make sure you keep that in mind.

Add an image to the BU Banner

Now that we have a nice private place to view our changes and kind of play around without messing up the rest of our live site content, let’s go ahead and try adding a BU Banner. Scroll down to banner settings and hit add image. This will open up your media library. Look for an image that’s nice and big. I’m going to go ahead and use this three planets image that’s 12,000 by 8,000 pixels. That’s definitely going to be big enough.

If you’re ever unsure, you can actually take a look under image sizes, guidelines, and templates on the ID demos BU Banners site, and just double-check that you have a minimum of 3840 pixels wide by 2048 pixels tall. Images of that size will crop better in BU Banners.

Let’s go ahead and select this. Use this file. Here, we’re going to leave this as full width and centered, the text color as light, and for now we’re not going to edit any other options, including title, subtitle, or call to action in content to link to. I just want to see what this looks like right out of the box.

Let’s hit update and take a look.

Before and after adding a BU Banner

So here, this is what the page looked like before the BU Banner. If I go to refresh, notice that this title will disappear. It won’t be in the content area. anymore.

See how that title is now in the banner? This prevents duplication of the title in the content. We do this in a way that keeps things very accessible so screen readers will still be able to read the content on your page, but visually, it’ll appear in your banner instead of in your content area.

How to add and edit a title in BU Banners

Let’s try some other features of BU Banners. Let’s try adding a title. By default, BU Banners is going to use the page title in the banner, but you can always override this. Let’s try overriding the title and see what happens. I’m going to click update, refresh my page,

And now you can see “let’s try overriding the title” has overridden the page title in the banner. The page title still won’t show below the banner, because in most cases you don’t want the page title to repeat. It’s duplicative information.

Other text fields you can edit in BU Banners

BU Banners allows you to set a subtitle and call to action as well.

Conclusion

So that’s how you preview and edit BU Banners on a live site without disrupting your life site’s content or making that new banner available to just anybody who visits. Next, we’re going to take a closer look at how to write really effective banner content that will move your visitors from point A to point B effortlessly.

I’ll see you in just a moment.