How to create FREE travel blog using WordPress in 2024

In this video, I’m going to show you how you can create your custom travel blog on WordPress by just using free themes and free plugins. And not just that, I’m also going to give away this entire travel blog for free of cost so that you can just download the template files and then upload it on your WordPress setup to create your travel blog in no time.

So if that sounds interesting, then let’s dive in. So let me first give you a quick demo of what exactly we are going to build. So this is the homepage of our travel blog, and on the very top we have some quick links to various pages. And on the right hand side we have the social links. And below that we have our main navigation menu where we have a logo on the left hand side, and we have a category link as navigation on the right hand side with a search.

I. And below that we have a big giant hero section where we can add a call to action button. And [00:01:00] below that we have some introduction section. And below that we have some call to action to various categories of our blog. And then we have our latest post from the blog. And after that we also have a newsletter subscription form so that we can start building our email list from the day one.

And in the end we have our custom footer where we can put any content as we like. And if we click on any of these categories from navigation, this is how our category page looks like. And if we click on any of these posts, this is how our single blog post page looks like. We have our feature image as a full worth banner.

And on the top of that we have our blog title. And then we have a sleek and clean design for the main content, and we have social sharing links. And below that we have related posts as well. And in the end we have the comment section where people can [00:02:00] leave their feedback and comment on your blog post.

And once again, we are going to build all this by just using free theme and free plugins and whatever resource we are going to use to build this travel blog. I’m going to link them down in the video description below. Alright, so the first thing we need to do is book our domain and get our hosting server.

And for that we need to visit anki sherman.tv. Slash hosting, and this will take you to the hosting website. And here we need to click on hosting and then go to web hosting. Now there is another option. It says WordPress hosting. So you don’t have to confuse with this. You can simply choose web hosting from here.

So let’s click on this, and here if we scroll down, here are the three plans. So the single website hosting starts with $1.99 per month, but I would highly recommend that you go with the premium web hosting, which allows you to host hundred websites. But I’m sure you are not going to host hundred websites.

There are other [00:03:00] benefits like a hundred GB, S S D, storage free domain for one year. And free SSL certificate for that and all that at $2.99 per month, which makes it a great deal. So let’s click on add two card for this. So here, the first step is to choose the period and we can get the best value if we choose the 48 months plan.

So you can choose as per your preference, but I’m getting this hosting just for the sake of this video tutorial. So I’m going to select 12 months, and still I’m going to get my free domain and free SSL for that. And in the step two, we just need to enter our email address to create our account. So all you have to do is just enter your email address here and here in the step number three, we just need to enter the payment details and then we just need to proceed with the checkout.

So I’m just going to fill up these basic details here. And before you proceed, don’t forget to check out the exclusive coupon code that I will add in the video description below so that you can get some extra discount on this. [00:04:00] So all you have to do is just click on have a coupon code. And then enter the open code that is given in the video description below.

And once you enter the open code, just click on apply and enjoy your additional discount. And once we enter the open code, we can now select any payment option like credit card, PayPal, and various others. So in this case, I’m just going to use PayPal. So let’s select that. So I’ve already selected that, and now we can just click on submit.

So let’s do that and let’s check out with PayPal.

All right, let’s enter the one time password here, and it’s going to take a few seconds. All right, so it’s now redirecting us to the control panel of hosting. And we have already given the email address, and this is the time where we can set the password for our hosting account. So make sure you give it a strong password and note it down in somewhere safe.

[00:05:00] And after that, just click on confirm. And right now we are inside our hosting hosting panel. Now, while you doing this purchase, there might be a different onboarding process for you, so it changes time to time, but all you have to do is just follow each and every steps. They are pretty straightforward, and in the middle of that process, you will see a step for claiming your free domain, which I’m getting right now here on my dashboard.

So let’s do that here. So let’s enter a domain. Now, make sure you try to get the.com domain name, but if in case you are building any regional website or blog, then you can choose the country’s specific extension, but it’s highly recommended that you keep.com as your first priority. So we will choose.com here and for the domain name.

So maybe I can use my name here, something like that. And let’s check the availability. All right, so the domain is available. So I’m going to use that. So I just need to click on claim [00:06:00] Domain, and now it’s going to start the process of registering the domain. And here it requires some primary details. So let’s select that and once we enter all the details, just need to click on finished registration.

All right, so our domain is now booked. We have our hosting plan here. We just need to now set. So let’s click on setup and it’s going to start the process. So let’s click on start. Now we are going to skip all this process and let’s skip this one again, and we are going to choose the domain that we have just booked.

So now it’s going to link our domain to the server location, and you can choose any server location as you want. Right now we are going to choose Asia India location, but you can choose any other server location which is near to your location or more precisely near to your target audience. And your target audience is in us.

