Ana İçeriğe Geç

WordPress'te Slider Revolution ile slayt gösterisi oluşturma

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 701.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Şimdi ciddi şeylere başlayabiliriz. Kaymak oluşturulması Slider Devrimi ilk başta oldukça sıkıcı olabilir. Yataklarınızı kaybedeceksiniz, çünkü bunun veya o elementin nerede olduğunu bilmek isteyeceksiniz.

Alışkanlık yaparak pratik yaparak ve bu dersi okuyarak Slider Revolution'dan kurtulacaksınız.

Önceki eğitimlerimiz sırasında şunları keşfettik:

Ve şimdi kaydırıcımızı kurduğumuza göre, slaytlar "Of" kaydırıcı '.

"Slaytlar" düzenleyicisine nasıl başlanır?

Prensip olarak, bir sürgü yapılandırmalarını kaydettikten sonra, editörünü tanıtan yeni bir arayüze slaytlar '.

yazı sürgü devrim-kaydırma

En üstte, "sürgü veya slayt" listesine, sürgü parametrelerine ve sürgü önizlemesinin diğerlerine dönmesini sağlayan araç çubuğunun farkına varacaksınız.

Ayrıca bizim keşfetmek Blog yayınlarınızı derecelendirmenize izin veren 10 WordPress eklentisi

Devrim-kaydırıcı çubuğu doutil-baskısında-of-slayt

En altta, küresel katmanları, farklı "slaytları" ve yeni bir ekleme düğmesi "görmemize olanak tanıyan yeni bir bölümümüz var" slayt '.

yaratılış-of-slayt düğmeli-kaymak-devrim

Bir slaydın düğmesinin üzerine geldiğinizde, yeni seçeneklerin görüntülendiğini fark edeceksiniz. Bu seçenekler oldukça açık ve anlaşılması kolaydır (kopyalayın, daha sonra yeniden kullanmak ve slaydı silmek için şablona ekleyin.).

seçenekleri oluşturma slayt devrim kaydırıcı

Slayt ekle düğmesinin üzerine geldiğinizde, boş bir slayt eklemenizi, birden fazla slayt eklemenizi, bir şablondan bir slayt eklemenizi sağlayan diğer seçenekleri fark edeceksiniz (model).

yaratılış-of-slayt-seçenek-devrim-kaymak

Şu anda, 1 slaytındasınız, bu nedenle slayt listesinde vurgulanıyor. Yeni bir slayt oluşturursanız ilk slayt yerine vurgulanır.

İkinci kayar oluşturma-dun-kaydırma-kaydırma-devrim

Bu seviyedeki Slider Revolution gerçek bir gösterge panosudur. Size her şeyi açıklarsam, çok fazla anlamazsınız, bu yüzden kafa karıştırıcı olabilecek ve gerekli olmayan özelliklerden bahsetmekten kaçınacağım.

Hakkındaki makalemizi okuyun Blogunuz için 6 WordPress resim sıkıştırma eklentisi

Bir slayt seçtiğinizde, aşağıdaki bölümde düzenlemeye başlayabilirsiniz. Bu bölüm, çeşitli özelliklere erişmenizi sağlayan birkaç sekmeden (7) oluşmaktadır.

Bir sahneye arka plan resmi nasıl eklenir

İlk yapmak istediğiniz ilk şey, slaytımıza bir arka plan eklemek. Burada şu seçeneklerden birini seçebilirsiniz: Bir arka plan resmi (medya kitaplığınızdan), bir resmi işaret eden harici bir URL, WordPress teması tarafından önerilen rengi kullanacak şeffaf bir arka plan, sabit bir renk, bir Youtube videosu, Vimeo veya HTML5. Bir arka plan seçeceğiz " görüntü '.

ARKA PLAN görüntü örneği

Web üzerinde birçok ücretsiz resim bulabilirsiniz. Sadece Google’da bir arama yapın. 

Görüntü-geri planı devrim-kaydırıcı

Bir görüntü eklediğinizde, bu hemen slayt önizlemesine ve "sahneye" uygulanır.

Szene-devrim-kaymak

Sahnede bir öğe nasıl eklenir

Şimdi iyi dekore edilmiş bir sahnemiz olduğu için, bir element ekleyeceğiz. Sahneye eklediğiniz her öğe bir katman veya katman olarak kabul edilir. Bu katman özelliği bana inanmana yardımcı olacak.

Sahneye bir öğe eklemek için, üzerine gelin Katman ekle '.

fly-add-katman-kaymak-devrim

Metin / HTML, resimler, ses, video, düğme, şekil, nesne ve bir öğeyi içe aktarma dahil olmak üzere birkaç farklı öğe ekleyebileceğinizi fark edeceksiniz.

Küçük köpek yavrusu Snoopy'nin şeffaf görüntüsünü ekleyerek başlayacağız.

komik-Snoopy-png

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Sonra bu görüntüyü sahneye ekleyin, şunun gibi bir şeye sahip olacaksınız:

