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 600.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" editörünün kontrolü nasıl alını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 Blogunuzdaki makaleleri değerlendirmenize izin veren 10 WordPress eklentileri

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

En altta, genel katmanları, farklı "slaytları" ve yeni bir düğme ekleme düğmesini görmemizi sağlayan yeni bir bölüm 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.

Sahnede 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 resim eklediğinizde, bu hemen slayt önizlemesinde ve "sahnede" 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

Aşağıdakiler de dahil olmak üzere birkaç farklı öğe ekleyebileceğinizi göreceksiniz: metin / HTML, resimler, ses, video, düğme, şekil, nesne ve bir öğeyi içe aktarma.

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

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]

komik-Snoopy-png

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 bu şekilde görünüyor, daha uygun. Her görüntünün sağ üst tarafındaki ışığı aşağıdaki gibi kullanarak da 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 canlandırma türleri vardır: giriş canlandırmaları, (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, çalışmakta olan kişinin simgesinin yanındaki 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 elde etmek 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üzüyor:

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 Akıllı telefon simgesinde, kapalı olduğundan emin olun:

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.

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]

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 Sonra "+" butonu.

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 altta bir zaman yönetimi arayüzü sunar. Bu arayüz, bir elementin 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.

Ek olarak, renk şemaları, görünümler, arka plan görüntüleri ve opaklık gibi 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ülemenizi sağlar.

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 başka bir WordPress 100% duyarlı eklentidir, özelleştirmesi kolay ve etkinlik alanlarında hizmet sunan herhangi bir web sitesinde rezervasyonları yönetmeye adanmış.

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. [Ücretsiz]

3. Sosyal Paylaşma ve Locker Pro

Social Share ve 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ıklamayla, sosyal simgelerinizin konumunu ayarlayabilir veya sizin tarafınızdan önerilen sosyal ağlardan birinde paylaşmayı gerektirerek içeriğinizi kilitleyebilirsiniz.

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.

Ek olarak, Social Share & Locker Pro ile sosyal ağların tam adını veya sadece simgesini görebilirsiniz. Tasarımınıza, kullanılabilir alanınıza veya isteklerinize bağlı olacaktır.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluştururken ve yönetirken size eşlik edecek diğer önerilen kaynakları keşfedin.

Sonuç

İşte bu kadar! Umarız bu rehber size bir WordPress blogunda veya web sitesinde Slider Revolution ile slayt gösterisi oluşturmanın temellerini vermiştir. 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.

Tereddüt etmeyin En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın.

...

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. 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üş
5 hisseleri
hisse2
cıvıltı
Enregistrer3