The YouTube transcript provides a step-by-step tutorial on creating a website using the Hostinger AI website builder. It emphasizes ease of use, particularly for beginners, by streamlining domain registration, hosting setup, and website design.
The transcript highlights the AI-powered features like content and image generation, SEO optimization, and logo creation, offering a quick and efficient website-building experience. The tutorial discusses plan options and the advantages of the business plan which offers more AI features. Finally, it offers an opinion about the benefits and limitations of using the Hostinger website builder.
Getting Started with Hostinger Website Builder
Creating a professional website has become easier and faster with tools like the Hostinger Website Builder. This builder is designed to be simple and straightforward, making it perfect for users who want a quick and easy solution to get their site online.
With just a few clicks, you can secure your domain name, set up hosting, and start building a website that looks professionally designed, all without needing to write any code. The best part is that everything is native to Hostinger.
There’s no need to install software from third parties. When you sign up and start building, everything is in one place. The first step in creating any website is sorting out your domain name and web hosting. With Hostinger, you can do both in one go, which makes the process seamless.
Choosing the Right Hosting Plan
Hostinger offers several plans, including Premium, Business, and Cloud Startup. Most beginners won’t need the Cloud Startup plan, making the Business and Premium plans the primary choices. The Business hosting plan is often recommended because of the features included for the price.
For a small additional monthly fee, the Business plan provides access to more features, such as the WordPress AI tool. Although this tutorial focuses on the Hostinger Website Builder, the Business plan includes AI features that are beneficial. These features include an AI image generator, AI writer, blog generator, heat maps, and SEO tools.
The AI is designed to handle your SEO, which can be a significant advantage. The Business plan also supports e-commerce stores, which is not available in the Premium plan. It includes 0% transaction fees and over 20 payment methods.
To get an even bigger discount, make sure the coupon code “create a pro website” is applied. This coupon code is automatically applied when you go through the provided affiliate link. After selecting your plan, you’ll be redirected to choose your payment period.
Setting Up Your Account and Domain
The payment period refers to how often you want to make payments, with options for 48 months, 12 months, or month-to-month. Choosing a longer plan typically results in greater savings, similar to buying in bulk. Domain registration is usually yearly.
Hostinger offers a free domain for the first year. After selecting your plan and payment period, ensure the coupon code is applied for the discount. Next, you’ll need to create an account with Hostinger by entering your email and password, or logging in if you already have an account.
After creating your account, you’ll be prompted to add your billing address information. On the right side, you’ll see a summary of everything included in your chosen plan. This includes the monthly cost and any discounts applied.
Understanding Included Features
The summary also details the included features such as daily backups for your website. A backup is a saved copy of your website that is updated daily. This ensures that if something goes wrong, a duplicate can be restored. The domain name, which usually costs around $9.99, is also provided for free.
Domain privacy protection, which is normally $25, is also included at no cost. Domain privacy protection shields your personal contact information from telemarketers and solicitors by masking it in the public WHOIS database. This is a valuable feature that prevents your phone from being overwhelmed with unwanted calls.
After reviewing all the details and ensuring the coupon code has been applied, click continue to proceed to the payment options. Hostinger accepts various payment methods, including credit cards and other payment providers. Once you’ve entered your payment information, click submit to complete the purchase.
Onboarding and Choosing Your Website Builder
After completing your payment, you’ll be directed to an onboarding screen that asks who the website is for. You can specify whether it’s for yourself or someone else. Next, you’ll be asked if you want to create a new website, migrate an existing one, or hire a professional. Since this guide is about building a website, select the option to create a new website.
The next crucial decision is whether to use WordPress or the Hostinger Website Builder. While WordPress is a popular choice, the Hostinger Website Builder is beginner-friendly. It is simpler to use than WordPress. For this tutorial, select the Hostinger Website Builder and click next.
Now, you’ll need to choose a domain name, which should represent your brand or business. For example, if you’re creating a website for a coffee shop, you might choose something like “Hagencoffeeshop.com”. The .com extension is generally recommended because it’s the most common and professional-looking.
Utilizing the AI-Powered Website Builder
Hostinger provides two options for building your website: pre-designed templates or the AI-powered website builder. Using the AI website builder is highly recommended because it’s fast, efficient, and handles much of the work for you. The AI Builder has improved significantly and now generates content, layouts, images, and functionalities based on your input.
It can create various types of websites, from blogs to e-commerce stores and appointment-based scheduling sites. To use the AI Builder, fill out the AI prompt with details about your site and your desired color palette. The AI will generate a site for you based on this information.
For example, you can ask it to create a blog website, an e-commerce site selling coffee-related products, or a coffee shop site with booking or reservation sections. Hostinger also has a booking function in beta. The AI can also create basic websites with newsletter signup forms.
If you’re not satisfied with the initial result, you can go back to the AI prompt window to make changes and try again. If you prefer not to use the AI feature, you can select a pre-built template. After selecting a template, you can further customize it using Hostinger’s drag-and-drop builder.
Customizing Your Website with the Builder
Regardless of whether you use AI or a template, you can use Hostinger’s drag-and-drop builder to manually edit your site. This allows you to arrange, add, or remove sections to ensure your site looks exactly as you want it to. You can easily add new images or buttons by dragging them into place on your website.
Everything is customizable, from the text to the contact forms. The navigation tabs provide access to different parts of the website, such as managing pages, adding navigation menu items, and adjusting global colors, fonts, and styles. On the left-hand side, you’ll find menu options for adding elements, managing pages and navigation, adjusting website styles, and accessing AI tools.
The website setup checklist can guide you through updating images, headings, and text. The main focus is on building and customizing your website using the elements available in the live preview. These elements include text, buttons, images, galleries, and videos.
Working with the Live Preview and Mobile Responsiveness
In the live preview, hovering your mouse over any element highlights it with a blue box. This indicates that you can move or edit that item. You can drag and drop elements wherever you want, using the grid lines that appear to help with alignment. If you make a mistake, the undo button is available.
You can drag and highlight multiple items at once to move them together. At the top of the screen, you’ll find the mobile responsive modes. This allows you to switch between the desktop or computer view and the cell phone view to ensure your website looks good on all devices.
The top bar also includes the undo and redo buttons, your domain name, the save button, and the preview button. Auto-save is enabled, but you can also manually save your work. The preview button opens your website in preview mode, allowing you to interact with it as a customer would.
Editing Objects and Using AI Assistance
Clicking on an object on your website will display its settings at the top. For text, you can edit it directly on the screen by triple-clicking or selecting “edit text”. This opens up options to change the text color, heading style, font, size, and alignment.
You can also use the AI writer to generate text, such as a slogan for your coffee shop. For buttons, clicking “edit button” provides access to the general, style, and animation tabs. The general tab allows you to change the text on the button and set the link.
The style tab lets you customize the appearance of the button in its normal and hover states. The animation tab allows you to add animations, such as a slide-up effect, to the button. You can also change the background of a section by clicking on the section and selecting “edit section”.
This provides options to use a color, image, or video as the background. Hostinger offers a variety of stock videos that you can use. The layout settings allow you to adjust the grid pattern and use anchor links to create a single-page website experience.
Advanced Customization and Adding New Sections
Clicking on an image widget allows you to change the image from your gallery or use AI to generate one. Under the style tab, you can adjust the corner radius to create curved edges. The action settings allow you to set the image to open a link, go to a page, or perform another action when clicked.
For contact forms, clicking on the form and selecting “edit form” lets you customize the fields that appear. You can drag the fields to rearrange them, change the placeholder text, and set the field type. You can also add new fields, such as a phone number field.
The button settings allow you to change the text and position of the submit button. You can choose to display a message or redirect to a thank you page after the form is submitted. The style tab lets you customize the appearance of the form fields, button, and background.
To add a new section to your website, click the “add section” button between existing sections. You can choose to have AI generate a section, add a blank one, or select a pre-designed template. There are templates for various purposes, including about sections, services, FAQs, galleries, and resumes.