20. Vantage Theme: Advanced Rich Text Editor Formatting

We have put together a great free Rich Text Editor (RTE) add-on that's now included with the Vantage theme (V6.5+) which will help you add additional formatting to your pages, products, and blog articles anywhere a Rich Text Editor is used. You will be working with snippets of basic HTML code so it will be very helpful if you have some experience with HTML.

Using the RTE Addons

To use the RTE Addons you must copy snippets of formatted code from this article and paste them into the <> code view of the Rich Text Editor (also called RTE Editor or WYSIWYG Editor)for the page or blog article your setting up. Navigate to the page you want to edit and open up the <> code view. Then paste in any of the RTE Addons below and add your own text and images to the code.

USING TWO COLUMNS

If you would like to split content (headers, paragraphs or images) into two columns use the following code snippet and replace the content after each div class="desktop-6 tablet-3 mobile-3" with your own content.

USING THREE COLUMNS

If you would like to split content (headers, paragraphs or images) into three columns use the following code snippet and replace the content after each div class="desktop-4 tablet-3 mobile-3" with your own content.

USING FOUR COLUMNS

If you would like to split content (headers, paragraphs or images) into four columns use the following code snippet and replace the content after each div class="desktop-3 tablet-3 mobile-3" with your own content.

USING SIX COLUMNS

If you would like to split content (headers, paragraphs or images) into four columns use the following code snippet and replace the content after each div class="desktop-2 tablet-3 mobile-3" with your own content.

USING A CALL TO ACTION BUTTON

If you would like to add a call to action button in your page use one of the following code snippet and replace URLLINKHERE with the url for the button and BUTTON TEXT with the text you want to show on your button.

LEFT ALIGNED BUTTON

	<div style="text-align: center;><a href="URLLINKHERE">BUTTON LEFT</a></div>

CENTER ALIGNED BUTTON

	<code><div style="text-align: center;"><a href="URLLINKHERE">BUTTON CENTER</a></div>

RIGHT ALIGNED BUTTON

	<code><div style="text-align: right;"><a href="URLLINKHERE">BUTTON RIGHT</a></div>

USING AN ACCORDION

If you would like to add content within an accordion dropdown (perfect for FAQ's) use the following code snippet and replace the label name between

<label for="item-one"> and </label> and replace the content (can be paragraphs, headers, images) that goes to the label between <div> and </div>. Do this for as many accordion items as you want, but make sure the item classes are numbered correctly, you will see that each <div> has an id="item-one" and for="item-one" this will need to go up in numerical order for each new item, so the six item would have id="item-six" and for="item-six".

USING TABBED CONTENT

If you would like to add content within Tabs use the following code snippet and replace the tab label name between <label for="tab1"> and </label> and replace the content (can be paragraphs, headers, images) that goes to the label between <div> and </div>. Do this for each of the three tabs.

USING AN IMAGE SLIDER

If you would like to add an image slider use the following code snippet and replace URLHERE with the url to the slide image.

USING A MASONRY GALLERY W/NO SPACE (NO GUTTER)

If you would like to add a masonry gallery with no space between items (or often called a Pinterest Style gallery) use the following code snippet and replace the content (can be headers, paragraph, images) between each  

<div>and</div>.

USING A MASONRY GALLERY W/SPACE (WITH GUTTER)

If you would like to add a masonry gallery with space between items (or often called a Pinterest Style gallery) use the following code snippet and replace the content (can be headers, paragraph, images) between each  

<div>and</div>.

USING A DIVIDER

><hr/>