So it’s highly recommended that you choose North America as your server location. So right now I can just go with Asia [00:07:00] here and then click on. All right, let’s finish the setup. And now it’s finalizing the process. It’s going to take a few seconds, and now we are done. So we can visit our website or maybe we can manage site.

So let me just go ahead and click on managed sites so that we can enter the control panel. All right, so our hosting is also done. All right, so our domain and hosting is done. It’s time to set up WordPress on our website. So let’s dive in in our hosting account and let’s get started. Now, before we set up the WordPress website, we first need to add SSL certificate to our domain.

And for that in our hosting account, on the very top we have SSL option. So let’s click on this, and here we need to make sure that lifetime SSL certificate is showing status as active. And once that is done, we can now go to websites from the very top, and as we only have one website added in this hosting account.

So we just need to click on manage for this [00:08:00] one. And now we can click on auto install from here, or we can go down to the left hand side navigation. Here we have an option for website, and then we will find the auto installer option here as well. So let’s click on this, and from here we need to select WordPress.

And if you click on advance, now we need to enter our WordPress credentials. So first we need to give a website title, so just entering any random name here. And below that we have the WordPress admin email id. So by default, it’ll take the same email ID that we have registered with hosting an account. So you can go ahead and change that from here.

And then we need to enter the admin username. Once again, make sure you add a unique and strong username and password here. And at any cost, do not add admin, admin as your username and password. And in the installation path, we first need to select https s because we have already added the SSL certificate.

So we are going to leave [00:09:00] the sub directory field empty so that we can set up the WordPress on our route domain. And after that, just leave the database fields as it is, and then just click on Next. And once again, just leave all the settings as it is and then click on install. Now again, it’s going to take a few seconds, and now our WordPress setup is done.

So if you open this in the front end, This is how the default look of our WordPress setup, which is no, are close to any travel blog. So we are going to customize everything here. In order to access the backend of this WordPress setup, we just need to type in WP Dash admin after the URL and then hit enter.

And here we need to enter the username password that we have added while doing this WordPress setup. And once we enter the detail, we just need to click on login. So here we are on the dashboard of our WordPress setup. So the first thing that we need to do here is to [00:10:00] go to the plugin section. And here are certain plugins that we don’t need, but they got installed once we do this setup.

So let’s go ahead and get rid of all of them. And first, let’s go ahead and deactivate all of them and then choose delete. All right, so now we are left with only the light speed cache, which is a good plugin to have on the setup. All right, once that is done, it’s time to move onto the next step. That is users, and we click on profile.

And here we can play around with the admin color scheme, so you can choose whichever suits best for you. So I like this midnight theme, and if you scroll down here, we can enter the first name, last name, and basic details about this user. And once we have filled up all the details, we can now scroll down at the very bottom and then click on update profile.

Once that is done, we can now go to settings and then click on general. And if we [00:11:00] scroll down at the very bottom here, we have the time zone. So we are going to select India and then we’ll save changes. So you can select your own time zone from here, and now we can move on to permanent links. And here we need to select post name so that we can have some clean U R L for all the pages.

And then let’s click on save Changes. And now we are done with our WordPress setup. We can now move on to the next step. So now once the WordPress setup is done, it’s time to install our free team and the plugins that we are going to use to build our blog. And as promised, we are only going to use free theme and free plugins.

And the theme that we are going to build our blog is blocksi theme. And in my opinion, this is one of the best free theme that you can use if you are building a blog. So let’s go back in our WordPress backend and install this theme. So here we need to go [00:12:00] to appearance and then go to themes. And then we need to click on add New.

And here we need to search for blocksi. And this is the Blocksi theme that we are going to install. So let’s click on install and then click on activate. And here we are in the dashboard of our Blocksi team. And in order to start customization, you get a very clean and handy dashboard. So you can start by choosing your color options, then go to edit your header, then customize the blog options and so on.

So we are going to cover that step by step. But first, let’s go ahead and install the required plugins. And here on the top, we are already getting a notification to install the Blocksi companion plugin. So let’s install this because this plugin is going to be very helpful, especially when we need to export this entire template so that you can have the complete website template and use it on your WordPress.[00:13:00]

All right, once that is done, let’s go back in the plugin section and then click on add New. And here we first need to add Spectra Plugin. So this is going to be the collection of Gutenberg Blocks, which will help us to design all our pages. So let’s click on install for this, and then click on Activate.

So once that is done, we can now go back to Plugin and then click on Add New. After this one, we are going to install Convert Kit. So we are going to use Convert Kit free account to capture email address of our visitors. So here is the plugin. Let’s go ahead and install this, and then just click on Activate.

