Cum să utilizați CSS pentru a împinge subsolul în partea de jos a ferestrei browserului. Tot ce trebuie să știți despre designul subsolului paginii de destinație Subsolul potrivit

Bună ziua, dragi cititori ai site-ului blogului. Continuăm subiectul aspectului bloc, care a fost început și continuat în cele trei articole precedente. În principiu, am reușit deja să creăm atât un aspect de site cu două, cât și trei coloane și chiar am reușit să luăm în considerare nuanțele creării unui aspect fluid.

În plus, în primele articole dedicate aspectului site-ului (), unele Noțiuni de bază webmastering, fără a înțelege care ar fi destul de greu de înțeles nuanțele.

Ce probleme am avut cu aspectul site-ului nostru?

Astăzi vom încerca să rezolvăm o mică problemă care poate apărea cu aspectul pe care l-am creat mai devreme. Cel mai adesea, această situație apare la vizualizarea lui pe monitoare mari (cu rezoluție mare) și la afișarea unei pagini cu o cantitate mică de informații.

În acest caz, se poate dovedi că subsolul nu va fi apăsat în partea de jos a ecranului, ci va fi situat aproape la mijlocul înălțimii sale, care în cele mai multe cazuri va arăta urât și nu va fi plăcut din punct de vedere estetic.

Totuși, în opinia mea, este necesar să apăsați subsolul în partea de jos a aspectului site-ului, iar acest lucru va fi valabil mai ales în cazul în care înălțimea paginii este mai mică decât înălțimea ecranului utilizatorului. Aceasta poate fi reprezentată schematic astfel:

Acestea. comportamentul corect de subsol pentru cazul unei cantități mici de informații de pe pagină și ecran mare utilizatorul va fi după cum urmează:

Pentru a implementa acest lucru, trebuie să efectuăm o serie de manipulări cu codul aspectului nostru. Mai mult, vom face modificări nu numai la fișierul de stil Stilul CSS Style.css, dar și în Index.html care conține cod HTMLși formând blocuri Div. Dar mai întâi lucrurile.

Ca exemplu, vom folosi aspectul site-ului web cu trei coloane pe care l-am creat mai devreme. În acest caz, Index.html va arăta astfel:

Antet Antet Conținutul paginii Conținutul paginii Conținutul paginii Conținutul paginii Subsol

Și în fișierul Style.css au fost scrise următoarele Proprietăți CSS A:

Corp, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( lățime:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (culoare de fundal:#FFC0FF; clar:ambele; )

Ei bine, aspectul în sine arăta cam așa:

După cum puteți vedea, subsolul nu este apăsat în jos și, prin urmare, nu îndeplinește cerințele noastre (este întotdeauna situat sub coloana cea mai de jos), așa că va trebui să facem ajustări la cod. Același lucru se poate face pentru un aspect cu două coloane și, de asemenea, pentru un aspect din cauciuc. Metoda este universală.

Cum să împingeți subsolul în partea de jos a aspectului site-ului web

Deci, trebuie să mutăm containerul Div cu subsolul în partea de jos a ecranului. Pentru a face acest lucru, va trebui mai întâi să setați înălțimea întregii pagini la sută la sută (va ocupa întregul ecran). Acest lucru va fi necesar pentru a schimba apoi dimensiunea blocului principal cu aspectul la 100%.

Întregul conținut al paginii site-ului este plasat în etichetele Body de deschidere și de închidere și, prin urmare, trebuie să adăugăm o altă proprietate CSS pentru eticheta Body în Style.css, setând înălțimea la 100%:

Corp, html ( margin:0px; padding:0px; înălțime: 100%; )

Pe aspect Acest lucru nu va avea încă niciun efect, dar acum blogul principal poate fi extins la toată înălțimea ecranului. Acestea. a fost un fel de etapă pregătitoare.

Proprietățile CSS de bază, dacă doriți, puteți să vă uitați la. Acum să setăm containerul Div care conține întregul nostru aspect la o înălțime minimă de 100%:

De asemenea, vreau să-l evidențiez (div cu id="maket"). Pentru a face acest lucru, îi voi da un cadru folosind proprietatea Border() corespunzătoare:

Proprietatea chenar: negru solid 3px vă permite să setați un chenar solid (solid) cu o grosime de 3 pixeli în negru pentru acest container. Acest lucru vă va permite să vedeți clar că containerul cu aspectul s-a întins pe toată înălțimea ecranului, chiar și cu o cantitate mică de informații pe pagină:

Acum va trebui să scoatem blocul de subsol din containerul general și să îl așezăm dedesubt, imediat după cel general. Ce va da? Și faptul că, în cele din urmă, subsolul din layout se va demni să coboare și nu va fi, ca înainte, apăsat pe cea mai lungă coloană a sa. În acest caz, Index.html va arăta astfel:

Titlu Antet Meniu coloană din stânga Meniu Meniu Meniu coloană din dreapta Meniu Meniu Meniu Meniu Pagină Cuprins Pagină Cuprins Subsol

Vă rugăm să rețineți că blocul cu subsolul nu se mai află în interiorul containerului general (maket) și, prin urmare, lățimea acestuia nu mai este reglementată de proprietățile CSS specificate pentru maket în fișierul Style.css. Lățimea subsolului se va întinde pe întregul ecran, dar va fi în continuare situat în partea de jos a ecranului, imediat sub blocul principal:

Dar din nou apare o problemă, deoarece pentru a vedea subsolul, acum trebuie să defilați ecranul în browser (vezi bara de defilare din imaginea de mai sus).

Acest lucru se întâmplă deoarece containerul principal (maket) ocupă întreaga înălțime a ecranului (acest lucru este determinat de proprietatea min-height: 100%), iar subsolul este situat imediat în spatele lui și pentru a-l vizualiza va trebui să derulați, care nu este foarte convenabil și funcțional.

Puteți rezolva această problemă setând o umplutură negativă pentru containerul Div cu subsolul, astfel încât acesta să se miște în sus cu o distanță egală cu înălțimea sa. În acest caz, containerul de subsol se va suprapune pe cel principal și se va potrivi în înălțimea ecranului browserului (adică nu va trebui să derulați pentru a-l vizualiza).

Dar pentru a seta un offset negativ din partea de sus, trebuie să cunoașteți chiar această înălțime a subsolului, dar nu o știm încă.

Prin urmare, mai întâi vom seta înălțimea containerului care conține subsolul setând proprietatea corespunzătoare în Style.css:

#footer(culoarea fundalului:#FFC0FF; clar:ambele; înălțimea: 50px; )

Și apoi îi setăm o marjă negativă în partea de sus la o înălțime egală cu înălțimea sa:

Acest lucru va permite subsolului să se ridice exact la înălțimea sa și astfel să se potrivească în ecranul browserului (acum puteți elimina CSS-ul proprietate de frontieră: negru solid 3px de la regula pentru maket, astfel încât grosimea cadrului să nu împiedice întregul nostru aspect, inclusiv subsolul, să se potrivească în înălțimea ecranului):

După cum puteți vedea, acum bara de defilare nu apare în browser și întregul nostru aspect al site-ului pe trei coloane, bazat pe blocuri, se potrivește pe un singur ecran (în cazul în care există puține informații pe pagină) și are un subsol situat în partea de jos. . Ceea ce era exact ceea ce trebuia să facem.

Introducem distanțierul și ne luptăm cu Internet Explorer

Dar apare o problemă care va apărea doar atunci când există mai multe informații pe pagina de aspect și poate apărea următoarea situație:

Se pare că poate apărea o situație când informațiile dintr-una dintre coloanele de aspect se suprapun subsolului, ceea ce nu va arăta frumos. Acest lucru se întâmplă din cauza căptușelii negative notorii pe care i-am stabilit-o și care ne-a ajutat să ridicăm subsolul față de containerul principal.

Acestea. Se pare că în partea de jos a ecranului există două blocuri care se suprapun unul pe celălalt în zona subsolului.

Soluția la această problemă este să adăugați un nou container Div gol (așa-numitul spacer) la containerul principal al layout-ului nostru (maket), în locul în care a fost localizat anterior blocul cu subsolul.

Setând acest nou container la o înălțime egală cu înălțimea subsolului, putem evita ca informațiile din containerul principal să se ciocnească de blocul cu subsolul. Să atribuim un ID () acestui container numit Rasporka și, ca rezultat, Index.html al aspectului nostru cu trei coloane va arăta astfel:

Antet Antet Coloana din stânga Meniu Meniu Meniu Meniu Coloana din dreapta Meniu Meniu Meniu Meniu Conținutul paginii Conținutul paginii Conținutul paginii Pagini Pagini Pagini Pagini Subsol

Și în Style.css vom scrie pentru aceasta ( , care setează înălțimea acestui container de distanță egală cu înălțimea subsolului:

#rasporka ( înălțime: 50px; )

Ca urmare, subsolul va fi apăsat de jos nu către informațiile conținute în containerul principal (de exemplu, textul din coloana cea mai înaltă), ci către o zonă egală cu înălțimea subsolului cu un container de distanță care nu conține informații. .

În acest fel, evităm coliziunile și distorsiunile în aspectul nostru pe trei coloane. Totul va fi clar și frumos (delicat și nobil):

După cum am menționat mai sus, lățimea subsolului trebuie acum setată separat, deoarece... acest container nu mai face parte din cel principal. Pentru a face acest lucru, trebuie să adăugați proprietăți suplimentare pentru subsolul fișierului CSS, permițându-vă să setați lățimea și să o aliniați orizontal în mijlocul ecranului.

Este logic să setați lățimea egală cu lățimea întregului aspect folosind proprietatea Width, iar alinierea orizontală poate fi făcută în același mod ca și pentru întregul aspect pe aspectul blocului.

Astfel, va trebui să adăugăm proprietăți suplimentare pentru ID Footer:

#footer( culoarea fundalului:#FFC0FF; clar:ambele; înălțimea: 20px; margin-sus:-20px; lățime: 800px; margin-left: automat; margin-right: automat; )

Folosind proprietatea width:800px, lățimea este setată la 800 pixeli, iar folosind cele două proprietăți margin-left: auto și margin-right: auto, indentarea la stânga și la dreapta subsolului este setată automat, ca urmare a care aceste liniuțe vor fi egale și eroul nostru va fi aliniat la mijloc:

Ei bine, se pare că nu mai este nimic de îmbunătățit, dar nu a fost cazul. Ca întotdeauna, browserul nostru preferat Internet Explorer 6 nu înțelege ceva din proprietățile CSS pe care le folosim. În acest browser (și, poate, în unele altele vechi), în ciuda tuturor eforturilor noastre, subsolul nu va fi apăsat în partea de jos, ci va rămâne în continuare pe coloana cea mai înaltă a aspectului site-ului.

Toate acestea se întâmplă pentru că ( nu înțelege proprietatea min-height: 100%, pe care am folosit-o pentru a seta înălțimea minimă a blocului principal egală cu înălțimea ecranului.

Prin urmare, pentru a rezolva această problemă va trebui să folosim un așa-numit hack care ne permite să explicăm (pe degetele noastre) browserelor mai vechi ce să facem. Inainte de lista de CSS proprietăți pentru maket, va trebui să inserați următoarea combinație:

* html #maket ( înălțime: 100%; )

Această regulă se va aplica numai pentru motor de cautare Explorer 6, restul nu îl va lua în calcul și îl va implementa.

Deci, aspectul final al Style.css cu subsolul apăsat în partea de jos a ecranului va fi după cum urmează:

Corp, html ( margin: 0px; padding: 0px; înălțime: 100%; ) * html #maket ( înălțime: 100%; ) #maket ( lățime: 800px; margine: 0 auto; min-height: 100%; ) # antet( culoarea fundalului:#C0C000; ) #stânga( culoarea fundalului:#00C0C0; lățime:200px; float:left; ) #right( lățime:200px; culoarea fundal:#FFFF00; float:right; ) #conținut (culoare de fundal:#8080FF; margine-stânga:202px; margine-dreapta:202px; ) #footer( culoarea fundalului:#FFC0FF; clear:both; înălțime: 50px; margin-top:-50px; lățime:800px; margin-left: auto; margin-right: auto; ) #rasporka ( înălțime: 50px; )

Ei bine, forma finală a Index.html a fost dată chiar mai sus. Asta e tot, această serie de articole dedicate aspectului bloc al amenajărilor site-urilor fixe și fluide cu 2 și 3 coloane poate fi considerată completă.

De asemenea, puteți viziona videoclipul „Working with Etichetă HTML div":

Multă baftă! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Aspect bloc - Creăm machete pe două, trei coloane și fluide pentru site
Aspect DiV - Creați blocuri pentru un aspect cu două coloane în HTML, determinați dimensiunile acestora și setați poziționarea în CSS

Dacă pantofii sunt componenta finală a oricărei ținute, atunci subsolul unui site de comerț electronic este elementul final al designului său de vânzare. Concentrându-se pe elementul de jos, subsolul, site-urile web moderne sunt gata să-și arate personalitatea în toate modurile posibile. Într-un mediu competitiv de comerț electronic, există suficient idei originale, creativitate și tendințe de design. Înainte de a diversifica subsolul unui site de comerț electronic, merită luate în considerare puncte importante. Ce să plasezi primul și care este cel mai bun mod de a face acest lucru? Rezumatul nostru de modele inspiratoare de subsol are câteva opțiuni interesante.

Citește și: 13 tendințe de marketing e-commerce din 2019

Statistici interesante de la Chartbeat. Un studiu al comportamentului a 25 de milioane de utilizatori a arătat cât de adânc navighează pe pagini. Se pare că atenția utilizatorului este atrasă de spațiul de sub linia de pliere. Primind informații mai utile practic, vizitatorii zăbovesc cel mai mult în zona de 1200px din partea de sus a paginii (cu un ecran vertical mediu de 700px în browser) sau în spatele celui de-al doilea ecran.

Vizualizare timp (sec.) / Distanța de la partea de sus a paginii (pixeli)

Există un decalaj mare în durata de vizualizare a primului și celui de-al doilea ecran. TOP-ul este de 4 secunde, durata ajunge la maxim (16 secunde) la 1200 pixeli de sus și odată cu derularea în continuare, scade încet.

Ponderea vizitatorilor (%) / Distanța față de partea de sus a paginii (pixeli)

O parte semnificativă a vizitatorilor (mai mult de 25%) nici măcar nu așteaptă să se încarce conținutul și să înceapă derularea paginii. Acest lucru înseamnă că doar 75% vor vedea primul foarte sus. Zona cea mai vizualizată a paginii este de 550 px (chiar deasupra liniei de pliere).

Studiul înlătură mitul potrivit căruia utilizatorii nu derulează în partea de jos a paginii și nu urmăresc tot conținutul. Subsolul este, de asemenea, important pentru un site de comerț electronic modern și chiar are propriile sale avantaje.

Idei despre cum să proiectați un „subsol” (subsol), exemple de vânzare a modelelor

Aceste 10 sfaturi vă vor spune cum să proiectați frumos subsolul pentru un site web - conform regulilor de compunere în design web și rezolvarea sarcinilor prioritare. Aplicați cele mai potrivite tactici pentru a îmbunătăți gradul de utilizare, UX (experiența utilizatorului) și chiar pentru a crește vânzările.

1. Informații necesare

În mod tradițional, problemele organizatorice și legale necesare sunt acoperite în subsolul site-ului. Notificările sunt prezentate în text mai puțin vizibil, eliberând alte zone ale paginii pentru o atenție mai concentrată. elemente semnificative. Aici lista de mostre pentru considerare:

Notificări privind drepturile de autor
Declinări legale
Informații de facturare
Notificare privind cookie-urile

Site-ul web care vinde produsul trebuie să îndeplinească cerințele legale și să ofere informații despre procedură și perioadele de returnare. Locația sa în subsol este convenabilă atât pentru resursa de vânzare, cât și pentru vizitatori.

Exemplu de subsol: Yves Rocher

Magazin online marcă Yves Rocher: subsol pe ecran complet cu un design frumos de straturi alternative. Informează despre companie, infrastructura site-ului de vânzare - de la urmărirea comenzilor până la politica de date cu caracter personal. Există, de asemenea, sfaturi despre utilizarea produsului, bonusuri, promoții

Exemplu de subsol: Lumity

Dealerii de suplimente nutritive sunt supuși unor cerințe legale sporite. responsabilitate. Există destul de multe lucruri pe care ar trebui/nu ar trebui să le spună pe site-ul lor de vânzări. Linkurile către informații juridice sunt evidențiate cu caractere aldine pentru o mai bună vizibilitate.

Un subsol cu o imagine frumoasă de fundal se potrivește foarte organic în designul general al site-ului. Nu există o limită clară, mai degrabă conținutul în sine servește ca separator

Exemplu de subsol: Saddleback Leather Co

Un site web de vânzare cu un design retro frumos pentru antet și subsol. 100 de ani garanție împotriva defectelor de material și finisaj. Condițiile de retur sunt însoțite de povesti interesante... nu totul este atât de trist cu informațiile necesare de comerț electronic, se pare

2. Spațiu negativ – distanță vizuală suficientă

Când limitați numărul de link-uri de subsol, nu vă zgâriți cu spațiul negativ - acest lucru va avea un efect uimitor asupra percepției vizuale și va îmbunătăți lizibilitatea. Regula generala: Prin menținerea ierarhiei vizuale, elementele centrale sunt observate mai rapid (pot fi folosite în avantajul dumneavoastră!).

Exemplu de subsol: QUAY AUSTRALIA

Cu un stil minimalist și un meniu derulant fix, magazinul online își poate permite un subsol spațios

Exemplu de subsol: Incase

Despre cantitatea mare de spațiu micro-negativ (între elementele mici) putem spune așa: în timp ce toate informatie necesara este prezent, este lizibil și rapid perceput - totul este în regulă

Exemplu de subsol: Stumptown Coffee Roasters

Subsolul spațios al unui site de cafea este o completare excelentă a unei compoziții de design curate, în care există mult spațiu macronegativ („aer” între secțiuni/secțiuni)

3. Îndemn final la acțiune

Citește și: Peste 30 de exemple și idei pentru proiectarea butoanelor de acțiune țintă

Designul elegant al subsolului spune multe despre resursa în sine. Este important de reținut: cumpărătorul rămâne aici puțin mai mult decât în alte părți ale paginii. O oportunitate convenabilă pentru încă un apel final la acțiune. Adesea, acesta este un abonament/buletin informativ, dar puteți conecta și un apel CTA la înregistrarea contului.

Exemplu de subsol: Greetabl

Greetabl are o parte de jos a paginilor sale, care include un apel pentru abonare. Cu un minim de elemente, apelul devine vizibil și, în armonie cu fundalul turcoaz, se transformă într-un decor al site-ului

Exemplu de subsol: Ecwid

Design frumos cu îndemnuri în partea de jos a paginilor. Structura constructorului de site-uri web de vânzare este universală. A fost tradus în 35 de limbi pentru milioanele săi de clienți.

4. Cărucior plutitor – creșterea disponibilității funcționalității de vânzare

Accesarea coșului de cumpărături din partea de jos a site-ului este o modalitate excelentă de a îmbunătăți gradul de utilizare și calitățile de vânzare ale site-ului.

Exemplu de subsol: Lemonadela

Site-ul de vânzare al companiei de catering este plăcut la vedere și convenabil pentru cumpărător

5. Navigare subsol

Partea de jos a site-ului este ideală pentru informații care nu sunt vizualizate des: despre companie, termeni de utilizare și politica de confidențialitate. În acest caz, funcția subsolului este de a salva pe toată lumea. Simțindu-se pierdut în mediul de comerț electronic, cineva devine interesat de infrastructura comerțului electronic, derulând instinctiv mai departe...

Spațiul negativ este esențial pentru lizibilitatea conținutului. În general, „subsolul” nu este în scop de navigare, spre deosebire de un meniu sau o hartă a site-ului. Doar în cazuri rare, site-urile de comerț electronic plasează categorii individuale de produse în subsol (

Bună ziua, dragi cititori ai blogului. Astăzi vreau să vă vorbesc despre cum ar trebui să fie un subsol în designul web modern. De asemenea, vom analiza câteva exemple împreună cu dvs. și vom obține câteva sfaturi excelente pentru utilizare. :-)

Dacă ați observat deja că în ultimii ani tot mai multe subsoluri apar mai mari. Care, la rândul lor, oferă o navigare și o utilizare mai bună a site-ului. Desigur, ar fi mai corect să facem subsolul nu numai frumos, ci și mai convenabil, precum și funcțional. Cu alte cuvinte, totul depinde de designer.

Ei bine, acum să ne uităm la câteva exemple practice și frumoase:

Navigare pe site foarte convenabilă și completă.

După cum știți, pe aproape toate site-urile web puteți găsi o astfel de pagină „Hartă site-ului”. Aceasta este deja o opțiune de navigare învechită. De ce să nu faci o hartă mai condensată în subsolul site-ului, după părerea mea este foarte convenabilă și, de asemenea, nu trebuie să cauți tot felul de pagini cu navigare completă.

Navigarea cu funcții complete poate include mai mult de 50 de link-uri pe site, care, la rândul său, are un efect foarte bun asupra:

SEO. O astfel de navigare va facilita foarte mult utilizarea site-ului de către roboții de căutare și utilizatori.

Navigare îmbunătățită. Acest lucru îi obligă să vadă mai bine paginile site-ului dvs., deoarece ar putea ignora aceste pagini sau pur și simplu să nu le vadă. Aceasta, la rândul său, reduce rata de respingere.

Proprietarii de site-uri web adesea nu acordă atenție subsolului, crezând că nu oferă valoare: este situat chiar în partea de jos și, prin urmare, nu este interesant pentru utilizatori. Dar asta nu este adevărat. Un subsol proiectat corespunzător, cu un design atent, structură competentă și conținut necesar, va atrage atenția utilizatorului, îl va menține pe site și va coordona actiunile urmatoare. De aceea eficiența unui subsol bine construit este de netăgăduit.

În acest articol vă vom spune în detaliu ce este - un subsol de site, care este importanța acestuia și cum ar trebui să fie să lucrați pentru afacerea dvs.

Ce este un subsol, cât de important este și de ce?

Subsolul (subsolul, subsolul) unui site web este partea de jos a paginii, unde sunt afișate informații utile, dar nu primare. Aceasta poate fi absolut orice informație care poate fi de interes pentru publicul țintă, precum și informații care ar trebui să fie pe site, dar nu este rațional să o punem în meniul principal pentru a o păstra compactă și logică.

Un subsol bine optimizat va facilita navigarea pe site și va ajuta la atingerea obiectivelor de afaceri, deoarece este o sursă suplimentară de informații importante pentru utilizator dacă nu a găsit-o pe pagină.

Principalele avantaje ale fundului site-ului

Subsolul poate include absolut orice informație care ar putea fi de interes pentru utilizator: de la informații de contact până la link-uri către pagini cu servicii suplimentare ale companiei. Aceste elemente aduc o serie de beneficii în afaceri.

Concentrează-te pe ceea ce este important

Trebuie doar să lucrezi un pic de magie asupra designului subsolului, iar acesta va deveni principalul accent pe informații utile. Folosind subsolul, puteți spune clientului mai multe despre companie și activitățile acesteia, puteți oferi abonament la newsletter sau puteți oferi informații partenerilor folosind un link activ către paginile relevante. Subsolul simplifică navigarea pentru utilizator dacă trebuie să meargă la orice secțiune a site-ului. Pentru a face acest lucru, trebuie doar să selecteze linkul necesar la sfârșitul site-ului fără a derula în sus întreaga pagină. Prin urmare, este în zadar să credem că partea inferioară a site-ului este inutilă. Cu siguranță își va găsi utilizatorul, va atrage atenția și îl va păstra pe site.

Creșterea generației de clienți potențiali Maxim util și Informații importante

Toate informatii utile, care nu se încadrează în meniu sau nu este potrivit pentru specificul său, poate fi plasat în subsol. Dezvăluie informații juridice utilizatorului tău, atrage sponsori și parteneri și oferă link-uri utile pentru angajații companiei. Crede-mă, astfel de informații nu vor fi trecute cu vederea.

Navigare pe site

Dacă utilizatorul s-a mutat departe de antet (antetul site-ului) și se apropie de subsol, înseamnă că nu a găsit încă ceea ce este interesant și important pentru el. Deci, totul este în mâinile tale. Plasarea link-urilor de navigare va face mai ușor pentru potențialul dvs. client să găsească informațiile de care au nevoie și va prelungi timpul de utilizare a site-ului.

Captarea maximă a atenției

Subsolul reține atenția vizitatorului site-ului până în ultimul moment, ținând-o. Este ca și cum acordul final îi oferă utilizatorului o altă șansă de a obține informații valoroase. Și pentru ca acest lucru să funcționeze bine, trebuie doar să proiectați corect partea de jos a site-ului. Vă vom spune cum să faceți asta mai târziu.

Ce ar trebui să fie în subsolul site-ului?

Conținutul și designul subsolului site-ului sunt strâns legate. Designul întregului bloc depinde de ceea ce va fi plasat în această parte. Elementele de conținut depind de activitățile companiei și de caracteristicile publicului țintă. Vom enumera majoritatea articolelor care pot fi plasate în partea de jos a paginii. Tot ce trebuie să faci este să le alegi pe cele care sunt cele mai potrivite pentru cazul tău particular, în funcție de afacerea ta.

Drepturi de autor

O modalitate simplă de a vă proteja conținutul împotriva furtului este să revendicați drepturile de autor. Aceasta implică faptul că pentru furtul oricărui conținut sau idee/design al site-ului, persoana care a făcut-o poate fi trasă la răspundere. În realitate, desigur, lucrurile stau mult diferit, deoarece pot fi încă făcute încercări de a vă fura conținutul.

În fiecare an, trebuie să actualizați cifra de lângă informațiile privind drepturile de autor. Acest lucru se poate face în două moduri: manual sau automat folosind script simpluîn cod.

Premii și certificate

Orice informație despre certificate, premii și realizări devine o dovadă socială puternică, ceea ce crește încrederea utilizatorilor în companie. Prin urmare, dacă compania dumneavoastră are merite, asigurați-vă că vorbiți despre ele la subsol. Un avantaj suplimentar este că, deoarece subsolul este afișat pe fiecare pagină, informațiile despre premiile dvs. vor fi cu siguranță observate. Dacă compania dvs. nu deține certificate sau premii, dar sunteți partener al Google, Samsung, Asus sau al unei alte companii mari și prestigioase, atunci asigurați-vă că indicați acest lucru în subsol.

Harta site-ului

Harta site-ului de subsol este o listă de pagini de pe site-ul dvs. care va ajuta algoritmul de căutare să indexeze paginile. Sau harta poate fi sub formă de adrese URL pe care motorul de căutare nu le-a detectat anterior la accesarea cu crawlere a site-ului.

Subsolul va ajuta la indexarea absolută a tuturor paginilor site-ului folosind Sitemap, ceea ce este foarte bun pentru promovarea acestuia.

Politica de confidențialitate/Termeni de utilizare

Adesea, informațiile despre politica de confidențialitate sunt postate în subsolul site-ului. Acesta descrie modul în care informațiile sunt colectate, stocate și cum pot fi utilizate. Pentru unele site-uri, publicarea informațiilor privind politica de confidențialitate este impusă de legile aplicabile.

Un link către pagina cu termenii de utilizare este necesar dacă site-ul conține conținut interzis minorilor. De exemplu, dacă site-ul vinde alcool sau tutun. Accesând pagina de termeni de utilizare, consumatorul va trebui să le citească și să confirme că este adult. Acest lucru eliberează responsabilitatea proprietarului site-ului dacă utilizatorul are sub 18 ani.

Formă părere

Nu ratați ocazia de a păstra un client invitându-l să completeze un formular de feedback.

Formularul de feedback va ajuta la transformarea utilizatorului într-un client. Îi ajută pe vizitatori să ia o decizie finală cu privire la cooperare dacă utilizatorul nu era sigur anterior că era pregătit pentru aceasta. În același timp, formularul de feedback poate conține diverse îndemnuri la acțiune. De exemplu, apelul „Au mai rămas întrebări? Întrebați-le la noi” funcționează foarte bine. Mai ales când utilizatorul nu a putut găsi răspunsul la întrebarea sa. Plasarea unui formular de feedback în subsol este un plus mare și îndrăzneț pentru conversia site-ului.

Desigur, formularul de apel trebuie să fie nu doar în subsol, ci și pe pagina principală, pentru a nu rata clientul în momentul în care dorește să efectueze o acțiune. Cum ar trebui să arate pagina principala citeste site-ul.

Contacte companiei

De regulă, o întreagă secțiune este dedicată contactelor companiei, un link către care este plasat în meniu. Dar pentru a facilita navigarea utilizatorului pe site și pentru a nu-l forța să defileze în sus pe pagină când este mai aproape de sfârșit, contactele ar trebui să fie plasate și în subsol. În acest caz, contactele trebuie plasate în micro marcaje astfel încât sistem de căutare a înțeles mai bine contactele companiei.

Pe lângă numerele de telefon de contact și E-mail, care sunt adesea plasate în antet, puteți specifica adresa locației fizice a biroului sau a magazinului offline, precum și a indica întreaga adresa poștală, dacă activitățile companiei necesită schimbul de scrisori prin corespondență standard.

Link-uri utile catre site

Legăturile de navigare către paginile site-ului îl vor ajuta pe vizitator să găsească ceea ce îl interesează, dacă nu l-a găsit anterior în meniul principal. De asemenea, link-uri similare pot fi duplicate către paginile „Livrare”, „Plată”, „Despre companie”, etc.

Acum tendința este de a dezvolta un subsol voluminos, care să devină un meniu suplimentar, care să includă nu numai linkuri, ci și conținut scurt. De obicei, această abordare este utilizată în cazurile în care plasarea unui astfel de conținut pe pagini este inadecvată din cauza accentului pus pe propoziția principală. De exemplu, informațiile despre o companie sunt rareori postate pe paginile unui magazin online, deoarece sunt mai puțin interesante pentru utilizator decât produsul pe care îl vinde. În astfel de cazuri, puteți plasa pe scurt informații despre companie în subsol. Dar, în același timp, este important să-i monitorizezi volumul, astfel încât o bucată mare de text să nu se repete și să nu creeze pagini complete duplicate pe site datorită faptului că subsolul este același pe toate paginile.

Pictograme retele sociale

Partea de jos a site-ului este un loc minunat pentru a plasa pictograme de rețele sociale. În mod tradițional, acestea sunt plasate în această parte a paginii pentru a menține atenția utilizatorului asupra site-ului, nepermițându-i să-l părăsească rapid. Prin urmare, dacă un utilizator este interesat de comunitățile de pe rețelele sociale, acesta coboară în mod obișnuit până la capătul site-ului pentru a intra în ele.

Link de conectare Zona Personală

Nu toți vizitatorii site-ului sunt clienți. Site-ul poate fi vizitat de parteneri și angajați. Prin urmare, plasarea unui link pentru a vă introduce contul personal în subsol este o soluție excelentă.

Formular de abonare la newsletter

Abonamentul la newsletter nu este întotdeauna principala cerință a utilizatorilor site-ului. Dar poate acționa ca o modalitate suplimentară de a păstra clienții, notificându-i în mod constant cu informații actualizate. În astfel de cazuri, puteți plasa un formular de abonare în subsol. Fii sigur, cu siguranță îi va capta pe toți utilizatorii interesați de el.

Formular de căutare pe site

Pentru magazinele online și portalurile mari, este logic să plasați formularul de căutare în partea de sus a site-ului în cel mai vizibil loc. Dar pentru unele site-uri acest lucru nu este relevant.

Dar aici, fiți pregătiți pentru faptul că utilizatorii nu sunt obișnuiți să caute un formular de căutare în subsol. Prin urmare, trebuie izolat și evidențiat pentru a atrage atenția asupra acestuia. Cu toate acestea, un astfel de element din subsol poate fi găsit rar pe site-urile interne. Cel mai adesea se găsește pe resurse americane.

Despre companie

Interogări cheie

Subsolul este un loc minunat pentru a plasa blocuri de legături cu interogări de pagină promovate pentru a crește relevanța site-ului pentru motorul de căutare.

Dar aici nu trebuie abuzat numărul de apariții cheie - motorul de căutare sistemul Google nu crește eficiența promovării SEO pentru ei. Prin urmare, unul sau două cuvinte cheie sunt suficiente pentru ca acestea să arate armonios cu conținutul general.

Cele mai recente actualizări de blog

Dacă blogging pentru a atrage o atenție suplimentară asupra companiei dvs., atunci informații despre conținutul actualizat pot fi afișate în partea de jos a paginii. Dar este recomandat să plasați un astfel de bloc în această parte a site-ului doar în cazurile în care blogul este doar un instrument suplimentar și va fi de interes doar pentru un grup mic din publicul țintă.

Folosind același principiu, puteți plasa orice informație într-un astfel de bloc. De exemplu, link-uri către articole utile.

Când proiectați un subsol, este foarte important să oferiți utilizatorului posibilitatea de a derula la el. Foarte des, multe site-uri conțin o eroare gravă în ceea ce privește utilizarea - folosesc ajax, care încarcă constant conținut atunci când derulează în jos pe pagină. Ca urmare, utilizatorul pur și simplu nu ajunge la subsol și devine inutil. Această tehnologie este eficientă, deoarece o persoană nu trebuie să reîncarce paginile pentru a afla mai multe, dar este necesar să se ofere persoanei posibilitatea de a decide în mod independent dacă dorește să urmărească conținutul în continuare. Prin urmare, atunci când proiectați un subsol și, în același timp, utilizați încărcarea Ajax a conținutului, încărcați cu clic, astfel încât consumatorul să poată ajunge la sfârșitul paginii și să găsească informațiile de care este interesat fără a reveni pagina în partea de sus.

Apel la acțiune

Să cooperăm! Scrie-ne! Lăsați-vă numărul de telefon și vă vom suna înapoi în 5 minute! Un îndemn simplu, dar captivant, cuplat cu un formular de contact sau un formular de buletin informativ plasat în subsol va ajuta la creșterea conversiilor site-ului. Nu uitați că apelurile ar trebui să fie clare și clare, astfel încât utilizatorul să nu fie nevoit să se gândească la cum să ia măsurile care i se sugerează.

Hartă

Cu ajutorul unei hărți plasate în subsol, vei putea crește încrederea vizitatorilor în compania ta. În plus, le vei face viața mult mai ușoară utilizatorilor Hărți Google care doresc să găsească rapid unde se află biroul dvs.

Plasați o hartă de lucru care va fi convenabilă pentru utilizatori. Nu are rost să postați o hartă Yandex dacă site-ul este destinat utilizatorilor ucraineni, deoarece serviciul este blocat pentru Ucraina și atunci când încărcați o astfel de hartă va fi gol. Care, vezi tu, nu este solid.

Ce elemente este cel mai bine să alegeți pentru subsol depinde de tipul activității dvs., tipul de site, designul acestuia, conținutul și publicul țintă. O analiză a intereselor publicului țintă și o structură competentă a site-ului web vă vor ajuta să răspundeți la această întrebare.

Ce nu ar trebui să fie în subsol?

În ciuda faptului că subsolul site-ului nu este principalul bloc focal al site-ului, căruia i se acordă toată atenția, acesta nu devine un motiv pentru a crea un coș de gunoi din subsol. Așadar, scapă de link-urile inutile, inutile și nevaloroase, lăsând pe cele mai utile și importante. Cum să înțelegeți că linkurile nu sunt necesare? Este simplu: dacă nu se potrivesc logic cu navigarea sau categoriile tale, cel mai probabil te poți descurca fără ele.

Nu exagerați cu SEO de subsol. Nu uitați că motorul de căutare va vedea imediat black hat SEO și vă va pedepsi pentru asta.

Și nu vă fie frică de spațiul liber. Un număr excesiv de link-uri va strica impresia site-ului și va îngreuna utilizatorului găsirea informațiilor care îl interesează, ceea ce duce la nemulțumire. Și dacă utilizatorul tău nu este mulțumit, va merge la concurenții tăi fără să se gândească măcar la asta.

Cum să proiectați în mod competent un subsol de site? 5 recomandări valoroase

Designul subsolului site-ului și structura acestuia trebuie gândite pentru a interesa și a atrage utilizatorul online. Cum să faci asta - citește 5 recomandări valoroase.

Utilizați soluții creative

Fundalul principal al subsolului ar trebui să fie diferit de fundalul general al site-ului pentru a atrage atenția. Dar, în același timp, trebuie să corespundă ideii de design a proiectului și să fie combinat armonios cu acesta.

Pentru a evidenția în mod eficient subsolul site-ului, puteți folosi culori mai strălucitoare sau chiar să utilizați imagini tematice care vor sublinia direcția site-ului.

Dacă decideți să fiți creativ, asigurați-vă că conectați designul subsolului și designul site-ului web cu ajutorul elementelor care vor fi executate în aceeași culoare. Faceți o tranziție logică între penultimul și ultimul bloc, dar nu uitați de accentele de pe subsol. Principalul lucru este să alegeți culorile potrivite pentru a arăta elegant. În acest articol puteți afla cum să alegeți culorile potrivite pentru un site web.

Postează-ți animația

Elementele de animație sunt întotdeauna interesante de urmărit. În plus, se joacă cu emoțiile unei persoane, împingându-l în mod subconștient la acțiune. Chiar și cu o animație mică și modestă, designul subsolului va fi transformat.

Alegeți fonturi care pot fi citite

Evitați fonturile mici, chiar dacă există prea multe informații. Este mai bine să excludeți unele link-uri care nu mai sunt necesare. Nu forțați utilizatorul să se uite cu atenție la cuvinte pentru a le citi. Și asigurați-vă că alegeți culori care contrastează cu fundalul, astfel încât literele mici să iasă bine în evidență, făcându-le mai ușor de citit.

Folosiți mai mult spațiu

Cu cât este mai mult spațiu liber în zona de subsol, cu atât este mai mare concentrarea asupra informațiilor conținute în ea. Titlurile și subtitlurile tematice cu blocuri logice vor ajuta la îmbunătățirea ușurinței utilizării subsolului și căutării de informații în acesta.

Această lege a designului web este relevantă pentru întregul site. Spațiul liber va fi un mare plus în ceea ce privește gradul de utilizare - este mai convenabil pentru utilizator să perceapă informațiile.

Amplasare organizată, corectă și îngrijită Link-uri utile vă va ajuta să transmiteți informații corect către client. Iar clientul poate gasi rapid ceea ce il intereseaza, fara a sapa prin multe link-uri care ii sunt inutile. Și nu uita de a ta utilizatorii de telefonie mobilă. Asigurați-vă că vă optimizați subsolul astfel încât să fie afișat corect pe orice dispozitiv mobil.

Postați un îndemn

Subsolul este coarda finală a site-ului, al cărui scop este menținerea utilizatorului pe site cât mai mult timp posibil. Lansarea unui apel la acțiune va fi o altă șansă de a crește conversia site-ului. Nu doar că îl va menține pe vizitator o perioadă de timp, dar îl va transforma și într-un client. CTA din subsol este un clasic la care apelează cele mai populare și de succes site-uri web.

Prin ce diferă subsolul unui magazin online de subsolul altor tipuri de site-uri?

Conținutul și volumul informațiilor din subsolul site-ului depind de activitățile companiei, de sfera serviciilor sale, de structura meniului și de nevoile publicului țintă. Prin urmare, subsolurile unei pagini de destinație sau ale unui site de cărți de vizită pot conține o cantitate mică de informații și link-uri: contacte, un îndemn la acțiune și nimic mai mult. Dar acest lucru nu este suficient pentru un magazin online.

Meniul principal al magazinului online conține link-uri către categorii și subcategorii în scopul vânzării de bunuri. Nu este logic să plasați restul informațiilor despre serviciile companiei în meniul principal. Prin urmare, este plasat în subsol. Vă recomandăm să vizualizați exemple de modele de magazine online pentru a afla cum să proiectați corect un subsol de site.

Informații specifice pot fi postate aici: informații pentru parteneri și clienți obișnuiți, despre servicii aditionale companie (de exemplu, informații despre condițiile de credit, rate, livrare), link-uri către pagina departamentului corporativ pentru soluții întrebări individuale(în special, probleme financiare, întrebări despre returnarea mărfurilor, soluționarea litigiilor etc.). Aici puteți adăuga link-uri către pagini despre:

Posturi vacante ale companiei;
Contacte manageri-consultanti cu privire la echipamente specifice comercializate de magazinul online;
Informații despre reduceri pentru clienții obișnuiți, program de fidelizare;
Informații despre opțiunile de plată pentru persoane juridice și persoane fizice;
Adresele centrelor de servicii;
Informații privind cooperarea pentru parteneri și furnizori;
Link către Întrebări frecvente;
Informații despre achiziționarea certificatelor cadou;
Informații despre companie, orele de funcționare ale magazinului offline și online și multe altele.

Pentru a rezuma, subsolul unui magazin online diferă doar prin conținutul său și numărul de link-uri utile. În caz contrar, cerințele de structură și proiectare sunt identice cu cele stabilite pentru subsolurile oricărui tip de șantier. Principalul lucru este că subsolul este vizibil pentru vizitator și convenabil pentru utilizarea acestuia.

Exemple uimitoare de design al subsolului site-ului

Să ne uităm la exemple de subsoluri ale site-urilor web ale diferitelor tipuri de activități, design și conținut. Obțineți idei pentru dezvoltarea unui subsol atractiv și corect pentru site-ul dvs. :-)

Exemplu de subsol al site-ului nr. 1

Un exemplu de subsol care arată cum minimalismul din acest bloc ajută la concentrarea atenției asupra principalului lucru: logo-ul companiei (marca) și pictogramele rețelelor sociale. Nu este nimic de prisos, arată elegant și frumos. Combinația de alb și negru este un clasic. Iar clasicele nu vor ieși niciodată din tendințe.

Exemplul nr. 2

Un număr mare de link-uri utile + un spațiu negativ mare își fac treaba: oferă informații detaliate despre serviciile companiei și ajută utilizatorul să găsească rapid ceea ce este interesat. Subsolul este împărțit în două blocuri: informații importante, unde titlurile coloanelor cu link-uri sunt evidențiate cu roșu și informații suplimentare. O soluție simplă, dar eficientă atunci când trebuie să plasați un număr mare de link-uri la sfârșitul paginii.

Exemplul nr. 3

Subsolul acționează ca un bloc cu un formular de feedback. Un mic apel la acțiune, forma îngrijită și designul original atrag atenția și motivează acțiunea.

Exemplul nr. 4

6 link-uri principale către Informații suplimentare, pictograme pentru intrarea în comunitățile de rețele sociale - nimic nou. Dar, în acest caz, punctul culminant al subsolului sunt informațiile despre metodele de plată. Compania face un pas foarte puternic prin insuflarea încrederii în client și creșterea loialității acestuia față de acesta. Siglele sistemelor bancare din subsol măresc ușurința în utilizarea site-ului și efectuarea plăților. Metodele de plată convenabile pentru client sunt un alt plus pentru creșterea conversiei site-ului.

Exemplul nr. 5

În acest exemplu, subsolul este etapa finală pentru client - acțiunea lui. În acest scop, au fost dezvoltate elementele de marketing și tehnice necesare: există un apel la acțiune, un buton pentru completarea datelor cu caracter personal, precum și o funcție de tranziție pentru vizualizarea prezentării companiei. Ca informații suplimentare, sunt furnizate link-uri active către rețelele sociale și datele de contact ale companiei, dacă este mai convenabil pentru client să îl contacteze independent sau să viziteze biroul personal.

Exemplul nr. 6

În acest exemplu de subsol, accentul este pus pe contactele cu compania. Instrument suplimentar Pentru a menține vizitatorul pe site există un buton activ pentru descărcarea brief-ului. Designul original și o mulțime de fundal liber păstrează și concentrează atenția asupra principalului lucru.

Exemplul nr. 7

Un exemplu de subsol tipic pentru un magazin online, unde există un număr mare de link-uri către diferite pagini ale site-ului. Aici utilizatorul poate găsi informații suplimentare despre companie, magazine și servicii. Mulțumită structura corecta Subsolul are un număr mare de linkuri care arată organic - este ușor să găsiți ceea ce aveți nevoie aici. Astfel de idei ar trebui să fie elaborate în prealabil de către SEO și incluse în termenii de referință pentru crearea site-ului. Acest lucru se face pentru a nu pierde unele informații importante furnizându-le consumatorilor finali.

Știți deja cum va fi subsolul site-ului dvs.?

Având în vedere toate avantajele și valorile subsolului unui site, cu greu poate fi numit inutil. Și deși acest bloc încheie pagina și este situat chiar în partea de jos, rareori trece neobservat. Prin urmare, fiecare proprietar de site ar trebui să acorde o atenție deosebită dezvoltării subsolului. Gândiți-vă la ce linkuri trebuie să plasați în acest bloc, ce structură și design este cel mai bine să alegeți, astfel încât întregul subsol să arate nu numai ergonomic și elegant, ci să aducă și beneficii - menține vizitatorul site-ului pe el. V-am arătat un număr mare de exemple de site-uri populare și am oferit câteva recomandări importante. Tot ce trebuie să faci este, concentrându-te pe afaceri și pe publicul țintă, să-ți dezvolți propriul subsol eficient pentru site. Și dacă proiectul tău este în curs de dezvoltare, îți recomandăm să citești articolul despre ce ar trebui să fie un site web de afaceri eficient.

În primul rând, vă voi arăta rezultatul postării de astăzi. Subsolul va fi mic și va avea o singură linie de text

Probleme cu implementarea subsolului

Dacă subsolul se află în partea de jos a paginii, atunci care este problema cu implementarea acestuia? La urma urmei, puteți pur și simplu să faceți o continuare a tabelului nostru principal și să introduceți toate informațiile necesare în el! Da, este adevărat, această abordare este aplicabilă în 99% din implementările site-urilor web, dar există o mică problemă care apare în 1% din cazuri.

Iată o diagramă schematică a browserului

În această diagramă, subsolul este legat de capătul tabelului principal și va fi amplasat acolo unde este necesar dacă zona principală a site-ului este de înălțime suficientă pentru a crea un defilare vertical în browser.

Dar ce se întâmplă dacă înălțimea site-ului nu este atât de mare încât ar crea un scroll vertical?

După cum puteți vedea, se dovedește a fi o imagine tristă. Subsolul în această situație nu este partea de jos a paginii, ci centrul. Cum să remediez asta?

Există două opțiuni:

Nu contează că subsolul apare în centru, deoarece în 99% din cazuri site-ul are suficientă înălțime pentru ca subsolul să apară acolo unde este nevoie.
Utilizați o modalitate diferită de a implementa subsolul

Astăzi vom lua în considerare a doua opțiune. Există multe modalități de a implementa un subsol, dar există un singur lucru! Toate metodele pe care le-am încercat nu funcționează cu condiția ca zona noastră principală a site-ului să aibă stilul . Dar nu este chiar atât de înfricoșător

Teoria implementării subsolului

Ce ofer? Vă sugerez să folosiți jquery. Folosind-o, putem afla înălțimea browserului, sau orice alt obiect de pe site-ul nostru. Pentru ce este? Deoarece subsolul va fi un obiect poziționat absolut (au poziția:absolut; stil), înălțimea zonei de lucru sau înălțimea mesei principale, ne va permite să știm cât de mult să mutăm zona de subsol de-a lungul partea de sus ( stil de top)!

Cred că este clar cum ne vom implementa subsolul

În ceea ce privește funcționarea funcției de script Java. Va trebui să stabilim ce înălțime (înălțimea browserului sau înălțimea mesei principale) să folosim pentru a compensa subsolul. Totul este simplu aici, verificăm dacă tabelul sau fereastra browserului este mai sus; dacă este o fereastră browser, atunci folosim înălțimea acesteia. Dacă este invers, atunci folosim înălțimea mesei principale.

Creați un subsol > Editați stilul tabelului

În primul rând, trebuie să ajustăm stilul mesei noastre principale.

După cum puteți vedea, spațiul dintre tabelul nostru principal și sfârșitul browserului este neglijabil. Deoarece subsolul va fi poziționat absolut, nu va extinde în niciun fel spațiul dintre tabelul principal și sfârșitul paginii! Va trebui să ajutăm introducând noi element cssîn stilul zonei noastre principale.

Deschideți stilul personalizat.css, găsiți tabelul de clasă (.table(...)) și editați-l astfel

Masa
{
poziție: absolut;
sus:0px;
stânga:50%;
margine-stânga:-390px;
padding-bottom:50px;
indicele z: 1;
}

Am adăugat stilul padding-bottom:50px;, adică am făcut spațiul dintre capătul tabelului și capătul ferestrei browserului cu dimensiunea de 50 de pixeli. Pentru subsolul pe care îl am în vedere (captură de ecran a rezultatului de la începutul postării), acest spațiu va fi destul, dacă aveți în vedere un subsol mult mai mare decât al meu, atunci puneți câți pixeli aveți nevoie!

> Editarea șablonului principal

Deschideți index.html personalizat și înainte

introduceți subsolul nostru

Produs de RS-BLOG v2 | Când copiați material de pe acest blog, nu uitați să postați un link către sursa - rsblog.ru

Permiteți-mi să explic câteva dintre stilurile care sunt folosite aici.

afisare:niciuna; - Subsolul nostru va apărea utilizatorului numai după ce s-a încărcat întreaga pagină, până în acest moment subsolul nu va fi vizibil!
stânga:50%;marja-stânga:-390px; - Aceste două stiluri vă permit să poziționați subsolul exact în centrul browserului.
text-align:center; - vă permit să plasați textul conținut în bloc în centru.

>Conectați jquery și js.js

Mai întâi trebuie să-l descărcați. Accesați acest link și faceți clic aici

Codul se va deschide, selectați-l pe tot și copiați-l în notepad. În Notepad, faceți clic pe Fișier -> Salvare ca

Introduceți numele fișierului (jquery.js) cu .js

și salvați-l în folderul de șabloane personalizate. Acum avem fișierul de care avem nevoie în folderul cu motorul. De asemenea, merită să creați un fișier js.js (deocamdată dosar gol). În curând vom scrie o funcție pentru a afișa subsolul în ea. Iată cum arată acum conținutul folderului de șabloane:

Dacă memoria îmi este bine, am înregistrat o lecție video în care am conectat jquery într-un mod ușor diferit, dacă ești interesat, o poți urmări

Acum tot ce rămâne este să conectăm fișierele js la blogul nostru. Pentru a face acest lucru, deschideți index.html personalizat și după linie