Create and Link Functional Buttons in Hostinger Builder

Learn to effectively utilize buttons within Hostinger to enhance user experience and guide visitor actions.

TL;DR:

  • Add buttons using drag and drop from the 'Add Elements' section
  • Link buttons to internal pages or external websites through the Link option
  • Preview your buttons before publishing to check they work properly
  • Customization options are limited to preset styles and colours
  • You can add multiple buttons on a single page

Buttons are one of the most important elements on your website. They guide visitors to take action, whether that's contacting you, buying something, or reading more content. Hostinger Website Builder makes adding buttons straightforward with its drag-and-drop interface.

How to Add a Button on Your Hostinger Website

Here's how to add a clickable button to your page:

  1. Log into your Hostinger account and open the website you want to edit
  2. Click on the Site Editor to access the builder
  3. Find 'Add Elements' in the left sidebar
  4. Locate the button element and drag it to where you want it on your page
  5. Drop it in position and it'll appear on your page

The button will appear with default text that you can change by clicking on it and typing your new text.

Pixelhaze Tip: Use the "Preview" button in the top menu to test how your button looks and works before you publish. This saves you from discovering problems after your changes are live.
💡

Linking Your Button to Pages or External Sites

A button without a link is just decoration. Here's how to make yours functional:

  1. Click on your button to select it
  2. Click the 'Link' option that appears in the editor
  3. Choose your destination:
    • For internal pages: Select the page from the dropdown list
    • For external websites: Type or paste the full URL (including https://)

Pixelhaze Tip: Always test external links after adding them. Broken links make your site look unprofessional and frustrate visitors.
💡

Button Customization Options

Hostinger Website Builder offers basic customization for buttons:

  • Preset styles: Choose from available button designs
  • Colours: Select from the colour options provided
  • Text: Change the button text to match your needs
  • Size: Adjust button size within the available options

The customization options are fairly limited compared to other builders, but they cover the basics for most websites.

Adding Multiple Buttons

You can add as many buttons as you need to a single page. Simply repeat the drag-and-drop process for each button. This is useful for:

  • Call-to-action sections with multiple options
  • Navigation elements
  • Product pages with different purchase options
  • Contact sections with various ways to get in touch

FAQs

Can I customize the shape and colour of buttons in Hostinger Website Builder?
You can choose from preset styles and colours, but customization options are limited. You won't find extensive design controls like custom CSS or advanced styling options.

How do I link a button to an external website?
Select the button, click the 'Link' option, and enter the complete URL including https://. Make sure to test the link before publishing.

Can I add multiple buttons on one page?
Yes, you can add as many buttons as you need. Just drag each button element to different sections of your page and customize them individually.

What happens if I delete a button by mistake?
You can undo the action immediately, or simply add a new button element and set it up again. Your link destinations will need to be re-entered.

Jargon Buster

Button Styles: The visual appearance of a button, including its shape, size, and colour scheme.

External Link: A link that takes visitors to a different website outside of your own site.

Drag and Drop: A method where you click on an element, hold down the mouse button, move it to a new location, and release to place it there.

Internal Link: A link that connects to another page within your own website.

Wrap-up

Adding buttons to your Hostinger website is straightforward with the drag-and-drop builder. While the customization options are limited to preset styles, you can still create functional buttons that guide visitors through your site effectively. The key is to test your buttons before publishing and make sure all links work properly.

Ready to build a website that converts visitors into customers? Join Pixelhaze Academy for expert training and support.

Related Posts

Table of Contents