How to Make a Website From Scratch: A Beginner’s Guide

How to Make a Website From Scratch: A Beginner’s Guide

Having a website helps grow an online presence, whether that be your personal blog or business, by connecting you with a broader audience. A website can also become a platform for sharing your opinions and skills, creating opportunities for personal or work-related projects.

This article will help you turn your website idea into a fully-functional website – pick a suitable platform, get a web hosting plan, and choose a memorable domain name. We’ll also give you tips on how to optimize it.

As an example, we will show how to make a high-quality website using the WordPress content management system and Zyro website builder. Both of these platforms are beginner-friendly, not requiring any coding knowledge.

We will also share what to do after publishing a website and answer some of the most frequently asked questions. By the end of this article, you will be able to create your first website from scratch.

Editor's Note

Here at Hostinger, we’ve created every website imaginable. If you get stuck along the way, don’t hesitate to contact us and we’ll walk you through it step by step.

Editor

Darius Grigorjevas

Chief Customer Officer

Video Tutorial

If you prefer learning from a video, check out this tutorial on how to build a website from scratch using WordPress.

3 Steps to Do Before Creating a Website

Before creating your first website, you need to understand these three essential elements – what’s a website building platform, web hosting, and a domain name.

Pick the Right Platform: CMS vs. Website Builder

The two most popular platforms to build a website are content management systems (CMSs) and website builders.

Remember to do some research before making the final choice, as using the platform that’s more suitable for your needs will make the website building process much more manageable.

A CMS is a computer software for designing, managing, and publishing website content. In this article, we will focus on WordPress as it is the popular CMS platform, powering over 42% of all websites on the internet.

On the other hand, a website builder is a program or tool that simplifies website creation even more. Zyro is one of the website builders that offer high-quality templates and a user-friendly drag-and-drop interface.

Even though both platforms give a way to build a website without having to code, here are where the two differ:

CMSWebsite Builder
ProsFlexible. Suitable for all types of sites, from small personal blogs to large eCommerce websites.Scalable. More opportunities to expand your site’s functionalities with extensions, such as plugins and add-ons.Community. Large communities with active web developers.Beginner-friendly. Faster setup and intuitive interface to help create a high-quality website.Dedicated support. Offers direct support via live chats, emails, or phone calls.Security and maintenance. Provides more robust built-in security, backups, and regular maintenance.
ConsLonger setup. Requires more time to set up, primarily due to choosing a web hosting company on your own.Lack of dedicated support. Usually, CMSs rely on community support only.Security issues. Users are responsible for choosing a secure web host and extension.Budget. Set pricing plans make it harder to adjust costs to a personal budget.Less flexible. Fewer tools and extensions, making it harder to create a personalized website.Limited ownership. Lack of access to the website’s server, which automatically stores website files. Therefore, users can’t fully customize their websites.

To choose the right website building platform for your needs, consider the following factors:

  • Technical knowledge. Some platforms have a steeper learning curve than others. Consider your coding and technical skills to make the web development process more manageable.
  • Cost. Find a platform suitable for your budget. Also, check whether you will be able to upgrade once your website gets more traffic.
  • Support. Depending on the website’s type, some might need more help than others. For example, a busy professional website will need direct support right away when there is an error. However, a small personal blog can rely on community support alone.

Get a Web Hosting Plan

Web hosting is a service that publishes a website or web application on the internet. Before choosing a hosting plan, decide what type of web host is suitable for your needs. If you are using a CMS platform, then it is essential to find a reliable hosting provider.

This is because most website builders use their own hosting providers. So, move forward to the next section if you have chosen to use a website builder.

To find a suitable web host, think about the type of website you are creating and consider these elements:

  • Cost. Some web hosts charge more than others. Make sure to adjust the price to your overall budget.
  • Features. Consider the bandwidth and storage to see if the hosting provider can support your website files and the targeted amount of visitors.
  • Security. Check the built-in security measures, such as automated backups and an SSL certificate.
  • Support. Different hosting companies offer their own set of support, either through a live chat or email. Make sure to select a web host that can provide reliable support 24/7.

After finding a suitable hosting, take a look at the different plans. Ultimately, choosing a hosting plan depends on the type of website you want to build.