All right, so here we can connect our Convert Kit account, but we will do this later on. So let’s click on Exit Wizard. All right, so now if we come back here in our WordPress front end, so this one looks much better, but now we are close to our travel block. So let’s come back here in the WordPress backend, [00:14:00] and now we can move on to the next step that is creating our categories, navigation, and pages.

So let’s first go to pages, and here maybe we can just rename the sample page as our homepage. So we will give you the title Home and Change the SL to home. Let’s update this and then click on Add New, and let’s call this About Us. Let’s publish the page and let’s add a new one, and then choose Contact Us as a title.

Let’s publish this. Let’s add another one. Let’s publish this as as well. All right. Once that is done, we can now go to post and then go to Categor. And here instead of uncategorized, we can click on quick edit and we can rename this category here. So as we are building a [00:15:00] travel blog, so we will create post category based on that theme.

So let’s say we rename this two destinations, let’s update this one. And now we can create new categories. Maybe we can talk about gear in a different category and maybe we can add guidebook as category. Alright, so in the next step we are going to take these categories, and with that we are going to create our navigation menu.

So for that we need to go to appearance and then click on menus. So first we will give it a name, and here in the categories we will click on view all. Let’s select them all and add to menu. All right, let’s save this. And in the next step we will go to settings and under reading. Here we can set a homepage.

So we will choose a static page and we will select this home as our homepage. And we are not going to select any post page [00:16:00] here because we will be linking all the categories and navigation. So now we can just click on Save Changes. And now if we refresh our front end, we have our static page showing as our homepage.

Now in the next step, we are going to add some dummy data in our blog so that we can see how things are turning up when we do the designing of our blog. So let’s do that. So here we will go to plugins and then click on add New. And here we will search for Faker. So here we have the Faker Press plugin. So let’s click on install and then click on Activate.

And now we have a new option here for Faker Press. And from here we need to go to posts. So let’s say we want to add nine blog posts and we can leave date as it is. If we scroll down here, we can choose the sample image provider. So we will choose Lauren Pxa. And if we go down here at the bottom, we again need to select [00:17:00] the attachment id, and then we just need to click on generate.

So this is going to generate some dummy blog post with the thumbnails, which we can use to populate our blog. All right, so we are done. And now we can just remove this plugin. So here in our installed plugin section, we can deactivate this and then click on delete. And if you go in the post section and we can get rid of this Hello World, the default blog post.

So let’s click on. And now we have nine sample blog posts. Now, in the next section, we will start building our global color palette and global typography so that we can have a design consistency throughout our blog. So let’s dive in. So in order to add global color palette with Blocksi theme, we can go to blocksi here.

And here we get an option to start with color options. So let’s click on this, and this is going to take us to the theme customizer under the color section. Now we can simply [00:18:00] go to our theme appearance and customizer option, and then simply click on colors from here and we will land up on the same page.

And with bloy, we get so many color palettes that we can start with. And in order to define our own color palette, all we have to do is just click on any color here, and then we can just start typing the color code. So let’s say we want to change this to the dark gray, and then we will click on the second color.

So I’m just going to copy the color codes that I have already written.

All right, so our color code is now added, and this looks a little bit odd, so let’s go ahead and fix that. So below our color palette, we have various elements where we want to assign our color. So for the global colors base text, we will choose as dark gray. And for the links we can choose our orange color.

And for the Hoover, we can choose the [00:19:00] yellow one. And for selected text, again, we can choose yellow From here and background will be black. And for the borders, we will leave it as it is. And for all headings, we will make them dark gray. And same goes for all the headings. And at the end we have site background.

So for this one, we are going to choose white. So now it looks much better. All right, so let’s publish this customizer setting. And now let’s go back. And under general, we go to buttons. And here we go to design. And for buttons, we have the font color initial. We will choose dark gray. And for the Hoover as well, we will choose the same dark gray color.

But for the background, we will first choose orange. And for the background, for Hoover, we will choose [00:20:00] yellow. Let’s publish this as well. And now for the typography, we can go to typography from here. And here we can define the typography we want for various elements on the site. So I’m going to leave it as it is.

So let’s go back, and this is how we can define the global color palette and typography with Ploi theme. Now, in the next section, we will start building our custom header using the header editor in the Blocksi team. So back in our WordPress backend. So if we click on the blocksi option here, we get a second option in the customizer shortcuts.

That is header options. So again, it’s going to open up the theme customizer, and it’s actually taking us directly to the header editor. Now we can simply open the theme customizer and then click on header from here and we’ll land on the same page. So now in order to start building our custom header, we have this header editor here so we can drop various elements in these three rows.

From the left and side menu. [00:21:00] So let’s say first we have the logo. So if you click on this, it’s going to take us inside the logo setting. So let’s select then image first. So we will upload one. All right, so let’s select that. So here is our logo. We are going to disable the site title, and on the right hand side we have menu one.

