Bileşenlere Genel Bakış - Webflow Yardım

Bileşenleri kullanarak siteniz genelinde tekrarlayan düzenleri ve içerikleri daha verimli bir şekilde yönetin.

Bileşenler, tutarlı, verimli ve ölçeklenebilir bir tasarım iş akışını sürdürmek için elemanlardan ve alt elemanlardan özelleştirilebilir bloklar oluşturma gücü verir. Bu blokları siteniz genelinde yeniden kullanabilir ve her tekrarlayan düzeni ayrı ayrı gözden geçirmekten kaçınmak için tek bir yerden değiştirebilirsiniz.

Bir bileşen nasıl oluşturulur

Webflow'da görsel olarak bileşenler oluşturabilir veya DevLink ile mevcut bileşenleri harici bir kod tabanından içe aktarabilirsiniz. Bu bölüm görsel geliştirmeye odaklanmıştır.

Bir elemandan veya eleman grubundan bir bileşen oluşturabilir ve her örneğin siteniz genelinde aynı olup olmadığını veya içeriği, düzeni veya stilinin değişikliklere izin verip vermediğini seçebilirsiniz:

• Her örnekte aynı içerik ve tasarım — siteniz genelinde yeniden kullanmak için tekrarlayan düzenler (örneğin, navigasyon çubukları ve altbilgiler) için bir bileşen oluşturun. İçerik veya tasarımda yapılan herhangi bir değişiklik, bileşenin her örneğini otomatik olarak günceller.
• Her örnekte benzersiz içerik — tutarlı bir düzen ve tasarıma sahip bir bileşen oluşturun, ancak her örneğin farklı içeriğe sahip olmasına izin verin (örneğin, her örnekte benzersiz metin, resimler veya videolar içerebilen bir kahraman bölümü düzeni) bileşen özellikleri ve yuvaları kullanarak.
• Her örnekte farklı stil varyantları — önceden tanımlanmış stil ve düzen seçeneklerine sahip bir bileşen oluşturun (örneğin, dolu ve çizgili düğmeler veya yatay ve dikey kart düzenleri). Bileşen stil varyantları, ayrı bileşenler oluşturmanıza gerek kalmadan her örneğin tasarımını özelleştirmenize olanak tanır.

Bir bileşen oluşturmak için:

1. Bileşene dönüştürmek istediğiniz elemanı seçin
2. Bileşenler panelini, Stil panelini veya Eleman ayarları panelini açın
3. Panelin üst kısmındaki “bileşen oluştur” simgesine tıklayın
4. Bileşeninize bir ad ve isteğe bağlı açıklama verin ve Oluştur'a tıklayın

Mevcut bir bileşeni çoğaltmak için bileşeni seçip, "daha fazla seçenek" noktalarına tıklayıp Çoğalt'ı seçebilirsiniz.

Bir bileşen oluşturduktan sonra ana bileşenin içinde olacaksınız — yani ana bileşendeki herhangi bir değişiklik, o bileşenin tüm örneklerinde güncellenir. Herhangi bir zamanda, herhangi bir bileşen örneğinde ana bileşene girmek için:

• Bileşen örneğine çift tıklayın
• Örneğe sağ tıklayın ve Bileşeni düzenle'ye tıklayın
• Örneği seçin ve etiketteki "kalem" simgesine tıklayın
• Örneği seçin ve sağ panelin sağ üst köşesindeki "anahtar" simgesine tıklayın

Ana bileşeni düzenleme hakkında daha fazla bilgi edinin.

Bir bileşeni nasıl kullanır ve yeniden kullanırsınız

Bir bileşen oluşturduktan sonra, sitenizin herhangi bir yerinde yeniden kullanabilirsiniz:

1. Bileşenler panelini açın
2. Bir önizleme görmek için bir bileşenin üzerine gelin
3. İstediğiniz bileşeni sitenizin herhangi bir sayfasına sürükleyip bırakın
4. Bileşen örneğini doğrudan tuvale veya Navigator'a bırakın