However, don’t forget to check the following features:

  • Free domain name. Hosting companies like Hostinger offer plans that come with a free domain name registration, at least for the first year. Selecting a plan with this benefit will lower the initial costs of making a website.
  • Suitable storage. Adjust the storage capacity to ensure that it will be enough for all of your files, images, and videos without reducing the website speed.
  • Great bandwidth. Opt for unlimited bandwidth so that your website can handle large traffic at any time.

If you are looking for a beginner-friendly hosting service to create a small to medium website, we recommend using shared hosting. Hostinger offers a Premium Shared Hosting plan for $2.59/month with a free domain name registration, along with unlimited bandwidth and databases.

Plan Features
Websites
Email Accounts
Bandwidth
Free SSL
Free Domain
Allocated Resources

Single

$1.39/mo

1
1
100 GB
1X

Premium

$1.99/mo

Unlimited
100
Unlimited
2X

Business

$3.99/mo

Unlimited
100
Unlimited
4X

On the other hand, Virtual Private Server (VPS) hosting gives access to a more secure and flexible server, but using it requires some technical knowledge.

The price for Hostinger’s VPS hosting plans ranges from $3.95/month to $9.99/month. All of the plans come with a dedicated IP address and 24/7 live chat support.

For large websites, such as online stores, cloud hosting offers excellent reliability. For example, Hostinger’s Cloud Startup plan costs $9.99/month, comes with a free content delivery network (CDN) and daily backups.

Choose a Memorable Domain Name

Lastly, choose a domain name for your website. A custom domain name is not only essential to help visitors find a website, but it is also part of branding. A memorable domain name can also drive high organic traffic.

To find the right domain for your website, consider the following elements:

  • Recognition. Choose a domain that is short and clear to avoid visitors misspelling it. Using familiar words will help visitors to remember your domain name easier.
  • Availability. Use a domain checker to check whether the desired domain name is available. If not, try changing the extension or looking for an alternative domain name.

Domain Name Checker

Instantly check domain name availability.

  • Cost. When choosing a domain that fits your budget, don’t forget that different top-level domains (TLDs) have different prices. A domain can cost $0.99-12.99/year with Hostinger.

Pro Tip

If you want to establish a social media presence, make sure the name is available not only on domain name registrar, but also on social media platforms. It would be unfortunate if you bought a memorable domain name only to find out that the name and its alternatives already have social media profiles associated with them.

Editor

Laura Z.

Content Marketing Expert

Then, register your domain using a trustworthy domain name registrar. Thankfully, most website builders and web hosts offer domain name registration with some pricing plans. However, getting your own domain name will require further research.

The first step to purchase a domain on your own is to look for an Internet Corporation for Assigned Names, and Numbers (ICANN) accredited registrar. Different registrars will offer their own set of services, prices, and packages.

It’s vital to register with a trustworthy registrar since it will store all of your related information. In addition, the domain registrar can change your data on the domain database.

How to Make a Website With WordPress for Free

Once you have set up the platform, hosting, and domain, it is time to make your own website. We will share a step-by-step guide on how to make a website on WordPress.

WordPress is highly flexible and scalable. The platform is suitable for any type of website, and its extensive gallery of plugins makes it easier to grow your site once it becomes more prominent.

Follow WordPress tutorial below to create a new website:

1. Install WordPress

WordPress is a free and open-source CMS. There are three main ways to install WordPress:

  • Auto-installer. Some web hosting services, such as our WordPress hosting, have an auto-installer feature for the software on its control panel. This WordPress installation is the most beginner-friendly option.
  • Manually. Create your own database for a manual installation. The process will take longer, but it is still straightforward to follow.
  • Locally. Install WordPress on your computer to test out changes before going online. Download the latest version of WordPress and install WordPress locally using MAMP for macOS or WampServer for Windows.
Download WordPress and use it on your site.

2. Choose a WordPress Theme

Website design is essential to attract visitors. Having a visually appealing design can also improve the user experience on a website.

Hiring a web designer to make a professional-looking website is an option, but it could be expensive. Luckily, the WordPress platform offers a user-friendly interface to help any user with web design.

There are over 8,800 free and premium WordPress themes in the official WordPress themes repository. Some designs are suitable for all types of websites, while others focus on a specific purpose:

  • eCommerce. For online store designs, most themes prioritize user experience, product pages, and payment gateways. Examples of popular eCommerce themes are Divi and GeneratePress.
  • Blogging. Prioritize SEO-friendly designs with excellent navigation. Themes like Astra and OceanWP are great examples of blog website designs.
  • Portfolio. To showcase previous projects, choose a portfolio theme that is not distracting and can highlight your work. For example, use simple WordPress themes like Clean Portfolio or Air.

