Bir video kılavuzu nasıl yeniden oluşturulur Divi ile ET’yi tıklayın
Web sitenizdeki video önizlemesini paylaşmak etkileşimi artırabilir ve ziyaretçilerin ürünlerinizi ve/veya hizmetlerinizi daha iyi ve daha hızlı anlamalarına yardımcı olabilir. Şimdi, zarif temalar web sitesinde, bu yaklaşımı kendimiz için aldık ve insanların en popüler özelliklerimizden bazılarında gezinmesini sağlayan doğrudan bir tıklama video kılavuzu tasarımı oluşturduk. Bu tasarımı Divi’de yeniden yaptık ve bugün size baştan nasıl geri döneceğinizi göstereceğiz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanalımıza abone olun
Yaratmaya başlayalım! Üzerinde çalıştığınız sayfaya yeni bir düzenli bölüm ekleyerek yeni bir düzenli bölüm ekleyin.
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve aşağıdaki boyut ayarlarını uygulayın: Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Genişlik: 85VW (masaüstü),% 90 (tablet ve cep telefonu)
Maksimum genişlik:% 100
Sütun 1 Ayarları Sonraki Sütun 1 ayarlarını açın. Alan ayarlarını açın ve masaüstüne biraz dolgu ekleyin. Üst Dolgu: 5VW (masaüstü), 0VW (tablet ve cep telefonu)
CSS sınıfı Gelişmiş sekmesine taşındı ve CSS sınıfını ekledi. Daha sonra yazıda, tabletler ve hücresel üzerinde bir ızgara efekti oluşturmak için bu CSS sınıfını kullanacağız. CSS Sınıfı: Öğe Duyarlı Grid
Blurb modülünü Sütun 1’e ekleyin Başlık ekleyin, modül eklemeye başlayalım! Tıklanabilecek her öğe için bulanık modülü kullanacağız. İlkiyle başlayacağız ve kalan tıklama öğeleri için tekrar kullanacağız. Sütun 1’e yeni bir bulanıklık modülü ekleyin ve seçtiğiniz başlığı girin. Simgeyi seçin Bir sonraki simgeyi seçin. Varsayılan simge ayarları tasarıma geçer ve uygun simge ayarlarını değiştirin: Ikon Color: #E8E9EA
Simge Yerleştirme: Sol
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgeleri: 2VW (masaüstü), 4.5VW (tablet), 7VW (telefon)
Yüzerken simgenin rengini değiştirmek için simge ayarlarına gidin. Renk simgesi: #b0c8ff
Başlık Metin Ayarları Başlık Metin Ayarları’na geçin ve orada da bazı değişiklikler yapın. Yazı Tipi Başlık: Lato Ağır yazı tipi başlığı: kalın
Yazı tipi stili başlığı: büyük harf
Metin başlığı boyutu: 0.8VW (masaüstü), 1.7vw (tablet), 2.5vw (telefon)
Yüksek çizgi başlığı: 2VW (masaüstü), 4.5vw (tablet), 7vw (telefon)
Varsayılan boşluklarımız, çeşitli ekran boyutlarında birkaç özel dolgu değeri kullanarak bir bulanıklık modülü oluşturacaktır.
Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon) Dolgu Alt: 0.5VW (Masaüstü), 1.5VW (Tablet ve Telefon)
Sol dolgu: 1.2vw (masaüstü ve tablet), 5VW (telefon)
Sağ dolgu: 1.2vw (masaüstü ve tablet), 5VW (telefon)
Aralık, vurgunun kenar boşluğu değerini değiştirerek vurgulamanın gelişim etkisini yönlendirmektir.
Sol kenar boşluğu: -0.5vw Sağ kenar boşluğu: -0.5vw
Sınırda birkaç yuvarlak açı da ekleyin.
Varsayılan kutunun gölgesi ve kutunun pürüzsüz bir gölgesi ile birlikte. Dikey Konum Gölge Kutusu: 10px Bulanık Güç Gölgesi Kutusu: 70px
Gölge Rengi: RGBA (0.0,0,0.11)
Yüzerken kutunun gölgesinin rengini değiştirmek için kutunun gölgesini yönlendirin.
Gölge Renk: RGBA (103.151.255.0.22) ID & Class CSS Son fakat en azından, Blurb modülünden Gelişmiş sekmesini açın ve CSS kimliğini ve sınıfını ekleyin.
Kimlik CSS: Video-Walkthrough-Item-1 CSS Sınıfı: Video-öğe-Komsor
Blurb Modül Klonunu Üç Kez İlk Blurb modülünü tamamladıktan sonra üç kez klonlayabilirsiniz.
İçeriği Değiştir Her yinelenen bulanıklık modülünün içeriğini değiştirin. Tüm kimlik CSS modülleri, ID CSS ile birlikte bulanık olarak değiştirin.
3) Form bölücü: Video-walkthrough-Item-3
4) Kütle Düzenleme: Video-Walkthrough-Item-4
Sütun 1’i Sil Sütunu 3 Silme İlk sütunu tamamladıktan sonra, satır ayarlarını açabilir ve üçüncü sütunu silebilirsiniz. Sütun 1 klonu (bulanık modülü içeren) ilk sütun klonunun altına yerleştirin ve yinelenen sütunu yerleştirin. alt.
Sütun Yapısını Değiştirin Bu öğreticinin başında seçilecek sütun yapısını tekrar değiştirin. Blurb Modülünün Tüm İçeriğini Değiştir Sütun 3 Sütun 3’teki her bir kopya için bulanıklık modülünün başlığını değiştirin. ID CSS ile birlikte tüm kimlik CSS Modülü Blurb Sütun 3’ü değiştirin. 5) Düzen Kütüphanesi: Video-Walkthrough-Item-5 6) Dönüşüm: Video-Walkthrough-Item-6 7) Hover Devletleri: Video-Walkthrough-Item-7
8) Bul ve Değiştir: Video-Walkthrough-Item-8
Metin modülünü sütun 2’ye ekleyin, Boş İçerik Kutusunun farklı bir video önizlemesi eklemeye başlamasına izin verin! Ona yaklaşmanın iki yolu vardır; Bir video modülü veya metin modülü kullanma. Video modülü, ziyaretçilerin baskıyı gerektirir. Video arka planı olan bir metin modülü kullanarak, videoları otomatik ama sessizce oynatın. Bu öğretici için metin modülünü kullanacağız, ancak bunun yerine video modülünü kullanmaktan çekinmeyin. Metin modülü içerik kutusunun boş kaldığından emin olun.
Arka Plan Video Açık arka plan ayarları ve istediğiniz videoları yükleyin.
Görülmediğinde video molası: evet Yapıştırıcı tasarım sekmesine taşındı ve genişliğe ‘%100’ ekledi. Genişlik:% 100
Bir sonraki mesafe, çeşitli ekran boyutlarında bazı üst ve alt özel dolgu değerleri ekleyerek videonun arka planının görüntülenmesine izin vereceğiz. Not: Eklediğiniz değerin video boyut koleksiyonunuza ayarlanması gerekir. Üst Dolgu: 15VW (masaüstü), 24VW (tablet), 26VW (Telefon) Dolgu Aşağıda: 15VW (masaüstü), 24VW (tablet), 26VW (Telefon)
Her köşeye ’10px’ ekleyerek sınır devam edin. Pürüzsüz bir kutunun gölgesiyle birlikte kutunun gölgesi.
Bulanık Güç Gölgesi Kutusu: 30px
Kutunun gölgesinin dağılımının gücü: -5px Gölge Rengi: RGBA (0.0,0,0.11) Son CSS kimliği, CSS kimliği ekleyin.
Kimlik CSS: Video Kılavuzu-1
Klon metin modülü 7 kez metin modülünü tamamladıktan sonra yedi kez klonlayabilirsiniz (her bulanıklık modülü için bir tane).
Tüm Arka Plan Video Modüllerini Değiştirin Yinelenen metin Her bir kopya için farklı video arka planları yükleyin. Tüm kimlik CSS yinelenen metin modüllerini değiştirin ve tüm yinelenen metin modüllerine CSS sınıfları ekleyin, aynı zamanda kimlik CSS’yi de değiştirin. CSS kimliğinin sonunda aynı sayıyı kullanarak her metin modülünü sağ bulanıklık modülüne bağladığınızdan emin olun. Ayrıca, CSS sınıfını kullanarak orijinal metin modülüne ek olarak her metin modülünü de gizliyoruz.
Metin Modülü 1: Video Kılavuzu-1 Metin Modülü 2: Video-2 Kılavuzu Metin Modülü 3: Video Kılavuzu-3 Metin Modülü 4: Video Kılavuzu-4
Metin Modülü 5: Video Kılavuzu-5
Metin Modülü 6: Video Kılavuzu-6
Metin Modülü 7: Video Kılavuzu-7
Metin Modülü 8: Video Kılavuzu-8
CSS Sınıfı: Video ilk değil
Kod modülünü #1’i Sütun 1’e ekleyin İkinci satırı bitirdikten sonra kodu eklemeye başlama zamanı. İşleyen bir tıklama işlevi oluşturmak için bazı CSS ve JQuery kodlarını kullanacağız. Kodu iki ayrı kod modülüne yerleştireceğiz. Sütun 1’e ilk kod modülünü ekleyerek başlayın.
CSS Kod Sınıfına girin Aşağıdaki CSS kod satırını ekleyin:
.Video-ilk değil {
Görüntü yok; } .Video-im-Cursor {
İmleç: işaretçi;}
@Media All and (Max-Width: 980px) {
.Item-Duyarlama-Grid {
Ekran: ızgara;
Izgara Testi Kolonları:% 50% 50;
Izgara sütun boşluğu: 2VW;
}
}
.Video-walkthrough-aktif {
Arka Plan rengi: #fff;
Marj -sağ: -0.5vw;
Marj -sol: -0.5vw;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22)! Önemli;
}
.Video-walkthrough-aktif .et-pb-icon {
Renk: #B0C8FF! Önemli;
}
$ Video.addclass (‘Play-Video’);
$ (“. Play-Video .et_pb_section_video_bg video”). Tetikleyici (‘Play’);
$ Video.removeclass (‘Play-Video’);
$ (‘[İd*= “video-walkthrough-öğe”]’).
$ (bu).
});
});
Bu adımı geçtikten sonra sayfanızı kaydedebilir ve görsel oluşturucudan çıkabilirsiniz!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanalımıza abone olun
Yaratmaya başlayalım! Üzerinde çalıştığınız sayfaya yeni bir düzenli bölüm ekleyerek yeni bir düzenli bölüm ekleyin.
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve aşağıdaki boyut ayarlarını uygulayın: Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Genişlik: 85VW (masaüstü),% 90 (tablet ve cep telefonu)
Maksimum genişlik:% 100
Sütun 1 Ayarları Sonraki Sütun 1 ayarlarını açın. Alan ayarlarını açın ve masaüstüne biraz dolgu ekleyin. Üst Dolgu: 5VW (masaüstü), 0VW (tablet ve cep telefonu)
CSS sınıfı Gelişmiş sekmesine taşındı ve CSS sınıfını ekledi. Daha sonra yazıda, tabletler ve hücresel üzerinde bir ızgara efekti oluşturmak için bu CSS sınıfını kullanacağız. CSS Sınıfı: Öğe Duyarlı Grid
Blurb modülünü Sütun 1’e ekleyin Başlık ekleyin, modül eklemeye başlayalım! Tıklanabilecek her öğe için bulanık modülü kullanacağız. İlkiyle başlayacağız ve kalan tıklama öğeleri için tekrar kullanacağız. Sütun 1’e yeni bir bulanıklık modülü ekleyin ve seçtiğiniz başlığı girin. Simgeyi seçin Bir sonraki simgeyi seçin. Varsayılan simge ayarları tasarıma geçer ve uygun simge ayarlarını değiştirin: Ikon Color: #E8E9EA
Simge Yerleştirme: Sol
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgeleri: 2VW (masaüstü), 4.5VW (tablet), 7VW (telefon)
Yüzerken simgenin rengini değiştirmek için simge ayarlarına gidin. Renk simgesi: #b0c8ff
Başlık Metin Ayarları Başlık Metin Ayarları’na geçin ve orada da bazı değişiklikler yapın. Yazı Tipi Başlık: Lato Ağır yazı tipi başlığı: kalın
Yazı tipi stili başlığı: büyük harf
Metin başlığı boyutu: 0.8VW (masaüstü), 1.7vw (tablet), 2.5vw (telefon)
Yüksek çizgi başlığı: 2VW (masaüstü), 4.5vw (tablet), 7vw (telefon)
Varsayılan boşluklarımız, çeşitli ekran boyutlarında birkaç özel dolgu değeri kullanarak bir bulanıklık modülü oluşturacaktır.
Üst Dolgu: 1VW (masaüstü), 2VW (tablet), 3VW (Telefon) Dolgu Alt: 0.5VW (Masaüstü), 1.5VW (Tablet ve Telefon)
Sol dolgu: 1.2vw (masaüstü ve tablet), 5VW (telefon)
Sağ dolgu: 1.2vw (masaüstü ve tablet), 5VW (telefon)
Aralık, vurgunun kenar boşluğu değerini değiştirerek vurgulamanın gelişim etkisini yönlendirmektir.
Sol kenar boşluğu: -0.5vw Sağ kenar boşluğu: -0.5vw
Sınırda birkaç yuvarlak açı da ekleyin.
Varsayılan kutunun gölgesi ve kutunun pürüzsüz bir gölgesi ile birlikte. Dikey Konum Gölge Kutusu: 10px Bulanık Güç Gölgesi Kutusu: 70px
Gölge Rengi: RGBA (0.0,0,0.11)
Yüzerken kutunun gölgesinin rengini değiştirmek için kutunun gölgesini yönlendirin.
Gölge Renk: RGBA (103.151.255.0.22) ID & Class CSS Son fakat en azından, Blurb modülünden Gelişmiş sekmesini açın ve CSS kimliğini ve sınıfını ekleyin.
Kimlik CSS: Video-Walkthrough-Item-1 CSS Sınıfı: Video-öğe-Komsor
Blurb Modül Klonunu Üç Kez İlk Blurb modülünü tamamladıktan sonra üç kez klonlayabilirsiniz.
İçeriği Değiştir Her yinelenen bulanıklık modülünün içeriğini değiştirin. Tüm kimlik CSS modülleri, ID CSS ile birlikte bulanık olarak değiştirin.
1) Görsel olarak uyan: Video-walkthrough-Item-1
2) Etki: Video-Walkthrough-Item-23) Form bölücü: Video-walkthrough-Item-3
4) Kütle Düzenleme: Video-Walkthrough-Item-4
Sütun 1’i Sil Sütunu 3 Silme İlk sütunu tamamladıktan sonra, satır ayarlarını açabilir ve üçüncü sütunu silebilirsiniz. Sütun 1 klonu (bulanık modülü içeren) ilk sütun klonunun altına yerleştirin ve yinelenen sütunu yerleştirin. alt.
Sütun Yapısını Değiştirin Bu öğreticinin başında seçilecek sütun yapısını tekrar değiştirin. Blurb Modülünün Tüm İçeriğini Değiştir Sütun 3 Sütun 3’teki her bir kopya için bulanıklık modülünün başlığını değiştirin. ID CSS ile birlikte tüm kimlik CSS Modülü Blurb Sütun 3’ü değiştirin. 5) Düzen Kütüphanesi: Video-Walkthrough-Item-5 6) Dönüşüm: Video-Walkthrough-Item-6 7) Hover Devletleri: Video-Walkthrough-Item-7
8) Bul ve Değiştir: Video-Walkthrough-Item-8
Metin modülünü sütun 2’ye ekleyin, Boş İçerik Kutusunun farklı bir video önizlemesi eklemeye başlamasına izin verin! Ona yaklaşmanın iki yolu vardır; Bir video modülü veya metin modülü kullanma. Video modülü, ziyaretçilerin baskıyı gerektirir. Video arka planı olan bir metin modülü kullanarak, videoları otomatik ama sessizce oynatın. Bu öğretici için metin modülünü kullanacağız, ancak bunun yerine video modülünü kullanmaktan çekinmeyin. Metin modülü içerik kutusunun boş kaldığından emin olun.
Arka Plan Video Açık arka plan ayarları ve istediğiniz videoları yükleyin.
Görülmediğinde video molası: evet Yapıştırıcı tasarım sekmesine taşındı ve genişliğe ‘%100’ ekledi. Genişlik:% 100
Bir sonraki mesafe, çeşitli ekran boyutlarında bazı üst ve alt özel dolgu değerleri ekleyerek videonun arka planının görüntülenmesine izin vereceğiz. Not: Eklediğiniz değerin video boyut koleksiyonunuza ayarlanması gerekir. Üst Dolgu: 15VW (masaüstü), 24VW (tablet), 26VW (Telefon) Dolgu Aşağıda: 15VW (masaüstü), 24VW (tablet), 26VW (Telefon)
Her köşeye ’10px’ ekleyerek sınır devam edin. Pürüzsüz bir kutunun gölgesiyle birlikte kutunun gölgesi.
Bulanık Güç Gölgesi Kutusu: 30px
Kutunun gölgesinin dağılımının gücü: -5px Gölge Rengi: RGBA (0.0,0,0.11) Son CSS kimliği, CSS kimliği ekleyin.
Kimlik CSS: Video Kılavuzu-1
Klon metin modülü 7 kez metin modülünü tamamladıktan sonra yedi kez klonlayabilirsiniz (her bulanıklık modülü için bir tane).
Tüm Arka Plan Video Modüllerini Değiştirin Yinelenen metin Her bir kopya için farklı video arka planları yükleyin. Tüm kimlik CSS yinelenen metin modüllerini değiştirin ve tüm yinelenen metin modüllerine CSS sınıfları ekleyin, aynı zamanda kimlik CSS’yi de değiştirin. CSS kimliğinin sonunda aynı sayıyı kullanarak her metin modülünü sağ bulanıklık modülüne bağladığınızdan emin olun. Ayrıca, CSS sınıfını kullanarak orijinal metin modülüne ek olarak her metin modülünü de gizliyoruz.
Metin Modülü 1: Video Kılavuzu-1 Metin Modülü 2: Video-2 Kılavuzu Metin Modülü 3: Video Kılavuzu-3 Metin Modülü 4: Video Kılavuzu-4
Metin Modülü 5: Video Kılavuzu-5
Metin Modülü 6: Video Kılavuzu-6
Metin Modülü 7: Video Kılavuzu-7
Metin Modülü 8: Video Kılavuzu-8
CSS Sınıfı: Video ilk değil
Kod modülünü #1’i Sütun 1’e ekleyin İkinci satırı bitirdikten sonra kodu eklemeye başlama zamanı. İşleyen bir tıklama işlevi oluşturmak için bazı CSS ve JQuery kodlarını kullanacağız. Kodu iki ayrı kod modülüne yerleştireceğiz. Sütun 1’e ilk kod modülünü ekleyerek başlayın.
CSS Kod Sınıfına girin Aşağıdaki CSS kod satırını ekleyin:
.Video-ilk değil {
Görüntü yok; } .Video-im-Cursor {
İmleç: işaretçi;}
@Media All and (Max-Width: 980px) {
.Item-Duyarlama-Grid {
Ekran: ızgara;
Izgara Testi Kolonları:% 50% 50;
Izgara sütun boşluğu: 2VW;
}
}
.Video-walkthrough-aktif {
Arka Plan rengi: #fff;
Marj -sağ: -0.5vw;
Marj -sol: -0.5vw;
Box-Shadow: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22)! Önemli;
}
.Video-walkthrough-aktif .et-pb-icon {
Renk: #B0C8FF! Önemli;
}
Üçüncü sütuna başka bir kod modülü ekleyerek Sütun 3’e Modül Kodu #2 ekleyin.
JQuery Kodu İşlevi Girin Aşağıdaki jQuery kodunu girin:
jQuery (işlev ($) {
$ (‘[İd*= “Video-walkthrough-öğe”]’). Click (function () {
var selector1 = $ (this) .at (‘id’). Değiştir (‘-item’, ”);
$ Video.addclass (‘Play-Video’);
$ (“. Play-Video .et_pb_section_video_bg video”). Tetikleyici (‘Play’);
$ Video.removeclass (‘Play-Video’);
$ (‘[İd*= “video-walkthrough-öğe”]’).
$ (bu).
});
});
Bu adımı geçtikten sonra sayfanızı kaydedebilir ve görsel oluşturucudan çıkabilirsiniz!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