So let’s click on this. So we are going to select the menu, and it’s going to be our main menu that we have created from the WordPress backend. So here now we can see our post categories showing here as our main navigation. And after that we have a search icon. So we are going to leave it as it is. And now we will jump onto the top row.

And first we will select design and we will change the background color, and we’ll choose the color from our global color palette. And once that is done, we can now add a bottom border. So we will choose solid line [00:22:00] and the color will be our yellow one, and we will select full width. And as of now, we do not see anything happening here because we have not added any element in the top row.

So let’s go ahead and do that. So let’s drop an HTML block.

So now you see we have our background color, and we also have the bottom border. And let’s click on this HTML block. And here we can just add simple text.

So right now, let’s select this text and maybe we can give it a link. And from here we can select any of our website page and let’s add the link, right? Let’s say, and let’s select the next one. And we, we can add a dummy link if the page is not available right now. All right, so we are done here. All right, now let’s go to the design section [00:23:00] and here we will change the typography to 13 pixel.

And for the font color, for the initial text, we are going to select light yellow. And same for the link initial text. And for the hover, we are going to select our dark orange shade. Now, in order to remove this underlying from all of our links, we already have option in Blocksi team. So for that we need to go to general and click on entry content.

And here we have links type, so we can select different type of links. So, so in order to remove this underline, we need to choose type one. And you can see the underline is gone from everywhere, not just in case you want to try. You can see how all the other three types work. So you can select one and see how they work.

So for this side, we will go with type one. So there will be no underlying. All right, so let’s click on publish. All right, so now [00:24:00] on the right hand side, we are going to add another element. And this time we are going to add this social element. So let’s drop it at the extreme right corner.

And now if you click on this, we first need to visit the design section. And for the icon colors, we are again going to choose light yellow. And for the hover, we are going to select our dark orange. And if we come back here in the general tab, we have the Facebook, Twitter, and Instagram. And we can add more social elements from here.

Let’s say YouTube, and then click on plus. So now we have YouTube. I can add it here. And in order to link them to our social profile, we need to visit this link here. So let’s click on this, and now we can enter links to all of [00:25:00] these profiles. So maybe we can enter the URL for Facebook, and same for Instagram, and then for Twitter, and then for the YouTube.

All right, let’s click on publish. And now we come back here on our social icons. So we can directly click on this bubble icon here. And now we can choose the option to open these links in a new tab. And here we can increase or decrease the icon size or icon spacing. So maybe we can increase the icon spacing a bit.

So this is the look of our header for the desktop version. Now let’s go ahead and click on mobile from the bottom corner. And this is how the header for mobile will look like. And if you click on this draw, we have a different navigation that we can again edit. So let’s close this. And once again, we [00:26:00] have the header customizer for mobile.

So here we have the logo, we have the trigger, and this is the off canvas area where we can edit our mobile menu. So let’s click on this and we will select the menu. Again, we will choose the main menu and then click on publish. Maybe we want to add search button as well. So let’s add it after our menu trigger something like this.

And now if you click on this hamburger I icon, we got all the categories as our navigation. Let’s close this and we can add more elements here in the off canvas area to customize this mobile menu. Once that is done, let’s click on publish, and then we can go back. And now let’s come back to our desktop top version.

And now let’s refresh our front tank. So here we can see our header is now done. We have these links and social media [00:27:00] icons. We have our logo and our category as our navigation with a search icon. Now after our custom header, it’s time to customize our website footer as well. So let’s do that. And once again, in order to customize our website footer, we just need to come back here in the theme customizer.

And here we have the footer option. So we can click here and here we also get the same footer customizer, just like our header. And in that we can add various widgets and elements and use our Gutenberg block to add any type of content. So here we have simply added these three content block, and at the bottom we have this navigation link.

And on the right side we have the copyright information. First we will choose the middle row and we go to design. And let’s add a background color to this. So we are again going to choose our dark gray, and if we come back here in the general, we can decide how many columns we [00:28:00] want here. So we are going to keep this on three.

And if we come back here for the first column, we are going to add widget area one, one, and then widget area two in the second column, and widget area three in the third column. Now, the best part about these widgets is that we can use any Gutenberg blog to create content in them. So we can click here and then we can start adding our Gutenberg block here to create our content for the footer.

But this area looks little small to add our Gutenberg blocks. So in order to create content for these widgets, we can go ahead and click on publish from here. And we can come back here in our WordPress dashboard. And in the, and in the appearance we have widgets area. Let’s click on this. Here we have the footer widget area 1, 2, 3, that we have added in the front end customizer.

