Lightbox - Webflow yardımı
Lightbox öğesini kullanarak görüntüleri veya videoları tam ekran modal pencerede gösterin.
Lightbox nasıl oluşturulur
Lightbox, bir bağlantı bloğuna yerleştirilmiş tıklanabilir bir küçük resimdir. Site ziyaretçileri, canlı sitede bağlantının sınırları içinde tıkladığında, lightbox ona bağlı medyayı göstermek için açılır. Ekle paneli > Gelişmiş bölümünden bir lightbox ekleyebilirsiniz.
Lightbox yer tutucu küçük resim nasıl çalışır
Lightbox, diğer görüntü öğeleri gibi davranan bir görüntü öğesi içerir. Boyutunu değiştirebilir, yer tutucu küçük resmi değiştirmek için çift tıklayabilir ve alternatif metin ekleyebilirsiniz. Görüntü öğeleri hakkında daha fazla bilgi edinin.
Lightbox küçük resmi ve daha büyük lightbox modal penceresi için aynı görüntüyü kullanabilirsiniz. Webflow, tüm satır içi görüntüler için otomatik olarak duyarlı varyantlar oluşturur. Duyarlı görüntüler hakkında daha fazla bilgi edinin.
Lightbox küçük resmini başka içerikle nasıl değiştirirsiniz
Yer tutucu görüntü öğesini değiştirip, diğer içerikleri (örneğin, bir başlık veya başka bağlantısız öğeler) lightbox bağlantısı içine sürükleyip bırakabilirsiniz.
Ayrıca, eşit boyutlu görüntü küçük resimleri oluşturmak için bir div bloğu kullanabilir ve bir arka plan görüntüsü uygulayabilirsiniz.
Lightbox nasıl stillendirilir
Hem lightbox bağlantısını hem de içeriğini stilize edebilirsiniz. Örneğin, lightbox bağlantınıza metin öğeleri yerleştirirseniz, lightbox bağlantı öğesinin tipografisini stilize edebilirsiniz.
Lightbox medyası nasıl eklenir
Lightbox modal penceresine bir resim ve başlık eklemek için:
- Tuvalde lightbox bağlantısını seçin
- Öğe ayarları paneli > Lightbox bağlantı ayarları > Medya bölümüne gidin
- “Liste öğesi ekle” simgesine tıklayın
- Tür olarak "Resim" seçin
- Resmi değiştire tıklayın
- Varlıklar panelinden bir resim seçin
- Gerekirse bir Başlık ekleyin
Bir lightbox bağlantısına istediğiniz kadar resim ekleyebilirsiniz. Bu resimler, lightbox modal penceresinde bir slayt gösterisi olarak görüntülenecektir.
Lightbox modal penceresine bir video eklemek için:
- Tuvalde lightbox bağlantısını seçin
- Öğe ayarları paneli > Lightbox bağlantı ayarları > Medya bölümüne gidin
- “Liste öğesi ekle” simgesine tıklayın
- Tür olarak "Video" seçin
- Videonun URL'sini URL alanına ekleyin
- Gerekirse bir Başlık ekleyin
Resimler ve videolar için Lightbox - Web tasarım eğitimi
Koleksiyon alanı medyasından dinamik lightbox'lar nasıl oluşturulur
CMS veya E-ticaret Koleksiyonlarınızdaki medya Koleksiyon alanlarından (örneğin, bir resim alanı, çoklu resim alanı veya video alanı) küçük resim ve/veya lightbox medyasını çekerek dinamik lightbox'lar oluşturabilirsiniz.
Dinamik bir Koleksiyon alanını lightbox küçük resmine bağlamak için:
- Dinamik olarak bağlı bir Koleksiyon listesine veya bir CMS Koleksiyon sayfasına bir lightbox ekleyin
- Yer tutucu küçük resmi seçin
- Öğe ayarları > Resim ayarları bölümüne gidin
- Resim alanındaki "mor nokta" simgesine tıklayın
- Bir resim Koleksiyon alanı seçin
Ardından, lightbox'u Koleksiyon alanına bağlayarak dinamik Koleksiyon görsellerinizin lightbox'ta kullanılabilir olmasını sağlayabilirsiniz. Dinamik bir Koleksiyon alanını lightbox medyasına bağlamak için:
- Lightbox bağlantısını seçin
- Öğe ayarları > Lightbox bağlantı ayarları bölümüne gidin
- Medya alanındaki "mor nokta" simgesine tıklayın
- Bir medya Koleksiyon alanı seçin
Bir lightbox'u çoklu-görsel alanına bağlamak için:
- Bir Koleksiyon sayfasına Koleksiyon listesi ekleyin
- Kaynak açılır menüsüne tıklayarak ve çoklu-görsel alanını seçerek Koleksiyon listesini çoklu-görsel alanına bağlayın
- Koleksiyon listesine bir lightbox ekleyin
- Lightbox'taki görsel öğesini seçin
- Öğe ayarları > Görsel ayarları bölümüne gidin
- Görsel alanındaki "mor nokta" simgesine tıklayın
- Çoklu-görsel alanını seçin
- Tuvaldeki lightbox bağlantısını seçin
- Öğe ayarları > Lightbox bağlantı ayarları bölümüne gidin
- Medya alanındaki "mor nokta" simgesine tıklayın
- Çoklu-görsel alanını seçin
Lightbox, Koleksiyon listelerine veya Koleksiyon sayfalarına eklendiğinde bir çoklu-görsel alanına da bağlanabilir.
Lightbox gruplarını kullanarak lightbox'ları nasıl bağlayabilirsiniz
Bir slayt gösterisi galerisi oluşturmak için birden fazla lightbox'u birbirine bağlayabilirsiniz. Bir site ziyaretçisi bağlı bir lightbox'a tıkladığında, lightbox bağlı grubun tüm medyasını açacaktır.
Bir lightbox grubu nasıl oluşturulur
- Lightbox içindeki herhangi bir öğeyi seçin
- Öğe ayarları > Lightbox ayarları bölümüne gidin
- Grup adı eşle veya oluştur alanına bir grup adı girin
Aynı grup adını kullanan lightbox'lar bir grupta bağlanır.
Koleksiyon listelerindeki lightbox'lar için, bir Koleksiyon öğesinde bir lightbox oluşturmak ve bağlamak, Koleksiyon listesindeki tüm lightbox'ları otomatik olarak bağlar.
Bir sayfada birden fazla lightbox grubu oluşturun
Aynı sayfada birden fazla lightbox varsa, her lightbox grubuna farklı bir Grup adı atayarak onları ayırabilirsiniz.