CodeWatchers

Kako v Elementorju ustvariti spletno mesto s pomikanjem po celotni strani

Rifat WordPress Tutorials Mar 31, 2024

Ustvarjanje celozaslonskih drsnih strani v Elementorju je tudi zelo enostavno in priročno. Da bi to dosegli, bomo uporabili vtičnik z imenom fullPage.js . Obstajajo tudi drugi načini za doseganje tega učinka, na primer drsenje CSS ali Elementor Addons. Vendar fullPage.js zagotavlja najboljšo rešitev za združljivost, odzivnost in uporabnost.

Kako v Elementorju ustvariti spletno mesto s pomikanjem po celotni strani

Ustvarjanje celozaslonskih pomičnih spletnih mest v Elementorju

Zdaj bomo prikazali postopek ustvarjanja drsnega spletnega mesta po celotni strani v Elementorju.

1. korak: Nalaganje fullPage.js

Če želimo uporabljati funkcije vtičnika fullPage.js , ga moramo najprej naložiti.

Naslednjo kodo je treba dodati v glavo naše spletne strani, da se lahko pravilno naloži:

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj 
<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>

Za izvedbo te kode potrebujemo vtičnik, ker Elementor trenutno ne ponuja sredstev za dodajanje kode v glavo spletnega mesta. Čeprav obstaja več vtičnikov, ki lahko dodajo kodo v našo glavo, sem ugotovil, da je ta najlažji za uporabo.

Izberite Dodaj HTML po meri pod Custom CSS & JS na nadzorni plošči WordPress po namestitvi vtičnika. Zdaj prilepite prej omenjeno kodo in se prepričajte, da jo postavite tako v glavo kot na sprednji del.

Adding code to the Header using a WordPress Plugin

Naslednji korak je vključitev edinstvenega JS. Za inicializacijo fullPage.js in nastavitev njegovih možnosti in postopkov moramo uporabiti jQuery. Tukaj je nekaj osnovnih izbir, ki veljajo za vsa spletna mesta z navpičnim drsenjem.

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

Ne pozabite vključiti te kode v nogo sprednjega dela.

V tej fazi nastavimo tudi nastavitve celotne strani. Prejšnji primer vključuje navigacijske pike, ki se bodo pojavile na desni strani našega drsnega mesta, kot tudi minimalne možnosti, potrebne za celostransko drsno mesto. Ko bomo spremenili svoj dizajn, da bo odziven, bom pregledal več alternativ. Za več podrobnosti o svojih možnostih obiščite uradno dokumentacijo.

2. korak: Nastavite stran Elementor

FullPage.js zahteva naslednjo oznako za našo drsno stran.

<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>

Posamezni razdelki naše drsne strani z razdelkom razreda bodo celozaslonski razdelki. Uporaba predlog je najpreprostejši pristop, da to deluje z Elementorjem.

Najprej konfigurirajmo našo dejansko stran. Ustvarite novo stran v Pages, ji dajte ustrezen naslov in URL ter jo nato uredite z Elementorjem.

Zdaj ustvarite razdelek z enim stolpcem v Elementorju. V ta stolpec želimo dodati gradnik HTML. Ta pripomoček, ki vključuje kratke kode za vsak posamezen diapozitiv, bo služil kot okvir naše strani. Želimo dodati naslednjo kodo:

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

Preverite, ali je odsek polne širine. Poleg tega, ker ne želimo oblazinjenja, ki ga Elementor privzeto doda stolpcem, nastavite oblazinjenje razdelka in stolpca na 0.

Po ustvarjanju dejanskih diapozitivov v poznejših korakih bomo ID predloge Elementor spremenili na pravilno vrednost.

3. korak: Nastavite razdelke

Zadnji korak je ločena izdelava in shranjevanje vsakega razdelka kot predloge.

Za uporabo kratkih kod boste potrebovali Elementor Pro . Prišel je čas, da ga kupite, če o tem še niste razmišljali. Imate vsa orodja, ki jih potrebujete za izdelavo spletnega mesta z uporabo Elementorja. Ni vam treba vedno kupiti nove teme!

Ustvarite nov razdelek tako, da izberete Predloge - Dodaj novo.

Ustvarjen bo prvi diapozitiv našega drsnega mesta po celotni strani. Ustvarite nov razdelek v Elementorju in nastavite njegovo višino na »Prilagodi zaslonu«. Zdaj, ko ste dodali svoj material, ga lahko oblikujete. Prepričajte se, da vsaka predloga vsebuje največ en del. Če želite ustvariti edinstveno postavitev, lahko uporabite poljubno število stolpcev in notranjih stolpcev.

Ko končate, shranite diapozitiv in se vrnite v svoje predloge Elementor. Predloga, ki ste jo nedavno razvili, bi se morala zdaj pojaviti na seznamu. Vzemite ID te predloge in ga kopirajte na stran, ki smo jo naredili v 2. koraku.

Zdaj ponovite ta postopek za vsak diapozitiv, ki ga imate. Vsaka predloga mora imeti eno območje z višino, ki je prilagojena zaslonu.

Zavijanje

To je torej vse! To je najpreprostejši način za ustvarjanje celozaslonskih drsnih strani s fullPage.js v Elementorju . Upam, da vam bo to lahko pomagalo oblikovati preprosto in minimalistično spletno stran za vaše prihodnje podvige.

Divi WordPress Theme