So if you click on footer [00:29:00] area widget one, we again get an option to add Gutenberg blocks. So here, let’s start by adding our container first, which is from the Spectra plugin. And inside that container we are going to add a heading. Let’s say we call it about us. And now we will select insert after to paste our content.

Now we can select our container again, and here we will select all the settings. So we will make it full width and we go to style. And for the background, we are going to set the color as the dark gray as in our global color palette. And this is the same color that we have selected for our footer as well.

So we are selecting this color here just so that we can match the color scheme for our footer and change the colors for our text as well. So let’s select this. And now [00:30:00] if we select our title, we can select edge three here. And for the style, we are going to choose the light yellow, and same for the text below this.

Let’s first change this to heading. From the Spectra plugin and from here we can choose as pag. And the reason we are using this spectra heading and then turning that to PAG is that with this we will be able to style everything based on our global color palette as well as our global typography. So here in the style, we can now choose the color as light yellow for the text as well.

Now if we update this here and refresh our front end so we can see the content in the first widget area is now showing inside our footer. So in the same way we can just go ahead and select our container. Let’s copy this entire block and now we [00:31:00] can jump onto the footer widget two and we can paste this whole container and do the same thing with the footer area three.

And now all we have to do is just edit this heading and the content below this, something like that. And let’s update this. And now if we refresh the front tank, so this is how our photo looks in the front tank. Once that is done, we come back here in our customizer. And for the last row, that is the bottom one.

Let’s go to design and we change the background color to same dark gray color, and we go back. In general, let’s divide that into two column. And if we click on the copyright text, let’s go back in design initial color. We will select our light yellow, and rest of the things remains the same. And we will change the link to yellow and over.

We will change [00:32:00] this to dark orange, something like that. And if we come back here in the general, we can edit the text for the copyright information. So maybe for the team author, I can write, maybe I can write my name and then give the link to my website and we will make it open this in a new tab. And let’s give the URL and then click on add link.

All right, now we can drop the copyright to the second column. And for the left hand side column, we are going to add widget area four. So let’s drop it here. And in order to add content here, we need to come back in our widget section from the back end. And for the footer widget area four, we are again going to add our container first.

And inside that we are going to add our [00:33:00] list icons icon list. Let’s select that. And for the content, we will make it horizontal. And for the icon, we are going to remove the icon. So now we can start adding some text here, maybe some pages, something like that. And now we can select all of them and maybe we can link them to any page.

So we can select any link from here, maybe from our website itself. So let’s add link here. And same goes for the third one. And if you click on this list view, so let’s select our container first, and then we can choose the background color again as dark gray. And for the list icon, we can choose the label and set the color to light yellow.

And for the spacing, we will increase the gap a little bit. So [00:34:00] maybe 35, a good number. Let’s update this. And if we come back here for the copyright, Let’s align this to right hand side and make it vertically aligned as center. And same for our widget area. Let’s horizontally align this to left and vertically in the center.

Now let’s publish this and if we refresh our front end, so this is how our photo looks like. Now let’s see how our blog category page, as well as our single blog post page, will look like while using the Blocksi theme. Now, this one is the best part of Bloy theme that you get very clean and professional design for both your category archive page as well as the single blog post page.

So let me show you how it works. So here, if we click on Travel Pips, this is the default look of our category page, which in itself is really [00:35:00] clean and professionally designed. And if you want to do any changes here, We can click on customize, and from here we need to go to blog post section. We have categories.

So here we can customize how our category page will look like. So we have the page title. So this is the category page title, and if we turn it off, we will be able to remove that. So let’s keep it on and if you want to edit that particular title, we can click on edit and we can change this tile of that category from here.

So I will keep it with the style one, so, so that we can have a simple design. And for the category structure, we again have various styles that we can choose from. So maybe we can keep it simple like this one, or maybe we can choose the grade form like this one, or enhance grade like this one. So I like this one, so I’ll go with [00:36:00] this.

And we can choose how many number of posts we want to show here. And then we have the card option where we can define how, what we want to show inside each card. So maybe we can hide excerpt, maybe we can hide post meta in the category page, something like that. And then we can increase the card gap to 50.

And for the horizontal alignment, we can change that to left. And if you go in the design here, we have the option to edit the fonts for our title for various other stuff on this page. So you can play around with that, but, but even if I leave it as it is, it’s again looking very professional and very clean design.

So let’s click on publish. And now if you click on any of these blog posts, let’s say we click on this, this is how the single blog post will look like. And once again, we can go back. [00:37:00] In our posts and this time we can click on single post. And again, we can define how this single post will look like. So here, if we turn on the feature image part, this is how our feature image will look, and then we can play around with design.

So we can select any style like here. And if we go in the design section, we can again choose the page background, color, and various other elements here. We can also turn related post that will show at the very bottom of our blog post. And we can also add post navigation, and we can also add share box.

