OceanWP'de Smart Slider 3 ile Dinamik Slaytlar Nasıl Oluşturulur?

Yayınlanan: 2018-07-09

Web sitenize bir kaydırıcı eklemek iyi bir seçim olabilir, çünkü bu ziyaretçileriniz için ilk izlenimi yaratır. Ancak WordPress sayfanıza kaydırıcı eklemek istediğinize karar verdikten sonra, hangisini seçmeniz gerektiğini nasıl bileceksiniz? Özgürce kullanabilir misin? Yönetmek basit mi? Sitenize kolayca koyabilir misiniz?

Tüm sorularınızın cevabı evet, bu mümkün, Smart Slider 3 bunların hepsini yapabilir: tamamen ücretsizdir, kullanıcı dostudur ve OceanWP Temanızla da iyi çalışır.

Bu eğitimde, size bir demo Slider'ı nasıl içe aktarabileceğinizi, kendi Smart Slider'ınızı nasıl yapabileceğinizi ve OceanWP Theme kullanarak bir Dinamik Post kaydırıcısını nasıl oluşturabileceğinizi göstereceğim.

Smart Slider 3'ü Yükleme

Eklentiler → Yeni ekle seçeneğine gittiğinizde Smart Slider 3'ü kolayca yükleyebilirsiniz. Smart Slider 3'ü arayın ve bundan sonra yükleyebilirsiniz.

Diğer seçenek ise, Smart Slider 3 web sitesinden doğrudan indirebilir ve ardından yükleyebilirsiniz.

Bundan sonra Smart Slider 3'ü etkinleştirebilirsiniz:

Smart Slider 3'ü etkinleştirin

İlk Slaytımı Nasıl Oluşturabilirim?

Bir demo kaydırıcısını içe aktarmak harikadır, ancak size kendi kaydırıcınızı nasıl yapabileceğinizi göstermek istiyorum. Tam Genişlik örnek kaydırıcısının ilk slaydını nasıl oluşturduğumu size göstereceğim.

Tam Genişlik Örnek Kaydırıcısı

Önce panoda Yeni Kaydırıcı seçeneğini seçiyorum ve ardından bir açılır pencerede tam genişlik modunu seçiyorum.

Kaydırıcı Oluştur

Kaydırıcı boyutunu 1200x600px olarak ayarladım ve ardından kaydırıcımı oluşturdum.

Bundan sonra, doğrusal gradyan arka plan rengine sahip boş bir slayt ekliyorum, bu yüzden Slayt ayarları → arka plan sekmesine ayarladım.

Kaydırıcıya arka plan rengi ekleyin

Slaytı oluşturmak için 2 farklı düzenleme modu kullanacağım. Bunlardan biri, bir sayfa oluşturucu gibi çalışan İçerik modudur ve slaytlarınızı hızlı bir şekilde oluşturabilirsiniz ve harika bir duyarlı davranışa sahiptir. Diğer düzenleme modu, katmanlarınızı herhangi bir yere sürükleyebileceğiniz Kanvas modudur , ancak konumlandırma ve duyarlılığa dikkat etmeniz gerekir.

Orijinal kaydırıcıda içeriğin solda olduğunu görebilirsiniz: başlık, metin ve 2 düğme ve sağ tarafta bir dizüstü bilgisayar resmi ve bu resimde bir YouTube video katmanı var. Bu görüntü ve video tuval modunda ayarlanacaktır çünkü bu modda bir katmanı başka bir katmanın üstüne veya altına koyabilirsiniz.

İçeriğe bir maksimum genişlik ayarladım çünkü satırda tam genişlikte bir metin istemiyorum ve sağ taraftaki içeriğe ihtiyacım yok - video orada olacak. Bu yüzden onu sola konumlandıracağım. Ardından Başlık, metin katmanı ve düğmeleri içeriğe bırakıyorum. Diğer taraflarda olduğu gibi biraz daha sol dolgu koydum ve katmanlar arasında çok az boşluk bıraktım.

Bundan sonra katman ayarlarında Tasarım sekmesine gidiyorum ve yazı tipinin rengini ve yazı tipi ailesini de ayarlıyorum. İndir düğmesine bir indirme bağlantısı veriyorum ve bir vurgulu efekti ayarladım.

Katman Ayarları Tasarımı

Kendi katmanınızı tasarlamak için pek çok seçenek vardır ve onu duyarlı hale de getirebilirsiniz, örneğin dolguyu “em” değeriyle ayarlayabilirsiniz, bu nedenle mobil cihazlarda bu ayarlar da iyi olacaktır.