The average price for a premium theme is $50 for a one-time purchase. It is possible to start with a free WordPress theme and get a premium theme once your site grows more prominent. Some premium themes offer additional tools and features to optimize WordPress sites.

To install a theme, head to your WordPress admin panel and follow these steps:

  1. Head to Dashboard -> Appearance -> Themes and select a theme for your site. To view the full theme gallery, click on the Add New Theme button.
Themes on the WordPress dashboard
  1. Browse through the theme gallery and click on Details & Preview or the Preview button to see how it looks on a website.
Selecting Details & Preview to see how a WordPress theme looks on a website
  1. To use the selected theme, click on Install -> Activate. However, to return to the gallery, press the X icon on the top left corner.
An example of the WordPress theme Bravada for your website
  1. Click on the Customize button to edit the design.
Clicking to customize the active WordPress Bravada theme
  1. Personalize the theme by changing the layout, colors, and fonts.
Customizing the website title of the chosen WordPress theme
  1. Click on the tablet or mobile icon on the bottom left corner to display the theme on a smaller screen.
Checking how the WordPress theme looks on a smaller screen size

With a premium theme, you will have to upload its files manually after making a purchase. Head back to Dashboard -> Appearance -> Theme -> Add New Theme and click on the Upload Theme button. Select the theme’s .zip file and Activate it after the uploading process is complete.

Uploading a premium theme to WordPress

3. Install WordPress Plugins

One of the advantages of building websites with the WordPress platform is its extensive gallery of plugins. A plugin is a piece of software that extends a WordPress site’s functionality. With plugins, users can create any type of website without having to learn how to code.

WordPress has over 59,000 free and premium plugins, for various purposes – from adding security to sharing website content. The benefits of using WordPress plugins include:

  • Usability. Help users navigate between the web pages better by optimizing the website’s menus.
  • Additional tools. Expand functionalities by adding tools like social media buttons or improving a website’s SEO.
  • Performance. Strengthen the website’s speed, security, and user management.

To install a WordPress plugin, head to Dashboard -> Plugins -> Add New. Browse through the plugin gallery or write a plugin name in the Search plugins box to find a specific one. After finding the plugin, click on the Install Now button and Activate.

Adding new WordPress plugins.

For premium plugins, upload them manually after making a purchase. Head to WordPress Dashboard -> Plugins -> Add New, and click on Upload Plugin to install and activate your premium plugins.

Uploading premium WordPress plugins

Pro Tip

Note that installing too many plugins for a WordPress site can overwhelm the server resources. In addition, WordPress plugins are open-source, meaning some poorly coded plugins can compromise other parts of a website. Thus, always prioritize quality over quantity when it comes to installing WordPress plugins.

Editor

Domantas G.

SEO and Content Team Lead

Here are some of the high-quality plugins to optimize your WordPress website:

  • Contact Form 7 – creates customizable contact forms for your web pages.
  • WooCommerce – helps to add product pages and payment gateways easily. Suitable for any type of website to add an online shop.
  • Akismet – checks comments and contact form submissions to prevent malicious content.

4. Build Your First WordPress Page

When you build a website, there is an option to have a single page or multiple pages. If you opt for the latter, consider adding the following pages:

  • Homepage. The first page visitors see when visiting a site. A homepage needs excellent speed, content, and design to grab the audience’s attention right away.
  • About page. More information about a website, specifying whether it is a business or a personal website.
  • Contact page. A way for visitors to contact website owners for further inquiries.
  • Blog page. Adds new content to a site regularly, which keeps it updated.
  • Product or service page. Sell products and services on a separate page, mainly for an eCommerce store.

To build your first page on a new website, head to Dashboard -> Pages -> Add New.

Adding WordPress pages to your website

When you build a website page, prioritize informative and accurate content, along with user-friendly navigation. WordPress has built-in blocks to help with the content and layout. Press the + icon on the top left corner and browse through all the blocks to optimize a page.

WordPress sample page

With a blog page, there is no need to include anything on the page.

Simply head to Settings -> Readings and select A static page, next to the Your homepage displays section. Select the empty blog page on the Post page section and click Save Changes. Every time you add blog posts, WordPress will automatically display them on the blog page.

Editing WordPress reading settings

