|
When editing content, it is important to lean how to use the WYSIWYG editor. This stands for "what you see is what you get". 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)
WYSIWYG is turned off by default. To turn WYSIWYG on, log into your Shift4Shop 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 Shift4Shop 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
- 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.
Note
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.
The top of your WYSIWYG editor will be presented in the form of a toolbar that will look like this:
 Full Screen: Allows you to edit in full screen view, rather than just a section of your webpage. Preview: You can Preview your current work for the webpage. Search: Search for specific words and replace with another. Example: Search for every instance of the word 'hello', and replace with the word 'greetings' automatically. Paste: Insert data that has already been selected from either Cut or Copied from Word. Undo: Undo your last action, Redo: Redo your last action. Foreground Color: Change the color of your selected text. Background Color: Change the color of the background behind your selected text. Hyperlink: Allows you to add a hyperlink to selected text.
To create a hyperlink:
- Highlight your text.
- Click the Hyperlink button.
- Type in the address you would like to link to in the Source field.
- Click Insert.
- Click OK
- Click Save Changes at the bottom of the screen.
 Insert Image: Insert an image into the page.
To insert an image:
- Click the insert image icon in the toolbar.
- Click on the folder icon in the Source field. This will display a sidebar for your File Manager.
- Click on the image you want to insert
- If the image is not currently uploaded, click on the Upload files button at the bottom.
- Browse for the file you want and click Upload.
- Click Select next to your newly uploaded image.
 Internal Link: Hyperlinks to another link within your webpage.
To add an Internal Link:
- Highlight the text you want to internal link to.
- Click the Internal link button.
- Click Select next to the area you want to link to.
 Insert Table: Allows you to insert a table. You can specify the amount of rows and columns you need. Edit Table/Cell: Edit the size/width of your table or cells. Absolute: Allows you to position an image anywhere on the webpage. This can be tricky – for advanced users only. Special Characters: Insert a symbol. Line: Insert a line.y Remove formatting: Removes formatting on selected text. View/Edit Source: View and edit the source code of your page. Styles and Formatting: Choose different styles (font, size etc.) and format for your text/paragraphs. Paragraph: Choose different heading styles. Font Name: Choose different font for your text. Size: Choose the size of your text. Bold: Make selected text Bold. Italic: Make selected text italicized. Underline: Underline selected text. Justify Left: Have text or objects start on an alignment from the left of the page. Justify Center: Have text or objects align in the center of the page. Justify Right: Have text or objects start on an alignment from the right of the page. Numbering: Insert a numbered list. Bullets: Insert bullets. Indent: Indent your text. Outdent: Outdent your text.
Note
When using WYSIWYG, keep in mind that the site's CSS file may sometimes override your WYSIWYG designed elements. For example, you may color a link red, but the store's CSS file already contains a style that is set to make links dark blue. Therefore, you may want to get familiarized with the site's CSS file and how it can affect the site's overall look and feel.
WYSIWYG mode is available in many sections of the Shift4Shop Online Store Manager including:
- Products
- Extended Description
- Extra Fields 6 through 13
- Categories
- Autoresponders
- When creating individual Autoresponder emails
- Newsletters<
- When adding and drafting a newsletter
- Manufacturers
- When adding a new manufacturer, WYSIWYG is available for the Manufacturer's page header
- Site Content
- When editing the content for an extra page or menu link page
- Available for the global header, footer and left/right banners
- Store Status
- Available for the Message portion of your Closed Store page.
- Titles & Content
- WYSIWYG is available for each page's Header and Footer sections (except Home Page)
Note
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.
|