0:00 Hello! I'm going to walk you through how to do some troubleshooting in a WYSIWYG text editor, as well as go over some WYSIWYG text editor best practices.
0:09 The WYSIWYG is a nickname for this text editor, where you get this full suite of options for text styling. The first time you log in to WordPress, your WYSIWYG is going to look like this, where all of your options are, uh, hidden.
0:25 You'll want to click this toolbar toggle button to toggle all of them on- so you have access to your paragraph drop-down and your format drop-down.
0:34 Once you've got this set up, uh, I'm going to show you how to copy and paste correctly into a WYSIWYG.
0:41 Sometimes when you copy text, uh, you're accidentally copying over- some unwanted HTML into the WYSIWYG text editor. So I will show you, I'm going to remove all of this and paste it in incorrectly.
0:55 If you are a keyboard shortcut person, this would be command V to paste in. Uh, uhh, uhh, um, and this might look okay at first glance.
1:04 Uh, it might not look like there's anything wrong. However, if we toggle this to our text side, you'll notice there's, uh, this thing that's a span style font weight 400. These are elements within the WYSIWYG that we don't actually want there because they can sometimes override the styles that we have
1:22 in place within the WYSIWYG itself. So, in order to paste correctly, again, if you're a keyboard shortcut person, this will be Command-Shift-V.
1:33 You could also click this button that says Paste as Text before you paste. That will do that, or you can go to Edit, Paste as Text.
1:42 All of these will do the same thing. However, if you do what I just did and you paste regularly on accident.
1:49 You can also highlight all of your text and click this eraser icon that says Clear Formatting. So watch what happens in our preview when I click this.
2:00 Not much. Uh, if I toggle this over to the text side, though, you'll notice that our spans are all gone and we- We just have some plain text with the exception of our H2, our heading two, that's still been styled in here.
2:13 So I can leave this in place and the- the correct way to enter this content into style it, according to, uh, the styles that are in our format dropdown, would be two- do highlight this text.
2:24 We'll come to our format dropdown and select intro text so you can see now I've got my intro text style applied and it matches the style that I've got in this example down here.
2:33 Down in my primary button, I can add a link and if I add a- a placeholder link here, you'll notice this now becomes a link and I can add my button or secondary button class.
2:45 And now we've got a button in our preview. Um, and the other thing you can do is assign pre-title text.
2:52 So, in this wizzy wig down here we'll we've got this entered correctly. You'll notice, uh, in our front end preview here, we've got optional pre-title as pre-title text.
3:03 But if you look in the wizzy wig, this is actually set as a part of the heading too. Um, so to do that, you'll notice up here it's unstyled.
3:10 You'll enter this as a part of your heading, so your pre-title will be a part of the heading that comes after it.
3:16 And then you can highlight it, come to your formats drop down, and select the pre-title class. Uh, and that's really all there is to enter in content in the wizzy wig.
3:26 Most of the time, if you're entering content and it looks weird, if the text size is different or doesn't match, uh, or if there's another color to the text, chances are you just forgot to clear formatting when you were entering copy.
3:39 So again, the easiest way to do that is just to select all of your- text and click clear formatting and then go through the steps that I just showed you to, uh, style your text with the formats drop down and the paragraph drop down.