Membangun sebuah situs web dulunya terasa seperti sebuah proyek yang harus Anda sewakan orang lain untuk melakukannya. Tidak lagi.
Saya telah menggunakan Hostinger Website Builder, dan dalam panduan ini, saya akan memandu Anda melalui seluruh proses, langkah demi langkah, dari saat Anda masuk hingga situs Anda tayang.
Mari kita mulai.
Apa Itu Hostinger Website Builder?
Hostinger Website Builder adalah pembuat situs web drag-and-drop bertenaga AI yang terintegrasi langsung dalam akun Hostinger Anda.
Anda tidak perlu menginstal apa pun, tidak perlu tahu cara coding, dan tidak perlu latar belakang desain. Anda hanya menjelaskan apa yang Anda inginkan, AI membangun situs web lengkap untuk Anda, lalu Anda menyesuaikannya sesuai merek Anda.
Ini adalah salah satu cara tercepat untuk beralih dari nol menjadi situs web profesional yang sepenuhnya aktif.
Langkah 1: Masuk dan Arahkan ke Builder
Saat Anda masuk ke akun Hostinger Anda, Anda akan berada di hPanel. Ini adalah dasbor utama Hostinger, tempat Anda mengelola semuanya, termasuk situs web, domain, email, dan tagihan.
Di bilah samping kiri, Anda akan melihat daftar opsi navigasi. Klik pada Websites. Sebuah dropdown kecil akan muncul di bawahnya dengan dua opsi: Websites list dan Migrations. Klik Websites list.
Anda sekarang berada di halaman Websites list, yang menampilkan semua situs yang terhubung ke akun Anda.
Di sudut kanan atas halaman, Anda akan melihat tombol ungu + Add website. Klik tombol tersebut.
Menu dropdown akan muncul dengan empat opsi:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Dan situs Custom PHP/HTML
Anda ingin mengklik Hostinger Website Builder, yang dijelaskan sebagai “AI-powered drag-and-drop website builder.”
Langkah 2: Jelaskan Situs Anda kepada AI
Setelah memilih Hostinger Website Builder, Anda akan dibawa ke layar pengaturan dengan judul “Let AI create your online presence.”
Di sinilah Anda memberi tahu AI jenis situs apa yang ingin Anda bangun.
Anda akan melihat kotak teks besar dengan placeholder “Describe your website or business.” Ini adalah kotak prompt Anda, dan apa yang Anda ketik di sini menentukan semua yang akan dihasilkan AI untuk Anda. Semakin banyak detail yang Anda berikan, semakin baik hasilnya.
Di bawah kotak teks, Anda juga akan melihat serangkaian chips saran cepat. Ini termasuk opsi seperti “Create a business website,” “Create an online store,” “Design a portfolio,” “Launch an appointments website,” “Start a blog,” “Launch a restaurant website,” dan “Create a one pager website.”
Mengklik salah satu akan mengisi prompt awal yang kemudian bisa Anda edit dan kembangkan.
Di bagian paling bawah layar, Anda akan melihat dua tautan tambahan: Pre-made templates dan Link in bio website.
Jika Anda lebih suka melewati AI dan menelusuri desain yang sudah ada, klik Pre-made templates.
Jika Anda hanya membutuhkan satu halaman sederhana untuk profil media sosial Anda, opsi Link in bio patut dicoba.
Namun untuk kebanyakan orang yang membangun situs nyata, kotak prompt AI adalah tempat yang tepat untuk memulai.
Cara Menulis Prompt AI yang Baik
Ini adalah bagian terpenting dari seluruh proses. Anggaplah prompt AI seperti briefing yang Anda berikan kepada seorang desainer. Semakin jelas Anda mengomunikasikan visi Anda, semakin dekat hasilnya dengan apa yang Anda inginkan.
Berikut prompt yang saya gunakan untuk panduan ini. Saya sedang membangun situs untuk sebuah agensi kreatif:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
Perhatikan betapa spesifiknya prompt itu. Ia mencakup industri, nada, gaya tata letak, halaman yang dibutuhkan, struktur halaman beranda, dan tujuan konten. Detail seperti itu memberi AI dasar yang kuat untuk bekerja.
Setelah mengetik deskripsi Anda, Anda akan melihat tombol “Improve description” muncul di sudut kanan atas kotak teks.
Saya sarankan klik ini sebelum mengirim. AI akan memperluas dan menyempurnakan prompt Anda, seringkali menangkap hal-hal yang mungkin Anda lewatkan.
Ketika siap, klik tombol ungu arrow (ikon kirim) di pojok kanan bawah kotak teks untuk mengirim prompt Anda dan memulai proses pembuatan.
Langkah 3: Tunggu AI Membangun Situs Anda
Setelah Anda mengirim prompt, AI Hostinger akan langsung bekerja. Anda akan melihat animasi layar penuh dengan latar ungu tua dan pesan “Looking for matching pictures…” serta bilah progres yang menunjukkan seberapa jauh prosesnya.
Tahap ini biasanya memakan waktu antara 30 hingga 60 detik. Selama waktu ini, AI sedang melakukan banyak hal: menghasilkan tata letak halaman, menulis salinan situs, memilih gambar yang cocok dari perpustakaan stok, membuat navigasi, dan menyusun seluruh situs berdasarkan prompt Anda.
Jangan tutup tab sambil menunggu. Cukup tunggu dan biarkan proses berjalan.
Langkah 4: Tinjau Apa yang Dibuat AI
Ketika AI selesai, Anda akan melihat pratinjau situs baru Anda. Ini adalah layar hasil, dan benar-benar menyenangkan melihat apa yang dihasilkan.
Di sisi kiri layar muncul pratinjau langsung situs yang dihasilkan. Di sisi kanan ada panel berjudul “Your idea summary,” yang menampilkan ringkasan prompt yang Anda kirim dan tombol “Edit idea” jika Anda ingin kembali dan menghasilkan ulang dengan prompt yang berbeda atau diperbarui.
Dalam kasus saya, AI menamai situs “BoldCraft Studio” dan menghasilkan beranda dengan judul “Crafting Bold Brands That Shine,” deskripsi pendukung, dan dua tombol ajakan bertindak: “Start Now” dan “Get Quote.”
Bilah navigasi mencakup keenam halaman yang saya minta: Home, About, Services, Portfolio, Blog, dan Contact.
Di kiri atas layar pratinjau, Anda juga akan melihat tombol Previous versions, yang memungkinkan Anda melihat desain alternatif yang dipertimbangkan AI, dan Rate site, yang memungkinkan Anda memberikan umpan balik.
Di kanan atas pratinjau, ada ikon toggle desktop dan mobile. Gunakan ini untuk memeriksa tampilan situs di ponsel sebelum melanjutkan. Sebaiknya biasakan ini sejak awal.
Jika Anda puas dengan arahnya, klik tombol ungu Continue di panel kanan. Ini akan membawa Anda ke editor penuh tempat Anda melakukan kustomisasi lebih lanjut.
Jika Anda tidak puas, klik Edit idea, revisi prompt Anda, dan hasilkan ulang. Anda bisa melakukan ini sebanyak yang diperlukan.
Langkah 5: Kenali Editor
Editor adalah tempat Anda akan menghabiskan sebagian besar waktu. Saat pertama kali masuk, luangkan waktu untuk memahami tata letaknya sebelum mulai mengeklik.
Editor memiliki dua area utama.
- Area tengah besar adalah kanvas situs web Anda, di mana Anda dapat melihat dan berinteraksi dengan situs secara real time.
- Bilah samping vertikal di kiri adalah panel kontrol, yang berisi semua yang Anda butuhkan.
Berikut fungsi setiap item di bilah samping:
- Setup memberi Anda akses ke pengaturan dasar situs, domain yang terhubung, dan informasi paket.
- Elements membuka panel drag-and-drop tempat Anda dapat menambahkan blok konten baru ke halaman mana pun. Saya akan membahas ini lebih detail sebentar lagi.
- Pages menampilkan semua halaman Anda. Anda dapat berpindah halaman, menambah yang baru, mengganti nama, mengubah urutan, atau menghapus yang tidak diperlukan.
- Styles mengontrol desain global situs Anda. Di sinilah Anda mengatur font, palet warna, dan gaya tombol. Perubahan di sini berlaku di seluruh situs, jadi ini tempat yang tepat untuk keputusan desain besar daripada mengubah per bagian.
- AI tools memberi Anda akses ke AI penulisan dan konten Hostinger. Anda dapat menggunakannya untuk menulis ulang bagian teks, menghasilkan teks baru, dan lainnya.
- Blog adalah tempat membuat dan mengelola posting blog jika situs Anda memiliki blog.
- Store adalah tempat Anda menyiapkan toko online jika menjual produk. Fitur eCommerce memerlukan paket tingkat lebih tinggi.
- SEO membuka manajer SEO bawaan tempat Anda dapat mengatur meta title, description, dan detail optimasi lainnya untuk setiap halaman.
- More memperluas menu kedua dengan alat tambahan termasuk Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, dan Help and Resources.
Di bagian atas editor, Anda juga akan menemukan toolbar utama. Dari kiri ke kanan, terdapat toggle preview desktop dan mobile, tombol undo dan redo, tombol Connect domain, tombol Preview, dan tombol hijau Go live.
Langkah 6: Edit Konten Anda
Sekarang saatnya membuat situs menjadi milik Anda. Klik di mana saja di kanvas situs untuk mulai mengedit.
Saat Anda mengarahkan kursor ke salah satu bagian halaman, Anda akan melihat label biru muncul di sudut kiri atas bagian tersebut, menunjukkan jenis elemen, misalnya “Section” atau “Header.” Pada saat yang sama, toolbar mengambang kecil muncul di atas bagian dengan opsi pengeditan.
Toolbar bagian memberikan kontrol berikut dari kiri ke kanan: Edit section membuka panel pengaturan bagian, di mana Anda dapat mengubah gambar latar atau warna, menyesuaikan padding, dan memodifikasi opsi tata letak.
Di sampingnya ada Generate image, yang membuka generator gambar AI.
Setelah itu, ada ikon Duplicate, toggle Hide/Show, ikon Delete, panah Move up dan Move down untuk mengurutkan ulang bagian, serta menu More dengan tiga titik.
Untuk mengedit teks apa pun di halaman, cukup klik langsung pada teks dan mulai mengetik. Elemen teks akan menjadi dapat diedit, dan Anda akan melihat kontrol format muncul. Anda dapat mengubah ukuran font, berat, perataan, dan warna langsung dari kontrol ini.
Untuk mengubah gambar, klik pada gambar tersebut. Anda akan melihat opsi untuk menggantinya dengan foto dari file Anda sendiri, menelusuri perpustakaan gambar stok Hostinger, atau menghasilkan yang baru dengan AI.
Kerjakan halaman beranda Anda terlebih dahulu, lalu gunakan panel Pages untuk beralih ke setiap halaman tambahan dan edit satu per satu.
Langkah 7: Gunakan AI Image Generator
Salah satu fitur yang patut diperhatikan adalah AI image generator, karena sangat berguna jika Anda tidak memiliki foto profesional sendiri.
Untuk mengaksesnya, arahkan kursor ke bagian manapun di halaman Anda dan klik Generate image di toolbar mengambang bagian. Panel akan muncul dari sisi kanan layar.
Di dalam panel, Anda akan melihat kotak teks “Image description.” Ketik deskripsi gambar yang ingin Anda buat.
Semakin spesifik dan visual deskripsi Anda, semakin baik hasilnya. Panel menampilkan batas karakter 3.000 dan indikator kualitas real-time yang memberi tahu Anda apakah deskripsi Anda cukup kuat.
Misalnya, ketika saya mengetik “A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office,” panel menunjukkan “Great description!” dengan bar kualitas terisi penuh.
Saat sudah puas dengan deskripsi, klik tombol Create images. AI akan menghasilkan beberapa gambar untuk Anda pilih.
Perlu diingat: AI image generator memerlukan paket Business atau lebih tinggi. Jika Anda berada di paket Premium, Anda akan melihat prompt untuk upgrade di bagian bawah panel.
Langkah 8: Tambahkan Elemen Baru ke Halaman Mana Pun
Jika Anda ingin menambahkan blok konten yang belum ada di halaman, klik Elements di bilah samping kiri. Ini membuka panel “Add elements.”
Anda akan melihat grid semua elemen yang tersedia, termasuk Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed, dan Contact form. Untuk menambahkan elemen apa pun ke halaman, seret dari panel dan jatuhkan ke kanvas di lokasi yang diinginkan.
Setelah ditempatkan, klik elemen tersebut untuk mengakses pengaturan dan opsi styling individual.
Pendekatan drag-and-drop ini memastikan Anda tidak terkunci pada tata letak yang dihasilkan AI. Anda dapat menambah, menghapus, dan menyusun ulang elemen sesuka hati.
Langkah 9: Kelola Halaman Anda
Klik Pages di bilah samping kiri untuk melihat semua halaman Anda dalam satu tempat. Anda dapat mengklik nama halaman untuk langsung mengedit halaman tersebut.
Untuk menambahkan halaman baru, gunakan tombol plus. Untuk mengubah urutan halaman di navigasi, seret halaman naik atau turun dalam daftar.
Jika ada halaman yang dihasilkan AI tetapi Anda tidak memerlukannya, Anda dapat menghapusnya di sini. Demikian pula, jika Anda membutuhkan halaman tambahan yang AI tidak sertakan, seperti halaman Testimonials atau Pricing, Anda dapat menambahkannya di sini lalu membangunnya menggunakan panel Elements.
Langkah 10: Atur SEO Anda
Sebelum mempublikasi, Anda perlu mengatur SEO. Ini adalah langkah yang sering dilewatkan banyak orang, dan itu kesalahan.
Melakukan pengisian pengaturan SEO dengan benar selama 15 menit dapat membuat perbedaan nyata apakah orang menemukan situs Anda melalui Google.
Klik SEO di bilah samping kiri untuk membuka panel SEO berjudul “Let’s be found on Google (SEO).”
Panel dibagi menjadi dua bagian. Di kiri, Anda akan melihat daftar semua halaman. Di kanan, Anda akan melihat Website overview, yang menampilkan nama bisnis dan bahasa situs. Klik Edit untuk memperbarui jika belum benar.
Di bawah informasi situs, ada bagian berjudul “Some pages require your attention.”
Setiap halaman yang perlu diperbaiki ditandai dengan ikon peringatan oranye. Klik halaman mana pun di panel kiri untuk membuka pengaturan SEO individual, di mana Anda dapat menulis meta title dan meta description untuk halaman tersebut.
Kerjakan setiap halaman dalam daftar. Meta title yang baik jelas, mengandung kata kunci utama Anda, dan kurang dari 60 karakter. Meta description yang baik meringkas isi halaman dan kurang dari 160 karakter. Ini adalah snippet yang muncul di hasil pencarian Google, jadi luangkan beberapa menit untuk setiap halaman.
Langkah 11: Hubungkan Domain Anda
Jika Anda belum menghubungkan domain kustom ke situs Anda, sekaranglah saatnya. Klik tombol Connect domain di toolbar atas editor.
Anda memiliki dua opsi. Jika Anda sudah memiliki domain, Anda dapat menghubungkannya dengan memperbarui pengaturan DNS untuk mengarah ke server Hostinger. Jika belum memiliki domain, Anda dapat membelinya langsung dari Hostinger di layar yang sama.
Sampai Anda menghubungkan domain, situs Anda akan dapat diakses melalui subdomain sementara Hostinger, seperti yoursite.builder-preview.com. Itu baik untuk pengujian, tapi Anda ingin domain yang tepat sebelum mulai membagikan situs secara publik.
Langkah 12: Pratinjau Situs dan Terbitkan
Anda hampir selesai. Sebelum menekan publish, klik tombol Preview di toolbar kanan atas.
Ini membuka pratinjau layar penuh dari tampilan situs Anda bagi pengunjung. Ganti antara tampilan desktop dan mobile menggunakan ikon di atas layar pratinjau dan pastikan semuanya terlihat baik di keduanya.
Perhatikan terutama tampilan hero section halaman beranda di mobile, cara navigasi terlipat, dan apakah ada gambar yang terpotong tidak sesuai.
Saat Anda puas, kembali ke editor dan klik tombol hijau Go live di sudut kanan atas. Situs Anda sekarang dipublikasikan dan tayang di internet.
Langkah 13: Jelajahi Integrasi
Setelah situs Anda tayang, ada baiknya menjelajahi integrasi yang tersedia. Pergi ke More > Integrations di bilah samping kiri.
Panel Integrations memungkinkan Anda menghubungkan situs ke alat dan layanan eksternal. Opsi saat ini mencakup Shippo untuk membuat label pengiriman dan mengelola pemenuhan pesanan, Printful untuk membuat dan menjual produk print-on-demand, Hostinger Reach untuk email marketing dan mengirim newsletter, Google Ads untuk menjalankan kampanye iklan berbayar, dan Custom code jika Anda ingin menambahkan HTML, CSS, atau JavaScript Anda sendiri untuk memperluas fungsionalitas situs.
Untuk mengaktifkan integrasi, klik Get started di sampingnya, ikuti langkah koneksi, lalu perbarui situs Anda dengan mempublikasikannya kembali.
Tips untuk Memaksimalkan Hostinger Website Builder
Prompt AI secukupnya rinci. Prompt dua kalimat hanya akan menghasilkan hasil generik. Prompt yang detail dan spesifik yang mencakup industri Anda, audiens, preferensi desain, struktur halaman, dan nada suara akan memberikan sesuatu yang jauh lebih mendekati apa yang Anda inginkan. Luangkan lima menit menulis briefing yang baik dan itu akan menghemat waktu Anda berjam-jam mengedit nanti.
Gunakan tombol Improve description setiap kali. Tombol ini sering terlewat, tetapi sangat membantu. AI sering menangkap hal-hal yang Anda abaikan dan mengubahnya menjadi instruksi desain dan konten yang konkret.
Edit salinan Anda dengan teliti. AI menulis salinan placeholder yang layak, tetapi AI tidak mengenal bisnis Anda sebaik Anda. Periksa setiap halaman dan tulis ulang teks untuk mencerminkan layanan Anda yang sebenarnya, nilai Anda, dan suara Anda yang asli.
Periksa tampilan mobile sebelum publish. Hostinger otomatis membuat situs Anda responsif, tetapi kadang gambar dan spasi memerlukan penyesuaian kecil di layar yang lebih kecil. Selalu pratinjau di mobile sebelum situs live.
Isi SEO untuk setiap halaman. Bukan hanya halaman beranda. Setiap halaman di situs Anda membutuhkan meta title dan description yang baik. Ini memerlukan beberapa menit per halaman dan merupakan salah satu cara paling mudah untuk meningkatkan visibilitas Anda di hasil pencarian.
Gunakan Media library untuk tetap terorganisir. Di bawah More > Media library, Anda dapat mengunggah dan mengelola semua gambar di satu tempat. Ini memudahkan penggunaan ulang gambar di beberapa halaman dan menjaga konsistensi situs.
Kunjungi kembali dan terus perbaiki. Mempublikasikan situs bukan akhir, melainkan awal. Kunjungi kembali secara berkala untuk memperbarui konten, menambah posting blog, dan menyempurnakan halaman seiring bisnis Anda berkembang.
Hostinger Website Builder menghilangkan hampir semua hambatan yang dulu menghalangi Anda membuat situs profesional. AI melakukan pekerjaan berat pada desain dan salinan, editor memudahkan kustomisasi, dan alat SEO serta integrasi bawaan memastikan Anda memiliki semua yang dibutuhkan di satu tempat.
Ikuti langkah-langkah dalam panduan ini dan Anda bisa memiliki situs yang live dan tampak profesional dalam kurang dari satu jam.
