What is the Text component?

The Text component allows you to add plain text and multimedia content such as images and custom components to your Bento pages. Content can be formatted with editing tools similar to what is found in most text editors, such as Microsoft Word.

Presentation

How to use the Text component

  • From the main Bento administrative dashboard, click Pages (Figure 1).

Figure 1

  • Click the page to which you want to add the text component (Figure 2).

Figure 2

  • In the section of the page you wish to add the text component, click the Available Components dropdown menu and click Text (Figure 3.1). 
  • Click Add Component (Figure 3.2).

In this example we are adding the text component to the Page Content area of our Bento site.

Figure 3

  • Type the text you want to add or copy and paste text into the textbox (Figure 4.1). (warning) If you copy and paste text into the text editor from another source, first paste it into an application such as Notepad to strip all existing formatting. Doing this will ensure there's no interference with the styling of the text component.
  • Use the toolbar at the top of the screen to format your text, add images, links and attachments (Figure 4.2).
  • Click Save (Figure 4.3).

To learn what each button in the text editor does, simply hover your mouse over each icon until a tooltip appears. Or take a look at this guide

Figure 4

  • Click Preview site in the upper right corner of the screen to preview your text component in a browser (Figure 5).

Figure 5

  • Your text component displays in a browser (Figure 6).

Figure 6

How to add an image

When adding images to your text component, use images from your filer folders.

  • In the text editor, place your cursor at the spot you want to place the image (Figure 1.1).
  • Click the component dropdown menu on the bottom right, and click Image (Figure 1.2).

Figure 1

  • Type Alt text in the textbox provided (Figure 2.1). This is the text users will see when they hover their mouse over your image and is important for users who may be visually impaired or who have disabled images in their browser settings. Write a short phrase that accurately describes the image. You can use the same text as your caption.
  • In the Caption text textbox, type a short caption for your image (Figure 2.2). This appears right beneath the image.
  • Click the Show caption text checkbox to make the caption text appear on the page (Figure 2.3).
  • In the Credit text textbox, type the photo credits, if applicable (Figure 2.4).
  • Click the Show credit text checkbox to make your credit text appear on the page (Figure 2.5).
  • Click the magnifying glass icon to search your filer folders for the image you want to use (Figure 2.1). 
 See where the ALT, caption, and credit text appear on your image

 

Figure 2

  • When you've located the image you want to use, click the downward-facing arrow to the left of the image thumbnail to add the image to your component (Figure 3).

Figure 3

  • The image thumbnail displays, indicating that it has been added to your component (Figure 4.1).
  • Click the Image size dropdown menu and click the size at which you want your image to display if you want it to be different from the original (Figure 4.2).
  • Click the Image alignment dropdown menu to align the image on the page (Figure 4.3).
  • Click the Link image options dropdown menu (Figure 4.4) to access the following options:  
    • To link the image to an external website, type the full URL of the website in the Link textbox.
    • You can link the image to another Bento site by clicking the Page link dropdown menus and clicking the Bento site and the associated page you want. (warning)This is not recommended as there are some glitches associated with this option.
    • To link the image to a file such as a .pdf or .doc, click the magnifying glass icon in the File link section to search your filer folders for the file.  Click the Open link in new window checkbox to open the file in a new browser window.
  • Click Show for more options (Figure 4.5).

Figure 4

  • Use the options in the Advanced section if you want to overwrite the attributes from the last screen. Type the new attributes in the boxes provided (Figure 5.1).
  • If you have linked your image to other pages, you can track how many times the image has been clicked (Figure 5.2). Click the OFF button until it displays ON then fill out the fields that display.
  • When you are finished, click Save (Figure 5.3).

Figure 5

  • The image displays in your Text component (Figure 6.1).
  • Click Save on the component to save your changes (Figure 6.2).

Figure 6

How to edit a filer folder image

You've added your image, assigned attributes, and now you want to make changes. This section demonstrates how to make changes to your image.

  • Click the Text component to open it (Figure 1).

Figure 1

 

  • Click the image and click the pencil icon (Figure 2).

Figure 2

  • The image attribute popup window appears. Make your changes and click Save.

You must click the Save button in the image editing window and the Save button for the entire page in order to save your Text component.

To edit an image that isn't from your filer folder, simply click the image icon located in the toolbar and make changes in the popup box.

Other types of items you can add 

You can add the following items to your Text component:

  • File 
  • COVE Video player
  • Link
  • Flash file
  • Table
  • IFrame

You can also add a COVE video to your Bento page by using the COVE video player component.