WYSIWYG editor | Civio Engage Knowledge Base       [ ![Civio Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.engage-vic-docs.dh1.amazee.io)  [Articles](/articles)

   [Home](/)   [Knowledge base](/articles)   [✏️ Content tools](/articles?category=5)

WYSIWYG editor
==============

Updated 2 months ago

    Search  Go

   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. Civio 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
----------------

NamePurposeExampleHeadingsAdd 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 1
=========

Heading 2
---------

### Heading 3

BoldMakes text thicker and more prominent.**Bold text** exampleItalicMakes text thinner and slanted at an angle, to indicate emphasis.*Italic text* exampleStrikethroughPuts a line through the middle of text to indicate the word is crossed out.CodeFormats text so it looks like computer code input.Code text exampleListCreates a bulleted list, a numbered list, or a task list.- Bulleted list example

1. Numbered list example

Task list example

Text DirectionSwitch between left-to-right and right-to-left text direction, e.g. switching between English and Arabic content.HyperlinkAdds a hyperlink to a URL address accessible elsewhere on the Internet.[Hyperlink](https://www.districtcms.com/) exampleImageAdds an image inline in your text. Images may not be formatted correctly by default when added here.**Extended Functions**TableAdds 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.![image - 2024-03-11T115435.433.png](/storage/articles/9493602545295.png)

AccordionCreates a collapsible set of sections to hide or display your content with a dropdown arrow.![image - 2024-03-11T115413.244.png](/storage/articles/9493632726159.png)

oEmbed
[Find out more about oEmbed](/articles/9493601704463-oEmbed)Embed videos, Soundcloud or Spotify music, and other multimedia content using a URL link.QuoteHighlight a sentence or paragraph of content to make it visibly larger and specifically formatted to stand out.An example of a quote blockLink blockIf you're sharing a number of links, format them into a neat list with its own title.![image - 2024-03-11T115349.093.png](/storage/articles/9493632726415.png)

Callout BoxHighlight important information with a visually formatted box.![image - 2024-03-11T115326.174.png](/storage/articles/9493632727055.png)

Code blockAdd a correctly formatted block of computer code to your text.![image - 2024-03-11T115244.418.png](/storage/articles/9493632728079.png)

DividerAdd a page divider to visually separate chunks of text.A divided page

---

Example

 [    Back to articles ](/articles)

  Table of contents
-----------------

    © 2026 [Civio](https://civ.io)