In addition, WordPress also has page builder plugins to customize web pages more freely. Some of the most popular WordPress page builders are Elementor, Beaver Builder, and WPBakery Page Builder. Most of them offer a drag-and-drop interface, pre-built designs, and content resizing.

The benefits of using page builders include:

  • Beginner-friendly. Create interactive and high-quality web pages without needing to know how to code.
  • Faster. Use pre-designed sections and templates to create different types of pages instead of building each page from scratch.
  • Additional features. Improve functionality and design by adding more features to web pages.

Note that some plugins are better suited for a specific type of website.

Use only one page builder at a time. Using different page builders simultaneously can potentially cause errors and slow down a website.

5. Create a Navigation Menu and Widgets

When you build a website, consider the user experience when accessing the pages. To improve navigation on your WordPress website, optimize its menus and widgets.

Start by creating a menu to help visitors navigate between pages. No matter what page they open, the website should show the same menu. Alternatively, create separate menus for different locations.

Follow the steps below to create a menu:

  1. Head to WordPress Dashboard -> Appearance -> Menus and write a Menu Name. Under Menu Settings, decide whether to add new pages to the menu automatically. Then, choose the Display location on the website. Click on Create Menu to finalize the process.
Editing menus on the WordPress dashboard
  1. Choose which Pages, Posts, or Categories to Add to Menu. Then, click on Save Menu to create the changes.
Saving the WordPress menu after editing it

Furthermore, consider installing the following WordPress menu plugins to optimize the design and navigation:

  • Max Mega Menu – provides a fast and responsive menu to help users navigate between the pages easier.
  • Responsive Menu – offers more than 150 customization options with a beginner-friendly and lightweight interface.
  • WP Mobile Menu – optimizes the website menu on mobile devices with a fast, simple, and responsive menu.

Other than creating easy-to-navigate menus, customizing WordPress widgets can also improve visitors’ experience. Widgets add additional content and structure to a website’s header, footer, and sidebars. Some of the most popular widgets include recent posts, calendars, and a search bar.

Some themes display certain widgets right away. However, it is also possible to create a custom widget. To do so, head to Appearance -> Widget. Press on the + icon to add more content using blocks.

Creating a custom WordPress widget

Follow these steps to customize widgets directly on the web design:

  1. Head to Dashboard -> Appearance -> Customize.
Clicking on the customize option to start editing a widget
  1. Select Widgets under the Customize menu to show the different areas to add them, such as Sidebar Right, Footer, Header, and Side Section.
Different areas to customize WordPress widgets
  1. Move around the blocks to rearrange the widgets or click the + icon to add more blocks. The changes will show right away.
More blocks to customize WordPress widgets
  1. Click Publish to save your customization. It is also possible to press the gear icon next to it to Save Draft instead.
Clicking publish to save the widgets customization

6. Optimize Your Website for SEO and Conversions

Search engine optimization (SEO) improves a web page’s ranking on Search Engine Result Pages (SERPs). Prioritizing SEO will help to drive higher traffic and position a website as a trustworthy source.

One of the best ways to improve SEO on a WordPress website is by using SEO plugins:

  • Yoast SEO – helps to optimize your site by providing automated technical SEO improvements and advanced XML sitemaps. Check our guide on how to use Yoast SEO on your WordPress site.
  • Google XML Sitemaps – automatically generates a complete XML sitemap for your WordPress website, making it easier for search engines to crawl your web pages.
  • Broken Link Checker – prevents search engines from picking up broken links on your site to keep its SEO performance consistent and improve user experience.
  • W3 Total Cache – minimizes download time by increasing the site speed up to 10 times.

Not to mention, SEO can also raise brand awareness. Certain business websites, such as technology companies, generate double the revenue from organic searches. SEO can help increase conversion rate by improving:

  • Site speed. The ideal website loading time is under two seconds. Fast site speed encourages visitors to look into more pages.
  • Images. Make a site more visually appealing to visitors by optimizing pictures and graphics.
  • Mobile-responsiveness. Improve website performance on mobile and touch screens so that visitors can open your website on more devices.

7. Scale Your Website

WordPress gives plenty of possibilities to scale your website. For example, small business websites can be turned into large eCommerce stores.

