Elementor'da Tam Sayfa Kaydırma Web Sitesi Nasıl Oluşturulur

Elementor'da tam ekran kayan sayfalar oluşturmak da çok kolay ve kullanışlıdır. Bunu başarmak için fullPage.js adlı bir eklenti kullanacağız. Bu etkiyi elde etmenin CSS kaydırma veya Elementor Eklentileri gibi başka yöntemleri de vardır. Ancak fullPage.js uyumluluk, yanıt verme ve kullanılabilirlik açısından en iyi çözümü sağlar.

Elementor'da Tam Ekran Kaydırmalı Web Siteleri Oluşturma

Şimdi Elementor'da tam sayfa kayan bir web sitesi oluşturma sürecini göstereceğiz.

1. Adım: fullPage.js'yi yükleme

FullPage.js eklenti fonksiyonlarını kullanabilmek için öncelikle onu yüklememiz gerekiyor.

Web sitemizin doğru şekilde yüklenebilmesi için başlığımıza aşağıdaki kodun eklenmesi gerekmektedir:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

Bu kodu yürütmek için bir eklentiye ihtiyacımız var çünkü Elementor şu anda site başlığına kod eklemek için bir araç sunmuyor. Başlığımıza kod ekleyebilecek çeşitli eklentiler olmasına rağmen, bunun kullanımının en kolay olduğunu buldum.

Eklentiyi yükledikten sonra WordPress Kontrol Panelinde Özel CSS ve JS altında Özel HTML Ekle seçeneğini seçin. Şimdi, yukarıda belirtilen kodu hem başlığa hem de ön uca yerleştirdiğinizden emin olarak yapıştırın.

Bir sonraki adım bazı benzersiz JS'leri eklemektir. FullPage.js'yi başlatmak ve seçeneklerini ve prosedürlerini ayarlamak için jQuery'yi kullanmalıyız. Dikey kaydırma özelliğine sahip tüm siteler için geçerli olan bazı temel seçimleri burada bulabilirsiniz.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Bu kodu ön ucun alt bilgisine eklediğinizden emin olun.

Bu aşamada FullPage ayarlarımızı da yapıyoruz. Önceki örnek, kayan sitemizin sağ tarafında görünecek olan gezinme noktalarının yanı sıra, tam sayfa kayan bir site için gereken minimum seçenekleri içerir. Tasarımımızı duyarlı olacak şekilde değiştirdiğimizde daha fazla alternatifi gözden geçireceğim. Seçenekleriniz hakkında daha fazla ayrıntı için resmi belgeleri ziyaret edin.

2. Adım: Elementor Sayfasını Ayarlayın

Aşağıdaki işaretleme, Kayan Sayfamız için fullPage.js tarafından gereklidir.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

Kayan sayfamızın sınıf bölümüyle birlikte bireysel bölümlerinin her biri tam ekran bölümler olacaktır. Şablonları kullanmak, bu işi Elementor'da gerçekleştirmenin en basit yaklaşımıdır.

Öncelikle gerçek sayfamızı yapılandıralım. Pages'da yeni bir sayfa oluşturun, bu sayfaya uygun bir başlık ve URL verin ve ardından Elementor'u kullanarak düzenleyin.

Şimdi Elementor'da tek Sütunlu bir Bölüm oluşturun. Bu sütuna bir HTML Widget'ı eklemek istiyoruz. Her bir slayt için kısa kodlar içeren bu Widget, Sayfamızın çerçevesi olarak hizmet edecektir. Aşağıdaki kodu eklemek istiyoruz:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Bölümün tam genişlikte olduğunu doğrulayın. Ayrıca, Elementor'un varsayılan olarak sütunlara eklediği dolguyu istemediğimiz için bölümün ve sütunun dolgusunu 0 olarak ayarlayın.

Sonraki adımlarda gerçek slaytları oluşturduktan sonra Elementor şablon kimliğini doğru değere değiştireceğiz.

3. Adım: Bölümleri ayarlayın

Son adım, her bölümü ayrı ayrı oluşturup şablon olarak kaydetmektir.

Kısa Kodları kullanmak için Elementor Pro'ya ihtiyacınız olacak. Henüz yapmayı düşünmediyseniz satın almanın zamanı geldi. Elementor'u kullanarak bir web sitesi oluşturmak için ihtiyacınız olan tüm araçlara sahipsiniz. Her zaman yeni bir tema satın almanıza gerek yok!

Şablonlar - Yeni Ekle'ye giderek yeni bir bölüm oluşturun.

Artık tam sayfa kayan sitemizin ilk slaytı oluşturulacak. Elementor'da yeni bir bölüm oluşturun ve yüksekliğini "Ekrana Sığdır" olarak ayarlayın. Artık materyalinizi eklediğinize göre stil verebilirsiniz. Her şablonun en fazla bir bölüm içerdiğinden emin olun. Benzersiz bir düzen oluşturmak için istediğiniz kadar sütun ve iç sütun kullanabilirsiniz.

İşiniz bittiğinde slaydınızı kaydedin ve ardından Elementor Şablonlarınıza geri dönün. Yakın zamanda geliştirdiğiniz şablonun artık listede görünmesi gerekiyor. Bu şablonun kimliğini alın ve kopyalayarak 2. Adımda oluşturduğumuz Sayfaya yapıştırın.

Şimdi bu işlemi sahip olduğunuz her slayt için tekrarlayın. Her şablonda, ekrana uyacak şekilde ayarlanmış yüksekliğe sahip bir alan bulunmalıdır.

Kapanış

O halde hepsi bu! Bu, Elementor'da fullPage.js ile tam ekran kayan sayfalar oluşturmanın en basit yoludur. Umarım bu, gelecekteki girişimleriniz için kolay ve minimalist bir web sitesi tasarlamanıza yardımcı olabilir.