Testimonial Box - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

Testimonial Boxes are similar to the basic text box, only they contain a little more information befitting testimonials.

 

The Testimonial Box tool can be loaded from the right-click menu as shown below:

 

menu_right_click_design_wizard_box3

 

 

On clicking this option, the Testimonial Text Box screen will appear:

 

window_design_wizard_testimonial_textbox

 

 

There are a number of settings that you can customize to create a testimonial text box, as well as a preview panel which gives us an immediate idea of what our finished text box is going to look like.

 

We shall look at the settings available in more detail below:

 

 

Box Settings:

 

Width - This is the overall width, in pixels, of your text box frame. Increase/decrease this value using the up/down arrows appropriately, or simply over-type the value in this text box with the exact width you wish to use.

 

 

Height - This is the overall height, in pixels, of your text box frame. Increase/decrease this value using the up/down arrows appropriately, or simply over-type the value in this text box with the exact height you wish to use.

 

 

Padding - Increasing or decreasing this value will adjust the spacing between the contents of the text box (i.e. the text itself) and the frame/border of the text box. The greater the value, the more space there will be. Use the up/down arrows to change the value, or simply over-type the value in this box with the exact padding setting you wish to use.

 

 

Color - This setting adjusts the fill color of the text box. If you wish to change the color you may do so either by typing the desired color into the color text box, or by clicking the browse button to the right of the color text box.

 

button_testimonial_text_box_color_browse

 

 

Clicking this button will launch the color picker tool with which you can browse for and select the color of your choice. For more information on how the color picker tool works, visit the section in this manual entitled 'Color Picker'.

 

 

Alignment - To align the text box itself left, center or right of the Web page simply select the appropriate option from the list.

 

 

Text Settings:

 

Font – Using the font drop-down selector you can choose the preferred font in which you would like your text displayed.

 

piece_testimonial_text_box_font_selector

 

 

Font Size – Specify a size for your text using this font-size drop-down. Click the button_testimonial_text_box_font_size drop-down selector to make your choice from the available font sizes (6pt to 48pt).

 

 

Font Style – If you would like to make your heading text bold, italic or underlined simply click the appropriate button.

 

button_application_bold_stylebutton_application_italic_stylebutton_application_underline_style

 

 

Font Color – This control determines the color of your text. To choose your preferred text color, either type the color right into the color text-box or click the button_testimonial_text_box_color_browse button, to the right of the color text-box.

 

This button will launch the Color Picker tool, which you can use to make your color selection.

 

 

Text Alignment - To align the text left, center or right of the text box simply select the appropriate option from the list.

 

 

Border Settings:

 

Color - This control determines the color of your text box border. To choose your preferred border color, either type the color right into the color box provided or click the button_testimonial_text_box_color_browse button, to the right of the color text-box.

 

 

Width - This is the width, in pixels, of the border 'line'. You can set this value at anything between 0 and 10 pixels in line-thickness. Use the up/down arrows to change the value, or simply over-type the value in this box with the exact line thickness you wish to use.

 

 

Style - This setting affects the border, making the line appear in one of the following line-styles:

 

Solid

Dashed

Dotted

Double

Ridge

Groove

Inset

Outset

 

 

Simply select the desired option from the drop-down list and it will be applied to your border.

 

 

Text:

 

Testimonial Text - In the box provided, enter the actual testimonial text that you would like to display on your Web page. As you type you will notice the real-time preview at the bottom of the window updates to show the changes you have made.

 

 

Testimonial From - In this box you need to enter the name of the person from whom you received the testimonial, entered above.

 

 

Image:

 

Unlike the other text boxes, the testimonials text box tool also features an image selection option. This enables you not only to feature the testimonial of your customer but also their photograph.

 

Find Image Button - Clicking this button launches the image library tool with which you can browse to, and select, the image you would like to use in this testimonial text box.

 

 

Alignment - Select from the left/right alignment options to place the image selected above to the left or to the right of the testimonial text accordingly.

 

 

Tip: If your page features multiple testimonials, try stacking them one on top of the other, with the images alternating left and right as the visitor scrolls down the page - this is a simple but very effective layout technique.

 

 

Once you are happy with the adjustments you have made, and the text you have entered, click the 'Ok' button at the bottom of your screen. This will insert the testimonial text box at the cursor-point within the designer window.

Home  Previous  Next