Artık içerik hazır.

Kaydırıcı Ayarları İçeriği

Bitirmem gereken sadece 2 adım var: Laptop görüntüsünü ve YouTube video katmanını Canvas modunda slayda yerleştiriyorum. Sadece sağ tarafa sürükleyip ayarlıyorum.

Bir Görüntü Katmanı Ekle

Bu laptop + video kombinasyonunun mobil cihazlarda görünmesi o kadar önemli olmadığını düşünüyorum, bu yüzden mobil görünümü kapatıyorum.

Şimdi duyarlı görünümlerde kontrol ediyorum ve Başlık ve metin katmanının istediğimden daha büyük olduğunu görebiliyorum, bu yüzden yazı tipi boyutu ölçekleyici ile buna daha düşük bir değer ayarladım.

Tablette Yazı Tipi Boyutu Ölçekleme

Şimdi ilk slaytla hazırım. Kaydırıcım için daha fazla slayt kullanmak istersem, bu kaydırıcıyı çoğaltıp videoyu veya resmi değiştirip metni değiştirmem yeterli, çünkü yapı zaten yapıldı, bu yüzden ilk baştan başlamam gerekmiyor adım.

Ana sayfama canlı yayın kaydırıcısını nasıl yapabilirim?

Gönderinizi vurgulamak istiyorsanız, gönderinizden en önemli bilgileri içeren bir kaydırma çubuğu yapmak iyi bir fikirdir: örneğin başlık, gönderi tarihi ve ziyaretçilerinizin dikkatini çekebileceğiniz ve bunları oluşturabileceğiniz bir resim. oku onu.

Smart Slider 3 ile bir gönderiden dinamik değişiklik kaydırıcısı yapabilirsiniz, böylece web siteniz yaşayabilir, çünkü yeni bir gönderi paylaşırsanız kaydırıcı otomatik olarak değişir.

Nasıl ayarlayabileceğinizi size bir örnek göstereceğim.

Tam genişlikte WordPress Post Slider şablonunu içe aktardıktan sonra, yeni bir dinamik slayt ekleyeceğim, burada Post by Filter seçeneğini seçeceğim.

Dinamik Gönderi Kaydırıcısı Oluştur

Bir kategori seçiyorum ve bunu Gönderi tarihine göre sıralıyorum. 3 slayt ayarladım, böylece seçilen kategorideki kaydırıcımda son 3 Gönderi görünecek.

Jeneratör Ayarları

Sonra kaydediyorum ve gönderi kaydırıcımı özelleştirebilirim.

Varsayılan olarak, yalnızca öne çıkan görsele sahip Başlık görünür. Ama ihtiyacım olan bu değil, ithal ettiğim örnek şablonu kullanmak istiyorum. 3 adımda yapabilirsiniz:

1. Adım: Örnek slaydı kopyalayın

Slaytı Kopyala

Adım 2 : Dinamik slayda yapıştırın

Slayt Yapıştır

Adım 3 : Arka plan resmini öne çıkan resimle değiştirin, dinamik olarak değişecektir.

Arka Plan Değişkeni

Ve dinamik slaytınız için temayı ve arka planı elde edersiniz:

Dinamik Arka Plan

Benzer şekilde, katman ayarlarında katmanlar için dinamik bir değişken ayarlayabilirsiniz. Böylece başlık, tarih, içerik gibi birçok değişken ekleyebilir veya gönderiye bağlantı verebilirsiniz.

Başlık Değişkeni

Bu değişkenleri ayarlayabilirsiniz, örneğin dinamik metin katmanının içeriğimin yalnızca 100 karakterini göstermesini ayarladım.

Değişken Ekle

Dinamik gönderi kaydırıcınızı yaptıktan sonra, onu OceanWP temanıza eklemeniz gerekir.

Kullanıma hazır bir Kaydırıcıyı nasıl içe aktarabilirim?

Smart Slider 3'ü etkinleştirdikten sonra Smart Slider 3 menüsüne gidebilirsiniz ve orada gösterge tablosunu göreceksiniz. Burada Yeni Kaydırıcı ekleyebilir veya Şablon Kitaplığından bir şablon seçebilirsiniz. Hızlı bir kaydırıcı oluşturmak istiyorsanız, en kolay yol bir demo Slider'ı içe aktarmaktır.

Akıllı Kaydırıcı 3 Panosu

Smart Slider 3, sayfanıza kolayca ekleyebileceğiniz ücretsiz demo kaydırıcılara sahiptir.

