Is Hostinger Website Builder Any Good?
Table of Contents
Performance
Reviews
Price
Page Editor
General
Blocks
AI Writer
Duplicate Block
Desktop / Mobile View
Delete Block
Other Menu Options
Pros
Cons
Page Properties
Navigation
Configuration
Blog
Pros
Cons
SEO
Online Store
Product Types
Opportunities For Improvement
Backups
Workflow Improvements
Enhance Page Editor
Organize Data & Links
Expand Global Defaults
Recommendations
Pros
Cons
Introduction
Over the years, I have called many platforms my home on the web. During my WordPress development days, I resided at SiteGround. I appreciated SiteGround for its fair pricing, flexible hosting options, reliable support, and reliable operation. Additionally, I valued the ability to stage a release for review before deployment, a feature I have yet to find elsewhere. As my WordPress work began to wind down, I decided to explore alternatives. Although SiteGround supports Weebly, sadly, the integration did not meet my expectations. Consequently, I opted to give WebFlow a try. WebFlow's forte lies in its codeless UX web page development, which it executes exceptionally well. Another area where WebFlow excels is in its documentation and support. However, WebFlow falls terribly short in content creation, as its blogging tools are too painful to use. As a content creator, I could not endure this shortcoming, prompting my departure to SquareSpace. While I currently reside at SquareSpace, I must admit it’s lacking and I'm yearning for something better.
As I looked for alternatives I found Hostinger. They had received some awards in the past and their business model reminded me of SiteGround with a better alternative to Weebly. Hostinger is a Global web hosting company headquartered in Kaunas, Lithuania and they have servers supporting Website Builder located in the following countries.
Lithuania
Netherlands
Singapore
USA
Brazil
Performance
Hostinger also integrates with CloudFlare to deliver images from their network which keeps performance snappy. In a PageSpeed Insights test the Hostinger numbers are good.
Reviews
Trustpilot - TrustScore 4.6 24,196 reviews
Google - Rating: 4.8/5 | 1,237 reviews
hostAdvice - Rating: 4.6/5 | 2,432 reviews
wpBeginner - Rating: 4.7 | 874 reviews
Price
Their plans are as follows.
Premium $3.19/12 months, renews @ $9.99/12 months
Business $4.99/12 months, renews @ $12.99/12 months
Cloud Startup $9.99/12 months, renews @ $23.99/12 months
Even though there is no free option, I like this type of pricing as it gives me a discount while I learn and test the system to see how well it meets my needs. I purchased the 12 month Business plan which gives me access to most of their services. I should know at the end of 12 months if I want to stay.
Website Builder
Although they host WordPress, the Hostinger feature I am most interested in is Website Builder. It turns out this feature comes from the subsidiary Zyro. My assumption is that Hostinger provides the hosting and Zyro maintains the Website Builder software.
Page Editor
General
The foundation of a page is the section. The section element is used to define logical groups or divisions within a document.
Some key points about sections:
Content Grouping: It is used to group together a set of related content, such as a chapter, an introduction, a news article, or a section of a reference book.
Semantic Structure: The <section> element provides semantic meaning and structure to the content, making it easier for browsers, search engines, and assistive technologies to understand the organization of the content.
Heading Association: While not strictly required, it is recommended to include a heading element (<h1>, <h2>, or <h3>) within each <section> to clearly identify the section's purpose or topic.
Outlining and Navigation: By properly using sections and headings, the document gains an outline that can be used for navigation, table of contents generation, and improved accessibility.
Styling and Scripting: Sections can be targeted with CSS styles and JavaScript code, allowing for specific formatting and behavior for different sections of the page.
Sections in Website Builder are created by clicking buttons attached to the top and/or bottom boundary. Content is added to the section by adding editor blocks. Blocks are predefined components that represent different HTML elements or structures. The key advantage of using a block editor is that it provides a real-time preview of how the page will appear. Website Builder supports a desktop and mobile view. This WYSIWYG (What You See Is What You Get) approach allows creators to visualize the layout and apply formatting as they build the page.
Each block comes with its own unique set of controls and functionalities, allowing creators to customize and fine-tune the content within that block. The blocks I used the most are the text, shape, and image.
Available editor blocks include the following:
Text
Button
Add to bag
Image
Gallery
Video
Shape
Map
Instagram Feed
Contact Form
Subscribe
Social icons
Embed code
Product search
Blocks
When a block is placed in a section the functionality it supports becomes available. The following is an example of the text block after it has been added to a section.
In addition to “edit text”, there are some other interesting choices.
AI Writer
This appears to be an integration with ChatGPT. It is not as helpful as you may think. I typically use multiple AI tools because each has their strengths and weaknesses. In addition, the quality of the generated text is dependent on the quality of the prompt. If you are skilled in writing AI prompts and are comfortable with CharGPT, this may prove to be useful.
Duplicate Block
A convenient way to quickly add a copy of a block to the section.
Desktop / Mobile Visibility
This feature is incredibly powerful as it enables you to conceal a specific block on either Desktop or Mobile browsers. Especially handy with images.
Delete Block
Remove a block from the section. The undo arrow has the ability to restore a block if desired.
Other Menu Options
The clicking the vertical ellipsis exposes additional menu items.
Cut
Copy
Duplicate
Delete
Bring to font
Move forward
Send to back
Send backward
Blocks often have borders which can be used for sizing. To activate the block, simply click the desired option or perform the desired action.
As illustrated above, a new toolbar appears when the “Edit text” option is selected displaying editing choices and a vertical ellipsis which exposes the following additional options.
Line height
Background color
Animation
AI text generator
Pros
Hostinger's website builder utilizes a block editor, a popular interface shared by industry leaders like WordPress, Squarespace, and Wix. While Hostinger offers a smaller library of blocks compared to these competitors, I found the available selection sufficient for creating functional and attractive websites.
Cons
The editor utilizes a grid system for aligning blocks within sections. When the editor detects a block placement, movement, or border adjustment, the grid becomes visible to assist with precise positioning. Blocks are designed to snap to the grid; however, I found the snapping behavior to be inconsistent. Furthermore, when modifying the boundary of a section, the grid inexplicably fails to appear. This oversight can be incredibly frustrating when attempting to implement a consistent layout across the website. Squarespace's user interface (UI) incorporates a similar grid system, but they have addressed this issue by allowing manual resizing of sections through the adjustment of row counts. The Website Builder workaround I used is as follows.
Expand the section beyond the desired height
Add a shape block to the section
Move it to the top and expand to the desired height
Adjust the section height to match
Delete the block or set its color to transparent
Page Properties
Navigation
The menu system is user-friendly and organized. The "Main Navigation" section clearly displays the primary pages and links you want visitors to find easily. This promotes a clean and intuitive user experience. Hidden gems are still accessible as pages categorized under "Hidden from Navigation" are not shown in the main menu but remain accessible through other website elements like internal links. This keeps the main menu clutter-free while ensuring all necessary pages are discoverable. Dropdown menus are available to accommodate a moderate number of navigation options, preventing an overwhelming experience for visitors. For websites with a significant number of choices, I recommend creating a separate "Table of Contents" page. Link to this page from the main menu to maintain a concise primary navigation and avoid information overload.
Configuration
To the right of each page is a gear icon which when clicked displays the following menu items.
Make homepage
Settings
Name in navigation
Page URL (ie. slug)
Hide page
SEO settings
SEO title
Meta description
Keywords (3)
Hide page from search results
Password
Rename
Duplicate
Show (in Navigation)
Create QR code
Delete
Blogs
One very popular reason for creating a website is to blog. Blogging software has the three following functions.
Create Content
Organize Content
Display Content
I like the fact that in Website Builder a blog post is essentially a customized page. This is one of my favorite features. It uses the same block editor, and offers all the same block choices. The customization includes the following.
Post title
Post description
Post URL
Post authors
Post date
Schedule post
Although not stated, the post title and post description serve two purposes. The title is used for the blog heading and the SEO title which means wording is important. The description may be displayed on the blog header and is displayed on the blog gallery page. It also serves as the SEO description. I’m ok with the title serving both roles, but I would prefer some latitude to craft the blog gallery description one way and the SEO description another. Remember the SEO descriptions are usually limited to around 160 characters. The missing data element is the excerpt.
Pros
The blogging functionality of Website Builder is not WordPress, but it’s good enough. Although the implementation of a sticky post is missing, functionality does exist to restrict a blog gallery to one or more categories. The estimated reading time option is a nice touch.
Cons
Although Website Builder’s blog supports categories, it does not support tags. In some blogging software authors are treated like users and have their own logins, etc. WordPress goes as far as the assignment of roles. This is not the case here. I did not explore the scenario of multiple authors posting to the same blog and how it may play out. WordPress also has something they call permalinks. A permalink (short for "permanent link") is the URL structure that defines how the individual pages and posts on your WordPress website are organized and presented in the web address.
WordPress says the permalink structure is important for several reasons:
1. Search Engine Optimization (SEO): Well-structured permalinks help search engines understand the content of a page or post, which can improve its visibility and ranking in search results. Search engines prefer user-friendly and descriptive URLs over cryptic or unintelligible ones.
2. User Experience: Descriptive permalinks make it easier for visitors to understand what a page or post is about from the URL alone. This can improve user experience and encourage higher click-through rates.
3. Organization and Hierarchy: The permalink structure can help organize your content by incorporating categories, tags, and other taxonomies into the URL structure. This creates a logical hierarchy and makes it easier for users and search engines to navigate your site.
4. Branding and Memorability: A well-crafted permalink structure can reinforce your brand and make your URLs more memorable, which can lead to better word-of-mouth sharing and increased direct traffic.
By default, WordPress uses a basic permalink structure that includes the post ID, such as `https://example.com/?p=123`. However, this structure is not very descriptive or SEO-friendly. Most WordPress users and experts recommend changing the permalink structure to something more descriptive, such as:
- https://example.com/category/post-name/
- https://example.com/year/month/day/post-name/
- https://example.com/post-name/
You can customize the permalink structure in the WordPress admin area by going to Settings > Permalinks. It's important to choose a structure that works well for your site's content and hierarchy while keeping it clean, descriptive, and user-friendly.
Coming from WordPress, I miss this feature.
Whether this is a pro or a con will depend on your needs but the blog does not include comments.
SEO
Search Engine Optimization (SEO) is of paramount importance for any website's success. Regardless of how exceptional the content may be, websites will face challenges in attracting visitors if search engines cannot efficiently discover and index them. Website Builder acknowledges the criticality of SEO and provides an AI-assisted approach to streamline the SEO process.
For those without extensive SEO expertise, leveraging this AI-driven assistance can prove to be a valuable solution. However, to ensure optimal results, it is essential to identify three targeted keywords and provide a concise summary that encapsulates the core content accurately.
Online Store
Adding an online store to your website is very easy with Website Builder. Configuring the store will need planning and time. If not already in place, a merchant account will need to be created, and shipping particulars decided. On-line store policies will need to be created and added to your terms and conditions page or added as a separate page to your website. The online store functionality is included in all plans and it supports up to 500 products. It is important to note that although my plan supports multiple websites, it only supports one store.
Adding an online store to your website is a breeze with Website Builder. It can be activated with a few clicks within the platform. While setting up the store itself is easy, planning your online business beforehand is crucial.
Here's what to consider:
Merchant Account: If you don't have one already, securing a merchant account to process payments is essential.
Shipping Defined: Determine your shipping zones, rates, and policies to ensure a smooth customer experience.
Clear Policies: Create clear online store policies, such as returns and exchanges. You can add them to your existing Terms & Conditions page or create a dedicated page for them.
The UI for the store is different from the rest of the site and does not use the block editor and is based on the concept of a product and supports the following product types.
Product Types
Physical
Products that require shipping or pick up. You can also use this select to build a catalog by removing the “Add to bag”. The catalog can contain links to other checkout options. This is the option I selected for my test.
Digital
Products that can be downloaded via a link after purchase.
Service
Offer your expertise or abilities as a product.
Donation
Collect donations for your campaign.
Appointment
Services which require a date & time selection before going to checkout.
The options for setting up a store are robust and include the following.
Store details
Company Information
Payments
Shipping
Checkout
Email
Taxes
Invoices
I couldn't locate a dedicated inventory management system during my review. This functionality is crucial for businesses that need to track stock levels and manage product availability and reorder levels. The store integrates with popular payment processors like PayPal and Stripe, which is a plus. However, I couldn't find built-in integrations with major shipping carriers like UPS or FedEx. This may be a part of the calculating shipping costs workflow.
The store I created is a catalog and does not need these integrations.
Conclusion
Hostinger Website Builder is a good value if you are willing to roll up your sleeves and do the work. The solution is advertised as being beginner friendly and with that I must take exception.
Opportunities For Improvement
Backups
Regarding Website Builder, Hostinger automatically saves the pages as you edit them and creates full backups of the website when it's published. While this backup system works reasonably well for the website files, it doesn't seem to apply to the databases and configuration files. Consequently, if you inadvertently make changes to your online store or blog that you want to revert, it's unclear whether the backup system can roll back the database to a previous state.
You may say, “What are the odds?” As it turns out the indexes on my store database stopped working which affected the search functionality. I was able to submit a trouble ticket and tech support eventually re-indexed the files which resolved the issue, but it took some time. In the interim, I pulled the search page from the site. This is also why I decided to create a search page instead of adding search functionality to other pages.
Another scenario comes to mind. What if I want to make store updates on a staging site and then after successfully performing quality control checks, upload the changes to the production environment?
I am not aware if this is possible.
Workflow Improvements
Some sites will allow you to publish internally for quality control. I did not find this to be true here. This is important because you may want client approval before going live or perform usability testing against a variety of devices. I did not test this, but Hostinger supports website duplication. A duplicate development website could be created and approved changes migrated to the production site. My assumption is this only applies to the website and not the store.
Enhance Page Editor
The editor could really use some attention. For example, if you create an empty page and place it under the “Hidden from navigation” section, it will not allow you to add a new section. The workaround is to first place it in “Main navigation”, create the section, and then move it.
Enhance the video block to allow for local thumbnail images. This is the best solution for cleaning up those YouTube videos with crazy thumbnails. Squarespace does this and it is a great feature.
What happened to block quotes? Some sites enable this functionality through an editor block, others add it to the text block menu. At the moment you have to create it from scratch using the text block and the shape or image block.
Organize Data & Links
Navigating through a dropdown menu containing 20 or more randomly organized items to locate the desired option can be an incredibly frustrating experience. For instance, the dropdown menu for links can become very lengthy when it encompasses all the web pages, store pages, and internal links. Alphabetizing this data would be very helpful.
Add a hierarchy to the media library (ie. alphabetize or order images by date) and store product categories. I can not imagine managing a store with 500 products and three dozen categories without some type of order to the data. Being able to pick how the data is organized would be perfect.
Expand Global Defaults
Global settings are CSS style values that apply to the entire website. Applying global styles is the best practice in website design and is a must for a good user experience. Website Builder allows you to configure the following items.
Color
Fonts
Headings
Paragraphs
Navigation
Buttons
Animations
Colors
Defining a color palette is an important aspect of website design and is a best practice for several reasons:
Branding and Consistency: A well-defined color palette helps establish and reinforce your brand identity across the entire website. Consistent use of colors creates a cohesive and recognizable look, enhancing the user experience and making your brand more memorable.
Visual Hierarchy and Readability: A thoughtfully chosen color palette can help create a visual hierarchy, guiding the user's attention to the most important elements on the page. Proper use of contrasting colors can improve readability and accessibility, especially for users with visual impairments.
Emotion and Mood: Colors evoke specific emotions and moods in viewers. A carefully selected palette can convey the desired tone and atmosphere of your website, aligning with your brand's personality and target audience.
Usability and Navigation: Colors can be used as visual cues to help users navigate your website. For example, consistent use of colors for specific types of links or buttons can improve the overall usability and intuitiveness of your site.
Maintenance and Scalability: By defining a limited set of colors upfront, you can ensure consistency as your website grows and new pages or features are added. This makes it easier to maintain and update the design without introducing inconsistencies.
Accessibility: A well-planned color palette can improve accessibility by considering color blindness, contrast ratios, and other factors that impact users with disabilities or specific visual needs.
By establishing a cohesive color palette early in the design process, you can create a visually appealing, accessible, and user-friendly website.
When initiating a new website project, one of the first pages I typically create is a dedicated style guide that documents the site's visual settings. The style guide for the site I created for this article can be found here. My expectation was to have the ability to assign colors to a color palette consisting of five colors, in addition to white and black. However, this functionality was lacking, necessitating a workaround in the form of the style guide itself. Furthermore, I want to style links in all their various states (visited, hover, active, etc.). The workaround for customizing link colors involved adding CSS code through the integrations panel. The flaw with this solution is that these changes only become visible on the published site, effectively breaking the editor's visual representation, as what you see in the editor no longer matches the published site.
Fonts
I liked the selection of available fonts and the font pairing suggestions. Content headers can be assigned a font and a different font can be assigned to paragraphs. I also liked that I have three paragraph styles. I missed the ability to show code snippets and being able to assign a monospaced font for that purpose.
What is missing and is critically important is, in addition to line height, the ability to to set the default top and bottom margins of each content header (h1-h6) and paragraphs. The workaround is to adjust the margins after the fact which is not a good solution.
Code Snippets
Add support for code snippets. Squarespace has added this functionality to their embed code block.
Add Hierarchy To Page Structure
It would be nice to have the ability to group pages and then expand or shrink groups in the editor panel. The group would be a part of the URL (ie. domain/group/page).
Improve Customer Support
The first line of defense in customer support is a bot named Emily. While I appreciate trying to manage simple questions by pointing users to the knowledge base, sometimes chatting with a support agent is required. Getting there is very difficult. In most cases I had to ask Emily to transfer me and hope that she would.
Add To the Knowledge Base
This is a follow up to improve customer support. If you want your knowledge base to be your first line of support, then the knowledge base needs to be complete and up to date. The two companies that excel in this area are Microsoft and Webflow. If you update the code, update the knowledge base.
Other
I didn’t discover if the ability exists to create custom site pages like the 404 page.
Section left and right margins are not configurable.
Recommendation
Having said all of this, I was able to get there and I am satisfied with the results. I didn’t explore templates and perhaps that would have been a better experience.
Pros
Website Builder showcases significant potential. Addressing the aforementioned details would position it as a formidable contender alongside industry leaders like Squarespace and Wix. While the AI functionality is flashy, it is not an essential requirement. It is reasonable to assume that users will have, and may be paying for, a preferred AI assistant such as Gemini, ChatGPT, Claude, or Perplexity; and will opt to utilize their chosen preference. This aligns with my personal approach. Additionally, it is worth noting the potential of having to purchase credits for certain AI services.
I liked their approach to SEO and their pricing is great. It is also important to emphasize in many ways you are creating two websites - desktop and mobile. I liked the ability to mold the mobile user experience one way and the desktop experience another. Some may feel not having three break points (desktop, tablet, mobile) is an issue.
Website Builder supports the WebP image format. The WebP image format, developed by Google, offers several advantages over traditional image formats like JPEG and PNG:
Smaller File Size: WebP images are typically much smaller in file size compared to JPEG and PNG images of the same quality. This reduced file size leads to faster website load times and reduced data usage, which is especially beneficial for mobile devices and slower internet connections.
Lossless and Lossy Compression: WebP supports both lossless and lossy compression methods. Lossless compression retains the original image quality, while lossy compression reduces the file size further at the cost of some quality loss. This flexibility allows for optimizing images based on specific requirements.
Better Compression for Images with Transparency: WebP handles transparent images more efficiently than PNG, resulting in smaller file sizes for images with transparency.
Animation Support: WebP supports animated images, providing an alternative to the widely used GIF format while offering better compression and quality.
Metadata Support: WebP allows for the inclusion of metadata, such as color profile information, which can be useful for image editing and color management workflows.
Backward Compatibility: Modern web browsers, including Chrome, Firefox, Edge, and Opera, support WebP natively. For older browsers that don't support WebP, fallback mechanisms can be implemented to serve traditional image formats.
Energy Efficiency: Due to the smaller file sizes, WebP images require less data transfer and processing, leading to improved battery life on mobile devices.
I am surprised by its lack of universal adoption.
While the Website Builder is a prominent feature offered by Hostinger, the company provides a comprehensive suite of services beyond website creation. Included in every hosting plan is Titan email services, enabling users to establish professional email accounts associated with their domain. Additionally, Hostinger ensures robust security measures by offering SSL encryption, DDoS protection, and a malware scanner to safeguard websites and data. Furthermore, the company provides Domain WHOIS Privacy Protection, shielding personal information from public view. For those requiring a domain name, Hostinger can also assist with domain registration services, streamlining the process of establishing an online presence.
Cons
For individuals seeking a swift, straightforward, and beginner-friendly solution, Hostinger's Website Builder may not be the optimal choice. The platform requires numerous workarounds which could prove challenging for those new to website creation. Website Builder's limitations in setting site style defaults, organizing permalinks, and sorting data elements used by the editor make it less suitable for medium to large-scale websites.
