Using the Content Editor

Learn how to add and format content using the built-in WYSIWYG content editor in Membes AMS.

The content editor appears throughout Membes AMS — in web pages, email templates, the newsfeed, and events. It allows you to format and publish content without needing to know how to code, working similarly to familiar tools like Microsoft Word or Google Docs.

Before You Start

You'll need:

• Admin or appropriate role access for the area you're editing (e.g. CMS, Events, Communications)

• Content ready to add (text, images, or files)

Understanding Your Website's Styling

Before adding content, it's worth reviewing your Typography page. Every Membes instance ships with a Typography page on the front-end website. It shows you how your site has been styled — headings, paragraph text, links, block quotes, and buttons — all reflecting your organisation's branding.

To view it, navigate to your live website and find the Typography page in your menu.

💡 Tip: Your Typography page is unique to your organisation. Refer to it whenever you're unsure how a heading, button, or link will appear on your website.

Your website's visual styling is controlled by CSS (Cascading Style Sheets), which applies styles globally across the entire site. You don't need to edit CSS yourself, but it's helpful to understand that changes to global styles (like brand colours or fonts) apply site-wide, while inline overrides only affect individual pieces of content.

Accessing the Content Editor

The content editor is available wherever content can be added in Membes AMS. For example, in the CMS:

1. Navigate to the relevant page, event, email, or newsfeed item

2. Locate the Page Content section and click the arrow to expand it

3. The content editor will appear with a toolbar at the top

💡 Tip: You can resize the editor by clicking and dragging the bottom-right corner of the editing area.

Formatting Text

Use the toolbar to format your content:

1. Highlight the text you want to format

2. Select the appropriate option from the toolbar:

⚠️ IMPORTANT: Avoid manually changing font size, font style, or text colour. These options override your global CSS styling. If you later need to update your site's branding, pages with inline styling overrides will need to be manually restyled individually.

Adding Links

1. Highlight the text you want to turn into a link

2. Click the Link button in the toolbar

3. Enter the URL — this can be:

   • A file URL from your file repository

   • An internal page on your Membes website

   • An external website URL

4. Click Insert

The linked text will appear styled according to your website's link styling (e.g. coloured and underlined).

Inserting Images

1. Place your cursor where you want the image to appear

2. Click the Insert Image button in the toolbar — choose to upload from your computer or select from your file repository

3. The image will be inserted into the editor

Once inserted, use the image toolbar to:

• Add a caption or turn the image into a link

• Resize using preset sizes, a custom size, or by dragging the handles

• Set alignment (left, right, or centred) or wrap text around the image

• Add alt text — a written description of the image for screen readers used by vision-impaired users

Inserting Tables

1. Click the Table button in the toolbar

2. Select the number of rows and columns

3. Use the table toolbar to insert or delete rows and columns, merge or split cells, and adjust table or cell properties (borders, width, alignment)

⚠️ IMPORTANT: Tables are not mobile responsive by default. If your content will be viewed on mobile devices, consider whether a table is the most suitable format.

Moving Content

To reorder content within the editor:

1. Click on the element you want to move (e.g. an image or block of text)

2. A grab handle will appear on the left edge of the editor

3. Click and drag the handle to move the element to a new position on the page

Pasting Content from Word or Google Docs

Pasting directly from Word or Google Docs brings in inline styling (fonts, sizes, colours) that overrides your global CSS. To avoid this:

Option 1 — Paste without formatting (preferred):

• Windows: Ctrl + Shift + V

• Mac: Cmd + Shift + V

Note: Results may vary depending on your browser. Check the HTML source view after pasting to confirm no inline styles were applied.

Option 2 — Use a plain text editor:

1. Paste your content into a plain text editor (e.g. Notepad on Windows, TextEdit on Mac, or a free tool like VS Code or Notepad++)

2. Copy the plain text from there

3. Paste it into the Membes content editor

This strips all formatting so your content adopts your website's global styling automatically.

Viewing and Editing HTML (Advanced)

The content editor writes HTML in the background. If you have HTML experience and want more control:

1. Click the Source button in the toolbar to switch to HTML view

2. Edit the code directly

3. Switch back to WYSIWYG view when done

Troubleshooting

My text looks different on the website than in the editor
Check whether inline styles were applied (e.g. from a Word paste). View the HTML source and look for style attributes on your text elements. Remove them and re-apply heading styles from the toolbar.

My table looks fine on desktop but breaks on mobile
Tables are not mobile responsive by default. Consider replacing with a formatted list or reorganising the content into a different layout.

My image alt text isn't showing
Alt text is read by screen readers and doesn't display visually on the page — this is expected behaviour.

Next Steps

• Add content to an event listing

• Create or edit an email template

• Update a CMS web page

Related Pages

• CMS Overview

• Managing Events

• Creating Email Templates

• Using the File Repository