Elementor’daki görüntü widget’larıyla nasıl çalışılır
Ne demişler. “Bin kelimeye değer bir rakam”. Bazen mesajları görüntüler aracılığıyla iletmek daha kolaydır. Bu web tasarımı için de geçerlidir. Görüntü öğeleri içermeden web sayfaları tasarlamak neredeyse imkansızdır. Tasarıma öncelik veren bir araç olan Elementor, görüntü widget’ları sağlayarak tasarıma resim eklemenizi kolaylaştırır. Görüntü öğeleri eklemek için görüntü widget’ını tuval alanına sürüklemeniz yeterlidir. Sadece statik görüntüler ekleyemezsiniz, aynı zamanda Elementor’a dinamik görüntüler de ekleyebilirsiniz. Bu özellik (dinamik görüntüler ekleme yeteneği), Elementor tema yapıcılarını kullanarak özel tek yayınlar, özel kategori sayfaları, özel başlıklar vb. Gibi özel şablonlar oluşturmak için çok kullanışlıdır. Görüntü widget’ının kendisi her iki Elementor sürümünde de mevcuttur (okuyun: Free Elementor vs. Elementor Pro), ancak dinamik görüntüler ekleyebilmek için Pro sürümü kullanmanız gerekir.
Elementor’a Görüntüler Nasıl Eklenir Daha ileri gitmeden önce, Elementor’u nasıl kullanacağınızı zaten bildiğinizi varsayıyoruz. Sadece Elementor’u biliyorsanız, nasıl kullanılacağını öğrenmek için önceki makalemizi okuyabilirsiniz. Elementor’un editöründe, görüntü widget’ını sol panelden tuval alanına sürüklemeniz ve ardından kullanmak istediğiniz resmi seçmek için görüntü seçmenini tıklamanız yeterlidir.
İçerik sekmesinin altındaki resim bloğunda, görüntünüzün boyutunu ayarlayabilirsiniz. Özel boyutu ayarlamak istiyorsanız, kuvvet sekmesinin altındaki görüntü bloğundaki genişlik ve yükseklik değerlerini ayarlayın. Yüzde, Pixel veya ViewPort (VW) birimini kullanabilirsiniz.
Görüntüyü Opaklığı ayarla Görüntü opaklığı seviyesini ayarlamak için, stil sekmesinin altındaki görüntü bloğundaki opaklık seçeneğindeki ayarlayıcıyı değiştirmeniz yeterlidir. Opaklık seviyesini 0’dan 1’e ayarlayabilirsiniz.
CSS filtrelerinin uygulanması İsterseniz, belirli bir görüntü efekti eklemek için görüntünüze bir CSS filtresi uygulayabilirsiniz. Uygulayabileceğiniz 5 filtre seçeneği vardır: bulanıklık, parlaklık, kontrast, doygunluk ve ton. CSS filtresi seçeneğindeki kalem simgesini tıklayın ve regülatörü değiştirerek istediğiniz CSS filtre değerini ayarlayın.
Sınırı düzenlemek Görüntünüzün daha çekici görünmesini sağlamak için sınırı da ayarlayabilirsiniz. Bir sınır eklemek için önce sınır türü seçeneğinde sınır türünü seçin. Ardından sınır genişliğini, sınır rengini ve sınır yarıçapını ayarlayabilirsiniz. Konuşma, sınır yarıçapı görüntünün açısının eğim seviyesidir (sağ üst, sol üst, sol alt, sol alt). Sınır yarıçapının değeri ne kadar yüksek olursa, görüntünüzün yuvarlaktır.
Kutunun gölgesini uygulayın Kutunun gölgesini uygulamak için, kutu gölge seçeneğine kurşun kalem simgesini tıklamanız yeterlidir. Gölgenin rengini seçin ve yatay oryantasyon değerini, dikey oryantasyonu, bulanık seviyeyi ve yayma seviyesini ayarlayın. Gelişmiş Ayarlar Görüntüde bazı gelişmiş ayarlar yapmak için, Ayarlar panelinde devam eden sekmeyi açabilirsiniz. Bu panelden, marj ve dolgu gibi şeyleri yönetebilir, animasyona girme, özel CSS vb.
Marj ve dolgu ayarlayın Görüntünün kenar boşluğunu ve dolgusunu ayarlamak için gelişmiş bloğu açabilirsiniz. Marj ve dolgu hakkında daha fazla bilgi edinmek için bu makaleyi okuyabilirsiniz.
Animasyonu uygulamak
Görüntünüzün daha çekici görünmesini sağlamak için giriş animasyonunu uygulayabilirsiniz. Bunu yapmak için hareket bloğunu açabilirsiniz. Bu bloktan, kaydırma efektini, fare efektini ve yapışkan seçeneği de ayarlayabilirsiniz. Gelen animasyonu uygulamak için, giriş animasyon seçeneğine yeterli animasyon stili girdi. Özel CSS ekleyin
CSS bilgisiniz varsa, görüntü widget’ına özel CSS de ekleyebilirsiniz. Özel CSS eklemek için özel bir CSS bloğu açabilir ve CSS kodunuzu mevcut alanlara ekleyebilirsiniz. Görüntüleri belirli cihaz türlerinde gizle
Elementor’da, farklı cihaz türleri için belirli widget’larda farklı ayarlar kullanabilirsiniz. Ayrıca, belirli bir cihaz türünde devre dışı bırakılacak widget’ı da ayarlayabilirsiniz. Örneğin, tablet cihazındaki görüntü widget’ını devre dışı bırakabilirsiniz. Bunu yapmak için duyarlı bir blok açabilirsiniz. Widget’ı belirli bir cihaza gizlemek için düğmeyi kaydırın. Özel bir konum ayarlayın Elementor’a görüntü eklediğinizde, varsayılan konum statik olarak ayarlanır (varsayılan). Belirleyebileceğiniz iki konum seçeneği daha vardır: Kalın ve Mutlak. – Onarım: Bu seçeneği seçerseniz, görüntü kullanıcının görünümüne göre konumlandırılır – Mutlak: Bu seçeneği seçerseniz, görüntü kesinlikle annenin ilk konumuna yerleştirilir. Özel konumu ayarlamak için, konumlandırma bloğunu gelişmiş sekmenin altına açabilirsiniz. Konum seçeneğinde ayarlamak istediğiniz özel konumu seçin ve yatay oryantasyon ofsetini ve dikey oryantasyonu ayarlayın.
Sonuç olarak bir tasarımın önemli bir unsurudur. Sayfaları kesinlikle resimsiz tasarlayabilirsiniz, ancak tasarımınız mülayim olacaktır. Bir sayfa veya tema üreticisi şablonu olsun, Elementor tasarımınıza görüntü öğeleri eklemek için bir resim widget’ı kullanabilirsiniz. Elementor, statik ve dinamik görüntüler (yalnızca Pro sürümleri) eklemenize olanak tanır. Görüntü widget’ına ek olarak, görüntü öğeleri ve metin içeriği eklemek için bir çizim kutusu widget’ı da vardır. İkinci widget, ekip üyeleri, özellikler listesi bölümleri ve diğer parçaları ve görüntü ve metin içeriğini içeren bazı ihtiyaçlar için daha uygundur.