Here are some features to help scale your WordPress website:

  • eCommerce. Create an online store with a safe payment gateway and easy-to-navigate product pages. One of the best WordPress eCommerce plugins is WooCommerce, which can help create an eCommerce website faster and easier.
  • Booking. For a business website that requires booking, such as a hotel or a restaurant, booking plugins help customers check availability, reserve places, and make online payments.
  • Contact form. To stay connected with website visitors, give a simple way for them to contact you for further inquiries. Contact forms also reduce spam by preventing publicizing your email address.
  • Mobile-responsiveness. Optimize your website’s response to mobile devices, which generate 54.8% of global website traffic. By doing so, your website can reach more audiences and stay ahead of the competition.

Other than adding more features, make sure that your server suits the type of website you are making. When scaling your website into a different kind of WordPress site, consider:

  • Storage. Make sure to increase the storage capacity when adding more files, pages, and tools to a website. It will help prevent slower loading time as speed is still one of the essential aspects of a website.
  • Quality. When adding more information to a website, check the old pages and files to ensure consistent quality.
  • Security. Scaling a website often means more interaction with visitors. To keep your site and visitors’ data safe, check for solid WordPress security features.

8. Launch Your Website

Before launching a website, check for any issues that might affect viewing experience and usability. There are different ways to test a website before going live:

  • Family and friends. Ask someone you know to look at the website from a visitors’ perspective. Get feedback on the design, navigation, features, and mobile responsiveness.
  • A/B testing. Use tools like Google Optimize or Nelio AB testing to compare two versions of a website. This technique provides data-driven insights into which version works better.
  • Speed test. Having a fast website attracts more visitors to stay and browse through its web pages. There are tools to help check your site’s loading time.

Pro Tip

In addition to testing your WordPress site, check the website launch checklist first.

How to Make a Website With Zyro Website Builder

Creating websites using a website builder is even more straightforward. Zyro is a website builder that offers a user-friendly interface to create your own content and layout. In addition, here are some of the benefits of using Zyro:

  • Cloud hosting – more reliable performance and less prone to downtime.
  • Security – complies with the PCI standards for visitors’ private information.
  • Artificial Intelligence (AI) tools – helps with branding, marketing, and optimizing a website.
  • Fast setup – intuitive interface for editing and creating your own content.

Zyro is a visual-heavy builder, best for online portfolios, photography blogs, and media websites. Here are the steps to use this website builder:

1. Pick a Template

Choosing a template is an essential first step as it affects how your website shows content. Zyro has a unique feature called an AI website generator. With this tool, the website builder will ask a few questions after you select the Generate Website option – whether you want to sell products online and the type of website you are building.

Also, you will have to choose the following:

  • Button style.
  • Color palette.
  • Font style.
  • Additional features for your site – online store, blog, gallery, slideshow, contact form, subscription form, Instagram feed, maps, and video.
  • One from the three layout options.
Select how you want to create your website: use a template, or use Zyro's AI website generator

Alternatively, click on Choose a Template to view Zyro’s theme gallery. Follow these steps to continue:

  1. Choose from Zyro’s designer-made templates. They are divided into the categories, such as eCommerce, Services, Photography, Restaurants, Portfolio, Resume, Events, and Landing Pages.
Zyro desinger-made website templates to create your website
  1. To help decide what template to use, hover over the desired template and click on Preview. Zyro will show how the template looks like as a website.
Previewing how Zyro's templates look on your website
  1. If you have chosen to use the template, click on the Start Building button. On the contrary, click All templates to go back to the gallery.
Starting to build a template to make a website
  1. Select the Website styles icon on the left side to customize the Colors, Text, and Buttons.
Changing the colors to your website's template
  1. Use the drag-and-drop tool to change the page’s layout by clicking on an element and moving it to another area.
Using Zyro's drag-and-drop tool to edit your website's layout
  1. To test the design and navigation, click on Preview. Then, optimize its mobile responsiveness by clicking the mobile icon on the top right corner. Customize directly on the web page to change the mobile design.
Checking your website's mobile responsiveness

If you choose to change the theme, you will need to redo the customization.

2. Create the Main Page

The first page visitors see when accessing a website is the homepage, so make this main page informative and visually appealing. By doing so, they will stay longer on your site.

An effective main page can drive visitors to take the desired action, such as making a purchase or booking an appointment. To achieve this goal, consider these elements when creating the main page:

  • SEO. Include meta titles and descriptions to rank higher on SERPs and drive more traffic.
  • Media. Add a high-quality image or video to make it more attractive and engaging.
  • Menu. Show the different web pages you have, such as the about and contact page, to invite visitors to learn more.
  • Layout. Consider where to include important information for visitors to see first, such as the location to display a call to action.

