Visual Editor

The visual editor is where you'll spend most of your time editing. You'll see a copy of your webpage where you can edit metadata and any content regions you've defined.

To open the visual editor, choose the website you want to work with and then select a page to edit.

If you're working with a mouse, you'll see guides appear when you hover over content regions. To select a content region, just click or tap on it.

Some content regions, such as block and inline regions, will accept focus and provide a toolbar. Others will trigger a panel that appears on the right-side of the screen.

When you're done editing, select Publish from the sidebar to publish your changes back to the server.


Formatting Text

In block regions, sections can be formatted as headings, paragraphs, preformatted text, and blockquotes. The following elements can be produced using the paragraph menu in the toolbar.

Option Element Description
Heading 1–6 <h1> – <h6> A standard heading
Paragraph <p> A standard paragraph
Preformatted Text <pre> A block of text that leaves whitespace intact and is usually rendered with a monospace font
Blockquote <blockquote> A long quotation

In block, inline, and link regions, you can add formatting such as bold, italic, strikethrough, etc. The resulting markup is comprised of semantic HTML5 elements.

Option Element Description
Bold <strong> Strong or important text
Italic <em> Emphasized text
Strikethrough <del> Deleted text
Superscript <sup> Superscript text
Subscript <sub> Subscript text
Code <code> Computer code
Highlight <mark> Marked or highlighted text
Small Print <small> Small text, such as copyright, legal, and side comments

Tip

For best results, make sure your stylesheet has rules that target all possible elements.


Links

The markup for links is pretty basic.

<a href="index.html">Home</a>

Links may also have a title or target attribute depending on the options chosen in the editor.

Images

The markup for images depends on whether or not the image has a caption.

Images with captions will use the <figure> element.

<figure class="image">
  <img src="image.jpg" alt="Description">
  <figcaption>Caption</figcaption>
</figure>

Images without captions will use the <img> element.

<img src="image.jpg" alt="Description">

Tip

When an image is aligned, it will receive the align-left, align-right, or align-center class. You can use these classes to target specific alignments in your stylesheet.


Videos

Videos can be used to embed content from third-party websites. The markup used depends on the source of the embed. There are two ways to insert embeddable content.

You can copy and paste the embed code into the Video Panel and it will be added to the page as-is. This is the most reliable way, but it requires you to locate the embed code on the third-party's website. (Usually hidden behind a share button.)

For convenience, you can also paste a URL into the Video Panel and we'll try to fetch the embed code for you using the provider's oEmbed API. (For example, try pasting a YouTube or Vimeo URL.)

If the provider doesn't support oEmbed, you'll need to locate the embed code manually.


Tables

Tables are useful for displaying tabular data. New tables will use the following markup.

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <!-- more rows -->
  </tbody>
<table>

Percentage units will be used when a table is resized. This ensures the table remains responsive even after resizing.


Anchors

Anchors provide a way to deep link to specific parts of a page. New anchors will use this markup.

<a id="anchor-name"></a>

It's generally best to place anchors at the beginning of a heading or paragraph. When creating an anchor, make sure the id is unique from all others on the page.


Code Blocks

Code blocks are special elements that contains one or more lines of computer code. Surreal CMS uses the following W3C recommendation for structuring code blocks.

<pre class="cms-code">
  <code class="language-javascript">
    ...
  </code>
</pre>

Tip

You can use a third-party syntax highlighter to decorate code blocks. Learn more


Galleries

Galleries are collections of images that you can add to any block region. You can make galleries interactive using JavaScript libraries such as Lightbox and Fancybox. Galleries use the following markup.

<div class="cms-gallery">
  <!-- Gallery images here -->
</div>

Gallery images must use the syntax below. Avoid adding additional elements, classes, and attributes, as they will be removed when the gallery is parsed.

<a href="uploads/image.jpg">
  <img
    src="uploads/thumbnails/image-256x256.jpg"
    alt="Description"
    data-caption="Caption"
  >
</a>

Thumbnails are automatically generated when images are added to the gallery. They will be stored in the [uploads]/thumbnails/ folder on your server.

Galleries are very similar to Gallery Regions, but there are differences in how they're configured. The following data- attributes can be used on the containing content region to control how thumbnails and other gallery features work.

Attribute Description Default
data-gallery-thumbnail-width The desired width of thumbnails. 256
data-gallery-thumbnail-height The desired height of thumbnails. 256
data-gallery-thumbnail-resize How to resize thumbnails.

fit – proportionally resize thumbnails to be no larger than the specified dimensions.

trim – proportionally resize thumbnails to the exact dimensions and trim the remaining overflow.
fit
data-gallery-captions Captions are stored in each image's data-caption attribute. They're intended to be used with lightbox-style galleries. If you don't need them, set this to false. true
data-gallery-links A link to the full size image will be wrapped around each thumbnail. If you don't want your thumbnails wrapped in links, set this to false. true

Tip

If your gallery is a <ul> or <ol>, gallery images will be wrapped in <li>.


Section Breaks

You can insert section breaks into your document using the Insert menu. A section break is comprised of the following markup.

<hr>

Historically, <hr> stood for horizontal rule and it was used to display a horizontal line on the page. The element was redefined in HTML5, and is now the semantically appropriate element for adding thematic breaks in content.