Hostinger AI Builder: Add Shapes in Manual Mode

Updated 7 November 2026 · Standard formula, shown below

To add shapes in Hostinger AI Builder’s manual mode, you use the built-in shape library found in the left-hand editor panel—there is no separate “shapes” button in the AI chat. You select a shape (like a circle, square, or arrow), drag it onto the canvas, and then customize its size, color, border, and rotation using the properties panel that appears when the shape is selected.

What Manual Mode Actually Is

Hostinger’s website builder offers two distinct workflows. The first is the AI-powered generator, where you describe your site in natural language and the system builds a complete layout for you. The second is manual mode—sometimes called the drag-and-drop editor—which gives you full control over every element on the page. In manual mode, you are not relying on AI suggestions; you are directly placing and editing components like text blocks, images, buttons, and shapes. This is where you go when you want to fine-tune a design, add custom visual accents, or create a layout that the AI wouldn’t naturally produce.

Step-by-Step: Adding a Shape

Open your site in the Hostinger editor and ensure you are in manual mode (not the AI chat view).
Look at the left-hand vertical toolbar. You’ll see icons for different element categories—text, media, buttons, and so on. Find the one labeled “Shapes” or represented by a geometric icon (often a square or circle).
Click the Shapes icon to open the shape library. You’ll see a grid of options: basic polygons (rectangle, triangle, hexagon), lines, arrows, stars, and sometimes more complex symbols like hearts or checkmarks.
Click the specific shape you want, then drag it onto the canvas. Alternatively, some versions let you click once to insert it at the center of the current viewport.
Once the shape is on the canvas, click it to select it. A floating toolbar or a properties panel on the right will appear with options like fill color, border thickness, border color, corner radius (for rounded corners), rotation angle, and opacity.
Resize the shape by dragging any of the corner handles. Hold Shift (on desktop) to maintain the aspect ratio if you want a perfect circle or square.
To move the shape, click and drag it anywhere on the canvas. Use the arrow keys on your keyboard for pixel-perfect nudging.

Customizing Shape Appearance

After placing a shape, the real design work begins. The properties panel gives you granular control. The fill color can be set to a solid color, a gradient, or even transparent (by setting opacity to 0). You can also add a border with a custom width and color, which is useful for creating outlined boxes or callout frames. Rotation is typically a numeric field where you can type an angle like 45 or 90, or you can use a slider. For polygons, some editors allow you to adjust the number of sides or the corner roundness—so a rectangle can become a pill shape, or a triangle can become a rounded triangle.

One important detail: shapes are not the same as icons. Icons are usually small, single-color glyphs meant to represent a concept (like a phone or envelope). Shapes are geometric primitives that you can stretch, fill, and layer. If you need a logo or a specific illustration, you’re better off uploading an image file (SVG or PNG) rather than trying to build it from shapes.

Common Mistakes and How to Avoid Them

Shapes not appearing on the published site: This usually happens when the shape is placed behind another element (like a full-width image) or inside a container with a hidden overflow. Check the layer order in the editor’s layers panel and bring the shape to the front.
Shape disappears when you preview on mobile: Hostinger’s builder uses responsive design. A shape that looks fine on desktop may be hidden or mispositioned on a smaller screen. Use the mobile preview toggle and adjust the shape’s position or size specifically for that breakpoint.
Can’t select a shape after placing it: If you placed a shape and then clicked elsewhere, it may be locked behind a section. Click on the section first, then look in the layers panel to find the shape and click it there.
Shape is pixelated or blurry: This occurs when you stretch a shape beyond its original vector definition. Most shapes are vector-based, so they should stay crisp, but if you’re using a raster image as a fill, it will lose quality.

Using Shapes for Layout and Design

Shapes are not just decorative. They are powerful layout tools. A common technique is to use a rectangle as a background block behind text to create a card effect. You can set the rectangle’s fill to a semi-transparent color, then place a text element on top of it. Another approach is to use lines or arrows to guide the viewer’s eye down a page—for example, a downward-pointing arrow near the top of a landing page that suggests scrolling. Circles can be used as profile photo placeholders or as badges with numbers. You can also group a shape with other elements (select multiple items and use the “Group” option) so they move together as one unit.

For a more advanced effect, layer multiple shapes. A large circle behind a smaller circle creates a ring. A rectangle with a high corner radius placed behind a button can act as a glowing shadow. Experiment with opacity and blend modes (if available) to achieve subtle depth without using images.

Comparing Manual Mode with AI Mode for Shapes

In AI mode, you can ask the assistant to “add a blue circle in the top right corner,” and it will attempt to do so. However, the AI’s output is often unpredictable—it might place the shape in an unexpected location or use a slightly different shade of blue. Manual mode gives you deterministic control. You know exactly where the shape is, its dimensions, and its styling. The trade-off is speed: AI mode can generate a whole section with shapes in seconds, while manual mode requires you to place and adjust each one individually. For a single accent shape, manual mode is faster because you don’t have to wait for the AI to process your request and then fix its mistakes.

Frequently Asked Questions

Can I add a custom shape that isn’t in the library?

No, the built-in library is fixed. However, you can upload an SVG file as an image and place it on the canvas. SVG files are scalable and behave much like vector shapes—they can be resized without losing quality. Some users create custom shapes in a free tool like Figma or Inkscape, export as SVG, and then upload.

Why can’t I change the color of a shape?

If the color picker is grayed out, the shape might be part of a pre-designed section that is locked. In Hostinger, some templates lock certain elements until you duplicate the section or unlock it via the layers panel. Also, check that you’ve selected the shape itself, not the section container.

How do I make a shape clickable as a button?

Select the shape, then look for a “Link” option in the properties panel (often a chain-link icon). You can paste a URL, choose a page from your site, or set it to scroll to an anchor. For a more accessible button, consider using the actual Button element and styling it with a custom background—this gives you better hover states and accessibility.

Can I animate a shape?

Hostinger’s builder includes basic animation options in the editor. Select the shape, go to the “Animations” tab in the properties panel, and choose an entrance effect like fade-in or slide-up. You can set the duration and delay. These animations trigger when the element scrolls into view.

Do shapes affect page load speed?

Shapes are rendered as HTML/CSS or lightweight SVG, so they have a negligible impact on load time compared to images. However, if you use many shapes with complex gradients or shadows, it can slightly increase rendering time on low-end devices. The builder compresses and optimizes assets automatically.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.