Using the Easy Editor

The Volusion Easy Editor helps you easily edit and style content on your storefront and in your store’s Admin Area. You can use the Easy Editor to create HTML content for use in product descriptions, on the homepage, and more. 

Admin Area Editing

Most fields that accept HTML in your Admin Area come equipped with the Easy Editor “WYSIWYG” (What You See Is What You Get) tool. These fields include product and category descriptions, article bodies, and newsletter bodies. 

Wherever an editable HTML field exists, you can use the Easy Editor's tool bar to format text, add links, and insert images.

 

See the functionality of the Easy Editor buttons in the Easy Editor Tools section below. 

Storefront Article Editing

You can modify content directly from your storefront by hovering over any editable area. Once you see the area outlined in blue, click Edit. You'll know that you're ready to edit the content once you see the blue dotted line appear around the content area.

The section below details the functionality of each button in the Easy Editor toolbar.

Easy Editor Tools

You can hover over the individual icons in the Easy Editor to view the button function.

HTML

Click the HTML button to view the code version of the styled content within the Easy Editor window.

Formatting

Select from a dropdown list of built-in common formatting options for your text.

Bold

Select text and click this button to make the highlighted selection bold.

Italic

Select text and click this button to make the highlighted selection italic.

Deleted

Select text and click this button to create a strikethrough effect. Note: this does not delete the text.

Unordered List

Click the Unordered List button to create a new unordered, bulleted list.

Ordered List

Click the Ordered List button to create a new ordered, numbered list.

Indent

Click the Indent button to add levels of indenting to paragraphs.

Outdent

Click the Outdent button to remove levels of indenting from paragraphs.

Insert Image

Click the Insert Image button to open the Insert Image popup. You can Upload an image from your computer by clicking Browse to find your image file on your computer. Once you've selected the file, the image will be automatically uploaded.

You can also add an image from the internet by clicking Link, inserting the Image Web Link and clicking Insert.

Once you've added an image, you can select the image in the Easy Editor window to resize it. Note that resizing will always maintain the aspect ratio of the image, preserving the integrity of the image dimensions.

Clicking Edit in the middle of the image will open the Edit popup. In this popup, you can add an image Title (image alt text). You can also add an image Link to make the image a link. Enable Open link in new tab to set the link to open in a new tab of your browser. Select the Position of the image in the window using the dropdown.

Note that you can also drag images into the Easy Editor window from your desktop. See this in action below.

Insert Video

Click the Insert Video button to open the Insert Video popup where you can add the embed code for any hosted video. Click Insert to add the video embed code.

Table

Select from the Table dropdown to add a new table. Use the Add/Delete selections to add or remove rows, columns, and headers to your table.

Link

Highlight text in the body of the Easy Editor and click Link > Insert Link to add a hyperlink to the text. You can insert a URL link and select whether you want the link to Open in a new tab.

You can also create an Email link that will automatically open a pre-addressed email to the address you specify, using whichever mail client is native on the user's computer.

If you are familiar with HTML, you can create anchors throughout your text and use the Anchor linking option to create links to the anchors.

For all links, you can click Insert to insert the link into the Easy Editor window.

Alignment

Select from the Alignment dropdown to align text within the Easy Editor window.

Insert Horizontal Rule

Click Insert Horizontal Rule to add a horizontal line to the content within the Easy Editor window.

Change font family

Highlight text in the body of the Easy Editor and select from a list of common fonts to change the font for your text.

Font Color

Highlight text in the body of the Easy Editor and select from a grid of colors to change the color of your text.

Back Color

Highlight text in the body of the Easy Editor and select from a grid of colors to change the background color behind your text.

Change font size

Highlight text in the body of the Easy Editor and select from a list of common font sizes to change the font size of your text.

Image Swapping

You can also update images and graphics that occur throughout the storefront, such as buttons. Note that images inserted into the Image Swap window must be in .gif file format.

Page Text Editing

For non-styled, non-variable Page Text values, you can hover over the text and click Edit. This will open a dashed line area where you can type in the replacement text.

Some Page Text values include dynamic variables as part of the editable text. In these cases, there will be an on-hover popup with a link to the specific Page Text ID in your Admin Area.

For other Page Text values that include inline styling, we recommend you make edits in the Admin Area in order to preserve the formatting.

Header/Footer Region Editing

On certain templates, you can make edits to your header and footer on the storefront.  To edit, hover over these areas and click so you see the dotted blue border.  Make edits within the outlined area, then click out of the region to save your changes.

If you don't want to save your changes, hit the "ESC" key on your keyboard.