Bir bileşen örneğini seçtiğinizde, yeşil renkte vurgulanmış ve çevrelenmiş olarak göreceksiniz. Bileşenler panelini açarak bileşenlerinizin sitenizde kaç kez kullanıldığını görebilirsiniz.

Bir bileşenin öğe hiyerarşisini Navigator panelinde görüntülemek için, Mac'te Option + çift tıklayın veya Windows'ta Alt + çift tıklayın ya da "ana bileşeni düzenle" simgesine tıklayın. Bileşenin öğe hiyerarşisini yalnızca ana bileşenden (bileşen örneği içinde değil) görebilirsiniz.

Bir Bileşeni Nasıl Düzenlersiniz

Bir bileşenle etkileşim kurmanın ve düzenlemenin çeşitli yollarını inceleyelim:

• Ana bileşeni düzenleyin
• Bileşen özellikleri, yuvalar ve stil varyantları
• Bileşen stil varyantları oluşturun
• Varyant özelliğini yönetin
• Bir bileşen örneğinin varyantını değiştirin
• Bileşen stil varyantlarını yeniden sıralayın, yeniden adlandırın, çoğaltın veya silin
• Ana bileşenden çıkın
• Düzenleyicide bileşenleri düzenleyin
• Bir bileşenin adını veya açıklamasını değiştirin
• Bileşenleri gruplandırın
• Bir bileşeni silin

Ana Bileşeni Düzenleyin

Bir bileşenin tüm örneklerinde aynı değişiklikleri yapmak için ana bileşeni düzenlemeniz gerekecek. Ana bileşeni herhangi bir bileşen örneğinde şu şekilde düzenleyebilirsiniz:

• Tuvalde bileşen örneğine çift tıklayarak
• Navigator'da örneğe Option + çift tıklayarak (Mac) veya Alt + çift tıklayarak (Windows)
• Örneğe sağ tıklayıp Bileşeni düzenle seçeneğine tıklayarak
• Örneği seçip etiket üzerindeki “bileşeni düzenle” simgesine tıklayarak
• Örneği seçip sağ panelin üst kısmındaki “bileşeni düzenle” simgesine tıklayarak

Ana bileşendeki düzenlemeler, her bileşen örneğini etkileyecektir (o bileşen örneğinde bileşen özellikleri belirli elemanlara uygulanmadıkça). Ana bileşeni düzenlerken, yapıyı ve eleman sırasını değiştirerek sitenizdeki tüm bileşen örneklerini aynı anda etkileyebilirsiniz.

Bileşen Özellikleri, Yuvalar ve Stil Varyantları

Bileşen özellikleri (props), yuvalar ve stil varyantları, bir bileşenin her örneğinde benzersiz yapılandırmalar oluşturmanıza olanak tanır:

• Özellikler (Props) — ana bileşendeki bireysel eleman ayarlarını (örneğin, metin, bağlantılar, resimler veya videolar) özelliklere bağlayın. Bu, bileşenin genel yapısını veya tasarımını değiştirmeden bu ayarları her örnekte özelleştirmenize olanak tanır. Özellikler ayrıca CMS alanlarına bağlanarak CMS Koleksiyonlarınızdan dinamik olarak içerik çekmenizi sağlar.
• Yuvalar (Slots) — mevcut bileşenlere yerleştirebileceğiniz ve diğer bileşenler için yer tutucu görevi gören elemanlardır. Bu, her örneğin yuvada farklı bileşenler içerebileceği modüler bileşenler oluşturmanıza olanak tanır.
• Stil varyantları — tek bir bileşen için birden fazla tasarım seçeneği tanımlayarak, farklı kullanım durumları için görünümünü uyarlamanıza olanak tanır. Örneğin, dolu veya çerçeveli düğmeler ya da yatay ve dikey kart düzenleri gibi stil varyantları sunabilirsiniz.

Bileşen stil varyantları oluşturma

Bir bileşenin farklı düzenler, renkler, yazı tipleri vb. ile varyantlarını oluşturabilirsiniz (örneğin, dolu veya çerçeveli düğmeler ya da yatay ve dikey kart düzenleri) ve sitenizdeki her bileşen örneğinde hangi varyantı kullanacağınızı seçebilirsiniz.

