Divi Modüllerinden Tıklanabilir Bir Döngü Nasıl Oluşturulur

Bugünkü gönderi, sürekli olarak yeni ve faydalı Divi öğreticileri ve kursları hazırladığı “Divi Kitchen”ın evi olan Divi Soup'tan Michelle Nunan tarafından gönderildi.

Carousels, popüler bir web sitesi özelliğidir. Fazladan yer kaplamadan daha fazla içerik görüntülemenize izin verirler ve ayrıca web sitenize, ziyaretçilerinizi içeriğinizle daha fazla ilgilenmeye teşvik edebilecek bir etkileşim unsuru eklerler.

İçeriğinizi bir karuselde görüntülemenize yardımcı olabilecek çok sayıda harika eklenti var, ancak bu yazıda size sadece CSS ve Javascript kullanarak tıklanabilir bir Divi modülleri karuselini nasıl oluşturacağınızı göstereceğim.

Bu efekt, hemen hemen tüm standart Divi modülleri veya modüllerin kombinasyonu ile kullanılabilir. Görüntü modülünü ve ardından blog modülünü kullanarak bu karuselin nasıl oluşturulacağını size göstereceğim, çünkü bunun için süreç biraz farklıdır. Oradan, hemen hemen tüm standart modüllerle kendi karuselinizi nasıl oluşturabileceğinizi anlamalısınız.

Sonuç

Blog modülüyle bir atlıkarınca oluşturduktan sonra elde etmeniz gereken şey budur.

Çeşitli Divi Builder Modüllerini kullanarak efekti gösteren canlı bir demoyu burada görebilirsiniz.

Öyleyse başlayalım.

Yeni bir sayfa ekle

Görüntü modülü ile bir atlıkarınca oluşturarak başlayacağız. Yeni bir sayfa ekleyin veya atlıkarınca eklemek istediğiniz bir sayfayı açın.

Yeni bölüm ekle

Tek bir sütunla sayfanıza yeni bir standart bölüm ekleyin. Ardından bölüm ayarlarını açın ve Gelişmiş sekmesinde, CSS Sınıfı alanına ds-carousel-section sınıfını ekleyin.

Bölümün ve satırların görüntülenme şeklini değiştireceğimiz için, bu değişikliklerin yalnızca karuselimize uygulanmasını istiyoruz, bu nedenle kodumuzun sitemizdeki diğer öğeleri etkilemesini önlemek için özel bir sınıf ekledik.

Ardından Kaydet ve Bölümden Çıkın.

Şimdi satır ayarlarını açın ve Gelişmiş sekmesinde, CSS Sınıfı alanına ds-carousel-row sınıfını ekleyin. Ardından Satırı Kaydet ve Çık.

Daha sonra satırımıza bir resim modülü ekleyeceğiz. Modül(ler)i Ekle'ye tıklayın ve listeden Görüntü Modülünü seçin.

Görüntü modülünün İçerik sekmesinde, Bir Görüntü Yükle'ye tıklayın ve medya kitaplığından istediğiniz görüntüyü seçin ya da yeni bir tane yükleyin.

Resimlerinizin bir ışık kutusunda açılmasını istiyorsanız, ayarlarda bu seçeneği seçin.

Alternatif olarak, dilerseniz görsele tıklandığında yeni bir sayfa açmak için bir url ekleyebilirsiniz.

Modüle yapmamız gereken son şey bir sınıf eklemek. Gelişmiş sekmesine tıklayın ve CSS Sınıfı alanına ds-carousel-module sınıfını ekleyin. Ardından Modülü Kaydet ve Çık.

Bu, modüllerimizden biri tamamlandı, ancak atlıkarınca oluşturmak için tek bir görüntüden daha fazlasına ihtiyacımız olacak. Bu yazının ilerleyen kısımlarında vereceğim kod, bir seferde 5 resim gösterecek, bu yüzden carousel butonlarımızın herhangi bir etki yapması ve içeriğimizi kaydırması için en az 6 resme ihtiyacımız olacak.

Divi'nin klonlama özelliğini kullanarak, görüntü modülünü görüntülerin karuselinizde görüntülenmesini istediğiniz kadar çoğaltın.

İşiniz bittiğinde, görüntü modülleriniz tek bir sıra halinde yığılmış olarak bölümünüz bu şekilde görünmelidir.

Her modül için ayarları açmanız ve eklediyseniz resimlerinizi ve URL'yi değiştirmeniz gerekecektir.

Bu, içeriğin kurulumu tamamlandı, şimdi navigasyonu oluşturacağız.

Yeni bölüm ekle

Resim bölümünüzün hemen altına, bu sefer iki sütunlu yeni bir bölüm ekleyin.

Satır ayarlarını açın ve Gelişmiş sekmesinde CSS Sınıfı alanına ds-ok-satır sınıfını ekleyin. Ardından Satırı Kaydet ve Çık.

Navigasyonu ekle

Ardından, bu satırdaki iki sütunun her birine bir metin modülü ekleyin.

