If you plan to create a blog site with Zyro, this
video is for you. We will do it in several steps, but, first, let's look at the final result. This
is our blog. The first element is the header, the second one is a headline section
with an image, heading, and some text, another section is Latest Articles with a couple
of blog posts, then we have the YouTube section showing a couple of videos, Meet Our Team, and, finally, the footer. Let's start! Zyro
and Hostinger Website Builder have over
140 templates that are really good-looking and
mobile-friendly, 16 of which are for blogs. Let's go to blank templates. We'll choose this one
and click "Start building." We are in the editor, and we see nothing here. Let's enable
our navigation first. How to do it? To enable the navigation, add
one page (any page), go here, click "Add page", or we can simply show the
home page in the navigation by clicking settings and Show. Great, now we see our header. Let's
add the blog functionality. I
f you have created a site with Zyro AI. You may already have one.
When editing the blog, it will give you four sample blog posts, which you can delete or
edit later. I will start my website-building journey with the header. Let's click on it. Now
we see some settings. Let's click "Change logo." Here, you can upload your logo or hide it if you
want to or change the logo width and its position. I want to center my logo. Great, now it's
centered. It is surprising that you can find here other s
ettings related to navigation.
For example, menu item spacing, you can decrease or increase it, and settings layer related to
layout. For example, you can make your header sticky or change the menu position. It is enough
for my header. I will proceed to another section. Now, we can start creating our body content for
the first fold. I will add the headline section. To add a section, click "Add section." We will
go with headlines. Let's press headlines, and the first one will do for us. Let'
s click to choose
it. It already contains all the elements we want but we should customize it. Let's
start with the image. Click on it, click Change image, and let's replace it. We
will use free stock images provided by Zyro. Okay, this one looks great. Click "Add
to page." We have changed the image, and we can customize it a bit. Here you can
write your text and specify the action on click. We have here two options: the image will open
in a full screen, or when somebody presses on it - it
will go to the image page. I'll
go with nothing it's enough for images. Now let's continue with the next element. It is
heading. Let's press on to edit the text. First, we change it to heading 1. Make sure that every
page starts from H1 and contains only one H1. It is important for SEO. It is too big for us. Let's
make it 72, and then we'll increase the text box. Paste our text or write it.
Okay. let's paste some text here. Move this text box here, make it
wider, this will do, click edit
text, and we will increase the size of
the font and the text alignment. Okay, now it's better. Let's continue with the
button. Let's move it here, edit it - click Style, and make it rounded. Okay, it will do.
What about the size? It will be 20. Finally, let's change the button
text here. You will specify the link, but you will not touch these settings if your
link is an internal one. Now some final steps. Let's decrease the image size a bit.
Okay, it will do and move the elements up. Now,
we have some unnecessary space in
our section. Let's decrease the section. Okay, it will do. How do you like this
section? Blogs tend to have a list of the latest articles on the home page. We will
do the same. We already have a Blog section, but, first, let's change the heading. Let's
click on the heading. We have heading 1, but it should be heading 2. Great, now it's heading 2.
Let's paste our text and make the text box wider. Now, it's better, but we have
the unnecessary space here. We
can play with the blog section.
Let's click on the section and settings. Here, we can control the
number of posts per page. For example, I want just two posts a page. Great,
now you can see the pagination. What about columns? What if I want three posts?
Okay, let's increase the number of posts per page, and now you can see three posts here. There
are some settings for posts. Let's see them. Click on a post. Here, we can
show posts from some categories, and you can choose your category. You
can have multiple categories or just one. Let's see the background settings.
Here, you can specify the color or add an image. Now, I am to add the YouTube
section. If you are running a vlog like us, it is a good idea to feature some of your videos
on the home page. And Hostinger Website Builder has a pre-built section for it. You just go and
click "Add section." We will need a video section. Let's scroll down, and here you
can choose your favorite. This one. As you can see, it already con
tains the heading,
text, and videos, but we should customize it. Let's start with the heading. It is heading 3.
Okay, it will do. You can also use a heading 2. Let's paste our heading. Great, let's paste
our text and increase its size a bit. It will be 18. I also want to add the Subscribe button
below the text. Let's move the video down a bit. Click "Add element." You have 13 elements here.
We will choose this element. Let's move it up and edit it. The button text will
be Subscribe and the
n goes our link. The link will open in a new tab and will
be nofollow. Now, let's change the color. Okay, the fill color. I'll paste my color here,
and now it resembles the YouTube subscribe button. Let's make the button rounded Okay, now it looks better. What about video
settings? Let's click "Edit video." Here, you can specify your link and enable autoplay or loop, but
I would not advise auto playing the video because it will slow down the page. To build trust, we
can include the team sec
tion on our home page. We will use one of the pre-built testimonial
sections for it. Let's click "Add section" and look for testimonials. Great,
now you can choose whatever you want, but I will go with this option. It's here, but
we forgot adding a heading. Let's click "Add section," we'll go with the blank section, and
then we add the text element. It should be here. Make it wider. Okay, this will do let's decrease the section
height. We can customize the elements inside the section. For e
xample, I do
not want it to be heading 6. I want it to be paragraph 1. Great, now it
looks better. Here you can follow the same procedure. If you do not like the position
of elements, you can easily move them around. Now, it looks kind of creative. Let's move on to the next step. Our final
section - the footer section Zyro has 10+ ready footer layouts. To add them, click "Add
section." I'll go with subscribe to newsletter. You should choose. Do you want to add your footer
sitewide, here, o
r add it only to this page? I'll go with a sitewide option. Let's
click to edit. Now, we see our footer. We can edit the elements inside the footer. I'll
not touch this text. I'll just edit the form. Click "Edit form," and now you should specify
your email address, so emails arrive at the right place. We can also add new form fields
here. Let's say we want to add the Phone field. Click add new form field, then we should
choose "Short answer", and here we can find some settings. You will wri
te your label and
placeholder. Then we should choose a field type. You should choose "Phone" because
it will enable the form validation and make this field required if you want to. To
turn on the form validation, choose the field tab correctly. For example, for email, choose
Email, for phone - Phone, and others will be Plain text. The size of the social icons seems too
small. Let's change it. Go to Style and make them like this. It will do, great. And also do not
forget to specify your soc
ial profiles here. There are also some layout customizations. You can
display icons vertically, but I do not need it, and change the spacing. Okay, I'll choose
the first option. Close the settings. Now, it's better. Our home page is almost ready.
I should check whether it's mobile-friendly. It is a very important step, and you should
do it for every page. Let's scroll to the top, click view on mobiles, and let's scroll
to the bottom. Everything is fine, and here you may want to increase the
spacing
between posts. Click to edit the blog list and increase the "Column gap." Okay,
now it looks better. Let's continue, this is our YouTube section. This button shouldn't
be so close to the heading. Let's increase the size of the section and center the button.
Great, this text is way too far from the image. We have problems in the footer. Let's
increase the size of the footer a bit, then we take social icons, and place them below
the form. If you want to, you can center them. Now it
is mobile-friendly. Let's create a blog post.
Do you need categories for your posts? If you do, it's time to create them. Go to the blog tab,
press a gear icon, and click "Add category." I'll name it Hostinger Builder. Press the check
box, close this window, and add a new post. We have a new post here. Now, let's
click and change post title. Here, you will find different settings. First, let's
specify the post title. It is our post title. Then we should specify the meta description. You
ca
n see that our URL is already SEO-friendly, but we can shorten it a bit. Okay, now it's better.
You can also add a post writer if applicable, change the post date, or schedule the post. Now, let's specify the category. Click select,
and we have our category here. Let's select it. Great, now is our final step. Let's add our
featured image. You can upload your image from your computer or use a free stock library provided
by Zyro. Okay, let's click save, and we're done. You can see that there i
s a title, meta
description, category, and date. Now you can write or paste your text into the section
saying "my post content." Let me paste my text. Let's click edit the section. As
you see it doesn't look so good. Now I'll make some edits to make it more readable.
Here, we have some hints. For example, this one is our heading 2, this one, and this
one. Let's do it step by step. Click "edit text." Okay, this looks like a list to me. Let's
make it a list. Okay, now it's much better. Then
heading 2 again. We are continuing.
This is a big list. Let's select the text. Again, we need a list. And I will pause this video to
make other headings and lists. Okay, I have finished. Our blog looks better and
more readable, but it doesn't contain any images. How to add an image? First, let's edit this
text, and suppose we want to add this image here. Let's click "Add element" and choose
the image element. Let's move it up. Okay, now it's centered. Let's change the image. Select our imag
e. We have changed the image. Great, now we have
some teaser, and the final step: add some links. And web address. You should enter your address
here. If you link to internal pages, make sure that this item is unchecked and click save.
Now we have a link here. Let's preview our post. Okay, this is our image. This is it! You now know how to create a blog
site on Zyro and Hostinger Website Builder. Drop your comments below or ask your questions!
Comments
Nice