Edit Content in the WYSIWYG

Edit Content in the WYSIWYG

1. 1. I'm adding a WYSIWYG component

   This is just to get us started so we'll have a WYWIWYG to work on.

   

2. 2. Click on Add WYSIWYG

   

3. 3. Enter the editing area and begin type in some text

   Although our components do a good job of allowing you to put a heading on a section, sometimes you'll want a heading to go at the top of a WYSIWYG. It's easy to do.

   

Adding a Heading

1. 4. Highlight the text you want to turn into a heading

   

2. 5. Click on Paragraph

   

3. 6. Select Heading 2 from the dropdown

   In most case, you are going to be picking <H2> unless you are creatiung a head that would naturally fall under the same topic as you <H2>, In this case, you'd make it an <H3>.

   

4. 7. Review the heading in your editor.

   Note: The heading in the editor is in a different font and weight from what your heading will look like on your page.

   

Msking a Link

1. 8. Let's make a link! Create the text you wish to make a link

   

2. 9. Highlight the text

   

3. 10. Click on the link icon

   

4. 11. Enter the URL path of your link or the full URL if outside of www.sju.edu

   

5. 12. Click the green checkmark

   

6. 13. Save it as a draft to preview

   

7. 14. Review your new H2 heading, content and link.

   That link could use some dressing up. What if we wanted to make it a red button?

   

Making a Button in the WYSIWYG Editor

1. 15. Click Edit

   

2. 16. Click the Edit button on the WYSIWYG component containing your link

   

3. 17. Select Full HTML from Text format dropdown

   For use to make a red button, this toggle has to be set to Full HTML.

   

4. 18. Click Continue

   You can you click it without worrying about the warning.

   

5. 19. Highlight your link text

   

6. 20. Click on Styles

   

7. 21. Select Red Button from the dropdown.

   

8. 22. Click on Save to preview

   

9. 23. Preview your new red button.

   It looks OK. But what if we wanted to center it the head and the button?

   

Centering Heading and Buttons in the WYSIWYG Editor

1. 24. Click Edit

   

2. 25. Click Edit to edit the WYSIWYG component

   

3. 26. Highlight your heading

   

4. 27. Click on the Text Alignment dropdown

   

5. 28. Select the Align Center option.

   

6. 29. Highlight the text of your button

   

7. 30. Click the Text Alignment icon

   

8. 31. Click the Align Center icon

   

9. 32. Click Save to preview your centered heading and red button

   What if we wanted to add an image to the WYSIWYG?

   

10. 33. Untitled step

Adding an Image to the WYSIWYG Editor

1. 34. Click Edit

   

2. 35. Open your WYSIWYG and click the icon for inserting media

   

3. 36. Select your image from the pop-up that comes up

   You can either choose to upload your own image or choose one from the media library.

   

4. 37. Click the image to select it and bring up a floating menu

   

5. 38. Select the icon with the image to the left if you want the image to be to the left with the text wrapping around it on the right.

   NOTE: There is a known issue with Drupal that prevents text wrapping around an image right out of the gate. If you want to have it wrap, please shoot the Web Team a ticket.

   

6. 39. Select the image, then click the icon with the image centered to center it.

   

7. 40. Save and preview

   

8. 41. We now have a much nicer look!

   If you need more help, see our section on images in our Web Guide: https://www.sju.edu/offices/marcomm/web-guide/working-with-files