Skip to main content

1.4K Messages


262.9K Points

Sat, May 31, 2014 5:16 PM


How do I use the WYSIWYG editor?

Formatting Options There are several different formatting options you have in the WYSIWYG editor, similar to those you would see in a word processing program like MS Word.

1.) Text Decoration: Here you can choose to make a particular text selection either BoldItalicized, or Underlined.

2.) Text Style and Size: Here you can choose your Font Family (i.e. Arial, Times New Roman, etc),Font Size, and Format (i.e. Heading, Paragraph, etc).



3.) Alignment: Choose whether your text alignment should be left, right, center, or justified.


4.) Lists: Create a bullet-point or numbered list. If your list is already created, you can also indent or outdent the list items.


5.) Tables: Add or edit a table within the editor.


General: Use the general tab to determine table basics like the number of columns and rows, cell spacing, dimensions, and more.


Advanced: Optionally, you can use the advanced tab to add elements like background colors and images, summaries, and IDs.


6.) Text and Background Color: Change the colors of your text, or highlight the area with a background color. In either instance you can choose from a color value, or input your own hex value if it is known.


Linking There are several ways you can create links on your page, depending on what kind of link you are looking to create.

1.) External Links: Here you can insert or edit a link to an outside site, or if you already have an existing link you can unlink it.


2.) Anchor Links: Anchors are used to link to other sections of the same page. This is particularly helpful if your page is broken into sections or has a good deal of scrolling. You can see examples of anchors in this article like in our "What We'll Cover" section above, or the "back to top" links throughout.


3.) Site Links: Bigcommerce lets you easily choose a link to any product, category, brand, or website content page on your site. The advantage to using this feature over the general "link" feature from step 1, is that if any of these page names change, the link remains intact!



Images and Other Media There are several different types of media you can embed in your pages.

1.) Images: The most common media added is a basic image, and with that you have many options.


General: Choose an image from your computer or from a URL link; also see its preview.


Appearance: Here, you can set the alignment, dimensions, title and description (important for SEO), and additional information.


Advanced: Add advanced options like an alternate mouse-over image, description link, and image map.


2.) Media: Here you can choose to embed additional media including Flash, HTML5 Video, Quicktime, Shockwave, Windows Media, Realtime, or Iframe.


General: Choose your media type, file URL, and dimensions.


Advanced: Add names, background, alignment, Flash specifics, and other advanced options.


Source: Manipulate the source code as applicable.


3.) Video: Add videos from YouTube, Vimeo, Metacafe, or Megavideo. Simply provide the URL of the video.



Additional Options There are several other options within the WYSIWYG editor.

1.) Undo/Redo: Much like many word processing programs, the editor allows you to undo you previous actions, or redo them where applicable.


2.) Toggle Full Screen: Switch the editor to fullscreen mode.


3.) Cut/Copy/Paste: In addition to the general cut/copy/paste functions common to most word processers, the WYSIWYG editor allows the additional functionality of pasting plain text or pasting from Microsoft Word. This provides the option of explicitly keeping the formatting from word, or abstaining from format with plain text.


4.) Code Cleanup: This button cleans up minor code problems like missing opening or closing tags.

*NOTE: Please be aware that this is not an answer for major coding issues or a replacement for a designer. This function will only help minor syntax errors. cleancode2013-06-11_2229png

5.) Page Break: Insert a forced page break where necessary.


6.) HTML: Gain direct access to your page's HTML should you need to add, edit, or remove code.


This conversation is no longer open for comments or replies and is no longer visible to community members.


No Responses!