Chapter 3. Rich-text editor features

Click on a section title to jump down the web-page:

A.         Text-formatting functions

B.         Insert an image

C.         Insert a table

D.         Insert a horizontal line

E.          Insert a Google map

F.          Insert an anchor point

G.         Create a hyperlink

H.         Change the page layout

I.          Insert an audio player for files from Faith Comes By Hearing (FCBH)

J.          Change editor box to full screen display


The rich-text editor has many features for formatting text, creating website page content, and laying out the page. These are accessed through the icons in the top bar.

16. Icon bar in text editor

A. Text-formatting functions

1. Use the mouse cursor to blot the text you wish to format.

a) Click on the drop-down list Normal to choose a font style.

17. Drop-down list for font style

(See additional notes about this function button in Section B, Step 3 below.)

b) Click on the drop-down list Size to choose a font size.

18. Drop-down list for font size

c) Click on these icons to make the text bold, italics, underline, or strikethrough.

19. Icons for text formats

d) Click on these icons to make the text subscript or superscript.

20. Icons for subscript and superscript text

Return to top...

B. Insert an image

1. Place your mouse cursor inside the editing box in the location at which you wish to insert an image.

2. Click on this icon.

21. Icon to insert image

a) The task box Image Properties opens.

22. Image Properties task box

b) To select an image already uploaded to the website, click on the button Browse Server.

(1) Double-click on an image in your Files directory to select it.

(2) A URL will appear in the indicated field.

c) To upload a new image, click on the tab Upload.

23. Upload a new image for insertion

(1) Click on the button Add an image.

(a) In the new pop-up screen, browse and select an image file from your computer.

(b) Click on the button Open.

d) Return to the tab Image Info to enter image details.

24. Image details

(1) Enter the desired width of the image in pixels.

(Leave the aspect ratio locked. The height will change automatically in proportion to the width, preserving the image without distortion.)

(2) Select the desired alignment of the image.

(3) Check the box if you want to add an image caption once you return to the editor box.

e) Click on the button OK at bottom right.

3. Once you have inserted an image on a page, you may change its appearance in various ways.

a) In the text editor box, click on an image to select it.

b) The drop-down list for font style, Normal, changes to read Styles.

25. Styles drop-down list

c) Click on the word Styles to open this list:

Note: Not all options are available to all users.

26. Drop-down list of image (object) styles

d) Select one of the options to change the image appearance.

(1) Full width – image fills entire width of web page (ratio of height to width will be maintained so that image is not distorted)

(a) For best results, the original image should measure at least 2000 pixels in width.

(2) Parallax – image fills entire width of web page and appears to remain fixed in place behind the rest of the page content when scrolling up or down the page

And for some users:

(3) Grayscale – image is displayed in gray tones

(4) Sepia – image is displayed in brown tones

(5) Semi-transparent – image is more transparent than original

Return to top...

C. Insert a table

1. Place your mouse cursor inside the editing box in the location at which you wish to insert a table.

2. Click on this icon.

27. Icon to insert table

a) The task box Table Properties opens.

28. Table Properties task box

(1) Enter the number of row and columns you desire.

(2) Enter the desired width in pixels of the table.

(3) Enter the pixel value for border size (“0” = no border).

(4) Select the desired alignment.

(5) Enter the pixel value for cell spacing (space between table cells).

(6) Enter the pixel value for cell padding (space between cell walls and contents).

b) Click on the button OK at bottom right.

D. Insert a horizontal line

1. Place your mouse cursor inside the editing box in the location at which you wish to insert a horizontal line (useful for separating areas on the web page).

2. Click on this icon.

29. Icon to insert horizontal line

Return to top...

E. Insert a Google map

1. Place your mouse cursor inside the editing box in the location at which you wish to insert a Google map.

2. Click on this icon.

30. Icon to insert Google map

a) The task box Google Maps opens.

31. Google Maps task box

(1) Enter a description of the location desired.

b) Click on the tab Advanced Settings to specify the width and height of the map in pixels.

32. Google Map advanced settings

c) Click on the button OK at bottom right.

Return to top...

F. Insert an anchor point

1. Place your mouse cursor inside the editing box in the location at which you wish to insert an anchor point.

2. Click on this icon.

33. Icon to insert anchor point

a) The task box Anchor Properties opens.