Şablon kitaplığında kullanmak istediğiniz kaydırıcıyı seçebilir, İçe Aktar düğmesine tıklamanız yeterlidir; tema panonuza indirilir ve özelleştirebilirsiniz.

Şablon Kitaplığından Kaydırıcıyı İçe Aktar

Demo slaytları kullanma

Yeni bir kaydırıcı ekledikten veya şablonlardan içe aktardıktan sonra kaydırıcınıza daha fazla slayt ekleyebilirsiniz. Slayt Ekle düğmesine tıklamanız yeterlidir.

Bir resim, video veya boş kaydırıcı yapmak için birçok seçenek vardır ve Gönderi ve Dinamik kaydırıcıları da ekleyebilir veya Statik Yerleşimi seçebilirsiniz, bu da her zaman kaydırıcınızın ve slaytlarınızın üzerinde olacağı anlamına gelir ve olmaz' t uzak durun. Örneğin, navigasyon yapmak için iyi bir yoldur.

Slayt Kitaplığı

Kaydırıcınızda demo slaytları da kullanabilirsiniz, özelleştirebileceğiniz birçok hazırlanmış şablon vardır. Kitaplık seçeneğine tıklayın ve kullanacağınız şablonu seçin.

Slayt Kitaplığından İçe Aktar

Koyu veya açık Cilt arasında geçiş yapabilir ve kategorilerden de seçim yapabilirsiniz. Slaydınızı özelleştirdikten sonra her şeyi, başlığı, metni, katmanı ve arka planı da değiştirebilirsiniz.

Kaydırıcımı OceanWP Temama nasıl ekleyebilirim?

OceanWP Temanıza Smart Slider 3'ü eklemek çok basittir:

Kaydırıcının kısa kodunu kullanabilir ve kolayca kopyalayıp bir gönderiye veya sayfaya yapıştırabilirsiniz.

Kısa Kodlu Smart Slider 3'ü takın

Veya OceanWP Ayarlarındaki OceanWP Extra eklentisi ile kaydırıcınızı üst çubuk, başlık, başlık veya alt bilgiden önce/sonra yerleştirebilirsiniz.

Ve başka bir seçenek daha var, Smart Slider 3 widget'ını kullanarak Elementor veya diğer sayfa oluşturucularla özelleştirebilirsiniz.

Smart Slider 3 ile özel başlık nasıl yapılır?

Özel bir başlık oluşturarak, en kolay yol olduğunu düşündüğüm bir sayfa oluşturucu kullanabilirsiniz.

Tema Paneli → Kitaplığım sekmesine gidin ve ardından Yeni Ekle 'yi tıklayın. (Tema Paneli için Ocean Extra eklentisine ihtiyacınız var, bu yüzden önerilen bu eklentiyi eklemeli ve etkinleştirmelisiniz.) Elementor sayfa oluşturucu kullanıyorsanız, Post Nitelikleri'nde Elementor Canvas şablonunu seçin ve bundan sonra kaydırıcınızı temanıza ekleyebilirsiniz.

Elementor ile Kaydırıcı Ekle

Ayarlara hazır olduğunuzda, Görünüm → Özelleştir menüsü → Başlık → Genel seçeneğine gidin ve Özel Başlığınızı seçin. Ve şimdi kendi özel başlığınız var.

Sayfa oluşturucu olmadan, Kısa kod kullanarak Tema Panelinde de bir Şablon oluşturabilirsiniz.

Özel teklif

Smart Slider 3'ü OceanWP temalı bir WordPress web sitesine yüklemek, web siteniz için özel içerik oluşturmak için bir dizi güçlü araca erişmenizi sağlar. Artık, ödeme sırasında SMARTSLIDEROCEANWP30 kuponunu kullanırsanız Smart Slider 3 Pro'yu satın aldığınızda %30 indirim elde edebilirsiniz.

Teklif özeldir ve kupon kodu yalnızca sınırlı bir süre için geçerlidir. 10 Temmuz 2018'de başlıyor ve 17 Temmuz 2018'de sona eriyor, bu nedenle Smart Slider 3 Pro kopyanızı hızlıca alın!

Son düşünceler

Kaydırıcılar çeşitli şekillerde kullanılabilir, ne almak istediğinize karar vermelisiniz. Ve hakkında yazmadığım birçok fonksiyon var. Pro sürümünde, animasyonlar, yeni katmanlar, paralaks efektleri, şekil bölücü efektleri ve web sitenizi canlı hale getirebileceğiniz Facebook veya Instagram gibi birçok dinamik oluşturucu nedeniyle kaydırıcı yapmak daha heyecan verici.