Preskoči na glavni sadržaj

Kako stvoriti animirane ladice na Divi

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

Fioke u podnožju korisni su dodaci bilo kojem web mjestu jer pohranjuju dodatni sadržaj koji je lako dostupan korisnicima. Ladice podnožja su spremnici web sadržaja (poput odjeljka Divi) koji se mogu otvoriti i zatvoriti klikom na gumb ili lebdenjem iznad njega. To je kao da imate malo zalihe za vrhunski sadržaj.

U ovom uputstvu dizajnirat ćemo plutajuću ladicu za podnožje u Diviju. Dodati ćemo ladicu podnožja u cjelokupno područje podnožja predloška web stranice tako da ladica podnožja bude dostupna na cijeloj web lokaciji s uobičajenim sadržajem podnožja.

S postupkom koji ćemo koristiti, bilo koji odjeljak Divi (i njegov sadržaj) može se pretvoriti u ladicu podnožja u nekoliko minuta.

Kako dodati predložak ladice podnožja na svoju web lokaciju Divi

Dodavanjem ovog predloška zamijenit ćete zadani predložak web mjesta (ako ga imate) na vašem mjestu Divi. Predlažemo da ga dodate na testno mjesto kako ne biste ništa zabrljali na aktivnom web mjestu.

Da biste uvezli model ladice sa fiksnim podnožjem, na vlastito web mjesto, raspakirajte preuzimanje ZIP datoteke kako biste pristupili JSON datoteci.

Zatim idite na WordPress nadzornu ploču i idite na Divi> Graditelj tema.

Zatim kliknite ikonu prenosivosti u gornjem desnom dijelu stranice.

U prozoru prenosivosti odaberite JSON datoteku koju ste upravo raspakirali i odaberite opciju "Preuzmi sigurnosnu kopiju prije uvoza", samo u slučaju da ste prethodno imali nešto u zadanom predlošku web stranice, a niste. nije želio zamijeniti.

Zatim kliknite na gumb Uvezi.

Uvoz modela divi

Na kraju, spremite promjene u generatoru tema i prikažite stranicu uživo da biste vidjeli fiksnu traku podnožja.

Spremi promjene izgleda divi-a

A sad na tutorial, u redu?

1. dio: Dodavanje globalnog podnožja

Generator tema Divi omogućuje vam da zamijenite zadani podnožje novim ažuriranjem zadanog predloška web stranice.

Da biste stvorili globalno podnožje, idite na nadzornu ploču WordPressa i idite na Divi> Graditelj tema. Zatim kliknite prostor "Dodaj globalno podnožje" unutar zadanog predloška web stranice.

Izbor uređivača Divi

Zatim s padajućeg popisa odaberite opciju "Build Global Footer".

Dodajte podnožje modela divi

Dodajte unaprijed definirani izgled globalnom izgledu podnožja

Ovo će rasporediti Uređivač izgleda modela gdje će se odmah zatražiti tri izbora kako želite započeti izgradnju. Odaberite opciju "Odabir unaprijed definiranog izgleda".

Odaberite unaprijed izrađeni model divi

U skočnom prozoru Učitaj iz biblioteke pronađite izgled odredišne ​​stranice pribora. Zatim kliknite "Koristi ovaj izgled".

Koristite divi model

Uklonite neželjeni sadržaj iz unaprijed pripremljenog izgleda

Nakon što se raspored učita u uređivač, proširite skočni okvir Slojevi klikom na ikonu slojeva u izborniku postavki. Zatim izbrišite sve odjeljke izgleda osim zadnja dva.

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

Izbrišite nepotrebni odjeljak

Pomaknite i označite dva odjeljka

Nakon uklanjanja odjeljaka trebali biste imati dva odjeljka, jedan pod nazivom "Podnožje", a drugi s naslovom "Kako to radi". Pomaknite odjeljak "Podnožje" na vrh izgleda.

Podnožje Divi

Promijenite tekst u donjem odjeljku tako da glasi "Ladica podnožja". Ovo će biti odjeljak koji ćemo koristiti kao sadržaj naše ladice s podnožjem.

Izmijenite oznaku podnožja divi

Dio 2: Izrada ladice sa stalnim podnožjem

Sad kad smo jedan od odjeljaka odredili za podnožje, a drugi za ladicu podnožja, spremni smo započeti izgradnju naše fiksne ladice za podnožje. Krenimo od stvaranja ikone zamućenja kojom ćemo prebacivati ​​ladicu podnožja.

Stvaranje gumba ladice za podnožje

Dodajte novi redak

U donjem dijelu podnožja dodajte novi redak stupcu.

fiksna ladica za noge

Označite novi red "Gumb ladice", jer će to biti redak koji će sadržavati gumb koji se koristi za prebacivanje ladice u položaj za otvaranje i zatvaranje. Zatim pomaknite liniju na vrh odjeljka.

Izbor izgleda divi

Podstava za redove

Prije dodavanja modula, otvorite postavke retka i ažurirajte udaljenost na sljedeći način:

  • Padding: 0px visoko, 0px low
Razmak divi konfiguracije

Obloga odsjeka

Zatim otvorite postavke u odjeljku "Footer ladica" i ažurirajte obloge na sljedeći način:

Konfiguracija razmaka odjeljka Divi

Da bismo stvorili gumb na koji je moguće kliknuti koji prebacuje ladicu podnožja, upotrijebit ćemo modul za zamućivanje s ikonom. I dat ćemo mu jedinstveni oblik kapljica vode kombinirajući kvadratni oblik spremnika mahune Blurb s ikonom kruga.

Evo kako.

Dodajte modul Blurb

Dodajte prezentacijski tekstualni modul u liniju "Gumb za crtanje" na vrhu odjeljka.