Şimdi, gezinme düğmelerimiz olarak işlev görecek giriş alanları oluşturmamız gerekiyor. Sol sütundaki metin modülünü açın ve içerik alanına aşağıdaki HTML'yi yapıştırın:

<input id="ds-arrow-left" type="button" value="8">

Ardından Modülü Kaydet ve Çık.

Ardından, sağ sütundaki metin modülünü açın ve aşağıdaki HTML'yi yapıştırın:

<input id="ds-arrow-right" type="button" value="9">

Ardından Modülü Kaydet ve Çık.

Bu girdi alanlarına benzersiz ds-ok-sol ve ds-ok-sağ kimlikleri veriyoruz, böylece hem onları CSS ile biçimlendirebilir hem de tıklandığında ne yapmalarını istediğimizi söylemek için JavaScript ile hedefleyebiliriz.

8 ve 9 değerleri, ET Modülleri yazı tipi ailesindeki çift sol ve sağ okları ifade eder.

Oluşturucuda yapmamız gereken tek şey bu. Sayfanızın ön ucunu şimdi kontrol ederseniz, sadece tek bir resim sütunu olacak ve ardından üzerlerinde 8 ve 9 olan iki küçük gri düğme olacak ve hiçbir şey yapmayacaklar. O halde kodumuzu ekleyerek eğlenceli kısma geçelim.

CSS'yi ekleyin

Alt temanıza aşağıdaki CSS'yi eklemenizi tavsiye ederim, ancak bir alt tema kullanmıyorsanız Divi > Tema Seçenekleri > Genel > Özel CSS'ye eklemeniz ve Kaydet'e bastığınızdan emin olun.

/*Hide the section overflow*/
.ds-carousel-section {
    width: 100%;
    overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
    color: #fff;
    background: gray;
    font-family: 'ETModules';
    font-size: 30px;
    padding: 5px 30px;
    border-style: none;
    border-radius: 0;
    cursor: pointer;
    -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: all 0.3s;
    transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
    float: right;
    margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
    float: left;
    margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-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);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

İhtiyaçlarınız için CSS'yi düzenleyin

Karuselinizde kaç modül kullandığınıza bağlı olarak bazı CSS bildirimlerini düzenlemeniz gerekebilir.

Şimdi biraz matematik için!

Bu bildirim, modülleri içeren satırın genişliğini belirler.

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

Modüllerimizi yan yana, bazıları görünür alanın dışında kalacak şekilde yüzdürmek için sıranın genişliğini artırmamız gerekiyor.

Sayfa başına 5 olmak üzere toplam 15 modül görüntülüyorsanız, sonuçta 3 sayfa elde edeceksiniz. Yani satırın görünür genişliği şöyle olmalıdır:

(15 / 5) x 100 = 300.

Bu nedenle 1000vw değerlerini minimum 300vw olarak değiştirmeniz gerekecektir. (JavaScript, fazladan boş sayfa görüntülememeye özen göstereceğinden, daha büyük bir sayı girmeniz önemli değildir). Böylece, ayarlanmış CSS'niz şöyle görünür:

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 300vw;
    max-width: 300vw;
}

Medya sorguları ile biraz farklıdır. CSS, 1024 piksel ve daha az genişlikteki ekranlarda sayfa başına 3 resim ve 479 piksel veya daha az genişlikteki ekranlarda sayfa başına 1 resim görüntüleyecek şekilde yapılandırıldığından, matematiği aşağıdakileri yansıtacak şekilde ayarlamamız gerekir:

(15 / 3) x 100 = 500 (tabletler için)
(15 / 1) x 100 = 1500 (cep telefonları için)

Ayarlanmış CSS'niz şöyle görünür:

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 500vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1500vw !important;
    }
}

İsterseniz, basitlik için tüm bu değerleri, kullandığınız toplam modül sayısından daha büyük bir genişlikte değiştirebilirsiniz. Yani yukarıda bahsedilen örnekte bu değer 1500vw veya daha fazla olacaktır.

Sayfa başına görüntülenen modül sayısını da değiştirmek isteyebilirsiniz. Bu CSS bildirimi, bunu ayarlayabileceğiniz yerdir.

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

20vw'nin genişlik değeri, sayfa başına 5 resim görüntüler ve bu yalnızca 100'ün bir yüzdesidir. Dolayısıyla 25vw, sayfa başına 4 resim görüntüler ve 16.66vw, sayfa başına 6 resim görüntüler, vb.

Aynı şeyi medya sorguları için de yapabilirsiniz:

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Sayfa başına görüntülenen resim sayısını değiştirirseniz, daha önce tartışılan satır genişliği değerini de ayarlamanız gerekebileceğini unutmayın.

Şimdi sayfanızı tekrar kontrol ederseniz, her şeyin güzel bir şekilde biçimlendirilmesi ve bir atlıkarınca gibi görünmesi gerekir, ancak çalışması için biraz JavaScript eklememiz gerekir.

JavaScript'i ekleyin

Aşağıdaki kodu kopyalayıp Divi > Tema Seçenekleri > Entegrasyonlar > Blogunuzun < head > bölümüne kod ekleyin ve Kaydet'i unutmayın.

