Treci la conținutul principal

Cum se creează sertarele animate pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Sertarele de subsol sunt completări utile pentru orice site web, deoarece stochează conținut suplimentar care este ușor accesibil utilizatorilor. Sertarele de subsol sunt containere de conținut web (cum ar fi o secțiune Divi) care pot fi deschise și închise făcând clic pe un buton sau trecând deasupra acestuia. Este ca și cum ai avea o mică rezervă pentru conținutul premium.

În acest tutorial, vom proiecta un sertar de subsol flotant în Divi. Vom adăuga sertarul subsolului în zona de subsol generală a șablonului site-ului web, astfel încât sertarul subsolului să fie accesibil la nivel de site, cu conținutul subsolului normal.

Odată cu procesul pe care îl vom folosi, orice secțiune Divi (și conținutul acesteia) poate fi convertită într-un sertar de subsol în câteva minute.

Cum să adăugați șablonul de sertar de subsol pe site-ul dvs. Divi

Adăugarea acestui șablon va înlocui șablonul implicit al site-ului web (dacă aveți unul) pe site-ul dvs. Divi. Vă sugerăm să îl adăugați la un site de testare, astfel încât să nu deranjați nimic pe un site live.

Pentru a importa modelul de sertar de subsol fix pe propriul site web, decupsați fișierul zip de descărcare pentru a accesa fișierul JSON.

Apoi accesați tabloul de bord WordPress și accesați Divi> Theme Builder.

Apoi faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.

În fereastra de portabilitate, alegeți fișierul JSON pe care tocmai l-ați dezarhivat și selectați opțiunea „Descărcați copiile de rezervă înainte de import”, doar în cazul în care anterior ați avut ceva în șablonul de site implicit pe care nu l-ați făcut. nu a vrut să înlocuiască.

Apoi faceți clic pe butonul Import.

Importați modelul divi

În cele din urmă, salvați modificările generatorului de temă și afișați o pagină live pentru a vedea bara de subsol fixă.

Salvați modificările aspectului divi

Acum trecem la tutorial, bine?

Partea 1: Adăugarea unui subsol global

Generatorul de teme Divi vă permite să înlocuiți subsolul implicit cu unul nou, actualizând șablonul implicit al site-ului web.

Pentru a crea un subsol global, accesați tabloul de bord WordPress și accesați Divi> Theme Builder. Apoi faceți clic pe spațiul „Adăugați subsol global” din șablonul de site implicit.

Selecție editor Divi

Apoi selectați opțiunea „Build Global Footer” din lista derulantă.

Adăugați un subsol pentru modelul divi

Adăugați un aspect predefinit la un aspect de subsol global

Aceasta va implementa Editorul de aspect al modelului, unde vi se va solicita imediat cele trei opțiuni pentru modul în care doriți să începeți construirea. Selectați opțiunea „Alegeți un aspect predefinit”.

Alegeți modelul divi preconstruit

În fereastra pop-up Încărcare din bibliotecă, găsiți aspectul paginii de destinație pentru papetărie. Apoi faceți clic pe „Utilizați acest aspect”.

Folosiți un model divi

Eliminați conținutul nedorit din aspectul prematur

Odată ce aspectul este încărcat în editor, extindeți caseta pop-up Straturi făcând clic pe pictograma straturi din meniul de setări. Apoi ștergeți toate secțiunile aspectului, cu excepția ultimelor două.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Ștergeți secțiunea inutilă

Deplasați și etichetați cele două secțiuni

Odată ce secțiunile sunt eliminate, ar trebui să aveți două secțiuni, una intitulată „subsol” și cealaltă intitulată „Cum funcționează”. Mutați secțiunea „subsol” în partea de sus a aspectului.

Subsol Divi

Schimbați formularea din secțiunea inferioară pentru a citi „Footer Drawer”. Aceasta va fi secțiunea pe care o vom folosi ca conținut al sertarului de subsol.

Modificați eticheta subsolului divi

Partea 2: Crearea sertarului de subsol fix

Acum că am desemnat una dintre secțiuni drept subsol și cealaltă ca sertar subsol, suntem gata să începem să construim sertarul nostru subsol fix. Să începem prin a crea pictograma blurb pe care o vom folosi pentru a comuta sertarul subsolului.

Crearea butonului sertarului de subsol

Adăugați o linie nouă

În secțiunea de subsol de jos, adăugați un nou rând într-o coloană.

sertar pentru picioare fix

Etichetați noul rând „Buton sertar”, deoarece acesta este rândul care va conține butonul folosit pentru a comuta sertarul deschis și închis. Apoi mutați linia în partea de sus a secțiunii.

Aspect selecție divi

Acoperire cu rânduri

Înainte de a adăuga un modul, deschideți setările rândului și actualizați umplutura după cum urmează:

  • Garnitură: 0px înaltă, 0px mică
Spațiere divi configurație

Căptușeală de secțiune

Apoi, deschideți setările din secțiunea „Sertarul pentru subsol” și actualizați căptușeala după cum urmează:

Configurarea distanțării secțiunii Divi

Pentru a crea butonul pe care se poate face clic, care comută sertarul subsolului, vom folosi un modul blurb cu o pictogramă. Și, îi vom oferi o formă unică de picătură de apă, combinând forma pătrată a containerului Blurb cu pictograma cerc.

Iată cum.

Adăugați un modul Blurb

Adăugați un modul de prezentare text la linia „Butonul sertarului” din partea de sus a secțiunii.

Sertar de subsol divi
Conținut / pictogramă blurb

