Mutlu Eklentileri Kullanarak Elementor Web Sitenizde Görüntü Yığını Grupları Oluşturun

Yayınlanan: 2021-12-27

Günümüzde web sitelerinde süslü görüntü yığını gruplarını fark ettiniz mi? O zaman yalnız değilsin. Herhangi bir web sitesine modern bir görünüm kazandıran birden fazla görüntünün güzel temsili nedeniyle, görüntü yığını grupları son zamanlarda giderek daha popüler hale geldi.

Bu zarif tasarım, ana sayfaya, hakkında sayfasına ve hatta dönüşüm odaklı bir açılış sayfasına çok yakışır. Bu nedenle, resimlerinizi güzel ve kolay bir şekilde görüntülemek istiyorsanız, resim yığını grubu kesinlikle harika bir seçimdir. Özellikle Elementor kullanıyorsanız, Happy Addons, böyle bir görüntü grubu eklemenizi son derece kolaylaştırır.

Bu, kendi başınıza kolayca görüntü yığınları oluşturabilmeniz için bir görüntü yığını grubunun nasıl oluşturulacağına ilişkin kullanıcı dostu ve etkileşimli adım adım bir eğitimdir.

Başlayalım!

Bir Bakışta Mutlu Eklentilerin Görüntü Yığını Grubu Widget'ı

Why Should You Use Happy Addons' Image Stack Group Widget

Web sitenizin resimlerini ziyaretçiniz için daha çekici hale getirmek istiyorsanız, Happy Addon'un yeni Resim Yığını Grubu widget'ını deneyin. Bu özel ücretsiz widget ile Elementor'da kolayca yığılmış grup görüntüleri oluşturabilirsiniz.

Elementor'un sürükle ve bırak düzenleyicisini kullansanız bile, web sitenizin resimlerini bir yığın grubunda görüntülemek zordur. Elementor'da bu tür bir öğe tasarlamak için özel CSS ve JavaScript kodu eklemelisiniz. Tüm tasarımı bitirmek çok değerli zaman alır. Tasarımı düzgün bir şekilde tamamlamak için bir geliştirici kiralamanız bile gerekebilir.

Ancak Mutlu Eklentiler widget'ını kullanırsanız, bu tür etkileşimli görüntü tasarımını bir kuruş ödemeden bir dakikadan daha kısa sürede yapabilirsiniz. Ekip üyelerinizin, sosyal kanalların ve diğer resimlerin/simgelerin resimlerini daha düzenli bir şekilde görüntüleyebilirsiniz.

Görüntü Grubu Oluşturmak İçin Görüntü Yığını Grup Widget'ı Nasıl Kullanılır

Makalemizin bu bölümünde, çarpıcı bir görüntü grubu oluşturmak için Görüntü Yığın Grubu widget'ını nasıl kullanacağınızı göstereceğiz.

Başlamadan önce web sitenizde aşağıdaki eklentilerin olması gerekir:

  • Elementor (Ücretsiz)
  • Mutlu Eklentiler (Ücretsiz)

Elementor'da yeniyseniz bu kullanışlı kılavuzu izleyin ve Elementor'un Nasıl Kullanılacağını öğrenin (Yeni Başlayanlar İçin Adım Adım Kılavuz).

1. Adım: Görüntü Yığını Grup Widget'ı ekleyin

İlk olarak, widget'ı web sitenizin uygun yerine eklemeniz gerekir. Burada, bu gelişmiş aracı kullanarak sosyal hesaplarımızı web sitemizin alt bilgi alanında sergileyeceğiz.

Arama alanına ' görüntü yığın grubu ' yazabilir ve ardından sitede doğru yere sürükleyip bırakabilirsiniz.

Add Image Stack Group Widget

2. Adım: Conetnt'i Yönetin

Burada, widget'ın içeriğini yöneteceğiz.

Öğe Ekleme ve Hizalamalarını Ayarlama

Widget'ı ekledikten sonra aşağıdaki görseldeki gibi bir arayüz göreceksiniz. İçerik > Öğeler 'de Öğe Ekleyebilir ve Kaldırabilirsiniz . Ayrıca, bir öğeyi kopyalayabilirsiniz .

Tüm içeriğin Hizalamasını ayarlayabilirsiniz.

Add Items & Set Alignment

Öğeye Resim/Simge Ekle

İçeriği eklemek için tek bir öğeyi açmanız gerekir. Önce öğeyi tıklayın, ardından Medya Türünüzü seçin. Bir resim veya simge kullanabilirsiniz. Burada, simgeleri kullanarak sosyal hesaplarımızı görüntüleyeceğiz. Bir simge eklemek için aşağıdaki resmi takip edin.

Add Icon to the item

İpucu Ekle ve Konum Ayarla

Simge için bir Araç İpucu yazabilir ve araç ipucunun Konumunu ayarlayabilirsiniz.

Add Tooltip & Set Position

Bağlantı Ekle ve Simge Rengini Değiştir

Bir bağlantı ekleyebilir ve simgenin rengini değiştirebilirsiniz. Bunu yapmak için aşağıdaki resmi takip edin.

Add Link and Icon Color

Arka Planı ve Kenarlık Rengini Değiştir

Arka Plan Tipini ihtiyacınıza göre Klasik ve Gradyan olarak seçin. Burada varsayılan Arka Plan Rengini belirledik ve Kenarlık Rengini değiştirdik.

Change Border Color

3. Adım: Diğer Öğeleri Ekleyin

Tek bir öğenin içeriğini ekledikten sonra, yukarıdaki işlemin ardından üç öğe daha ve içeriklerini de ekledik.

Complete Adding Items

Adım 4: Tasarımı Özelleştirin

Stil seçeneklerini kullanarak tasarımı özelleştirelim.

