iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To create a portfolio in Hostinger AI Builder’s manual mode, choose your site template carefully, organize your work into Projects, About, and Contact, customize the pages, then review the mobile layout and publish. One decision matters before you begin: Hostinger says you cannot switch templates after creating the site without recreating it.
Plan the pages and project layout
Start with three core pages: Projects, About, and Contact. Projects presents your work, About introduces you, and Contact gives visitors a way to reach you. Add a blog or other pages only if they serve a clear purpose for your portfolio.
Choose how visitors will browse your projects before building the pages:
Free tools Windows power users keep installed
One-click scans. No signup required.
- One Projects page: Keeps browsing compact and works well when visitors can understand each project from a concise entry.
- A separate page for each project: Gives you room to explain the context, your role, and the finished work. It also means more pages to navigate and maintain.
- Separate project pages grouped in a dropdown: Helps organize several projects under a single navigation item, though visitors may need an extra click to reach a project.
These are supported layout options in Hostinger’s portfolio guide. Pick the simplest structure that gives your work enough context, and consider how you will add future projects.
#1 Best Overall
- No programming skills required
- With 1 licence you can install the software on 2 computers and create as many sites as you wish
- 250 professional and customizable templates
- Import images and videos (including YouTube), editor for creating buttons
- Automatic HTML5 code generation + FTP engine for publishing your website
Choose a template before creating the site
In the dashboard, open Websites, choose Create website, and select AI Builder. Choose Manual, then open Pre-made templates. Browse the Portfolio category, preview the designs, and select Use template on the one that best fits your planned pages and project layout.
Compare templates by their included page structure, section arrangement, visual style, and the amount of rebuilding you would face if the design does not suit your needs. Hostinger’s template instructions say the selected template is fixed after site creation. If you want a different one, you must recreate the site and connect the domain to the replacement. Choose with that constraint in mind.
Build the Projects, About, and Contact pages
Projects
Add your work using the layout you chose. Make it easy for a visitor to identify what each project is and why it is relevant. If a project needs more explanation than a short entry can provide, give it a dedicated page; otherwise, a single Projects page can keep navigation brief.
Recommended Free Tools
About
Use a short bio to explain who you are and the work you do. Hostinger’s portfolio guide also suggests images or a gallery, social links, and—if they support your introduction—personal interests or influences.
Rank #3
- Create websites using over 240 templates
- Modular website builder with over 1,000 design elements
- Web design software with over 130 photo filters
- Animation & effects
- 2 GB web storage & domain*
Contact
Keep this page direct. Choose one or more ways for visitors to reach you: a form, email address, phone number, or social links. Include only the contact methods you want to monitor.
Customize the sections and visual style
In the editor, build each page from section templates, generate sections with AI, or start with blank sections. Customize the content and arrangement, including backgrounds and elements such as text, images, buttons, video, and forms. Hostinger documents these options in its guides to adding and editing sections and adding and editing website elements.
Rank #4
- Create websites using over 240 templates
- Modular website builder with over 1,000 design elements
- Integrated search engine optimization (SEO) tools
- GB web storage & domain*
- Web design – no programming experience required
Use the global style controls to set colors, text, buttons, and animations consistently. Use local section or element settings when a specific part of a page needs different treatment. Hostinger describes these controls in its website styles guide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Review the mobile layout separately
Switch to mobile view in the editor and inspect the pages there. Hostinger notes that changing the order of elements on desktop does not automatically change their order on mobile. Check that project images, headings, navigation, and contact options appear in a sensible order and remain easy to use on a smaller screen. The style guide covers the editor’s presentation controls.
Quick Recap
Best Value
- Build, Generate, Edit, and Export Reflexive Website Templates
- 1) Restaurants
- 2) E-Commerce
- 3) Blogs
- 4) Business Home Page
Check settings, preview, and publish
- Review site settings. Check the general settings and page-specific meta titles and descriptions. Add alt text to images, as recommended in Hostinger’s portfolio guide.
- Preview the pages. Use the editor’s preview to look over the site before launch. Preview functions are limited, and some features can only be fully tested after publication, according to Hostinger’s preview guide.
- Publish the site. A manual-mode site stays a private draft until it is first published. When you are ready to make it live, select Publish in the editor. Hostinger explains this in its publishing guide.
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.

