Tuesday - Lesson 6:

Boxes

Goal: Add boxes behind your text

Which text below grabs your attention?

Questions?

I'm happy to help!

Click the green circle below.

I'll be here from

9-10am & 3-4pm.

This one?

Or this one?

I'm guessing the one with the big pink box behind it?

Plain text on a page doesn't always get the reader's attention, but layering a different color BEHIND the text can help.

So let's learn to add boxes...

#1

#2

#3

  1. Click the ADD button

  2. Hover over BOX

  3. Choose CONTAINER BOXES

  4. Click on any box to add it to your site

Click the DESIGN button

#1

#2

  1. Change the color of the box by clicking on FILL COLOR & OPACITY

  2. Again, you can always choose any color you like by clicking ADD COLOR

Adding a shadown to your box will make it look 3D - like it's popping out of the screen.

Here's how:

  1. Click the SHADOW button

  2. Change the DISTANCE to make the shadow larger

  3. Change the COLOR to compliment the color of the box.  You usually want a shadow to be a slightly lighter or darker hue than the color on top of it. 

#1

#2

#3

#1

#2

Now you need to layer your text on top of your box.

 

Here's how:

  1. Right click on your box and choose ARRANGE

  2. Choose SEND TO BACK

This text is the top layer

Now you can drag your text on top of the box and the box will be underneath the text.

See how that box makes your text POP!?

Great job!

Stop!     

Take time now to add a box or two on EACH page on your site.

You are making some SERIOUS progress!

Woohooo!

The STEAM Studio, Inc. (a nonprofit corp)

thesteamstudio@gmail.com