How do I use WYSIWYG?

When editing content, it is important to lean how to use the WYSIWYG (what you see is what you get) editor. WYSIWYG mode allows you to edit, change, and add content to your web pages without having the knowledge of HTML. This guide will explain what each icon in the WYSIWYG toolbar allows you to do (from left to right)

Addtional Information
3dcart’s WYSIWYG Editor is powered by Redactor which offers a smooth and clean design that adheres to HTML5 and responsive design techniques.

Turning on WYSIWYG
Back to top

WYSIWYG is turned off by default. To turn WYSIWYG on, log into your 3dcart Online Store Manager and look to the top right of the interface – where your username will be listed. Clicking on the username will bring about a special drop down menu with a series of links contained in it. One of these links is labeled “Turn On WYSIWYG” and can be used to turn the function on for all applicable areas of your 3dcart Online Store Manager.

Where Do I find WYSIWYG?
Back to top

The built-in WYSIWYG editor will be found in the following locations of your Online Store Manager

  • Products ->Product List
    • Product Information Tab – Extended Description
    • Product Information Tab – Extra Fields 6 through 10
  • Product ->Categories
    • Category Details – Category Header & Footer
  • Marketing ->Autoresponders
    • When creating individual Autoresponder emails
  • Marketing ->Newsletters
    • When adding a newsletter
  • Content ->Blog
    • When adding or editing an article, WYSIWYG is available for the Short Post and Post Content areas
  • Content ->Site Content
    • When editing the content for an extra page or menu link page
  • Content ->Header and Footer
    • Available for the global header, footer and left/right banners
  • Content>Titles & Content
    • WYSIWYG is available for each page’s Header and Footer sections
  • Settings ->General ->Manufacturers
    • When adding a new manufacturer, WYSIWYG is available for the Manufacturer’s page header
  • Settings ->Design ->Close Store
    • Available for the Message portion of your Closed Store page.

If you are well versed with HTML coding, you can also input your own HTML into the WYSIWYG window simply by turning WYSIWYG mode off.

WYSIWYG Functions
Back to top

The top of your WYSIWYG editor will be presented inthe form of a toolbar that will look like this:

The following information will briefly explain each of the available functions of the built-in WYSIWYG editor toolbar. Most of these functions will take effect the moment you click on the button. In other cases, clicking on the icon will bring about a small drop down menu with additional formatitng options.

When adding formatting to your text, you can either click the format option and begin typing to get the selected result — or otherwise type your text, highlight it and then click the format option to have it added to the selected text.

From left to right, your icons are:

  • HTML
    This will turn let you switch WYSIWYG into a straight HTML/Text editor with no formatting options whatsoever.
    Note that this action will only apply to the current Editor window and not all of the WYSIWYG editrs in the Online Store Manager as described at the start of this article.
  • Formatting
    This will let you change the formatting of the text so that it uses special formatting (header, code, quote) or normal text .
  • Bold
    This will add bold formatting to your text.
  • Italic
    This will add italic formatting to your text.
  • Deleted (Strikethrough)
    This will add a strikethrough effect on text.
  • Unordered List (Bullets)
    This icon will let you create a bulleted list
  • Ordered List (Numbered)
    While this icon will let you create a numbered list.
  • Outdent
    This icon will let you remove an indent (see next)
  • Indent
    This icon will let you indent your text.
  • Table
    This icon will allow you to add tables and table elements to your content. Tables will be formatted with no size data to remain responsive.
  • Link
    This icon will be used to create a link. Simply highlight the text you’d like to link, click this icon and enter the destination URL to add your link
  • Alignment
    This icon can be used to set your text’s alignment options like centering, right, justified, etc.
  • Insert Horizontal Rule
    This icon will add a horizontal line to your text
  • Change Font Family
    This icon will give you selectable options for web-friendly font families that can be used for your text.
  • Change Font Size
    Alter the font sizes as needed.
  • Font Color
    Alter your text coloring as needed.
  • Back Color
    Allows you to add a background color to text areas.
  • File Manager
    This icon will navigate you to the file manager for situations where you’d like to add an image to your content.
  • Insert Video
    This icon will let you embed YouTube or Vimeo URLs to add video to your content.
  • Fullscreen
    This icon will expand the view to full screen view to help you design content more easily.