KNOWLEDGE CENTER

 

 



 

 

 

 

 

         

Creating Catchy Callout Boxes

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Callout Boxes (simpleTables) are an effective way to grab

 

your visitor's attention.

 

They are used when you want a visitor to pay special attention

 

to an important piece of information.

 

Webtreepro has a variety of tools that will help

 

you create vibrant and professional looking Callout Boxes.

 

 

 

 

 

 

Here Is a simple example of a Callout Box. 

 

In addition to presenting the basics,

 we will give you examples and suggestions on how to make

 your Callout Boxes more eye-catching!  

 

 

 

     

   1.   Go to the page where you want to put a Callout Box.

 

   2.   As the first step, you'll need to add an Article on your page.  Once you have the Article, this is where you will place the Callout Box. 

         Go to the gray panel to the left of your screen, and click Add Content. Webtreepro will open up the Add Content wizard.

 

   3.   To review how to add an Article, click here.

  

   *  In the process of adding an Article, let's pause at  the Placement tab, as this would be a good time to go over the placement

         of a Callout Box.

 

      • Putting a Callout in the middle of text usually captures a reader's attention.  When you want visitors to pay special attention to an important piece of information, create a Callout that stands out so visitors are pulled to it immediately. 

 

      • Some web users suggest the Callout be in the first or second paragraph.

  

      •  They also, suggest it be placed on the right side of text.

 

      •  Others advise that a Callout should not be more than 1/2 the width of the panel.

 

      •  After considering the type of Content that's on the page, and also the page's style, it really comes down to what you think is best.

 

      • Some of the Templates seen below may or may not be the same Template selection you have available for your use.  The needs of individual websites vary.  Webtreepro offers different selections to meet your website's particular needs.

 

 

   

 

After going through all the tabs of the Add Content wizard, you can start building your Callout Box. 

 

 

For more detailed information about the Add Content wizard, click here.

 

 

 

Creating a Callout Box: 

 

   1.    Place your cursor inside your newly added Article, and click.  Now go up to the Editing Toolbar and click on theTable icon. 

           It will bring up the Table Properties window with its two tabs. 

                                                                                      

Common Properties window   

 

  

Styles window 

 

                                                                                                                 

   2.   Let's take a close look at each tab.   We'll start on the left with the Common Properties tab.   You'll notice that we didn't select

         either Rows or Columns.   The Callout Box is a one cell Table.

 

   3.   Going to the "Common Properties" window, Panel Layout, we have chosen the Table Width w/in Panel to be 50% of the Panel.  

         We recommend that a Callout Box be 50% or less.  But always experiment with the width of the Table to see what works

         best for your page.

 

   4.   Table Alignment w/in Panel:  It is recommended that you align the Callout Box to the right of your chosen panel.

 

   5.   Now, go the right to Spacing.   We have chosen 5 pixels of Spacing  to be within the one-cell Table.  This will make whatever Content

         we place inside the box have a neat, sharp finish within the cell. 

 

      • The Callout can hold a variety of Content, such as, text, images, Flash, or HTML snippets.  Again, experiment with the spacing to see how many pixels works best.  

 

      • There is only one cell in a Callout Box, so we can skip over Between cells.

 

   6.   A Border helps catch the reader's attention, so a Border is almost essential.  A Border is also necessary as it frames the Content.

         Notice we chose the Border thickness to be 4 pixels.  A Border with 4 pixels width might turn out to be overbearing, but you can

         adjust the width to see what will be most attractive. 

 

      • To adjust anything at anytime, do a right click in the Callout Box.  Select Table on the Page Details window, seen below.  Then, click on Table Properties to get to the Common Properties tab, seen above.   

 

   7.   Now, without clicking OK, select the Styles tab.  If you click OK, you will be taken back to your working page, and your Callout Box

         will have no color, border, or images.

 

      • If you clicked OK by mistake, don't worry.  Just do a right click in the Callout which will bring up the Page Details window. Click Table, then Table Properties  to get to the two Table tabs.  Choose the Style tab.  

                                                                                                 

Page Details window

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

 

 

   Table Properties flyout

 

      

 

 

   Meanwhile, back at the Styles tab...

 

   

   8.   The purpose of a Callout Box is to catch a reader's attention right away!   So, a bright Background color helps the Callout Box get

          the attention you want. 

 

            • Choose a color by entering in the hex color code, or by clicking the square to choose a color from the color palette.

 

   9.   Border color:  Since the Border is also an important part of the Callout Box, you will probably want to choose a bold color.

 

 10.   You might prefer to have an Image be placed in the background.  If so, there will be some examples shown later on in this page. 

 

 11.   If you want a Background Image for your Callout Box, click Select.  It will take you to your Library where you can search for an

         appropriate image. 

 

            • To see more about searching for Images, see the page The Library,  or click here.

 

 12.   Choose your Background Image, and click the "Select" button at the bottom of the Library page.   You'll return to the Styles tab.

 

            • Now, you will see two new options next to Select.  which are Preview and None.
            • To preview your background, click on Preview.
            • Click on None  to cancel your selections. 

 

 

       

 

 

  13.   If you choose to have an image in the Callout's background, you'll need to decide if and how you want your Background image

          to repeat. 

14.   Background Repeat offers these 4 choices:

 

          • Repeat means the background will repeat across all cells evenly.

          • Repeat-x means the image will repeat horizontally. 

          • Repeat-y means the image will repeat vertically.

          • No-repeat means the image will be fixed in one area only.

15.   The dropdown from Background Position is to the right.  Webtreepro automatically starts the 

         Background Image at the upper left corner of the Table, (the default) but you can choose these other 

         options.

 

  16.   Click OK   to save.  Your selections in both Common Properties and Styles will be saved at the same time.

           Click Cancel   to exit without saving a Background Image.

 

            •  To see more about adding color and images to your Table, be sure to visit the page Insert a Table; Step Two: Styles,

                                    or click here.

 

         
 

 

Being Creative with Callout Boxes

 

 

   1.   Here, you see 2 similar Callout Boxes that have a single image inserted in them.  These images are not being used as Background

          Images.  They are just ordinary pictures that have been inserted.

 

   2.   The Callout on the left has a light green background, and a dark green Border of 8 px wide.  

 

   3.   The Callout to the right is really two Tables in one.  The first Table is exactly like the one on the left with a light green background and

          a dark green border.  Then, we inserted a smaller Table that has an orange background, and a bright yellow Border of 8 px.   

          This "look" gives the Callout Box four different frames that surround the image.  The multiple frames are not only attractive but

          functional.  They will quickly bring a reader's attention to the box.  This particular Callout's properties can be seen beneath these

          examples.

    

 

 

 

 

 

 

 

 

 This is how the above right Callout looked before the image was inserted.

 

 

  

  

 

Placing Background Images in Callout Boxes

 

 

   Now, let's see some examples of how a Background Image can be used in a Callout Box. 

   As is evident, a chosen Background Image might not be completely seen, but both backgrounds are eye-catching.

 

 

 

The original image

The original image

 

 

Other Background Images can be used also, such as graphic patterns, or color shadings, as seen below.  There are many online sites which offer free background images such as these.  Or you can ask us to supply a certain graphic by contacting us.

 

Use the Need Help? link located at the bottom of this page.

                        

 

 

 

 

   Quick Video Link>>Tables-Callout Boxes