Podnožje ladica divi
Sadržaj / ikona zamućenja

Zatim uklonite zadani sadržaj naslova i sadržaja i odaberite ikonu strelice koja pokazuje na gornji lijevi kut (pogledajte snimku zaslona). Koristimo djelomično rotiranu ikonu jer ćemo je kasnije zakrenuti.

Odaberite ikonu podnožja ladice divi
Dizajn zamućenja

Zatim dodajte tekst prezentacije na sljedeći način:

  • Boja pozadine: # 081540
Izmijeni pozadinu divi

Zatim ažurirajte parametre dizajna na sljedeći način:

  • Boja ikone: #eeeeee
  • Ikona kruga: DA
  • Boja kruga: # 081540
  • Koristite veličinu fonta ikone: DA
  • Veličina fonta ikone: 17 piksela
Prilagodite gumb za diviziju zamućenja
Veličina teksta prezentacije

Sada dodajte modulu visinu i širinu kako slijedi:

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

  • Širina: 30px
  • Visina: 30px

To će dovesti do prelijevanja ikone kruga u tekstualni spremnik da bi se stvorio oblik kapljice vode.

Uređivanje dizajna divi gumba
Položaj zamućenja

Zatim postavite prezentacijskom tekstu apsolutnu poziciju u gornjem centru odjeljka.

  • Pozicija: Apsolutno
  • Lokacija: Top Center
Izmijenite položaj gumba
Postavke transformacije zamućenja

Sada možemo koristiti opcije pretvorbe za zakretanje zamućenja / ikone prema gore i postavljanje odmah iznad spremnika odjeljka. Sada kada sakrijemo odjeljak ispod prozora preglednika, ikona će ostati vidljiva / na nju se može kliknuti.

Ažurirajte sljedeće stavke:

  • Os Transform Translate X: -50%
  • Transformacija prevođenja Y osi: -250%
  • Transformacija rotacije Z osi: -45 stupnjeva

Zatim uklonite zadanu animaciju ikone:

  • Animacija slike / ikona: nema animacije
Gumb za povratak na divi

Koristit ćemo JQuery za prebacivanje ladice, pa moramo tekst / ikonu ciljati kao element na koji se može kliknuti s CSS klasom koju ćemo koristiti kasnije u kodu. Dodajte sljedeću CSS klasu:

  • CSS klasa: ciljna ladica
Definirajte divi selektor

Postavke odjeljka fioke podnožja

Sada ćemo sakriti odjeljak "Ladica podnožja" pomoću opcije translate transform. Otvorite postavke odjeljka i ažurirajte sljedeće:

  • Preobrazi prevoditelj Y os: 100%

Ljepota korištenja transformacije ovdje je u tome što se postotne vrijednosti temelje na stvarnoj veličini predmeta. Dakle, 100% na osi Y bit će izravno u odnosu na visinu presjeka (nomatter što je to u bilo kojem trenutku). Drugim riječima, element će se premjestiti na točnu udaljenost kao vlastitu visinu.

Transformirati odjeljak divi

Da bi se "Ladica podnožja" vratila u prikaz, trebat ćemo obrnuti prijevod transformacije koji smo upravo dodali u odjeljak. Da bismo to učinili, morat ćemo ciljati element s CSS klasom i onemogućiti transformaciju prijevoda klikom na ikonu (vratiti cijeli odjeljak u prvobitni položaj).

Dodajte CSS klasu u odjeljak ladice podnožja

Ispod napredne kartice dodajte sljedeću CSS klasu:

  • CSS klasa: has-transform
Dodaj klasa ima divi transformacije

Odjeljak ladice podnožja Fiksni položaj

Za posljednji korak ladicu podnožja moramo popraviti tako da ona (s ikonom) pluta na dnu prozora preglednika.

Ažurirajte položaj odjeljka "Footer Footer" na sljedeći način:

  • Pozicija: fiksno
  • Lokacija: donje lijevo
  • Z indeks: 13
Izmijenite položaj na uglu divi

Isključite mobilni sadržaj

Budući da ćete imati ograničenu količinu sadržaja ladice u podnožju koja će odgovarati i tabletu i telefonu (zbog ograničene visine zaslona), morat ćete onemogućiti / sakriti nebitne stavke sa zaslona. U ovom ćemo primjeru sakriti srednji red izgleda odjeljka.

Sakrij odjeljak na mobitelu

Otvorite postavke od drugog do posljednjeg retka u odjeljku "Ladica podnožja". Na kartici Napredno ažurirajte opciju vidljivosti da biste isključili liniju na telefonu i tabletu.

Odjeljak za kontrolu vidljivosti

Dodavanje prilagođenog koda

Da bismo dodali funkciju klikanja i prebacivanja u ladicu podnožja, na stranicu moramo dodati prilagođeni CSS i JQuery. Da biste to učinili, stvorite novi modul koda ispod modula Blurb koji se koristi za gumb.

Dodajte kod modula

Zatim na područje koda zalijepite sljedeći kôd:

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Dodaj modul divi koda

Spremite promjene

Ne zaboravite spremiti izgled prije izlaska iz uređivača.

Spremi izmjene divi

Također spremite promjene u generatoru tema.

Spremi promjene

Konačni rezultat

Sada možemo pogledati bilo koju stranicu na vašoj web stranici da bismo vidjeli konačni rezultat.

Završne misli

Nadam se da vam plutajuća ladica podnožja pomaže u promociji sadržaja na zabavan i pristupačan način. Kao i svaku ladicu, možete je napuniti gotovo svime što vam padne na pamet.

Ostali resursi

Ovdje je popis udžbenika koji vam mogu pomoći da postignete više s unutarnjim značajkama Divi-ja.

Prevedeno sa: Elegantan Teme

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti