x-cart ~using the wysiwyg editor

wysiwyg stands for 'what you see is what you get'. It works in a similar fashion to Microsoft Word, with a few additions. I will be writing explanations for the buttons as they are requested by clients.

To turn on the wysiwyg editor, click on the link where you see it (pretty much any field where you can insert text on your site has the option of DEFAULT EDITOR and WYSIWYG EDITOR).

If you hover over the icons in the toolbar, their names will pop up. The majority of them work exactly the same way as they do in Microsoft Word. For those that may be a little different, I'll write tutorials below. Contact Joanne for special requests.

Note: The WYSIWYG editor does have its limits. If you want something done that you can't do yourself, Net Perceptions can always custom design any of these sections for you. (Standard hourly rates will apply unless it was already included in your original quote.)

preview your work

While you're working in the WYSIWYG editor, you may like to preview what your work will look like live in a browser. Select this button to preview. When you click this button, you'll be given the option of three different screen sizes to choose from. It really doesn't matter which option you choose here.

hyperlinks (linking to another page - linking to an email address)

In 'web design' speak, this is called a Hyperlink. Click on the hyperlink tool (circled). A pop up window will appear. Ensure that the text or image that you wish to hyperlink have been highlighted before you click the hyperlink tool. (If you don't, the email address or webpage you enter below will serve as the text to be hyperlinked)

1. Source - the drop down box has many options.
   http:// - If you're linking to a normal webpage
   https:// - if you're linking to a secure webpage (ie: one that already has https:// in the address bar of your browswer)
   mailto: - if you're linking to an email address (be aware, it will not be spam protected)
   the last three options will rarely if ever be used.
   On the right hand side, put in the web page address (or email address). ie: www.mywebpage.com.au or email@mywebpage.com.au. Note: in this right hand side field, DO NOT include the http:// part of the address if you're copying and pasting directly from your browser.
2. Bookmark - leave this one alone (it's an either/or option along with Source, and we're doing Source here)
3. Target - only use the drop down box here. If the page you're linking to is within your website, and it has navigation on it, leave this blank. If the page you're linking to has no navigation or it belongs to someone elses website, choose blank.
4. Title - this text will display when people hover over the link. This is optional.
5. Click the INSERT button.
6. Click the OK button.

inserting an image

In x-cart, the insert image function in the WYSIWYG editor doesn't allow you to upload new images, but it allows you to embed an image that's already on the internet. If the image you want to use isn't already on your website, please contact us so we can write you a tutorial. (Remember, these WYSIWYG Editors are different for each program and do not have the high end function of Microsoft Word - there are limits to what you can do in them)

1. Click on the image icon (circled above). A pop up window will now appear.
2. Source - this is the full address of where your images is currently living on the internet. To get this full address, right click on the image & choose Properties from the pop up menu. Copy the information in the Address (URL): section. Once you have this, paste it in to the field provided next to Source. Note: linking directly to images that are not on your own website is considered poor form and you should not do it.
3. Title - this is optional, but helps people know what the image is if they have images turned off (or if the person visiting your website is deaf and they have a screen reader)
4. Alignment - use the drop down box to change this. You'll see the preview screen change to show you the position of the image.
5. Border Style - if you want a border, click this button and a pop up window will appear with options. It works very much like the border settings in Excel.
6. Width & Height - you can use this to enter a different height or width for your image. Doing this will distort the image and I recommend you don't do it.
7. Spacing - you can change the gap between the image and your text by placing numbers in the various boxes. The preview screen shows you what it will look like as you do it.
8. Click Insert
   

MORE X-CART TUTORIALS