‫In this lecture of the course, we will be creating another static page that is going to be the advertise
‫page.
‫So as in the previous lecture, we created our about page and we added a call to action that says click
‫here to advertise on our blog website which takes the person to the advertise page.
‫Now let's suppose if you want to design it, then how you can design it.
‫Now, the reason why I am teaching you more static pages that are not necessary in this blog website
‫is because I want you to actually, uh, practice the Gutenberg that you have been doing from the far
‫the home page and the about page.
‫And if you also practice this for the advertise page, it's going to really help you in the future if
‫you get any of the client and whose requirements are actually based on the Gutenberg, then you should
‫know how you can design, uh, some of the, uh, sections based on that.
‫So let's just go ahead and let's get started.
‫Now, if you are building a blog website and you are just starting out, you probably do not need this
‫advertise.
‫And the reason for that is because, um, this advertise is for those particular big blog websites,
‫uh, that usually get so much of the traffic.
‫Then you can add this, advertise over there so that people can specifically advertise on your website.
‫Uh, other than that, if you are getting like 1000 views per day, then you can, uh, use any other
‫options, like there is a service called Google AdSense.
‫All right.
‫You can apply there.
‫You can apply to Google AdSense.
‫And uh, through your website, Google AdSense is going to verify your profile, verify your website.
‫Like if you were getting traffic, then Google is going to place the ads on your website and you're
‫going to get paid based on those ads, like if anyone is going to click on it.
‫So that's how you can make money if you are building a blog website now, Google AdSense is kind of
‫like a middleman, all right?
‫Like Google AdSense is a middleman.
‫There is a person like a company who want to advertise on different websites.
‫Then that particular company is going to reach out to the Google and tell the Google that, okay, this
‫is my banner, this is my ad, and I want you to place it on different website.
‫Then the site owners will be using the Google service to place, uh, the other brand's ads on their
‫website.
‫So this is how the cycle actually works.
‫Google AdSense is the middleman Google takes the payment from for the from the companies who want to
‫advertise.
‫Google takes some of the commission, and then Google gives you the money for all of the clicks that
‫you are going to generate from your particular blog.
‫So this is how you can make money.
‫If you want to learn more about the Google AdSense, you can click on this link and you can check out
‫how people how much people are actually making.
‫You can see this how AdSense works.
‫It explains everything, like how you are going to create an ad and everything.
‫And you can also go ahead, go to YouTube and search for uh, just 2 or 3 videos like how Google AdSense
‫work, Google AdSense.
‫All right.
‫And you're going to understand like how it works and how you can integrate that on your website.
‫But let's suppose that if you are a very big blog and you do not want to rely on Google AdSense, and
‫you say that, okay, I am handling everything, I am allowing my users to advertise on my website.
‫Like let's suppose that you have become a brand, which should be your goal if you are building a blog
‫website, trust me, it works and you can make a hell lot of money if you are going to be advertising
‫through your own self rather than relying on Google.
‫So, uh, I hope if you want to start a blogging career, you should get to that stage.
‫But let's suppose that if you have a very big blog and now you want to advertise, then how you can
‫implement something like that.
‫So we're going to be creating a basic page for the advertise using the Gutenberg.
‫Now remember this is also a static page.
‫And if you want you can also use Elementor to design this page.
‫Let's just go ahead and let's get started.
‫So I'm going to be clicking on edit page.
‫Now once I am in here first of all we need to click uh create a group.
‫So I'll be clicking on this plus.
‫And then I will go down and I will select a group.
‫Now once this is added I will click on that I need a one single container I will click on plus.
‫And after that I will be adding a cover image.
‫So let's select cover.
‫Let's click on the media library and choose any of the one.
‫So I'm going to be choosing the Paris one.
‫Click on select.
‫This is added.
‫And now here I'm going to be writing in here advertise.
‫Now since this is actually the main heading.
‫So I'll be clicking on this paragraph.
‫And I'm going to be transforming this into a heading.
‫After that I'm going to be clicking on this H2 and I'm going to select this to H1.
‫And then I will select the size of it.
‫So I'll select XL.
‫Seems fine.
‫Once I've selected this then I will be going into the text and I will change the text color to white,
‫which is fine.
‫And let's suppose that if you want to change the overlay, you want to make it to be darker.
‫You can click on Select cover and you can go into the styles and you can work with the overlay opacity.
‫A city like how much darker you need.
‫So let's suppose that this is much the darker that I need.
‫Now.
‫Once I'm done with that, I'll be making sure that it fits my entire page.
‫So if I were to hit on update and now if I were to view the page, you can see how it looks.
‫Now I'm repeating these things again and again so that it can fit right in your mind, and you should
‫be able to understand it.
‫Now what I'll do, I'll click on uh, this navigator, select the first group and I will select this.
‫And then I will select this to full width.
‫And this is going to be full width.
‫Now this group is actually full width but the cover is not full width.
‫So if I click on outside or if I just unhide this navigator then you can see that the group that was
‫there has become the full width.
‫But the cover that we have over here isn't the full width.
‫And if I click on update and if I refresh this you can see it's it's still the same.
‫So that is why what I need to do I need to click on here, select the group and select the cover.
‫Now I'll be just unchecking this document overview.
‫And then I will click on this align.
‫And I will select this to be full width.
‫Once I'm done with that now I can hit on update.
‫And now if I refresh the page you can see that this is now full width.
‫After that, if you want, you can also select the focal point where you want it to be.
‫So let's suppose that this is the one.
‫And I also want to just like resize this a bit.
‫So make sure that you are in the cover settings.
‫Go into the styles and then you go down and there should be the minimum height of the cover.
‫I'm going to be selecting this to be 250 which is very less.
‫Let's select 300 which is fine.
‫And now I will hit on update.
‫Now let's just go ahead and let's refresh the page.
‫And now our hero section is ready.
‫So let's just go ahead and let's click on this document overview.
‫Let's select our group.
‫And let's rename this.
‫And let's select this to be the hero.
‫Once we are done with that we can collapse this group.
‫After that we need to click on this plus.
‫And we need to add another our group.
‫So let's add another group which is added.
‫Now I'm going to be selecting this to have a one container.
‫And inside here I want to show um like the pricing and the plans.
‫All right.
‫So first of all we will be adding a heading which is going to show the pricing.
‫Pricing for the advertisement on our blog website.
‫Or you can just, uh, change this to the packages.
‫Like, you can, uh, offer a silver package, Golden, a platinum package.
‫It depends upon you, like how you want the pricing to be.
‫So let's suppose that I want to name it as a pricing.
‫I'll align everything into the center, and after that I will be adding a pricing table.
‫Now the pricing table what you can do.
‫You can go to the plugins.
‫You can search for add new plugin.
‫And then you can actually search for pricing tables to see if there are any of the great pricing table
‫plugins like you can see that this is the one responsive pricing table.
‫If I click on here, and if I go down, there is going to be some of the screenshots.
‫So let me just go to the plugin page.
‫And now let's go down.
‫And you can see that there's these are the screenshots.
‫So if you want you can create your particular pricing table like this.
‫But I want to show you like, let's suppose that if you want to fully rely on the Gutenberg, then how
‫you can create a pricing table like this.
‫It's not going to be beautifully designed like this one, but we're going to still create a really basic
‫pricing table, considering that we are relying only on the Gutenberg.
‫So let's go to the advertise and let's click on this plus.
‫And now let's search for pricing table.
‫So we have got this three column pricing table which is here.
‫And if I click on here now you can see that this is right here added and how this is created.
‫Now you may not see this.
‫It's it's it's basically when I search for it, it just gets something from the theme or the library.
‫You're going to get maybe a different one, or maybe you're going to get everything to be empty.
‫But this is how it is.
‫It shows single family patron.
‫And then there is the list and everything.
‫And this is how it is.
‫Now let's suppose that I want to copy this whole layout.
‫I want to design it however this is created.
‫So how I'm going to do that.
‫So first of all what I'll do here, this guy is actually using columns.
‫Then there is one column second column and the third column.
‫And if I just click on this column then you can see that this guy is using a background which is right
‫here text which is here.
‫Then inside this column there is actually a heading which is single.
‫Then there is a paragraph, then there is a separator, then there is a list and then there is a button.
‫So this is how you can go ahead and you can create a pricing table yourself.
‫Now let's just go ahead and let's not use the pre-built one.
‫Let's create something for ourselves so that you can also get an idea of how you can design something
‫like this.
‫So what I'm going to be doing, I'm going to be clicking on the plus, and I'm going to be searching
‫for the column.
‫Sorry, I'm going to get out of this columns.
‫So I'm going to click on this column or let's just select this.
‫Yeah.
‫Just click on this column.
‫And when I will click on plus here you can see that now I'm getting most of the uh the elements.
‫And now I go down I'm going to select columns.
‫And I want to add a column which is going to be added right here.
‫Now I'm going to be selecting that I need three columns, which is going to be added right here in the
‫first column.
‫I'm going to be adding this heading to paragraph the separator and everything.
‫So let's just go ahead and let's do that.
‫So I'm going to be adding a heading which is going to be single.
‫And then I'm going to be adding a paragraph, which is going to be something.
‫And then I'm going to be adding a separator.
‫So I'm going to hit on enter.
‫It's going to tell me to choose a new block.
‫I'm going to press slash.
‫And it's going to now give me the options like I can search for it.
‫So I'm going to be searching for separator which is right here I'm going to hit on enter.
‫And you can see that this has been added as well.
‫Now once I've got the separator I'm going to hit on enter and it's going to take me to the new line
‫which is not working.
‫So I'll click on this plus.
‫And now I will be adding a list.
‫So I'm going to be clicking on the list.
‫The list is going to be added.
‫All right.
‫So let's suppose that this is the single package.
‫And inside the single package we are going to offer them the footer placement adds footer placement.
‫And you're going to get along with that.
‫Thousand views per day.
‫All right.
‫And that's it.
‫Let's suppose that these are the things that it offers.
‫And after that I'm going to hit on enter.
‫Enter again.
‫And it takes me to the new block.
‫I'm going to press slash and I'm going to search for button which is right here I'm going to hit on
‫enter.
‫It's added now I'm just doing everything really fast because you already know how the Gutenberg is working
‫behind the scenes.
‫And I'm hitting on enter, adding a slash so that I can just add these elements rather than clicking
‫on the plus over here and then add the elements.
‫All right.
‫So now here this is going to be the pricing which is going to be 100 or $50 per month.
‫All right that's it.
‫And once you're done with that you can see that this is how the button and everything looks.
‫Now once we're done with that then we will be clicking on this document overview.
‫And now we will be styling this.
‫So how are we going to style this.
‫First of all we need to click on this column.
‫Once we're done with that then we're going to go into the styles and we're going to apply a background
‫color.
‫So we're going to say that our background color is going to be the light one.
‫This is right here.
‫This is done.
‫Now once we're done with that then we will be styling each and everything.
‫But before that we also have to apply some of the padding.
‫So I'm going to be adding the left and right padding.
‫And after that I'm going to be adding the top and the bottom padding as well.
‫Now, once I'm done with that, then I'm going to be going ahead and I'm going to be styling everything
‫like the separator, which is right here.
‫I'm going to click on here.
‫I'm going to say it's going to be a white line and its background color is going to be gray.
‫Which is right here.
‫And I think this is pretty much designed already.
‫We need to work with the buttons.
‫So let's click on the buttons and let's actually open this button.
‫Select our button.
‫And here is the width settings.
‫So I'm going to say that this is going to be 100% width which is right here.
‫And it's now fine.
‫Now the only thing that we need to do is to work with the column padding.
‫So we need to make sure that this is much more.
‫So I'm going to be clicking on this column.
‫Go into the styles and I'm going to be giving to uh right and left much more kind of bit like that.
‫And I'm also going to be giving top and bottom to be more as well.
‫So I think six is pretty much fine.
‫All right.
‫So now once I'm actually done with the padding and everything I'm going to be styling the buttons.
‫So let's go into the style and let's go into the outline.
‫Uh I think outline is fine.
‫Or most importantly I'm going to be selecting the fill.
‫And let's change the background color to be this darker or keep it to be much more darker black.
‫Same.
‫A little different.
‫I think this is fine.
‫And now the text color.
‫I need the text color to be black, which is right here.
‫So now, uh, this, uh, button is not going to be clickable.
‫It's just going to show the pricing because right down below we're going to be, uh, adding a contact
‫form.
‫And from there the person can actually select the package.
‫All right.
‫And instead of this blah blah, I'm going to be changing this to perfect for startups.
‫All right.
‫This is something that is already done.
‫This is my first column.
‫Now I'm going to be going ahead and I'm going to be duplicating this.
‫And I'm going to be duplicating this again.
‫And I've got now four five columns extra.
‫So I'm going to be deleting this column and I'm going to be deleting this column.
‫Now, once I'm done with that, you can see that this is already done.
‫So now this one.
‫Now instead of this singles, I'm going to be adding in here.
‫Silver.
‫This is like silver package.
‫This is the one which is going to be a gold package.
‫And this is going to be a platinum package.
‫So now, uh, this is going to be perfect for growing business, and this is going to offer a footer.
‫Along with that, it's going to add a sidebar ad placement.
‫So footer plus sidebar ad placement.
‫And this is going to offer like let's suppose 10,000 views.
‫And the price of this is like $100 per month.
‫So this is our goal package.
‫Now what I'm going to do I'm going to click on this column.
‫And I'm going to go into the styles.
‫And I'm going to change a different color slight different color which is going to be this one.
‫Kind of.
‫It seems fine.
‫And then we're going to work with this one.
‫So this is going to be perfect for agency.
‫And once we're done with that then this is going to be a footer plus sidebar.
‫Sidebar.
‫And along with that, there is also going to be a guest.
‫Post.
‫And there is also going to be writing included.
‫And along with that, there is also going to be SEO.
‫So let's suppose that these are the all the offerings that we want to do.
‫And this is going to give them.
‫Uh, 1 million views per day.
‫Let's suppose that this is our package, which is going to cost them $1,500 per month.
‫So let's suppose that these are the pricing that we want to offer to our customers.
‫Everything is like this.
‫Now if you want everything to be aligned perfectly then what you can do, you can also just add something
‫like n a, n slash a and n slash a.
‫So everything actually looks aligned.
‫And this button is also here.
‫Now if you want everything to be perfectly aligned.
‫Otherwise if you want you can just leave this n slash a, which means not applicable like a guest post
‫is not included.
‫So this is how you want your plans and pricing to be.
‫Now, since this is a platinum package, then we want this to be a little bit different and we want
‫this to be darker.
‫After that I'm going to click on this heading.
‫I'm going to change this to white.
‫I'm going to change this text to white as well.
‫And I'm going to change this of the background color to white as well.
‫And I'm going to change the list items.
‫So let's select the full list main list.
‫Let's go into the text and let's change the color.
‫And everything seems now perfectly.
‫This is our silver, gold and platinum package.
‫Now once we are done with that this is our pricing that we are done with it.
‫Now I don't need this pre-built one that was already there, which is this one.
‫So I'm going to be selecting this and I'm going to be deleting this because I do not need this.
‫These are our own pricing that we want to offer.
‫Now we are done till here.
‫Our contact form is almost ready.
‫Now if I just go ahead and I hit on update.
‫And now if I just go back to the website and I refresh this, then you can see that these are the pricing
‫that we offer and everything is right here.
‫Now let's suppose that after that you want to show a contact form then how you can do it.
‫That is really very simple.
‫You can go to the plugins and then you can go to the Add New and you can search for a contact form plugin.
‫Now we have already worked with the contact form plugin.
‫We have integrated that contact form on our project one two.
‫And so we're going to be integrating that on our this project as well.
‫So let's hit on install and let's activate.
‫And now once we're done with our contact we are going to click on this contact.
‫Click on the contact forms.
‫There is going to be a contact form created by the default.
‫So let's click on edit.
‫And let's see what are the things that it asks.
‫So it asks for the name email subject and your message.
‫Now let's suppose that after that I also want to add something else.
‫Then how can I do it?
‫For first of all, I need to copy the shortcode and I need to go to the advertise page and I need to
‫add a group.
‫So let's uncheck this group.
‫This is going to be the group for the pricing.
‫So let's rename this and let's name this to be pricing.
‫And after that I need to add.
‫All right.
‫There is one thing you can see that inside the hero section this pricing is there.
‫So I'm going to be bringing this to be out.
‫All right.
‫This should be a separate section pricing.
‫And after that I need to add another group.
‫So once I've added that, I'm going to be adding a heading after that.
‫So let's select the container.
‫Let's click on plus and let's click on contact.
‫All right.
‫And after that I need to add the contact form.
‫So I'm going to be adding short code.
‫And I'm going to be pasting in a shortcode of the contact form and I will hit on update.
‫And once that is updated, let's view the page.
‫And this is our page.
‫This is our contact form.
‫So now what we need to do.
‫We need to add a few things.
‫So we've got the name email subject and the message.
‫All right now I'm going to be editing the contact form.
‫So first of all before the subject after the email I need to copy this.
‫So let me copy the subject one.
‫All right.
‫So let's copy the subject copy.
‫Let's hit on enter twice.
‫Bring up here and paste in that.
‫So we've got subject twice now instead of this text and everything I'm going to be clicking on here.
‫And I'm going to be getting rid of this.
‫And whatever the input field that I will add in here will be added over there as a form.
‫So I'm going to say that this is going to be a select box.
‫So where is the select box.
‫Uh, this is a select box.
‫So I'm going to be clicking on here.
‫This field is going to be required.
‫And this is going to be the package.
‫And then let me just make sure that this is not capitalized.
‫And in the options I'm going to say that the package which is silver gold and platinum, this is going
‫to allow the user to select like whichever package they want to go with.
‫All right.
‫So uh, whatever package that they select I'm going to hit on insert.
‫And the package is now added.
‫Now in here I'm going to right here select your.
‫Package and I'm going to hit on save.
‫Now if we go up to the website again.
‫So let's go to the website.
‫Let's refresh.
‫And now you can see that we've got to select your package silver, gold and platinum.
‫And everything seems to be working.
‫Now this is the subject.
‫So instead of this subject like let's suppose that if you want to change that to something like, uh,
‫explain more about your brand, what is your brand and everything.
‫And now let's suppose that the person then, uh, submits the form.
‫Then what you can do, you are going to get the email of the person and you can reach out to him.
‫You can share him your bank account details.
‫He's going to pay you the money, uh, via PayPal or anything.
‫And after that, you can make up the advertisement on your website.
‫If it's a guest post, you can add a guest post as well on your website.
‫And that is how you can make money.
‫If you want to build a blog, website and your blog really very grows, which it will be if you start
‫up.
‫So once it grows and once it's once your blog has become a brand, then you can create an advertise
‫page and you can design it kind a bit like that and allow your customers to add an advertisement on
‫your particular blog website.