Modeli HTML për pajisjet mobile. Modeli i Flatsome Mobile – Tema e WordPress me shumë qëllime dhe e përgjegjshme
Të gjithë shabllonet e paraqitur për faqen tuaj të internetit janë ndërtuar në versionet moderne të HTML5 dhe CSS3. Përveç kësaj, autorët përdorin veçori të tilla në modë si dizajni i sheshtë, dizajni i përgjegjshëm, faqosja adaptive, rrëshqitësit jQuery, animacioni CSS3, etj. Kjo do të thotë, nëse jeni duke kërkuar për një shabllon të faqes celulare, mund të zgjidhni cilindo nga ato të paraqitura. Modele të bukura html5 2017, megjithëse falas, duken premium.
Këtu do të gjeni më shumë se 50 shabllone uebsajtesh të përgjegjshme me cilësi të lartë falas në HTML5 dhe CSS3, të cilat mund të përdoren si për sajte të reja ashtu edhe për ridizajnimin e atyre ekzistuese. Modelet elegant të uebsajteve html5 janë ato që ju nevojiten!
Përditësuar 03/12/2019: Meqenëse artikulli u shkrua 2 vjet më parë, shumë lidhje u prishën. Ose u bashkuan pronarët e shablloneve, ose ndryshuan statusin e shablloneve nga falas në të paguar, ose alienët shkatërruan gjithçka. Ju kërkojmë të dashur lexues, nëse gjeni një lidhje të tillë, lini në komente, unë do ta korrigjoj.
1. Snow - shabllon falas i faqes së uljes duke përdorur HTML5 dhe CSS3Shablloni HTML5 css3 faqe e uljes Snow është ndërtuar në kornizën Bootstrap. Modeli është shumë elegant dhe i lezetshëm! Një sfond fiks dhe një Jumbotron i madh - një gjë që tregon përmbajtjen kryesore të faqes. Cila është gjëja më e rëndësishme në faqen e uljes? Kjo është e drejtë, një thirrje për veprim. Natyrisht, shablloni është përshtatur plotësisht për pajisjet mobile. Mund ta përdorni edhe si bazë për shabllonet tuaja.
Ky shabllon html5 css3 është ndërtuar gjithashtu në kornizën e Bootstrap. Ju mund të krijoni një faqe interneti unike në këtë shabllon me një portofol, ekipin tuaj, çmimet, komentet dhe gjithçka tjetër që do të jetë e nevojshme. Për shembull, ky shabllon është i përsosur për një faqe interneti për shërbimet e pastrimit. Animacioni në këtë shabllon është i qetë dhe efektiv, fontet janë të pastra dhe të lehta për t'u lexuar. Thjesht shablloni perfekt!
Një tipar dallues i shabllonit të faqes së internetit White janë dy opsione të sfondit në krye. Zgjedhja juaj është ose një rrëshqitës me foto ose një sfond video. Model shumë cilësor dhe efektiv për faqen!
Një model uebsajti modern, tërheqës vizualisht HTML5 i krijuar në bazë të rrjetit (lexoni më shumë rreth rrjetit). Dizajn i bukur dhe i përgjegjshëm i shabllonit për një blog ose faqe interneti.
Dizajni i freskët dhe elegant i shabllonit të faqes së internetit është më i përshtatshmi për të gjitha llojet e faqeve të internetit të modës që shesin këpucë, rroba, orë, aksesorë, veshje sportive, etj. Ai vjen me një skedar PSD që mund ta rregulloni sipas nevojave tuaja.
Nava është një model uebsajti modern HTML5 që përdoret kryesisht për profesionistët krijues që duan të tregojnë punën e tyre në të gjithë lavdinë e saj. Shumë variacione të cilësimeve të shabllonit ju lejojnë ta bëni faqen tuaj unike. Model i lehtë, i bukur dhe i përgjegjshëm i faqes në internet.
Modeli i faqes së internetit Box Portfolio ka një dizajn minimalist të pastër dhe modern. E përkryer për profesionistët që duan të shfaqin në mënyrë efektive punën e tyre në internet. Siç sugjeron emri, shablloni i faqes në internet është i përshtatshëm në mënyrë ideale për një portofol.
Tema e malit në hartimin e faqeve të internetit ka qenë shumë e njohur kohët e fundit. Modeli i faqes së internetit Mountain King nuk bën përjashtim. Përfshin 336 ikona vektoriale nga Typicons. Plus animacion i mrekullueshëm duke përdorur CSS3. Modeli është i përsosur për faqet e internetit të udhëtimeve dhe portofolit.
Beauty Spa është një shabllon i përgjegjshëm uebsajti që ka shumë veçori, ideale për site spa, qendra shëndetësore ose fitnesi, site yoga apo edhe sallone flokësh. Lexueshmëri e shkëlqyer e shkronjave dhe minimalizëm modest.
Bent është një shabllon i shkëlqyeshëm falas në uebsajt në html5 dhe css3. Dizajn i përgjegjshëm, animacion CSS3, lëvizje paralaksore, navigim me porosi dhe gjëra të tjera të mira. Ky është një dizajn i pastër shabllon për faqet që duan të përdorin një dizajn të ekuilibruar për të siguruar që vizitorët të shijojnë pamjen dhe ndjesinë e sajtit, ndërkohë që shohin qartë përmbajtjen e saj thelbësore.
Triangle është një shabllon ekskluziv i uebsajtit krijues HTML5 dhe CSS3, posaçërisht për ata që duan të ndryshojnë dizajnin e tyre të lezetshëm, por jo ta përkeqësojnë atë. Modeli vjen me mbi 40 faqe të para-projektuara që ju lejojnë të personalizoni faqen tuaj sipas përmbajtjes suaj.
Përjetoni një ndjenjë të vërtetë argëtimi me këtë shabllon uebsajti, ideal për shkrimtarët, autorët, autorët e kopjimit dhe punëtorët e tjerë të stilolapsit dhe letrës. Shablloni mund të përdoret gjithashtu për një blog personal, një blog për udhëtimet, krijimtarinë, etj. Shumë njerëzve do t'ju pëlqejë dizajni krijues dhe faqosja përshtatëse e shabllonit.
Bodo- shabllon i bukur faqe në HTML5 dhe CSS3, e cila është ideale për një sajt personal. Sidomos për organizimin e një portofoli. Tipografi e pastër dhe e qartë, rrëshqitës karuseli, dritare kërcyese për të shfaqur punën dhe shumë më tepër.
Fotografët janë gjithmonë në kërkim të shabllonit të përsosur për faqen e tyre të internetit për të treguar punën e tyre në të gjithë lavdinë e saj, mbresëlënëse dhe më e rëndësishmja - e madhe! Një model i rrallë uebsajti i plotëson këto kërkesa. Lens është një model i tillë i faqes së internetit të fotografit.
Nëse jeni duke kërkuar për shabllone falas të faqes në internet në temën automatike, atëherë Spectral do ta bëjë këtë zgjidhje ideale. Këtu është një model krejtësisht unik i krijuar me dorë të shabllonit të faqes në internet. Dizajni mund të ndryshohet sipas gjykimit tuaj. Me këtë shabllon mund të krijoni një faqe interneti mahnitëse për absolutisht çdo temë, qoftë një blog mbresëlënës udhëtimi ose një galeri fotografish, një faqe interneti automobilistike ose një ofrues pritës.
Oxygen është një shabllon i përshtatshëm dhe unik për një faqe interneti biznesi. Dizajn modern i sheshtë, plan urbanistik përshtatës. Për shembull, ky shabllon është ideal për një faqe në lidhje me aplikacionet celulare ose teknologjinë celulare.
Nëse jeni duke kërkuar për një shabllon falas në internet, atëherë Mobirise Bootstrap është i përsosur për t'ju filluar. Ky është një shabllon shumëfunksional me shumë shtesa të përfshira. Tre paraqitje të parapërgatitura faqen kryesore dhe blogu do t'ju ndihmojë me këtë. Mobirise Bootstrap është gjithashtu 100% i optimizuar SEO dhe përshtatet me çdo madhësi ekrani.
Shablloni Brandy është i përsosur për organizimin e një faqe interneti komerciale të pasurive të paluajtshme. Dizajni i përgjegjshëm dhe shumë i bukur do të tërheqë jo vetëm pronarin e faqes, por edhe vizitorët.
Shablloni elegant dhe i animuar i uebsajtit HTML5 dhe CSS3 për organizimin e një portofoli. Dizajn i pastër, tipografi e shkëlqyer, ikona të bukura dhe shumë më tepër.
Pluton është një shabllon i ndritshëm dhe efektiv i faqes në internet bazuar në Bootstrap. Një shabllon modern uebsajti me paraqitjen e tij unike me një faqe dhe dizajnin e përgjegjshëm që është i shkëlqyeshëm për studiot, fotografët dhe stilistët krijues.
Modeli SquadFree është i përsosur për krijimin e një faqeje interneti komerciale me një faqe. Shablloni jo vetëm që duket profesional, por është përshtatur edhe për të gjitha llojet e ekraneve. Modeli bazohet në Bootstrap.
Sublime është një shabllon uebsajti i pastër dhe jashtëzakonisht i bukur HTML5 dhe CSS3, i përsosur për një faqe fillestare, agjencie krijuese ose portofoli. Dizajn i përgjegjshëm dhe dy opsione faqesh për të zgjedhur.
Lëndë drusore është një temë e freskët, elegante dhe e pazakontë e shabllonit të uebsajtit me një faqe. Diagonalja është tipari kryesor i dizajnit të këtij shablloni. Modeli është i përsosur për një faqe interneti biznesi ose portofol. Ka një galeri të integruar, hartë dhe Informacioni i Kontaktit, të cilat mund t'i përshtatni lehtësisht me nevojat tuaja.
E-Shopper është një opsion i shkëlqyeshëm për një shabllon të internetit të tregtisë elektronike. Ndërtuar në bootstrap me një grup të mahnitshëm karakteristikash për një dyqan online të plotë dhe efikas.
Një shabllon absolutisht mahnitës HTML5 dhe CSS3 për krijimin e një faqe interneti ose portofoli fotografish për një stilist, ilustrues ose artist. Ky shabllon e çon shiritin e modeleve profesionale në nivelin tjetër! Dizajn i përgjegjshëm, mbështetje e shkëlqyer për të gjitha llojet e pajisjeve të ekranit, navigim i lehtë dhe i përshtatshëm dhe shumë më tepër.
Dizajni i sheshtë i këtij shablloni minimalist të faqes në internet është i përsosur për krijimin e një portofoli. Në shabllon, të gjitha detajet kontrollohen në mënyrë të përsosur!
Ky pa pagesë me një faqe i bazuar në kornizën e Bootstrap është i përsosur për faqet e internetit të korporatave, si për kompanitë e vogla ashtu edhe për ato të mëdha. Dizajn i sheshtë, plan urbanistik adaptiv, të gjithë elementët e dizajnit me cilësi të lartë. Modeli vjen në 4 ngjyra të ndryshme.
Infuzion është një shembull i shkëlqyeshëm i një shablloni uebsajti HTML5 dhe CSS3 që është krijuar posaçërisht për krijimin e një portofoli biznesi. Funksionaliteti i pasur i këtij shablloni ju lejon të punoni në mënyrë efektive me klientët dhe të tërheqni të rinj.
Ky shabllon uebsajti me cilësi të lartë me stil të sheshtë është i përsosur për çdo faqe interneti të korporatës. Dizajn përshtatës, shumë cilësime dhe opsione modifikimi.
Ky shabllon unik dhe shumë i bukur në internet me efekt paralaks nuk do të lërë askënd indiferent. Shablloni me një faqe është ndërtuar në HTML5 dhe CSS3 të pastër me strukturë reaguese, sfonde mbresëlënëse, mbështetje të mediave sociale, etj.
Urbanic është një shabllon uebsajti i freskët dhe i lezetshëm HTML5 dhe CSS3 i ndërtuar në motorin Bootstrap. E përkryer për të hapur faqen tuaj të internetit menjëherë pa probleme të veçanta. Modeli është përshtatur në mënyrë të përkryer për çdo madhësi ekrani.
Një shabllon vizualisht harmonik dhe efektiv HTML5 për organizimin e portofolit tuaj. Modeli është përshtatur në mënyrë të përkryer për pajisjet celulare, gjë që është shumë e vështirë për t'u bërë për faqet e këtij formati.
Mamba One është një shembull i një shablloni të thjeshtë por elegant në internet për krijimin e një faqeje me një faqe. E përputhshme me të gjithë shfletuesit modernë dhe do të shfaqet në mënyrë adekuate kudo.
Një tjetër shabllon i mrekullueshëm i faqes në internet për fotografët. Dizajni i përgjegjshëm dhe renditja shumë e përshtatshme e fotografive në portofol dhe galeri do të tërheqë shumë adhurues të fotografisë. Modeli përdor gjithashtu një efekt paralaks, i cili gjithashtu i bën përshtypje shikuesve kur shikojnë fotot.
Siç sugjeron emri, ky shabllon i mrekullueshëm i uebsajtit nuk është vetëm ideal për faqet fillestare, por gjithashtu plotëson tendencat e reja celulare, veçanërisht për sa i përket qartësisë së ekranit në pajisjet me ekrane Retina.
Brushed është një shabllon i përgjegjshëm, pa pagesë HTML5 dhe CSS3 i bazuar në motorin Bootstrap. Gjithashtu i optimizuar për ekranet Retina (iPhone, iPad, iPod Touch Dhe MacBook Pro Retina).
Mirë se vini në Big Picture! Ky shabllon i përgjegjshëm i uebsajtit HTML5 është i përsosur për të gjithë njerëzit krijues që kanë diçka për të treguar dhe e tregojnë atë të madhe dhe mbresëlënëse në faqen e tyre të internetit. Për më tepër, shablloni përdor animacion të shkëlqyeshëm.
Një shabllon i thjeshtë me një faqe që merr parasysh gjithçka mjetet e nevojshme për krijimin e suksesshëm të faqes në internet. Ideale për blogun personal të një shkrimtari, shkrimtari ose thjesht një dashnor të fjalës së shkruar.
Ky shabllon unik i pastër i faqes së internetit HTML5 dhe CSS3 është i përsosur për çdo person krijues. Ai është plotësisht i përgjegjshëm dhe plotësisht falas.
Runkeeper është një model uebsajti falas, i përgjegjshëm dhe shumë i bukur. Mund të përdoret për një faqe interneti të çdo teme. Stili i shkëlqyer dhe fontet e qarta, dizajni i përgjegjshëm dhe detajet mbresëlënëse të shabllonit. Gjithçka funksionon për ju!
Ky shabllon i mrekullueshëm i faqes së internetit të bazuar në rrjetë është i përsosur për një faqe interneti të korporatës. Dizajni modern i sheshtë dhe struktura e përgjegjshme e shabllonit shfaqen në mënyrë të përsosur si në monitorë të mëdhenj ashtu edhe në pajisje celulare.
Ky shabllon i pastër, i thjeshtë dhe i qartë uebsajti HTML5 dhe CSS3 është i përsosur për ndërtimin e një faqeje uljeje. Dizajni minimalist nuk largon vëmendjen nga gjëja kryesore. Një shirit lundrimi anësor tërheqës dhe linjat e pastra të faqeve janë thjesht kombinimi perfekt!
Një shabllon tjetër i faqes në internet në stilin e minimalizmit dhe formave të pastra. Projektuar posaçërisht për të përfituar nga ekranet e mëdha të ekranit, por gjithashtu i përshtatur në mënyrë perfekte me ekranet e vegjël të pajisjeve mobile.
Ky model uebsajti modern, i përgjegjshëm dhe plotësisht falas ka një avantazh të madh - është i thjeshtë dhe konciz, por kjo është pikërisht ajo që u mungon shumë njerëzve.
Një shabllon i ri uebsajti me një stil minimalist gjysmë-retro. Vetëm se retro nuk është më në modë, por një aluzion i lehtë i tij është shumë i mirëpritur. Ky model uebsajti është plotësisht i përgjegjshëm, i ndërtuar në HTML5 dhe CSS3 të pastër dhe përfshin të gjithë elementët e nevojshëm të faqes bazë. Modeli "Strongly Typed" është ideal për faqet e internetit krijuese. Për shembull, për një faqe në lidhje me dekorimin e shtëpisë.
I freskët dhe i pastër, i bukur dhe funksional, shabllon i ri uebsajti në HTML5 dhe CSS3. Ai ka në arsenalin e tij të gjithë elementët e nevojshëm të faqeve, duke përfshirë kuotat, tabelat dhe listat e dizajnuara, si dhe një shirit anësor të përshtatur (në të djathtë ose në të majtë - sipas dëshirës).
Paralelizmi është një shabllon elegant në internet për organizimin e portofoleve ose fotove. Ajo që e bën të pazakontë është se lëvizja këtu nuk është vertikale, si zakonisht, por horizontale. Kjo i jep faqes një elegancë të veçantë dhe të paharrueshme.
Model i shkëlqyer i faqes në internet në stilin minimalist në HTML5. E përkryer për një uebsajt/blog personal, si dhe për një uebsajt të vogël korporate me një faqe ose si faqe interneti për kartëvizitë.
Dizajni i pastër dhe i gjerë i këtij shablloni uebsajti është i përsosur për faqet e internetit të korporatave të mëdha ose projekte komerciale. E përgjegjshme dhe e përshtatshme si për autorin ashtu edhe për përdoruesit.
Dhe e fundit në listë, por jo më e rëndësishmja për sa i përket cilësisë dhe efektivitetit vizual, është shablloni i faqes në internet - ZeroFour. Dizajn elegant, menu shumë e bukur, forma dhe butona të rregulluara në mënyrë të përsosur, ikona të bukura dhe shumë më tepër. Dhe e gjithë kjo është absolutisht falas!
Shpresoj se keni gjetur diçka të përshtatshme për veten tuaj midis këtyre shablloneve të mahnitshëm të uebsajteve HTML5 dhe CSS3. Paç fat!
Shënojeni atë në mënyrë që ta gjeni shpejt.
PS: Nëse nuk mund të bëni një zgjedhje, lexoni artikullin "Unë nuk e di se çfarë dua". Do të jetë e dobishme.
Unë kam përgatitur një përzgjedhje të re të njëzet prej temave premium më interesante për WordPress, të cilat janë perfekte për krijimin e faqeve të internetit të prezantimit dhe faqeve të uljes. lojëra celulare dhe aplikacionet.
Zhvillimi global i telekomunikacionit celular, aksesueshmëria interneti celular ka formuar një treg krejtësisht të ri, në zhvillim dinamik për aplikacionet celulare. E cila është rritur në një industri të madhe në vetëm pak vite. Është e vështirë të numërosh se sa startup interesante të fokusuara në pajisjet mobile janë shfaqur vitet e fundit. Tregu është i madh dhe fitimprurës, shumë kompani dhe zhvillues e kuptojnë këtë dhe përpiqen ta pushtojnë atë.
Zhvillimi i teknologjive celulare dhe rritja e produktivitetit të smartfonëve kontribuon në përmirësimin, funksionalitetin dhe cilësinë e aplikacioneve celulare. Telefonat inteligjentë më të mirë tashmë janë pothuajse të barabartë në performancë me kompjuterët personalë. Dhe ato të zyrës ndoshta tashmë janë anashkaluar. Në këtë sfond, rritja e përhapur nuk është më aq befasuese trafiku celular. Google çaktivizoi "kërkimin e drejtpërdrejtë" javën e kaluar, për shembull. Kjo u motivua nga pjesa e madhe e trafikut celular dhe veçoritë e kërkimit celular. Unë mendoj se tregu i aplikacioneve celulare është shumë premtues. Të paktën, në vitet e ardhshme do të ketë vetëm rritje, zhvillim, përmirësim, depërtim më të thellë në jetën e përditshme, në të ashtuquajturat. interneti i gjërave.
Si në çdo fushë tjetër, çdo aplikacion celular ka nevojë për paketim të ndritshëm dhe të bukur në formën e një faqe interneti prezantimi. Aty ku do të ishte e mundur të demonstroheshin aftësitë e tij, të flitej për avantazhet, avantazhet e tij, etj.
Një temë moderne me një faqe me një dizajn të pastër për paraqitjen e aplikacioneve celulare, e lehtë për t'u personalizuar, ka 12 opsione të gatshme të ekranit, shkronja ueb, ikona, paralaksa, kuti ndriçimi, Visual Composer të integruar, Slider Revolution dhe shumë më tepër.
Shkarko Demo
Faqja e uljes me një faqe me opsione të gjera personalizimi, ndërtues i integruar vizual i faqeve, mbështetje për Fonts Google, tregti elektronike e bazuar në WooCommerce, Slider Revolution dhe shumë më tepër.
Shkarko Demo
Një temë e shkëlqyer reaguese për paraqitjen e aplikacioneve celulare, e ndërtuar në Bootstrap me mbështetje për Google Fonts dhe Google Maps.
Shkarko Demo
Një temë moderne me shumë qëllime me një dizajn të pastër, mund të funksionojë në modalitete me një faqe dhe me shumë faqe, ka 4 opsione të projektimit të faqeve kryesore, mbështet modalitetin shumëgjuhësh bazuar në shtojcën WPML, konstruktorin Visual Composer, buletinet e Mailchimp, etj.
Shkarko Demo
Tema me shumë qëllime për demonstrimin e aftësive të aplikacioneve celulare të bazuara në Bootstrap, 2 opsione të ekranit në shtëpi, mbështetje për ekranin definicion të lartë, Visual Composer i integruar, import me një klikim të përmbajtjes demo dhe të gjithë municionit tradicional.
Shkarko Demo
Modeli i uljes për WordPress me të pastër dizajn modern, i fokusuar në shfaqjen e aplikacioneve celulare për tre platforma kryesore: Android, iOS dhe Windows. E dokumentuar mirë, e lehtë për t'u konfiguruar.
Shkarko Demo
Një tjetër faqe fillestare adaptive për WordPress në Bootstrap me 24 opsione dizajni, të përshtatura gjithashtu për prezantime të aplikacioneve celulare dhe startup-eve. Ekziston një ndërtues vizual i faqeve dhe më shumë se 80 elementë të integruar të dizajnit, forma kontakti, integrim Buletinet e Mailchimp dhe të tjera.
Shkarko Demo
Një shabllon i ri përshtatës i faqes së uljes bazuar në Kornizën Warp 7 për dashamirët e faqeve të internetit modulare me peshë të lehtë. I përshtatshëm jo vetëm për aplikacione celulare, por është mjaft i përshtatshëm edhe për zona të tjera.
Shkarko Demo
Një temë e thjeshtë moderne për t'u shfaqur aplikacioni celular me dy opsione të dizajnit të faqes kryesore, mbështetje për ekranet Retina, një dizajnues të integruar Visual Composer, rrëshqitësin e Slider Revolution, importimin e përmbajtjes me një klikim, mega menu, më shumë se 600 fonte dhe shumë më tepër.
Shkarko Demo
Tema WordPress me një faqe me shumë qëllime për demonstrimin e aplikacioneve celulare, startup-eve, uebsajteve personale. E ndërtuar në Bootstrap, Visual Composer i integruar, rrëshqitës i Revolution, forma kontakti, kode të shkurtra, ikona, etj.
Shkarko Demo
Modeli i faqes së uljes së aplikacionit celular me 3 opsione të faqes kryesore, 20 opsione dizajni, personalizim të thjeshtë, ndërtues vizual i faqeve Visual Composer, mbështetje për shtojcën shumëgjuhëshe WPML.
Shkarko Demo
Tema e lirë e WordPress e përgjegjshme për shumë qëllime me 23 opsione të gatshme të dizajnit.
Shkarko Demo
Një temë moderne me shumë qëllime me një dizajn profesional të përgjegjshëm për prezantimin e aplikacioneve dhe lojërave celulare. Në bordin e Visual Composer, mbështetje për shtojcën shumëgjuhëshe WPML, buletinet e Mailchimp, formularët reagime Formulari i Kontaktit 7.
Shkarko Demo
Modeli i faqes uljeje të optimizuar për shumë qëllime për zhvilluesit e aplikacioneve celulare, produkte softuerësh, startup, agjenci krijuese dhe dizajnuese. 4 opsione të dizajnit të faqes kryesore, personalizim i lehtë duke përdorur personalizuesin e integruar të WordPress, ndërtues vizual i faqeve me 40+ elementë dizajni, rrëshqitës i revolucionit, 50+ kode të shkurtra, 500+ ikona të optimizuara për ekranet Retina.
Shkarko Demo
Një nga temat më të shpejta të përgjegjshme me një faqe në ThemeForest, e përsosur për fillestarët. 12 dizajne të gatshme, import me një klikim të përmbajtjes demo, personalizim i lehtë, kod i pastër, ndërtues i faqeve Visual Composer, Revolution Slider, mbështetje për tregtinë elektronike WooCommerce dhe shumë më tepër.
Shkarko Demo
Zhvilluesi pretendon se me ndihmën e temës Helium, faqet tuaja të uljes do të kthehen në një armë të fuqishme marketingu. Është e vështirë të argumentosh - tema është shumë moderne, e ndërtuar në Bootstrap, e optimizuar me SEO, ka 10 opsione kryesore të ekranit, një rrëshqitës, 1000+ fonte, Visual Composer të integruar me 50+ elementë të dizajnit, mbështetje për WooCommerce, Mailchimp, Google Harta, Google Fonts, Forma e Kontaktit 7, portofoli dhe shumë, shumë më tepër.
Shkarko Demo
Një temë shumë elegante me 7 paraqitje të faqeve kryesore, 6 opsione të shfaqjes së kokës, 5 opsione të fundores, Visual Composer të integruar me shtesa Ultimate, Slider Revolution, WooCommerce, One Page Navigator, mbështetje për WPML dhe importim të përmbajtjes demo me një klikim.
Shkarko Demo
Një temë moderne, e përgjegjshme me një dizajn të pastër Bootstrap për faqet e shpërndarjes së softuerit. 9 opsione të faqes kryesore, 8 skema ngjyrash, 3 opsione të dizajnit të kokës, mbështetje për Twitter, YouTube, Font Awesome, etj.
Shkarko Demo
Një temë krijuese me një faqe me dizajn të përgjegjshëm, 17 opsione të gatshme të dizajnit, mbështetje për ekranet Retina, Visual Composer i integruar, Slider Revolution, mbështetje për shkronjat Google, paralaksa dhe animacione të ndryshme.
Shkarko Demo
Modeli i përgjegjshëm faqja e uljes me një dizajn të pastër modern dhe opsione të gjera personalizimi, perfekte për aplikacione celulare, produkte, startup. Visual Composer i integruar, import me një klikim, mbështetje shumë-gjuhëshe në WPML, formularët e kontaktit Formulari i Kontaktit 7, Revolucioni Slider dhe shumë më tepër.
Shkarko Demo
Një shabllon shumë i bukur që do t'i japë faqes së internetit të aplikacionit tuaj celular një pamje profesionale pa e bërë të mërzitshme. Ju mund të zgjidhni midis tre opsioneve faqen kryesore, secila prej të cilave duket thjesht e mrekullueshme. Skema e ngjyrave të projektit të ardhshëm në internet mund të ndryshohet sipas dëshirës tuaj. Përveç kësaj, funksionaliteti zvarrit dhe lësho ju lejon të punoni me përmbajtjen pa u thelluar në kod.
Shkarko Demo PaPay
Një shabllon i shkëlqyer që do t'ju lejojë të ndërtoni projektin e dëshiruar në internet pa shpenzuar një shumë të madhe parash për të. Ai ofron një gamë të gjerë opsionesh për personalizim pamjen faqe. Dhe ndërtuesi Elementor do t'ju lejojë të harroni kodin dhe gjithçka që lidhet me të. Mos harroni të përdorni një mega menu për ta bërë shumë më të lehtë për përdoruesit të lundrojnë në faqen tuaj.
Shkarko Demo Momex
Momex është një shabllon modern që, si të gjitha zgjidhjet e tjera të gatshme në këtë koleksion, ju lejon të ndërtoni një projekt mbresëlënës në internet. Përdoruesve u ofrohet një përzgjedhje e madhe opsionesh që mund të përdoren për të përmirësuar pamjen e faqes dhe funksionalitetin e saj. Për shembull, midis katër paraqitjeve të blogut, çdokush mund të gjejë një opsion që do t'i pëlqejë patjetër. Dhe paketa e shtojcave Cherry do t'i kënaqë ata që duan të paraqesin shërbimet në një mënyrë që do të bindë audiencën e synuar t'i zgjedhë ato.
Shkarko Demo
Consor është një shabllon i mrekullueshëm që mund të paraqesë çdo biznes në mënyrën më të paharrueshme. Prandaj, unë mund ta rekomandoj atë për krijimin e faqeve të aplikacioneve celulare. Në paketën e tij mund të gjeni një sërë opsionesh header, me ndihmën e të cilave arrihet edhe unike e projektit online. Dhe WordPress Live Customizer do të bëjë të mundur punën me ngjyrat dhe fontet e projektit tuaj të ardhshëm në internet pa përpjekje shtesë.
Shkarko Demo
Një shabllon plotësisht funksional dhe fleksibël që me siguri do të tërheqë shumë vëmendje. Ai përfshin shumë faqe të gatshme që do t'ju ndihmojnë të prezantoni shërbimet tuaja, të krijoni një galeri projektesh dhe shumë e shumë më tepër. Së bashku me Elementor-builder, krijimi i një faqe interneti do të kthehet në kënaqësi të pastër. Në fund të fundit, ju lejon thjesht të tërhiqni dhe të lëshoni përmbajtjen e zgjedhur në vendndodhjen e dëshiruar në sit.
Shkarko Demo Në përfundimSiç mund ta shihni, ka shumë për të zgjedhur. Ju gjithashtu mund të shikoni temat në kategorinë "Software" në TemplateMonster. Zgjedhja atje nuk është aq e gjerë sa në ThemeForest, por ka edhe disa gjëra interesante. Më lejoni t'ju kujtoj se kur zgjidhni një temë premium për faqen tuaj, nuk duhet të vareni në temën e saj. Gjëja kryesore është dizajni, struktura dhe çdo temë mund të "tërheqet". Unë fola më shumë se si të mos e prishni atë në një nga artikujt e mi të mëparshëm.
Regjistrohu në telegramin tim dhe bëhu i pari që merr materiale të reja, përfshirë ato që nuk janë në faqe.
Unë e përshtata këtë shabllon me standardet e shfletuesve të platformave të tilla si IOS (3.1+), Android (2.1+), Blackberry (6.0+), Windows Phone 7, si dhe Opera mobile për Android, e cila po fiton popullaritet. Dëshiroj të vërej se të gjithë shfletuesit standardë (me përjashtim të Windows Phone 7 i cili ka IE9) bazohen në ueb-kit.
Cili është ndryshimi midis zhvillimit të faqeve të desktopit dhe faqeve për pajisjet celulare? Më pas, do të flas për disa truke që do t'ju ndihmojnë të shmangni shumë probleme.
Cila rezolutë të zgjidhni dhe meta etiketën e portit të pamjesDo të duket se duhet të kemi një pyetje se çfarë rezolute të përdorim si bazë për faqen tonë? Në fund të fundit, pajisjet me 230x340 (për shembull HTC Wildfire S) dhe rreth 800x480,960x640 (HTC Incredible S, iPhone 4) dhe madje 1280x720 (HTC One X) janë të rëndësishme tani. Na vjen në ndihmë meta etiketa e pamjes, e cila do të zgjidhë problemin me zgjidhjen dhe shkallëzimin.
- width=device-width - vlera vendoset nga vetë pajisja
- shkalla fillestare=1 - shkalla fillestare është vendosur në 1 (d.m.th. 1:1)
- shkalla maksimale = 1.0, shkallëzimi i përdoruesit = pa - shkallëzimi është i ndaluar (dua të vërej se edhe me këto parametra, HTC do të vazhdojë të shkallëzohet vazhdimisht, dhe zhvilluesit thanë që ky nuk është një gabim, por një veçori)
Edhe me këtë gamë rezolucionesh, duhet të vërej se shumica e pajisjeve celulare, që kanë një rezolucion të lartë, e përdorin atë jo për të zgjeruar hapësirën e tyre të punës, por për të rritur qartësinë (më shumë për këtë). Me fjalë të tjera, ngopja e tyre me piksel (DPI) është disa herë më e lartë se rezolucionet më të vogla. Kjo çon në përfundimin se pajisjet me një PDI të madh në fakt kompresojnë sitin 2 herë në mënyrë që të marrin të njëjtat dimensione si në pajisjet me rezolucion më të ulët (për shembull, në pajisjet Apple me një ekran retinë, ka 4 herë më shumë pika në e njëjta zonë e ekranit, e cila rrit përkufizimin). Rezultatin mund ta shohim më qartë në foton më poshtë.
Tani që e dimë se si funksionojnë ekranet me DPI të lartë, ia vlen të mendojmë për shfaqjen e saktë të të gjithë elementëve të faqes sonë të internetit.
Le të fillojmë me elementë të tillë si fontet, kufijtë dhe elementë të tjerë të ngjashëm. Të gjithë këta elementë janë në thelb objekte vektoriale që shfletuesi mund t'i shkallëzojë pa probleme, kështu që le të mos ndalemi në këtë.
Situata është e ndryshme me fotot dhe imazhet e sfondit. Në fund të fundit, nëse e ruajmë imazhin e sfondit në bazë të asaj që kemi 320x480, atëherë pajisjet me një DPI më të dendur nuk do të jenë në gjendje të shfaqen me gjithë lavdinë e tij tek ne, dhe të gjitha përpjekjet për të përcjellë qartësinë dhe bukurinë e imazhit do të vijnë asgjë, pasi ato në fakt do ta rrisin atë me 2 herë (dhe sado mirë të shkallëzohet shfletuesi, cilësia humbet gjithmonë kur softueri rrit madhësinë). Ja ku na vjen në ndihmë një truk! Do të përpiqem të shpjegoj me një shembull. Ne kemi një faqe interneti në kokën e së cilës ka një sfond të caktuar që zë 320 px në gjerësi. Pra, në mënyrë që ekranet tona super të qarta ta shfaqin këtë imazh në 100%, imazhi origjinal nuk duhet të jetë 320x50 por 640x100 (saktësisht 2 herë më i madh) , dhe duke përdorur css set background-size: 320px 50px;. Ne bëjmë shamanizëm të ngjashëm me imazhet në formën e img.
Për shkak të faktit se Android, BlackBerry, IOS dhe Windows Phone 7 mbështesin plotësisht Data-url, ne mund të reduktojmë ndjeshëm numrin e kërkesave duke zbatuar të gjitha imazhet e sfondit në css. Përveç optimizimit të pyetjeve, ne kemi një fitim të madh për shkak të cachimit të css.
Probleme me spritet dhe fototPër shkak të faktit se shfletuesi ynë kompreson përmbajtjen dhe e shkallëzon atë në një madhësi të caktuar, ai mund të rrumbullakos gabimisht madhësitë gjatë llogaritjeve, dhe për këtë arsye, kur ngjitni sprites piksel pas piksel, do të shfaqet një shirit i elementit tjetër. Për të shmangur këtë, ia vlen të bëni një hendek prej disa pikselësh gjatë ngjitjes.
Problem i vogël me formatet e imazhitKam hasur gjithashtu një problem të pakëndshëm në disa pajisje që lidhen me formatet e imazhit. Përsëri, unë do të jap një shembull: ka 2 imazhe të ruajtura duke përdorur Save for Web në Photoshop (njëra prej të cilave është një gradient linear që shtrihet përgjatë boshtit Y, dhe i dyti është një lloj imazhi që është prerë me një copë të gradientit, dhe në fakt duhet të përshtatet në gradient të përsëritur), por në formate të ndryshme (png dhe jpg). Pra, në disa pajisje njëra fotografi është më e lehtë dhe e dyta është më e errët. Kështu që për të zgjidhur këtë problem më është dashur të ruaj të dy imazhet në të njëjtin format.
Fshehja e shiritit të URL-sëMeqenëse nuk kemi aq shumë hapësirë në pajisjen tonë, nuk do të na dëmtojë të fitojmë disa dhjetëra pikselë shtesë. Dhe ne mund t'i gjejmë ato duke fshehur shiritin tonë të URL-së. Për këtë ne kemi një skenar të thjeshtë:
AddEventListener("load", funksion() ( setTimeout(hideURLbar, 0); ), false); funksioni hideURLbar() ( window.scrollTo (0, 1); )
Por unë vërej se ky skenar mund të ndërhyjë me ne nëse lidhja jonë çon në një nga ankorat faqe e re(në këtë rast, ne do të lëvizim te elementi ynë dhe pas ngarkimit faqja do të kthehet në krye), por kjo mund të shmanget lehtësisht duke bërë një kontroll shtesë të URL-së sonë.
Efekti vizual i klikimit në një elementPër shembull, për iOS mund të arrijmë efektin e klikimit duke përdorur pseudo-class: active. Por do të funksionojë edhe nëse elementi ynë është në fokus kur lëvizim faqen, gjë që nuk është shumë e bukur. Prandaj, vendosa të shkruaj një skenar të vogël që do të imitojë një klikim dhe do ta anulojë atë kur lëviz faqen.
Var scroller=false; $("a").live("touchstart",funksion(ngjarje)( var elem=$(kjo); clickable=setTimeout(funksion () ( elem.addClass("aktive");), 100); )) ; $("a").live("touchmove",funksion(ngjarje)(clearTimeout(e klikuar); scroller=true; )); $("a").live("touchend",funksion(ngjarje)( var elem=$(kjo); clearTimeout(e klikuar); if(!scroller) ( elem.addClass("aktive"); setTimeout(funksion ( ) ( elem.removeClass("aktive");), 50); ) else (elem.removeClass("aktive"); )));
Heqja e kornizës dhe nënvizimi nga lidhjet dhe butonatNdoshta çdo përdorues ka vënë re se kur klikoni në një lidhje, ajo kornizohet dhe theksohet. Ky efekt mund të prishë shumë idenë e stilistit. Këtu na vjen në ndihmë një lloj rivendosjeje stili (e testuar në të gjithë shfletuesit e ueb-kit, dhe këta janë shfletues vendas IOS, Android, BlackBerry)
*( -webkit-text-size-adjust: asnjë; /*ndreq një gabim në IOS me shkallëzim në peizazh*/ skicë: asnjë; /*hiq kornizën rreth lidhjeve dhe butonave*/ -webkit-touch-callout: asnjë; /* nëse është e nevojshme, ne çaktivizojmë theksimin e tekstit*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*heqim theksimin e sfondit të lidhjeve dhe butonave*/ )
mbështetje fikseSepse teknologjive celulare Tani ata po ecin përpara shumë shpejt, dhe në momentin e shkrimit të artikullit, përqindja e shfletuesve që nuk mbështesin fiks po i afrohet zeros, nuk do të hyj shumë në përshkrim. Thjesht do të them që për këta shfletues duhet të përdorim iscroll. Do të përshkruaj gjithashtu një truk të vogël në lidhje me lidhjen dinamike të skripteve (të nevojshme për të mos përfshirë një skedar shtesë për shfletuesit normalë)
//versioni i vjetër IOS zbulon var OSName="Sistem i panjohur"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion
NË në këtë shembull Kontrollova nëse është një Iphone dhe versioni i shfletuesit është më pak se 534 (nuk e mbështet fiks). Unë e përfshij në mënyrë dinamike skriptin fixing.js
CSS3Gjithashtu, mos harroni se tashmë mund të përdorim disa veti css3 në maksimum (thjesht mos harroni për parashtesat moz-, webkit-, o-). Për WP7, mos ngurroni të lidhni pie.htc.
Lidhja e desktopit për IOSNdoshta për përdoruesit e iOS Nuk është sekret që në Safari mund të vendosni një lidhje me një faqe interneti në desktopin tuaj.
Këtu është një shembull i një lidhjeje të tillë me Forismatik.
Më poshtë Shembull HTML kodi për ikonën (vetë IOS do ta zmadhojë atë, do të shtojë qoshe të rrumbullakosura), njoftime që kjo lidhje ju duhet ta hapni atë si një aplikacion (drejtohet në ekran të plotë), si dhe kodin që fsheh shiritin e URL-së. Nëse dëshironi, mund të shfaqni edhe një dritare me spërkatje.
- njofton se do të hapet në ekran të plotë, duke fshehur shiritin e URL-së - ndryshoni ngjyrën e shiritit të statusit në të zezë (vlerat e disponueshme janë të paracaktuara, të zeza, të zeza të tejdukshme). parazgjedhja e paracaktuar - lidhja me ikonën që shfaqet në desktop.
Ne mund të shohim një shembull të drejtpërdrejtë të gjithçkaje të përshkruar më sipër.
Përshëndetje, lexuesit e mi të dashur të blogut. Ruslan Galiulin është në kontakt. Sot do të flasim për versionet celulare të faqeve të internetit që çdo faqe interneti apo blog duhet të ketë për të kaluar në TOP Motorë kërkimi. Në artikull do të jap kode stili dhe shembuj të gatshëm të paraqitjes së faqeve që mund t'i shkarkoni në kompjuterin tuaj.
Nëse faqja juaj nuk është ende e lëvizshme, ju rekomandoj të përdorni këshillat e mia ose të kontaktoni profesionistë - http://www.Mobile-version.ru të cilët do të bëjnë gjithçka sipas standardeve të motorit të kërkimit. Duke përdorur të njëjtën lidhje, mund të kontrolloni sitin tuaj për lëvizshmëri.
Në vitin 2013, Google filloi të ushtronte presion mbi webmasterët (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), duke i bindur ata për nevojën për të krijuar modifikime të lehta të faqes, dhe që nga viti 2015, lëvizshmëria është bërë një nga aspektet e renditjes (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex nuk është shumë prapa, pasi ka krijuar një algoritëm të veçantë "Vladivostok" që merr parasysh përshtatshmërinë e faqes për shikim në telefon.
Mobile Friendly sot nuk ka të bëjë vetëm me kujdesin për vizitorët, por një kusht i domosdoshëm për promovim.
Kur një faqe interneti krijohet nga e para, përdoret qasja Mobile First. Por shumica kanë projekte të vjetra pune. Pyetja kryesore që ngre versioni celular i faqes në situata të tilla është se si ta bëjmë atë pa prishur shabllonin ekzistues?
Ka tre qasje:
- Një adresë dhe faqosje e veçantë - e vendosur në një nëndomain si m.site.ru. Ridrejtimi ndodh përmes një ridrejtimi të serverit te agjenti i përdoruesit.
- Dizajni i përgjegjshëm - url dhe html mbeten të njëjta si në formatin e desktopit, por në pyetjet e medias CSS ofrojnë rregulla për ekrane të ndryshme.
- RESS është një dizajn reagues, adresa mbetet e njëjtë, por serveri dërgon grupe stilesh në varësi të llojit të harduerit që kërkon faqen.
Për pronarët e projekteve të vjetra zgjedhje optimale- përdorimi i paraqitjes adaptive. Le të shohim se si ta bëni këtë me duart tuaja dhe pa përdorur shtojca të pasigurta hap pas hapi.
Versioni celular i faqes: si ta bëni atë siç duhetVeprimet e mëtejshme do të kërkojnë besim njohuri baze html dhe css ose aftësia për të kërkuar shpejt në google gjëra të pakuptueshme.
Informacion për fillestarët: në CSS, fjalët përpara kllapave kaçurrelë nënkuptojnë copa specifike skedar html, të cilat ata janë përgjegjës për shfaqjen. Shpesh shkruhen me pikë ose hash - #vendi (vetia: vlera;).
Hapi 1. Hiqni kufizimet.
Pronarët e paraqitjeve të gomës mund ta kalojnë këtë hap. Pjesa tjetër do të duhet të punojë më shumë.
Gjerësia - ne kërkojmë seksione të mëdha në kod me një ekran të përcaktuar në mënyrë të ngurtë. Nëse parametri specifikohet në piksel ose pikë, duhet ta ndryshoni vlerën e tij në përqindje, ems dhe njësi të tjera që janë të ndjeshme ndaj mjedisit. Shpesh, zona kryesore e kontejnerit ose e përmbajtjes ka një gjerësi fikse - në shumicën e rasteve kufizimet hiqen duke e zëvendësuar atë me gjerësinë maksimale.
Fotografitë - në vend të madhësive të qarta, ne shkruajmë vetitë për etiketën img, e cila do t'i bëjë imazhet të adaptueshme. Fotografitë do të ndryshojnë përmasat brenda kontejnerëve të tyre mëmë.
img(
Gjerësia maksimale: 100%;
Lartësia: auto;
Tabelat - nuk do të jeni në gjendje t'i vendosni ato që të jenë plotësisht të përgjegjshme, por mund t'i bëni faqet me to të përshtatshme për pajisjet celulare duke shtuar këtë kod:
tabela (
Ekrani: bllok;
Gjerësia: 100%;
Overflow-x: lëviz;
Vërshim-y: i fshehur;
Ms-overflow-style: -ms-autohiding-scrollbar;
Webkit-overflow-scrolling: prekje;
Mbështjelljet janë të specifikuara nga vetia float. Vendosja e këtij parametri do të lejojë që blloqet të lëvizin në varësi të parametrave të dritares, duke u përshtatur me elementë me pozicion të qëndrueshëm ose brenda kontejnerëve prindër. Elementet standarde të div përkthehen si parazgjedhje secili në linjë e re. Për shembull, duke vendosur blloqe div 1000 px me 200 px secili në një enë, mund të shihni foton e mëposhtme.
Blloqet qëndronin mbi njëri-tjetrin. Shtimi i një mbështjelljeje heq ndërprerjet e linjës dhe rreshton elementët në të gjithë hapësirën e disponueshme.
Hapi 2: Planifikoni riorganizimin e përmbajtjes suaj.
Zbuloni se cilat pjesë të faqes suaj të desktopit duhet të shfaqen në pajisjet celulare. Për ta bërë këtë, përgjigjuni vetes këtyre pyetjeve:
- Cilat blloqe kryejnë vetëm funksione dekorative? - Më shpesh këto janë rrëshqitës, dekorime të shiritit anësor, pyetësorë, foto të rastësishme.
- Çfarë injorojnë vizitorët? - Hartat e nxehtësisë së klikimeve dhe shtigjeve do të ndihmojnë në përgjigjen e kësaj pyetjeje. Ne do të fshehim pamëshirshëm elementët më pak aktivë.
- Ajo që duhet të mbetet patjetër brenda versioni celular? - Zakonisht kjo është reklama, një formular reagimi, abonime ose butona të mediave sociale.
- Mendoni se si duhet të duket faqja në tableta, telefona inteligjentë dhe telefona të vegjël të vjetër - mund të vendosni një pamje të ndryshme për secilën pajisje.
Hapi 3. Komoditet.
Navigimi: ekranet e telefonit janë shumë të vegjël; një meny e rregullt e uebsajtit rrallë përshtatet në një kornizë të tillë. Është zakon të instaloni një menu që bie duke përdorur një buton.
Zona e përmbajtjes: Për telefonat, është e zakonshme të vendosni gjerësinë e trupit në CSS në 100%, në varësi të hapësirës së disponueshme. Kjo do të thotë që teksti, modulet, reklamat dhe përmbajtja e shiritit anësor do të shfaqen në një kolonë në pajisjet e vogla.
Sensorët: Gishtat nuk janë aq të saktë sa miu, jepi atyre shumë hapësirë. Hapësira rreth lidhjeve dhe elementëve të tjerë aktivë duhet të jetë së paku 28 x 28 piksele.
Ndihmojini vizitorët tuaj të përcaktojnë hapësirën aktive - dhëmbëzimet, pikat kryesore, ndryshimet e ngjyrave dhe gjëra të tjera që mund të vendosen për prekje, të shkruajnë një pseudo-klasë pezullimi për lidhjet dhe butonat.
Zbatimi i pyetjeve mediatike me shembujNëse keni krijuar ndonjëherë tabela CSS për printim, tashmë keni një ide për mundësitë e caktimit të stileve individuale në varësi të kushteve.
Pyetjet e medias janë shprehje logjike; qasja në to nënkupton një përgjigje me një parametër të vërtetë ose të rremë. Nëse rezultati i pyetjes është i vërtetë, domethënë, dimensionet e agjentit të përdoruesit ose të pajisjes përputhen me llojin e medias të specifikuar, atëherë rregullat e stilit të specifikuara brenda bllokut të medias zbatohen automatikisht.
Pyetjet e medias mund të caktohen sipas parametrave të mëposhtëm:
- gjerësia dhe lartësia e dritares së shfletuesit;
- gjerësia dhe lartësia e pajisjes;
- orientimi - modaliteti i peizazhit ose portretit;
- rezolucioni i ekranit.
Lista aktuale e argumenteve është e disponueshme në specifikimin zyrtar.
Le të kalojmë te shembujt. Hani shabllon i gatshëm, madhësia e pjesës së përmbajtjes së tij është 1000 piksele, të gjithë elementët dhe detajet e brendshme janë konfiguruar në lidhje me këtë parametër.
Nëse ekrani i përdoruesit është më i ngushtë se pjesa e specifikuar e përmbajtjes, do të shfaqet një shirit lëvizës. Elementet e dizajnit lundrues mund të sillen në mënyra të paparashikueshme - duke u përplasur me njëri-tjetrin, duke turbulluar ose duke u ngushtuar shumë.
Para së gjithash, ne heqim madhësinë fikse që krijon brezin në mënyrë që të mos ndërhyjë në cilësimet. Në shabllonin tonë, ky është mbështjellësi i lundrimit. Në paraqitjen e lexuesit, ky mund të jetë një ose më shumë elementë. Nëse e keni të vështirë të përcaktoni, hapni veglat e zhvilluesit të shfletuesit - duke përdorur pamjen e modelit të bllokut, gjeni elementin që nuk përshtatet në dimensionet e ekranit.
Për ta rregulluar këtë, hiqni kornizat fikse duke shkruar në stilet e shabllonit:
Ekrani @media vetëm dhe (gjerësia maksimale: 1000 px) (
Nav (gjerësia: 100%; )
Tani, nëse gjerësia e ekranit të përdoruesit është më pak se 1000 px, atëherë gjerësia e menusë do të jetë e barabartë me 100% të madhësisë së saj. Versioni kryesor i shabllonit duket i njëjtë si më parë. Zëvendësimi i pronës hoqi shiritin e poshtëm të lëvizjes kur zvogëlohej ekrani.
Por blloqet ende duken të dyshimta - le të ndryshojmë ekranin e tyre, duke rritur gjerësinë në përqindje në madhësinë e kërkuar.
Ne i shtojmë të njëjtit mediaquery:
Blloku (gjerësia: 35%;)
Si të gjeni madhësitë optimale për blloqet e faqes tuaj? Llogaritni manualisht ose merrni ndonjë rrjet të gatshëm si bazë - rrjetë fluide. Mund të përqendroheni në standardet ekzistuese: në paraqitjet me dy kolona me një gjerësi dritareje 980-1050 px, mbështjellësi merret si 95%, përmbajtja - 60%, dhe 30% lihet për shiritin anësor. Hapësira e mbetur përdoret për të formuar kufij dhe kufij për rregullsinë.
Sidoqoftë, mund të përdorni madhësinë e kutisë për përmbajtjen në mënyrë që të mos llogaritni pikselët çdo herë, por të punoni sipas dimensioneve të përgjithshme.
Le të kalojmë në vendosjen e shfaqjes në ekranet me rezolucion më të ulët:
Ekrani vetëm @media dhe (gjerësia maksimale: 600 px) (
Blloko (
Float:asnjë;
Gjerësia:85%;
Marzhi: 1em auto;
Nëse ekrani është më pak se 600 px, atëherë blloqet tona duhet të futen në një kolonë - hiqni mbështjelljet, vendosni dhëmbëza të reja, qendroni dhe ndryshoni gjerësinë. Më shpesh është vendosur në 100%, por nëse për ndonjë arsye kjo është e papërshtatshme, ne vendosim madhësinë tonë.
Në këtë mënyrë ju mund të vendosni jo vetëm dimensionet e blloqeve të përmbajtjes, por edhe shfaqjen e tyre. Për shembull, ndaloni shfaqjen e elementeve të mëdhenj, duke i zëvendësuar ato me ndonjë të përshtatshëm.
Le të demonstrojmë mundësitë duke përdorur shembullin e ndryshimit të ngjyrave dhe ekraneve.
Versioni i smartfonit fsheh menunë kryesore dhe e kthen ngjyrën blu të bllokut, ndërsa ekrani më i madh shfaq dizajnin pa këto ndryshime.
Fshehja e navigimit kërkohet në shumicën e rasteve - zëvendësohet me një buton. Është më e përshtatshme ta bëni këtë duke përdorur javascript; mund të përdorni zgjidhje të gatshme.
Ndryshimet bëhen në drejtim të pikës, diapazoni mund të kufizohet si sipër ashtu edhe poshtë. Është i shpejtë dhe i përshtatshëm - në një rresht ju specifikoni CSS të veçantë për të pajisje të ndryshme pa ndikuar në pamjen kryesore të faqes.
Ju mund të deklaroni rregullat @media kudo brenda një fletë stili ekzistues, ose mund të krijoni një të veçantë për këto deklarata, dhe më pas ta importoni atë në CSS kryesore duke përdorur rregullin @import.
Versioni celular i faqes: si ta bëni dhe çfarë t'i kushtoni vëmendjeMediaQuery kuptohet nga të gjithë shfletuesit modernë, por nuk do të funksionojë në IE 8 dhe më poshtë. Problemi zgjidhet duke iu drejtuar IE-ve më të vjetra duke përdorur komente të kushtëzuara. Ato duhet të shkruhen në kodin e shabllonit, jo në CSS.
Vetë skripti është i disponueshëm në GitHub (https://github.com/scottjehl/Respond), shton mbështetje për dimensionet minimale dhe maksimale dhe pyetjet e medias në IE të vjetër.
Një problem tjetër është se dizajni i përgjegjshëm përfshin përdorimin e Html5, i cili është përsëri i pakuptueshëm për shfletuesit e vjetër. Trajtuar me hak:
Document.createElement("header");
Document.createElement("nav");
Document.createElement("seksion");
Document.createElement("artikull");
Document.createElement("aside");
Document.createElement("footer");
Kodi është shkruar në html; përveç kësaj, shfaqja e bllokut të elementeve të krijuar është vendosur në CSS:
kokë, navigim, seksion, artikull, mënjanë, fundi (shfaq: bllok;)
Le të prekim menjëherë pyetjen - si të sigurohemi që disa skripta të shfaqen vetëm me parametrat e specifikuar të ekranit. Nëse përdorni jquery, do t'ju duhet të shtoni një skript të thjeshtë në kodin e shabllonit. Numrat ndryshojnë në ato të kërkuara. Lexohet kështu: nëse gjerësia e dritares tejkalon 980 piksele, skripti i specifikuar në shtegun zbatohet në faqe. Ju mund të specifikoni disa, sintaksa shkruhet me analogji duke përdorur një pikëpresje brenda kllapave kaçurrelë.
Nëse ($(dokument).width() > 980) (
$.getScript("rruga drejt skriptit");
Një pikë tjetër është se si shfletuesi celular i iPhone duhet të përpunojë përmbajtjen e transmetuar dhe nëse lejohet rritja e saj. Për ta bërë këtë, një shkallë fillestare shkruhet në kokë:
E tëra që mbetet është të kontrolloni korrektësinë - për këtë mund të përdorni shfletuesin dhe telefonin tuaj ose t'i drejtoheni shërbimeve.
Nëse faqja është ridizajnuar për të server lokal, korrektësia mund të përcaktohet në ami.responsivedesign.is . Për shfaqje të saktë, pronarët e Denverit do të duhet të ndryshojnë kodimin në utf-8 duke redaktuar skedarin httpd.conf të serverit.
Shërbimi do të demonstrojë se si duket projekti në pajisje të ndryshme.
Për më tepër, shablloni testohet https://developers.google.com/speed/pagespeed/insights/ ose në një formë të veçantë https://www.google.com/webmasters/tools/mobile-friendly, si dhe në webmasterët .
Në Yandex kjo duket e detajuar, por Google thjesht do të raportojë se nuk ka probleme.
Nëse gjithçka është bërë në mënyrë korrekte, nuk do të ketë asnjë lëvizje ose elementë të panevojshëm. Versioni celular është gati, dhe tani keni mësuar se si ta bëni vetë. Nëse materiali ishte i dobishëm për ju, atëherë pëlqeni dhe abonohuni në buletinin e blogut. Gjithe te mirat.
Më poshtë, duke klikuar në një nga butonat, mund të shkarkoni 2 shembuj të faqes së palosur në këtë mësim dhe thjesht të punoni me faqet e përfunduara dhe të kopjoni kodin.
Sinqerisht, Galiulin Ruslan.
Në këtë postim do të flasim për një shabllon celular për Wordpress. Shablloni është shumë i bukur, funksional, me përdorshmëri të shkëlqyer dhe i projektuar posaçërisht për platforma celulare dhe tableta.
Shablloni ka një menu të përshtatshme që mund të konfigurohet bardh e zi ose të zgjidhni një skemë të ndryshme ngjyrash për shfaqje. Shablloni është bërë për motorin Wordpress duke përfshirë të gjitha faqet e nevojshme dhe është i kompletuar në montimin e tij.
Në këtë rast kemi përpara një tipike shabllon i blogut celular. Duke pasur parasysh dinamikën e kalimit nga pajisjet kompjuterike desktop në mishërimet e tyre celulare, duhet të bëni një përpjekje të vogël për të rritur ndikimin e blogjeve tuaja në mjedisin e internetit celular.
Interesante në të gjitha aspektet, shablloni celular Dot Mobi do të gjejë shumë aplikacione në projektet tuaja në internet. Dizajni i freskët, faqosja profesionale, pesha e lehtë dhe përdorshmëria e shkëlqyer do të gjejnë shumë mbështetës për të punuar me shabllonin për një sajt celular menjëherë pas shkarkimit.
Ky është një nga ato modele të faqeve celulare që nuk dëshironi të ndaheni dhe t'i mbani për faqet tuaja. Megjithatë, kjo nuk do të jetë kështu dhe do të jetë në kundërshtim me parimin e paraqitjes së informacionit në faqe. Prandaj - merrni atë.
Publikime mbi temën
-
Furnizimi me energji elektrike për një kompjuter - si të zgjidhni atë të duhurin bazuar në fuqinë, prodhuesin dhe koston
Furnizimi me energji elektrike është komponenti më i rëndësishëm i çdo kompjuteri personal, nga i cili varet besueshmëria dhe qëndrueshmëria e konstruksionit tuaj. Në...
-
Udhëzues për seksionin Interesante dhe Kërkim në Instagram Si të gjeni një histori në Instagram
Duke përdorur rrjetin social Instagram, shumë përdorues mund të bëjnë pyetjen: "Çfarë është direkt në Instagram dhe ku ndodhet?" -...