Add a Callout Box: Part 4 of Our Holiday DIY Series

In previous posts this holiday season, we've covered how to pair font and graphics in an ad, design a hero section, and add a button that matches your design. This post will show you how to design a callout box to announce a big sale or celebrate your anniversary. You can a simple graphics to your callout box right in the Wix Editor, an add interactivity like hover effects and links.

But before we get started . . .

Is DIY Right for You? Let's Talk

If you don't have time to update your website, or you want it done by professionals with an expert eye, reach out today! We can walk you through the different options in Wix. The classic Wix Editor (what I'm demoing here) allows many of our clients to make simple updates to their own websites. By contrast, the new Wix Studio has built-in responsivity and more features. But it's more complicated to use and intended for web design professionals. Looking for simple options beyond Wix? Let's talk about Squarespace, a leading Wix competitor. It's simple and responsive across devices.

Excuse the digression. We will now continue on to the main purpose of this blog post.

Add a Box to Your Wix Hero Section

In the Wix Editor, I want to add a callout to Column 2 of the strip underneath my header.

Our example site has been a holiday e-commerce store. In the screenshot above, the background image of the hero has been updated for New Year. A strip (with a transparent background) has the text and button in the left column.  I want to add a callout advertising a clearance sale to the right column.

To add a box in the Wix Editor:

1. Click the plus sign (it will say Add Elements when you hover your mouse over it) on the lefthand menu.

2. Scroll down to Box, the 6th option.

3. Choose a box and drag it over to Column 2. I chose a themed box that matches my color scheme. I can change the shape and a elements to it later.

   
   

   

   A themed box from the Add Elements menu added to column 2 of my hero section.

Add Text to Your Box

To add text to your box:

1. Click the plus sign (it will say Add Elements when you hover your mouse over it) on the lefthand menu.

2. Choose Text (the first option) and drag a small heading font into your box. This will say "Clearance Sale" or whatever your main message is.

3. Click on the textbox and then click Edit Text.

4. Change the color of your text by clicking on the color icon (an A with a white drop in front of it). You can also change the size, spacing, effects, and HTML tags from the Edit Text panel.

5. Repeat these steps to add another text box with details about the sale.

   

   Change the color of your font with the color picker in the Text Settings panel.

Design Your Box

The Box Design panel allows you to choose a different box or customize your design.

Once I have added as many text boxes as I wanted and choose the appropriate alignment, size, and color, I'm ready to design my box. I want to make it a circle instead of a square. To do this:

1. Click on the box.

2. Click on Change Design.

3. From the Box Design panel that appears, choose Customize Design.

4. Now click Corners.

5. Set the radius to 200 px.

6. To make the box look like a perfect circle, you may need to resize it (by clicking and dragging the small circles around the edges).

   
   

Once I have added as many text boxes as I wanted and choose the appropriate alignment, size, and color, I'm ready to design my box. I want to make it a circle instead of a square. To do this:

Add Other Elements to Your Box

I'm also going to add a decorative shape and a button to my box from the Add Elements menu. We covered how to design a button to match your theme in the last post.

I've added a decorative snowflake and a button to my box. Now I'm going to click the lightning icon to add hover interactions.

Make Your Box Interactive

One of the great things about boxes is that it's easy to add animations, effects, and hover interactions. I'm going to add a hover interaction so the box gets larger when a customer mouses over it.

1. Click to select the container box.

2. Once the container box is selected, click on the option for Hover Interactions (a lightning icon).

3. Click Get Started.

4. Click Choose Effect.

5. Choose Grow and then click Exit Hover Mode.

   
   

Edit Mobile View

Click the Edit for Mobile option (the mobile phone icon in the top right hand corner of the Wix editor) to optimize your page for customers using smart phones.

Almost done! Anytime you make a change to your site, you'll need to make sure it looks good on mobile. Most of your customers are probably using a smart phone! To edit the mobile view:

1. Click the Mobile View icon (a phone icon near the Page menu in the top righthand corner of the Wix editor).

2. Move strips, test, and other elements so they are visible and centered.

3. Once you're happy with how

   
   

Once you're happy with how your sales callout looks on desktop and mobile, publish your changes. You now have an eye-catching hover box advertising your sale!

If you have any trouble adding a callout box, please let us know in the comments or send us a message. We love empowering our customers.