A What You See Is What You Get or WYSIWYG editor is a common feature of modern software. You’ll encounter it when using Microsoft Word, composing an email, or updating a website.
The name refers to the fact that you can see your changes as you make them, such as being able to see bold or italicised text, headings, and tables. District Engage’s editor allows for a range of rich text editing options for creating your landing page content.
The editor
You’ll encounter the WYSIWYG editor anywhere there’s an opportunity to input some free text. You can tell it’s a WYSIWYG editor because you’ll see some text editing options, such as setting headings, making text bold, adding a list, a hyperlink, or an image. Basic editing functions will be in a bar along the top of the input box. For extended functions, press the + button next to the image icon.
Editor functions
| Name | Purpose | Example |
|---|---|---|
| Headings | Add headings tags to the headings of your content. This is different from simply making text bold or bigger; it tells search engines, screen readers and other machines how to read the content. | Heading 1Heading 2Heading 3 |
| Bold | Makes text thicker and more prominent. | Bold text example |
| Italic | Makes text thinner and slanted at an angle, to indicate emphasis. | Italic text example |
| Strikethrough | Puts a line through the middle of text to indicate the word is crossed out. | |
| Code | Formats text so it looks like computer code input. | Code text example |
| List | Creates a bulleted list, a numbered list, or a task list. |
Task list example |
| Text Direction | Switch between left-to-right and right-to-left text direction, e.g. switching between English and Arabic content. | |
| Hyperlink | Adds a hyperlink to a URL address accessible elsewhere on the Internet. | Hyperlink example |
| Image | Adds an image inline in your text. Images may not be formatted correctly by default when added here. | |
| Extended Functions | ||
| Table | Adds a table to your text. You can set the number of rows and columns. Your table may not be formatted correctly by default when added here. |
|
| Accordion | Creates a collapsible set of sections to hide or display your content with a dropdown arrow. |
|
| oEmbed Find out more about oEmbed | Embed videos, Soundcloud or Spotify music, and other multimedia content using a URL link. | |
| Quote | Highlight a sentence or paragraph of content to make it visibly larger and specifically formatted to stand out. | An example of a quote block |
| Link block | If you’re sharing a number of links, format them into a neat list with its own title. |
|
| Callout Box | Highlight important information with a visually formatted box. |
|
| Code block | Add a correctly formatted block of computer code to your text. |
|
| Divider | Add a page divider to visually separate chunks of text. | A divided page Example |
