CodeWatchers

Divi'de Eklenti Olmadan Atlıkarınca Kaydırıcısı Nasıl Oluşturulur

Rifat Divi Tutorials Feb 19, 2024

Atlıkarınca kaydırıcıları, hizmetleri, görüntüleri, özellikleri ve diğer çeşitli içerikleri aşırı yer kaplamadan verimli bir şekilde sergileme yetenekleri nedeniyle web tasarımında yaygın olarak benimsenmiştir. Bir atlıkarınca uygulayarak alan kullanımını optimize edebilir ve genel kullanıcı deneyimini geliştirebilirsiniz.

Divi'de Eklenti Olmadan Atlıkarınca Kaydırıcısı Nasıl Oluşturulur

Bu kılavuzda, atlıkarınca işlevini Divi web sitenize entegre etme sürecinde size yol göstereceğim. Üçüncü taraf bir kaynaktan gelen Swiper.js kitaplığından yararlanacağız ve kaydırıcıyı tercihlerinize göre uyarlamak için özel CSS uygulayacağız.

Kaydırıcı işlevini Divi web sitenize dahil etmek için alt temanızın Function.php dosyasındaki swiper.js kitaplığını çağırmanız yeterlidir.

Eklenti Olmadan Atlıkarınca Kaydırıcısı Tasarlayın

Sliderımızın işlevselliğini etkinleştirmek için, swiper.js kütüphanesini Divi alt temamızın function.php dosyasına dahil etmeliyiz.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Ek olarak, diğer ayarların yanı sıra kaydırıcıda görüntülenecek sütun sayısı, slaytların döngüye girip girmeyeceği ve ok gezinme ve sayfalandırmanın etkinleştirilip etkinleştirilmeyeceği gibi parametreleri belirten yapılandırma kodunu eklememiz gerekir.

Mevcut yapılandırmaların kapsamlı bir listesi için lütfen Swiper API sayfasına bakın. Şimdi uygulamaya geçelim.

Tüm PHP kodu Divi alt temasının Function.php dosyasına dahil edilmelidir. Bu dosyada FTP aracılığıyla, sunucunuzdaki Dosya Yöneticisi aracılığıyla veya WordPress Kontrol Panelinden erişilebilen Tema Düzenleyiciyi kullanarak düzenlemeler yapabilirsiniz. Bu durumda Tema Düzenleyiciyle ilerleyeceğiz.

Swiper.js kütüphanesini alt temamızda kuyruğa almak için şu adımları izleyin:

  • Görünüm → Tema Düzenleyici'ye gidin
  • Function.php dosyasını alt temanızda açın ve özel PHP kodunu ekleyin.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
   wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
   wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);

