# Visual editor controls reference

You'll find the controls for changing page content, styling, visibility, and targeting, plus how AI suggestions, saving, and publishing work.

Available on the Scale and Pro plans.

Use the visual editor to change existing page elements for a campaign audience. It loads a proxied copy of your page so you can select an element and edit what that audience sees.

![Visual website personalization editor with segment targeting rules and editable page headlines](https://rightmessage.com/help/screens/campaigns-editor.light.webp)

## Navigate, save, and publish

| Control            | What it does                                                                                                        |
| ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| **Leave editor**   | Returns to the dashboard. Your saved draft stays in place.                                                          |
| **Personalize**    | Shows audience rules, page changes, and element editing.                                                            |
| **Browse**         | Hides editing panels so you can navigate your site.                                                                 |
| Back and reload    | Navigate the proxied page. Shift-click reload to clear the proxy cache.                                             |
| Scroll-reveal fix  | Exposes content hidden by your site's scroll animations in the editing view. It doesn't change your published site. |
| Above-fold warning | Flags content visible before scrolling that may briefly show its original wording while personalization loads.      |
| Saving indicator   | Appears while your changes save to the draft.                                                                       |
| **Fully synced**   | Means no unpublished changes remain. Otherwise, the button shows **Publish** and a change count.                    |
| **Publish**        | Publishes after the required review and access checks. Review other project changes too.                            |

You don't deploy these edits through your website builder. They use the installed RightMessage snippet and your [published project configuration](https://rightmessage.com/help/publishing-your-changes).

## Choose an audience

The audience selector lets you create, select, rename, drag to reorder, duplicate, and delete audiences. **Default** shows your original page. Each audience rule needs a segment group and a segment, and every rule must match.

**Page Changes** lists the selected audience's changes. Select a change to highlight its element and scroll it into view. The list can show **Wrong page**, **No matching elements on this page**, or **Element is hidden on this page**. Medium or low Smart Match confidence appears beside the change.

Use the plus control, **Add element by CSS selector**, when you already know the element's selector. See [campaign audiences and fallback content](https://rightmessage.com/help/personalization-audiences) for what happens when audiences overlap.

## Change content and visibility

The **General** tab shows only the controls that apply to your selected element.

| If you'd like to...           | Use                                                                                                                                                                                                                                                              |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Replace all the content       | **Replace all** under **Content**. It replaces the element's contents, including nested markup. An empty replacement leaves the original unchanged. Use visibility controls to hide it.                                                                          |
| Compare with the original     | **Show original**. **Copy original** copies the original into your replacement.                                                                                                                                                                                  |
| Replace specific text         | **Find/replace**. Enter literal text or a regular expression such as `/team/gi`. **+ Add another** adds a pair. Remove controls appear when there are multiple pairs.                                                                                            |
| Show or hide the element      | **Element Visibility**. Choose **No change (keep current)**, **Make visible**, or **Hide element**. Messages tell you whether the original is already hidden or visible.                                                                                         |
| Replace an image              | **Image Source**. Enter a URL, rather than uploading an image. The replacement removes the image's `srcset` so it uses your URL. An empty value leaves the original unchanged.                                                                                   |
| Change an image's description | **Alt Text**. An empty value doesn't clear the original attribute.                                                                                                                                                                                               |
| Change a link's destination   | **Link URL**. An empty value keeps the original destination.                                                                                                                                                                                                     |
| Change where a link opens     | Set this in your website editor. **Link Target** lists **Same Window**, **New Window**, **Same Frame**, **Parent Frame**, and **Top Frame**, but currently writes `_target` instead of the browser's `target` attribute. It doesn't change where the link opens. |

Switching between **Replace all** and **Find/replace** clears the other mode's change. Copy any wording you want to keep before switching.

**Find/replace** keeps existing HTML elements and replaces text within each text node. A search can't span text separated by nested markup. Pairs run in order, so a later pair can match wording created by an earlier one. An empty replacement removes matching text.

Literal searches replace all case-sensitive matches. A regular expression without flags defaults to global matching. When you add another flag, such as `i` for case-insensitive matching, include `g` to keep replacing every match. An invalid regular expression becomes a literal search.

![Visual editor General controls for the WorkForge homepage headline personalization](https://rightmessage.com/help/screens/personalize-editor-general.light.webp)

### AI suggestions

**AI Generate** suggests replacement content for one element. Your audience needs at least one segment rule. Suggestions use the original content, selected audience segments, element type, and up to 500 characters of surrounding parent content.

Select a suggestion to apply it to the draft. **Regenerate** asks for more options and excludes previous suggestions. Closing the suggestions returns you to editing. There are no separate tone or length selectors, and this control doesn't generate all of an audience's page changes at once.

## Change styles and classes

In **Style**, **+ Add style** adds a property override. The current computed value shows your starting point. Enter a CSS value, then press Enter or leave the field to apply it. An empty list says **No style overrides**. Remove an override to stop that change from setting the property.

| Style control        | Effect and example value                                                                               |
| -------------------- | ------------------------------------------------------------------------------------------------------ |
| **Text Size**        | Font size, such as `24px` or `1.5rem`.                                                                 |
| **Text Color**       | Text color, such as `#333333`.                                                                         |
| **Text Weight**      | Font weight, such as `400`, `700`, or `bold`.                                                          |
| **Line Height**      | Line spacing, such as `1.5` or `24px`.                                                                 |
| **Text Align**       | Horizontal text alignment, such as `left`, `center`, or `right`.                                       |
| **Background Color** | Element background, such as `#ffffff` or `transparent`.                                                |
| **Padding**          | Space inside the border, such as `1rem 2rem`.                                                          |
| **Margin**           | Space outside the border, such as `10px` or `auto`.                                                    |
| **Border Width**     | Border thickness, such as `1px`. Your site also needs to supply a border style for the border to show. |
| **Border Color**     | Border color, such as `#cccccc`.                                                                       |
| **Border Radius**    | Corner rounding, such as `4px` or `50%`.                                                               |
| **Opacity**          | Transparency from `0` to `1`, such as `0.5`.                                                           |

Use valid values for each CSS property. Overrides affect the selected element, not your site's theme.

**Add Classes** and **Remove Classes** accept comma-separated class names. They change which classes the element has, not what those classes mean. Define them in your website stylesheet first.

![Visual editor Style controls for the WorkForge homepage headline personalization](https://rightmessage.com/help/screens/personalize-editor-style.light.webp)

## Page scope and element targeting

In **Target**, choose **CSS Selector** or **Smart Match**. **Smart Match** is disabled when the change has no stored fingerprint. Its **Matching Text**, **Match Type**, and confidence information describe how it selects an element.

In **CSS Selector** mode, **Pages** lets you set domain and path entries. If your project has multiple domains, the domain menu includes **All Domains**. Use **+ Add another page** for another entry. Remove controls appear when there is more than one.

![Visual editor Pages controls for the WorkForge homepage headline personalization](https://rightmessage.com/help/screens/personalize-editor-pages.light.webp)

Read [page targeting](https://rightmessage.com/help/personalization-page-targeting) before adding a wildcard path. The URL you open in the editor is a place to edit. Each change's rules still decide where it applies.

## Remove a change

**Remove change** asks you to confirm before deleting the action. It removes the personalization, not the website element. Publish to apply that removal for visitors.

For a walkthrough, see [Change copy, images, links, and page sections](https://rightmessage.com/help/personalize-page-content). If your page won't load in the editor, see [editor loading diagnostics](https://rightmessage.com/help/allow-rightmessage-to-load-your-site-in-the-visual-editor).