Home / Articles / Website Creation / Step-by-Step Guide to Build a Personal Website Using Zyro (Hostinger Website Builder)

Step-by-Step Guide to Build a Personal Website Using Zyro (Hostinger Website Builder)

A personal site can act as a point of professional reference that is easily accessible. Aside from showcasing some of your skills, you can use the site to build a stronger profile. For example, add some projects you've worked on along with your resume.

When creating a personal website, website builders serve a very important purpose in this day and age. They offer those who aren’t technically inclined an easy way of establishing a web presence.

Hostinger Website Builder (HWB), or Zyro, is an easy-to-use website builder offered by Hostinger (read our Zyro review here). Even as it enters what is becoming a crowded industry niche, HWB comes with its own unique selling points. It’s clean, easily manageable even by website builder standards, and starts at hard-to-beat prices – in short, ideal for those who want to set up a personal site.

There are other platforms you can use such as WordPress and Weebly but in both cases – HWB still comes up cheaper and trumps in terms of the learning curve.

In this article, I’m going to go over the basics of building a personal site with Zyro / Hostinger Website Builder. This starts from a plan selection all the way to some basic tips to improve your site.

Note: For your information – Zyro, the website builder launched by the company behind Hostinger, is now rebranded as Hostinger Website Builder and it's offered in all Hostinger shared hosting plans. We have updated this guide accordingly with new video tutorials and instructions.

1. Register a New Hostinger / Zyro Account

The first thing you need to do is signup with Hostinger Website Builder / Zyro.

You will need to make a payment to start using Hostinger Website Builder but don't worry – the company offers a 30-day money-back guarantee. If you decide to cancel your account during the first 30 days they will refund your money in full with no questions asked.

Once you’ve done with the registration, you will be brought to the Hostinger user dashboard.

2. Launch Your In-Construction Site

At the welcome screen – you'll see the Hsotinger user dashboard – all-in-one portal where you can manage everything about your websites and emails.

To start creating a website using Hostinger Website Builder – navigate to “website” at the top menu. Select “create or migrate a website” on the next page.

Choose the type of website you want to create. For our demo, we will select “Portfolio”. Next, create a new website using Hostinger Website Builder. You can either decide what domain to use right away, or you can build first and link your website to a domain later.

3. Choose a Template

The platform offers 18 categories of templates for websites with different purposes. For this guide, we’re going to be building a simple, personal website. Browse through the selection of templates to see what you like. Hovering over a template will allow you to either preview it or start working with that template.

For this guide, we’re going to be building a simple, personal website. Browse through the selection of roughly 38 templates to see what you like. Hovering over a template will allow you to either preview it or start working with that template.

When you know which one you want, hover your mouse over that template then click ‘Start Building’. This will bring you to the Hostinger Website Builder / Zyro editor.

4. Customize Your Site Template

Hostinger Website Builder / Zyro works on a system of building blocks. These blocks are called ‘Elements’ and can be added, deleted, and modified. Imagine a set of plain building blocks that you can shuffle around and use to create something.

Adding Elements

On the top menu bar there is an option to add elements. The platform comes pre-configured to offer a specific set of elements which are commonly used to create personal websites. This includes text (which actually places a resizable box you can add text to), images, and more.

To add an element to your template, click the ‘Add elements’ option, decide which type you want. Next, left-click on it and while holding your mouse button down, drag it over onto your template. It is now that you’ll notice the grid system.

Following the Grid System

The grid system appears as you’re dragging elements onto your template (or moving existing elements around). These blocks serve as basic guidelines to let you see the permissible spots where you can place your elements.

Any placements or resizing of elements need to follow the basic sizes of each square in the grid system. Consider it a sort of ‘minimum size or resize guideline.

Editing Elements

If there are existing elements on your page you don’t like or want to move, this can easily be fixed. Clicking on the element in question will highlight it with a blue outline. From there you can either drag to move, resize, or choose to edit it.

For example, highlighting a text box will display an option to ‘edit text’. You will see changes being made immediately as you’re doing them. It’s exactly the same as you would expect when using a text editing program.

Working With Sections

At the bottom of your main page, you may notice an option to ‘add section’. Sections are what separate your pages in Hostinger Website Builder / Zyro. Having websites made up of one terribly long page isn’t very user-friendly.

Using sections helps improve the user experience and allows you to call their attention to different parts of your website via the navigation menu. For example, for a personal resume site, you might like to have separate sections such as ‘Skills’ and ‘Portfolio’.

Similar to templates, the platform has pre-built sections you can choose from when you click ‘add section’. These will match your current template. There is also the option to use a blank section which you can customize on your own.

5. Check for Mobile Friendliness

Make sure your website is mobile-friendly before hitting the “Publish” button.

When building a website today it is important to realize that many users are now using mobile devices to view web content. This means that your site needs to be properly formatted for those devices.