function dp_carousel_slider_scripts() {
?>
  <script type="text/javascript">
  // adding navigation html
  (function(){
    window.addEventListener('DOMContentLoaded', function(){
        let sliders = document.querySelectorAll('.dp-carousel')
        sliders.forEach(function( slider ) {
            swiper_init(slider)
        })
    });
      
    function swiper_init(slider){
         // configuration
         if(slider === null) return;
         // extra controls
         let extraControls = '';
         // If we need pagination 
         extraControls += '<div class="swiper-pagination"></div>';
         // If we need navigation buttons 
        extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
        slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;

         // Wait for Swiper
        var waitForSwiper = setInterval( function () {
            if (typeof Swiper != "undefined") { 
                clearInterval(waitForSwiper);
                let carousel_container = slider.querySelector('.swiper-container');
                const swiper = new Swiper( carousel_container , {
                    slidesPerView: 1, // mobile value
                    loop: true,
                    spaceBetween: 0, // mobile value
                    autoplay: {
                    delay: 3000,
                    },
                    speed: 600,
                    // If we need pagination
                    pagination: {
                    el: '.swiper-pagination',
                    clickable : true,
                    dynamicBullets: true
                    },
                    // Navigation arrows
                    navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    },
                    breakpoints: {
                    768: { // Tablet
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    981: { // Desktop
                        slidesPerView: 3,
                        spaceBetween: 30,
                    }
                    }
                });
            }
        }, 20);
   }
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts');
  • Dosyayı Güncelle'yi seçin.

Şimdi kaydırıcımızda görüntülenecek tüm şeyleri oluşturmak için Divi Builder'ı kullanmalıyız. Satır, sütun ve modül özel sınıflarının ve kimliklerinin eklenmesi gerekecektir. Yalnızca bir sütun düzeni olabilir ve ayarlar PHP kodunda belirtilen sütun numaralarına göre bir atlı karıncaya dönüştürülür.

Bu örnek için güzel tasarımlı ve vurgulu efektleri olan Blurb modüllerini kullandım, ancak siz istediğiniz Divi modülünü kullanabilirsiniz.

Divi Builder'ı kullanarak sayfanıza bir sütun satırı içeren bir bölüm ekleyin.

Blurb modülünü bulun ve sayfaya ekleyin.

Satır ayarlarına yeşil araç çubuğundaki dişli sembolüne tıklayarak erişilebilir.

Gelişmiş CSS Kimliği ve Sınıfları'nı seçin.

CSS Sınıfı alanına dp-carousel'i ekleyin.

İçerik sekmesine geç

Sütun ayarlarını açın ve CSS Sınıfı alanına kaydırıcı sarmalayıcı sınıfını ekleyin.

Tanıtım modülünü özelleştirmek için modül ayarlarını açın ve gelişmiş sekmesine gidin. Daha sonra CSS alanına kaydırmalı slayt ekleyin.

İçerik sekmesine gidin ve Metin düğmesini tıklayın.

Başlık ve gövde metnini ekleyin.

Arka Plan geçişine bir Arka Plan Resmi ekleyin.

Şimdi başlık metni tasarımına gelince, işte ayarlar:

  • Başlık Yazı Tipi – Abhaya Libre
  • Renk – #415962
  • Başlık Metni Boyutu – cep telefonlarında 26 piksel ve 22 piksel

Gövde metni için bu ayarları izleyin.

  • Başlık Yazı Tipi – Açık Sans
  • Renk – #879296
  • Gövde Metni Boyutu – cep telefonlarında 14 piksel ve 12 piksel
  • Gövde Hattı Yüksekliği: 1,5em

Bu son aşamada, içerik kabına beyaz bir arka plan ve arka plan resmine bir yakınlaştırma animasyonu kazandırmak için bir Blurb Spacing ve Özel CSS ekleyeceğiz.

Blurb ayarlarında Tasarım Aralığı geçişini değiştirin.

  • Masaüstü bilgisayarlar için dolgu eklenmelidir. 300 piksel/1,5vw/1,5vw/1,5vw
  • Tabletler için dolgu eklenmelidir. 220 piksel/30 piksel/30 piksel/30 piksel
  • Cep telefonları için dolgu eklenmelidir. 200 piksel/20 piksel/20 piksel/20 piksel

Gelişmiş sekmesine gidin ve Özel CSS onay kutusunu seçin.

Arka plan boyutu: %100.

Ana Eleman alanına arka plan geçişi.

Tüm geçişler 0,5 saniyedir.

Fareyle üzerine gelindiğinde bir arka plan boyutu ekleyin ve Ana Öğeye geçiş yapın.

%105 arka plan boyutu; Tüm geçişler 0,5 saniyedir.

Arka plan rengi için bunu özel CSS alanına yapıştırın.

background-color: white;
padding: 30px 1.5vw;

Ayrıca, fareyle üzerine gelindiğinde Blurb İçerik Alanına arka plan rengi ve dolgu eklemeniz gerekir.

background-color: white;
padding: 30px 4vw;

Artık Blurb modülünü tamamladığımıza göre, karuselimize yeni tanıtımlar eklemek için bunu istediğimiz kadar çoğaltabiliriz. Kopyalanan her modülde yalnızca kelimeleri değiştirmeniz ve arka plan resmini değiştirmeniz gerekir.

Kaydırıcımız neredeyse bitti. Son olarak, kaydırıcı navigasyonumuzu ve sayfalandırmamızı süslemek için bazı özel CSS'ler ekleyeceğiz. Bu kod Divi/Tema Seçenekleri/Özel CSS'ye veya alt temanızın style.css dosyasına yerleştirilebilir.

/* DP Slider Navigation */

.dp-carousel .swiper-button-prev {
	transform: none;
    margin-top: -100px;
    top: 10px !important;
    margin-left: auto!important;
    right: 52px;
	font-size: 20px !important;
	background-color: #fff;
    padding: 25px !important;
}
.dp-carousel .swiper-button-next {
	transform: none;
    top: 10px !important;
    margin-top:-100px;
    right: 0px !important;
    background-color: #fff;
    padding: 25px !important;
}

/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
	font-size: 20px;
    color: #aed4e4;
}

/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
	background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
	background-color: #fff;
    top: 15px;
}

Şimdi son slayt burada.

Son sözler

Divi'de eklenti kullanmadan bir atlıkarınca oluşturmak, Divi temasının sağladığı yerleşik işlevsellik ve özelleştirme seçeneklerinden yararlanmayı içerir. Bu prosedürü izleyerek, ek eklentilere ihtiyaç duymadan, özel içerik ve tasarım tercihlerinize göre uyarlanmış bir atlıkarınca oluşturabilirsiniz.

Divi WordPress Theme