To add a shape in Hostinger AI Builder manual mode, open the site editor, expand Add elements on the left, find Shape, and drag it onto the template. Select the shape afterward to change its form and color, duplicate, hide, delete, resize, or rotate it directly on the canvas.
Adding a shape to your page
The steps below follow Hostinger’s shape instructions in its Help Center. Editor labels can change between releases, so if a label differs slightly on your screen, look for the same element group.
As an Amazon Associate I earn from qualifying purchases.
- Open your website in manual mode in the Hostinger AI Builder editor.
- In the left-hand panel, expand Add elements.
- Find Shape in the list of elements.
- Drag the shape onto the template and release it where you want it to sit. Hostinger’s shape guide describes drag and drop as the insertion method. Its general element guide also says elements can be clicked to insert them into a selected section, so use whichever method works better for your layout.
- Select the shape on the canvas to open its controls.
Customizing a selected shape
Once a shape is selected, Hostinger lists options to change its form, change its color, duplicate it, hide it on desktop or mobile, delete it, resize it, and rotate it. The shape guide describes these controls as working directly on the canvas, so you do not need to leave the editor to adjust the figure.
- Change shape: swaps the geometric form while keeping the element in place.
- Change color: updates the fill of the selected shape.
- Duplicate: creates a copy you can position separately.
- Hide on desktop or mobile: lets you show the shape on one device type and remove it from the other.
- Resize and rotate: adjust the figure on the canvas. Hostinger’s shape article does not list numeric dimensions or exact angle values, so judge proportions visually.
- Delete: removes the shape from the page.
Layering shapes over or under other elements
If a shape covers text or an image, or sits behind something it should be in front of, use the element’s right-click menu. Hostinger documents four layering commands: bring to front, move forwards, send to back, and send backwards. Use bring to front and send to back when you need to move a shape across the full stack, and move forwards or send backwards for single-step adjustments.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Copy and paste is also available for individual elements. Hostinger’s copy-paste guide says only one element can be copied and pasted at a time, so copy a shape, paste it, and repeat for each additional copy rather than selecting several shapes together.
Standalone shapes are not the same as other shape settings
The word “shape” appears in several places in the Hostinger editor, and they control different things. Confusing them is the most common reason a reader cannot find the setting they expected.
| Setting | What it changes | Where to find it |
|---|---|---|
| Standalone Shape element | A decorative geometric figure placed on the page | Add elements, then Shape |
| Button shape | The corner style and geometry of buttons | Global Website styles, or locally in supported button and form controls |
| Image Shape option | The outline or mask applied to an image element | The selected image element’s own controls |
| Section layout settings | Snapping, row spacing, and placement of sections | Section layout controls, not the element list |
If you want a decorative figure, use the standalone Shape element described above. If you want rounded corners on a call-to-action button, change the button shape instead, since adding a standalone shape will not restyle the button.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Checking the result on mobile
Because shapes can be hidden on desktop or mobile, a figure that looks right on the desktop canvas may crowd a small screen. Hostinger’s manual-mode guide describes a separate mobile editor, so check the mobile view after placing a shape and use the hide option for that device if the shape interferes with text or buttons.
Rank #3
Troubleshooting
- Shape does not appear in Add elements: confirm you are in manual mode and that the editor has finished loading. Hostinger’s element guide lists 15 website elements in total, and Shape is one of them. That count comes from the Help Center article, which does not state a publication year, so treat it as the count at the time you read it rather than a permanent figure.
- Shape is hidden behind an image or text block: right-click the shape and choose bring to front, or move it forwards one step at a time.
- Shape appears on desktop but not on mobile: select the shape and review its hide-on-device setting for the mobile view.
- Button corners did not change after adding a shape: this is expected. Change the button shape through global Website styles or the button’s own controls.
Scope of these instructions
These steps cover Hostinger AI Builder’s manual-mode editor as documented in Hostinger’s Help Center at the time of writing. Hostinger may rename labels or add options, so the menu structure above is a starting point rather than a guarantee for every account or future release.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
