Buat Halaman Baru di SWIFT Page

[Panduan versi PDF dapat diakses di sini.]

Untuk membuat halaman (landing page) baru, berikut langkah-langkahnya:

1. Buka  menu SWIFT Page > Kelola Halaman. Klik tombol Tambah Halaman.

2. Lengkapi detail halaman, meliputi:

1. Informasi Halaman

• Judul: Nama atau titel utama halaman yang ditampilkan kepada pengguna.

b. Search Engine Optimization

• URL Key: Bagian khusus dari URL yang menentukan alamat halaman di situs.

• Meta Title: Judul halaman yang muncul di hasil pencarian mesin pencari.

• Meta Keywords: Kata kunci terkait yang membantu mesin pencari memahami isi halaman.

• Meta Description: Ringkasan singkat halaman yang ditampilkan di hasil pencarian.

3. Pada Pemilihan Halaman, terdapat dua opsi: 

1. Pilih Tema

Klik pada tema yang diinginkan untuk membuat halaman baru.

2. Buat dari Halaman Kosong

Anda dapat membuat halaman dari kanvas kosong pada page builder.

4. Klik Selanjutnya.

5. Jika Anda menggunakan tema, pada page builder akan tampil layout halaman sesuai tema yang dipilih. Anda juga dapat menambahkan blok seperti halnya mendesain dari kanvas kosong.

6. Atur tampilan halaman dengan menggunakan:

2. Tampilan Tablet: Setiap perubahan di tampilan ini hanya disesuaikan di tampilan tablet saja (tidak disarankan).

3. Tampilan Desktop: Setiap perubahan di tampilan ini hanya disesuaikan di tampilan desktop/laptop saja (tidak disarankan).

7. Gunakan tools yang tersedia langsung di kanvas yaitu:

1. Edit teks: Klik dua kali pada teks untuk mengubah teks dan menampilkan editor teks.

• : Mengubah teks menjadi bold (tebal).

• : Mengubah teks menjadi italic (miring).

• : Menambahkan underline (garis bawah) pada teks.

• : Menambahkan strikethrough (garis/coretan di tengah teks) pada teks.

• : Menambahkan tautan (link) pada teks yang dipilih.

• : Membungkus elemen dalam container guna mempermudah styling.

2. Ubah gambar: Klik pada gambar lalu klik ikon pensil untuk menampilkan editor gambar seperti berikut:

3. Tampilkan grup layer: Klik ikon untuk menampilkan grup layer pada layer manager di sebelah kanan halaman.

4. Geser komponen: Klik ikon untuk menggeser letak komponen seperti berikut:

5. Salin komponen: Klik ikon untuk menyalin komponen.

6. Hapus komponen: Klik ikon untuk menghapus komponen.

8. Gunakan toolbar untuk mempermudah editing:

1. View Components: Menampilkan daftar komponen yang tersedia untuk digunakan dalam page builder.

2. Preview: Melihat tampilan halaman sebelum dipublikasikan.

3. Fullscreen: Mengaktifkan mode layar penuh untuk pengalaman editing yang lebih luas.

4. View Code: Menampilkan kode sumber (source code) halaman yang sedang dibuat.

5. Undo: Membatalkan perubahan terakhir.

6. Redo: Mengembalikan perubahan yang dibatalkan.

7. Import: Mengunggah atau memasukkan kode atau template ke dalam editor.

8. Clear Canvas: Menghapus semua elemen dari halaman untuk memulai dari awal.

Klik OK untuk mengonfirmasi pengosongan kanvas.

9. Gunakan Blocks untuk menambah komponen pada halaman.

1. Layout, meliputi:

• Header: Bagian atas halaman yang biasanya berisi logo, menu navigasi, dan elemen penting lainnya.

• Footer: Bagian bawah halaman yang biasanya berisi informasi kontak, tautan tambahan, dan hak cipta.

• Section: Blok konten yang digunakan untuk mengatur dan mengelompokkan elemen dalam halaman.

2. Basic, meliputi:

• Empty Wrapper: Kontainer kosong untuk membungkus dan mengatur elemen.

• 1 Column: Blok dengan satu kolom untuk menampung elemen.

