This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to the ninth part of Lesson 11 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to format the text widget.
Let’s look at the demonstration site so that it’s clear what we’re trying to accomplish. What we’re going to have is a block of stuff here that will be essentially contact information. The way I prefer to do that with the Text widget, unless you’re really comfortable just writing your own HTML, is to create a sandbox page.
Create a Sandbox Page
Say Add New and call it Sandbox and then under Visibility let’s make it Private. Now nobody is ever going to see this so it doesn’t matter anymore. Come over here to the Visual view, put the cursor inside the text editor and then start off with your first heading.
Add the HTML Structure for the Text Widget
For example, I could call it Sales Information and Software of Book Orders and then I’d put my phone number in. Now we’re going to do this as a list and I’ll just show you why later. This is going to only be a one elements list and so it will be my phone number. It would be easier for us to make all of our styling of this text the same if they’re all in a list so that’s why we’re going to do it that way.
Add the Headings, List Items and Mailto
Then Technical Support. We’ll go ahead and do the list again. Then Email Sales and Support and we’ll do our list again. This one will be for product information, and then For technical support and then Sign Up to Receive our Newsletter and that’s the end of that list. Then finally US Mail Sales & Support and that’s just going to be a contact address so company name, address. Okay, and so that’s got all of our information in it.
The next thing I want to do is to give these a heading. I’ve selected this and now we select Sales Information and Software of Book Orders and instead of being a paragraph we’re going to make it say a Heading 3 and then a Heading 3 like that. Then for these, what we are going to make these mailto links. Select the for Further product information, we’ll select – it’ll be mailto, colon and then call it support@ byobwebsite.com, and you can do the same thing for the rest of these things, right? Then when somebody presses on this their email client pops up instead.
Add Text Widget
Come and look at it in our HTML view which is the way we’ll work on it now and you can see that it’s all set up. We’ve got our list, our list item, our headings and that kind of stuff. Now we’ll just go ahead and copy all of that, let’s update our page so we don’t lose this. We’ll come over here to Appearance and Widgets and under Sidebar 4 what we will do is we will add our Text widget and paste that information there and hit Save.
Come back here to our page and see what it looks like. So there we have it. We’ve got all of our stuff set up. If we hit Further Product Information, of course the mailto pops up here so you can see that, that works.
That wraps up Part 9 of Lesson 11 of the Build Your Own E-Commerce Website tutorial series, Configure the Text Widget.