Apoi, eliminați titlul implicit și conținutul corpului și selectați pictograma săgeată care indică colțul din stânga sus (vedeți captura de ecran). Folosim pictograma parțial rotită pentru că o vom roti mai târziu.

Alege pictograma subsol sertar divi
Design Blurb

Apoi, dați textul de prezentare după cum urmează:

  • Culoare fundal: # 081540
Modificați fundalul Divi

Apoi actualizați parametrii de proiectare după cum urmează:

  • Culoarea pictogramei: #eeeeee
  • Pictograma cercului: DA
  • Culoarea cercului: # 081540
  • Utilizați dimensiunea fontului pictogramei: DA
  • Dimensiunea fontului pictogramei: 17 pixeli
Personalizați butonul Divi blurb
Dimensiunea textului de prezentare

Acum acordați modulului o înălțime și o lățime după cum urmează:

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Lățime: 30px
  • Înălțime: 30px

Acest lucru va face ca pictograma cercului să se revarsă în containerul de text pentru a crea forma picăturii de apă.

Editați designul butonului divi
Poziția blurb

Apoi, oferiți textului de prezentare o poziție absolută în centrul de sus al secțiunii.

  • Poziție: Absolut
  • Locație: Centru de sus
Modificați poziția butonului divi
Setări de transformare blurb

Acum putem folosi opțiunile de transformare pentru a roti blurb / pictograma în sus și să o poziționăm chiar deasupra containerului secțiunii. Acum, când ascundem secțiunea sub fereastra browserului, pictograma va rămâne vizibilă / clicabilă.

Actualizați următoarele elemente:

  • Transformă axa X tradusă: -50%
  • Transformați axa Y: -250%
  • Transformă rotația axei Z: -45 grade

Apoi eliminați animația implicită a pictogramei:

  • Imagine / Icon Animation: Fără animație
Butonul Divi Return

Vom folosi JQuery pentru a comuta sertarul, așa că trebuie să vizăm textul / pictograma ca element clicabil cu o clasă CSS pe care o vom folosi mai târziu în cod. Adăugați următoarea clasă CSS:

  • Clasa CSS: sertar țintă
Definiți un selector div

Setări ale secțiunii sertarului

Acum vom ascunde secțiunea „Footer Drawer” folosind opțiunea de transformare a traducerii. Deschideți setările secțiunii și actualizați următoarele:

  • Transformă axa Y tradusă: 100%

Frumusețea utilizării transformării aici este că valorile procentuale se bazează pe dimensiunea reală a articolului. Astfel, 100% pe axa Y va fi direct relativă la înălțimea secțiunii (numește ce este la un moment dat). Cu alte cuvinte, elementul va fi deplasat în jos pe distanța exactă ca înălțime proprie.

Transformați secțiunea divi

Pentru a readuce Footer Drawer înapoi la vedere, va trebui să inversăm traducerea de transformare pe care tocmai am adăugat-o în secțiune. Pentru a face acest lucru, va trebui să vizăm elementul cu o clasă CSS și să dezactivăm transformarea traducerii făcând clic pe pictogramă (readuceți întreaga secțiune în poziția sa originală).

Adăugați o clasă CSS în secțiunea sertarului de subsol

Sub fila avansată, adăugați următoarea clasă CSS:

  • Clasa CSS: has-transform
Add class are transformare divi

Secțiunea sertarului de subsol Poziție fixă

Pentru ultimul pas, trebuie să fixăm sertarul subsolului astfel încât acesta (cu pictograma) să plutească în partea de jos a ferestrei browserului.

Actualizați poziția secțiunii "Sertar pentru subsol" după cum urmează:

  • Poziție: fix
  • Locație: stânga jos
  • Indicele Z: 13
Modificați poziția pe colțul divi

Dezactivați conținutul mobil

Deoarece veți avea o cantitate limitată de conținut de sertar de subsol care se va potrivi atât cu tableta, cât și cu telefonul (din cauza înălțimii limitate a ecranului), va trebui să dezactivați / ascundeți elementele neesențiale de pe afișaj. În acest exemplu, vom ascunde rândul din mijloc al aspectului secțiunii.

Ascunde secțiunea de pe mobil

Deschideți setările de la al doilea până la ultimul rând din secțiunea „Footer Drawer”. Sub fila avansată, actualizați opțiunea de vizibilitate pentru a opri linia de pe telefon și tabletă.

Controlați vizibilitatea secțiunii divi

Adăugarea codului personalizat

Pentru a adăuga funcționalitatea de clic și comutare în sertarul de subsol, trebuie să adăugăm CSS și JQuery personalizate la pagină. Pentru a face acest lucru, creați un nou modul de cod sub modulul Blurb utilizat pentru buton.

Adăugați codul modulului

Apoi lipiți următorul cod în zona codului:

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

.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 );   
Adăugați un modul de cod Divi

Salvați modificările

Nu uitați să salvați aspectul înainte de a ieși din editor.

Salvați modificările divi

De asemenea, salvați modificările generatorului de temă.

Salvează modificările

Rezultat final

Acum putem accesa orice pagină de pe site-ul dvs. web pentru a vedea rezultatul final.

Ultimele gânduri

Sper că sertarul de subsol plutitor vă ajută să promovați conținutul într-un mod distractiv și accesibil. Ca orice sertar, îl puteți umple cu aproape orice vă puteți gândi.

Alte resurse

Iată o listă de tutoriale care vă pot ajuta să realizați mai multe caracteristici interne ale Divi.

Tradus din: Elegant Themes

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top