Intro: Creating An Eye-Catching Newsletter Opt-In in WordPress | Kara Ferreira | Skillshare

Intro: Creating An Eye-Catching Newsletter Opt-In in WordPress

Kara Ferreira, Websites for Creatives & Coaches

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (25m)
    • 1. Introduction

    • 2. Plugin Overview

    • 3. How to Install WP Bakery

    • 4. How to Install MailChimp for WordPress

    • 5. How to Connect Your MailChimp Account

    • 6. Creating Your Opt-In Using WP Bakery

    • 7. Connecting non-MailChimp Systems

    • 8. Putting It All Together


About This Class

In this short and simple class, I'll dive into how to make customized opt-in forms so that you can get people onto your email lists and start connecting with them! Email marketing is great way to increase your know-trust-like factor, which translates to more sales of your services and products! But, in order to get people onto your lists, you need to catch your attention. In this class I'll show you the easiest way to get your MailChimp list connected to a stylized opt-in form. (Note: to style your form you will need the WP Bakery plugin, which costs $45). 

This is an intro class - so long as you have some basic knowledge of WordPress, you'll do fine!


1. Introduction: Hi there. My name is Keira Ferreira and I am the owner of Willing, Wonderful and Online Designed Shop, mostly four female entrepreneurs and creatives. Although I do work with some men as well in this school share course, What I want to show you how to do is how to create an eye catching often in WordPress. So if you are trying to collect emails for your newsletter list for just for general marketing purposes, you're going to want people to come to your website and find a spot where they're going to put in their email addresses. They're more likely to do that if it's style nicely. And sometimes themes just don't have the tools that you need right away. Um, in depending on what page builder you're using, you might need ah, little bit of help making it look nice. So this is how you can make a eye catching opt in using WP bakery, which is the visual front and builder that I like to use a lot, and I'm just taking over my shoulder and show you some examples of things that you can do using this plug in. Um, so here I am going to make myself a little bit smaller and show you so this is one and this one's actually connecting toe active campaign. So it's using some code from active campaign. But this background and sort of this text and this little sort of semi transparent box that's all created using WP Bakery. There's another example on this website that I helped create or they did create for Casey. So here's example. This one is made with a male chimp Upton. But you'll see here is the background customized fund. So I'm gonna show you how to create this often using a custom background custom funds and really make it look like a spot that your guests they're gonna want to actually give you their email address using. So let's dive into the lessons. 2. Plugin Overview: all right. So, like I said, I'm gonna take you over my shoulder and share with you how to go ahead and do this using my screen. Um, first thing you'll notice this is the back end of wordpress website. This is actually my very own website, and we're gonna start with just one a plug Innis. And now the plug in is actually the technical term for a piece of software that plugs into a larger piece of software and encodes a certain functionality. Basically anything that you want to do on your website at a calendar at on instagram widget . All of these things, there's most likely a plug in for it. Um, basically show you were plug ins if we can get our installed to bring with three very specific organs for this course slogans on the left hand side of your dashboard. So if you go over here and click, you'll be able to see all the plug ins that are installed on your site or in this case on my site. There are listed here. Um, and it's a few things. You don't want to get too crazy with these. They do. They can sit on your side. If you have too many of them, they can compromise your site security, let them get out of date. But for the purpose of this course, I was going to show you how to go ahead and add some new ones. Um, you might have a paid plug in that you purchase and download, in which case you'll have to upload it. But there are many free plug ins that live just right in here. One thing you want to always look out for is the number of installations this will share with you. Basically, help you have a plug in is, um, which basically tends to be a good bedding measure. If a lot of people are using it, it's probably high quality. Good plug in. You also want to check to see when it was last updated. This basically just means that whoever has coated the software for this plug in is still working on it. Um, they're still making sure that is up to date, that it's functioning well. So you want to make sure that usually I would say within the last month, two months might be acceptable, but you don't want to go too much longer than that. And the last thing is, you want to make sure it's compatible with your version of WordPress. So any public want to install those are the things I would check out. That's why they're all right here. Enlisted. But let's go ahead and dive into the three plug ins will be using to create our class project, which is your beautifully designed page custom made without any code and with your often forms. 3. How to Install WP Bakery: Okay, so now we're going to install WP Bakery, which is the paid plug in that we're going to be using the only paid one that we're going to install. But it is sort of the big showpiece. There's a few ways you can install it. The first is to go ahead to WP bakery dot com and to download it by over $45. Um, that's great. Then you can add it into any website, any pre existing website. Most contemporary things will be compatible. The other thing you can do is download a theme that comes with it and one that I recommend is creative. Oh, has a lot of great demo content already. And you might be thinking, Wait, the entire point of this is to make my own custom site. Why would I want to start with the demo? Well, I can get you there faster. You can start with the demo and have it look pretty different pretty fast. For instance, I will find the agency theme. Is that one second Crete at TiVo Agency import. Here we go. So creative agency. So, for instance, for my own website, this is the exact template that I used. So you see this here? All of this is made. It will be bakery. So this is their website. This is a nice feature that is, from it's made MPP Bakery, but it's pre encoded by the template. So, for instance, though if you go look at my website see, it looks a little different, right? So I gave it my own personal style and I did it all using Belly P bakery without any code. See, this is eloquently different. See, this is similar, but changed a bit. So you know, if you want to start with a pre made template, create evil, has some great ones. If you want to start quickly free, then don't worry about it. But if you purchase a Korea TiVo theme, then it will come with all of these different demos, all these different templates and will come with Filippi Bakery, so either way by the theme and sell the theme or go ahead, purchased the plug in, it'll download files to your computer, and then all you need to do is go back to your plug ins and new, and we're gonna upload the plug in choose file. So gonna go to wherever you're file is saved. Mine is right here. Click on it and install it. You may need to unzip the file first. Otherwise, go ahead. Here it is, Um, and you install it. I can't do it. Once already installed on my computer on my things will work. But once you install a, it should activate. And then when you go to your plug ins, no show up in here and then you go to settings. Well, this is all over in here itself said, If it's not an activated form yet, it also tell you activate it right here. And then you'll just log into the account that you just created here and that will then set up that will be Bakery 40 on your computer, and we'll dive in how to use that little bit. We're first going to go ahead and download male temper WordPress and ice. Graham 4. How to Install MailChimp for WordPress: So next is Milton for WordPress. You can see I have it installed already. So it's right here. It just come pre installed with a lot of themes. But if you don't already have it, you're gonna goto add new male chimp for WordPress and it's a free plug ins. It'll show up right here taking second. Here we go. So mind says, Active, If I didn't already have it, then it would have an install now you wouldn't. Still now and then activated. Once is activated, you'll see it bold in here and it's gonna show up. It's actually my little face of here. Let's hope in your sidebar Here, come here. And so this is where you're going to set it up. You already have your mail chip accounts gonna go ahead and go to it and find your A P I key. I'm gonna jump right back in and show you how to do that in a second. So stay tuned 5. How to Connect Your MailChimp Account: All right, So now I'm gonna show you how to connect your mail. Jim, this is sort of what shows up for me. I don't use this account very often. I do more for my health coaching practice than for this, but this might show for you. It might not. The point is we get our mail, chimp A P I. And so here. You just look, here is the easiest thing to dio it along. You right into your account. If you're logged in and I'll bring you right to the thing. So here you'll see you're FBI keys. All you need to do is copy this. All right, It's a little bit long Queue up with direct. All right? Save changes. No. Clear during this along with me. All right, so now it's here. Um, and I only have one list in here. You say? Actually, haven't ever had enough inform on this website before. Um, you might have a few different lists, but this will basically help you to create forms. So here we go newsletter Upton at the title. If you're multiple lists like the one that you want to use, a new form form fields All right, So this is just email address. I want first name have to form. No. Sorry. That was the wrong thing to collect. Excited there, last name, but before him. You see, this gives you sort of everything in here. I don't want the placeholder to show your email address so important that name email, and I'm going to go ahead and delete this. All right, So now I don't have the placeholder here. All right, Now we have a form. We're sure you had put this into the page later, but this is all set up now. 6. Creating Your Opt-In Using WP Bakery: okay, We made it. We're at the final part. We're gonna learn how to make our newsletter opt in. So we're gonna making opt ins that our custom I catching and that people want to use. So this is a client site, for instance. You can see hers has his background here. Sure. Another one. These are all minutes. Bakery. The previous one was actually an active campaign. Um, so if another Sierra, um, I can show you how to do that. This one is male chimp. So let's go ahead and will add one to your page and I'll show you how to do that. I took out of this. We've got a season that so let's put one. I'm gonna go back to the first page. We were adding together the blank page. It's to share this. So open up whatever page you want your your newsletter form to beyond school share at a Filippi bakery visual composer. We're gonna add a wrote the bottom wherever you want on the page. A lot of times the bottoms. Nice. So ahead at a row, I'm gonna go ahead and add a background to the row, give a little bit of flavor on my pick. I ran an image again. I think this one I'm gonna do contain I'm gonna do 2015% and 15% save changes. All right, well, that so contain is the issue there cover. Perfect. All right, So sometimes if it's not showing up the way you want it, Teoh, go back in and just make sure it's cover or contain. Sometimes one will work better than the other. I want a space between the section in the previous ones. I'm gonna go ahead and add one below I need to put in a new row. If something's not going where you want it to go, sometimes it's because it has to be in a row of its own. So now it's in a row of its own. I'm gonna click on it, Dragon die of empty space here. All right, So what? My newsletter. Opt in to be in the middle of this image here. Right? Some to go ahead, and I'm going to add a text block. And I don't want to go all the way to the ends here, so I'm gonna add a border, do in pixels. You gotta play out of it again. Sometimes to get the sizing right. All right, that moves it in a bit. So we actually need a lot more pixels. I mean, this was percentage. If you need to use a lot of pixels of problemas, it'll look weird on mobile. All right, that's better. So percentages are better, because I will translate to both mobile and desktop. All right, so you're a textbook. I'm gonna give us a background. She's Wait, wait. I'm gonna make a little bit transparent so that we can see the background through it. So now give me this. And here, So I don't like how much weight there is over here. So how I'm gonna fix this is actually going to row? No, but that to this, I'm going to go 1/4 plus 2/4 plus 1/4 update. But all in here, I'm gonna put it all in the middle. All right? So now it's not taking up all the space. So here I am, in a rate sign up free gift. You'll obviously putting better copied on that, and we're going to center. Everything all right? So there's a lot of white space 11 below it. So going to go ahead and hit 10%. 10%. This 20% used to go in here. That's why sitting lopsided to make sure everything's lined up for you as well. All right, so there is that. And now we need the actual sign up and how we're gonna do that ad. So depending on your system, you might have mail chimp for WordPress in here. I clearly do not. That's okay. What we're gonna dio is go grab the code. So we're gonna hit up here. We're in. Exit out. We're gonna go grab the code swinging on the dashboard. You put my face other way. Milton for WordPress form, this is the short code. Grab the short coat and go back to that page at the bakery, remember? All right, go back. Thanks. Block visual. Me center. All right to see it knows what is So this is looking a bit wonky. Styled has a nice background, but it's not looking great so far. So what we're gonna do is just keep on playing with it. We're gonna come back in. That's center, which is fine. Maybe we're gonna write a line. All of this wait, Control Z, if you ever delete everything, Control Z Um all right, if you had a lot more test Texas with better dude, you ju ju ju ju ju And then we're gonna go ahead and diminish the amount of space. Alright? Looking better around eight, even five foot size. All right, so now this is looking pretty good. You can go ahead if you want. Change the transparency. Change things obviously have better copy. You can change. Um, the alignment of this and the militant for wordpress settings if you need to. But basically, this is how you're creating a better looking pop up in the next section will show you how to replicate this so you can add up to more pages. Um, obviously not this exact one. I'm gonna show you on a better created one. This I just wanted to quickly to show you how to go ahead and do it well and took the formatting and make it into a template. So here we go. 7. Connecting non-MailChimp Systems : Okay, So very first thing we're gonna dio is share how to add the form if you do not have Milton . So this is when it's already made with active campaign. But you grab the code from infusion soft or anything else the same way we go to edit with WP Bakery, Wait for it to load. All right, this is set up the same way in the Milton one if you watched it. If not, basically you're going to create a row, go ahead at the background, play with it. Theme defaults might work. You might want to do contain. So that does in the background. In this case, it really did not work, see, disappear completely. So go back to being defaults. But if it's not displaying the image the way you want it to before you go ahead and crop the image, play around with those options there, we're gonna add padding above and below the row here only have 3%. This is create space from the bottom of the website, so don't worry about that, but you're gonna worry about this top and bottom padding. Um, if you add more here, you'll see it's gonna grow. More of us is showing now on a side of back to three. Next step, you're going to create a text block so you'll add a text block in here. He had a custom heading and a text block. That doesn't matter as much. What you will see is that created a background. So that's what's great in this White Square. So basically, you're gonna go inside and you're gonna add a background to the row. Not the right to the column. Not the role likely between before to the column. I set a little bit transparent. I don't have any transparency. You'll see. You'll see the hearts behind it. That's an option. We're back in a little transparency in this one. So again, that's to the column, not the row in the background. And then you're to grab code from active campaign for your form, and you're gonna add that in right here, and when you're gonna do is when you look at the code, you don't want to have a background or you want to be white. But if you see background, which I've already changed here, background. So you make sure backgrounds white here, image none No repeat. Sometimes you have background hit, hit. None. So that's something you might want to do if you have code from infusion soft another one. But basically just adding the code here and a lot of these priests that this is styled an active campaign. Not here, um, is added in. And there you go. Now it's showing if you have too much or too little space around it, we're gonna do again design options and you can add 2%. She present 2% but 2%. I'll give you more white space around the item. Yeah, but very have it. That's how you would add a non male chimp form to your newsletter often. Here we go. 8. Putting It All Together: Yeah, you did it. So hopefully by the end of this, you've created an opt in. That sort of reflects your brand personality that has your branding a nice color background has your custom funds, and that will enable you to sort of Hopefully the goal is as long as you're sort of often. Gift is enticing enough. Capture more emails. If you had some issues getting your, um, newsletter delivery mechanism, um, connected to the opt in itself. Um, please feel free to email me. That's Keira Koray at, well, wonderful dot com or to comment and post your questions here. But I do actually have a free guy. And I had a pack mail chimp so I could help you with that. Um, And as you may have figured out as you're in here, some of your options might not look as clean as examples I showed you in the beginning. That's because sometimes you do need code tweak how your form looks and, um, al Kheir another video on that. So stay tuned. But for now, hopefully you haven't often. That is looking better than what you had before. And you could start capturing those emails. All right, Thanks.