Hostinger Website Builder / Zyro does this for you automatically, but you can also check on your own. On the top navigation bar there are icons for a desktop or mobile device. Clicking either of those will toggle the view so you can see if that version of your site looks all right.

When you’re satisfied with how your personal site looks in both desktop and mobile format, simply hit the ‘Publish’ button on the top right-hand corner to start getting visitors.

6. Add a New Page

To add a page, click on the “Pages and Navigation” tab on the left-hand side of the editor. Click on the Add Page button at the bottom of the list of pages. Decide a name for the page – this will be your new page’s title. Customize the page by adding different sections, text, images, and other elements using the drag-and-drop editor.

7. Add a Blog to Your Site

A blog may be a good idea for a personal site. You can do this easily in the Hostinger Website Building Platform.

To add a blog, click on the Blog tab on the left-hand side of the editor. Click on the Add Blog button at the bottom of the list. This will generate a blog with three dummy posts. Add a blog post by clicking on the “Add Post” button. Fill out the information for the post – such as the title, content, and images. Click on the Save button when you are finished.

8. Using Built-in A.I. Tools

Aside from the main website builder, Zyro also comes with some other handy tools for personal websites that you can make use of. 

AI Heatmap

Images are usually the most striking parts of a website. However, even within images, there are hotspots that normally call for attention. Use of this can help – for example, if you want to be sure that you’re calling attention to the right focus area in an image, such as your product.

The AI Heatmap does this for you. All you need to do is upload your image and the tool will show you where user focus is drawn to.

AI Writer

This is perhaps conceptually the most exciting part of Zyro. I say ‘conceptually’ because the idea is awesome, but since they’re still new, it might need some kinks worked out of it. The AI Writer basically helps you generate usable text.

If language isn’t your strong point, you can use AI Writer to help you build some basic content for free. There are limited categories of what it can generate at the moment, but I anticipate more to come.

Logo Maker

When I first started building sites, looking for a logo was one of my biggest headaches. Free logo generators aren’t really free in many cases. Zyro offers you the use of their logo maker for free and it’s quite easy to use as well. More than sufficient for starter sites.

Demo: Try It Yourself (Free)

You can now try out Hostinger Website Builder with a free demo account. No signup or credit card info needed – just click the link below and try things out.

Not ready to signup yet? Try it out with this demo account > Click Here

More Tips on Creating a Stunning Personal Site

Setting up a stunning personal website isn’t an easy task, but thanks to tools like Zyro, it has become much easier today. There is a great variance in how great sites can look and behave but remember – your site does not have to be the best.

Many new website builders become overly obsessed with creating the perfect site. In the process, they forget about what matters the most – themselves and their target visitors.

Here are some quick tips to keep in mind when building a personal website with Zyro.

Build for Speed

Sometimes, less is more. Having fewer elements on your page can speed up site performance which is great for your visitor’s experience.

Don’t Over-image

Images may look stunning, but it is text that helps the most in capturing visitors from search engines. Try to balance a combination with both.

Define Your Structure

The way a site navigates is important to your user experience. Try to avoid confusing your visitors, especially if you’re building a personal site for professional use. If you’re unsure about this, stick to Zyro’s templates first to begin with.

Use Zyro Resources

You might not use everything in Zyro, but they can still help. For example, you only need one template, but draw inspiration from their other templates to help give you ideas in modifying the one you've chosen.

Tell a Story

The most effective sites have a strong identity. These sites often clearly represent their owners and have clear characteristics. 

Hostinger Website Builder / Zyro Pricing Plans

Zyro Plans – Not the Best Deal

Zyro Pricing Plans

If you visit Zyro website – you'll see that there are two main categories of plans. The first set is for normal websites, while the second set covers eCommerce sites. Which you choose depends on what type of website you’re looking to build.

However – these two plans are not the best deal you can get – as you are limited to hosting one website on the Zyro platform. If you head over to Hostinger site – you'll see the company is offering a much better deal with their Hostinger Website Builder offer.

Hostinger Website Builder Plan

Hostinger Website Builder Plan

The Hostinger Website Builder Plan offers you the same features you get at Zyro plus a bunch of perks:

  • Free domain name
  • Free email hosting
  • eCommerce features included for all plans
  • Host up to 100 websites
  • Unlimited free SSL certificates
  • Free 3 months for first time customers

Final Thoughts on Building A Personal Website

Using Hostinger Website Builder to create a personal website is definitely a recommended choice. It starts from the most basic concepts, making things easy even for the absolute newest among us in building websites.

However, they are also extremely scalable – at strong price points.

For what costs less than what you’d pay for just hosting on many other sites, you can build a complete website in a matter of hours, depending on how highly personalized you want it to be. 

Be like Zyro – start small and aim big. You can scale up your website with them as you grow.

Read More

Photo of author

Article by Jerry Low

Keep Reading