Stil Görüntüleri/Simgeleri

Stil > Görüntü/Simge içinde, görüntü/ikon tasarımını kendi yönteminizle özelleştirebilirsiniz. Burada, tasarım amaçlarınıza göre Öğe Boyutu, Simge Boyutu, Aralık, Kenar Boyutu, Kenar Rengi ve Kenar Yarıçapını ayarlayabilirsiniz. Ayrıca genel Simge Rengi, Arka Plan Türü ve Kutu Gölgesini de tanımlayabilirsiniz.

Style Image & Icon

Stil İpucu

Buradaki stil alanında Araç İpucuna stil verebilirsiniz. Burada, genel Araç İpucu' Konumunu ayarlayabilirsiniz. Ayrıca, araç ipucuna Dolgu ve Kenar Yarıçapı ekleyebilirsiniz. Ve araç ipucunun Tipografi, Renk, Arka Plan Rengi ve Kutu Gölgesini ayarlayın.

Style Tooltip

Adım 5: Tasarımın Önizlemesini Kontrol Edin

Tasarımı özelleştirdikten sonra, Görüntü Yığın Grubunun nihai çıktısını görebilirsiniz. Önizlememiz aşağıdaki animasyonlu resme benziyor, tam da istediğimiz gibi.

Final Outlook of the Design

Image Stack Group Widget'ın tam belgelerini okuyun.

Görüntü Yığını Grubu widget'ının bu kullanışlı video eğitimini de izleyebilirsiniz.

Kullanabileceğiniz Bazı Mutlu Eklentiler Görüntü Widget'ları

Web sitenizi süslemek için de kullanabileceğiniz, görselle ilgili diğer bazı gelişmiş widget'ları burada bulabilirsiniz.

Resim Karşılaştır (Ücretsiz)

Slayttan önce ve sonra bir görüntüyü karşılaştırmak için kullanışlı bir araç arıyorsunuz. Happy Addons'tan yeni Resim Karşılaştırma widget'ını deneyin. Bu ücretsiz widget ile, daha iyi karşılaştırma için web sitenizin resimlerini slaytlardan önce ve sonra sergileyebilirsiniz.

Görüntü Karşılaştırma widget'ının Belgelerini kontrol edin.

Görüntü Akordiyonu (Ücretsiz)

Happy Addons' Image Accordion widget'ı, Elementor web siteniz için görüntüleri kullanarak güzel akordeonlar tasarlamanıza olanak tanır. Kullanımı kolay ve tamamen özelleştirilebilir bir dizi güzel tasarımla birlikte gelir. Şimdi bu kullanışlı widget'ı deneyelim.

Nasıl kullanılacağını öğrenmek için Görüntü Akordiyonu widget'ının Belgelerine bakın.

Görüntü Izgarası (Ücretsiz)

Web sitenizin resimlerini Elementor'da bir ızgara düzeninde göstermek ister misiniz? Happy Addons'un Image Grid widget'ına göz atın. Bu araç, dakikalar içinde etkileşimli bir görüntü ızgarası tasarlamanıza olanak tanır. Bir resim galerisi, portföy ve daha fazlasını oluşturmak için bu widget'ı kullanabilirsiniz.

Image Grid widget'ının Belgelerini okuyun ve onu doğru şekilde nasıl kullanacağınızı öğrenin.

Görüntü Vurgulu Efekti (Ücretsiz)

Image Hover Effect aynı zamanda web sitenizin resimlerine fareyle üzerine gelme efektleri eklemenize izin veren harika bir pencere öğesidir. Uygulaması kolay 20'den fazla çarpıcı vurgulu efektle birlikte gelir. Resminizi daha kazançlı hale getirmek için bu ücretsiz araca göz atın.

Example Image Hover Effect

Image Hover Effect widget'ının belgelerini okuyun.

Kayan Görüntü (Pro)

Müşterilerinizin logolarını, ekip üyelerini ve diğer görsellerini yatay ve dikey tarzda sergilemek istiyorsanız, Mutlu Eklentiler Kayan Görseli pencere aracını kullanabilirsiniz. Bu kullanımı kolay araç, tamamen esnek birkaç tasarımla birlikte gelir. Bunu şimdi deneyin ve web sitenizi daha ilgi çekici hale getirin.

Scrolling Image

Kayan Görüntü widget'ının tam belgelerini izleyin.

Tek Görüntü Kaydırma (Pro)

Elemntor web sitenize uzun bir resim sunmak ve bunu yapmak için doğru aracı mı arıyorsunuz? Mutlu Eklentiler'in büyük boyutlu resimleri farklı stillerde görüntülemenize olanak tanıyan yeni Tek Görüntü Kaydırma widget'ına göz atın.

Single Image Scroll

Tek Görüntü Kaydırma widget'ının belgelerine bakın.

Çözüm

Görsellerin mükemmel kullanımı, web sitenizi daha etkileşimli ve kullanıcı dostu hale getirir. Bu yüzden web sitenizin resimlerini yönetmek için doğru aracı kullanmalısınız.

Bu blogda, Görüntü Yığını Grubu widget'ını ve bunun nasıl doğru şekilde kullanılacağını tartıştık. Ayrıca, web sitenizi süslemek için kullanabileceğiniz, resimlerle ilgili diğer bazı yararlı Happy Addons widget'larını da tanıttık.

Bu blogla ilgili herhangi bir sorunuz varsa, aşağıdaki yorum kutusuna bize yazabilirsiniz. WordPress ve Elementor ile ilgili daha kullanışlı eğitimler almak için bu gönderiyi sosyal kanallarınızda paylaşmayı ve bültenimize katılmayı unutmayın.

Haber bültenimize abone ol

Elementor ile ilgili en son haberleri ve güncellemeleri alın