Ikhtisar Komponen - Bantuan Webflow

Gunakan komponen untuk mengelola tata letak dan konten berulang lebih efisien di seluruh situs Anda.

Komponen memberi Anda kekuatan untuk membuat blok yang dapat disesuaikan dari elemen dan elemen anak untuk mempertahankan alur kerja desain yang konsisten, efisien, dan dapat diskalakan. Anda dapat menggunakan kembali blok tersebut di seluruh situs Anda dan memodifikasinya di satu tempat untuk menghindari merevisi setiap tata letak berulang secara individual.

Cara membuat komponen

Anda dapat membuat komponen secara visual di Webflow, atau mengimpor komponen yang ada dari basis kode eksternal dengan DevLink. Bagian ini berfokus pada pengembangan visual.

Anda dapat membuat komponen dari elemen atau grup elemen, dan memilih apakah setiap instance identik di seluruh situs Anda atau memungkinkan perubahan pada konten, tata letak, atau gaya:

• Konten dan desain identik per instance — buat komponen untuk tata letak berulang (misalnya, navbar dan footer) untuk digunakan kembali di seluruh situs Anda. Setiap perubahan pada konten atau desain secara otomatis memperbarui setiap instance dari komponen.
• Konten unik per instance — buat komponen dengan tata letak dan desain yang konsisten, tetapi memungkinkan setiap instance memiliki konten yang berbeda, (misalnya, tata letak bagian hero yang dapat memiliki teks, gambar, atau video unik per instance) menggunakan props dan slot komponen.
• Varian gaya berbeda per instance — buat komponen dengan opsi gaya dan tata letak yang telah ditentukan sebelumnya, (misalnya, tombol solid dan outline, atau tata letak kartu horizontal dan vertikal). Varian gaya komponen memungkinkan Anda menyesuaikan desain setiap instance tanpa perlu membuat komponen terpisah.

Untuk membuat komponen:

1. Pilih elemen yang ingin Anda ubah menjadi komponen
2. Buka panel Komponen, panel Gaya atau panel Pengaturan Elemen
3. Klik ikon “buat komponen” di bagian atas panel
4. Beri nama dan deskripsi opsional pada komponen Anda dan klik Buat

Anda juga dapat menduplikasi komponen yang ada dengan memilih komponen, mengklik titik "opsi lainnya", dan memilih Duplikat.

Anda akan berada di dalam komponen utama setelah Anda membuat komponen — artinya setiap perubahan pada komponen utama akan diperbarui di semua instance dari komponen tersebut. Kapan saja, Anda dapat memasuki komponen utama pada instance komponen mana pun dengan:

• Mengklik dua kali instance komponen
• Mengklik kanan instance dan mengklik Edit komponen
• Memilih instance dan mengklik ikon "pensil" di label
• Memilih instance dan mengklik ikon "kunci inggris" di kanan atas panel kanan

Pelajari lebih lanjut tentang mengedit komponen utama.

Cara menggunakan dan menggunakan kembali komponen

Setelah Anda membuat komponen, Anda dapat menggunakannya kembali di mana saja di situs Anda:

1. Buka Panel Komponen
2. Arahkan kursor ke komponen untuk melihat pratinjau
3. Klik dan seret komponen yang diinginkan ke halaman mana pun di situs Anda
4. Letakkan instance komponen langsung di kanvas atau ke dalam Navigator

Ketika Anda memilih instance komponen, Anda akan melihatnya disorot dan diberi garis hijau. Buka Panel Komponen untuk melihat berapa kali setiap komponen Anda telah digunakan di situs Anda.

Untuk melihat hierarki elemen komponen di panel Navigator, Tahan Option + klik dua kali (di Mac) atau Tahan Alt + klik dua kali (di Windows) komponen, atau klik ikon "edit komponen utama". Anda hanya dapat melihat hierarki elemen komponen dari komponen utama (bukan dalam instance komponen).

Cara mengedit komponen

Mari kita telusuri berbagai cara Anda dapat berinteraksi dan mengedit komponen:

• Edit komponen utama
• Properti komponen, slot, dan varian gaya
• Buat varian gaya komponen
• Kelola properti varian
• Ubah varian instance komponen
• Susun ulang, ganti nama, duplikasi, atau hapus varian gaya komponen
• Keluar dari komponen utama
• Edit komponen di Editor
• Ubah nama atau deskripsi komponen
• Kelompokkan komponen
• Hapus komponen

Edit komponen utama

Untuk membuat perubahan yang sama di semua instance komponen, Anda perlu mengedit komponen utama. Anda dapat mengedit komponen utama pada instance komponen mana pun dengan:

• Klik dua kali pada instance komponen di kanvas
• Tahan Option + klik dua kali (Mac) atau Alt + klik dua kali (Windows) pada instance di Navigator
• Klik kanan pada instance dan klik Edit komponen
• Pilih instance dan klik ikon "edit komponen" di label
• Pilih instance dan klik ikon "edit komponen" di bagian atas panel kanan

Edit pada komponen utama akan mempengaruhi setiap instance komponen (kecuali jika instance komponen tersebut memiliki properti komponen yang diterapkan pada elemen tertentu dalam komponen). Saat mengedit komponen utama, Anda dapat mengubah struktur dan urutan elemen untuk secara bersamaan mempengaruhi semua instance komponen di seluruh situs Anda.

Properti komponen, slot, dan varian gaya

Properti komponen (props), slot, dan varian gaya memungkinkan Anda membuat konfigurasi unik pada setiap instance komponen:

• Props — hubungkan pengaturan elemen individu dalam komponen utama (misalnya, teks, tautan, gambar, atau video) ke props. Ini memungkinkan Anda menyesuaikan pengaturan ini pada setiap instance tanpa mengubah struktur atau desain keseluruhan komponen. Props juga dapat dihubungkan ke bidang CMS untuk menarik konten secara dinamis dari Koleksi CMS Anda.
• Slot — slot adalah elemen yang dapat Anda tempatkan dalam komponen yang ada yang bertindak sebagai placeholder untuk komponen lain. Ini memungkinkan Anda membangun komponen secara modular, di mana setiap instance dapat menyertakan komponen berbeda dalam slot.
• Varian gaya — definisikan beberapa opsi desain untuk satu komponen, memungkinkan Anda menyesuaikan tampilannya untuk berbagai penggunaan. Misalnya, Anda dapat menawarkan varian gaya seperti tombol solid atau outline, atau tata letak kartu horizontal dan vertikal.

Buat varian gaya komponen

Anda dapat membuat varian dari sebuah komponen dengan tata letak, warna, gaya font yang berbeda, dll. (misalnya, tombol solid atau outline, atau tata letak kartu horizontal dan vertikal) dan memilih varian mana yang akan digunakan pada setiap instance komponen Anda di seluruh situs Anda.

Untuk membuat varian gaya komponen:

1. Edit komponen utama
2. Buka panel Gaya
3. Klik ikon “varian komponen” di pemilih Gaya
4. Klik ikon “plus”
5. Beri nama unik pada varian
6. Tekan Enter/Return untuk mengonfirmasi

Kelola properti varian

Ketika Anda membuat varian gaya komponen, properti varian secara otomatis dibuat untuk komponen tersebut. Anda dapat mengubah nama properti varian, menambahkannya ke grup properti, dan menetapkan varian default untuk komponen di panel Properti.

Untuk mengubah nama properti varian:

1. Edit komponen utama
2. Buka panel Properti
3. Klik properti Varian
4. Masukkan nama properti yang unik
5. Tekan Enter/Return untuk mengonfirmasi

Untuk menambahkan properti varian ke grup properti:

1. Edit komponen utama
2. Buka panel Properti
3. Klik properti Varian
4. Pilih grup atau masukkan nama unik untuk membuat grup baru
5. Klik Buat atau tekan Enter/Return untuk mengonfirmasi

Tetapkan varian default untuk komponen:

1. Edit komponen utama
2. Buka panel Properti
3. Klik properti Varian
4. Pilih varian dari dropdown Default

Ubah varian instance komponen

Seperti properti komponen lainnya, Anda dapat memilih varian gaya untuk setiap instance dari sebuah komponen. Untuk mengubah varian instance komponen:

1. Klik sekali pada komponen untuk membuka panel Properti
2. Pilih varian untuk instance ini dari dropdown Varian

Mengatur Ulang, Mengganti Nama, Menggandakan, atau Menghapus Varian Gaya Komponen

Dalam mode desain, Anda dapat mengelola varian gaya komponen (mengatur ulang, mengganti nama, menggandakan, atau menghapus varian).

Untuk mengatur ulang varian komponen:

1. Edit komponen utama
2. Buka panel Gaya
3. Klik ikon “varian komponen” di pemilih Gaya
4. Klik dan seret varian untuk memindahkannya ke posisi baru

Untuk mengganti nama varian:

1. Edit komponen utama
2. Buka panel Gaya
3. Klik ikon “varian komponen” di pemilih Gaya
4. Arahkan kursor ke varian dan klik ikon “opsi lainnya”
5. Klik Ganti Nama
6. Masukkan nama varian baru yang unik
7. Tekan Enter/Return untuk mengonfirmasi

Untuk menggandakan varian:

1. Edit komponen utama
2. Buka panel Gaya
3. Klik ikon “varian komponen” di pemilih Gaya
4. Arahkan kursor ke varian dan klik ikon “opsi lainnya”
5. Klik Gandakan
6. Masukkan nama varian baru yang unik
7. Tekan Enter/Return untuk mengonfirmasi

Untuk menghapus varian:

1. Edit komponen utama
2. Buka panel Gaya
3. Klik ikon “varian komponen” di pemilih Gaya
4. Arahkan kursor ke varian dan klik ikon “opsi lainnya”
5. Klik Hapus
6. Klik Hapus di modal pop-up untuk mengonfirmasi

Keluar dari Komponen Utama

Setelah selesai mengedit komponen utama, Anda dapat keluar dari komponen utama dengan:

• Mengklik panah “kembali” di sudut kiri atas Desainer
• Mengklik di luar komponen pada kanvas
• Menekan Escape pada keyboard Anda

Edit komponen di Editor

Jika Anda telah mengundang editor konten untuk memperbarui konten situs Anda di Editor, setiap perubahan yang mereka buat pada elemen komponen yang tidak dimodifikasi dengan properti komponen dan konsisten di semua instance, akan berlaku untuk semua instance lainnya.

Sebaliknya, jika editor konten membuat perubahan pada elemen komponen yang dimodifikasi melalui properti komponen, perubahan tersebut hanya akan berlaku untuk instance komponen yang mereka edit.

Ubah nama atau deskripsi komponen

Untuk mengubah nama atau deskripsi komponen:

1. Buka Panel Komponen
2. Arahkan kursor ke nama komponen dan klik titik "opsi lainnya" yang muncul
3. Klik Edit pengaturan
4. Lakukan perubahan Anda dan Simpan

Ganti nama instance komponen

Anda dapat mengganti nama instance komponen individu agar lebih mudah diidentifikasi — ini sangat membantu saat menggunakan kembali komponen yang sama beberapa kali di halaman.

Untuk mengganti nama instance komponen:

• Di Navigator atau di bagian atas panel kanan:

1. Klik dua kali nama komponen
2. Ketik nama baru
3. Tekan Enter atau klik di luar untuk menyimpan nama kustom Anda

• Di kanvas:

1. Klik kanan instance komponen
2. Klik Ganti Nama
3. Ketik nama baru
4. Tekan Enter atau klik di luar untuk menyimpan nama kustom Anda

Untuk mengatur ulang nama kembali ke nama komponen asli, hapus nama kustom saat mengganti nama atau klik kanan instance di Navigator atau di kanvas dan klik Atur ulang nama.

Kelompokkan komponen

Untuk mengatur komponen Anda ke dalam grup:

1. Buka Panel Komponen
2. Arahkan kursor ke nama komponen dan klik titik "opsi lainnya" yang muncul
3. Pilih Edit pengaturan
4. Pilih grup yang ada dari dropdown Grup, atau ketik untuk membuat grup baru

Untuk mengganti nama atau memisahkan grup komponen, arahkan kursor ke judul grup dan klik titik "opsi lainnya".

Hapus komponen

Untuk menghapus komponen sepenuhnya:

1. Hapus atau putuskan tautan semua instance komponen dari situs Anda
2. Buka panel Komponen
3. Arahkan kursor ke nama komponen dan klik titik "opsi lainnya" yang muncul
4. Pilih Edit pengaturan
5. Klik Hapus dan konfirmasi

Cara memutuskan tautan instance komponen dari komponen utama

Untuk memutuskan tautan instance komponen dan membuat perubahan secara independen dari komponen utama:

1. Klik kanan elemen komponen mana pun dalam instance yang ingin Anda putuskan tautannya
2. Klik Putuskan tautan instance

Setelah diputuskan, jika Anda mengedit instance lain yang terhubung dari komponen tersebut dalam desain Anda, itu tidak akan mengubah instance yang telah diputuskan tautannya.

Berbagi komponen antar situs dengan Perpustakaan

Anda dapat berbagi komponen asli dan kode antar situs dalam Workspace dengan Perpustakaan. Ini dapat mempercepat alur kerja Anda dan meningkatkan sistem desain Anda dengan menyediakan satu tempat untuk memperbarui komponen yang digunakan di beberapa situs dalam Workspace Anda.

Kembali ke bantuan webflow