Metin ve resimler, online içeriğin yapı taşlarıdır ve bunları biçimlendirmek ve görüntülemek için asla yeterince farklı yollara sahip olamazsınız. Metin için farklı yazı tipleri ve renkler seçmek veya resimler için kaydırıcılar gibi görüntüleme öğeleri kullanmak olsun, sayfanın sizin için en önemli olan bölümlerine biraz daha fazla dikkat çekmek için her zaman bir şeyler yapabilirsiniz.
Normal görüntü kaydırıcıları canınızı sıktıysa veya görüntüleri farklı cihazların (cep telefonları veya dizüstü bilgisayarlar gibi) çerçevelerinde özellikle sergilemek istiyorsanız, Aygıt Çerçevesi Kaydırıcı widget’ı tam size göre. Online bulabileceğiniz en büyük ücretsiz Elementor eklentileri koleksiyonu olan Elementor eklentisi için WordPress Eklentilerimizin bir parçası olarak piyasaya sürülen bu eklenti, WordPress cihaz çerçeve kaydırıcılarını web sitenize hemen eklemenizi sağlar.
Bu inanılmaz eklentiyi kullanmaya başlamanıza yardımcı olmak için, sizi bir WordPress site sayfasına bir cihaz çerçevesi kaydırıcısı ekleme sürecinde gösteren bir eğitim videosu yayınladık.
İzlemek yerine bir öğretici okumayı tercih ederseniz, tam da olmanız gereken yerdesiniz. Bu makalede, size şunları nasıl yapacağınızı göstereceğiz:
-
WordPress’te Aygıt Çerçevesi Kaydırıcısı Ekleme
-
Kaydırıcının İçeriğini Düzenleme
-
Aygıt Çerçeve Kaydırıcısını Şekillendirme
WordPress’te Aygıt Çerçevesi Kaydırıcısı Ekleme
WordPress Addons for Elementor eklentisini kullanarak bir WordPress cihaz çerçevesi kaydırıcısı eklemek için hem eklentiyi hem de Elementor sayfa oluşturucuyu yüklemeniz gerekir. Elementor’a aşina değilseniz endişelenmeyin – sayfa oluşturucu çok iyi belgelenmiştir ve hızlı bir şekilde başlamanız için başlangıç eğitimimizi kullanabilirsiniz. Hazır olduğunuzda, Eklentiler > Yeni Ekle’ye gidin, eklentileri arayın ve kurun ve etkinleştirin.
Eklentiyle neler yapabileceğinizi göstermek için eklentimizin sayfasından bir örnek kullanacağız. Bunu, eklentiyi keşfetmeniz için bir başlangıç noktası olarak kullanabilirsiniz. Hatta bu rehber için WordPress Temamızı kullandığımızı unutmayın; kullandığınız temaya ve ayarlarına bağlı olarak her şey sizin açınızdan farklı görünebilir. Bunu akılda tutarak, arka planı yaparak sayfayı hazırlamaya başlayalım.
Bir resim ve bazı metinlerden yapılmıştır. Resmi eklemek için yeni bir bölüm oluşturduk ve ardından seçeneklerini getirmek için Bölümü Düzenle seçeneğini kullandık. Stil altında Arka Plan’ı bulduk ve görüntüyü ekledik, konumunu “orta merkez” olarak ayarladık, “yineleme”yi “tekrarlama yok” olarak ve boyutunu “örtü” olarak ayarladık.
Bir sonraki adım için, Elementor için WordPress Eklentilerinden de edinilebilen Bölüm Başlığı widget’ını kullanarak metni ekledik. Widget’ı bölüme sürükledik, metnimizi yazdık ve Style altındaki Title Style seçeneklerini kullanarak başlık etiketini H3, rengi #ffffff ve boyutu 250 piksel olarak değiştirdik.
Her şeyin tam olarak örnekteki gibi görünmesini sağlamak için Gelişmiş Seçenekler ile de uğraşmamız gerekti. Konumlandırma altında, kaydırıcının metinle örtüşmesine ve üzerinde kalmasına izin verdiği için Mutlak konum’u seçtik. Hatta yatay ofset için -1 piksel ve dikey ofset için %18 değerlerine sahip ofset seçeneklerini kullandık.
Arka plan hazır olduğunda, cihaz çerçeve kaydırıcı widget’ını eklemenin zamanı geldi. Widget menüsünde bulup arka planı olan bölüme sürüklemeniz yeterli olacaktır. Fakat arka plan görüntüsünün patlamasına neden olacaktır. Bunu düzeltmek için widget’ın seçeneklerine eriştik ve Stil > Stil altında cihaz genişliğini 254 piksel olarak ayarladık.
Widget’ınızın arka planda nasıl göründüğünden memnun olduğunuzda, bir sonraki adıma, yani içeriği eklemeye ve düzenlemeye geçebilirsiniz.
Kaydırıcının İçeriğini Düzenleme
İçerik bölümündeki ilk seçenek grubu Genel seçeneklerdir. Burası, görüntü ekleyebileceğiniz, görüntülemek istediğiniz cihaz çerçevesinin türünü seçebileceğiniz ve cihaz çerçevesi gölgesini etkinleştirmek isteyip istemediğiniz yerdir. Üç resim ekledik, mobil cihaz çerçevesini seçtik ve gölgeyi etkinleştirdik.
Kaydırıcı Ayarları, bir sonraki içerik seçenekleri grubudur. Bu seçeneklerde, iki kaydırıcı efektinden birini seçebilir, ayrıca kaydırıcı döngüsünü, otomatik oynatmayı, gezinmeyi, sayfalandırmayı ve özel bağlantıları etkinleştirebilirsiniz. Burası aynı zamanda slayt ve animasyon için süreyi ayarladığınız yerdir.
Yeni başlayanlar için, varsayılan 5.000 milisaniyeden daha kısa sürmeleri için slayt süresini 1.700 milisaniye olarak değiştirdik. Kaydırıcı gezinmeyi ve sayfalandırmayı da devre dışı bıraktık.
İçerik seçeneklerini tamamladıktan sonra, bir sonraki adım, cihazın çerçeve kaydırıcısını biçimlendirmek olacaktır.
Aygıt Çerçeve Kaydırıcısını Şekillendirme
İlk iki stil seçeneği grubu, Kaydırıcı Gezinme Stili ve Kaydırıcı Sayfalandırma Stili seçenekleridir. Kaydırıcı gezintisini ve sayfalandırmayı etkinleştirmeye karar verirseniz, bunlar sizin için kullanılabilir olacaktır. Bunların içinde, gezinme ve sayfalandırmanın konumu ve türünden renk ve boyutlarına kadar her şeyi ayarlayabileceksiniz.
Gezinme ve sayfalandırmayı göstermemeyi seçtiğimiz için Stil bölümüne geçebiliriz. Arka planı oluştururken onu zaten ziyaret etmiştik – daha yönetilebilir hale getirmek için cihaz genişliğini burada ayarladık. Buradaki diğer iki seçenek, görüntü kenarlığını yuvarlamak için görüntü kenarlığı yarıçapı ve çerçeveye göre görüntü boyutunu artırmak veya azaltmak için görüntü ofsetidir.
Görüntülerin köşelerinin çerçeveden dışarı çıkmasını önlemek için görüntü kenarlık yarıçapını 40 piksele ayarlamaya karar verdik. Hatta sağ ve alt Image Offsets seçeneklerine tek bir piksel ekleyerek görüntülerde küçük bir ayar yaptık.
Ve bununla, cihaz çerçeve kaydırıcımız yapıldı. Elbette sizinki tamamen farklı görünebilir – isterseniz özel bir çerçeve bile girebilirsiniz. Widget’ın sayfasındaki örneklerden birine benzeyen bir şey yaratmak istiyorsanız, bunu şu şekilde yapabilirsiniz.
Konunun Özeti
Web sitenizdeki görüntüleri ekstra çekici ve dikkat çekici hale getirmek istediğinizde, bunları görüntülemek için bir cihaz çerçeve kaydırıcısı kullanmak harika bir seçenektir. WordPress Addons for Elementor eklentimizdeki Device Frame Slider widget’ı sayesinde, kolayca bir kaydırıcı oluşturabilir ve geçişlerden bağlantılara ve sayfalandırmaya kadar her şeyi kapsayan seçeneklerle özelleştirebilirsiniz. En iyi yanı, widget’ı dakikalar içinde hazır ve çalışır hale getirebilmenizdir – kutudan çıkar çıkmaz neredeyse kullanıma hazır gelir!