What is a Copy text Block?
Copy text is a Block type that formats and styles text.
Note: This does not mean you should copy and paste content from a website, Teams content, or any other tool that may create unnecessary formatting in the source code of the text. If you choose to copy external content, paste the text onto Notepad or another tool that will strip the formatting before pasting the content to a Web page.
Note: When copying and pasting content from a Word document, a window stating “The text you want to paste seems to be copied from Word. Do you want to clean it before pasting?” will appear. Select Ok so that the copied text is stripped of any formatting that may interfere with web content functionality.
It is best practice to apply formatting directly in the text editor, such as applying bullets, bold, headings, etc. to ensure the content will not interfere with functionality.
Create Copy text
A Web page must be created first to add a Copy text Block.
From the administration bar, select Workbench, and then select My Dashboard.
Navigate to the Content list panel and select the content you wish to add Copy text to.
Select the Layout tab.
[IMAGE]
Select + Add section if applicable, then Select + Add block.
[IMAGE?]
From the Choose a block list on the right, select Copy text.
[IMAGE]
Enter a Title. Select whether you want the Title to display by checking/unchecking the Display title checkbox. The Title will appear as the heading for the Block if Display title is checked.
Under Copy text, add the desired content in the text editor.
Select Add block.
[IMAGE]
Select Save layout.
Copy text elements
All copy text elements can be found when Configuring a Copy text Block. To Configure a pre-existing Copy text Block:
On the intended web page, select the Layout tab.
Select the Pencil icon on the top right of the intended Copy text block, then select Configure from the drop-down menu.
Abbreviation tags can be used to provide abbreviations or short forms of an element. When the user hovers over the abbreviation, the full text is displayed as a pop-up text.
How to use Abbreviation tags
Select the Source button in the top left corner of the text editing window. The text editing window is now displaying the HTML code for your page.
Insert the abbreviation tags where necessary.
For example, to make an abbreviation tag for the acronym UK, find "UK" in the source code.
Insert the opening tag to the left of the acronym and the end tag after the acronym,
<abbr title="United Kingdom">UK </abbr>Ensure that the title appears in quotation marks.
Find all the acronyms you wish to use the abbreviation tag for, and complete steps 6(a) through 6(c).
When finished, select Add block (or Update if this is a pre-existing Block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Anchors are used to mark the location of an element within a page. Anchors can link to both internal and external elements.
How to add/link to Anchors
Place your cursor in front of where you want the anchor inserted.
Select Anchor from the toolbar.
Enter an Anchor name.
Only use lower-case letters, numbers and dashes (-). Dashes should be used to separate words when naming anchors (e.g. sample-1). Note: Anchor names cannot begin with numbers (e.g. 1st).
Select OK.
Highlight the text you want to link to the anchor, then select Link in the toolbar. Note: Avoid highlighting punctuation marks/white space at the beginning or end of the text.
Enter the anchor URL.
When linking to an anchor on the same page, the URL must begin with a pound/hashtag sign (#) followed by the name of the anchor (e.g. #sample-1).
When linking to an anchor on a different page on the same site:
Copy the URL of the page being linked.
Remove the "https://uwaterloo.ca", from the beginning of the copied URL and paste the remainder.
Append a pound/hashtag sign (#) to the pasted text.
Append the anchor name.
e.g. http://uwaterloo.ca/web-resources/communications#sample-1
Select Save.
Select Add block (or Update if it's a pre-existing Block).
Select state from the Change to: drop-down menu.
Select Save layout.
Bulleted lists can be used to list objects that have no sequential order.
Create a bulleted list
Select the text you would like to be organized as a list and select the Insert/Remove Bulleted list button in the toolbar.
You can also use the tab key or Increase indent button to create sub-list items.
Select Add block (or Update if it is a pre-existing block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Note: To remove the list, select the text which has been ordered in a list and re-select the Insert/Remove list button.
Horizontal rules are used as dividers within a page. Careful use of horizontal rules can make pages easier to read and are visually appealing.
Create a Horizontal rule
Select the Insert horizontal line icon in the editing toolbar.
Select Add block (or Update if it is a pre-existing Block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Highlight text is used to draw attention to specific words or phrases. It should be used sparingly to keep a page visually accessible.
Changing text style to Highlight
Enter the text you wish to highlight, or select it if it already exists.
Select the Formatting styles drop-down menu in the editing toolbar and select Highlight from the list.
Select Add block (or Update if this is a pre-existing Block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Images can be used to clarify information presented in the copy text content. All images require Alternative text for accessibility purposes. Guidelines on how to properly write Alternative text can be found on the Brand page.
Adding images to a Copy text block
From the editing toolbar, place your cursor where you would like the image to appear and select Insert from media library.
Select the Image tab on the left side.
There are two ways to add your image:
Reference existing: Select the image that has already been uploaded to your site from the list on this tab. This prevents numerous copies of the same image from being uploaded and stored.
Add file: Find an image using the file browser to upload from your computer.
Enter a name for the image.
Add alternative text to the image.
Optionally, crop the image and/or enter a caption.
Select Save.
With the image selected, select Insert selected at the bottom left.
Select Add block (or Update if it is an existing copy text block).
Select state from the Change to: drop-down menu.
Select Save layout.
Note: After selecting Insert selected and adding the image to the body, it may not appear in the Copy text Block editor window. If this occurs, save your progress and refresh the page.
Important note about image size
If an image selected is too large for the WCMS, an error message indicating so will appear. Please attempt to upload a lower resolution version of the image. The initial error message will still appear on the WCMS screen; however, the photo URL will have updated. Please select Upload to add the lower resolution version of the asset.
After inserting images in a Copy text Block, you may want to align or resize them to better integrate with your Web page content.
Insert the desired image following the Adding images to body content steps.
In the Layout tab, hover over the pencil icon and select Configure next to the block you want to format the picture in.
Select the Edit media button on the left-hand side of the image, then a pop-up window will appear.
Select left, centre, or right alignment depending on how you would like the image to display.
The height and width of the image can also be updated to better fit within the copy text content. If only the width or height is entered and the image will scale itself automatically.
Select Save.
Select Add block (or Update if it is an existing copy text block).
Select Save layout.
LaTeX equations are used to format mathematical equations so they can appear properly on a page.
Add LaTex equations
Place your cursor where you would like the LaTeX equations inserted.
In the editing toolbar, select the Math icon.
Write your equation under Write your TeX here.
Select OK.
Select Add block (Or Update if it is a pre-existing block).
Select Save layout.
Note: The LaTex equation can be moved within a block by dragging by the crosshairs that appear when hovering over the LaTex equation.
Related Links:
Link text can be used to link to other pages both internally and externally. The different types of links will be reviewed further on this page.
It is important to remember accessibility when adding Link text. The Writing Style Guide states that the word or phrase you choose to link from (your hypertext) should provide context and be relevant to the action you want the user to take. Avoid ambiguous Link texts such as “click here” and “read more”.
External links
Highlight the text you want to link. Do not select any trailing punctuation or white space.
Select the Link icon from the editing toolbar and a pop-up window will appear.
If the page is an External link (not within the site), enter the URL.
To link to an Email address, type "mailto:" and enter the email address, e.g. mailto:wcms@uwaterloo.ca.
Select Save.
Select Add block (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Advanced Email Syntax (Mailto links)
Other email fields can be predefined; so when a user selects the link, these fields will auto-populate. “cc=”, “bcc=“, “subject=”, and “body=” are the variables to add to the end of the mailto URL. Multiple emails can be separated by a comma. For spaces use “%20” and for linebreaks use “%0A” in the URL.
Syntax: mailto:[email@address.ca]?[1st variable][value1]&[2nd variable][value2]&…
E.g. mailto:wcms@uwaterloo.ca?subject=Email%20Subject&cc=another@uwaterloo.ca,second@uwaterloo.ca
Internal links
Internal linking occurs when a site links to other URLs on the same website, whereas external linking occurs when a site links to URLs on a different website. Internal links help users to navigate your website and establish a strong information hierarchy. When linking internally, it is not the best practice to utilize node numbers. Linking to content on your own website gives you full control over the content as opposed to an external website.
Highlight the text you want to link. Do not select any trailing punctuation or white space.
Select the Link icon from the editing toolbar and a pop-up window will appear.
To link to internal content, begin typing the title and select it from the drop-down menu that appears. The title is the name of the page, and not the URL path. It is not necessary to enter a '/' before the title.
To link to an Anchor on the same page, add a pound/hashtag sign (#) in front of the anchor name, e.g. #anchor-name.
Note: The anchor name must be spelled out correctly as there is no automatic drop-down menu to choose from.
To link to a File or an Image that exists on your site, begin typing the name of the File or Image and then select it from the drop-down menu that appears.
Select Save.
Select Add block (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Internal links to listing pages
When linking to an internal listing page, you must use the internal path and are unable to select the listing page from the link drop-down function.
Highlight the text you want to link. Do not select any trailing punctuation or white space.
Select the Link icon from the editing toolbar and a pop-up window will appear.
Enter the internal path including the site name of the listing page you wish to link to. The correct path to enter of the default news listing page on a site is bolded in the following example: https://uwaterloo.ca/grebel/news.
Select Save.
Select Add block (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Note: To link to a filtered version of a listing page, you must first filter said listing page and then copy the internal path. If you were linking to an internal filtered news listing page, it may appear similar to this: “grebel/news?title=&date_type=%3D&date%5Bvalue%5D=&date%5Bmin%5D=&date%5Bmax%5D=&audience%5B1%5D=1”.
A long description is a way to provide long alternative text for non-text elements, such as images. Generally, alternative text exceeding 250 characters, which cannot be made more concise without making it less descriptive or meaningful, should have a long description. Examples of suitable use of long descriptions are charts, graphs, maps, infographics, and other complex images.
As with alternative text, long descriptions should be descriptive and meaningful. It should also include all text that is incorporated into the image. A long description should provide visually impaired users with as much information as sighted users would understand from the image.
There are four components to creating a long description in the Waterloo Content Management System (WCMS):
A web page containing the long description.
Alternative text that describes the overall image.
A URL to the web page in the "Long Description URL" field.
A link to the long description web page for sighted users (recommended).
Create a long description web page
From the administration bar, select Workbench, and then select My Dashboard.
Navigate to Content types.
Next to Web page, select Add.
In the Title field, enter the heading of the page where the image will reside, and add "alternative text" at the end.
Enter a Description of content.
Leave the Place in site hierarchy box unchecked.
Select Save.
Select the Layout tab.
Select +Add block and select Copy text Block.
In the Title field, enter "long description" and uncheck Display title.
Add the long description into the text field.
Select Add block.
Navigate to the Change to: menu and select Published.
Select Save Layout.
On the page where the image will reside, insert the image and enter alternative text that describes the overall image.
Note: The image must be inserted through a Copy text Block so that it may be linked to the long description Web page.
Add the long description to the image.
Select the image in the Copy text Block and then select the Link icon in the editing toolbar.
Search and select the long description page title.
Select Save.
Select Update.
Select Save layout.
Deleted text and inserted text can be used to markup updates and modifications in a document. Browsers will normally strike a line through deleted text and underline inserted text.
Add markup for Deleted text
Create or configure the intended Copy text block.
Select the text you want to mark as deleted text.
Select the Styles icon in the editing toolbar.
Under Inline Styles, select Deleted text.
The phrase or sentence you selected will now be changed to Deleted text style.
Select Add block. (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Add markup for Inserted text
Create or configure the intended Copy text block.
Select the text you want to mark as inserted text.
Select the Styles icon in the toolbar.
Under Inline Styles, select Inserted text.
The phrase or sentence you selected will now be changed to Inserted text style.
Select Add block. (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Navigation-
Tables provide a layout to display carefully arranged information within a series of columns and rows.
Below is an example of a table in WCMS 3:
Responsive design
Responsive design provides site visitors with an optimal viewing experience; whether browsing from a desktop, tablet or smartphone device.
By default, table cells will be re-arranged on narrow screens so that the table header cells are next to their corresponding table data cells, instead of being at the top of the table. This works well for most tables, but for accessibility purposes, view the table on mobile and make adjustments if necessary.
Create a table
If you need to create a web page first, please review the instructions on how-to create a web page.
From the editing toolbar, select the Table icon.
Input the desired number of Rows and Columns. Set table Width and Headers. Enter a Caption if desired.
Select OK to insert the table.
Add content to the table.
Merge cells together if desired.
Select Add block (Or Update if this is a pre-existing Copy text Block).
Select state from the Change to: drop-down menu.
Select Save layout.
Note: Table headers must be used to ensure Accessibility standards are met. Headers will allow a user's screen reader to logically follow the table text.
Ensure your table headings do not cause overlaps
You may find that on mobile devices long table headings can overlap the corresponding data cell. Headers will wrap to the next line at "line break characters" (such as spaces). Below are some options for breaking long headings.
With your cursor in the table heading cell select Source.
To break a long header string, e.g. Department/school, enter code ​ for a "zero-width space" after the slash.
To break a long word, e.g. Characteristics, enter code ­ for a "soft hyphen".
​ and ­ can also be used to break long words within your data cells.
How to edit a table
Inserting rows/columns
To insert a row above a cell, right-click on the cell, select Row, and select Insert Row Before.
Similarly, to insert a column to the left of a cell, right-click on the cell, Column, and select Insert Column Before.
To insert a row below a cell, right-click on the cell, select Row, and select Insert Row After.
Similarly, to insert a column to the left of a cell, right-click on the cell, select Column, and select Insert Column Before.
Note: Inserting rows before a "Heading" row produces another heading formatted row. Also, a newly inserted column has the same formatting as the selected column i.e. presence/absence of "Header" rows, merged cells, split cells etc.
Deleting Cells
To delete a row/column, right-click on a cell in that row/column, select Row/Column, then select Delete Row/Delete Column.
Similarly, to insert a column to the left of a cell, right-click on the cell, select Column, then select Insert Column Before.
Note: Deleting cells by right-clicking on them and selecting Delete Cells simply erases the contents of the selected cells.
Splitting Cells
To split a cell, right-click on the cell and select Cell.
For the split cells to span a row, select Split cells horizontally.
For the split cells to span a column, select Split cells vertically.
Note: Splitting a cell that contains content automatically transfers all content to the first (upper/left) split cell.
Tip: Remember to check that your table is accessible after splitting cells across rows/columns. This can be tested by making your web browser as small as possible and viewing the order of your table's cell content. The table data should appear in logical reading order.
Spanning rows/columns
To make a cell span multiple columns/rows follow the given steps:
Right-click on the cell and select Cell.
Select Cell properties.
Enter the number of rows/columns the cell should span under Rows Span/Columns Span respectively.
Note: Changing the span of multiple cells at once (by selecting several cells) changes the individual span of each cell.
Tip: Remember to check that your table is accessible after spanning cells across rows/columns. This can be tested by making your web browser as small as possible and viewing the order of your table's cell content. The table data should appear in logical reading order.
Merging Cells
Merging cells allows you to customize the look and feel of your table by taking two or more cells and combining them together.
Create your table (e.g. 3 Rows, 5 Columns).
Right-click on the first cell you want to merge.
Select Cell.
Select Merge right or Merge down.
Repeat steps 2-4 to continue merging cells.
Note: Merging cells containing content appends all content from all cells being merged.
Tip: Remember to check that your table is accessible after merging cells. This can be tested by making your web browser as small as possible and viewing the order of your table's cell content. The table data should appear in logical reading order.
Insert from media library
Place your cursor where you would like the PDF to be inserted in the Copy text Block.
From the editing toolbar, select the Insert from media library icon.
Select the File tab on the left side.
Find and select the file you wish to use, then select Insert selected. You may also search for the name of the desired existing file.
Select Add block (or Update if it is a pre-existing Block). Below is how the uploaded file will display.
Select Save layout.
Insert using relative path
After you have saved your uploaded file, open the file in a new tab. This is to access the URL path of the file.
Copy the relative path of the file, which is everything following "https://uwaterloo.ca ". Include the backslash before the site name.
With the copied path of the file, switch tabs back to the page of the website you want to link the file to.
Select the Layout tab and select Configure on the desired copy text block or select + Add block to add the link to a new block.
Type out the copy text you would like linked (eg. Testing.PDF), highlight said text, and select the Link icon.
Paste the relative path of the uploaded file into the URL field and select Save.
Remove the originally uploaded file.
Select Update or Add Block. Below is how the linked copy text will display.
Select Save layout.