Basic Options in the WYSIWYG Content Editor
To use the WYSIWYG content editor, you need to first add a text component in Layout Paragraphs. Please review the Layout Paragraphs page if you have not already done so.
Accessing the WYSIWYG Content Editor
-
Go to the desired page where you want to add content.
- Select the Edit Content.
- Hover your mouse over the component until the pencil icon appears in the top left corner of the component and click the pencil icon.
-
You will now see the WYSIWYG content editor. Further details explaining each option in the WYSIWYG Content Editor are provided below.
Explanation of the WYSIWYG Content Editor.
![Format WYSIWYG Content Editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Format%20WYSIWYG%20Content%20Editor.png.webp?itok=rutMf3Hj)
Format - Allows you to select the type of text you are entering so that the appropriate color and size can be applied.
![Example of the Styles dropdown menue](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/sty3.png.webp?itok=vnuTyljf)
Styles - Select additional formatting for your text. The options depend on the type of text selected. e.g. If you select a bullet list, you are able to change the bullets from a numbered list to an alpha list.
![B for Bold](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/B-wysisyg_0.png.webp?itok=Wf_0t6fy)
Bold - Highlight text and click the B icon to make it bold.
![The Italic button for the content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/I-wysisyg.png.webp?itok=zKDBILEl)
Italic - Highlight text and click the I icon to make it italic.
![Horizontal line button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Horizontal%20line.png.webp?itok=rTrvCpzQ)
Insert Horizontal Line - Easily add a horizontal line or divider across the page, creating a visual break between sections of content.
![Insert Special Character button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Special%20Character-wysisyg.png.webp?itok=Bh2Mm5S4)
Insert Special Characters - WYSIWYG characters, special unicodes for subscripts, superscripts, and proper accents.
![Remove format button for the content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/T-wysisyg.png.webp?itok=FWb6XBdo)
Remove Format - Removes formatting from content.
![Link button for the content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/link-wysisyg.png.webp?itok=dA5sj1sY)
Link - Insert link to other content. If you would like to make a button, follow these instructions: Once you have made the text that you want to be a button, select the Styles option and, from the menu, select the desired button type.
![Anchor button for the content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/anchor-wysisyg.png.webp?itok=pmGSRNXB)
Anchor link - A hyperlink that navigates users to a specific section within a webpage rather than an entirely new page. This facilitates efficient navigation, allowing users to quickly find and access the information they need without having to scroll through the entire document.
![Bullet button for the content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Bullets-wysisyg.png.webp?itok=b1NTtpId)
Insert Bullet List - Once you have selected a bullet list, you can apply additional formatting by changing the style.
![Numbered List button for the content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Numbered%20list-wysisyg.png.webp?itok=lQ7q5tb3)
Insert Numbered List - Once you have selected a numbered list, you can apply additional formatting by changing the style.
![Decrease Indent button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Picture2_4.png.webp?itok=lJASti6c)
Decrease Indent - Clicking the outdent button decreases the indentation level, creating a more structured and organized document. This function is commonly used to adjust the formatting of lists or paragraphs, enhancing overall visual appeal and document clarity.
![Increase Indent button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Picture1_90.png.webp?itok=Hlfmi5PT)
Increase Indent - The indent button shifts text to the right, creating a visually distinct and organized layout. This feature is often employed for creating hierarchical structures, such as bullet points or numbered lists, to improve document readability.
![Block Quote button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Block%20quote.png.webp?itok=xMsIPlCa)
Block Quote - Apply the block quote style to your highlighted text.
![Media Library button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Media%20Library1-wysisyg.png.webp?itok=SK17fgem)
Insert from Media Library - Select to insert media (audio, documents, images, and videos).
![Undue button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Undue-wysisyg.png.webp?itok=R3_Db64h)
Undo Action - Easily correct unintended changes or mistakes, restoring to the previous state.
![Redo button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Redue-wysisyg.png.webp?itok=nALvYOky)
Redo Action - Restores changes that were undone using the "Undo" function, providing flexibility and control over the editing process.
![Source button in content editor](/sites/g/files/oketem1431/files/styles/3_2_720x480/public/media/images/Source-wysisyg.png.webp?itok=R_I8Z5qK)
Source - Work directly with source code (HTML code).
Saving
- Scroll to the very bottom of the page.
- Choose the appropriate option from the Save As dropdown menu (If available).
- At the bottom of the page, click Save.