And if we click on the post title, we can edit that as well. So here we have the different design, so we can choose something like this. And if we go with this design, maybe we need to turn off the feature image. So let me just do that [00:38:00] first. So I’ll turn off the feature image and then keep the design as this one.

And now we can click on this header again and we can edit this now. So we go to design, and for this feature image in the background, we can choose image overlay color. So we can choose our darkest shade and then reduce the opacity to show the image in the background. And now we can change the title color.

So maybe we can choose our light yellow shade. And same goes for the meta. Maybe we can start by choosing the light gray. And for the hover we will choose the dark orange, and maybe we can reduce the size of meta information. Something like that. So now in the front end, this is how our category page looks like.

And if we click on any of these blog [00:39:00] posts, this is how our blog post will look like. So by just using the free theme, we get a lot of option to customize both of these pages. Alright, so now it’s time to start building our homepage. So let’s begin. So we are back in our WordPress backend, and in order to start editing our homepage, we need to go to pages, and then for the homepage we will click on edit.

And now this is the homepage with our sample content, so we can just select all of them to get rid of everything. All right, let’s update this. And we have all the installed Spectra Gutenberg blocks plugin. So we are going to use that to design all the layout of our homepage. And there are few settings that we need to change before we start building our homepage.

So first thing is we need to go to block C page settings. And for the page title, we need to disable this. And after that we need to scroll down. And here we [00:40:00] have the content area, vertical spacing. So here we need to click on custom, and we are going to select this last option that is disabled, so that we don’t have any gap on top and the bottom of our page.

Once that is done, we can now disable the feature image, the share box, and we will leave header Footer as it is. Once that is done, let’s go ahead and update this page here and let’s open the WordPress backend in a new tab. And here for the spectra, we need to click on that. And for the settings, we need to change the default content width because if we go and check out the normal content width of the blocky team, for that, we need to go to general and under layout, we have the maximum site width that is 1 2 90.

So we need to keep the same width for the spectral default content width. So we will paste that here and it’s going to save it [00:41:00] automatically. And now we can come back here on our page. And let’s start by adding a container first. And we are going to choose a single column container. And if we check out the container settings, we have 1 2 90 as the content width, we will keep it full width.

And for the minimum height, we are going to keep 500. And for the flex property, we will make it column wise and we will keep it center aligned and content justification in center as well. Once that is done, let’s click on add block. And here we are going to add a heading. And now if you click on this, we can paste our content and we will keep it H three.

And for the subheading, we will enable this and let’s paste the content for subheading as well. All right, so in the content area, we will [00:42:00] align that in center. And if we select the container again, we can now go to style. And for the background, we are going to choose an image. Let’s select that. So here is our banner image.

Let’s select that. All right, so we will keep the image position. So here we can change that and we will leave rest of the things as it is, and we’ll add an overlay on this background image. So we will choose classic and we will choose color darkest gray, and then we will reduce the obesity a bit. So the background image is now done.

We just need to change the color for our heading. So if we select this, we can now go to style. And for typography, we will first change the font family. Specifically for this title, we want to make it stand out, so you can choose any font that you like. So I’m [00:43:00] just choosing this one. And we will keep the font size as 60.

And let me just first change the color so that we can see how it’s going to look. So we will change the color here. We’ll select our dark yellow here. And for the subheading, we will choose the color as our light yellow. We can increase the font size to maybe 25. So now it’s looking much better. And right after this heading, we can insert another block.

So we will search for buttons again. We will choose the spectra blocks. So by default it adds two button. So we need to go to this list, view here, and we will remove the second button because we only need one. And maybe we can choose this style. [00:44:00] And for the content, we can link it to any page on our site.

And to edit the content, just click on this button. We can now go to style. And for typography, we can increase the font size. So we will keep it 20, and then we can just play around with other settings effect. So right now the color is white. Maybe we can keep it dark gray. And same for the hover as well.

So this is how it’s going to look. All right, so now update this. Now let’s go ahead and check how it’s going to look for a mobile device. So we will switch it to mobile. So right now we can edit the font size here. So let’s again select the container. Let’s adjust the background image a little bit. And for this heading font size, we will choose maybe 45.

And for the [00:45:00] sub heading, We can choose 15. All right, let’s come back here on our main page. And if we refresh the front 10, this is how it’s going to look. And let’s see how it looks for the mobile in the front tent so we can use the developer mode in our browser. So let’s refresh it again. All right, so this is how it’s going to look.

So let’s come back here. All right, so let’s move ahead and let’s select our main container here, and then we’ll click on insert after. And let’s start by adding another container. This time we are going to choose a set of two. So here we have two columns, structure. So on the left hand side we are going to enter some text, and on the right hand side we will enter our image and social media links, right?

