{"id":928,"date":"2022-08-02T11:23:05","date_gmt":"2022-08-02T11:23:05","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/02\/6435894-hostinger-website-builder-how-to-add-and-customize-website-elements\/"},"modified":"2026-09-25T10:47:09","modified_gmt":"2026-09-25T10:47:09","slug":"6435894-hostinger-ai-builder-manual-mode-how-to-add-and-customize-website-elements","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6435894-hostinger-ai-builder-manual-mode-how-to-add-and-customize-website-elements\/","title":{"rendered":"Hostinger AI Builder: How to add and customize website elements in manual mode"},"content":{"rendered":"

Hostinger AI Builder<\/a> manual mode offers 15 website elements — including text, images, buttons, video, and forms — that you can drag, drop, and customize to build out your web pages. Website elements are items that you can use to populate your web pages. In other words, website elements are texts, images, buttons, videos, and so on.<\/p>

Add an element to your page<\/h2>

While using Hostinger AI Builder manual mode<\/a><\/b>, you can find all available elements by expanding the Add elements<\/b> panel on the left.<\/p>

Drag and drop any element to the preferred place on your website or click on an element, and it’ll be automatically inserted into a selected section:<\/p>

\"\"<\/div>

Customize an element<\/h2>

Feel free to customize every element however you like. Click on it and explore its settings:<\/p>

\"\"<\/div>
Learn how to organize and layer elements<\/a> when working with multiple overlapping items on a page.<\/div>
<\/div>

Type of element<\/h2>

You may choose from the following elements:<\/p>

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

Text<\/a><\/b><\/p>\n<\/td>\n

\n

Use text elements to populate your website with high-quality content learn how to change<\/strong><\/a><\/span> the text style<\/a><\/b>, including a new shimmering text effect for added visual flair
\n<\/b><\/p>\n<\/td>\n<\/tr>\n

\n

Running text<\/strong><\/a><\/p>\n<\/td>\n

\n

Add a line of text that runs infinitely across the screen — a good way to highlight discounts, announcements, or other important information<\/p>\n<\/td>\n<\/tr>\n

\n

Button<\/a><\/b><\/p>\n<\/td>\n

\n

Buttons are great call-to-action elements; learn how to add links<\/a><\/b> <\/b>to your buttons<\/p>\n<\/td>\n<\/tr>\n

\n

“Add to bag” button<\/a><\/b><\/p>\n<\/td>\n

\n

Create products<\/a><\/b>, link them to these buttons, and sell them online easily<\/p>\n<\/td>\n<\/tr>\n

\n

Image<\/a><\/b><\/p>\n<\/td>\n

\n

You may browse our free image library or upload your own pictures<\/p>\n<\/td>\n<\/tr>\n

\n

Gallery<\/a><\/b><\/p>\n<\/td>\n

\n

The gallery element allows you to showcase your favorite pictures in a gallery view<\/p>\n<\/td>\n<\/tr>\n

\n

Video<\/a><\/b><\/p>\n<\/td>\n

\n

Our native video element supports YouTube and Vimeo videos; learn how to add a Facebook video<\/a> <\/b>or upload a video from your local device<\/a><\/b><\/p>\n<\/td>\n<\/tr>\n

\n

Shape<\/a><\/b><\/p>\n<\/td>\n

\n

Use various geometric figures to perfect the design of your website<\/p>\n<\/td>\n<\/tr>\n

\n

Card<\/a><\/b><\/p>\n<\/td>\n

Add a styled container to create modern card-style layouts; the Card element supports borders, background fills (solid colors and gradients), preset or custom drop shadows, and flexible sizing<\/td>\n<\/tr>\n
\n

Map<\/a><\/b><\/p>\n<\/td>\n

\n

Add a map to help your customers find your business more easily<\/p>\n<\/td>\n<\/tr>\n

\n

Instagram feed<\/a><\/b><\/p>\n<\/td>\n

\n

Use the Instagram feed <\/b>element to embed your Instagram posts on your website<\/p>\n<\/td>\n<\/tr>\n

\n

Contact form<\/a><\/b><\/p>\n<\/td>\n

\n

Let your clients reach out to you by submitting a contact form on your website<\/p>\n<\/td>\n<\/tr>\n

\n

Subscription form<\/a><\/b><\/p>\n<\/td>\n

\n

To create a mailing list, add the subscription form element to your website and collect email addresses easily<\/p>\n<\/td>\n<\/tr>\n

\n

Social icons<\/a><\/b><\/p>\n<\/td>\n

\n

Use this <\/b>element to add links to your social media profiles<\/p>\n<\/td>\n<\/tr>\n

\n

Embed code<\/a><\/b><\/p>\n<\/td>\n

\n

The embed code element allows you to integrate various third-party widgets into your website: calendars, countdown timers, pop-ups, and many more<\/p>\n<\/td>\n<\/tr>\n

\n

Search<\/a><\/b><\/p>\n<\/td>\n

\n

Use this element to let visitors search your products, blog posts, and general website content; learn how to configure what it searches and enable a dedicated search results page<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>

Additional resources<\/strong><\/p>