Element

Elemen membantu menyusun dan menyajikan konten secara efektif. Elemen tersebut berkisar dari komponen berbasis teks seperti judul, daftar, dan sorotan teks hingga elemen interaktif seperti tombol dan tautan. Elemen visual seperti gambar, ikon, video, dan animasi juga dapat ditambahkan untuk meningkatkan presentasi dan organisasi konten.

Untuk menambah atau mengubah elemen website:

1. Buka halaman website yang relevan dan klik Edit.

2. Klik bagian pada halaman tempat Anda ingin menambah atau mengubah elemen.

3. Lakukan perubahan yang diperlukan.

4. Klik Save.

Catatan

Gaya default untuk judul, tombol, tautan, dan teks paragraf, misalnya, didefinisikan di tab Theme pada editor website.

Judul

Judul mendefinisikan heading dan mengatur konten website ke dalam tingkat yang berbeda untuk kejelasan dan struktur. Untuk menyisipkan judul, ketik /title, pilih gaya heading (Heading 1, Heading 2, atau Heading 3), dan ketik teksnya.

Tip

Atau, ketik teks, pilih teks tersebut, dan pilih gaya yang sesuai dari bagian Inline Text di tab Customize pada editor website. Opsi pemformatan tambahan, seperti font dan warna, juga tersedia di bagian ini.

Tombol-Tombol

Tombol adalah elemen interaktif yang memungkinkan untuk menautkan ke halaman lain atau ke jangkar halaman. Untuk menyisipkan tombol:

1. Ketik /button.

2. Masukkan label tombol di kolom Link Label.

3. Tambahkan URL or Email. Ketik / untuk mencari halaman dan # untuk menautkan ke jangkar.

4. Atur Style, Size, dan Layout untuk menentukan tampilan tombol.

5. Jika diperlukan, aktifkan tombol untuk membuka halaman atau jangkar yang ditautkan di tab baru.

6. Klik Apply untuk menyimpan perubahan.

Tip

Untuk memodifikasi tombol yang ada, klik tombol dan edit opsi di bagian Inline text pada editor website.

Gambar

Untuk menyisipkan gambar:

1. Ketik /image.

2. Cari database Unsplash atau klik Upload an image untuk memilih file dari gambar lokal Anda.

3. Klik Add.

4. Untuk menyesuaikan gambar, klik pada gambar dan edit opsi di bagian Image pada editor website. Misalnya:

   • Replace gambar.

   • Tentukan alt tag di kolom Description.

   • Masukkan title tag di kolom Tooltip. Teks ini akan muncul ketika pengunjung mengarahkan mouse ke gambar.

   • Tambahkan Shape; beberapa bentuk juga memungkinkan kustomisasi warna.

   • Sesuaikan Width gambar, misalnya untuk meningkatkan performa. Ukuran lebih kecil mungkin disarankan jika sudah cukup untuk ditampilkan.

   • Ubah ukuran gambar menggunakan alat Transform.

   • Sesuaikan Padding untuk menambahkan ruang (dalam piksel) di sekeliling gambar.

   • Dll.

Video-Video

Untuk menambahkan video, ketik /video, masukkan URL, dan aktifkan opsi yang diinginkan:

• Autoplay: untuk memutar video secara otomatis ketika halaman diakses. Video secara otomatis di-mute secara default.

• Loop: untuk memutar video secara berulang.

• Hide player controls

• Hide fullscreen button

• Mulai pada: untuk menentukan timestamp di mana video harus dimulai, dalam format MM:SS.

Icon-icon

Untuk menyisipkan ikon, ketik /image, buka tab Icons, pilih ikon, dan klik Add. Untuk memodifikasi ikon, klik pada ikon dan gunakan bagian Icon pada editor website untuk menyesuaikan opsi, seperti Color, Size, Animations, Shape, dll.

Tautan

Tautan digunakan untuk menghubungkan berbagai halaman dan sumber daya, memandu pengunjung dan meningkatkan navigasi. Untuk menambahkan tautan, ketik /link, lalu, dalam pop-up yang terbuka, masukkan Label tautan dan tambahkan URL atau Email. Ketik / untuk mencari halaman dan # untuk menautkan ke anchor.

Tip

Secara default, kolom Style diatur ke Link. Pilih gaya berbeda untuk mengubah tautan menjadi button.

List

Daftar membantu mengatur konten dengan jelas, membuat informasi lebih mudah dibaca dan meningkatkan struktur halaman web. Ketik /list dan pilih dari tiga jenis daftar yang berbeda: Bulleted lists, Numbered lists, atau Checklists.

Sorotan teks

Sorotan dapat ditambahkan ke judul dan teks menggunakan bagian Inline Text di editor website. Untuk menambahkan sorotan:

1. Pilih teks atau judul yang ingin Anda sorot.

2. Di editor website, klik pada Highlight.

3. Pilih gaya sorotan.

4. Ubah Color-nya.

5. Pilih Thickness-nya.

Animasi

Animasi digunakan untuk menambahkan gerakan ke building blocks dan elemen website seperti gambar dan teks. Tiga jenis animasi tersedia: On Scroll, On Appearance, dan On Hover (hanya untuk gambar).

Untuk menambahkan animasi ke elemen website:

1. Klik pada elemen.

2. Di editor website, buka bagian yang relevan untuk elemen tersebut (misalnya, Button, Column, Inline Text, dll.).

3. Pada kolom Animation, pilih jenis animasi yang diinginkan.

4. Sesuaikan pengaturan animasi sesuai kebutuhan. Opsi yang tersedia bervariasi berdasarkan jenis animasi yang dipilih.

Animasi saat scroll

Untuk animasi saat scroll, dimungkinkan untuk:

• Pilih In untuk menambahkan animasi ketika elemen masuk ke layar dan Out untuk menambahkannya ketika meninggalkan layar.

• Pilih Effect.

• Pilih Direction efek.

• Sesuaikan Intensity efek.

• Tentukan Scroll Zone, di mana nilai pertama mewakili persentase layar yang ditampilkan saat efek dimulai, dan nilai kedua mewakili persentasenya di akhir.

Animasi saat muncul

Untuk animasi saat muncul, Anda dapat:

• Memilih di antara berbagai efek.

• Pilih Direction efek.

• Pilih opsi Trigger untuk menentukan kapan animasi terjadi: baik First Time only atau Every Time.

• Sesuaikan Intensity efek.

• Jika Anda ingin animasi dipicu setelah beberapa detik, tentukan angka ini di bidang Start After.

• Pilih Duration untuk animasi.

Animasi saat hover (khusus untuk gambar)

Animasi On hover dapat ditambahkan ke gambar. Anda dapat memilih Effect animasi, serta Color dan Stroke Width.

Lihat juga

Editor HTML Odoo