• 2 Columns: Blok dengan dua kolom untuk menyusun elemen berdampingan.

• 3 Columns: Blok dengan tiga kolom untuk tata letak lebih kompleks.

• Link Block: Area yang dapat diklik untuk menautkan ke halaman lain.

• Quote: Blok untuk menampilkan kutipan dengan format khusus.

• Text Section: Area berisi teks yang dapat disesuaikan.

• Text: Komponen untuk menambahkan dan mengedit teks sederhana.

• Link: Elemen untuk membuat tautan ke halaman lain atau sumber eksternal.

• Image: Blok untuk menambahkan gambar ke halaman.

• Video: Blok untuk menyematkan video dari berbagai sumber.

• Map: Komponen untuk menampilkan peta interaktif.

• Accordion: Blok dengan konten yang dapat diperluas atau disembunyikan.

3. Widget, meliputi:

• Tombol Buy Now: Tombol tautan ke halaman pembelian produk.

4. Extra, meliputi:

• Custom Code: Menambahkan kodu kustom ke halaman.

10. Gunakan Layer Manager untuk menampilkan layer tiap komponen di halaman. Klik pada suatu layer untuk menyembunyikannya dari halaman. Sebaliknya, klik pada layer tersembunyi (terdapat ikon ) untuk menampilkan kembali ke layar. 

11. Gunakan Component Setting untuk mengatur tiap komponen.

1. Pengaturan teks meliputi Id (ID komponen) dan Title (Nama komponen).

2. Pengaturan gambar yaitu Alt (teks alternatif yang menjelaskan gambar).

3. Pengaturan tombol “Shop Now” yaitu tautan ke pembelian produk. Pastikan produk sudah di-assign ke channel Belanja agar dapat muncul di opsi Select Product.

12. Gunakan Style Manager untuk mengatur style dari tiap komponen. Sebelum mengatur style komponen di Style Manager, pastikan memahami fungsi Classes berikut:

1. Hover: Pilih Hover untuk mengatur gaya saat kursor berada di atas elemen.

2. Click: Pilih Click untuk menerapkan gaya saat elemen diklik.

3. Even/Odd: Pilih Even atau Odd untuk memberi gaya berbeda pada elemen genap atau ganjil dalam daftar atau grid.

Setelah memilih class yang sesuai, atur style komponen meliputi:

1. Basic

• Self alignment (Left/Center/Right): Menentukan posisi elemen dalam parent container.

2. Dimension

• Dimension (Width, Height, Max Width, Max Height): Mengatur ukuran elemen.

• Margin (Top, Right, Bottom, Left): Jarak luar antara elemen dan sekitarnya.

• Padding (Top, Right, Bottom, Left): Jarak dalam antara konten dan batas elemen.

3. Typography

• Font family: Jenis huruf yang digunakan.

• Font size: Ukuran teks.

• Font weight: Ketebalan teks.

• Letter spacing: Jarak antar huruf.

• Color: Warna teks.

• Line height: Jarak antar baris teks.

• Text align (Left, Center, Justify, Right): Posisi teks dalam elemen.

• Text shadow: Efek bayangan pada teks.

4. Decorations

• Background color: Warna latar belakang elemen.

• Border radius (Top left, Top right, Bottom left, Bottom right): Membulatkan sudut elemen.

• Border (Width, Style, Color): Ketebalan, gaya, dan warna garis tepi elemen.

• Box shadow: Efek bayangan pada elemen.

• Background: Gambar atau warna latar belakang.

• Opacity: Tingkat transparansi elemen.

5. Advanced

• Display: Menentukan cara elemen ditampilkan (block, inline, flex, dll.).

• Flex direction: Arah susunan elemen dalam flexbox.

• Flex wrap: Menentukan apakah elemen flex bisa berpindah ke baris baru.

• Justify content: Posisi elemen dalam flexbox secara horizontal.

• Align items: Menyelaraskan elemen dalam flexbox secara vertikal.

• Align content: Mengatur distribusi ruang dalam flex container.

• Position (Static, Relative, Absolute, Fixed): Cara elemen diposisikan dalam halaman.

• Top, Right, Bottom, Left: Jarak elemen dari tepi terdekat sesuai posisi yang dipilih.