How do I use the WYSIWYG editor?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

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).

font2013-06-11_1932png

 

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

align2013-06-11_1936png

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

lists2013-06-11_2230png

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

table2013-06-11_2238png

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

tablegeneral2013-06-11_2253png

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

tableadvanced2013-06-11_2253png

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.

textcolors2013-06-11_2239png

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.

externallink2013-06-11_2232png

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.

anchor2013-06-11_2235png

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!

linktopage2013-06-11_2238png

pagelinkadd2013-06-11_2251png

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.

images2013-06-13_0043png

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

imagepreview2013-06-11_2244png

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

imagedesctitle2013-06-13_2145png

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

imageadvanced2013-06-11_2245png

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

media2013-06-13_0043png

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

mediageneral2013-06-11_2246png

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

mediaadvanced2013-06-11_2247png

Source: Manipulate the source code as applicable.

mediasource2013-06-11_2250png

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

youtube2013-06-11_2239png

youtubeadd2013-06-11_2253png

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.

undoredo2013-06-11_1934png

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

fullscreen2013-06-11_1937png

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.

cutpaste2013-06-11_2225png

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.

pagebreak2013-06-11_2240png

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

html2013-06-11_2241png

Photo of Drew N

Drew N, Community Manager

  • 258,498 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.