With Zyro, every theme comes with a homepage. Either customize the theme’s homepage or make another page as the main page. To do so, click on the Pages and navigation icon in the upper left corner.

Clicking on the pages and navigation icon to start customizing the website

Select the page you want as a homepage and click on the gear icon and Make Homepage.

Selecting the make homepage option

3. Add More Pages and Sections

Even though Zyro themes come with default pages and sections, you should personalize your site by creating your own pages to make your site more authentic. If you are building a one-page website, add new blank sections or use pre-designed ones.

Meanwhile, multi-page websites often have an About Us, Blog, and Contact pages to give further information. When adding more pages, pay attention to:

  • Featured pages. Consider which pages to include in the menu.
  • Page hierarchy. Separate main pages with subpages and establish a clear page hierarchy to help search engines crawl your website better.
  • Trends. Take a look at other websites to check what pages attract visitors.

To delete or re-order the different pages, head to the Pages and navigation setting. To add a new page, follow this guide:

  1. Under Pages and navigation, click on the Add Page button.
Adding another Zyro page to your website
  1. Choose a layout from the theme or add a blank page. Alternatively, click on the Add blank page box to create your own design.
Selecting layout for your new page
  1. If you have selected Add blank page, choose which elements to add to your page. The elements available include Text, Button, Image, Video, Instagram Feed, and Contact Form.
Adding elements to a newly created blank page
  1. Other than the elements, there are also sections to divide the page better. When you click Add Section, the website builder will give an option for you to either Add blank section or select a premade one. There are different categories for the sections, including About and Headlines.
Adding a new section to your newly created website page
  1. After finishing the page, head to Pages and navigation to optimize the page. Click on the gear icon next to your New page and select Page Settings.
Selecting the page settings to further customize the page
  1. Under the General setting, change the Name in navigation and Page URL to describe the page. Then, under the SEO setting, add a Page title and Page description to invite visitors to click on your site from SERPs. Press the Save button to finalize the process.
Page SEO settings window

4. Optimize Your Site’s Navigational Structure

When designing your own website, consider the user experience. Visitors should be able to navigate and find all information without any trouble.

To achieve this goal, organize your menu to help visitors navigate when browsing through the pages. In addition, choose the most important pages to feature on the menu. Keep in mind that website navigation also affects conversions.

Here are ways to improve your website navigation:

  • Limit menu item. Include only up to seven pages on your main menu to avoid confusion and crowding your page.
  • Analyze responses. If you see a page that does not receive enough visitors, move the information to another page and take out the page from the main menu.
  • Mobile responsiveness. Menus often look different on mobile devices, so make sure that they are still easy to navigate.

Other than the order of the main menu, its location on a web page is essential to user navigation. To help visitors browse through your web pages efficiently, customize your header and footer.

Header

At the top of a web page, a header often consists of a logo, website name, and menu bar. By having an easy-to-navigate header, you invite visitors to explore more.

On Zyro, customize the header by hovering over the menu session on the drag-and-drop editor and clicking on the gear icon.

Clicking the gear icon to customize your website's header

Under the Header settings, make changes to the following features:

  • Layout. There is an option to Make header sticky to keep it on the top of the web page, even as visitors scroll down. Other than that, change the Menu position, Item spacing, and Padding according to your preference.
  • Logo. Choose whether you want to include a logo, then adjust Logo width and position and Menu item spacing.
  • Shopping bag. Only have this icon if you have an online store.
  • Style. Change the Header background, either by using a solid color or adding an image. In addition, select the Website, Header text, and Hover colors.
Zyro's header settings

Footer

Similarly, a high-quality footer invites visitors to stay on your website and explore more pages. To achieve this goal, add navigation links and essential information at the bottom of the website. Most footers include contact information, social media icons, copyright, and links to other pages.

A footer signifies that the user has reached the bottom of the page. The links on a footer are often for more heavy-text pages. For example, most online stores include terms and conditions and refund policies.

With Zyro, the theme will automatically generate a footer. To edit the premade elements, click on the element and select the Edit button on top of it.

Editing social icons on Zyro's footer

To customize the Footer, click on the section and select the gear icon.

Clicking the gear icon to customize your website's footer

It will show a grid layout to help move around the elements. Whereas the Section settings help to make changes on:

  • Layout. Customize the Padding for the top and bottom parts of your header.
  • Background. Either use an image or a solid color as the footer’s background.
  • Anchor. Create a full unique URL specifically for the footer.