So again, let’s start by adding a heading and then we will click on insert after. Once again, we will choose the heading from [00:46:00] Spectra. Let’s copy our text and we will paste it here. But instead of heading this time, we are going to change this to a pag. And once again, we are using the Spectra Heading Block instead of the default P tag, just so that we can have the styling options from Spectra.

All right, once that is done, we can now come back here in our container and if we check the settings, we can change the width to maybe 80%. And for the second container, we are going to change the width to 20% so that we can have more area for the text and a little bit smaller area for our image. Let’s close this and now we will start adding an image here.

So we will again choose image block from Spectra. We will choose an image from library. Let’s select this. [00:47:00] And we will align this to center and full size, and we will keep it 300. And we will keep, and we will turn on the mask option and we will choose a circular mask. So we will choose cover. All right, so now let’s update this.

And now after our image, we will click on insert after. And now we are going to choose icon list. And for the content, we will choose the layout as horizontal and we will hide the labels. And now we, from the list view, let’s select the first icon here and we will change the icon to maybe any social network.

Let’s select Facebook first, and maybe we can give it a link. Right? Let’s enter the link here. Open that in a new tab. [00:48:00] And same we will do with the next two icons. All right, so in order to style these icons, we need to select the main icon list block, and then we can go to style. And first let’s align them to center.

Let’s go to style and let’s increase the size a bit, and now we can change the spacing as well.

So I’ll keep it 20. Let’s update this, and this is how it looks in the front end. All right, so now let’s move ahead. And first we’ll select this main container here, and we go to style. And at the bottom we have spacing option. So let’s add a little bit of margin here. So we will add 50 from the top and 50 to the bottom.

All right. Now let’s click on insert after, [00:49:00] and let’s copy this heading from here. Let’s paste it here and we will center a line. This, let’s paste our content. And now let’s click on insert after again. And this time we are going to choose a container with a three column layout. So let’s select the first container and we go to general.

And for the container, minimum height, we will keep it 300 and we will make it equal height. And for the flex property, we will keep it horizontal. And again, santer aligned. We will choose space around for the justification. All right, so now we can. Select the first one. All right, so now we will add a heading here.

So we will enter the text here. [00:50:00] So we will center line this, and we will make it ptag. And now for the styling, we will choose the font weight as 800 and font size. We will choose 20. And for the transformation we will keep it uppercase and we will select this text and link this to any of our categories.

So I’ll just enter a dummy link here and then click on enter. All right. Now let’s select the main container again and we go do style. And for the background we are going to choose an image. We will choose an image for the background, let’s select from the library. Maybe this one. All right. Once again, we will, we can now edit the position of this background.

So we will choose the overlay again. We will make it [00:51:00] darkest gray, and we will reduce the obesity a bit. All right, so now if we select this heading again, we go to style, we will choose the link here and we will change the color to light yellow. And for the hover, we are going to choose dark orange. All right, once that is done, let’s test it in the front end and let’s refresh it now.

So here, if you observe in the text, we do not have any underlying in the link because we have already edited that in our theme customizer. So even if we see the underlying here, it won’t be visible in the front end. So now let’s, uh, just get rid of these two blocks from here.

So we will duplicate the one that we have just created so that we don’t have to do [00:52:00] everything again. And now we just need to edit this text and update the background image.

Now we can select the main container. And for this general in the flex property, we are going to choose wrap here, just so that if the width goes out of the box, it’s going to wrap the container below. So right now it’s going out of the limit. So let’s see how it looks in the frank tank. So if we refresh this, maybe we can reduce the gap between these containers so that they will all be aligned in one line.

So let’s come back here. So let’s select the main container first. And in the styling we go do spacing and let’s remove this padding here. And maybe for [00:53:00] the row gap as well as the column gap, we can reduce the. All right, so if we select diner container, and if we select the mobile view, we can see our text is not in the middle.

So let’s do that. We go to flex property, so we will change this to horizontal. We will make it everything in center aligned. And same goes for the rest of the two columns. Three. So let’s come back to our desktop mold, and now we can add three more containers. So let’s duplicate this. So it’s going to wrap just below this.

So let’s add two more just like that. So again, we just need to update the images and text. So let’s do that real fast. So here we have our boxes that we can link to any specific landing page or our category page. Now, once again, we are going to select [00:54:00] our main container. We go to style, and in the spacing section we are going to add some margins.

So maybe we can add 50 for the top and 50 for the bottom, or maybe we can add 10 on the top so that we have a, so that we don’t have much gap between our title and the grid. All right, let’s update this and now we can move on to the next part. So let’s insert after, and we are going to duplicate this same heading here.

