 All right, wonderful. We are ready to start. Good day, everyone, and as you know, the topic for today is a call to action. So, when visitors come to your site, they usually want them to do something, right? You want them to sign up for a newsletter, or you want them to buy a product, or you want them to engage with more content on your site, or you maybe would like them to join an event, whatever it may be. Now, in these situations, you have to prompt a response from a visitor. And of course, the best way to do that is with a call to action. So what is a call to action? A call to action is an element on your site that asks people to take specific action. And there's usually a clickable button or a sign up section involved. And as you can see in this example, it says more info. So I think one of the most important things to remember is that with a call to action, you want to take people deeper into your site, right? Usually when somebody opens a site, they might leave the site really quickly. So of course, your aim is to get people to read more of your content or to delve deeper into your site. So I thought, let's talk about a few tips before I show you an example website of a company that I think have used call to actions really well. And then I'm also going to show you some demos. All right, so a few tips to keep in mind. Number one, make your call to action stand out. A call to action is of course about using persuasive language, but it's also about good design. So you want your call to action to pop and it needs to catch someone's eye. Next is you want to create a sense of urgency. So depending on the context, especially when you're selling something, you want to persuade visitors to realize that they might miss out on something if they don't respond now or book now or shop now. And coupled with that is using action words, verbs, doing words, words such as download, shop, subscribe, et cetera. And then the last thing I wanted to mention was try using the first person. It makes it personal as if the reader is being spoken to directly. So for example, instead of using book ticket, use something like book my ticket. And as we'll see in this example, plan your adventure. All right, so the first example that I wanted to show you was this website called it's sliderrobes.co.uk. If I look at this website, I think they have used call to actions really effectively. They've used it throughout this site and Laura and I actually spoke about it at the start, but they've added the call to actions in their navigation menu to make it more prominent as well. So there you'll see design appointment, request brochure and then discover bedrooms. And yeah, actually in this slider, if you keep going, you've got different call to actions. Now, if we scroll through the homepage, you will notice yet the bottom, you can also click on book design appointment or request brochure, the slider rose experience, sign up for inspiration, sign up. And even if you now go up again and let's say for example, you click on home office and you scroll down, you will see this call to action being repeated as well. So I definitely think their marketing team got involved here and they've used it really well. So for example, create your mood board, book design appointment. Yeah, so I think this is a prime example. And then let's also go to wordpress.org. I think wordpress.org also uses a call to action quite well with the blue background and the white text here, get wordpress when you go to the homepage, get wordpress, explore the wordpress editor, find inspiration. And then these are also called to actions. If you think about it, learn with wordpress, find support, dig into code, et cetera. All right, so we've looked at some nice examples. Let's get into how to create things. So I'm gonna make my way to my test website and the first example that I want to show you is this one. This is a call to action I created in the block editor, no plugins, let's click on preview. All right, so I'm going to show you how I created this call to action where I actually want somebody to subscribe to my newsletter. And of course to subscribe to my newsletter, they've got to share their email address. So this is a different type of call to action and I actually used a forms plugin to do that. So let me show you how I did that. Okay, so I'm going to go back to my pages. I'm gonna say add new and I'm going to call this call to action one. All right, so the first thing we are going to add is we are gonna add a columns block and we're gonna select two equal columns. Then I'll open up my list view. I will select the column, the parent block and I will select full width. All right, now that I've got my full width, I'm gonna start adding content in the left column. All right, so the first thing I want to add is I want to add a heading and I said we make your dreams come true. Exclamation mark, let's make that bold. Let's open our sidebar settings because I actually want to change the size as well. So let's make that 70 pixels, okay. And then below that I'm gonna add some text. So let's just copy from here to save time because we're kind of recreating this, right? So I'm gonna copy that text and I'm gonna paste the text there. All right, and now below that we want to add our forms plugins. So let me just talk about that for a moment. I'm gonna publish this page for now and if we make our way to plugins and we say add new, you can type in forms and there are many different form plugins to use. So there's WP forms, contact form seven, ninja forms, et cetera. So you can use whichever one you prefer. Now I've used WP forms for my first example. Now you will notice it says there's newsletter signup form. So if you click on add new, you can start a blank form. So let's say blank form, for example. And now you can just add the fields that you would want in your form from a number, name, email, even capture, all right? Or that actually already provided you with a template newsletter signup form. So I'm gonna say use this template. It's got the name, first name, last name, email and then submit button. So now we can say save. Now we can make our way back to our page that we just started creating, right? So now we know we've got our template. So let's open it up here. Now before we add that, we want to say subscribe to our newsletter. Okay, so I'm gonna put that in capital letters cause I wanted to stand out. I'm gonna make it bold and let's go to our sideboard settings and change it to 30 pixels. All right, and now below that, we are gonna add our form. And I'm gonna type in WP forms. And now you can select the one that we've just created. So newsletter signup form. And immersive, I saw your question. Yes, the recording of the session will be available at the end. All right, so now we've added subscribe to our newsletter. We've added our form. And at the bottom, we want to add, let's just look at our example again. We wanna add the social icons. Okay, so I'm gonna say dash social icons. All right, and now if you click on the insertter, we can add them. Let's say we want Twitter. And then in this, in the blog toolbar, ensure that you select the parent block again. We can add Facebook, parent block again, and Instagram. All right, let's just add into so we can see a bit better. All right, now I'm gonna add the URL to your social media platform there. You'll notice it actually changes color when you add your URL. Okay, the next thing I wanna do, I'm gonna select that, all right? And let's say we want this a bit larger. We want this to be large. And now we've got our left column, and I'm happy with that. Now let's go ahead and add our image in the right column. So I'm gonna add, click on the insertter there, click on image, and I've already uploaded my image. So I'm gonna click on the media library, and I'm going to select this image. Okay, now if you look at my example, you will notice that I've actually added a little border around. And the other thing you will notice is that the image is in the middle. Let me show you how I did that. So first off, you select your image block or your image, and then there where it says border, you can say, let's say you want a one pixel border or a two pixel border. And in my case, I added a 10 pixel border. So now you've got that nice black border around there. Now, how do we change the position of the image to the middle? Well, the first thing you've gotta do is you've gotta select the right column in your list view. So let's select the right column, and now you will notice, if you click on the block two, what it says, change vertical alignment. And now we can say, align it to middle. And there it pops it to the middle. So now let's close this, and there we go. So the only thing that we have left is to change the background color of our columns block. So let's again, select the parent block, select the columns block, open our sideboard settings, click on background. And when you click on here, you can actually set your own custom color if you don't want to use a default color. And then you can actually add a hex code. So what I did is I actually, as you will notice here is the Coliseum. I actually Googled, what is the color of the Coliseum? And I Googled for a hex code that would kind of a color that would go with the Coliseum. So I got a hex code for that. So I'm going to remove that and I'm going to add the hex code, which is D9, D8, C8. And there I can also copy the hex code. So I'm just copy this because I want to use it again. So I've changed the background color of the columns block. But now I also want to change the, I want to change the color of my social icons. So again, let's make sure, let's just remove, okay, let's just make sure we select the parent block. So I've selected the parent block. And in our sideboard settings, you can change the icon color and the icon background. So for the icon color, I'm going to add a custom color, the same as the background of the columns block. And of, remember, I already copied the hex code. So I'm just going to remove that and paste the hex code there. And now you will notice it's got the same color, the icon color. And then for the icon background, I'm going to select black and voila, we are done. We can just remove that. And now let's update and then preview in a new tab. And there we have, so one thing that you can still do as well, if you wanted to, okay, so let's go back and select the columns block and add a bit more space around the content. And we do that using padding. So let's just go to dimensions and let's add some more padding, let's say six. Update and now we can preview it again. And you will notice, we actually have some more space around that content. Any questions about this? We can even see what this looks like on the front end and in mobile. So let's click on inspect and now we can actually see what this looks like on mobile as well. All right, so let me show you how I created a different call to action using the cover block. All right, so let's go to call to action two. Click on preview and let's see what I did here. So yeah, I've actually used a cover block and yeah, I'm originally from South Africa. So we've got a lot of wildlife parks in South Africa and rhinos are very dear to me. And yeah, I decided to create this one because I know there's, yeah, rhinos need a lot of support and I thought this is a good example where you're actually asking people to donate to the cause. All right, so let me show you how I did this using the cover block. All right, so let's update year. Let's make our way back to pages, click on add new. Let's call this call to action two. All right, so the first thing we're gonna start doing is we're gonna add a cover block. Now the wonderful thing about the cover block is that you can add an overlay or you can add text over images or videos. And that's what makes the cover block so powerful. All right, so let's first select our image and there's the rhino. Again, select the parent block and I'm gonna change the alignment to full width. I'm also gonna change the content position. So next to that, I'm gonna change the content position, top lift. All right, so I've changed the text to top lift, right? And the next thing I'm going to select is toggle full height. Okay, and now we can start adding our content. So first of all, I'm gonna say save the rhino and then I'm gonna say bold and of course I want to make the text larger. So let's take, oh, let's turn that to pixels and make this 80 pixels. All right, nice and large and easy to see. Okay, and then below that, we are going to add our text. So again, let's just copy this text, all right. But now you will notice that it covers the whole, it covers the entire cover block, but that's not what we want. We want the text to be on the left, especially thinking about like seeing this page or seeing this on a mobile device. So let me just click undo. To do that, I'm actually gonna add a columns block and I'm going to select three equal columns. And now I'm gonna add the content in a left column and that will ensure that my content stays on the left. And then of course, below that, we are going to add our buttons block. Okay, so before I work on my buttons block, let's also make this text larger. I'm gonna select this text and let's change this to let's say 27 pixels. Okay, and now for our buttons block, we want people to donate, right? So I'm using this verb action word donate and I'm going to change the background color of my buttons block to white and I'm gonna change the text to black. Let's make that bold as well and let's change the size of our buttons block to large as well. And now, if we look at the radius, we can, let's say we say 10 pixels radius, it just removes those corners. So it's not a proper rectangle or we can say a hundred to give it that rounded effect. So I'm gonna keep it at a hundred pixels. There's two more things that I wanna do. Okay, let's just make sure that's to the left. There's actually three more things that I wanna do. As you will notice at the moment, there's quite a lot of space here between save the rhino and the text. So what I'm gonna do is I'm going to select this. I'm gonna select the paragraph block and the columns block and I'm going to stack them together. I'm gonna group them and stack them together. Okay, now I'm gonna select my cover block and I'm going to change the opacity, the overlay opacity to 20. At the moment it's 50 and you can see it's very dark. So let's just change that to 20. And now you can also see the rhino here as well. We can also add some padding to add some more space. And then lastly, we're gonna change the position of the focal point picker. And that is specifically for mobile devices. So I'm gonna drag it to the left a bit just to make sure that the text is not directly over the rhino. So I've moved my focal point picker to the left so that the text is also a bit more to the left. All right, so let's hit publish and let's see if we're happy with what this looks like at the moment. Yeah, there we go. And now we can preview in a new tab. And there we have our call to action that I've created using a cover block. Okay, so the way I reduced the space was I stacked them together. But of course, you can also use the block spacing. If two blocks are grouped together, you can use the block spacing feature below dimensions as well. Okay, so let's see what this looks like when I click on inspect and I view it from a mobile device. So let's see. So as you will notice, I've moved the focal point picker a bit to the left. So now you've got save the rhino and the text is also more to the left. So yeah, I think that looks really nice on mobile. Now, there was a question about overlay. If I go back here and I select my cover block and I click on the settings, Kimmy, you will notice that if you click on overlay, you can add a different color overlay. And this relates to the overlay on my image. So at the moment it's black, but you can change it to white or green or whatever it may be. And in the sidebar settings as well, you will find the focal point picker that we just looked at. And of course, when you select a block, you can use the block toolbar to change the alignment. So I've answered all those questions. Again, any questions or suggestions about this? All right. Now, of course, I've created all of these myself using the block editor, but they are easy ways to find patterns to modify as well. Now, I'm gonna show you in the next two examples how I've actually used patterns and then changed it to something that I like or that suits my needs. Let me show you the example of my first pattern. So let's go to call to action. And this is the first one that I'm gonna show you. So I can create this in two ticks. Let me show you how I did that. Okay, I'm gonna, of course, create a new page. Let's call this pattern one. And now we're gonna make our way to the WordPress website, the WordPress.org website. And if you hover over download and extend, you can click on patterns. And now where it says search patterns, I'm gonna type in call to action. And we can actually find patterns that are created as a call to action. And now there's many patterns to scroll through. And of course, when you add these to your website, you can just modify them as you please. All right, so I think I found mine on page two. Yes, there we go. So here's the one I wanted, image and call to action. So I'm gonna click on copy, make my way back to my site, and then click on paste. Okay, so here we have a pattern which we can now modify and change as we please. All right, so the first thing I'm going to do is I'm going to select this image and I'm gonna replace it with my own image from my media library. Okay. So now I'm also going to select the left column. I'm gonna select the left column and then I'm going to push it to the right. And I'm trying to, let me just go there. Just wanna copy that text. So it was, well, I can just type that in, hey. Okay, so instead of that, I'm gonna say innovator, entrepreneur and adventure seeker. And the last thing I wanna do is I'm gonna select my button and select outline and there we go. So I have copied a pattern and in a minute or two, I've changed it to meet my own requirements. So yeah, there's many options, many patterns that you can search for and use and modify. Let me show you the second one that I created. Okay, again on the animal theme. So the one thing that I wanted to show you first is, I'm using this social icon block again. So instead of recreating it, let's be smart and use reusable blocks. Now, usually when you click on, when you click on something, right? When you click on a block, you can create a reusable block. So if you click on the three vertical dots, you can say create reusable block. So let's do that and let's call it social icons two. Okay, so I'm gonna save that now and let's recreate this using a pattern. So I'm gonna leave there, create a new page and let's call this pattern two and then make our way back to the WordPress.org website to the patterns directory and scroll through some more patterns. And I think this one I found on page three. Yes, there we go. So here's the pattern that I want. So I'm gonna click on copy. Make my way back and again, I'm just going to paste. So there is the pattern. Now, you'll see this is just dummy text. It says Facebook, Instagram, YouTube. So let's start there. Let's remove that and add our reusable block. Okay, so to add a reusable block, I'm gonna click on the insert top left. Now here you can add blocks, patterns and reusable blocks. Now you can find some patterns here as well but I went to the pattern directory. And so these patterns are only patterns that come with your theme. And of course in the pattern directory, you can search for something like call to action. And if you click on reusable block, you will find all the blocks that you have created as reusable blocks. And I'm going to now select the one that I've already created to save us some time. Okay, great. So I've added that. Now let's change the image. Replace this with the giraffe. Now if you were wondering how they got this really cool effect, you use the radius to do that. So let me show you. If you select the image and open the sidebar settings, you will notice they have changed the radius top left to 500 that makes it round and bottom left that makes it round. So you can play with the radius if you want to change the way your image appears. Okay, now we can start changing the color and the text. So 20 years of coding experience, now we're gonna say 20 years of Safari experience and we code your future. So now we'll say we plan your adventure. Okay, and now we're gonna change the color of the text. Now I also looked up a hex code, a color of a giraffe and I found a color that works for me. So I'm gonna change the color to a custom color and this time it's gonna be C9, 7F, 4E. Great, and now I've changed the color and now you can just copy the hex code again, copy, go to your adventure and then change it there, click on custom, remove the hex code and paste the other hex code. Okay, let's just remove that gap. Now we can still change the buttons block because oops, I don't know what happened there. Okay, so this buttons block, if you look at background color, at the moment it's got a gradient but I want a solid color, I want it to be black. I also want read more to be bold and I wanna change the size to medium and there we go. We have used the pattern and changed it to what we want. John was asking about, can you make a block that you created into a pattern and save it onto your computer as a pattern? Absolutely, so if you look at this one that I've just created, right? Call to action two, no, sorry, that was pattern two. If you open your list view, you can actually select this entire parent block. Remember all of this is within one block. Now you can click on the three vertical dots and you can create a reusable block. Create and let's call this giraffe and click save. Now it looks a bit weird now because you saved it as a reusable block but don't fret, if you preview it on the front it will still look like it's supposed to. But now, if I go to a page and I create a new page, new page and then I add it, I can click on the insert at the top left, go to reusable blocks and there's the giraffe one and I can actually, I've saved it in my own pattern or my own reusable block and I can add it there. Now let's say you want this to be different than the previous one. You can click on the three vertical dots and now say convert to regular blocks because if you update it here, it will be updated everywhere else you've used it. So you don't want that. If you just want it to change here, you say convert to regular blocks and now you can change it as you please here. Okay, we've got time for one more. Is that all good? Okay, cool. So now I want to show you this example, flooring solutions. So I'm going to show you how I created this but then also how to add a link to actually make an appointment. So let's first create this. Okay, let's say floors. Now the first thing to guess that the first thing we're going to add is a columns block. Okay, we're going to select two equal columns. Again, we're going to make sure we select the parent block. We're going to change it to full width. And then in the left column, we are going to say at home design visit. Okay, let me just go back to the other one that I can just copy the text, right? Just to save some time. Okay, let's copy that. Copy that text. Okay, so at home visit, let's copy the text and now let's change that. Make it bold. Open our sidewall settings. Let's say 40 pixels. All right. And then below that, we are going to add a buttons block and we are going to say book my appointment. Let's make it more personal. We use first person. And then I'm going to select the outline style. And then on the right side, I'm going to add an image from my media library. And this is what I wanted to show you now using your radius. I'm going to change the way this image appears by changing the radius. So when you click on unlink radius here on the right, you can say I want the top right to be 100 and I want the bottom left to be 100. And now we change the way it appears and I kind of like that. Okay, let's just make sure when we select the parent block, we also add some more padding. So this time I'm going to say I want to set a custom. I'm going to change the units of measurement they'd say to rim and let's say 5.5. And you'll notice that we added some more space, some more padding around the text. All right, is this medium? Yeah, okay. So the next thing that you want to do and this is a question somebody else asked about block spacing. Look at the, at the moment, you'll see there's not a lot of space between these two columns. But if you select your columns block, right? And you go to dimensions and you click on the three vertical dots, you can actually open, you can click on block spacing. And now you can add some more space between your two columns. And there you can add some more space using block spacing. Okay, let's publish that. And now what we're going to do is we are going to use the duplicate option. So we're going to select this columns block, we're going to click on the three vertical dots and duplicate. All right, so now we have the same, the same columns block that we can just modify now. So let's first replace this image. Okay, so replace that image. It will have the same style though. And to move that image to the other side, we first have to open our list view again, select the right column and then ship that column to the left. All right. And this was actually called testimonials. Test the testimonials and the buttons block was actually learn more. Okay, there we go. But now I want to show you, if you click on book my appointment, where do you want visitors to go? Are we going to use a forms plugin for that again? Okay, so if we make our way back to plugins, you can look up a new plugins form. This time I'm going to use ninja forms. So it works the same as most others. So I'm going to say add new and I'm going to say blank form. And I'm going to say, okay, we want to make people to book an appointment. So let's first let them choose, I'm going to use the check box list and say, if you click here, you'll notice that you can edit it. Let's say people can say, I want you to come to my home at home or no, I actually want it to be online. These are the two options and we just remove that and then done. And if you click on the plus, we can add some other fields now. So let's say we want people to share their first name, last name, address, city, you'll notice it just adds it when you click on it. Zip code that add zip code and then email. Okay, so now we've added all the fields that we wanted. Okay, now let's say done, publish, and we can call this book now and then publish it. Okay, so now we're going to make our way back to pages and I've created a page called free design appointment because this is the page that I want people to go to. So for now for this example, I'm just going to remove this. Okay, so my heading is free design or my page title is free design appointment, request your free no obligation design appointment with one of our talented local designers either at home or online via video chat. Now below that I'm going to add my form. So I'm going to type in ninja, ninja form and you can select the form that we just created. It was book now. So now if somebody comes to this page, they can say, oh, I want at home to visit and they can add their details and the company can contact them or you can contact them. So now I'm going to update this. I'm going to click on preview because I want to grab this URL. I'm going to grab that URL because that is the home of this page. I'm going to grab that copy and then we are back on this page. Now this is the book my appointment button, right? So I'm going to select that, click on link and now paste that URL there because that's where I want people to go to if they click on book my appointment, right? Great. So now let's preview this page. Okay, so this might just be an element on a page, right? And people might say, okay, book my appointment. I want to book an appointment. And if they click on that, it will take them to this page where they can say, okay, I'm going to fill in all my details as I want them to contact me. All right, so that's all we have time for today. So...