Art Storefronts Support Center

Search for answers to your questions by entering keywords below, or look through our knowledge base.

Everything You Need To Know About The Common Functions and Shortcuts of The WYSIWYG Editor

Follow

The WYSIWYG (What You See Is What You Get) editor is similar to a word processor like Microsoft Word, however we have integrated this into the Art Storefronts website for you. In this article we will be providing you with quite a bit of information about the WYSIWYG Editor, however, all of this information is important in learning exactly how to use this tool and maximize its effectiveness.

 

 


 
 

Please Note: If you have used your Theme Editor or Custom CSS that makes changes to text, text alignment, text colour or anything else those changes will always overwrite the changes made in the WYSIWYG Editor.




Common Functions

To find out the function of a particular icon, simply hold the mouse over the center of the icon and within a couple of seconds, a Tool Tip will appear. The icons that are available to you at any one time are highlighted, perhaps in colour, whilst those that are unavailable are greyed out. Some icons - such as copying and pasting - will become available when you have carried out some action that may be outside of the ASF platform.
 

Best Practise Tips: You should save your work frequently. It is good practice to do this at least every five minutes; computers do fail; web browsers do crash. In general, if you lose a piece of work when using this editor, it will be gone forever.











 
 

List of Icon Groupings

The icons in the WYSIWYG Editor are typical of those that would be found in a word processing program such as Microsoft Word. We’ve included screenshots of the buttons below as well as a brief description of the button and its functionality.
 

    1. The first button, labeled Source, allows you to switch to the portion of the WYSIWYG Editor where you can use CSS to code the text or information contained in the Editor
    2. The button that looks like the Disk is the button you can click in order to Save your changes.
    3. The button that looks like a sheet of paper is the New Page button. If you click this it will remove everything currently in the Editor.
    4. The fourth button with the magnifying glass is the Preview button. When you click on this, a new tab will open and show you a preview of what you have entered in to the Editor.
    5. The final button in this cluster looks like a printer and is the Print button. This allows you to print out the information contained in the WYSIWYG box.

    1. The button that looks like scissors is the Cut button. You can highlight a specific portion of text, click the scissors and it will cut the test from the Editor.
    2. The two sheets of paper on top of each other is the Copy button. you can copy highlighted text for use elsewhere.
    3. The first clipboard is the Paste button. You can use this to paste any copied or cut text from elsewhere.
    4. The clipboard with the T allows you to Paste Plain Text. This means it will remove any formatting that may have accidentally come along with your text.
    5. The clipboard with the W allows you to Paste From Word and will retain as much of the word formatting as possible.
    6. The left arrow is the Undo option that allows you to undo changes.
    7. The right arrow is the Redo option that allows you to redo what you just undid.

    1. The magnifying glass icon is the Find option. this allows you to type in a word or phrase and it then searches the information in the Editor in order to find a match to the information entered into the search field.
    2. The next icon is Replace. This allows you to find a specific word or phrase and replace it with a different word or phrase.
    3. The next button is Select All. This select everything in the Editor.
    4. The next button is Spell Check. You can spell check as you type or you can choose to type the document and then spell check it.
    1. The B button is to Bold text. You can press this before you begin typing to bold text or you can highlight text and press this button to make it bold.
    2. The I button is for Italic text. You can press this button before you begin typing so the text appears italicized or you can highlight text and press this button to make it appears in italic
    3. The U button is for UnderlineYou can press this before you begin typing to underline text or you can highlight text and press this button to underline it.
    4. The S button is for Strike-through. This will put a line through text. You can press this before you begin typing to strike-through text or you can highlight text and press this button to utilise the strike-through option.
    5. The X with the 2 at the bottom is Subscript. This allows you to type something normally and then press this button to make the text into subscript text.
    6. The X with the 2 at the top is Superscript. This allows you to type something normally and then press this button to make the text into superscript text.
    7. The T button with the X is Remove Formatting. You can highlight text, press this button and any previous formatting will be removed.

    1. The first button is for Numbered Lists. This will allow you to make a list using numbered bullet points,
    2. The second button is for Bulleted Lists. This allows you to make a list using dots as the bullet points instead of numbers.
    3. Undo Indentation is the next button. his allows you to undo any indentation you may have previously done.
    4. Indent in the next button and it allows you to indent a paragraph.
    5. The quotation mark button is for Block Quotes. This is for quotations that are longer than three lines long. You can press this button and begin the quote.
    6. The next button is used to create a DIV Container. This is used to create containers around groups of content on Web pages, it is usually given a unique id to distinguish it from other div elements on the same page.
    7. Left Justify is the next button which allows you to justify your text left.
    8. Center Justify is next and allows you to center justify text.
    9. Right Justify is next and allows you to right justify your text.
    10. The next button is Justify. You can justify the text, which might make the last line of text in a paragraph considerably shorter than the other lines.
    11. Next is the Text Direction: Left to Right button. This means text goes from left to right.
    12. Last we have the Text Direction: Right to Left button. this means the text goes from right to left. 
    1. The first button is the Link button. This allows you to create a hyperlink.
    2. The second button is the Unlink button. this allows you to remove a hyperlink.
    3. The Flag is the Anchor button. this will allow you to create text that appears highlighted in a hypertext link and that can be clicked to open the target web page.
    1. The button with the mountain range is the Image button. You can click on this button to upload an image into the Editor.
    2. The second button is the Table button. You can click on this to create a table in the Editor.
    3. Third is the Insert Horizontal Line button. This inserts a horizontal line into the Editor that may separate one section from another.
    4. The smiley face button is the Smiley button. You can use this to insert emojis into your Editor.
    5. The Omega symbol is used to Insert Special Characters. This button allows you to easily insert characters, such as the copyright symbol.
    6. Finally in the Insert Page Break For Printing. This simply inserts a page break to make printing the information by page easier.

    1. Formatting Styles allows you to choose Headings and Title formatting for specific text.
    2. Paragraph Formatting allows you to select formatting for your paragraphs.
    3. Font Name offers a list of font options you can use.
    4. Font Size offers a list of sizes that your font can be.
    5. The A button with an underline is Font Colour. You can change the colour of your font here.
    6. The A button with a background is Background Colour. You can use this to set the background colour of your text.
    7. Next is the Maximize button. DO NOT USE THIS.
    8. The following button is to Show Blocks. This shows an outline around paragraphs and other formatting.
    9. The question mark is the About button. This will take you to a different site where you can learn more about this editor. 

 
 

Keyboard Shortcuts

Even if you don’t generally use keyboard shortcuts for things like copying and pasting, we strongly suggest utilizing these shortcuts when using the editor. They can make life quite a bit easier on you while working within the WYSIWYG Editor. The following is a list of keyboard shortcuts compatible with our editor.

  1. CTRL+A highlights the whole editing area
  2. CTRL+B changes the highlighted font to bold
  3. CTRL+C copies the highlighted area to the clipboard
  4. CTRL+I changes the highlighted font to italic
  5. CTRL+L opens the Link window which allows you to create a hyperlink out of the highlighted text
  6. CTRL+U changes the highlighted font to underlined
  7. CTRL+V or SHIFT+INSERT pastes the data from the clipboard
  8. CTRL+X or SHIFT+DELETE cuts the highlighted area to the clipboard
  9. CTRL+Z performs the undo function
Was this article helpful?
7 out of 8 found this helpful

Comments