Tema umum¶
Odoo menyediakan berbagai opsi kustomisasi tema untuk menentukan warna dan font website, serta tampilan paragraf dan judul, tombol, tautan, dan kolom input. Pengaturan lanjutan tambahan juga tersedia.
Saat menyiapkan website untuk pertama kalinya, Anda akan diminta untuk memilih tema. Arahkan mouse ke tema untuk melihat pratinjau yang lebih luas dari masing-masing tema. Klik tema untuk memilihnya, atau klik tombol Lihat lebih banyak tema untuk menampilkan daftar lengkap tema yang tersedia.
Catatan
Jika Anda keluar tanpa memilih tema, website akan dibuat dengan tema default.
Untuk menyesuaikan tema, buka editor website, navigasikan ke tab Theme, dan buka bagian Website. Anda dapat:
Klik Switch Theme untuk membuka pemilih tema. Arahkan mouse ke tema untuk melihat pratinjau yang lebih luas dari masing-masing tema. Klik Use this theme untuk menerapkannya ke website.
Tambahkan bahasa untuk website.
Pilih Page Layout untuk mengubah tampilan keseluruhan dan jarak blok bangunan serta elemen website pada halaman.
Sesuaikan Background layout dengan:
Klik Save untuk menerapkan perubahan ke website.
Warna¶
Editor website Odoo menampilkan dua jenis warna utama: warna tema dan warna status.
Warna-warna tema¶
Warna tema merujuk pada kumpulan warna yang ditampilkan di semua halaman website. Warna tersebut terdiri dari lima warna: tiga warna Main, yang digunakan terutama untuk tombol dan tautan, dan dua warna Light & Dark, yang digunakan terutama untuk teks dan judul.
Untuk mengedit warna website, navigasikan ke bagian Colors pada tab Theme. Kemudian:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Klik ikon palet cat dan pilih palet warna. Hasilnya, semua kustomisasi warna akan direset.
Odoo secara otomatis membuat Color Presets untuk warna atau palet yang dipilih. Kombinasi warna yang telah ditentukan ini diterapkan ke berbagai elemen website untuk menciptakan desain yang terstruktur dan menarik secara visual. Saat memilih palet warna, presetnya menentukan bagaimana warna tersebut didistribusikan ke berbagai elemen. Untuk memodifikasinya, klik Color Presets, lalu pilih preset untuk membuka dropdown kustomisasi. Setiap preset warna berisi warna untuk Background, Text, Headings, Links, Primary Buttons, dan Secondary Buttons blok bangunan.
Tip
Untuk menerapkan preset warna ke blok bangunan, pilih blok bangunan, buka tab Style, klik titik warna yang terletak di sebelah Background, dan pilih Theme.
Catatan
Mengubah preset warna secara otomatis memperbarui warna preset default dan blok bangunan yang menggunakannya.
Warna status¶
Warna status menunjukkan status tindakan tertentu (misalnya, Success, Warning, dll.). Warna ini digunakan dalam pesan pop-up yang muncul untuk memberikan umpan balik kepada pengguna dan pengunjung website. Untuk menyesuaikan Status Colors website, gulir ke bawah ke bagian Advanced dan klik titik-titik untuk mengubah warnanya.
Example
Informasi terkait tindakan yang berhasil di website muncul dalam warna hijau.
Font¶
Odoo memungkinkan Anda menyesuaikan jenis font dan ukuran font elemen website, termasuk paragraf dan heading, tombol, dan kolom input.
Font Size: Di bagian Paragraph, Headings, Button, dan Input Fields, gunakan kolom Font Size untuk mengatur ukuran default. Klik ikon (Toggle more options) untuk memperluas bagian dan menentukan ukuran kustom (misalnya, berdasarkan level heading, ukuran tombol, dll.).
Font Family: Di bagian Paragraph, Headings, dan Button, pilih font dari menu dropdown.
Catatan
Ketika System Fonts dipilih, Odoo menggunakan font asli yang sudah terpasang di sistem operasi pengunjung. Misalnya, Android menggunakan Roboto sebagai font sistem defaultnya.
Font kustom¶
Untuk menambahkan font kustom yang tidak tersedia secara default di Odoo, klik dropdown Font Family dan pilih Add a Custom Font di bagian bawah. Di pop-up Add a Google font or upload a custom font:
Untuk menambahkan font Google, buka dropdown Select a Google Font dan pilih font yang diinginkan. Nonaktifkan Serve font from Google servers jika website Anda dioperasikan dari lokasi yang peraturannya mengharuskan kepatuhan terhadap hukum seperti, namun tidak terbatas pada, GDPR Uni Eropa. Ini akan memastikan Google Font disimpan di server website, bukan di server Google.
Untuk mengunggah Custom Font dari komputer Anda, klik Choose File.
Setelah selesai, klik Save and Reload.
Tip
Preview font yang dipilih ditampilkan di sisi kanan jendela.
Gaya¶
Tampilan elemen website dapat disesuaikan lebih lanjut. Misalnya, Anda dapat menyesuaikan paragraf dan heading, tombol, tautan, dan kolom input.
Paragraf & heading¶
Bagian Paragraph dan Headings menawarkan opsi penataan tambahan untuk elemen teks ini. Anda dapat:
Mengubah pengaturan font.
Menyesuaikan Line Height untuk menentukan jarak antar baris teks.
Menyesuaikan Margins untuk menentukan jarak di sekitar paragraf dan heading.
Tombol-Tombol¶
Untuk menyesuaikan gaya tombol utama dan sekunder website, navigasi ke bagian Button dan edit opsi yang relevan:
Buka menu dropdown di sebelah kolom Primary Style atau Secondary Style untuk mengubah gaya untuk setiap jenis tombol, seperti Fill, Outline, atau Flat. Ketika memilih Outline, opsi Border Width muncul di bawahnya, memungkinkan Anda menyesuaikan lebar garis luar tombol.
Mengubah pengaturan font.
Sesuaikan Padding untuk mengubah jarak di sekitar label tombol.
Gunakan opsi Round Corners untuk menyesuaikan radius batas tombol.
Tambahkan animasi saat tombol diklik di menu dropdown On Click Effect.
Tip
Untuk menentukan ukuran Small dan Large kustom untuk Padding, Font Size, dan Round Corners tombol, klik ikon (Toggle more options), lalu gunakan kolom terkait.
Tautan¶
Di bagian Link, buka menu dropdown di samping Link Style untuk memilih tampilan tautan di website. Anda dapat memilih antara:
No Underline;
Underline On Hover; atau
Always Underline.
Kolom input¶
Untuk menyesuaikan gaya kolom input website, navigasikan ke bagian Input Fields dan edit opsi yang relevan:
Sesuaikan Padding untuk mengubah jarak di sekitar kolom.
Mengubah pengaturan font.
Sesuaikan Border Width di sekitar kolom.
Tentukan Border Radius untuk membulatkan sudut kolom.
Pilih Background color untuk mengisi kolom.
Pengaturan lanjutan¶
Pengaturan tambahan dapat dikonfigurasi di bagian Advanced, seperti menampilkan atau menyembunyikan header, menggunakan Code Injection untuk verifikasi website melalui tag HTML, dan mengonfigurasi status colors dan Grays.
Anda juga dapat mengonfigurasi Google Maps untuk menampilkan peta dan mengaktifkan fitur geolokasi di website, misalnya pada halaman Contact Us dan di snippet tertentu. Untuk mengonfigurasi opsi ini:
Buka akun Google Anda.
Aktifkan Maps Static API, Maps JavaScript API, dan Places API.
Penting
Jangan aktifkan Places API (New), karena belum didukung oleh Odoo.
Menggunakan Google APIs dapat memerlukan pembayaran kepada Google.
Buat kunci API dan salin.
Di editor website Odoo, buka tab Theme, dan di bagian Advanced, klik Custom Key di sebelah Google Map.
Tempelkan kunci API yang telah dibuat ke dalam kolom API Key.
Klik Save.