|
Introduction to using the WYSIWYG Editor
This editor is great for quickly setting up information pages, your Splash page, and now, the content of the Homepage if you use the Advanced template. Below is what the editor looks like in your Store Manager. In this case, this is from the Content Pages. No matter where you use it in your Store Manager though, it will function the same.
In order for these Content Pages to display on your website, a code must to be added to your template. You can request for this to be done at the Helpdesk. If you have the Build a Nav, find and insert %PAGES% tag where you want the links to show up. Or manually add the %PAGES% tag to your HTML template.
Note: due to a glitch in the Content Pages, you will not be able to select a button to use if you have buttons for your navigation. Each content page would have to be added manually with the corresponding button to your template.
 Let's just go over some of the basics of the editor to help get you started. Before I go over how some of the buttons work, here are some general guidelines: - Keep the website page open in another window while you work so you can view the changes.
- Save your work frequently or it may be lost if the admin times out.
- When you are done typing a line, hit the 'return/enter' key to move to the next line. Use this to also create more space such as between paragraphs. Do not use the Spacebar to do this.
- To change the format of a section of text, just use your cursor to highlight the entire section you want to change. Once it is highlighted, you can make your changes by clicking on the alignment buttons, font, text color, etc, etc.
- DO NOT use any Bravenet codes on these pages. They just don't mix, and it causes more work for the programmer to fix your pages.
Here are some of the most common buttons you will use:  1. Source - used to view the actual HTML code of the page you have created. Useful for if you have some code that needs to be inserted or if you want to work directly in the HTML. Click the button and have a look. You can toggle back and forth, but be sure to save any changes if you made.
2. Save - click this often to save your work!
3. Cut - when available, you can cut the section of text, images, etc, that you have highlighted.
4. Copy - when available, you can copy a section of text, images, etc that you have highlighted.
5. Paste - adds, or pastes, the section that you have just cut or copied to wherever your cursor is in the editor.
6. Print - will print out a hard copy of the page you are creating.
7. Undo - will undo or reverse the last step.
8. Redo - will put back the step you just used the Undo on!
Common editing buttons:  9. Bold - once clicked, it will make bold any text you type after. Or, if you highlight a section of text and click this button, it will make the text bold.
10. Italics - same as above, only makes the text italicized.
11. Underline - again, same method as above, only it underlines the text.
12. Line-through - and again, same methods as above, only it will strike-through, or line-through, the selected text.
13. Numbered List - when this button is selected, the text you enter after it will be in a numbered list. If you highlight a numbered list and click this button, it will remove that formatting.
14. Bullet List - same methods as above for the Numbered List, only this will just use Bullet Points.
15. Indent Decrease - this will move the current indent setting to the left. Usually used if you have used the Indent Increase and want to change it back.
16. Indent Increase - this will move the current indent setting to the right.
17. Text alignment buttons - these will align the text according to the button you choose. Starting at the left, there is Left Align, Center, Right Align, or Justify. You can also use the Left, Center, and Right to align images.
18. Insert or Edit a Link - Click to add a hyperlink to the position where your cursor is at. Or, highlight a selection of text and click to link it to another webpage.
And just a few more useful buttons to have around:   19. Add or Edit an Image - click this to add an image to where your cursor is located. This will even allow you to upload the image to the editor's image folder(separate from your product folder),or use a URL for the image location.
20. Add or edit a Table - easily set up a table for better organization of items on your page, or click to edit a current table.
21. Divider - click to add a line divider
22. Font - select the style font you would like to use. Once selected, any text you type in afterwards will be in that style, or, it will change the style of a selection of text you have highlighted.
23. Font Size - same method used as above to change the size of the font
24. Font Color - same method used as above to change the color of the font
25. Background color - this refers to the background behind the text, not the page background. Again, same method as above to add a background color behind text. Useful for highlighting certain portions.
So there you have it. Yes, there are some buttons I did not cover for a few reasons: they either cannot be used in conjuction with your store( buttons for forms), they are not common ones you would probably ever use, and if you did find yourself using them, you more than likely did not really need to use this tutorial  . Coming soon: More indepth instructions for some areas of the editor!
|
|
