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.
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.
||A standard heading|
||A standard paragraph|
||A block of text that leaves whitespace intact and is usually rendered with a monospace font|
||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.
||Strong or important text|
||Marked or highlighted text|
||Small text, such as copyright, legal, and side comments|
For best results, make sure your stylesheet has rules that target all possible elements.
The markup for links is pretty basic.
Links may also have a
target attribute depending on the options
chosen in the editor.
The markup for images depends on whether or not the image has a caption.
Images with captions will use the
<figure class="image"> <img src="image.jpg" alt="Description"> <figcaption>Caption</figcaption> </figure>
Images without captions will use the
<img src="image.jpg" alt="Description">
When an image is aligned, it will receive the
align-center class. You can use these classes to target specific alignments in your
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 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 provide a way to deep link to specific parts of a page. New anchors will use this markup.
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 are special elements that contains one or more lines of computer code. Surreal CMS uses the following W3C recommendation for structuring code blocks.
You can use a third-party syntax highlighter to decorate code blocks. Learn more
<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
[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
||The desired width of thumbnails.||
||The desired height of thumbnails.||
How to resize thumbnails.
Captions are stored in each image's
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
If your gallery is a
<ol>, its images will be wrapped in
You can insert section breaks into your document using the Insert menu. A section break is comprised of the following markup.
<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.