Örnek-kaydırma-kaydırma-devrim

Görüntünün dört köşesinde küçük kareler olduğunu fark edeceksiniz. Bu kareler görüntüleri yeniden boyutlandırmamıza izin veriyor, çünkü bu durumda Snoopy çok fazla yer kaplıyor.

Yeniden boyutlandırma "tarafından yapılır sürüklemek ". Oranları korurken yeniden boyutlandırmak için, " Mayıs Yeniden boyutlandırma sırasında klavyenizden.

Ayrıca bakınız Sizi daha iyi bir Blogger yapacak 10 WordPress eklentileri

Yeni temsili-meraklı devrim-kaydırma

Şimdi Snoopy böyle görünüyor, daha uygun. Ayrıca, her görüntünün sağ üst köşesinde bulunan göstergeyi kullanarak aşağıdaki gibi bir görüntüyü çevirebilirsiniz:

Dönme dimage devrim-kaydırma

Öğeleri yardım ızgarası ile nasıl konumlandırabilirim?

Yardım ızgarası, elemanları daha iyi yerleştirmek için yardımcı olan değerli bir unsurdur. Yardım ızgarasını sahnenin sol alt köşesinde aktif hale getirebilirsiniz.

tost daide-devrim-kaymak

Bu ızgara, farklı boyutlarda karolara sahiptir, boyut küçüldükçe, elemanın yerleştirilmesinde daha hassas olursunuz.

Yatırım-of-pictures

animasyon eklemek için

Slider Revolution'da 3 tür animasyon vardır: giriş animasyonları, (sahnedeki öğenin varlığı) Ve son animasyonlar.

Ayrıca bakınız Blogunuz için 6 WordPress resim sıkıştırma eklentisi

Bir elemana animasyon eklemek için önce onu tıklatarak seçmeniz gerekir (Bir eleman seçildiğinde, yeniden boyutlandırılabilir köşeleri olan noktalı bir çizgi ile çerçevelenir.).

Yani Snoopy'ye tıklayın, sayfaya gidin ve sekmeye tıklayın « Animasyon '.

animasyonlu-kaymak-devrim

Önceki resimde, mavi renkli giriş animasyonlarına ve kırmızı renkli çıktı animasyonlarına sahibim.

Bir animasyonu değiştirmek için, koşan adam simgesinin ardından açılır listeye tıklayın.

icon-animasyon-kaymak-devrim

Daha sonra emrinizde çok çeşitli animasyonlar var. Bir elemanın girişi için tanımlamak istediğiniz animasyonu seçmenizi size bırakıyorum. Benim açımdan seçtim " easeOutElastic », Bu sonucu almak için:

Animasyon-antre-Snoopy

Bizim için burada Blogunuzun altbilgisini artırmak için 4 WordPress eklentileri

Sol tarafta, animasyonun süresini ve bırakmanız gereken animasyon modunu belirleyebilirsiniz. " hiçbir bölünmüş Çünkü diğer seçenekler resimlere değil sadece metne uygulanır.

Yapılandırma kumul-animasyonlu-kaymak-devrim

Lire aussi Makale ve WordPress sayfalarının başlıkları nasıl gizlenir

Şimdi, Snoopy'yi yüzmek istiyorum, bunun için gitmek " döngü Ve aşağı açılan seçeneğinde "seçin dalga ". Şimdi Snoopy yüzer:

snoppy kayan

Öğelerin görünürlüğünü nasıl yapılandırabilirim?

Snoopy'm yüzüyor, ancak cep telefonunda görünmesini istemiyorum. Öyleyse "üzerine tıkla. görünürlük »Ve Akıllı Telefon simgesinin devre dışı bırakıldığından emin olun:

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

görünürlüğü elemanlar devrim-kaydırma

Elementlerin davranışını ayarlama

Kaydırıcının yüklenmesini optimize etmek için görüntülerin yüklenmesini geciktirmek isteyebilirsiniz. Bu sekmede yapılır " davranış Seçeneği ile " tembel Yükleme ". Öğelerin duyarlılığını bile zorlayabilirsiniz.

davranış elemanı devrim-kaydırma

Bir öğede özel tetikleyiciler nasıl oluşturulur

Eylemler, tetikleyicileri belirli eylemlerle ilişkilendirmenizi sağlar. Bir tetikleyici eklemek için sekmeyi tıklayın İşlemler »Ardından« + »düğmesine basın.

add-a-deklanşöre

3 tetikleyici türleri vardır:

  • Tıklama fareyi tıklayarak eylemidir
  • Öğe üzerindeki fare girişi
  • Elemanın üstündeki fare çıkışı

Eylemlerin listesi oldukça uzun. Örneğin, Snoopy’yi tıklayan bir kullanıcıyı eylemi seçerek başka bir sayfaya yönlendirebilirsiniz " tek Bağlantı Hangi yeni seçenekler getirecek.

Ayrıca bizim keşfetmek Rezervasyon ve Rezervasyondan 10 premium WordPress eklentisi

