How To: Hostinger Website Builder Image & Shape Rotation

Learn how to use Hostinger's new rotation controls to create angled images, layered shapes, and more modern page designs!

DO IT YOURSELFHOSTINGER WEBSITE BUILDER

Jeremy Cerce

6/15/20267 min read

Need Help With Hostinger Website Builder?

Join the Hostinger Website Builder Community & Support group to ask questions, share your site, and connect with others.

Get 20% Off Hostinger

Ready to Build Your Website with Hostinger?

Create your website using Hostinger Website Builder and receive 20% off eligible Hostinger products through my referral link.

Join the Facebook Group

Watch the Video Tutorial & Subscribe for More!

Prefer to follow along visually? Watch the complete walkthrough below and subscribe for more Hostinger Website Builder Tutorials!

Subscribe for Tutorials

white ceramic cup on white ceramic saucer

New
Arrivals

Hostinger Website Builder - Images and Shapes Rotation Feature

Well this is fun now isn't it! I always get so excited with Hostinger releases a new design feature for the Hostinger Website Builder. Hostinger has come a long way from where it started and it just keeps on getting better. As you can see above there are endless opportunities for using the new image and shape rotation feature that was just released. Design FREEDOM is what draws us to this platform. I have used every other website builder on the market and none of them compare with how intuitive this one is. It really reminds me of Adobe Illustrator where you can drag, drop, rotate, combine and MOVE with the ease of using your mouse.

Hostinger Website Builder recently added a simple but really useful design feature: the ability to rotate images and shapes. This may sound like a small update, but it opens up a lot of new layout possibilities for anyone trying to make their website look more modern, creative, and less “boxy.” Before this update, most Hostinger Website Builder designs were limited to straight rows, square sections, and basic image placement. Now, with image and shape rotation, you can create angled graphics, layered sections, tilted photos, modern hero layouts, and more interesting page designs without needing custom code. In this tutorial, I’ll show you how to rotate images and shapes in Hostinger Website Builder and give you a few ideas for how you can use this feature to improve your own website design.

Why the Rotation Feature Matters

Website builders are great because they make it easy for anyone to build a website without coding. But sometimes, simple website builders can feel a little limited when it comes to custom design. The new rotation feature helps fix some of that. Instead of every image sitting perfectly straight on the page, you can now slightly tilt photos, icons, and shapes to create more movement in your design. Even a small rotation can make a page feel more custom and less like a basic template.

This is especially useful for:

Business websites
Portfolio sections
Blog posts and tutorials
Landing pages
Call-to-action sections
Product images
Decorative background shapes
Modern hero sections

You do not need to overdo it. A small 3-degree, 5-degree, or 8-degree rotation can be enough to make a section feel more polished.

How to Rotate an Image in Hostinger Website Builder

To rotate an image in Hostinger Website Builder, start by clicking on the image you want to adjust. Once the image is selected, look for the rotation control. Depending on the editor view, you may see a small rotation handle near the image or rotation settings in the editing panel. Click and drag the rotation control to angle the image left or right. For most website designs, I recommend keeping the rotation subtle. A slight angle usually looks cleaner than a dramatic tilt.

A good starting point is:

3 to 5 degrees for a clean professional look
5 to 10 degrees for a more playful or creative look
10+ degrees only when you intentionally want a bold design effect

After rotating the image, preview your page on desktop and mobile to make sure it still looks good on different screen sizes.

How to Rotate a Shape in Hostinger Website Builder

Rotating shapes works in a similar way. Add a shape to your page, select it, and use the rotation control to angle it. Shapes can be used behind images, behind text blocks, or as small decorative design elements. This is where the feature becomes really useful. For example, you can place a rectangle or square behind an image, rotate it slightly, and create a layered design effect. You can also use a rotated shape behind a button or heading to make that section stand out.

Since Hostinger Website Builder currently has some limitations with shadows and rounded corners, rotated shapes can help add visual interest without needing more advanced design controls.

Design Ideas Using Rotated Images and Shapes

Here are a few ways you can use this new feature on your own website.

1. Create a Modern Hero Section

A hero section is the large first section visitors usually see at the top of your website. You can keep your headline and button clean on one side, then place a slightly rotated image or shape on the other side. This gives the page a more custom look without making it confusing.

For example, you could use:

A business photo rotated slightly
A screenshot of your service or product
A decorative shape behind the image
A tilted card with a testimonial or quick stat

This works really well for service businesses, portfolios, and landing pages.

2. Make Blog Posts Look Less Plain

Blog posts can sometimes feel boring if they are just text from top to bottom. With rotated images and shapes, you can make your blog layout feel more designed. You can add a tilted image near the top, use angled shapes behind callout boxes, or create custom sections for video tutorials, downloads, or related links.

For tutorial posts like this one, I like using separate cards for:

The video tutorial
A Facebook group link
A recommended tool or referral link
A quick summary or checklist

This makes the post easier to scan and gives readers more ways to engage.

3. Layer Shapes Behind Photos

One of the easiest design tricks is placing a shape behind a photo and rotating one of the layers.

For example:

Add a square or rectangle shape
Place it behind your image
Rotate the shape slightly
Keep the image straight, or rotate the image in the opposite direction

This creates a layered card effect and makes the image feel more intentional. Even though Hostinger’s builder is still fairly simple compared to tools like Elementor, Webflow, or Framer, this one feature gives you a lot more flexibility.

4. Add Movement to Call-to-Action Sections

A call-to-action section is where you ask visitors to do something, like book a call, join a group, download a guide, or visit another page. Rotated shapes can help make these sections stand out.

For example, you could create a section that says:

“Need help with Hostinger Website Builder?”

Then add a slightly rotated Facebook icon, a background shape, and a button linking to your community group, just like I did above! The small angle makes the section feel more fun and clickable without needing animation.

5. Use Rotation for Tutorial Graphics

If you are creating tutorials, rotated screenshots can help make your visuals look more interesting. Instead of placing every screenshot flat on the page, you can slightly angle a few of them to create a more polished tutorial style.

This works especially well for:

Website builder tutorials
Software walkthroughs
Before-and-after design examples
Portfolio mockups
Feature highlight sections

Just make sure the screenshot is still readable.

Don’t Overuse Rotation!

The biggest mistake with this feature is using too much of it. Just because you can rotate every image and shape does not mean you should. If every element on the page is tilted, the design can start to feel messy. Rotation works best when it is used as an accent. A good rule is to rotate one or two elements in a section, not everything. Use rotation to guide attention, create contrast, or make a specific card or image stand out.

Check the Mobile Version!

After rotating images or shapes, always check your mobile layout. An angled image that looks great on desktop may overlap text or look awkward on a phone. Hostinger Website Builder lets you adjust the mobile version separately, so take a minute to clean up the mobile view before publishing.

On mobile, you may need to:

Reduce the rotation
Resize the image
Move the shape behind the content
Hide a decorative element
Stack cards vertically

This is especially important because many visitors will view your website from their phone.

Final Thoughts

The ability to rotate images and shapes in Hostinger Website Builder is a small update, but it makes a big difference for design flexibility. You can now create more modern sections, layered graphics, angled image layouts, and custom-looking blog posts without needing custom code or advanced design tools. My recommendation is to keep it simple. Use small rotations, layer shapes behind images, and always check your mobile layout before publishing. Used the right way, this new feature can help your Hostinger website feel much more polished and professional.