WYSIWYG Tutorial
![two people](/sites/default/files/styles/header_mobile/public/2022-11/twohelp.jpg?itok=i6R58mV2)
This tutorial will cover the user friendly box you'll use often while creating and editing pages. The acronym WYSIWYG means What You See Is What You Get.
Example of a WYSIWYG input field:
![example](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.42.24%20AM.png)
HOW TO
Step 1: To begin adding a file, either a photo a video or document, you will first select the image/musical note icon above the body text input field.
![WYSIWYG Add Photo](/sites/default/files/2022-11/Screen%20Shot%202022-11-28%20at%203.13.58%20PM.png)
Step 2: If you're uploading a new photo, select the "Browse..." button and choose a photo from your computer to open.
![file upload](/sites/default/files/2022-11/Screen%20Shot%202022-11-29%20at%208.56.41%20AM.png)
Step 3: On the next screen, add the required alternative text to help screen readers understand what the image depicts. Then select the blue "Save" button.
![alt text 3](/sites/default/files/2022-11/Screen%20Shot%202022-11-29%20at%208.47.13%20AM.png)
Step 5: Your image should now have a blue check box next to it, select the blue button "Insert selected."
![checked](/sites/default/files/2022-11/Screen%20Shot%202022-11-29%20at%208.48.04%20AM.png)
DONE! Congrats, you have successfully added an image.
Step 1: To begin adding a file, either a photo a video or document, you will first select the image/musical note icon above the body text input field.
![WYSIWYG Add Photo](/sites/default/files/2022-11/Screen%20Shot%202022-11-28%20at%203.13.58%20PM.png)
Step 2: If you're uploading a new video, select the left side tab "Remote video" and enter the URL in the input field, then select "Add."
![remote video add](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.31.02%20AM.png)
Step 3: On the next screen, simply select "Save" on the bottom right.
![save](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.31.48%20AM.png)
Final Step: On the next screen, you'll see your video has been added and has a blue checkbox. Now select the blue "Insert selected" button to add the video to the WYSIWYG input field.
![insert](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.32.37%20AM.png)
Video Added!
Step 1: To begin adding a file, either a photo a video or document, you will first select the image/musical note icon above the body text input field.
![WYSIWYG Add Photo](/sites/default/files/2022-11/Screen%20Shot%202022-11-28%20at%203.13.58%20PM.png)
Step 2: If you're uploading a new document, select the left side tab "Document" and select the "Brose..." button to upload your document.
![add doc](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.46.36%20AM.png)
Step 3: On the next screen, select "Save."
![next screen](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.47.24%20AM.png)
Final Step: Your document is now selected (blue check box) and ready to be added to the page, use the blue "Insert selected" button to complete the upload.
![document selected](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2011.49.17%20AM.png)
Document added!
Step 1: Type the text you want to add an internal (stmarys-ca.edu) or external link to. Then select all the characters you want to link to and click the icon that looks like a chain "link" in the top right.
![select text](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2012.38.54%20PM.png)
Step 2: Copy and paste an external url OR type the name/title of the internal (stmarys-ca.edu) page you would like the selected text to link to and select the page from the drop down.
![type link](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2012.42.43%20PM.png)
Final Step: Select "Save" and view your new link inside the WYSIWYG input field.
![linked text](/sites/default/files/2022-11/Screen%20Shot%202022-11-30%20at%2012.45.02%20PM.png)