How to Add and Customize Website Elements in Hostinger Website Builder

Hey everyone, welcome to Ben’s Experience! In this tutorial, I will show you how to add and customize website elements in Hostinger Website Builder. Let’s dive right in!

First, log in to your Hostinger Website Builder. To start adding elements, you need to add a blank section. Click on the little plus icon called “Add Element.” This opens up a menu where you can choose from various elements such as text, buttons, videos, Instagram feeds, contact forms, social icons, and even custom code.

Adding Text Elements

Let’s start with a text element. To add text, select the text option from the menu. You can edit the text by either double-clicking it or clicking on “Edit Text.” Customize the text as you like. You can also use AI to write text inside this element. Additional options include duplicating, hiding, showing separately on mobile or desktop, deleting, copying, and duplicating the text element.

Adding Button Elements

Next, let’s add a button. Select the button element and place it in your desired location. To edit the button text, double-click on it. You can also add a link to a web address, page, or section. Customize the button’s style by adjusting the text size or adding animations. If you need to delete the button, simply click on it and choose the delete option.

Adding Image Elements

To add an image, select the image element from the menu. You can place the image wherever you want on your website. To replace the image, click on “Replace” and choose from your library or use free images from Unsplash. Customize the image by adjusting the overlay opacity, shape, and other style options.

Adding Instagram Feeds

You can also add an Instagram feed to your website. This element automatically shows your latest photos from Instagram. To link your Instagram account, click on the Instagram feed, then click “Edit Feed” and connect your Instagram account. Customize the layout by adjusting the number of items per row and the gap between photos.

Adding Contact Forms

Adding a contact form is straightforward. Select the contact form element and place it on your page. To edit the form, click on “Edit Form.” You can remove fields, edit field labels, change field types (e.g., email or phone), and set fields as required or optional. You can also add animations to the form for a more dynamic look.

Final Touches

Always remember to update your website to make your changes public. Before you go, I have something special for you. I offer two free online video courses: one on Hostinger hosting and WordPress management, and another on using Hostinger Website Builder to create basic websites or online shops. You can access these courses for free by clicking the link in the description.

If you found this tutorial helpful, give it a thumbs up and subscribe to my YouTube channel. If you have any questions, leave a comment below. Happy building!