- \n
- An alternative to the Dialog Box is the Popover<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Extra Context:<\/strong> They allow you to provide on-demand access to supplementary details\u2014including lengthy text, images, videos, or other media\u2014without cluttering your main page design.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Adding a Dialog Box to a Content Page<\/a><\/li>\n\n\n\n
- Content Panel<\/a><\/li>\n\n\n\n
- Additional Resources<\/a><\/li>\n<\/ul>\n\n\n\n
Adding a Dialog Box to a Content Page<\/h2>\n\n\n\n
You can add as many Dialog Boxes as needed to a content page within your Canvas course.<\/p>\n\n\n\n
While editing content in your Canvas course, launch the DesignPLUS Sidebar by clicking on the \ud83d\ude80 rocket ship icon<\/strong> at the top right corner of the screen.<\/p>\n\n\n\n
- \n
- Alternatively, press Alt\/Option + Shift + D<\/strong> on your keyboard.<\/li>\n<\/ul>\n\n\n\n
Within your paragraph of text, highlight the word or phrase you would like to make as a Dialog Box.<\/p>\n\n\n\n
- \n
- Alternatively, place your cursor within a paragraph of text at the point where you want to insert the Dialog Box.<\/li>\n<\/ul>\n\n\n\n
In the DesignPLUS Sidebar, click on the \u2795 Add New Elements<\/strong> tab.<\/p>\n\n\n\n
Click the Dialog Box<\/strong> button (found under the Interactive Content<\/strong> or Recently Used Tools<\/strong> headings).<\/p>\n\n\n\n
- \n
- Alternatively, use the Search<\/strong> textbox to search for Dialog Box<\/strong>. DesignPLUS will show results in real-time. Click the \u2716\ufe0f icon to clear your search.<\/li>\n<\/ul>\n\n\n\n
![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_DialogBox.png\")
<\/figure>\n<\/div>\n\n\nContent Panel<\/h2>\n\n\n\n
In the following example, when a student clicks on the acronym LMS<\/strong>, a Dialog Box appears displaying a short paragraph and image of the Canvas Learning Management System Dashboard.<\/p>\n\n\n
\n![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_DialogBox_StudentView1.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n
\n![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_DialogBox_StudentView2.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
It is highly recommended to use the Content<\/strong> panel to make any updates to your Dialog Box(es). This panel provides dedicated textboxes to safely edit specific parts of the tool:<\/p>\n\n\n\n
- \n
- Trigger Text:<\/strong> The visible word or phrase that students click on.<\/li>\n\n\n\n
- Dialog Box Title:<\/strong> The title that displays at the top of the dialog box for you and your students.<\/li>\n\n\n\n
- Dialog Box Width (px or %):<\/strong> Set the width of the dialog box in either pixels (px) or percentage (%).<\/li>\n\n\n\n
- \ud83d\udd01 Convert to Popover:<\/strong> Convert the Dialog Box to the Popover tool.<\/li>\n<\/ul>\n\n\n
\n![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_DialogBox_ContentPanel.png\")
<\/figure>\n<\/div>\n\n\nAfter editing the text in the Content<\/strong> panel, press Enter<\/strong> on your keyboard or click anywhere outside the text box to update the Canvas Rich Content Editor (RCE).<\/p>\n\n\n\n
Inside the Canvas RCE, locate the light gray area tagged with Modal Content<\/strong>. You can use this space to add any text, images, videos, or other media you want to display in your Dialog Box.<\/p>\n\n\n\n
![\"A](\"http:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-content\/uploads\/sites\/53\/2026\/03\/DesignPLUS_DialogBox_EditInRCE.png\")
<\/figure>\n\n\n\nSave<\/strong> or Save & Publish<\/strong> your content page to test out the Dialog Box.<\/p>\n\n\n\n
Additional Resources<\/h2>\n\n\n\n
- \n
- Dialog Boxes: [New] DesignPLUS User Guide<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Dialog Boxes are interactive pop-ups that appear when a user clicks a specific word or phrase. They are an excellent tool for keeping your course pages clean and streamlined. Adding a Dialog Box to a Content Page You can add as many Dialog Boxes as needed to a content page within your Canvas course. While … Continue reading “DesignPLUS Dialog Boxes”<\/span><\/a><\/p>\n","protected":false},"author":4255,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[4,244],"tags":[521,24,121,520,298,504,476],"class_list":["post-6940","post","type-post","status-publish","format-standard","hentry","category-canvas","category-cidi-labs","tag-box","tag-content","tag-designplus","tag-dialog","tag-page","tag-panel","tag-text"],"author_meta":{"display_name":"Chris Hofer","author_link":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/author\/chofer\/"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["Canvas<\/a>","Cidi Labs<\/a>"],"unlinked":["Canvas<\/span>","Cidi Labs<\/span>"]},"tags":{"linked":["Box<\/a>","Content<\/a>","DesignPLUS<\/a>","Dialog<\/a>","Page<\/a>","Panel<\/a>","text<\/a>"],"unlinked":["Box<\/span>","Content<\/span>","DesignPLUS<\/span>","Dialog<\/span>","Page<\/span>","Panel<\/span>","text<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 1 month ago","modified":"Updated 1 month ago"},"absolute_dates":{"created":"Posted on March 10, 2026","modified":"Updated on March 12, 2026"},"absolute_dates_time":{"created":"Posted on March 10, 2026 9:53 pm","modified":"Updated on March 12, 2026 9:39 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/6940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/users\/4255"}],"replies":[{"embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/comments?post=6940"}],"version-history":[{"count":9,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/6940\/revisions"}],"predecessor-version":[{"id":7052,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/posts\/6940\/revisions\/7052"}],"wp:attachment":[{"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/media?parent=6940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/categories?post=6940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/campus.collegeforcreativestudies.edu\/ed-tech\/wp-json\/wp\/v2\/tags?post=6940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Dialog Box Title:<\/strong> The title that displays at the top of the dialog box for you and your students.<\/li>\n\n\n\n
- Trigger Text:<\/strong> The visible word or phrase that students click on.<\/li>\n\n\n\n
- Alternatively, use the Search<\/strong> textbox to search for Dialog Box<\/strong>. DesignPLUS will show results in real-time. Click the \u2716\ufe0f icon to clear your search.<\/li>\n<\/ul>\n\n\n
- Alternatively, place your cursor within a paragraph of text at the point where you want to insert the Dialog Box.<\/li>\n<\/ul>\n\n\n\n
- Content Panel<\/a><\/li>\n\n\n\n
- Extra Context:<\/strong> They allow you to provide on-demand access to supplementary details\u2014including lengthy text, images, videos, or other media\u2014without cluttering your main page design.<\/li>\n<\/ul>\n\n\n\n