Ubah Warna SectionMenggunakan Prompt

Selain membuat dan mengedit landing page secara manual, Tapsite juga menyediakan bantuan AI untuk melakukan berbagai perubahan pada elemen halaman.

Pada tutorial ini, kita akan mencoba menggunakan AI untuk mengubah warna background Hero Section dan menambahkan jarak pada gambar agar tampilan landing page lebih rapi.

Mengubah Background Section dengan AI

Sebagai contoh, kita akan mengubah background Hero Section yang awalnya berwarna putih menjadi warna hijau gelap.

1. Buka Editor Tapsite

Pertama, buka halaman Editor Tapsite dari landing page yang ingin diedit.

Pastikan kamu berada dalam Mode Desain.

2. Pilih Section yang Ingin Diubah

Klik Hero Section yang ingin dimodifikasi.

Pada contoh ini, section terlebih dahulu diduplikasi agar kita dapat membandingkan hasil sebelum dan sesudah perubahan.

Setelah section berhasil diduplikasi, simpan perubahan sebelum melanjutkan.

3. Gunakan AI untuk Mengubah Background

Klik section yang ingin diedit dan buka pengaturan AI melalui Prompt.

Kemudian berikan instruksi mengenai perubahan yang diinginkan.

Contohnya:

Ubah warna background menjadi hijau gelap. Pastikan teks berwarna putih atau menggunakan warna yang kontras agar mudah dibaca.

Instruksi seperti ini memberikan AI konteks mengenai warna background sekaligus memastikan elemen teks tetap memiliki kontras yang baik.

4. Pilih Model AI dan Jalankan

Pilih model AI yang tersedia sesuai kebutuhan.

Setelah itu, jalankan prompt dan tunggu hingga AI selesai memproses perubahan.

AI akan membaca elemen yang terdapat pada section dan menerapkan perubahan berdasarkan instruksi yang diberikan.

Jika hasilnya sudah sesuai, klik Save.

Setelah halaman di-reload, background Hero Section yang sebelumnya berwarna putih akan berubah menjadi hijau sesuai dengan instruksi.

Menambahkan Jarak pada Gambar dengan AI

Selain mengubah warna, AI juga dapat digunakan untuk memperbaiki spacing atau jarak antar-elemen.

Sebagai contoh, gambar pada Hero Section terlihat terlalu dekat dengan bagian atas atau bawah section.

Kita dapat meminta AI untuk memberikan jarak tambahan.

1. Pilih Section

Pastikan masih berada di halaman Editor dan menggunakan Mode Desain.

Pilih section yang ingin diberi tambahan jarak.

2. Berikan Instruksi melalui Prompt

Buka mode Prompt, kemudian jelaskan perubahan yang diinginkan.

Contohnya:

Tambahkan jarak atau gap di bawah gambar Hero Section agar gambar tidak terlalu mepet ke bagian bawah.

Instruksi tersebut cu