Tema umum¶
Odoo menawarkan berbagai opsi untuk membentuk tema website Anda, termasuk warna, font, dan layout.
Saat menyiapkan website Anda untuk pertama kalinya, Anda akan diminta untuk memilih tema. Arahkan mouse Anda ke tema untuk melihat pratinjau yang diperluas dari masing-masing tema. Klik pada tema untuk memilihnya.
Catatan
Jika Anda keluar tanpa memilih tema, website Anda dibuat menggunakan tema default.
Anda dapat mengganti tema nanti jika diperlukan.
Di pembuat website, tab Theme menawarkan berbagai opsi untuk menyesuaikan tema umum website Anda. Untuk mengaksesnya, klik Edit dan buka tab Theme.
Setelah Anda membuat perubahan yang diinginkan, klik Save untuk mengonfirmasi dan menerapkannya ke website Anda.
Tema¶
Di bagian Website, klik Switch Theme untuk membuka pemilih tema. Arahkan kursor mouse Anda ke tema untuk melihat pratinjau yang diperluas dari setiap tema. Klik tema untuk menerapkannya ke website Anda.
Warna¶
Editor website Odoo menampilkan dua jenis warna utama: warna tema dan warna status.
Warna-warna tema¶
Warna tema mengacu pada serangkaian warna yang ditampilkan di semua halaman website Anda. Ini terdiri dari lima warna: tiga warna utama dan dua warna terang dan gelap.
Untuk mengedit warna website Anda, buka bagian Colors di editor website, kemudian:
Klik titik warna yang ingin Anda ubah, lalu pilih warna Solid atau klik Custom untuk memilih tone warna tertentu secara manual (atau tambahkan kode #HEX atau RGBA-nya).
Klik ikon palet cat dan pilih palet warna. Hasilnya, semua kustomisasi warna direset; klik titik warna untuk mengubah warna tertentu.
Odoo secara otomatis membuat Color Presets untuk palet yang Anda pilih. Ini adalah kombinasi warna yang telah ditentukan sebelumnya yang diterapkan pada berbagai elemen website Anda untuk memberikan desain yang terstruktur dan menarik secara visual. Ketika Anda memilih palet warna, preset-nya menentukan bagaimana warna-warna tersebut didistribusikan di berbagai elemen dari building block, seperti tombol, latar belakang, dan teks. Jika Anda ingin memodifikasinya, klik Color Presets dan klik preset untuk menyesuaikannya lebih lanjut. Setiap preset warna berisi warna untuk latar belakang building block Anda, teks, heading, link, tombol utama, dan tombol sekunder.
Untuk menerapkan preset warna ke building block di situs Anda, pilih building block, buka tab Customize, klik titik warna yang terletak di samping Background, dan pilih Theme.
Catatan
Mengubah preset warna secara otomatis memperbarui warna dari preset default dan building block di mana preset tersebut digunakan.
Warna status¶
Warna status digunakan untuk 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 Anda, gulir ke bawah ke bagian Advanced dan klik titik untuk mengubah warnanya.
Example
Tata letak halaman¶
Opsi Page layout di bagian Website memungkinkan Anda mengubah tampilan keseluruhan dan jarak building block serta elemen website di halaman. Klik menu dropdown dan pilih tata letak yang diinginkan. Di bawah Page Layout, sesuaikan Background Anda dengan memilih Image, menggunakan gambar yang dipilih dalam Pattern, atau membiarkannya kosong.
Font¶
Odoo memungkinkan Anda menyesuaikan jenis font dan ukuran untuk elemen tertentu di website Anda, termasuk paragraf, heading, tombol, dan field input.
Font Family: Di bagian Paragraph, Headings, dan Button, pilih font dari menu dropdown.
Font Size: Di bagian Paragraph, Headings, Button, dan Input Fields, gunakan field Font Size untuk mengatur ukuran default. Klik ikon (panah) untuk memperluas bagian dan menentukan ukuran khusus (misalnya, berdasarkan level heading, ukuran tombol, dll.).
Selain itu, setiap bagian khusus elemen menawarkan opsi styling tambahan, seperti Tinggi Baris dan Margin, untuk kustomisasi lebih lanjut.
Font kustom¶
Anda dapat menggunakan font di website yang tidak ditawarkan secara default di Odoo. Untuk menambahkan font kustom, klik menu dropdown terkait dengan field Font Family dan pilih Add a Custom Font di bagian bawah menu dropdown. Di jendela pop-up:
Untuk menambahkan font Google, klik Select a Google Font dan klik font yang diinginkan dalam daftar. Nonaktifkan Serve font from Google servers jika website Anda dioperasikan dari lokasi di mana regulasi mensyaratkan kepatuhan terhadap undang-undang seperti, namun tidak terbatas pada, GDPR Uni Eropa. Ini akan memastikan bahwa Google Font disimpan di server website Anda daripada server Google.
Untuk mengunggah font kustom dari komputer Anda, klik Choose File.
Setelah selesai, klik Save and Reload.
Gaya tombol¶
Untuk mengkustomisasi gaya tombol primer dan sekunder website Anda, buka bagian Button di editor website dan edit opsi yang relevan:
Klik panah di sebelah field Primary Style atau Secondary Style dan pilih salah satu gaya yang tersedia untuk setiap jenis tombol: Fill, Outline, atau Flat. Saat memilih Outline, opsi Border Width muncul di bawahnya, memungkinkan Anda menyesuaikan lebar garis tepi tombol.
Sesuaikan Padding untuk mengubah ukuran spasi (dalam piksel) di sekitar label tombol.
Kustomisasi radius tepi tombol menggunakan opsi Round Corners.
Tambahkan animasi saat tombol diklik di menu dropdown On Click Effect.
Tip
Anda dapat menentukan ukuran Small dan Large kustom untuk Padding, Font Size, dan Round Corners tombol: Klik ikon (panah) dan gunakan field terkait.
Gaya tautan¶
Di bagian Link, klik Link Style untuk memilih tampilan tautan di website Anda. Pilih No Underline, Underline On Hover, atau Always Underline di menu dropdown.