ThisCalculator

Everyday

Add Slideshow in Hostinger AI Builder Manual Mode

Updated · Standard formula, shown below

Add Slideshow in Hostinger AI Builder Manual Mode

To add a slideshow in Hostinger AI Builder manual mode, you use the built-in Slideshow element from the content blocks panel, then configure its images, transition effects, and autoplay settings in the right-side inspector. This guide walks through the entire process step by step, including how to add, edit, and troubleshoot your slideshow.

Background: Hostinger AI Builder and Manual Mode

Hostinger’s website builder offers two main ways to build a site: AI mode and manual mode. AI mode generates a full site from a text prompt, while manual mode gives you a blank canvas and a drag-and-drop editor. In manual mode, you control every element, including the slideshow. The editor is similar to other modern website builders: a left panel with content blocks, a central canvas, and a right panel for settings. The slideshow element is part of the standard block library, so you don’t need any custom code.

Step-by-Step: Adding a Slideshow

  1. Open the editor: Log in to your Hostinger account, go to Websites, and click Edit Website for the site you want to modify. Make sure you are in Manual Mode (if you’re in AI mode, switch via the top bar).
  2. Access the content blocks: On the left side of the editor, click the Add or + button (usually a plus icon) to open the block library. Look for the Slideshow or Carousel block. In most versions, it’s under the Media or Advanced section.
  3. Drag or click to add: Either drag the slideshow block onto your canvas or click it to insert it at the current cursor position. The block will appear with placeholder images.
  4. Upload your images: Click on the slideshow on the canvas. In the right panel, you’ll see a list of slides. Click Add Slide or the + icon to add more. For each slide, click the image placeholder to upload from your computer, choose from the media library, or paste a URL. You can also add text overlays, buttons, and links to each slide.
  5. Set transition and autoplay: In the right panel, look for settings like Effect (fade, slide, etc.), Autoplay (toggle on/off), Interval (seconds between slides), and Show arrows/dots (enable or disable navigation controls). Adjust these to your preference.
  6. Resize and position: Click and drag the corners of the slideshow to resize it. Drag the whole block to reposition it on the page. Use the alignment guides to place it neatly.
  7. Save and preview: Click Save in the top right, then Preview to see the slideshow in action. Make sure images load correctly and transitions look smooth.

How to Choose Slideshow Settings

Your settings depend on the slideshow’s purpose. For a hero banner, use large images (1920×1080 px recommended) and set autoplay to 5–7 seconds. For a product gallery, use square images and disable autoplay so visitors can browse manually. For a testimonial slider, use text slides with a fade effect and show navigation arrows. Always optimize images for web (compress to under 200 KB) to keep loading times fast.

Common Problems and Fixes

  • Slideshow not showing on mobile: Check the responsive settings. In the right panel, switch to mobile view (the phone icon) and ensure the block is not hidden. Sometimes images need separate mobile crops.
  • Images not loading: Verify file formats (JPEG, PNG, WebP). Large files may fail. Re-upload a compressed version.
  • Autoplay not working: Some browsers block autoplay with sound. If you added a video slide, mute it or set autoplay to muted.
  • Slideshow height too tall: Adjust the height in the block settings. Set a fixed height (e.g., 500 px) instead of auto to keep it consistent.
  • Unable to add more than 5 slides: This is a common limit in some versions. If you need more, consider using a gallery block or splitting into multiple slideshows.

Comparison: Slideshow vs. Other Media Blocks

Hostinger AI Builder also offers an Image Gallery and a Video block. A slideshow is best for rotating content in a fixed space. An image gallery displays a grid of thumbnails that open in a lightbox. A video block embeds a single video. Use a slideshow when you want to tell a story or feature multiple key messages without taking up vertical space. Use a gallery when you want visitors to browse many images at once.

Costs and Limits

Hostinger AI Builder is included in Hostinger’s website builder plans, which start at a low monthly rate (often under $3 with a long-term contract). There is no extra charge for the slideshow element. However, storage space is limited by your plan (e.g., 10 GB on the cheapest plan). High-resolution images can quickly consume this, so compress images before uploading. Also, the number of slides per slideshow may be capped (often 5–10) depending on the current version.

Safety and Best Practices

  • Use original images: Avoid copyrighted images unless you have a license. Use your own photos or free stock photo sites.
  • Add alt text: For accessibility, add descriptive alt text to each slide image. This helps screen readers and SEO.
  • Keep text readable: If you overlay text on images, use a semi-transparent background or a dark overlay to ensure contrast.
  • Test on multiple devices: Preview on desktop, tablet, and mobile to ensure the slideshow renders correctly.
  • Backup your site: Before making major changes, use Hostinger’s backup feature to restore if something goes wrong.

Alternatives to the Built-in Slideshow

If the built-in slideshow doesn’t meet your needs, you can embed a third-party slider (like Swiper or Slick) using an HTML block. However, this requires coding knowledge and may not be as smoothly integrated. Another option is to use a static image with a CSS animation, but that’s more advanced. For most users, the built-in slideshow is sufficient and easier to maintain.

Frequently Asked Questions

Can I add a slideshow in Hostinger AI Builder without coding?

Yes, the slideshow is a drag-and-drop element. You don’t need any coding skills. You simply add the block, upload images, and configure settings in the right panel.

How do I change the transition effect in Hostinger slideshow?

Select the slideshow on the canvas, then in the right panel look for a dropdown labeled Effect or Transition. Choose from options like fade, slide, or zoom. Save and preview to see the change.

Why is my slideshow not autoplaying?

Check that the Autoplay toggle is enabled in the slideshow settings. Also, ensure the interval is set to a reasonable number (e.g., 3–5 seconds). If you have a video slide, it must be muted for autoplay to work in most browsers.

Can I add links to slides?

Yes, each slide can have a link. In the slide settings, you’ll find a field for Link. Enter a URL or choose a page from your site. The entire slide becomes clickable.

How many slides can I add?

The limit varies by version, but typically you can add up to 10 slides. If you need more, consider using multiple slideshows or a gallery block.

Does the slideshow affect page speed?

Yes, large images can slow down your page. Compress images to under 200 KB and use modern formats like WebP. Also, enable lazy loading if available in the settings.

Related

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