So let’s click on duplicate, and we can now move this to the bottom and let’s change the text. And next we will search for post grid block from the Spectre itself. And here we have the grid of our block posts. That we can now edit from the right hand side menu. So we will keep it alignment as [00:55:00] left. We will keep the post type as posts and we can also select any specific category.

So we can choose one, but I’m just leaving it as it is. You can define how many posts we want to see here, or maybe we can do an offset starting point. So now we can just play around with all the settings here so we can change the number of columns. We will leave it on three, make sure we keep it on equal height.

So first we go to content and we are going to hide everything here. We just want to show the title. And after that we will also hide this read more link. And now if we go in the style section, we can change the layout. So let’s keep it, uh, five pixel padding here, something like this. Or maybe we can do 10 pixel.

And [00:56:00] now for the title, we are going to change the font size a bit, so maybe we can select 20 here or maybe 22. And we don’t have the feature image for this blog post, so that’s why it’s showing empty. So we will fix that later on. All right, let’s update this here and refresh the front end again. Now let’s go ahead and do our final segment that is adding this newsletter box.

So we will come back here in our page editor, and let’s open the list view first. And we click on this container. And then we’ll click on insert after. And here we are going to add a container first, and we’ll choose a single column. And in the style we’ll add a background as color. And we will choose our light yellow shade.

And in the spacing, let’s add a padding. So we will [00:57:00] add 50 from the top and 50 from the bottom. And again, we will add the 50 pixel margin from top and 50 pixel margin from the bottom. And inside this, we are first going to add a heading. And let’s choose this as H three Center aligned. We will add a subheading as well.

Let’s enable that and let’s copy this text here. All right, now let’s update this. And in order to add our form, we have already added the Convert kit plugin. So we see this convert kit option at the very bottom. And if we scroll down a bit, we need to configure our API for this website. So let’s update this page here and let’s open our backend in a new tab.

So here, if we go in the plugin section, we already have the convert kit plugin, [00:58:00] so let’s go to settings. And here we can enter our api. I key. So in order to get our API I key, we need to log in our Convert Kit account. So you can go ahead and create a free account. I will leave a link in the video description below.

So if you wanna learn more about how you can use Convert Kit to capture email IDs and how you can use that to build your business online, then we are going to cover all of that in a separate video. So make sure you subscribe to the channel and hit the notification bell so that you will get notified once that video is live.

So here I am logged in in my Convert Kit account and in order to get the a p I key, we need to go to settings. And here at the bottom left corner here, we have Advance and we click on that and here is our a p i key. So let’s copy that and we will paste it here. And now we need to get the a API secret. So here it is.

For that we need to click on show. So let’s click on this and now we’ll [00:59:00] copy it. And then paste it here. And now we just need to click on save Changes. Alright, so now our account is connected. So we can see our account name on the very top, and if we want, we can add a default form on all the pages and posts.

So you can select all your forms. We will be listed here from your Convert Kit account. So that’s the best part about the Convert Kit and WordPress integration. You get all the options, which makes it very easy for you to integrate forms and landing pages inside your WordPress website. So right now we don’t need to do anything here.

We can now come back on this page. Let’s refresh this once and let’s scroll down at the very bottom. And here we can see, we now have the option to add forms and we can add our landing page, or maybe we can add a tag. So once again, we don’t need to use this one. We will click on this heading and then we will click on insert after.

[01:00:00] And here we will choose a convert kit form block. Let’s click on this. And now from the right hand side, we are going to select the form. So I’m just going to use this default form that comes with the account. So let’s select that and here is our form and let’s see how it looks in the front end. So let’s refresh the page.

So here is our newsletter form. We have the email address and the first name, and we can use that to build our email list. Now if you come back here, we select our main container at we go do style. And in the spacing, we can remove the bottom margin so that it’ll get attached with our footer. So let’s refresh this and now this one looks much better.

All right, so now we are done with our homepage as well. So if you go ahead and click on this travel tips as our category. So this is how our category page looks like. And if you click on any of these posts, [01:01:00] this is how our post page will look like. And at the very bottom, we have the social share. Post navigation, and we also have the related posts.

So this is how we can create our custom travel blog on WordPress using free theme and free plugin. And if you want to download this exact travel blog to use it on your website, then I will leave a link in the video description below. You can go on that link and you will find the step-by-step process about how you can import various elements in your WordPress website and get your travel blog done in no time.

So you will find a step-by-step tutorial there as well, and you will get a zip file with all the things that you need to build this exact travel blog. So if you like this video, then make sure you give it a like. And if you want to see me create more videos like this, then make sure you subscribe to this channel and hit the notification bell so that you will get notified whenever I upload the next video.

That’s it for this one, and I’ll see you in the next video.