Tıkanabilen Atlıkarınca Modülü Divi Nasıl Yapılır
Bugünkü yazı, “Divi Kitchen” dan bir ev olan Divi Soup’tan Michelle Nunan tarafından sürekli yeni ve kullanışlı bir öğretici ve ecourse divi yaptı.
Güney Kore popüler bir web sitesi özelliğidir. Ekstra yer almadan daha fazla içerik göstermenize izin verirler ve web sitenize ziyaretçilerinizi içeriğinize daha fazla dahil olmaya teşvik edebilecek bir etkileşim unsuru da eklerler. İçeriğinizi karuselde görüntülemeye yardımcı olabilecek bir dizi harika eklenti var, ancak bu yazıda size yalnızca CSS ve JavaScript kullanarak tıklanabilecek karusel divi modülünü nasıl yapacağınızı göstereceğim.
Bu etki neredeyse tüm standart divi modülleri veya modül kombinasyonları ile kullanılabilir. Bu Güney Koreli’yi bir görüntü modülü kullanarak ve daha sonra biraz farklı bir süreç olarak bir blog modülü ile nasıl yapacağınızı göstereceğim. Oradan neredeyse tüm standart modüllerle kendi Güney Koreli’nizi nasıl yapabileceğinizi anlamalısınız. Güney Kore’yi bir blog modülü ile yaptıktan sonra almanız gereken budur Burada çeşitli divi oluşturucu modüllerini kullanarak efekti gösteren doğrudan demoyu görebilirsiniz. Haydi başlayalım. Yeni bir sayfa ekle Bir görüntü modülü ile atlıkarınca yaparak başlayacağız. Yeni bir sayfa ekleyin veya atlıkarınca eklemek istediğiniz sayfayı açın.
Yeni bir parça ekleyin, sayfanıza bir sütunla yeni bir standart parça ekleyin. Ardından bölüm ayarlarını açın ve Gelişmiş sekmesinde, CSS sınıf alanına DS-Carousel-bölüm sınıfını ekleyin. Parçaların ve satırların görünümünü değiştireceğimiz için, bu değişikliğin atlıkarınca uygulanmasını istiyoruz, bu nedenle kodumuzun sitemizdeki diğer öğeleri etkilemesini önlemek için özel sınıflar ekliyoruz. Ardından Bölümden kaydedin ve çıkın. Şimdi satır ayarlarını açın ve Gelişmiş sekmesinde, CSS sınıfına DS-Carousel-Sims sınıfını ekleyin. Sonra satırdan kaydedin ve çıkın. Ardından satırımıza bir görüntü modülü ekleyeceğiz. Modülü ekleyin ve listeden görüntü modülünü seçin. Resim Modülü İçerik sekmesinde, görüntüyü yükleyin ve yeni medya kitaplığından istediğiniz resmi seçin veya yükleyin. Görüntünüzün LightBox’ta açılmasını istiyorsanız, ayarlarda bu seçeneği seçin. Veya isterseniz görüntü tıklandığında yeni bir sayfa açmak için bir URL ekleyebilirsiniz. Modülde yapmamız gereken son şey sınıf eklemek. Gelişmiş sekmesine tıklayın ve CSS sınıfı sütununa DS-Carousel-Modül sınıfını ekleyin. Ardından modülden kaydedin ve çıkın. Bu, modüllerimizden biri bitti, ancak Güney Koreli yapmak için birden fazla resme ihtiyacımız olacak. Bu yazıda daha sonra vereceğim kod aynı anda 5 resim gösterecek, bu nedenle atlıkarınca düğmemizin efekt olan ve içeriğimizi değiştirmesi için en az 6 resme ihtiyacımız olacak. Divi klon özelliğini kullanarak, görüntünün Güney Koreliliğinizde görüntülenmesi için istediğiniz kadar çok görüntü modülünü kopyalayın. Bittiğinde, görüntü modülünüz tek bir satırda istiflenmiş olarak, rolünüz böyle görünecektir. Her modül için ayarları açmanız ve eklerseniz resimlerinizi ve URL’lerinizi değiştirmeniz gerekir. Böylece içerik ayarı tamamlandı, şimdi navigasyon yapacağız. Yeni bir parça ekleyin, resminizin hemen altına yeni bir parça ekleyin, bu sefer iki sütunla. Satır ayarlarını açın ve devam eden sekmede CSS sınıf alanına DS-Panah-Baris sınıfını ekleyin. Ardından satırdan kaydedin ve çıkın. Bir sonraki gezinmeyi ekleyin, metin modülünü bu satırdaki iki sütunun her birine ekleyin.
Şimdi gezinme düğmemiz olarak hareket etmek için bir giriş alanı yapmamız gerekiyor. Metin modülünü sol sütundaki ve içerik alanında açın, aşağıdaki html’yi yapıştırın: Ardından modülden kaydedin ve çıkın. Ardından metin modülünü sağ sütunda açın ve aşağıdaki html: yapıştırın Ardından modülden kaydedin ve çıkın. Bu giriş sütunu benzersiz ds-ok-sol ve ds-ok-right sütunları veriyoruz, böylece her ikisini de CSS ile düzenleyebilir ve tıklandığında ne yapmasını istediğimizi söylemek için JavaScript ile hedefleyebiliriz. 8 ve 9 değerleri, yazı tipi yazı tipi modülü ve ark. İnşaatçıda yapmamız gereken tek şey bu. Şimdi sayfanızın ön ucunu kontrol ederseniz, görüntünün yalnızca bir sütunu ve daha sonra üstünde 8 ve 9 olan iki küçük gri düğme olacak ve hiçbir şey yapmayacaklar. Öyleyse eğlenceli bir parçaya gidelim, kodumuzu ekleyelim. CSS ekleyin, çocuğunuzun temasına aşağıdaki CSS’yi eklemenizi öneririm, ancak çocuğun temasını kullanmıyorsanız, Divi> Tema seçeneğini eklemeniz sorunludur> Genel> Özel CSS’yi bastırdığınızdan emin olun. *Taşma bölümünü gizle */ .ds-carousel bölüm {
Genişlik:%100; Taşma: gizli;
}
/*Satır genişliğini ayarlayın*/
.ds-carousel-row {
Taşma: gizli;
Genişlik: 1000VW;
Max-Width: 1000VW;
}
@Media All and (Max-Width: 1024px) {
/*Divi’nin tabletlerdeki genişlik ayarlarını geçersiz kılma*/
.ds-carousel bölüm .ds-carousel-row {
Max-Width: 1000VW! Önemli;
}
}
@Media All and (Max-Width: 479px) {
/*Divi’nin mobil cihazdaki genişlik ayarlarını geçersiz kıl*
.ds-carousel bölüm .ds-carousel-row {
Max-Width: 1000VW! Önemli;
}
}
/*Navigasyon oklarını stilize*/
#Ds-ok-sol,
#Ds-ok-right {
Renk: #fff;
Arka plan: gri;
yazı tipi ailesi: ‘etmodüller’;
yazı tipi boyutu: 30px;
Dolgu: 5px 30px;
Sınır tarzı: yok;
Border-Radius: 0;
İmleç: işaretçi;
-Webkit-Box-Shadow: 2px 2px 2px 0 RGBA (0, 0, 0, 0.3);
Box-Shadow: 2px 2px 2px 0 RGBA (0, 0, 0, 0.3);
-Webkit-Transition: Tüm 0.3’ler;
Geçiş: 0,3’lerin hepsi;
}
/*Sol oku konumlandırın*/
#Ds-ok-left {
Sağa çık;
Marj-sağ: 5px;
}
/*Sağ oku konumlandırın*/
#Ds-ok-right {
Şamandıra: sol;
Marj-sol: 5px;
}
/*Navigasyon okları sover*/
#Ds-ok-sol: Hover,
#Ds-ok-right: hover {
-Webkit-Box-Shadow: 3px 3px 6px 1px RGBA (0, 0, 0, 0.2);
Box-Shadow: 3px 3px 6px 1px RGBA (0, 0, 0, 0.2);
}
/*Navigasyon okları tıklayın*/
#Ds-ok-sol: aktif,
#Ds-ok-right: aktif {
-Webkit-Box-Shadow: 2px 2px 5px 0 RGBA (0, 0, 0, 0.2) İç;
Box-Shadow: 2px 2px 5px 0 RGBA (0, 0, 0, 0.2) İç;
}
/*Modüllerin tüm kapsayıcıları*/. DS-Carousel-Module .Column {
Şamandıra: sol;
Genişlik:%100! Önemli;
Marj-Sağ: 0! Önemli;
}
/*Modül genişliğini ayarlayın*/
.ds-Carousel-Modül {
Genişlik: 20VW; /*Sayfa başına görüntülenen modülü artırmak veya azaltmak için bu değeri değiştirin*/
Dolgu: 0 30px;
Şamandıra: sol;
Pozisyon: göreceli;
Marj-Alt: 0! Önemli;
}
/*Daha küçük ekranlar için ayarlama*/
@Media All and (Max-Width: 1024px) {
/*Tabletlerde sayfa başına 3 modül göster*/
.ds-Carousel-Modül {
Genişlik: 33.33vw;
}
/*Smallr ekran işaretlerinde gezinmeyi hizalayın*/
#DS-ORROW-ROW .ET_PB_COLUMN {
Genişlik:%50! Önemli;
}
}
@Media All and (Max-Width: 479px) {
/*Mobil cihazda sayfa başına 1 modülü göster*
.ds-Carousel-Modül {
Genişlik: 100vw;
}
} CSS İhtiyaçlarınız için Düzenle Çıkışınızda kaç modül kullandığınıza bağlı olarak birkaç CSS bildirisini düzenlemeniz gerekebilir.
Şimdi küçük bir matematik için! Bu bildirim, modülü içeren bir satır genişliği ayarlar. /*Satır genişliğini ayarlayın*/
.ds-carousel-row {
Taşma: gizli;
Genişlik: 1000VW;
Max-Width: 1000VW;
} Modüllerimizi yan yana yüzmek için, bazıları görünür alanın dışında otururken, hattın genişliğini artırmamız gerekir.
Sayfa başına 5 ile toplam 15 modül görüntülerseniz, 3 sayfa ile biteceksiniz. Dolayısıyla, görünür satırın genişliği şunlar olmalıdır: (5/15) x 100 = 300. Bu nedenle 1000VW değerini en az 300VW olarak değiştirmeniz gerekir. (JavaScript’in ek boş sayfalar görüntülemesini engelleyeceği için daha büyük bir numaraya girmeniz önemli değil). Düzeltilmiş CSS’niz şöyle görünecek:
/*Satır genişliğini ayarlayın*/
.ds-carousel-row {
Taşma: gizli;
Genişlik: 300VW;
MAX-Width: 300VW;} Medya sorgusu ile biraz farklı. CSS, ekranda 1024px veya daha az genişliğe sahip sayfa başına 3 resim ve ekranda 479px veya daha az genişliğe sahip sayfa başına 1 görüntü görüntüleyecek şekilde yapılandırıldığından, matematiği şunları yansıtacak şekilde ayarlamamız gerekir: (15/3 ) x 100 = 500 (tabletler için) (15/1) x 100 = 1500 (mobil için) ayarlanmış CSS şöyle görünecektir: @Media All ve (maksimum genişlik: 1024px) {
/*Divi’nin tabletlerdeki genişlik ayarlarını geçersiz kılma*/
.ds-carousel bölüm .ds-carousel-row {
Max-Width: 500VW! Önemli;
}
}
@Media All and (Max-Width: 479px) {
/*Divi’nin mobil cihazdaki genişlik ayarlarını geçersiz kıl*
.ds-carousel bölüm .ds-carousel-row {
Max-Width: 1500VW! Önemli;
}
} Tüm bu değerleri basitlik için kullandığınız toplam modül sayısından daha büyük genişliğe dönüştürmek istiyorsanız. Yukarıdaki örnekte, değer 1500vw veya daha fazla olacaktır.
Ayrıca sayfa başına görüntülenen modül sayısını değiştirmek isteyebilirsiniz. Bu CSS beyanı, onu ayarlayabileceğiniz yerdir. /*Modül genişliğini ayarlayın*/
.ds-Carousel-Modül {
Genişlik: 20VW; /*Sayfa başına görüntülenen modülleri artırmak veya azaltmak için bu değeri değiştirin*/
Dolgu: 0 30px;
Şamandıra: sol;
Pozisyon: göreceli;
Marj-Alt: 0! Önemli;
}
20VW genişlik değeri sayfa başına 5 resim görüntüler ve yalnızca 100’tür. Bu nedenle 25VW sayfa başına 4 resim görüntüler ve 16.66VW sayfa başına 6 resim görüntülenir, vb. Aynı şeyi medya sorguları için yapabilirsiniz: /* Daha küçük ekranlar için ayarlama* /
@Media All and (Max-Width: 1024px) {
/*Tabletlerde sayfa başına 3 modül göster*/
.ds-Carousel-Modül {
Genişlik: 33.33vw;
}
/*Smallr ekran örneğinde gezinmeyi hizalayın*/#ds-ok-row .et_pb_column {
Genişlik:%50! Önemli;
}
}
@Media All and (Max-Width: 479px) {
/*Mobil cihazda sayfa başına 1 modülü göster*
.ds-Carousel-Modül {
Genişlik: 100vw;
}
} Sayfa başına görüntülenen görüntü sayısını değiştirirseniz, daha önce tartışılan satırın genişlik değerini de ayarlamanız gerektiğini unutmayın. Sayfanızı şimdi tekrar kontrol ederseniz, her şey iyi düzenlenmeli ve Güney Kore’ye benziyor, ancak işlev görebilmek için biraz JavaScript eklememiz gerekiyor. JavaScript ekleyin ve aşağıdaki kodu Divi> Tema Seçenekleri> Entegrasyon> Kodu blogunuza ekleyin ve kaydettiğinizden emin olun.
Bu kod, düğmelerimize işlevsellik ekler, modülü görüntülemek için tıklarken satırı sola ve sağa taşır. Düzenlemek isteyebileceğiniz birkaç alan vardır: var mn_index = 0; // Dizin başlatma
var mn_visible = 5;
var mn_end_index = 0;
mn_ter be = 5; Değişkenler Masaüstünde sayfa başına görüntülenen modül sayısına göre. Dolayısıyla, bunu daha önce de belirtildiği gibi CSS’de değiştirirseniz, bu değeri de değiştirmek istersiniz. Benzer şekilde, bu işlev tabletlerde ve cep telefonlarında görüntülenen görüntü sayısını ayarlar. Bunu CSS’de değiştirirseniz, burada MN_VISIBLE değerini de ayarlayın. İşlev mn_set_visible () {
if ($ (pencere). genişlik () <480) {
mn_visible = 1;
} else if ($ (pencere). genişlik () <1025) {
mn_visible = 3;
}
} Son olarak, Güney Kore'nin hareket ettiği bir hızımız var. Bu, burada 1000 olarak düzenlenmiştir. Bu, milisaniye cinsinden hızdır: 1000 milisaniye = 1 saniye. Animasyonu hızlandırmak veya yavaşlatmak için bu değeri ayarlayabilirsiniz. İşlev mn_next_slide (öğe) {
mn_end_index = (item.Length / mn_visible) – 1; // bitiş dizin
if (mn_index 0) {
mn_index–;
item.Anate ({‘sol’: ‘+= 100vw’}, 1000);
}
}
İşlev mn_first_slide (öğe) {
if (mn_index> 0) {
var move_vw = (100 * mn_index);
item.animate ({‘sol’: ‘+=’+move_vw+’vw’}, 1000);
mn_index = 0;
}
} İşte burada! Şimdi sayfanızı görürseniz, tıklanabilen bir atlıkarınca görüntü modülüne sahip olmanız gerekir. Dediğim gibi, bu yöntemi neredeyse tüm standart Divi Maker modülleriyle kullanabilirsiniz, ancak ayarları blog modülü gibi çeşitli yem türlerini görüntülemek için tasarlanmış modüllere ayarlamanız gerekebilir. Blog modülü bir gönderi çektiğinde ve birkaç sütun halinde görüntülendiğinde (ızgara özelliğini kullanırken), bu modül ayarlarında ayarlamalar ve biraz ek CSS gerektirir. Güney Kore bir blog modülü kullanır. Bölümünüzü ve hattınızı hazırlamak için aynı adımları izleyin. Bir görüntü modülü eklemek, bir blog modülü seçmek ve modül ayarlarındaki Gelişmiş sekmesine DS-Carousel-Modül sınıfı eklemek yerine. Ardından, tasarım sekmesinde açılır düzenden ızgara seçin. İsterseniz tam genişlik olarak bırakabilirsiniz, ancak ızgara seçeneği otomatik olarak Carousel’in düzenine uygun bir kuvvet ekler.
Şimdi içerik sekmesindeki bazı ayarları ayarlamamız gerekiyor. Bu ilk modül için, 1. posta numarasına ihtiyacımız var ve ofset numarası 0 olarak ayarlandı. Kalan ayarları nasıl ayarlarsınız ve görüntülediğiniz içeriği tamamen size bağlıdır. Sonra kurtar ve dışarı çık.
Daha önce yaptığımız gibi, ihtiyacınız olan çok modülü çoğaltmak için divi klonlama işlevini kullanın.
İhtiyacınız olan blog modüllerinin sayısına sahip olduktan sonra, her bir blog modülünün beslemede bir sonraki yazıyı görüntülemesi için her modülü açın ve her seferinde 1 ofset numarası ekleyin.
Dolayısıyla ayarlarınız şöyle görünecektir: 1 = Ofset numarası: 0 2 = Ofset numarası: 1 3 = Ofset numarası: 2 4 = Ofset numarası: 3 vb. Biraz ek CSS Blog modülü sütunda görüntülenirken, ızgara biçimini kullanırken, divi sütun ayarlarını daha küçük bir ekranda bir kenara koymak için bu ek medya sorgusunu CSS’ye eklememiz gerekir: @media ve (maksimum genişlik : 980px) {/*Daha küçük ekranlarda Fullwidth’e gönderiyi ayarlayın*/
.ds-Carousel-bölüm .et_pb_blog_grid .column.size-1oof2 {
Genişlik:%100! Önemli;
Marj: 0! Önemli;