34. Anchor Properties task box

(1) Enter a name for the anchor point.

b) Click on the button OK at bottom right.

Return to top...

G. Create a hyperlink

1. Write a line of text or insert an image which you will use for the hyperlink.

2. Highlight the line of text or click on the image to select it.

3. Click on this icon.

35. Icon to create link

a) The task box Link opens.

36. Link task box

(1) Use the drop-down menu Link Type to choose the type of link.

(a) Internal path - Link to another page on your website.

(b) URL - Link to another website.

(c) Link to anchor in the text - Select a previously created anchor point on the same page.

(d) E-mail - Create a link to send mail to an e-mail address.

(2) Depending on the Link Type selected, the entry field below it will require distinct information.

(a) Internal path - Begin typing the title of the page on your website to which you wish to create the link. A list of your pages will appear. Select the one desired.

(b) URL - Enter the URL of the website to which you wish to create the link.

(c) Link to anchor in the text - Click on the drop-down menu labeled By anchor name and select from the list of previously-created anchor points.

(d) E-mail - Enter the desired e-mail address.

(3) If you are creating a link to a file (such as a PDF), you do not need to choose a Link Type.

(a) Click on the button Browse Server.

(b) A pop-up box will show you the File Directory for your website.

(c) Choose the desired file for the link and double-click on it.

(d) You will return to the Link task box, and a path to the file will now show in the field URL.

b) If you are creating a link to an external website, click on the tab Target to specify where the link opens.

37. Target tab in Link task box

(1) The recommended option is New Window (_blank).

(For anchor links and for internal links to other pages on this website or to media items, you do not need to specify the target; the default <not set> – which functions as Same Window – is the recommended option.)

c) Click on the button OK at bottom right.

Return to top...

H. Change the page layout

1. Place the mouse cursor at the line at which you wish to change the page layout.

2. Click on this icon.

38. Icon to change column layout of page

a) A drop-down menu displays several options for column layout.

39. Column layout choices

b) Click on one of the options.

c) Faint lines appear in the text editor box, outlining the columns.

40. Outline boxes showing two-column page layout

d) Click within an outlined box to write text, insert images, add media items, etc., just as you would on a single-column page layout.

e) You may change column layouts several times on the same page.

f) Click below the column outline to return to single-column (full-width) layout.

Return to top...

I. Insert an audio player for files from Faith Comes By Hearing (FCBH)

1. Place the mouse cursor at the location at which you wish to insert the audio player.

2. Click on this icon.

41. Icon to insert FCBH audio player

a) The task box FCBH audio player properties opens.

42. Task box for FCBH audio player

b) To select a FCBH volume (set of audio files), click on the drop-down list titled - Select -.

(1) The drop-down list is pre-loaded with all of the volumes available from Faith Comes By Hearing in the navigation languages of the website.

43. FCBH volumes available for this website

(2) Click on one of the volumes to select it.

(3) You may also add a player for a language that is not one of the navigation languages of the website.

(a) Click on the line that reads - Search for your language -.

44. Search for non-navigation language

(b) In the new blank space that appears, write the three-letter code or the name of the language you desire.

45. Enter language name or code

(c) If volumes are available from FCBH with that three-letter code, they will appear in a list.

(d) Click on one of the volumes to select it.

5. The task box now displays the volume you selected.

46. FCBH volume selected

6. Click on the button OK at the lower right of the working box.

7. It is strongly recommended that you write a few simple instructions on the web page for using the audio player. Ideally, these should be located directly above the audio player.

a) Example text: To listen to the (Bible / New Testament) in (language name), click on the arrowhead in the audio player below. To select a different book of the Bible, click on the name (Matthew) to open the full list of available books. Scroll down to navigate this list and click on the book and chapter desired.

8. Save your work on the page you are editing.

9. The web page now displays a special audio player with the full contents of the volume selected.

47. FCBH audio player on web page

10. You may navigate through the contents of the volume by clicking on the book name.

48. Navigate through contents in FCBH audio player

Return to top...

J. Change editor box to full screen display

While editing page text, you may prefer to enlarge the rich-text editor box to fill the entire screen. This gives you more space to work.

1. Click on this icon.

49. Icon to enlarge editor box to full screen

2. Click on the same icon to return the editor box to normal size.