- Default Styles
- Content blocks Quote
- Definition / Author
- Media base connection
- Related articles
- Table of contents (TOC)
- Term list / Timeline
- Media Cover image
- Single image
- Carousel
- Video
- Help Filters
- Styles
- Images
- Anchors
- Links
- Internal Links
- Find an article’s or entity’s ID
General notes on usage
- Recommended browser: Firefox. Chrome exhibits a strange bug that modifies the formatting of the content.
- User proper formatting for section titles or headings.
- Always insert blocks (text, filter, image) into an empty paragraph.
- Pay attention to blank paragraphs.
- When you don’t get the formatting you want, use the “rubber gum” button in the toolbar to clear all formatting (and styles), and start again.
- Refer to this article’s source. It demonstrates everything it describes. Go into its “edit mode” to view how it is created.
- Whenever you get stuck ask Marius or Cezar for help.
Default text styles
A demonstration of how the default text styles are displayed.
Heading 2
Use it when starting a new section.
Heading 3
Use it when a section needs to be split into sub-sectoins
Heading 4
Use it before a list or when deviding the content into small blocks.
Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bolded text elit dolor. Nulla vehicula libero a elit pretium vestibulum.
Emphasized tempor lobortis. Integer luctus dui non velit sodales bibendum. Morbi vel lorem nec eros cursus ornare. Sed at bibendum justo. Nam gravida ipsum arcu. Vivamus mi risus, congue non vehicula et, eleifend in purus. Phasellus tristique justo sit amet tortor elementum gravida.
Acronyms (e.g. HTML) are inserted by selecting text and then using the toolbar button with the “A.B.C.” to insert the title / definition of the acronym.
Ordered list
- In erat velit,
- ullamcorper
- vitae accumsan eu,
- semper in leo
Unordered list
- In erat velit,
- ullamcorper
- vitae accumsan eu,
- semper in leo
Table
| Column Heading 1 | Column Heading 2 | Column Heading 3 |
|---|---|---|
| Row heading 1 | Lorem ipsum dolor sit amet | Nulla vehicula libero a elit pretium vestibulum. |
| Row heading 2 | Nulla vehicula libero a elit pretium vestibulum. | Lorem ipsum dolor sit amet |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elit dolor. Nulla vehicula libero a elit pretium vestibulum. Nam consectetur tempor lobortis. Integer luctus dui non velit sodales bibendum. Morbi vel lorem nec eros cursus ornare. Sed at bibendum justo. Nam gravida ipsum arcu. Vivamus mi risus, congue non vehicula et, eleifend in purus. Phasellus tristique justo sit amet tortor elementum gravida. Donec tempus neque pretium augue pulvinar posuere. Duis eget velit non erat euismod imperdiet.
Content blocks
Quote
How to
Select the paragraph(s) that you want to be styled as a quote and press the toolbar button with the quotes icon.
Example
The default look of a blockquote.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elit dolor. Nulla vehicula libero a elit pretium vestibulum. Nam consectetur tempor lobortis. Integer luctus dui non velit sodales bibendum. Morbi vel lorem nec eros cursus ornare. Sed at bibendum justo. Nam gravida ipsum arcu. Vivamus mi risus, congue non vehicula et, eleifend in purus. Phasellus tristique justo sit amet tortor elementum gravida. Donec tempus neque pretium augue pulvinar posuere. Duis eget velit non erat euismod imperdiet.
Dignissim pretium libero, sit amet pulvinar est gravida eget. Vivamus eget diam sem, at tincidunt erat. Nam blandit, metus sed pulvinar feugiat, enim leo fringilla nisl, sit amet sodales urna nulla at magna. Donec eros nibh, congue sit amet scelerisque eu, lobortis vel turpis. Suspendisse vitae ultrices nibh. Fusce sollicitudin justo nec sem imperdiet venenatis. Aenean egestas sem in elit pharetra pulvinar a tristique diam.
Variants
- With author: the last paragraph in the quote can present the author’s name.
- Aligned right: will be aligned to the right of the immediately following paragraph.
Definition
How to
Definition is a filter (see Filters help section for details on how to add filters).
- Name: definition;
- Option: text. You can add as many text options as you need. Each option will be displayed as a new paragraph.
Example
[definition title=’Example Definition’ text=’with multiple paragraphs, aligned right’ text=’Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elit dolor.’]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elit dolor. Nulla vehicula libero a elit pretium vestibulum. Nam consectetur tempor lobortis. Integer luctus dui non velit sodales bibendum. Morbi vel lorem nec eros cursus ornare. Sed at bibendum justo.
Nam gravida ipsum arcu. Vivamus mi risus, congue non vehicula et, eleifend in purus. Phasellus tristique justo sit amet tortor elementum gravida. Donec tempus neque pretium augue pulvinar posuere. Duis eget velit non erat euismod imperdiet.
[definition title=’About the author’ text=’Dignissim pretium libero, sit amet pulvinar est gravida eget. Vivamus eget diam sem, at tincidunt erat.’]
Dignissim pretium libero, sit amet pulvinar est gravida eget. Vivamus eget diam sem, at tincidunt erat. Nam blandit, metus sed pulvinar feugiat, enim leo fringilla nisl, sit amet sodales urna nulla at magna. Donec eros nibh,
congue sit amet scelerisque eu, lobortis vel turpis. Suspendisse vitae ultrices nibh. Fusce sollicitudin justo nec sem imperdiet venenatis. Aenean egestas sem in elit pharetra pulvinar a tristique diam.
Variants
- Aligned right: will be aligned to the right of the immediately following paragraph.
Media base connection
How to
Reference is a filter (see Filters help section for details on how to add filters).
- Name: reference;
- Option: id. The ID of the entity node that should be displayed (How to find the ID).
Example
[reference id=’1674′]
Placerat in, commodo eget erat. Quisque lorem metus, ultricies sed rhoncus vel, iaculis vitae risus. Quisque est purus, malesuada eu pulvinar ut, tristique non nisi. Proin vitae laoreet libero. Integer tristique orci ullamcorper elit congue lacinia. Suspendisse placerat enim vitae nibh aliquam in auctor justo venenatis. Ut sed arcu erat, a iaculis leo. Pellentesque in elementum dui. Mauris et lectus in nibh fermentum vulputate in vitae sapien.
Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mollis sem sed massa pulvinar facilisis. Nullam dolor risus, faucibus at feugiat a, sollicitudin nec ipsum. Integer posuere porttitor elit id pellentesque. Aliquam ac mauris nec magna consectetur mattis. Mauris vehicula nibh quis massa rutrum euismod. Proin ac magna lectus. Integer porttitor sollicitudin volutpat.
Variants
- Aligned right: will be aligned to the right of the immediately following paragraph.
Related Articles
How to
Related articles is a filter (see Filters help section for details on how to add filters).
- Name: related_articles;
- Option: ids. You can either choose “auto” (the CMS will find related articles automatically based on tags) or manually add article IDs (How to find the ID).
Example
[related_articles ids=’auto’]
Volutpat. In erat velit, ullamcorper vitae accumsan eu, semper in leo. Aliquam erat volutpat. Vivamus mollis lectus vitae nisi aliquam id fermentum justo tincidunt. In odio metus, dictum et ultrices et, blandit non sapien. Aenean purus turpis, cursus quis tincidunt a, suscipit vel justo. Ut adipiscing justo et felis pellentesque tristique sollicitudin ante placerat. Curabitur ac ipsum tristique metus sodales convallis.
Table of contents
Usage
- Create an ordered list;
- Select the list and choose “TOC” from the Styles toolbar select element;
- Create anchors (help) for the main sections (e.g. “table-of-content”);
- Link (help) the TOC items to the anchors you created (e.g. #table-of-contents.
Example
The table of contents of this article as this article.
Term list
How to
- Create an ordered or unordered list;
- Select the list and choose “Term List” from the Styles toolbar select element.
- Separate subtitles (the bolded text) by selecting the words and the space immediately after them and making them bold (the “B” button on the toolbar).
Example
- Step 1 Create the list of items
- Step 2 Select the entire list and choose “Term List”
- Subtitles Bold the words and the space immediately next to them
Volutpat. In erat velit, ullamcorper vitae accumsan eu, semper in leo. Aliquam erat volutpat. Vivamus mollis lectus vitae nisi aliquam id fermentum justo tincidunt. In odio metus, dictum et ultrices et, blandit non sapien. Aenean purus turpis, cursus quis tincidunt a, suscipit vel justo. Ut adipiscing justo et felis pellentesque tristique sollicitudin ante placerat. Curabitur ac ipsum tristique metus sodales convallis.
Variants
- Aligned right: will be aligned to the right of the immediately following paragraph.
Media
Cover image
The maximum size that will be shown is 1000px x 336px. If it’s narrower, it will be centered in its area. If it’s wider, it will be cut off.
It will appear in archive cards, content blocks and at the top of the article main page.
How to
- Add the image and its details to the Main Image field (help);
Example
This article’s cover image.
Single image
3D Printer
Single images have 2 variants, both of them with an automatic height:
- Article Content Image: the image will be displayed with a maximum width of 292px at first and with an expand button (+) overlayed on top of it. The article text will flow next to the image on the right by default, or on the left if you choose the Align Right style (help).
- Full Width: the image will be displayed full width at 1000px width.
How to
- Create a blank new paragraph where you want the image to appear;
- Add the image and its details to the Image Gallery field (help);
- Select the image variant you need in the Insert area next to the image;
- Press the [Insert] button.
Carousel
The slideshow filter wil rotate between images and will display a next button and a previous button.
The size of the images is 638px x 358px (roughly a 16:9 aspect).
It is recommended that you manually crop the images to get the best effect.
How to
Carousel or “slideshow” is a filter (see Filters help section for details on how to add filters).
- Name: slideshow;
- Option: ids. You can either choose “all” (to display all the images added to the Image Gallery field) or manually add image IDs. The IDs of the images are directly related to the order the images are placed in the media gallery field (i.e. the first image has the ID 1, the second has the ID 2).
Example
[slideshow ids=’1,2′]
Volutpat. In erat velit, ullamcorper vitae accumsan eu, semper in leo. Aliquam erat volutpat. Vivamus mollis lectus vitae nisi aliquam id fermentum justo tincidunt. In odio metus, dictum et ultrices et, blandit non sapien. Aenean purus turpis, cursus quis tincidunt a, suscipit vel justo. Ut adipiscing justo et felis pellentesque tristique sollicitudin ante placerat. Curabitur ac ipsum tristique metus sodales convallis.
Volutpat. In erat velit, ullamcorper vitae accumsan eu, semper in leo. Aliquam erat volutpat. Vivamus mollis lectus vitae nisi aliquam id fermentum justo tincidunt. In odio metus, dictum et ultrices et, blandit non sapien.
Video
Usage
Video is a filter (see Filters help section for details on how to add filters).
- Name: video;
- Option:none. The URL of the video is added immediately after the filter’s name and a semicolon.
Example
[video:https://www.youtube.com/watch?v=0azXivQCyc8 width:100%]Volutpat. In erat velit, ullamcorper vitae accumsan eu, semper in leo. Aliquam erat volutpat. Vivamus mollis lectus vitae nisi aliquam id fermentum justo tincidunt. In odio metus, dictum et ultrices et, blandit non sapien. Aenean purus turpis, cursus quis tincidunt a, suscipit vel justo. Ut adipiscing justo et felis pellentesque tristique sollicitudin ante placerat. Curabitur ac ipsum tristique metus sodales convallis.
Help
Filters
Filters (or shortcodes) are plain text codes surrounded by brackets that you can use to embed pieces of content (e.g. a list of related articles or a Media Base entity). A filter usually looks like this: [filtername option=’value’ secondoption=’secondvalue’] and is composed of 2 main parts:
- the name of the filter, that comes immediately after the opening bracket;
- the list of options at the editor’s disposal writted in the form of optionname=’value’. The available options are separated by spaces.
To get an idea of the filters at your disposal you can look at the list that comes right after the WYSIWYG text editor. Some of the filters will also have buttons available in the toolbar (e.g. the Ads filter).
There are only a few basic rules tofollow to get the best results:
- Always use a blank new line (or paragraph) when you insert / write a filter;
- Only apply styles (like Align Right) after you have inserted the filter into the editor.
Styles
Use the Styles dropdown to modify the default appearance of a content or media block.
How to:
- Select the entire block you want to modify (e.g. the entire paragraph, the entire quote, the image and it’s caption);
- Choose the desired style from the Styles select box in the toolbar.
Available styles
- Align right: Applies to most blocks of content. Effect: the selected block of content (text, image) will be placed on the right side of the content while the content will flow on the block’s left side.
- With author:Applies to quotes. Effect: styles the last paragraph differently (font size, color, font style).
Images
Adding an image
- In the field where you want to add it, click [Browse] to select the image, then click [Upload] to upload it;
- Add the copyright and caption info into the Title field;
- Optional but recommended Use the [Crop] button to crop the various sizes the image will appear in.
Image sizes
Anchors
- Click the button that literally looks like an anchor;
- Add the name of the section.
Use only letters, dashes and underscores (a-z, A-Z, -, _).
Links
- Click the button that looks like a link (next to the ordered / numbered list button);
- Enter the link URL / address of the page you’re linking to. If you are linking to an internal anchor (that’s on the page you are adding the link on), add only the name of the anchor preceded by the # character (e.g. “#internal-links”);
- Optional add attributes like if the link should open in a new tab.
- Click the [Insert] button.
Internal links
- Select the text of the link;
- Click the Linkit button on the toolbar on the far right (looks like a link with a small green circle on it);
- Use the autocomplete feature to find the content you need to link to;
- Click the title of the article you are linking;
- Click “Insert link”
Find an article or entity node ID
- Click the Linkit toolbar button;
- Use the autocomplete feature to find the media base entry you are looking for;
- The ID is shown in the path, next to “node/”. (e.g. for “node/123”, the ID is “123”).
Default Styles
Heading 2
Heading 3
Heading 4
Blockquote. In erat velit, ullamcorper vitae accumsan eu, semper in leo.
Optional Author (select ‘With author’ from the Styles dropdown)
Ordered list
- In erat velit,
- ullamcorper
- vitae accumsan eu,
- semper in leo
Unordered list
- In erat velit,
- ullamcorper
- vitae accumsan eu,
- semperin leo
Photo credit: Wallum Ltd.