A grid layout and section settings to customize your website's footer

5. Enhance Your Website With Visual Elements

Visual elements, such as images, videos, logo, and favicon, attract visitors to learn more about your site. Visitors spend 88% more time on pages with videos. They help convey what your website is about and retain visitors’ attention.

Keep note that visual elements have to be relevant to the website. Otherwise, they will only distract and confuse visitors. The website builder’s drag-and-drop editor makes it easier to customize the visual elements’ layouts.

To add any visual element, click on the Add element icon on the left corner of the editor.

Clicking to add an element to your Zyro website

Images

Under Add elements, click on Image and drag it to your page. Position the element on the desired area of the web page.

Dragging an image to your Zyro website

Zyro will show a default image on your web page. Click on it and select Change image to access the Image settings.

Changing the default image on your Zyro website

Then, click the Replace Image button to either upload your picture or select one from Zyro’s free-to-use stock image library with over a million photos. Under the Image settings, remember to include Alt text, which describes the image.

In addition, choose the Image position and Border radius.

Image settings on your Zyro website

Under Action, choose what will happen when a visitor clicks on the image:

  • Nothing. No action will happen after visitors click on an image.
  • Open full screen preview. The image will be shown in full size.
  • Open link. Clicking on the image will direct visitors to a previously added link. There is also an option to open it in a new tab or redirect the page.
Action tab under the image settings on Zyro

Select the Gallery element and drag it to the page to include multiple images at once.

Including multiple images at once using the Gallery element on Zyro

Again, Zyro will add default images at first. To change them, click on the element and select Manage gallery.

Selecting the Manage gallery option

Click on Add Images to include your images. Then, select the default images and click on the trash icon to delete them.

Using a drag-and-drop tool to upload images

Once you have added your images, click on the element again and select the gear icon. Under the Gallery settings, change the Layout, Items per row, Gap between photos, and the action On click.

Managing Zyro's gallery settings

Video

Adding videos is different from images. With Zyro, you have to upload the video on YouTube or Vimeo first.

After you drag the Video element to the web page, click on it and select Edit video.

Adding a Youtube video on your Zyro's website

Under Video settings, change the Video link to your video’s URL. Then, decide whether you want the video to play right away when visitors access the page. However, keep note that the Autoplay feature does not work on mobile devices.

Managing Zyro's video settings

In addition, there is an option to play the video on Loop by default. As for the Layout, control the Padding between the video and other elements. To avoid distracting your visitors, turn off the Show video controls, which will hide the play, pause, and volume buttons.

Logo and favicon

If you have a business online, use a logo on your website. However, a logo can also be beneficial for a personal website. It can add legitimacy to your website, helping you create a professional brand in the future.

If you have not created a logo for your website yet, Zyro has an AI Logo Maker tool to help.

Pro Tip

When creating or uploading a logo, remember to have a transparent background to make it suitable for any colors you choose.

To create a new logo, click on AI tools -> Logo maker.

Opening Zyro's logo maker

Then, choose how you want to create your logo:

  • Create a logo yourself. Enter your logo name, what your logo is for, and where do you want to use the logo. Then, choose a logo to customize the color, shape, and layout.
  • Use a logo generator. Choose from a gallery of premade logos and select the colors and shape.
Select how you want to create your logo: create a logo yourself, or use AI logo generator

Meanwhile, favicons represent a site on web browsers’ tabs. Therefore, they help make your website memorable to visitors, professional and trustworthy.

Zyro has a free Favicon Generator to create a custom favicon. With this tool, change the favicon’s writing, background color, and layout. Not only that, decide whether to use an image or a shape. Then, click Download to save your custom favicon.

Zyro's favicon generator

To upload it to your website, head to the Website settings on the bottom left corner of your editor. Then, select General settings to continue.

Selecting general settings

Under the Favicon section, click the Browse Files button and upload your custom favicon. Click on the Edit website to finalize the process.

Uploading the favicon under the favicon section in general settings

6. Save and Publish Your Website

Zyro will automatically save all the changes made, so no need to worry about losing unsaved edits. Just check every web page and link after customizing the content. Once you are ready to go online, click on the Publish website button in the top right corner.

Publishing your Zyro website

The button will lead you to choose a domain name:

  • Connect your own domain. Select this option if you have already purchased a domain name and insert it after. Alternatively, buy it from Zyro.
  • Use a Zyro domain. If you do not want to purchase any domain, use a .zyrosite subdomain to publish a free site.
