Mulai di sini

Styling

Mari kita mulai dengan penataan template.

Warna

Templat Web3 X dibuat menggunakan Color Swatches, yang berarti Anda dapat dengan mudah mengedit contoh warna untuk diperbarui di seluruh situs.

Untuk melakukan ini, Anda hanya perlu membuka tab Style di bilah sisi kanan, kemudian gulir ke bagian Colors in Typography, dan jika Anda mengeklik warna, Anda akan dapat melihat semua contoh warna dan mengeditnya untuk diperbarui di seluruh situs ke warna apa pun yang diperlukan.

Font

Templat Web3 X menggunakan satu font tunggal dengan lebar sisi, dan diatur dalam pemilih Body (Semua Halaman), jadi ini berarti Anda bisa dengan mudah memperbarui font pada semua situs dalam satu klik.

Di halaman mana pun, cukup klik opsi pemilih oranye di kanan atas tab Style, lalu pilih Body (Semua Halaman). Setelah itu, Anda bisa masuk ke bagian Tipografi di bawah ini dan mengubah font ke font apa pun untuk merek bisnis Anda.

Jika Anda membutuhkan font khusus atau premium yang tidak tersedia di Webflow, Anda selalu dapat pergi ke Pengaturan Proyek > Font dan Anda akan dapat mengunggah font khusus, atau menghubungkan akun Adobe Font Anda.

Grafik & Ikon

Beberapa ikon atau grafik dalam template adalah gambar/grafis biasa, jadi Anda akan melihat bahwa ketika memperbarui semua warna, semua ini akan tetap memiliki warna template.

Hal ini terjadi karena grafis ini adalah gambar (PNG, JPG, SVG, dll), sehingga memperbarui CSS Webflow (styling) tidak akan mempengaruhinya. Jika Anda ingin menggunakan kembali grafis ini, Anda selalu dapat mengunduh dan mengeditnya menggunakan perangkat lunak desain apa pun (misalnya Photoshop, Illustrator, Sketch, Figma, dll.), atau langsung mengunggah gambar/grafis Anda sendiri yang sesuai dengan merek Anda.

Halaman statis

Konten Statis adalah semua konten yang tidak berbasis CMS, yang berarti tidak dinamis (seperti Blog Post, misalnya).

Anda dapat dengan mudah mengidentifikasi semua konten ini karena ditampilkan dalam warna abu-abu di Navigator bilah sisi kiri, dan menampilkan batas biru saat Anda mengeklik atau mengarahkan kursor ke konten tersebut.

Jika Anda ingin mengedit jenis konten ini, Anda cukup klik dua kali, dan Anda akan dapat langsung mengetik di sana.

Konten Dinamis (CMS)

Konten Dinamis adalah semua konten yang bersifat dinamis dan akan dibuat secara otomatis berdasarkan konten yang ditambahkan pada bagian CMS di bilah sisi kiri (tepat di bawah ikon Halaman).

Anda dapat dengan mudah mengidentifikasi semua ini karena ditampilkan sebagai warna ungu di Navigator bilah sisi kiri, dan menunjukkan batas ungu ketika Anda mengklik atau mengarahkan kursor.

Konten ini harus diperbarui secara langsung di bagian CMS. Hal ini dimaksudkan untuk memudahkan Anda memperbaruinya, karena kemungkinan besar konten ini perlu terus diperbarui (Misalnya, menambahkan postingan blog baru)

Selain itu, jika Anda ingin mengedit halaman CMS yang dibuat secara otomatis (misalnya, Postingan Blog), Anda akan menemukan halaman ini tersedia untuk diedit di bagian bawah semua halaman pada bagian Halaman di bilah sisi kiri.

Produk (eCommerce)

Produk atau konten eCommerce berfungsi dengan cara yang mirip dengan konten dinamis CMS, namun ini difokuskan secara eksklusif untuk produk eCommerce.

Anda dapat mengidentifikasi konten eCommerce dengan cara yang mirip dengan konten CMS, karena konten ini juga ditampilkan dalam warna ungu di bilah sisi kiri Navigator, serta dengan garis tepi ungu saat Anda mengeklik atau mengarahkan kursor.

Konten ini harus diperbarui secara langsung di tab eCommerce di bilah sisi kiri. Hal ini dimaksudkan untuk memudahkan Anda memperbaruinya, karena kemungkinan besar konten tersebut perlu terus diperbarui (Misalnya, mengubah harga produk, atau menambahkan lebih banyak stok)

Selain itu, jika Anda ingin mengedit halaman eCommerce produk yang dibuat secara otomatis, Anda akan menemukan halaman ini tersedia untuk diedit hampir di bagian bawah semua halaman tepat di atas halaman koleksi CMS.

Catatan Berguna

Selain penjelasan dasar utama yang kami bagikan di atas, berikut ini kami bagikan beberapa tips dan cara yang berasal dari pertanyaan yang paling sering kami terima.

Interaksi

Jika Anda ingin mengedit Interaksi template apa pun (misalnya, menghapus efek yang muncul), Anda dapat dengan mudah mengidentifikasi elemen yang memiliki interaksi karena memiliki ikon Interaksi kecil (guntur kecil) di Navigator bilah sisi kiri.

Jika Anda mengklik ikon Interaksi kecil ini, Anda akan membuka tab Interaksi di bilah sisi kanan untuk elemen ini, di mana Anda dapat mengedit interaksi.

Tampilan Seluler atau Tablet

Setiap kali Anda membuat perubahan (misalnya, Anda membuat desain bagian baru), sebaiknya buka navigasi atas Viewport dan lihat tampilannya di Tablet dan Seluler.

Jika Anda hanya mengedit bagian Templat dengan teks atau gambar yang diperbarui dan tidak menghapus kelas Templat apa pun, hal ini tidak diperlukan, namun, jika Anda menyesuaikan templat secara lebih mendalam, mengedit kelas, atau membuat bagian baru, sebaiknya Anda selalu mengedit tampilan seluler dan tablet Anda secara terus-menerus untuk memastikan semuanya terlihat sempurna.

Mengedit Judul Meta, Deskripsi, dan Gambar Utama

Jika Anda ingin menyesuaikan Judul, Deskripsi, dan Gambar yang ditampilkan saat Anda membagikan situs web Anda di mana saja (misalnya, Facebook, Twitter, dll.), Anda dapat dengan mudah membuka bagian Halaman di Bilah Sisi kiri, klik ikon Pengaturan kecil pada halaman yang ingin Anda sesuaikan, dan semua pengaturan ini akan muncul.

Harap dicatat bahwa penting untuk mengubah ini berdasarkan halaman.

Cadangan

Jika terjadi kesalahan, misalnya, jika Anda tidak menyukai tampilan situs web, jika Anda menghapus beberapa kelas penting yang diperlukan untuk membuat Templat terlihat bagus, atau jika Anda hanya ingin kembali ke versi sebelumnya karena alasan apa pun, Anda selalu dapat membuka bagian Cadangan.

Anda dapat menemukannya di bagian Pengaturan di Bilah Sisi kiri, dan kemudian Anda dapat melihat semua cadangan otomatis atau manual. Memulihkan ke cadangan lama hanya dengan sekali klik.