Goal: Add (at least) 1 box slideshow & 1 hoverbox

Thursday - Lesson 12:

Slideshows & Hoverboxes

Questions?

I'm happy to help!

Click the green circle below.

I'll be here from

9-10am & 3-4pm.

Slideshows and Hoverboxes are cool because they add fun color, images, and movement to your site.

What information can YOU add into a slideshow or hoverbox?

The two examples below are for small business sites.  

Image by 🇨🇭 Claudio Schwarz | @purzlba

Sweets & Sours

We sell custom cookies

Lawn Mower
Alex's Lawn Cutting

Add a slideshow

#1

#2

#3

First, let's learn to add and design a box slideshow.

Here's how:

  1. Click ADD

  2. Hover over INTERACTIVE

  3. Choose BOX SLIDESHOWS

  4. Choose any slideshow you like and click on it to add it to your page

Here's how to customize your box slideshow.

  1. Click on your slideshow to select it

  2. Choose CHANGE SLIDE BACKGROUND

Choose any image, video, or solid color for your box slideshow background.  You can also choose a photo you upload.

  1. Use the arrow to go to the second slide.

  2. Change that background

  3. Use the arrow to go to the third slide background

  4. Change that background

  1. Finally change all the titles and text on your box sideshow. Just highlight the text, type what you want it to say, and change the size, color, and font like you did before.

  2. If there is any part of the slidehow you don't want, like a button or title, just click on it and delete it.

  3. And there you have it!  Great job!

Add a hoverbox

#1

#2

#3

Now, let's learn to add and design a hoverbox.

Here's how:

  1. Go to the page you would like your hoverbox to appear on.

  2. Click ADD

  3. Hover over INTERACTIVE

  4. Choose HOVER BOXES

  5. Choose any hoverbox you like and click on it to add it to your page

Here's how to customize your hover box:

  1. Click on your hover box to select it

  2. Choose CHANGE BACKGROUND

  3. Choose any image, video, or solid color for your background.  You can also choose a photo you upload.

When your reader hovers over your box, a different image and text will appear.

 

Here's how to change what it looks like when the readers hovers:

  1. Click on HOVER

  2. Choose CHANGE BACKGROUND

  3. Choose any image, video, or solid color for your hover background.  You can also choose a photo you upload.

Finally, change the titles and text blocks for your hover box.

 

Here's how:

  1. Double click on the text to highlight it and type in your new text.

  2. Choose EDIT TEXT and change the font, size, and color.

  3. Make sure to change the text on both the regular and hover portions of your hover box.

HIGH FIVE!

You are doing an amazing job.

Any questions? Just ask Mrs. E!

Woohooo!

The STEAM Studio, Inc. (a nonprofit corp)

thesteamstudio@gmail.com