Çalışmalarını online olarak sunmak isteyen bir serbest çalışan veya başka bir yaratıcı olmanız veya yalnızca web sitenizi veya blogunuzu ziyaretçileriniz için daha ilgi çekici hale getirmek istemeniz fark etmez, bir resim galerisi eklemek bunu yapmanın harika bir yoludur. Sonuçta, özellikle markanızın veya işletmenizin ne hakkında olduğunu doğru bir şekilde sergilemek için görsellere güvenmeniz gerekiyorsa, resim galerileri web sitenizin tasarımının önemli bir parçası olabilir.
Sitenizde farklı görüntü türlerini sergilemek için mükemmel bir yol ararken, muhtemelen birkaç farklı türde galeriyle de karşılaştınız – atlıkarınca resim galerisi, Pinterest galerisi ve duvarcılık bunlardan birkaçıdır. Bu galeri türlerinin her biri kendi başına harika olsa da, bu sefer özellikle yığma galerilere odaklanacağız. Yani, bu tür galeriler, her görüntünün orantılarını korumasına izin vererek ve ayrıca her görüntü arasındaki boşluğu tutarlı ve iyi optimize edilmiş halde, kullanılmayan boşluk bırakmadan koruyarak, görüntülerinizi görsel olarak büyüleyici bir şekilde düzenlemenize olanak tanır. Püf Nokta: tek bir uyumlu birimde düzenlenmiş, farklı boyutlarda birden fazla görsele sahip olabilir ve galerinizin onu görüntüleyen herkes için çekici ve profesyonel görünmesini sağlayabilirsiniz.
Bu sefer, kendi Qi Addons for Elementor eklentimizi kullanarak WordPress’te bir duvarcılık galerisi oluşturma konusunda size rehberlik edeceğiz, bu yüzden okumaya devam ettiğinizden emin olun.
Elementor Eklentisi için Qi Eklentileri ile Bir Yığma Resim Galerisi Oluşturma
60 adet tamamen esnek pencere öğesi içeren Qi Addons for Elementor, akla gelebilecek her türden sayfayı oluşturmak için kullanabileceğiniz harika bir ücretsiz eklentidir. Sayfanız veya bölümünüz için istenen görünümü elde etmek için portföy ve iş eklentilerinden WooCommerce ve yaratıcı eklentilere kadar her türden eklentiyi karıştırıp eşleştirebileceksiniz.
Şimdi Masonry Image Gallery widget’ı, siteniz için muhteşem ve büyüleyici galeriler oluşturmak için kullanabileceğiniz bu koleksiyondaki başka bir harika widget’tır. Widget tamamen özelleştirilebilir ve farklı görüntüler eklemenize ve bunların boyutlarını son derece kolay bir şekilde seçmenize olanak tanır. Ayrıca resimler arasındaki boşluğu ayarlayabilir, fareyle üzerine gelme efektleri ekleyebilir ve daha fazlasını yapabilirsiniz.
Çok yönlü seçeneklerini kullanarak bu widget ile yapabileceğiniz bazı şeyleri göstereceğiz. Sitenizde Qi Addons for Elementor eklentisini kullanmak için önce Elementor sayfa oluşturucunun kurulu olduğundan emin olun. Sayfa oluşturucunun ücretsiz sürümü iş görecektir.
Ayrıca okumak yerine video izlemeyi tercih ederseniz aynı konuyu işleyen videomuza da göz atmalısınız:
Sayfanızın veya yayınınızın arka ucuna gidin ve Elementor kenar çubuğunuzdaki duvar resim galerisi widget’ını bulun.
Bunu yaptıktan sonra, ekranın sağ tarafına sürüklemeniz yeterlidir.
Widget’ın varsayılan olarak boş olduğunu fark edeceksiniz. Henüz herhangi bir resim eklemediğiniz için bu tamamen normaldir.
Ayrıca duvar galerisi bölümünüzün bizimki gibi tam genişlikte görünmesini istiyorsanız bazı ek seçenekler belirlemeniz gerektiğini de hemen belirtmeliyiz.
Galerinizin varsayılan olarak kutulanmış olma ihtimali vardır. Fakat bu ayarı değiştirmek isterseniz, Edit Section menüsüne girerek kolayca yapabilirsiniz. Bölümünüzün en üstünde, tam ortasında görünen düğmeyi tıklayın:
Ardından soldaki Düzen bölümünü kullanarak içerik genişliğiniz için Kutulu yerine Tam Genişlik’i seçmeniz yeterlidir.
Elbette bunun yerine “Kutulu” seçeneğini de kullanabilir ve ardından kaydırıcıyı kullanarak istediğiniz genişliği ayarlayabilirsiniz:
Sayfa kenarları ile galeriniz arasında hiç boşluk olmamasını istiyorsanız, tüm sayfa düzenini tam genişlikte de değiştirebilirsiniz. Bunu yapmak için sayfa ayarlarına gidin ve Elementor Full With seçeneğini seçin. Alternatif olarak, Qi Temasını kullanıyorsanız, Qi Tam Genişlik seçeneğiyle de gidebilirsiniz.
Son olarak sütunlar arasında boşluk olmayan bir galeri oluşturmak için sütun boşluğu seçeneğini Boşluk yok olarak da ayarlayabilirsiniz.
Galeri düzeniniz/bölümünüz için istediğiniz görünümü elde edene kadar bu ayarları istediğiniz şekilde birleştirebilirsiniz.
Artık tercih edilen bölümü ve/veya sayfa genişliğini ayarladığınıza göre, resimlerinizi öğe olarak eklemeye devam edebilirsiniz. “+Öğe ekle” düğmesini tıklayın ve ardından resminizi seçmek için resim alanına basın.
Daha sonra Medya Ekle’ye tıklayın.
Görüntü Boyutunuzu seçmenize izin verecek olan yeni alanın hemen altında göründüğünü göreceksiniz. Kare, Manzara, Portre ve Büyük Kare arasından seçim yapabilirsiniz. Örneğimiz için Kare seçeneğini seçtik.
O andan itibaren, +Öğe ekle düğmesine tıklayarak ve ardından medya kitaplığınızdan görüntüyü seçerek istediğiniz kadar görüntü eklemeye devam edebilirsiniz.
Boyutlarındaki bazı farklılıklar dışında birkaç görseli daha aynı şekilde kendi galerimize ekledik.
Tüm resimleri ekledikten sonra Masonluk galerimizin görünümü burada. Toplam sekiz resim ekledik, bu yüzden seçeneklerimizde sekiz farklı öğe var.
Şimdi Galeri Ayarları bölümünde, galerinizin görünümünü daha fazla ayarlamak için kullanabileceğiniz birkaç yararlı seçenek var.
Buna, üzerine tıklandığında görüntüyü bir kaplama olarak açan Işık Kutusu Açılır Penceresini Etkinleştir seçeneği dahildir. Ayrıca ziyaretçilerin galerinizin tamamına göz atmasına olanak tanır. Örneğimiz için bu ayarı etkinleştirdik.
Daha sonra aynı ada sahip seçeneği kullanarak sütun sayısını seçebilirsiniz. Varsayılan olarak üçe ayarlanmıştır, fakat bir ila sekiz sütun arasında herhangi bir yeri seçebilirsiniz. Galerimiz için dört sütun seçtik:
Gördüğünüz gibi, resimler bu yeni sütun düzenine uyum sağlasalar da orijinal oranlarını korudular.
Daha sonra galerinizin farklı ekran boyutlarında nasıl görüntüleneceğini seçmek için Duyarlı Sütunlar seçeneğini ayarlayabilirsiniz.
Varsayılan olarak Önceden Tanımlı olarak ayarlanmıştır, fakat her ekran boyutu için sütun sayısını seçmek üzere Özel’i seçebilirsiniz. Değiştirmek istediğiniz belirli boyutun yanındaki açılır menüyü kullanarak istediğiniz sayıyı kolayca ayarlayabileceksiniz.
Adından da anlaşılacağı gibi, Öğeler Arasındaki Boşluk seçeneği, resimleriniz arasındaki boşluğu ayarlamanıza olanak tanır. Bunu kaydırıcıyı kullanarak veya yeni bir değer girerek yapabilirsiniz (bizimki için 26 piksel ekledik).
Şimdi Görüntü Hover seçeneği, görüntünüzün fareyle üzerine gelindiğinde nasıl görüneceğini ayarlamanıza olanak tanır. Yakınlaştır, Uzaklaştır’ı seçebilecek, Taşı olarak ayarlayabilecek veya Yok’u seçebileceksiniz.
Varsayılan (Yakınlaştır) seçeneğini kullanmaya karar verdik:
Sonunda yukarıda belirtilen yakınlaştırma efektlerinden birini (Yakınlaştır veya Uzaklaştır) seçerseniz, Görüntü Hover Yakınlaştırma Menşei seçeneğini de kullanabileceksiniz. Bu seçenek, görüntünüzün yakınlaştırılacak (veya uzaklaştırılacak) belirli bir bölümünü seçmenize izin verdiği için özellikle ilginçtir. Bu ayarı Merkez olarak tuttuk, fakat hangisini en çok beğendiğinizi görmek için serbestçe oynayabilirsiniz.
Sırada Bindirme Rengi seçeneği var. Renk seçiciden herhangi bir rengi seçebilir ve ardından kaydırıcıyı kullanarak istediğiniz saydamlığı ayarlayabilirsiniz.
Gördüğünüz gibi, bu, resimlerinizi seçilen renk altında ortaya çıkaracaktır.
Bindirme Vurgulu Renk seçeneği benzer şekilde çalışır, fark, renginizin fare üzerine gelindiğinde gösterilmesidir.
Bir kez daha, resimlerinizin görünür olması için şeffaflık derecesini de seçmeniz gerekiyor. Bu seçeneği kullanırsanız galeriniz şöyle görünebilir:
Galeri Ayarları söz konusu olduğunda işte bu kadar. Son olarak Yayınla/Güncelle düğmesine basabilir ve ardından duvarcılık galerinizin sayfanızda/yazınızda nasıl göründüğüne bakabilirsiniz.
Çözüm Yolu
Size yukarıda gösterdiğimiz örnekte de görebileceğiniz gibi, Qi Eklentileri for Elementor’s Masonry Gallery widget’ını kullanarak duvar galerinizin görünümünü özelleştirmenin birçok farklı yolu vardır. Seçtiğiniz belirli seçeneklere bağlı olarak, galerinizin görünümünü büyük ölçüde değiştirebilir ve tasarımınıza tamamen uyacak şekilde ayarlayabilirsiniz. Vurgulu seçeneklerini değiştirebilir, öğeler arasındaki boşluğu ayarlayabilir, görüntü boyutlarını ayarlayabilir ve diğer mevcut ayarlardan herhangi birini karıştırıp eşleştirebilirsiniz. Tasarımımızı kopyalamaya veya tamamen başka bir şeyle devam etmeye karar verirseniz verin, eklentinin esnek seçenekleri görsel olarak çarpıcı duvar galerileri oluşturmanıza ve web sitenizin ziyaretçileri için unutulmaz bir deneyim yaratmanıza yardımcı olacaktır. Bu öğreticiyi izlemenizi ve widget’ı kendiniz denemenizi önemle tavsiye ederiz.