Choose a domain name to finish creating your website

Your Website Is Now Online – What’s Next?

Making a website improves personal or professional branding online. In addition, websites help to share content with broader audiences. Before creating your own website, pick the right platform, choose a memorable domain and get a web hosting plan if needed.

The two platforms we have focused on are CMSs and website builders. We have shared the steps to create a website using WordPress and Zyro, along with the tips on how to optimize your site.

After successfully going online, here are some post-launch tips to consider:

  • Revise regularly. Revise your content regularly as best SEO practices change continuously.
  • Promote website. Use content, email, social media, and affiliate marketing to help promote your website and attract more visitors.
  • Analyze performance. Improve marketing strategies to avoid future issues by analyzing your performance regularly. Use tools like Google Analytics to help.

To help deepen knowledge on building websites, check the recommended readings and answers to FAQs.

How to Make a Website FAQ

This section will answer the most common questions regarding the website creation process.

Do You Need Technical Knowledge to Make a Website?

No, many platforms are available to help make website building easier without any technical or coding knowledge. For example, website builders have an intuitive interface and drag-and-drop features to help customize a high-quality design. 

Keep note that some platforms do require technical knowledge. So, it is essential to be aware of the platform you choose and adjust it to your skills. 

However, a deep understanding of coding languages always helps customize a website more suitable to your needs.

How Do I Code a Website From Scratch?

It is essential to know these coding languages to create a website:

Hypertext Markup Language (HTML) – helps create the structure, layout, and content of a web page.
Cascading Style Sheets (CSS) – defines the styling and presentation of a web page and its elements.

First, get your web hosting and domain name. Then, install Bootstrap to create your HTML and CSS documents. 

A self-coded website is not the most beginner-friendly option and can take longer to set up. However, a self-coded website is very scalable. So, if you are determined to make a website without platforms like a CMS or a website builder, another option is to hire a web developer

How Do I Create a Website for Free?

With a custom domain, you will have to pay regularly for registration and renewal. However, to try creating your own website, it is possible to go online for free with a subdomain. 

Website builders often offer subdomains for free. For example, users can use www.website.zyrosite.com instead of www.website.com using Zyro. 

Free subdomains are suitable for beginners who are just trying out. However, it is not the best option to attract more customers and establish a legitimate business. Not only that, most free subdomains have minimal features and tools. 

How Much Does It Cost to Create a Website?

The cost to create a website depends on its type. For example, the price is different between a website with multiple videos and pages to a simple blog that mainly uses text, requiring a different hosting plan.

Building a website can cost anywhere from $100 to several thousand dollars per year if you hire a web developer. So, make sure to adjust your budget to the type of website you aim to create. 

How Do I Create a Business Website?

Creating a business website is similar to any other website. However, some additional elements to consider are the product or service page, contact page, and about page. Business websites help to expand the customer base, increase revenue, and improve business flow. 

The key steps to build a highly converting business website are:

SEO. Optimize content to rank higher on SERPs and get better brand recognition.  
Speed. Fast loading time encourages customers to explore more pages. 
Responsiveness and navigation. Choose a user-friendly theme that is easy to navigate using any device.
Promotion. Create an Instagram profile or Facebook page to reach more potential customers.

How Do Website Owners Get Paid?

Monetizing a website is done by displaying advertisements on your sidebars, footer, and header. Some platforms offer a built-in tool to monetize a website. However, some platforms require you to use an extension or an additional tool. 

Google AdSense, for example, offers a pay-per-click tool to monetize your site. In addition, website owners can make money from sponsored content, mainly for websites with high traffic. Some websites also get money from subscriptions.

How Long Does It Take to Create a Website?

The time it takes to create a website depends on the platform and the type of website. With some website builders, users can make websites within 5 minutes. However, platforms that have a steeper learning curve can take weeks to create a high-quality website.

Author
The author

Hasna A.

Hasna is a Content Writer at Hostinger. With passion and knowledge in IT and digital marketing, she hopes to help people solve their problems and succeed. When not writing, she enjoys live music and overanalyzing movies.

Author
The Co-author

Astari Sarosa

Astari is a Digital Content Writer at Hostinger, who is passionate about WordPress, digital marketing, and website builders. She enjoys sharing her knowledge through her writings. During her free time, Astari likes to try new activities, go on adventures, and learn about different cultures.