One of the new features that comes with Miva 9.7 is the new wysiwyg Editor (or Text Editor) in your Product field. What's really nice is, you can have your product stand out without having to know HTML code. We're currently in our catalog. We’ve clicked on “Product” and I’m adding a product. I’m just using a bow tie for this example and we're going to come down here to our new wysiwyg editor.
If you're familiar with Microsoft Word or other text editors, this menu should look very familiar to you. There are drop down menus where you can go through and see what the different choices are that you have and I'll walk you through them in this video. Let's say we wanted to do a header. In this example I'm going to say “Made in the USA.” Let's say I wanted to put a certain style on it. We can come over here to format, click the drop-down menu, come down here to paragraph and we already have some pre-coded headers here for us. I'm going to click on Heading 1. Its automatically applied the heading for us and we didn't even have to put any code in.
If we wanted to insert a table, we could simply come over here and click on the table icon. You just draw with your mouse how many cells and columns you want. So for this sentence I think I'm going to do 3 rows just one column. We’ll click our cursor in here and type, “Made with the highest quality materials” and then we'll click in the next cell and we will put “Polyester” and we’ll click on the next one and I’ll put “Cotton.”
I do want to make a note here that this has to be dry cleaned, so I'm going to add another row. You can see there's rows here on this little icon here. This one has columns and this one's the whole table. So I'm going to click on the rows icon and I'm going to say insert a row below. Okay here I'm going to put a little asterisk and I'm going to say, “Note, this must be dry cleaned only.” Okay, now I want to make that bold and I want to make it italics so I'm going to highlight the text come up here to “Bold” and “Italicize” and there we go. No HTML needed and I've now made my text stand out with our editor.
The next thing I want to do is I want to insert a picture or an image. So I'm going to come over here to this icon and if you hold your mouse over it long enough a little descriptive text will pop up and it says “Insert Picture.” I'm going to select this image here that I already happen to have in my library. If you don't have an image you can just click here and click “Add” and add a new one. Now if you wanted to change the size of your image you can just click on this little drop-down menu here and you can put in some custom image dimensions. We're going to keep ours at what it's at, but I just wanted to show you where you could do that at. We're going to click “Select” and now our image is inside our description. Let's go ahead and add this product and then go look and see what it looks like in our store. Okay so in our product description we've got the image that we've uploaded. We've got the table here that we inserted. We can see that our text is Bold and Italicized and we have our header text up here at the top. So far so good. Let's keep working. We’ll go back over to our Admin. Now to add a normal product image, we're still going to click here over to images. Let's go ahead and put that in. We're going to click here over to images. Let’s make sure that we assign it to the “Main” image type. We're going to go back over to our store again just to see how that looks. So here’s our main product image and then here is our description down below.
All right we're going to come back over to our product and go look at our wysiwyg editor and see what else we can do. Let's say we wanted to have some bullets. We can make these two bullets right here. We're just going to come over here now if you again hold your mouse over you'll get a text description. This is the bullet list and the one to the left is the number list, so depending on which one you want. For this instance, we’re going to click on the bullet list. So we already highlighted our text, we clicked on it and now you'll see that our text has bullets on it. Super simple.
Alright, let's say we wanted to have our text centered. We all know that justification provides left justification, center, right and then full. Let's say we wanted our header underlined. You simply just select the text and you click the “U” with the underline and there you go. If you wanted to change the color of the text you highlight the text, you can come up to style, we've got here “Font Family.” If you can actually change the font. So here, let's say we wanted it to be Georgia. If you wanted to change the color, we could click on text color. Let's say we wanted it to be blue or if you have your own hex code, you can put it in there, done. Let's just say we wanted to change the size. I can come in here and alter the size. Alright, we'll go ahead and hit “Update,” we’ll go back over to our store. We’ll hit “Refresh” and now you'll see the text is larger, it’s blue, it’s underlined and it's got all of the changes that we applied to it.
The next thing we’ll take a look at is putting a hyperlink in our text. Let's say we wanted to make this header a hyperlink to another website. We’ll select the text, we’ll come over here to the link icon. If you hold your mouse over it, you'll see it says “Insert Link.” We’ll click on it. We’ll type the link that we want it to go to. If you want to have a hover title you can place that in here. It's already picked up our text “Made in the USA.” If you want to have it open in a new tab, you can just click this toggle switch, click “Done.” Make sure you hit the “Update” button. Now let's go back over to our site and we’ll hit “Refresh” and take a look. You'll see now that when you roll over our text, it is now a hyperlink. If you click on it, it opens a new window with your link.
Another nice feature with the wysiwyg editor is if you prefer to work in code, you can come over here and click on this icon. If you hold your mouse over it will show you “Edit Source Code.” So if you click on it, you now have the option of working directly in your source code. If you like to work with line numbers, you can simply click on this icon and you now have all your line numbers showing. If you want to get rid of them or turn them off, you simply cut the icon again. This icon right here is for wrapping text to see if you wanted to apply a color to a particular word or line of text to insert a picture on here. So if you wanted to go back, here is the “Find and Replace.” If you wanted to search for something, you could just type it here. You could match case or the whole word. You can do “Find/Replace” or “Replace All.” So that's really nice.
Here's another nice option. There's a lot of information on this page. Sometimes it can be distracting, so if you want to enter a full-screen mode, just click on this icon and now this is all you're looking at it, so a lot less distracting and a lot easier to work in. When you're ready to go back to the regular screen, you can just click on that icon again and you're taken back to where you started from. Also, when you're all done with your source code, if you just want to go back to the regular wysiwyg editor, you can just click on this icon and it will bring you back to the original screen you were working on.
We hope you enjoy the new features that the wysiwyg editor brings and we hope it makes your design experience even better than before.