‫Welcome back mid-year students.
‫And now in this lecture of the course, we will be taking a look at what if you want to use Elementor
‫for your blog website to design your home page like this and you need the similar design using the Elementor,
‫then how you can do that?
‫Now there are some of the cons with the Elementor, and that is like the search box.
‫You cannot add that this Blocksy post widget that we added using the Gutenberg right from here.
‫You cannot get that widget over there.
‫So how you're going to do that?
‫And the answer is really simple.
‫Like you can still get this design if you like this, you can still get this design, but this is going
‫to be done with a shortcode.
‫And this is something that we're going to be taking a look at.
‫Now I have designed already this basic templates layout using the Elementor.
‫You can see that this is this.
‫Everything is designed with the Elementor.
‫I added this section.
‫You can add a section or a container and then you can add the heading.
‫Then you can add the paragraph over here, which is the same design that you can see right here in our
‫previous project.
‫So you can watch this particular lecture.
‫You can see how we designed this.
‫You have to design this.
‫You have to apply a background image.
‫And after that you have to add a heading.
‫And then you have to add the paragraph.
‫This is what we did using our this particular section.
‫After that we have got the top destination section that we have.
‫All that I have already done with the Elementor.
‫And what you need to do is to add a section, like if I just go down, then this is the section that
‫we have already designed.
‫So what you can do, you can watch the previous lectures.
‫You can see how we design this section.
‫What you need to do is to add a section.
‫And inside there you need to add a heading.
‫Then you have to add three of the columns.
‫And in there you can add a background image.
‫And then you can add the hover effects and everything.
‫If you want to add that these hover effects are not actually possible with the Gutenberg.
‫However, with the Elementor, you can do that.
‫Uh, but instead of this founder that we have in here, you can just simply add a button over here.
‫So let me quickly show you how I added the button.
‫So if I just click on this edit button then these are the settings for the button.
‫Here is actually the uh the view like instead of the click here, you can add the view over here and
‫the person will be taken to that particular page in the link.
‫You can add that.
‫Now similarly, if you want to make this button to be in full size, how you can do that?
‫Previously the alignment will be left or the center.
‫You can just keep it to be justified and it's going to be now full.
‫Uh, take the full width of the button that is is going to be all right.
‫So you can do it like that.
‫Similarly for the stylings, if I just go into the stylings and I am not using any of the background
‫color for the button, so you can see that this is empty for the hover effect, I am actually using
‫a background color which you can see right here.
‫However, I in the normal I have added a solid border which you can add from the border type select
‫solid, add a border one pixels from each side and add a border color to be white.
‫And this is how the button actually is.
‫So you can design the button like that and your top destination page is now also ready.
‫Now there is one more thing that I want to share with you.
‫If I just edit this particular column and then I go into the style, then this is the image that I have
‫added in the position.
‫I have set the position to be custom and I have now changed the x position like so.
‫If I change the x position, you can see how this is changing.
‫So you can change the position based on that till you find a perfect spot.
‫And then if you are optimizing the website for the mobile, then you can go into the mobile device.
‫And then based on the mobile you can choose a different position as well.
‫So like on the mobile like let's suppose that if I want to choose this position, then this is going
‫to be the position for the mobile devices.
‫So you can pretty much, uh, work up with that.
‫And that is how you can go ahead and you can design your particular this page that I have already designed
‫using the Gutenberg you can design with the Elementor.
‫Now, the main and the most important part is that now how to add the latest post like we have added
‫the latest post over here, and now we want to add the latest post.
‫So how we can add that?
‫Now you can see that we have got this post, and if you want to drag it and drop it over here, it says
‫that you need to buy the pro version in order to add the post.
‫And this is not wrong because Elementor is also there in the market for the business, because using
‫the free version, uh, is not really enough for them.
‫And they when they want to add more functionalities and they want to add it using add in the Pro version
‫so that people can actually purchase that.
‫And then, uh, they can just like keep developing their plugins.
‫So I have a general rule regarding the Pro plugins is that if you are buying a Pro plugin and that particular
‫Pro plugin is giving you the ten times value of the price that you are paying for it, because Elementor
‫Pro version, uh, a great pro plan that their website offers, uh, cost 99 USD.
‫So if you are purchasing a 99 USD plan, then you should eventually be getting like at least $1,000
‫value from it.
‫So if you are getting it, then buying that plan is good.
‫Otherwise, purchasing a plan for $99 is not good, especially for a blog website.
‫So that is why I would say that if you want to build a blog website, then do not go with the Elementor
‫Pro because Elementor Pro is not really value for money for a blog website.
‫If you want to add just a one single widget, just a one for just a one single widget, you are paying
‫$99.
‫So I don't think it's, uh, it's a good decision to buy a pro version.
‫Rather than that you can use a shortcode that this Blocksy theme offers, and it's really very amazing.
‫So let me share with you how you're going to do that now with this Gutenberg.
‫The Gutenberg editor provided this.
‫All right.
‫Like if you click on here and if you go down then there is actually the actually the Blocksy widgets
‫over here.
‫And we can click on that and it's going to be added.
‫However with the Elementor.
‫Elementor does not allow that particular thing because they are there for the business.
‫And they want to like, uh, get you to purchase the pro plan.
‫That is why they're not going to let those team developers to allow you to add that particular widget
‫directly in here.
‫So but the Blocksy theme still offers a shortcode, and you can use that shortcode to design your particular
‫website without the need of purchasing a Pro plugin.
‫And I'm going to be sharing with you how you can do that.
‫For that, you simply need to open up your new tab and then you have to type in there Blocksy shortcode.
‫For post.
‫All right.
‫And then you can hit on enter.
‫Once you hit on enter it's going to give you the link probably on the first over here.
‫If you do not see it you can go down and you can see it.
‫But here is this shortcode.
‫So what I'll do, I'll just click on that and it's going to redirect me to this particular page.
‫Now this is actually the URL of this.
‫So if you do not get this then simply you can also just go into the creative themes comm slash blocksy.
‫Then you can go into the help and then you can go into the documentation, click on that.
‫After that you need to go down, click on the developers and in the developers in the general tab this
‫is going to be the first one.
‫So if you land it on this page it's good via Google.
‫If you if you cannot land on this page then you can also like was it this website.
‫And then just go into the documentation and click on the developers in general.
‫And this is our short code.
‫So now let's just go ahead.
‫Let's copy the short code.
‫Let's just go ahead and let's paste that on the Elementor editor.
‫And let's see how our page looks.
‫So what I'll do I'll just copy this particular short code.
‫I'll just go to the Elementor page builder right here.
‫After that I need to add a short code, so I'll just write here short code.
‫This is the short code element.
‫Now what I'll do, I'll just drag this and I'll drop it right after the post.
‫All right.
‫And this is now the short code added.
‫Now whatever the code that I have copied, I'll just come up here and I'll paste it.
‫This is going to be added.
‫And now I'll go ahead and I'll hit on update once I'm done with that.
‫Now I will visit this website wizard this page.
‫So what I'll do for that I'll go into the dashboard.
‫And now I'll go into the pages.
‫All pages.
‫Uh, this Elementor page, this is the page title that I created, or I previously.
‫So I'll be going ahead and I'll be now viewing this page, which is designed with the Elementor.
‫And this is how now it looks like.
‫So this is perfectly fine.
‫If I go down, then I've got the top destinations looking perfectly fine.
‫This is the latest post right down.
‫We have got the shortcode.
‫So now let's see how is it looking.
‫If I go down now, you can see that this is how it's looking and it's already designed.
‫We are also getting the pagination.
‫We are getting everything.
‫We are getting the number of the post which is five.
‫Everything is now perfectly fine.
‫Now let's suppose.
‫That you do not want to show this pagination that we have over here, like with the Gutenberg.
‫What we did, we just clicked on this widget.
‫And here is just an on and off button.
‫Like if I just click this to off, the pagination is not going to be shown.
‫However, with the case of the Elementor, if we go down, there is still the pagination with the case
‫of the Elementor.
‫We cannot do that because we are using the shortcode.
‫But still you can do that.
‫And how you're going to do that, you have to go back to your shortcode page and then you have to go
‫down.
‫And here are all of the available arguments that you can add to design anything, or to change something
‫like, let's suppose that there is actually a limit that this that defines like how many of the number
‫of the posts you want to show.
‫So the limit is actually default.
‫By default it is actually set to five.
‫Now let's suppose that instead of five, I need it to be like six, seven, eight, whatever I want.
‫How can I do that?
‫So I have to actually copy this particular argument.
‫I have to copy that.
‫Then I have to go to my page builder and then in here inside the short code.
‫All right.
‫And then if I hit on space then after this block underscore post before this curly before this square
‫bracket, I'll be pasting that argument, which is the limit.
‫After that I will add is equals to and I will add two double quotation marks.
‫And in between those double quotation marks I will say that I need ten post.
‫All right.
‫Let's suppose that I need ten posts.
‫I will hit on update.
‫And once I do that now if I just go back to the page, you can see that these are the five posts being
‫shown.
‫But now if I refresh this, then you can see that I've got one, two, 3456789 ten.
‫So this is how it's actually working.
‫And you can go ahead and you can work with these arguments similarly.
‫So now I'll be going ahead and I'll be keeping that to be limit is equals to five which was the default.
‫If you remove it it's still going to be the five.
‫But I want to show it five.
‫So I'll just add it.
‫No worries.
‫By default it's going to be five as well.
‫After that I want to say that I do not want to show the pagination.
‫So let's go to this page and let's see if there is any option for that.
‫And if we go down you can see that we have got this has pagination on the line number eight.
‫So we will copy this argument.
‫After that we will go back to our Elementor page.
‫After this double quotation mark next to the limit we will add a space we will paste in that argument
‫is equals to double quotation marks.
‫And in here we will add the value.
‫So let's go back and let's see what is the value.
‫So the possible values are yes or no.
‫The default value is actually yes which is why the pagination is being shown.
‫So I will say that I do not want to show that.
‫So I'll copy the value and I will go to the Elementor page which is no.
‫And now in these double quotation marks I will paste in the value.
‫And now you can see that the pagination is actually gone.
‫And now if I just go ahead and if I hit on update and now if I view the page refresh this then.
‫Now you can see that there is no pagination being shown.
‫So we have actually designed the exact same replica of this website that we built using the Gutenberg.
‫We have designed it with the Elementor.
‫Now one of the best things with the Elementor is that you are not restricted to this design.
‫Like you can add hover effects.
‫So when I bring my mouse, the image should be changed like there should be.
‫The image should be pretty much more visible like these effects.
‫I can also do that with the Elementor.
‫In the case of the Gutenberg, I cannot do that.
‫So there are so many of the pros for the, uh, Gutenberg and for the Elementor.
‫Both are same, but there are some of the cons with each of them.
‫Now, let's just go ahead and let's take a look at the further arguments that this offers.
‫So first of all, this is actually the post type which is going to be set to the post.
‫Now let's suppose that if you want to add any other post type, this is something that we'll be talking
‫in our fifth project.
‫So you can leave that thing.
‫Just keep it to be the default one, which is the post.
‫All right.
‫Do not add this argument.
‫Then we have got the order by.
‫So what you can do, you can order the post by the post date.
‫Like let's suppose that if you want to show the latest post, then you have to order them by the post
‫date like when they were actually posted.
‫And then you can set the order to be descending order, not the ascending order, so that the latest
‫post is going to be always on top by the default.
‫These are going to be there just in case if you want to change it.
‫Like, let's suppose that you want to show the most popular post.
‫So the most popular post can be, uh, can can be added, uh, can be counted via the number of the
‫comments that they have.
‫So you can say comment count order by.
‫And those post that has got the most number of the comments will be shown to you up top.
‫Similarly, if you want to order them by the random number.
‫So you can also set this to order by Rand.
‫All right.
‫And it every time you are going to refresh the page the order is going to be changed.
‫Let me share with you.
‫So I'm going to be going ahead I'm going to be copying this argument.
‫I'm going to be going back to the Elementor page builder.
‫Click on the shortcode after this has pagination.
‫Now I'll add a space.
‫After that I'll be adding, uh, the argument is equals to.
‫Double quotation marks.
‫And now.
‫I'll go into the short code and I will say that I need it to be random.
‫So I'll now go back to the page editor.
‫Inside the double quotation marks, I'll paste it.
‫And now I'll go ahead and I'll hit on update.
‫This is going to be updated and I'll just go ahead and let's refresh this.
‫So now you can see that the page is reloaded.
‫Uh, everything is changed.
‫Now if I just go ahead and if I refresh this, then you can see that everything is changed like it's
‫now.
‫First is Germany.
‫So now if I refresh now, you can see that this is now Malaysia.
‫And if I refresh now you can see it's actually changed.
‫So this is how you can go ahead and you can add uh, these type of arguments to work with it.
‫Now what I'll be doing is that I'll be removing this order by random, because my heading says that
‫the post are actually latest.
‫So I want to show the latest post.
‫That's it.
‫Now I'll be going ahead and I'll be hitting on update.
‫Now let's just go ahead and let's talk about, uh, this particular search bar that we added with the
‫Gutenberg right here.
‫Now, Blocksy theme Blocksy theme does not offer any of the shortcode for the search bar.
‫And that is why we cannot add, uh, that particular shortcode, because the Blocksy theme does not
‫offer that and we cannot add the shortcode.
‫So if you know HTML and CSS, then you can create a custom shortcode, custom HTML, and you can paste
‫that in and it's, uh, going to work.
‫However, there is also another tweak that you can do if you really, really, really want to add the
‫search.
‫And that is, let me show you.
‫First of all, you have to make sure that you design the page with the Gutenberg.
‫All right.
‫Now, once you have designed your page with the Gutenberg and you have added the search, you have done
‫all of these tilings, all of the customizations right within the editor, everything you have done
‫already.
‫Then what you need to do, you need to do a little bit of tweaking and it's going to work.
‫So what you need to do is to right click on the search and then just click on inspect.
‫And once you click on inspect it's going to open up the Chrome Developer tools.
‫And now this as you can see if I bring my mouse whatever that is selected it's actually an input box.
‫All right.
‫Which is actually an HTML code.
‫Now this is for those of you who do not know how to write HTML, how to add the shortcode and everything,
‫but if I just go ahead and if I go up to the top, then there is actually a form tag, which means that
‫this is a form, and before that there is a section or a group which is a div.
‫So div is actually a divider kind of things.
‫All right.
‫So what you need to do is to click on this div.
‫And this div now holds this particular search bar.
‫So what I can do now is that I can right click on this div.
‫I can now click on edit HTML and whatever that is inside this div I am copying this whole thing that
‫is inside this div its code.
‫All right.
‫And then what I'll do is that I'll select all and I'll copy that.
‫Now remember one thing.
‫This is this may work or this may not work.
‫So if you have added something with the Gutenberg and you want to add that on the element or it may
‫work, it may not work.
‫So let's just go ahead and let's see if it works or not.
‫So I'm going to be copying this code.
‫I'm going to be going into the Elementor page builder.
‫And now I'll be adding the HTML block.
‫So I'll now drag this HTML and I'll drop it over here right after this paragraph.
‫And now in here I can paste in the code that I've copied.
‫So I'll now paste in the code.
‫And it works.
‫Wow.
‫So now what you can do.
‫You can click on update.
‫And now if you go ahead and if you refresh this page, you can now see that we've got this search.
‫So hopefully by this video Elementor is going to restrict this.
‫But it is working.
‫And the reason why this is working is that in the back end, in the back end, we are actually using
‫a theme that is a blocksy theme.
‫And then when we use the Gutenberg and when we paste or when we add this particular search box using
‫the widget, then the search box automatically creates some of the HTML, CSS, and every of the codes
‫in the back end.
‫Then what we do, we paste, we publish that page.
‫We go into that page, we right click on that.
‫We click on inspect every single of the code.
‫We get that.
‫Then what we do, we copy that code and we paste it into the Elementor using the HTML code.
‫And it is now added.
‫It's now working.
‫So this is how you can go ahead and you can work with some of the things.
‫Now I just want to clear one thing is that some things may still not work.
‫And the reason for that is because when you are using Elementor, you are completely using Elementor.
‫So some of these stylings may be changed.
‫Some of the things will still be, uh, be changed.
‫All right.
‫So if something is not working, then you should know that, okay.
‫That thing cannot be actually done with the Elementor.
‫So now let's just go ahead and let's refresh this page.
‫And now let's just go ahead and let's search and let's see if the live search is also working.
‫So I'm going to be adding in here Laam.
‫And the live search also works.
‫So congratulations.
‫You have actually uh, built this same design that we built using the Gutenberg.
‫And I told you that, uh, using Elementor on a blog website is not a good idea.
‫And that is why you should stick with the Gutenberg.
‫But still, if you want to use the Elementor, then this is how you can go ahead.
‫And you can use Elementor to design your particular home page.
‫Now, since I do not want to use this page, uh, I want to use the one that I designed using the default
‫Gutenberg.
‫So you can go ahead and you can delete that.
‫Otherwise, if you want to use this Elementor page, then you can go into the dashboard.
‫And then you can go into the settings reading.
‫And then you instead of using the home page, you can select the Elementor page that we created.
‫And that is going to be your home page.
‫All right.
‫So that was all about the Elementor page builder.
‫I told you how you can design this same page using the Elementor.
‫Now, don't get me wrong with the Elementor, that you cannot add the search box using the Elementor.
‫You can you can add that if you just go ahead.
‫And if you search for the search form, you can add the search form, but it is actually done with the
‫pro version.
‫So I've told you, a cane, a cane and a gain is that pro version is a good plugin, but using a pro
‫version for a blog website is, I don't think, value to money, because purchasing a $99 plugin and
‫then designing the website, then it's not going to give you the thousand dollar value that you should
‫be expecting.
‫All right.
‫So that was all about the Elementor page builder.
‫Now we have designed this page.
‫Now from the next lecture of the course we will be working up with more stuff.
‫And after that we will be working with the about page, designing that page and moving forward with
‫this course.
‫So stay tuned and bye bye.