Hostinger Website Builder - Box of Tricks

Welcome to this module, where we will embark on a unique journey together.

This chapter will delve into the exciting world of website building but with a twist. Instead of using familiar platforms, we will try out new software for the first time. As a designer with a penchant for exploration, I appreciate the need for solid foundations when working with software. This tutorial aims to give you a glimpse of what it's like to discover and navigate a new platform as an instructor. You will witness my instant reactions and see how everything comes together.

We will reference a Squarespace template from our Pixel Hayes Academy store to make things easier. We aim to replicate this template with at least 90% accuracy using the hosting service we are exploring. Hosting has existed for many years, originally starting as a hosting company in 2004 and later expanding to offer website-building services. As a Squarespace authorized trainer, I have been searching for an alternative that offers similar polish without the same scale of hosting fees. This course will examine whether this new platform can meet those expectations, acknowledging that it may require some compromises due to differences in financial investment.

Summary:

• This chapter introduces the experience of exploring a new website builder for the first time.

• The tutorial aims to provide insight into the instructor's instant reactions and how the software fits into the larger picture.

• The focus will be replicating a Squarespace template using the examined hosting service.

• The hosting service started as a hosting company in 2004 and now offers website-building capabilities.

• The goal is to achieve a similar level of polish as Squarespace while considering potential sacrifices due to differences in financial investment.

This chapter will focus on the Hostinger website builder as we take you through a step-by-step process to create your first design.

Following this tick box process, we will explore various elements and see how far we can progress in just one video. Whether you're new to website design or have some experience, this chapter will provide valuable insights and practical knowledge to enhance your skills.

The benefits of undertaking this first-look course are immense. As someone who has been building websites for nearly 20 years, I bring a wealth of experience. While my starting point may differ from yours, I am still discovering new aspects and finding where everything clicks in this ever-evolving field. Moreover, I can address features I may have missed by sharing my initial observations. So, in addition to covering the first look section, I will delve deeper into the software once I have a firmer grasp. However, let's focus on the setup process outlined here and explore as many steps as possible.

Bullet-point Summary:

• In this chapter, we will follow a step-by-step process to create our first design.

• The course provides insights and observations based on years of website-building experience.

• The first look section will be covered, with further exploration planned for future chapters.

• The setup progress will be addressed, including updating images and logos.

• We will learn about features like auto-save and image editing capabilities.

• The chapter will focus on building various sections of the webpage, such as the header and logo.

• Alignment and styling options will be explored to enhance the page's visual appeal.

• We will encounter challenges and problem-solving opportunities along the way.

• While some features may be limited, we will find workarounds to achieve the desired effects.

• The chapter will conclude with an overview of creating image and text block signposts.

In this course chapter introduction, we will focus on developing our homepage design.

We aim to get it as close to completion as possible before moving on to the next chapter. If we don't finish it entirely, it won't be a major issue as we can refine it in the following chapter when adapting it to mobile views.

We will start by designing for the desktop first, then work on the mobile views in the next chapter.

Summary:

• The chapter will focus on developing the homepage design.

• The goal is to get the design as close to completion as possible.

• If necessary, mobile views will be refined in the next chapter.

• The design process will start with desktop mode and then move to mobile views.

In this chapter, we will focus on completing the final steps of our website homepage and then proceed to edit the mobile version.

Although we don't anticipate significant changes on mobile, sometimes elements may be misplaced, requiring us to create space, rearrange items, and reposition them accordingly.

We will explore these adjustments and surprises as we delve into the mobile editing process. Let's take a closer look.

Summary:

• We will wrap up the remaining tasks on the homepage before moving on to mobile editing.

• Mobile editing may require adjustments to maintain consistency and proper order.

• We will add a text area on a coloured background, matching the footer background.

• Adjustments will be made to section height, background colour, and spacing.

• Font styles and sizes will be modified for headings and paragraphs.

• Content placement and layout will be optimized for mobile view.

• Uniformity and spacing will be ensured for images, testimonials, and social media icons.

• Custom CSS or code blocks may be employed if necessary.

• The final outcome will be a polished website ready for editing on mobile devices.

Welcome to the final chapter of this module! Throughout this course, we have made significant progress in creating our homepage and achieving a polished look that closely resembles the Squarespace template.

However, a few missing features remain, such as the accordion option.

This chapter will focus on creating subpages, including the menu page, the Snug page for the event venue, and the contact page. We will explore how to replicate these features across multiple pages and ensure a consistent design. Although this chapter may be longer, it will provide valuable insights into building a cohesive and functional website.

Summary:

• In this final chapter, we will create subpages for our website.

• The subpages include the menu page, the Snug page for the event venue, and the contact page.

• We will focus on replicating features and maintaining a consistent design across all pages.

I'm exploring how to use Hostinger's AI website builder. I'll show you how to set up your website and talk about AI's role in web design. It's worth noting that while AI isn't replacing designers entirely right now, things might shift in the future. I aim to clarify the website creation process and highlight what Hostinger's AI builder can do. And if you're looking for value, Hostinger has some great deals. In essence, I'm here to offer insights for those interested in using the Hostinger AI website builder.

Elwyn takes on the challenge of creating a professional website homepage design from a Hostinger template in under 30 minutes.