Yönetim-of-tetikleyiciler-devrim-kaydırıcı

Slider Revolution TimeLine nasıl kullanılır

Slider Revolution, alt kısımda bir zaman yönetimi arayüzü sunar. Bu arayüz, bir öğenin animasyonunun nerede başladığını ve nerede bittiğini görmenizi sağlar.

başlayan-ve-son kumul-üzerine film kaydırıcı-devrim

Önceki resimde, iki mavi ok göreceksiniz. Soldaki ilk, bir elemanın giriş animasyonunun başlangıcını, ikincisi ise giriş animasyonunun sonunu gösterir. Koyu kırmızı renk, sahnedeki öğenin ömrünü gösterir.

Lire aussi WordPress blog bir geri sayım nasıl eklenir?

Sürenin diğer ucuna da benzer bir son bulacaksın (giriş animasyonu, yaşam süresi ve bitiş animasyonu).

İle " zaman çizelgesi Hangi öğenin daha önce görüntülendiğini ve hangi öğenin önce kaydığını kontrol edebilirsiniz. İyi bir animasyon yapmak için ustalaşmanız gereken çok pratik bir araçtır.

Zaman çizelgesinde slaytı önizlemek için etkinleştirebileceğiniz bir oynatıcı da vardır.

Animasyon-zaman çizelgesi devrim-kaymak

O zamana kadar size bir slayt yaratmanın temellerini verdim. Şimdi kaydırıcınızı kaydedin ve önizlemeye başlayın.

Yedekleme-ve-previsulisation

Hepsi bu ders için, daha sonra bir makalede kaydırıcı gösterimi ve bazı gelişmiş işlemler hakkında konuşacağız.

Ayrıca bazı temaları ve premium WordPress eklentilerini keşfedin  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Disk Sesi

Disk Audio, sadece bir düğmeye basarak doğrudan bir ses oynatıcınızı web sitenizde görüntülemenize yardımcı olacak başka bir WordPress eklentisidir. Müzik çaların düzeni tamamen uyumludur, bu nedenle mobil kullanıcılar özelliklerinden herhangi bir sorun yaşamadan keyif alacaklardır.

Disk müzik çalar premium wordpress eklentileri ses oynatıcı ekler

Ek olarak, renk şemaları, görünümler, arka plan resimleri ve opaklık dahil olmak üzere birçok özelleştirme seçeneği sunar. Klavye ve onu kontrol etmek için çeşitli seçenekler vardır ayrıca oynatma listenizi ayarlanabilir bir kaydırma çubuğu ile görüntülemenize olanak tanır.

Ayrıca Oku: 10 WordPress eklentileri blogunuzda araştırma artırmak için

Ayrıca, kullanıcılara web sitenizde çalınan parçayı satın alabilecekleri yerleri göstermek için müzik çalara indirme bağlantıları ekleyebileceksiniz. 

Indir | gösteri | Web hosting

2. Olay Rezervasyon Pro

Bu, etkinlik alanlarında hizmetlerini sunan herhangi bir web sitesindeki rezervasyonların yönetimine adanmış ve özelleştirmesi kolay olan% 100 duyarlı bir başka WordPress eklentisidir.

Etkinlik rezervasyon uzmanı

Başlıca özellikleri: metin, renk, kenarlık ve diğerleri için özelleştirme, PayPal desteği, kupon kodları ve kupon yönetimi, Google Haritalare-posta yönetiminin desteklenmesi,  kısa kodların desteğisezgisel kontrol paneli, kolay olay oluşturma, görünüm üzerinde tam kontrol vb.

Indir | gösteri | Web hosting 

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

3. Sosyal Paylaşım ve Locker Pro

Social Share & Locker Pro uzantısı, web sitenizin sosyal ağlarda daha görünür olmasına yardımcı olmak için tasarlanmıştır. Yalnızca birkaç tıklama ile sosyal simgelerinizin konumunu belirleyebilir veya sizin tarafınızdan sunulan sosyal ağlardan birinde paylaşım gerektirerek içeriğinizi kilitleyebilirsiniz.

Sosyal paylaşım dolabı pro wordpress eklentisi

10'in önceden tanımlanmış temalarına sahipsiniz ve bu en yaygın dilekleri kapsamalıdır. Tüm temaları Retina ve çalışma harikaları. 

30 şeyler onların yayınlanmasından sonra blogunuza yazılarda yapmak Bu makaleye danışarak onları keşfedin.

Ayrıca Social Share & Locker Pro ile sosyal ağların tam adını veya yalnızca simgeyi görüntüleyebileceksiniz. Tasarımınıza, mevcut alana veya isteklerinize bağlı olacaktır.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Burada ! Bu rehber için bu kadar. Bu eğitimin size bir WordPress blogunda veya web sitesinde Slider Revolution ile bir slayt gösterisi oluşturmanın temellerini verdiğini umuyoruz. Herhangi bir sorunuz, öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

... 

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse1
cıvıltı
Enregistrer3