<script type="text/javascript">
(function ($) {

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

function mn_carousel_init() {
	mn_set_visible();

	var item = $('.ds-carousel-module');
 
	$('#ds-arrow-right').click(function() {
		mn_next_slide(item);
	});
 
	$('#ds-arrow-left').click(function() {
		mn_previous_slide(item);
	});
	 
	$(window).resize(function() {
		mn_set_visible();
	  	mn_first_slide(item);
	});

}

$(document).ready(function() {
	mn_carousel_init();
});

})(jQuery)
</script>

Bu kod, modülleri görüntülemek için tıklandığında satırı sola ve sağa hareket ettirerek düğmelerimize işlevsellik ekler.

Düzenlemek isteyebileceğiniz birkaç alan var:

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

mn_visible = 5; değişken, masaüstünde sayfa başına görüntülenen modül sayısına karşılık gelir. Yani bunu daha önce belirtildiği gibi CSS'de değiştirdiyseniz, bu değeri de değiştirmek isteyeceksiniz.

Aynı şekilde, bu işlev tabletlerde ve cep telefonlarında görüntülenen görüntü sayısını ayarlar. Yani bunu CSS'de değiştirdiyseniz, mn_visible değerlerini burada da ayarlayın.

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

Son olarak, atlıkarıncanın hareket ettiği hıza sahibiz. Burada 1000 olarak ayarlanmıştır. Bu, milisaniye cinsinden hızdır: 1000 milisaniye = 1 saniye.

Animasyonu hızlandırmak veya yavaşlatmak için bu değeri ayarlayabilirsiniz.

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

Bu kadar! Şimdi sayfanızı görüntülerseniz, tıklanabilir bir resim modülleri karuseline sahip olmalısınız.

Dediğim gibi, bu yöntemi hemen hemen tüm standart Divi oluşturucu modülleriyle kullanabilirsiniz, ancak blog modülü gibi bir tür beslemeyi görüntülemek için tasarlanmış modüllerle ayarları yapmanız gerekebilir.

Blog modülü gönderileri alıp bunları birden çok sütunda görüntülediğinden (ızgara özelliğini kullanırken), bunun için modül ayarlarının ve küçük bir miktar fazladan CSS'nin ayarlanması gerekir.

Blog Modülünü Kullanan Döngü

Bölümünüzü ve sıranızı ayarlamak için aynı adımları izleyin.

Görüntü modülü eklemek yerine blog modülünü seçin ve modül ayarlarının Gelişmiş sekmesinde ds-carousel-module sınıfını ekleyin.

Ardından, Tasarım sekmesinde, düzen açılır menüsünden Izgara'yı seçin.

İsterseniz Tam Genişlik olarak bırakabilirsiniz, ancak Izgara seçeneği otomatik olarak atlıkarınca düzenine daha iyi uyan bir stil ekler.

Şimdi İçerik sekmesinde bazı ayarları yapmamız gerekiyor.

Bu ilk modül için, 1'e ayarlanmış Posta Numarasına ve 0'a ayarlanmış Ofset Numarasına ihtiyacımız var.
Ayarların geri kalanını nasıl ayarlayacağınız ve hangi içeriği görüntüleyeceğiniz tamamen size kalmış. Ardından Kaydet ve Çık.

Daha önce yaptığımız gibi, modülü istediğiniz kadar çoğaltmak için Divi'nin klonlama işlevini kullanın.

İhtiyaç duyduğunuz sayıda blog modülüne sahip olduğunuzda, her birini açın ve her blog modülünün beslemede bir sonraki gönderiyi göstermesi için ofset sayısını her seferinde 1 artırın.

Yani ayarlarınız şöyle görünecek:

1. = Ofset Sayısı: 0
2. = Ofset sayısı: 1
3. = Ofset Sayısı: 2
4. = Ofset Sayısı: 3
Vesaire.

Biraz Ekstra CSS

Grid formatı kullanılırken blog modülü sütunlarda görüntülendiğinden, Divi'nin sütun ayarını daha küçük ekranlarda geçersiz kılmak için bu ekstra medya sorgusunu CSS'mize eklememiz gerekiyor:

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

Blog modülünü Tam genişlik modunda kullanmaya karar verdiyseniz, bunu eklemeniz gerekmez.

Sonuç

Şimdi sayfanızı kontrol edin ve güzel yeni Blog Döngüsü'nü görün

Son düşünceler

Sayfanızın uzunluğunu artırmadan daha fazla içerik görüntülemek için bu atlıkarınca efektini kullanmanın pek çok yolu vardır.

Site tasarımlarınızı, müşteri referanslarınızı, çalışan biyografilerinizi, videolarınızı, podcast'lerinizi ve hatta mağazanızdaki ürünleri sergileyebilirsiniz.

Divi modüllerinin tıklanabilir bir karuselini oluşturmak için bu öğreticiyi nasıl kullandığınızı duymak isterim, bu yüzden lütfen aşağıdaki bölüme bir yorum bırakın!

Öne Çıkan Görsel aunaauna / Shutterstock.com