Sertarele de jos sunt completări utile la oricare site-ul web, deoarece stochează conținut suplimentar ușor accesibil de către utilizatori. 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 plasând cursorul peste ele. Este ca și cum ai avea puțină rezervă pentru conținut premium.
În acest tutorial, vom proiecta un sertar de subsol plutitor în Divi. Vom adăuga sertarul de subsol în zona globală a subsolului șablon de site astfel încât sertarul de subsol să fie accesibil la nivelul întregului site cu conținut normal de subsol.
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 model va înlocui șablon de site implicit (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 încurcați nimic pe un site live.
Pentru a importa singur șablonul de sertar de subsol fix site-ul web, dezarhivați fișierul zip descărcat 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 backup înainte de import”, doar în cazul în care ați avut anterior ceva în șablon de site implicit pe care nu ați vrut să o înlocuiți.
Apoi faceți clic pe butonul Import.
Î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ă.
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.
Apoi selectați opțiunea „Build Global Footer” din lista derulantă.
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”.
Î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”.
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ă.
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.
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.
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ă.
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.
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ă
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ă:
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.
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.
Design Blurb
Apoi, dați textul de prezentare după cum urmează:
- Culoare fundal: # 081540
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
Dimensiunea textului de prezentare
Acum acordați modulului o înălțime și o lățime după cum urmează:
- 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ă.
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
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
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ă
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.
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
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
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.
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ă.
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.
Apoi lipiți următorul cod în zona codului:
.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 );
Salvați modificările
Nu uitați să salvați aspectul înainte de a ieși din editor.
De asemenea, salvați modificările generatorului de temă.
Rezultat final
Acum putem merge la orice pagină a dvs site-ul web pentru a vedea rezultatul final.
Ultimele gânduri
Sper că sertarul de subsol plutitor vă va ajuta promova conținut î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.
- Cum se creează o casetă de instrumente temă pe Divi
- Cum se creează o secțiune promoțională animată pe Divi
- Cum să personalizați rețelele pe Divi
Tradus din: Elegant Themes