Bir bileşen stil varyantı oluşturmak için:

1. Ana bileşeni düzenleyin
2. Stil paneline gidin
3. Stil seçici'de "bileşen varyantları" simgesine tıklayın
4. "Artı" simgesine tıklayın
5. Varyanta benzersiz bir ad verin
6. Onaylamak için Enter/Return tuşuna basın

Varyant özelliğini yönetme

Bir bileşen stil varyantı oluşturduğunuzda, o bileşen için otomatik olarak bir varyant özelliği oluşturulur. Varyant özelliğinin adını değiştirebilir, bir özellik grubuna ekleyebilir ve Özellikler panelinde bileşen için varsayılan bir varyant ayarlayabilirsiniz.

Varyant özelliğinin adını değiştirmek için:

1. Ana bileşeni düzenleyin
2. Özellikler paneline gidin
3. Varyant özelliğine tıklayın
4. Benzersiz bir özellik adı girin
5. Onaylamak için Enter/Return tuşuna basın

Varyant özelliğini bir özellik grubuna eklemek için:

1. Ana bileşeni düzenleyin
2. Özellikler paneline gidin
3. Varyant özelliğine tıklayın
4. Bir grup seçin veya yeni bir grup oluşturmak için benzersiz bir ad girin
5. Oluştur'a tıklayın veya onaylamak için Enter/Return tuşuna basın

Bir bileşen için varsayılan bir varyant ayarlayın:

1. Ana bileşeni düzenleyin
2. Özellikler paneline gidin
3. Varyant özelliğine tıklayın
4. Varsayılanlar açılır menüsünden bir varyant seçin

Bir bileşen örneğinin varyantını değiştirme

Diğer bileşen özellikleri gibi, bir bileşenin her örneği için stil varyantını seçebilirsiniz. Bir bileşen örneğinin varyantını değiştirmek için:

1. Özellikler panelini açmak için bileşene tek tıklayın
2. Bu örnek için Varyantlar açılır menüsünden bir varyant seçin

Bileşen Stil Varyantlarını Yeniden Sıralama, Yeniden Adlandırma, Çoğaltma veya Silme

Tasarım modunda, bileşen stil varyantlarını yönetebilirsiniz (varyantları yeniden sıralama, yeniden adlandırma, çoğaltma veya silme).

Bir bileşenin varyantlarını yeniden sıralamak için:

1. Ana bileşeni düzenleyin
2. Stil paneline gidin
3. Stil seçicisi içindeki “bileşen varyantları” simgesine tıklayın
4. Bir varyantı yeni bir konuma taşımak için tıklayıp sürükleyin

Bir varyantı yeniden adlandırmak için:

1. Ana bileşeni düzenleyin
2. Stil paneline gidin
3. Stil seçicisi içindeki “bileşen varyantları” simgesine tıklayın
4. Varyantın üzerine gelin ve “daha fazla seçenek” simgesine tıklayın
5. Yeniden Adlandır'a tıklayın
6. Yeni, benzersiz bir varyant adı girin
7. Onaylamak için Enter/Return tuşuna basın

Bir varyantı çoğaltmak için:

1. Ana bileşeni düzenleyin
2. Stil paneline gidin
3. Stil seçicisi içindeki “bileşen varyantları” simgesine tıklayın
4. Varyantın üzerine gelin ve “daha fazla seçenek” simgesine tıklayın
5. Çoğalt'a tıklayın
6. Yeni, benzersiz bir varyant adı girin
7. Onaylamak için Enter/Return tuşuna basın

Bir varyantı silmek için:

1. Ana bileşeni düzenleyin
2. Stil paneline gidin
3. Stil seçicisi içindeki “bileşen varyantları” simgesine tıklayın
4. Varyantın üzerine gelin ve “daha fazla seçenek” simgesine tıklayın
5. Sil'e tıklayın
6. Onaylamak için açılır modaldaki Sil'e tıklayın

Ana Bileşenden Çıkış

Ana bileşeni düzenlemeyi bitirdiğinizde, ana bileşenden çıkabilirsiniz:

• Tasarımcının sol üst köşesindeki “geri” okuna tıklayarak
• Tuvalde bileşenin dışına tıklayarak
• Klavyenizde Escape tuşuna basarak

Editör'de bileşenleri düzenle

Editör'de sitenizin içeriğini güncellemek için içerik editörlerini davet ettiyseniz, bileşen özelliği ile değiştirilmemiş ve tüm örneklerde tutarlı olan bileşen öğelerinde yaptıkları değişiklikler, diğer tüm örneklere uygulanacaktır.

Alternatif olarak, içerik editörü bileşen özelliği aracılığıyla değiştirilen bileşen öğelerinde değişiklik yaparsa, bu değişiklikler yalnızca düzenledikleri bileşen örneğine uygulanacaktır.

Bir bileşen adını veya açıklamasını değiştirme

Bir bileşen adını veya açıklamasını değiştirmek için:

1. Bileşenler panelini açın
2. Bir bileşen adının üzerine gelin ve görünen "daha fazla seçenek" noktalarına tıklayın
3. Ayarları Düzenle'ye tıklayın
4. Değişikliklerinizi yapın ve Kaydedin

Bir bileşen örneğini yeniden adlandırma

Bireysel bileşen örneklerini yeniden adlandırarak tanımlamayı kolaylaştırabilirsiniz — bu, aynı bileşeni bir sayfada birden fazla kez kullanırken özellikle faydalıdır.

Bir bileşen örneğini yeniden adlandırmak için:

• Gezginde veya sağ panelin üst kısmında:

1. Bileşen adına çift tıklayın
2. Yeni adı yazın
3. Enter'a basın veya özel adınızı kaydetmek için başka bir yere tıklayın

• Tuvalde:

1. Bileşen örneğine sağ tıklayın
2. Yeniden Adlandır'a tıklayın
3. Yeni adı yazın
4. Enter'a basın veya özel adınızı kaydetmek için başka bir yere tıklayın

Adı orijinal bileşen adına sıfırlamak için, yeniden adlandırma sırasında özel adı silin veya Gezginde veya tuvalde örneğe sağ tıklayın ve Adı sıfırla'ya tıklayın.

Bileşenleri gruplandır

Bileşenlerinizi gruplar halinde düzenlemek için:

1. Bileşenler panelini açın
2. Bir bileşen adının üzerine gelin ve görünen "daha fazla seçenek" noktalarına tıklayın
3. Ayarları Düzenle'yi seçin
4. Grup açılır menüsünden mevcut bir grup seçin veya yeni bir grup oluşturmak için yazın

Bir bileşen grubunu yeniden adlandırmak veya gruptan çıkarmak için, grup başlığının üzerine gelin ve "daha fazla seçenek" noktalarına tıklayın.

Bir bileşeni sil

Bir bileşeni tamamen silmek için:

1. Bileşenin tüm örneklerini sitenizden kaldırın veya bağlantısını kesin
2. Bileşenler panelini açın
3. Bir bileşen adının üzerine gelin ve görünen "daha fazla seçenek" noktalarına tıklayın
4. Ayarları Düzenle'yi seçin
5. Sil'e tıklayın ve onaylayın

Bir bileşen örneğini ana bileşeninden nasıl ayırırsınız

Bir bileşen örneğini ayırmak ve ana bileşenden bağımsız olarak değişiklik yapmak için:

1. Ayırmak istediğiniz örnekteki herhangi bir bileşen öğesine sağ tıklayın
2. Örnek Bağlantısını Kes'e tıklayın

Bağlantı kesildikten sonra, tasarımınızdaki bu bileşenin diğer bağlı örneklerinden herhangi birini düzenlerseniz, bağlantısı kesilen örnek değişmeyecektir.

Kütüphanelerle siteler arasında bileşen paylaşımı

Kütüphanelerle bir Çalışma Alanında yerel ve kod bileşenlerini siteler arasında paylaşabilirsiniz. Bu, iş akışınızı hızlandırabilir ve tasarım sisteminizi, Çalışma Alanınızdaki birden fazla sitede kullanılan bileşenleri güncellemek için tek bir yer sağlayarak geliştirebilir.

Geri webflow yardımına