Salom. Bir sahifali saytlar hali ham mashhur va yaxshi sabablarga ko'ra. To'liq huquqli ko'p sahifali saytlarga nisbatan ular bir qator afzalliklarga ega. Bir sahifada (shuningdek, ochilish sahifasi sifatida ham tanilgan) odam diqqatini bitta g'oyaga, bitta mahsulotga qaratadi, bu unga sizning taklifingizni chalg'itmasdan o'rganish imkonini beradi va so'rovni qoldirishga ko'proq tayyor.
"OK"- sen aytasan - "Men o'zimga ochilish sahifasini yaratishga qaror qildim, lekin dasturlash haqida hech narsa tushunmayapman". Va bu muammo emas. Endi kodni "qazmasdan" professional sayt yaratish uchun juda ko'p vositalar mavjud. Ulardan biri WPBackery yoki Elementor quruvchisi bilan mashhur WordPress CMS.
Ushbu maqolada men biznes, mahsulot sotish, agentliklar, frilanserlar va boshqa har qanday mavzuga mos keladigan ajoyib WordPress ochilish sahifasi shablonlarini taqdim etdim. Axir, bunday shablonlarni o'zingiz va sizning taklifingiz uchun moslashtirish mumkin va kerak.
Ko'pgina shablonlarda parallaks effektlari, tekis dizayn, to'liq ekranli fotosuratlar va videolar kabi zamonaviy qo'ng'iroqlar va hushtaklar mavjud. Mobil qurilmalar uchun moslashuv har bir shablonda mavjud.
Munozara yetarli, keling, kompilyatsiyani tomosha qilamiz!
P.s. Agar siz ochilish sahifasi nima ekanligini ko'proq bilmoqchi bo'lsangiz, men bu savolni batafsil tahlil qildim va ochilish sahifalarining 27 ta misolini keltirdim.
Men uchun bu eng yaxshi shablon, chunki unda turli mavzularda 376+ demo mavjud. Ushbu shablon yordamida siz butunlay boshqa his-tuyg'ularni etkazishingiz mumkin. Kuchli va intuitiv.
Ushbu ajoyib mavzuda cheksiz imkoniyatlarni ochib beradigan maxsus slayder, toʻliq sozlanishi sarlavhalar, mega menyular, video fonlar, qattiq yoki yopishqoq sarlavha, turli sarlavha logotiplari, bosiladigan elementlar, 7 xil portfel sxemalari va boshqalar mavjud.
Mahsulotingiz yoki taklifingizning noyob taqdimotini qiling. Matnda vizual ko'rsatmalar, shuningdek, video ko'rsatmalar mavjud.
Ilg'or va noyob shablon tizimi, bu sizga nafaqat ochilish sahifasini yaratish, balki uni asosiy loyiha veb-saytiga qo'shimcha sozlamalarsiz integratsiya qilish imkonini beradi. Shablonda siz ochilish sahifalarida talab qilinadigan bloklar uchun ko'plab tayyor uslublarni topishingiz mumkin - jamoa taqdimoti, galereya, portfel. Chiroyli sahifani oldindan yuklash effektlari ham mavjud.
Aytgancha, The7 endi mening blogimda.
Betheme - funksionallik va oldindan o'rnatilgan tartib variantlari soni bo'yicha eng katta shablon. Bugungi kunga kelib, ushbu mavzuga asoslangan 400 dan ortiq demo maydonchalari mavjud, siz istalgan birini tanlashingiz va ehtiyojlaringizga moslashingiz mumkin. Betheme-ga tayyor qo'nishlardan faol foydalaniladi:
Yana bir nechta demolar:
Mavzuni yangilash avtomatik ravishda amalga oshiriladi, plaginni yangilash tugma orqali amalga oshiriladi. Namoyish saytlari Revolution Slider-dan foydalanadi. Shablon sahifalar uchun 5 ta tartib variantlarini, 20 ta maxsus sarlavhalarni, Google xaritalari uchun cheksiz uslublarni, ko'plab zamonaviy piktogrammalarni taklif etadi.
Muffin Builder vositasi veb-ishlab chiqish bilimisiz har qanday dizaynni yaratishga yordam beradi. Agar xohlasangiz, asosiy shablon kodiga ta'sir qilmasdan CSS qoidalari va JS skriptlarini qo'shishingiz mumkin.
Ronneby yuqori unumdorlikka va keng imkoniyatlar paneliga ega. Shablon yaratish uchun eng yaxshi premium plaginlarga ega ochilish sahifalari WordPress. Shablonni ishlab chiquvchilar foydalanuvchilarni qo'llab-quvvatlashga alohida e'tibor berishadi - har qanday savolga muammoni qanday hal qilishni tasvirlab, tezda javob berish kerak. Mavzu allaqachon ikki til uchun mahalliylashtirilgan, ammo tarjima uchun fayllar ham unga biriktirilgan bo'lib, saytlar uchun ko'p tilli yordamni tashkil qilish imkonini beradi.
Yana bir demo misoli:
Moslashuvchan va shu bilan birga sozlanishi oson shablon. Barcha mumkin bo'lgan mavzularda 72 ta terini o'z ichiga oladi. Qulay admin. panel, hatto yangi boshlanuvchilar uchun ham sahifa yaratuvchisi va sozlamalarini tushunish oson bo'ladi.
Veb-saytingizni qanday qilib ajoyib qilish bo'yicha 240 sahifa va 20 ta video darsliklarni o'z ichiga olgan foydali qo'llanmalar mavjud!)
Yupiter shabloni ham SEO uchun optimallashtirilgan. Google PageSpeed orqali tekshirish yaxshi natijalarni ko'rsatadi, ya'ni qidiruv tizimlari saytingizni yaxshi ko'radi.
Shablon toza, toza, yuqori sifatli tipografiyadan foydalanilgan. Parallaks kabi vizual effektlardan foydalanish tufayli mavzu jonli va bunday saytga qarash juda yoqimli.
Eng katta WordPress to'plamlaridan biri. Shablonlar professional veb-dasturchilar tomonidan yozilgan va dizaynlar malakali vizual va UX rassomlari tomonidan yaratilgan. Buning yordamida siz har qanday shablonni xavfsiz o'rnatishingiz mumkin, ularning har biri kompyuterda foydalanishga tayyor, Uyali telefon, planshet. Premium plaginlari kiritilgan:
Bruklinda turli mavzularga ega 16 ta demo terilari mavjud. Sahifalarning zamonaviy uslubi, tasvirlar va shriftlar kombinatsiyasi ushbu mavzudan foydalanadigan har qanday saytga nafislik qo'shadi. Portfolio bilan chiroyli bajarilgan blok. Shablon agentliklar, biznes kompaniyalari uchun juda mos keladi. Shablonlar quyuq ranglarda yaratilgan bo'lib, bu ishonch bag'ishlaydi va ishonchni ilhomlantiradi. Shablon sezgir va barcha qurilmalarda ajoyib ko'rinadi.
Hech kimni befarq qoldirmaydigan silliq va engil shablon. Yuqori sifatli tipografiya va interfeys elementlari ushbu shablonni hashamatli qiladi. Awwwards kabi taniqli tanlovlar va reytinglarning nomzodi va g'olibi. Tanlash uchun turli mavzulardagi 30 dan ortiq terilar mavjud
Mobil qurilmalarga nafaqat saytni, balki tashrif buyuruvchilar uchun eng qulay ko'rinishda tasvirlarni ham moslashtiradi.
Shablon yangi, lekin allaqachon o'zini isbotlagan. U har birida 3-12 ta teriga ega 8 ta mavzuga ega (koʻp sahifali, qoʻnish, korporativ, portfel, blog, elektron tijorat, stublar). Go'zallik va ozodalikka qo'shimcha ravishda, ushbu shablonda turli xil vidjetlar va elementlarning arsenaliga ega. Siz qo'nishni chiroyli va funktsional qilishingiz mumkin. Slayder kerakmi? Arzimaydi. Portfelni, guvohliklarni, imtiyozlarni ko'rsatingmi? Va shunday.
Native – startapni reklama qilishning kuchli vositasi. Mavzuga asoslangan WordPress ochilish sahifasi shablonlari saytning semantik bloklari orasida harakat qilish uchun turli xil parallaks effektlaridan foydalanadi. Kengaytirilgan hujjatlar va video darsliklar yangi CMS foydalanuvchilariga boshqaruv paneli funksiyalarini tezda tushunishga yordam beradi. Visual Composer, Layer Slider va Slider Revolution plaginlari shablonga bepul qo'shimchalar sifatida keladi.
Salient - ko'pincha tomonidan tanlanadigan sezgir dizaynga ega ko'p qirrali mavzu. Sahifani pastga aylantirganda paydo bo'ladigan premium tipografiya va parallaks effektlari ochilish sahifasi tajribasini yaxshilashga yordam beradi. Kadr tezligini optimallashtirish kontent bloklari o'rtasida silliq animatsiya o'tishlarini ta'minlaydi. Shablon moslashtirilgan tasvir o'lchamlaridan foydalanadi, bu sahifani tez yuklash va trafikni tejashga yordam beradi.
TheGem - bu SEO-optimallashtirilgan va sezgir tartib bilan takomillashtirilgan ijodiy loyihalar uchun zamonaviy mavzu. Sahifalarning engil vazni, ularni yuklash tezligi va puxta o'ylangan UX shablonning yuqori ishlashini kafolatlaydi. Agar siz ochilish sahifasidan foydalanib o'z biznesingizni targ'ib qilishingiz kerak bo'lsa, Google qidiruv natijalarida yuqori o'rinlarni egallashni ta'minlaydigan seo-do'st kodi tufayli ushbu shablonni sotib olishingiz kerak. 11 ta mavjud demo ochilish sahifalari turli loyihalarning ehtiyojlarini hisobga oladi.
TheGem-dagi sayt uchun dizayn elementlari Visual Composer plagini yordamida sozlangan. Qo'nish bloklarida (portfel, sharhlar, xizmatlar) katta hajmdagi kontentni ko'rsatish yuklash - avtomatik yoki "tugmacha" orqali, shuningdek, yorliqlarni almashtirish slayderi orqali tashkil etiladi. Shablon ochilish sahifasi tarkibini aylantirishda paydo bo'ladigan bo'limlarning tarkibiy qismlarini yuklash uchun 6 ta animatsiya variantini taqdim etadi. Kontent bloklarining foni vimeo va youtube-dan olingan yoki undan olingan videolar bo'lishi mumkin fayl tizimi html5 dan foydalanadigan sayt.
Marketing Pro - bu konversiya, marketing va SEOni hisobga olgan holda ishlab chiqilgan shablon. Undagi 9 ta demo-saytlarning har biri ma'lum bir marketing joyining xususiyatlarini hisobga olgan holda yaratilgan. Ochilish sahifasining moslashuvchan dizayni uchun bonus sifatida voqealarni boshqarish bloklari uchun stilize qilingan andozalar mavjud.
Oshine eng ko'p sotiladigan ijodiy mavzular orasida birinchi o'rinda turadi. Chiroyli dizayni va kuchli funksionalligi bilan ushbu shablondan ijodiy loyihalar va bizneslar uchun ochilish sahifalarini yaratishda foydalanish mumkin. Sayt ko'rinishini moslashtirish uchun har biri puxta ishlab chiqilgan ellikta modul mukammal natijalarga erishishga yordam beradi. "Bekor qilish/qayta tiklash" opsiyasi va ba'zi harakatlar uchun tezkor tugmalarni belgilash qobiliyati sozlash jarayonini soddalashtiradi.
Jevelin - bu WordPress-da ochilish sahifalari va bir sahifali saytlarni yaratishni osonlashtiradigan yuqori darajadagi sezgir dizayn shablonidir. Mavzu loyihani qisqa vaqt ichida ishga tushirishga yordam beradi. Moslashtirish vositalarining xilma-xilligi tufayli - har xil tartibdagi 9 ta sarlavha variantlari, 40 ta noyob element, ularning har birida alohida uslublar qo'llanilishi mumkin, ijtimoiy tarmoqdagi aktsiyalarni tashkil qilish uchun o'rnatilgan funksionallik, portfel bo'limi dizayni uchun 6 ta uslub echimlari. - terilarni sozlash har qachongidan ham tezroq.
Kalium - bu turli professional soha vakillari o'z xizmatlarini targ'ib qilish uchun veb-sayt olish uchun murojaat qiladigan mavzu. Kalium-da saytlarni loyihalashda tipografiyaga alohida e'tibor beriladi - buning uchun shriftlarni boshqarish uchun ixtisoslashtirilgan kutubxona javobgardir. Shablon 4000 shriftdan foydalanishi mumkin - Google, Typekit, Font Squirrel, premium va maxsus (foydalanuvchi tomonidan yuklangan).
Inbound - bu ilovalar, elektron kitoblar, video kurslar va shunga o'xshash mahsulotlar uchun bir sahifali saytlarni yaratishga yordam beradigan shablon. Dizaynni sozlash vizual ochilish sahifasi generatori yordamida amalga oshiriladi Ochilish sahifasi quruvchi. Shablon, shuningdek, bitta saytdagi har bir reklama qilingan mahsulot uchun ochilish sahifasi formatida mini-bo'lim ajratishga imkon beradi va WooCommerce-da mahsulot toifalari bo'limlari uchun ishlatilishi mumkin.
Intact - bu sizning onlayn biznes ehtiyojlaringizni hal qilishda yordam berish uchun mo'ljallangan ko'p variantli mavzu. U zamonaviy ochilish sahifasining muhim tarkibiy qismlarini o'z ichiga oladi: bloklar " Tarif rejalari” va “Kompaniya xodimlari”, sharhlar, tematik belgilar to'plami, obuna shakllari, onlayn maslahatchi bilan slayder.
Comet - bu Visual Composer va ga asoslangan to'liq javob beruvchi pikselli mukammal shablon. Foydalanuvchilarga qo'nish uchun 5 ta teri taklif etiladi, ular quyidagi effektlarni amalga oshiradi: matn uchun slayder, parallaks, fon videosi - youtube'dan import qilingan yoki html5-ga o'rnatilgan, animatsion masshtabli slayder. Yangi foydalanuvchilar WordPress ochilish sahifalarini yaratishda mavzu sozlamalarini osongina aniqlashlari mumkin - ko'rsatmalar va video darsliklar Internetda mavjud.
Ko'p qirrali WordPress mavzusi, unda ochilish sahifasini yaratish uchun kerak bo'lgan hamma narsa mavjud:
Dizayn ishlanmalari sotib olishdan oldin baholanishi mumkin. Rang sxemalari va sozlamalari vizual muharrirda o'zgartiriladi. Mualliflar istalgan vaqtda qo'llab-quvvatlashga va'da berishadi.
Ishlab chiquvchi turli mavzularda veb-sayt shablonini taklif qiladi - qurilishdan tortib veterinariya xizmatlarigacha. Oddiy va samarali ochilish sahifalari sizning imtiyozlaringiz, ish sharoitlaringiz va boshqa kerakli ma'lumotlarni potentsial mijozlarga etkazishga yordam beradi. Dizayn sezgir, Retina monitorlaridan tortib mobil gadjetlargacha bo‘lgan barcha qurilmalarda yaxshi ko‘rinadi. Portfel uchun plaginlar, ish soatlari, kalendar, shuningdek, maxsus piktogrammalar mavjud.
"Startap uchun ideal mavzu", deydi mualliflar ularning rivojlanishi haqida. 2019 yilgi engil minimalist dizayni onlayn-do'konlar, tadbir agentliklari va biznesning boshqa ko'plab turlari uchun tashrif qog'ozi yoki yanada yirikroq loyihani rivojlantirish uchun javob beradi. Shu jumladan:
O'ttiz demoga ega ko'p shablonli blank, unda siz faqat kerakli matnni almashtirishingiz mumkin. Shuningdek, ular slayderlar va effektlar uchun 90 dan ortiq shablonlarni, alohida sahifalar uchun 130 dan ortiq variantlarni taklif qilishadi. Vizitka saytini yoki kattaroq manbani targ'ib qilish uchun foydali bo'lgan 9 ta asosiy plaginlar kiritilgan. Bularning barchasi chegirmali, endi 30 dollarga sotiladi. Eng mashhur ochilish sahifasi shablonlaridan biri.
Landing va tashrif qog'ozlari uchun yana bir ko'p shablonli konstruktor. Kodlashni o'rganmasdan turib, cheksiz sarlavha va altbilgi imkoniyatlari bilan tozalang. Ko'plab dizaynlar, ularning elementlari "panjara" plagini tufayli osongina almashtirilishi mumkin. Kengaytirilgan qidiruv orqali bitta peyjerdan to'liq huquqli do'konga aylanish oson. Qo'llab-quvvatlash har doim savollarga javob berishga tayyor.
Har xil bo'lgan qo'nish uchun arzon va mashhur ko'p shablon:
Bir marta bosish va foydalanishingiz mumkin bo'lgan har qanday mavzudagi professional saytlar. Zerikarli bo'lmagan, yangi va chiroyli ko'rinishga ega zamonaviy dizaynlar.
"Keyingi avlod ko'p naqshli" - bu jasur bayonot, ammo mualliflar o'z mahsuloti haqida shunday deyishadi. Siz atigi 35 dollarga olishingiz mumkin:
Elementor vizual muharriri plagini haqiqatan ham yangilangan oxirgi versiya va foydalanish juda oson.
"9500 orasida eng yaxshisi", - deb ta'kidlaydi ishlab chiquvchilar. Shablon hech qachon kodlashni qilmagan odamlarga qaratilgan. Dizaynni sozlash Elementor vizual dizayner plaginidan foydalangan holda amalga oshiriladi, bu sizga birma-bir rejimda ishlashga, uchinchi tomon sozlamalaridan foydalanmaslikka va 300 ta shablondan birining to'liq funktsional imkoniyatlaridan darhol foydalanishga imkon beradi. O'rnatish uchun qulay va tez.
G'ayrioddiy ranglardagi chiroyli dizayn. Asosiy e'tibor nafaqat oqlangan dizaynga, chunki uni to'plamda sotib olish taklif etiladi:
Vizitkalar va onlayn xaridlar uchun toza va aniq WordPress shabloni. Do'kon rejimida tovarlarning xarakteristikalari uchun sozlamalar mavjud, ularni qidiring.
Zamonaviy oqlangan tekis uslubdagi yoqimli ochilish sahifalari tanlovi. Elementlarni qo'lda ko'rsatish potentsial mijozlarga ajralib turish va esda qolish imkonini beradi. Asosiy plaginlar va vidjetlar narxga kiritilgan - vizual muharrirdan fon yoki portfelni joylashtirish uchun parallaks effektigacha. Ish stolida boshqa ko'rinishni sozlashingiz mumkin va mobil versiyasi, moslashuv sukut bo'yicha berilgan.
Dizaynerlar, fotosuratchilar, rassomlar uchun bir nechta echimlar. Portfelni joylashtirish uchun foydali sozlamalar sizni nusxalashdan himoya qilish, foydalanuvchi ko'rib chiqayotganda yuklash imkonini beradi, bu esa yuklab olish vaqtini tejaydi. Oson video yuklab olish. Blog yuritish imkoniyati mavjud. Infografikani joylashtirish uchun tayyorlangan elementlar. Vizual dizayner barcha tafsilotlarni osongina o'rnatishga yordam beradi.
Ishlab chiquvchilar obodonlashtirish xizmatlari, bog'dorchilikka yordam va eko-mavzular uchun qiziqarli "yashil" dizaynni yaratdilar. Biroq, blank boshqa maqsadlarda ishlatilishi mumkin. Chiroyli piktogrammalar, toza Google shriftlari, mukammal sezgirlik va tashqi ko'rinish, shu jumladan Retina qurilmalarida, WordPress mavzusidan keng foydalanishni nazarda tutadi.
Tomonidan tayyorlangan oxirgi versiya WordPress. Shakl doimiy ravishda yangilanadi. Onlayn do'kon uchun funksionallik qulay kengaytirilgan qidiruv va buyurtma plagini tufayli taqdim etiladi. Shuningdek, tadbirlar, kalendar sanalari va yozib olish uchun oldindan o'rnatilgan sozlamalar mavjud. Elementor tomonidan yangi sahifalar yaratish uchun foydalaniladi. Har qanday qo'shimcha plaginlarni qo'llab-quvvatlaydi.
Ijodiy "musiqiy" mavzu tashrif buyuruvchilar tomonidan yorqin dizayni bilan eslab qoladi va sayt egasi quyidagilarga qiziqadi:
Taʼlim eski eLearning mavzusining yanada rivojlangan UX bilan takomillashtirilgan versiyasi boʻlib, onlayn taʼlim resurslari: onlayn kurslar va taʼlim saytlari uchun moʻljallangan. Shablon jozibali dizaynga ega va o'quv jarayoni uchun zarur bo'lgan keng qamrovli funksionallikni ta'minlaydi.
Ulardan biri mahsulotni reklama qilishga qaratilgan ochilish sahifalarini yaratish uchun ijodiy mavzu. Shablonning old qismi html5 va bootstrap 3 da yaratilgan, MailChimp va Contact Form 7 u bilan birlashtirilishi mumkin.UX mavzusini ishlab chiquvchilar ko'plab shunga o'xshash loyihalarni o'rganishdi, natijada foydalanuvchilar barcha vositalarga ega bo'lgan tayyor WordPress qo'nish shablonlarini olishdi. biznes loyihalari uchun muhim ahamiyatga ega.
Total - ko'plab loyihalar uchun mos shablon. Sahifalar yaratishda u quyidagilardan foydalanadi: sudrab olib tashlash usuli, cheksiz rang sxemalari, real vaqtda sozlash, ishlatish uchun qulay premium slayderlar. Mavzuning demo saytlari orasida 11 xil loyihalar uchun ochilish sahifasi shablonlari mavjud.
Stokgolm eng ko'p sotiladigan WordPress mavzularining 30 tasidan biridir. Mavzu bilan ishlashda siz butun sayt yoki uning alohida elementlari uchun rang sxemasini o'rnatishingiz, 600 ta Google shriftlaridan birini qo'llashingiz, turli demo saytlardagi variantlar va bloklarni birlashtirishingiz mumkin. Biznes-loyiha uchun tayyor yechimga muhtoj bo'lgan foydalanuvchilar ochilish sahifasi shablonlarini veb-sayt quruvchi bo'limidan darhol o'rnatish orqali yuklab olishlari mumkin.
Demoning boshqa versiyasi:
70 dan ortiq vidjetlar, ular yordamida sizning qo'nishlaringiz noyob va zamonaviy bo'ladi. Google shriftlari, infografika, SEO moslashuvi, toza kod, qulay portfellar yaratish - bu shablonning ba'zi afzalliklari. To'g'ridan-to'g'ri ma'noda, to'g'ridan-to'g'ri mozaikaga o'xshab, shunchaki sudrab olib tashlash orqali yig'ilishi mumkin. Ta'rif sahifasida tasviriy misollarni ko'rishingiz mumkin.
Namoyish saytlarini ko'rayotganda men ularning barchasidan foydalanmoqchiman.
» Bepul ochilish sahifasi WordPress shablonlari - TOP 30
Xususan, ushbu maqola sizga mos kelishi mumkin bo'lgan eng yaxshi qo'nish WordPress shablonlarini ko'rib chiqadi. Ularning barchasi dizaynning skrinshoti va demosini o'z ichiga oladi, shuning uchun siz mavzuni baholashingiz va agar sizga yoqsa, uni darhol yuklab olishingiz mumkin.
Ko'pincha WordPress uchun qo'nish shablonlari haq evaziga tarqatiladi, lekin men siz uchun to'pladim eng yaxshi va bepul qidiruvingizni osonlashtirish uchun ushbu maqolada.
veb-saytni osongina yaratishga yordam beradigan bir sahifali mavzu. Boshqa tomondan, u ushbu mavzuni "chiroyli" deb atash imkonini beruvchi professional tarzda chizilgan dizaynga ega, parallaks aylantirish. Ushbu shablon startaplar va kichik biznes uchun javob beradi.
ko'p funktsiyali WordPress mavzusi. U rang-barang interfeys, klassik parallaks effekti va mavzuni ko'rib chiqishni yanada yoqimli qiladigan boshqa animatsiyalarni o'z ichiga oladi. Zerif Lite - bu o'zaro brauzer mavzusi bo'lib, u kod jihatidan juda yaxshi yozilgan.
Alhena Lite - bu WooCommerce plagini bilan to'liq integratsiyalangan bepul WordPress mavzusi bo'lib, siz onlayn-do'koningizni osongina sozlashingiz mumkin.
toza, sodda biznes mavzusi boʻlib, u toʻliq javob beradi va veb-saytni osongina yaratish uchun koʻplab mashhur xususiyatlarni oʻz ichiga oladi.
Palmas - bu shaxsiy yoki moda bloglari uchun mos keladigan ochiq ranglardagi zamonaviy mavzu. Ushbu shablon shuningdek Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache va boshqa ko'plab plaginlarni qo'llab-quvvatlaydi.
Brasserie oddiy WordPress mavzusi bo'lib, u restoran, kafe yoki oziq-ovqat sayti uchun juda yaxshi. Animatsiya effektlarini, shuningdek, ko'p sonli funksionallikni o'z ichiga oladi.
XT Corporate lite - bu kichik mahsulot yoki xizmat uchun mos keladigan oddiy va minimalistik mavzu.
- Bu ochiq ranglarda yaratilgan yoqimli mavzu. Turli animatsiyalar va vizual ajoyib o'tishlar va parallaks effektini o'z ichiga oladi. Bundan tashqari, Freesia Empire Breadcrumb NavXT, WP-PageNavi, Contact Form 7, WordPress.com tomonidan Jetpack, Polylang, Newsletter, bbPress va WooCommerce kabi plaginlarni qo'llab-quvvatlaydi.
- Bu kichik yoki o'rta biznes taqdimoti uchun mos bo'lgan mavzu. U qo'nish tuzilishini to'liq boshqarish uchun juda ko'p funktsiyalar va qo'shimchalarni o'z ichiga oladi.
- Bu juda ko'p funksiyalarga ega ko'p qirrali mavzu. U sezgir, barcha elementlar parallaks effekti bilan jonlantirilgan. Bitta sahifa osongina sozlanishi va o'zgarishlarni real vaqtda ko'rish imkonini beradi. Joriy ochilish mavzusi ham ko'p sonli asosiy WordPress plaginlarini qo'llab-quvvatlaydi.
FotoGraphy - bu fotosuratchilar yoki dizaynerlar uchun mos keladigan ochilish sahifasi. Oddiylik va ko'p sonli funktsiyalar mavjudligi uni yanada kengaytiriladigan va moslashtiradigan qiladi.
Integral Theme - bu ijodkorlar, biznes egalari yoki agentlar uchun mos keladigan bir sahifali parallaks mavzusi. Uni sozlash uchun bir necha daqiqa vaqt ketadi.
Kvadrat - bu har qanday veb-sayt uchun ishlatilishi mumkin bo'lgan minimalist mavzu. Bu kichik va o'rta biznes uchun eng mos keladi. Kvadrat ko'plab mashhur WordPress plaginlari uchun tuzilgan va SEO optimallashtirilgan.
Enliven - bu sifatli ijro mavzusi. Men buni premium deb atagan bo'lardim, chunki u sifat va go'zallikni bir shishada birlashtiradi. Shuningdek, u ko'plab mashhur plaginlarni qo'llab-quvvatlaydi va juda moslashtiriladi.
Latte - bu fotograflar uchun shablon. Unda siz o'z portfelingizni munosib ko'rsatishingiz, shuningdek, o'zingiz haqingizda gapirib berishingiz uchun hamma narsa mavjud. O'rnatish bir necha marta bosishni oladi.
Dushanba - biznes yoki frilanser uchun mos keladigan oqlangan mavzu. U ko'p sonli xususiyatlar va qo'shimchalar va qo'shimchalar bilan birga keladi.
Biznes dunyosi biznes mavzulari bilan bog'liq shablondir. U uslub va sifatni birlashtiradi. Biznes olami shaxsiy, korporativ yoki fotograf veb-sayti uchun ham moslashtirilishi mumkin. Uning imkoniyatlari undan deyarli xohlagan narsani qilish imkonini beradi.
- Bu yorqin ranglarda yaratilgan yoqimli mavzu. Bu kichik va o'rta biznes uchun, shuningdek, shaxsiy veb-sayt uchun juda mos keladi. U siz xohlagan narsaga moslashtirilishi mumkin. Ushbu shablonni yanada yaxshi va jozibali qiladigan ko'plab xususiyatlar va qo'shimchalar.
Onetone - bu WordPress uchun bir sahifali shablon bo'lib, u Internetda "men" ni taqdim etish uchun mos keladi (portfelingizni ko'rsating va / yoki o'zingiz haqingizda aytib bering).
Arise - bu kichik mahsulot yoki kichik biznes uchun mos bo'lgan minimalist bir sahifali WordPress mavzusi. Unda ortiqcha narsa yo'q, faqat eng muhimi.
Woot - onlayn-do'konda ishlaydigan quyuq ranglarda yaratilgan minimalist mavzu. U WooCommerce va boshqa ko'plab mashhur plaginlar bilan ishlaydi.
West - agentlik, kichik biznes yoki portfel veb-sayti uchun mos keladigan oddiy mavzu. U elementlarning ko'p sonli funktsiyalari, sozlamalari va tartiblarini o'z ichiga oladi.
Anaglyph Lite oddiy va oqlangan shablon bo'lib, blog yuritish va onlayn-do'kon uchun mos keladi. U allaqachon WooCommerce va boshqa mashhur plaginlarni o'rnatgan.
Korxonalar uchun ochilish sahifalaridan foydalanish eng oddiy va eng foydali echimlardan biriga aylandi. WordPress ochilish sahifasi shablonlari bunday saytlarni yaratish uchun mashhur vositaga aylandi. Ular trafikni daromadga aylantirish uchun puxta o'ylangan va kuchli "bog'lanish tizimi"ga asoslangan.
Ular taklif qiladilar:
Yuqori darajadagi tipografiyaga ega shablon, eng yaxshi ijodiy mavzulardan biri. Mavzuga kiritilgan bepul plaginlar: Visual Composer, Layer Slider, Timetable, Visual Composer. Bridge asosiy qurilish bloklaridan tortib interaktiv infografika va vertikal progress barlari kabi ilg'or demo elementlargacha bo'lgan keng ko'lamli qisqa kodlar to'plamini o'z ichiga oladi.
Saytda foydali takliflar, avtomobil modellari, texnik xizmat ko'rsatish uchun tarif rejalari mavjud. Parallaks slayderiga va vertikal slayderga alohida e'tibor qaratiladi.
Mualliflik huquqi bilan himoyalangan kitoblarni sotishingiz mumkin bo'lgan xususiy psixologning ochilish sahifasi. Zamonaviy obuna shakli mijozlar bazasini to'ldirishga yordam beradi.
Yorqin oq va ko'k ranglardagi ochilish sahifasi xizmatlar haqida ma'lumot va o'rnatilgan bron qilish tizimi.
Palatalar katalogi va xayr-ehsonlarni yig'ish funksiyasiga ega hayvonlar boshpanasi uchun demo sayti.
Shablon sahifalarida siz cherkov tadbirlari jadvali va parishionerlarning hikoyalari bilan bloklarni ko'rishingiz mumkin. Sayt onlayn hissalarni qabul qiladi.
Ochiq ranglardagi ochilish sahifasi. Ko'rib chiqish slayderidan, animatsiya bilan hisoblagichlardan foydalanadi.
Qora va oq portfel sayti. Asosiy tarkib bosh sahifa— toʻliq ekran va navigatsiya menyusidagi gorizontal slayder.
Biznes-loyiha uchun demo-sayt zamonaviy ochilish sahifasi shablonlari juda yaxshi ko'radigan aylantirish effektlaridan va wordpress-ga tanish bo'lgan slayderlar va grafiklardan foydalanadi.
Oddiy bir sahifali yoga studiyasi. Uning tarkibiy qismlari orasida muvaffaqiyat ko'rsatkichlari bo'lgan blok va sarlavhadagi katta slayder mavjud.
Oq-qora ochilish sahifasi "Mashg'ulot zonalari", "Dars jadvali", "Murabbiylar shtabi" tematik bloklari.
Sayohat portali uchun demo. Uning yuqori qismida qalqib chiquvchi matnli keng banner mavjud, menyu aylanayotganda rangini o'zgartiradi.
Hashamatli soatlarni namoyish qilish uchun ochilish sahifasida ko'plab fotosuratlar va paralaks fon ishlatiladi. Sahifalar rang sxemasi to'q kulrang aksanlar bilan oq rangda.
Saytning oddiy dizayni minimal animatsiyani o'z ichiga oladi - rangni o'zgartiruvchi yuqori menyu to'liq ekranga kengaytiriladi, paralaks fon bilan bloklanadi.
Sarlavhada katta slayder joylashgan kichik korporativ sayt. WordPress-da yaratilgan shunga o'xshash ochilish sahifasi shablonlari kabi, bu ochilish sahifasi"to'liq kenglikdagi" tartibdan foydalanadi.
Gastrol safariga e'tibor qaratadigan rok musiqachisi uchun sayt: katta bloklar fon sifatida kontsert fotosuratlaridan foydalanadi, eng so'nggi blog yozuvlari asosiy sahifada ko'rsatiladi.
Asosiy xususiyatlari dizaynning "javobgarligi", Retina mosligi va ko'p qirraliligi bo'lgan mashhur shablon. Foydalanuvchiga tanlash uchun ikkita vizual konstruktor taqdim etiladi - MuffinBuilder va Visual Composer, shuningdek Slider Revolution, Layer Slider slayderlari uchun plaginlar.
BeTheme-da quyidagi tayyor ochilish sahifasi shablonlari yaratilgan:
Sushi bar uchun demo. Saytning asosiy mazmuni quyuq kulrang menyular va altbilgilar bilan hoshiyalangan ochiq fonda joylashgan. Menyu taomlarining yuqori banneri va slayderi yangi assortimentni namoyish qilish imkonini beradi.
Kontrastli asosiy blok matni bilan oq fon yaxshi o'qilishini ta'minlaydi. Yordamchi elementlar - sarlavha, chap yon panel, pastki qism yumshoq to'q ko'k tonlarda qilingan. Sahifani aylantirish paralaks fon ofset bilan birga keladi.
Mahalliy pivo zavodi uchun WordPress ochilish sahifasi. Sahifa yashil rang chayqalishi bilan jigarrang tonlarda yaratilgan. O'tkazishda siz ta'sirchan parallaks effektini ko'rishingiz mumkin.
Rangli dizayni kulrang soyalarda qurilgan zamonaviy shablon. Sahifaning yuqori qismi yoqib qo'yiladigan yorug'lik va kompyuter bilan ish joyi sifatida stilize qilingan.
Oq va jigarrang ranglardagi professional sartaroshxona sayti. Dizaynida shuni ta'kidlash kerakki: qalqib chiquvchi matnli katta slayder, almashtiriladigan yorliqlari bo'lgan narxlar ro'yxati, xodimlarning rezyumelari, onlayn ro'yxatdan o'tish shakli.
Akvapark sayti, pullik plyaj, basseyn uchun sariq, oq va ko'k yorqin ranglardagi shablon. Uning sahifalarida ochiladigan tez-tez so'raladigan savollar, Masonry uslubidagi galereya, interaktiv xarita va sotib olishga qo'ng'iroq qilish panellari mavjud.
Ishga qabul qilish agentligining veb-sayti biznes uslubida yaratilgan. Sahifalarning asosiy rangi, yashil, kulrang va oq soyalar bloklari bilan to'ldiriladi. Namoyishda batafsil ma'lumotga ega sahifalarga o'tish tugmalari, video bilan xizmatlarni taqdim etish bo'limi mavjud.
Pushti-lilak tonlarda "havodor" dizayndagi shablon. MLM kompaniyasi veb-sayti yoki Faberlic, Avon va shunga o'xshash brendlarni tarmoq kosmetikasini targ'ib qiluvchi agentning shaxsiy sahifasi uchun javob beradi.
Universal adaptiv WordPress mavzusi, Visual Composer sahifa yaratuvchisi va Ultimate Addons plagini bilan birlashtirilgan. Uning demo saytlari orasida siz ochilish sahifasi shablonini topishingiz va yuklab olishingiz mumkin, uning vazifasi mijozlarni jalb qilish va veb-resursning konversiyasini oshirishdir. Shablonga Go Pricing Tables, Slider Revolution, ConvertPlug, Layer Slider premium plaginlari kiradi.
Organik gazaklar onlayn do'koni. Ochilish sahifasida mahsulot slayderi, uning afzalliklarini tavsiflovchi blok, ingredientlar kartalari va mijozlar sharhlari mavjud.
Ushbu "Ta'mirlash va qurilish" ochilish sahifasi shabloni kompaniyaning xizmatlari, hamkorlari va xodimlarini tanishtiradi, slayderlar va kartalar bilan bo'limlar orqali ma'lumotlarni taqdim etadi.
Psixologik maslahat klinikasi uchun demo. Saytning sokin dizayni mijozga ega va maslahat mutaxassislariga ishonchni uyg'otadi.
Yengil mavzu va to'q ko'k dekorativ elementlardan (menyular, tugmalar, altbilgi) foydalanadigan kiyim sayti. Sahifaning asosiy komponentlari animatsion bannerlar va mahsulot kartalari bo'lgan slayderdir.
Cheksiz imkoniyatlar paneli bilan jihozlangan plaginlar va modullar to'plamiga qo'shimcha ravishda kengaytirilgan ishlash shablonidir. U Revolution Slider, Visual Composer premium plaginlaridan foydalanadi. Mavzuni faol qo'llab-quvvatlash, video va matnli qo'llanmalarning mavjudligi buni amalga oshiradi yaxshi variant birinchi marta ochilish sahifasi shablonini sotib olmoqchi bo'lganlar uchun.
Dizayn oq, kulrang va jigarrang. Esda qolarli element - bu bir nechta yorliqli portfel namunalarining slayderidir.
Namoyishning eng ajoyib komponentlari - bu narxlari bilan restoran menyusi bloki va video bo'limi bo'lib, uning ekraniga aylantirish paytida parallaks ofset qo'llaniladi.
Sayt deyarli butunlay fotosuratlardan iborat bo'lib, kursorni ularning ustiga olib borganingizda loyiha nomi bilan havola paydo bo'ladi. Gamburger belgisi to'liq ekran menyusini kengaytiradi.
Ochilish sahifasi o'z jamoasini potentsial mijozlarga tanishtirish va o'quv dasturlarini ta'kidlash orqali fitness klubi xizmatlarini targ'ib qiladi. Muvaffaqiyat ko'rsatkichlarining animatsion hisoblagichi kompaniyaning ishonchliligini oshirishga yordam beradi.
Sahifani sichqoncha bilan aylantirganda, bo'limlar bir-birini almashtirib, ekranni to'liq egallaydi. Oxirgi "varaq" kontakt shaklini ko'rsatadi.
To'q kulrang va och kulrang soyalarning grafik bloklari reklama qilingan dasturiy ta'minotning afzalliklarini tavsiflaydi. Slayder virtual telefon ekranida skrinshotlarni ko'rsatadi.
Sahifa 2 qismga bo'lingan - matn va fotosurat. Oʻtkazish vaqtida tarkib oʻzgaradi: chap qismi yuqoriga koʻtariladi, oʻng qismi pastga tushadi, matn va fotosuratlar oʻzgarib turadi.
Yuqori ishlash uchun mo'ljallangan loyihalar uchun universal shablon. Mavzu ko'p tilli va RTL rejimini qo'llab-quvvatlaydi. TheGem-dagi demo-saytlar javob beruvchi ochilish sahifasi shablonlarini o'z ichiga oladi. Shablon sovg'a sifatida keladi: Visual Composer konstruktori va moslashuvchan slayderlar uchun mas'ul plaginlar - LayerSlider, NivoSlider, Revolution Slider.
Creative Studio veb-sayti. Sahifalarning quyuq kulrang rang sxemasi ochiq ranglar bloklari bilan suyultiriladi. Ko'p darajali menyu navigatsiyani osonlashtiradi, kengaytirilgan altbilgida fikr-mulohazalar va obuna shakllari mavjud.
Bitta mahsulot yoki mahsulotlar seriyasining taqdimotiga bag'ishlangan veb-resurs yaratish uchun mo'ljallangan. Menyu aylanayotganda rangni o'zgartiradi, sahifada video fonga ega elementlar va bo'limlarning animatsion displeyi mavjud.
Bir sahifali dasturiy ta'minotni targ'ib qilish. Yuqori menyu elementlari tashrif buyuruvchini sahifaning bo'limlari bo'ylab harakatlantiradi. Saytning qiziqarli elementi - bu mobil telefon ekraniga birma-bir moslashtirilgan skrinshotlar slayderi.
Assalomu alaykum, aziz o'quvchilarim. Bugun biz ko'paytirishimiz mumkin bo'lgan texnik jihatlar haqida gaplashamiz sotish konvertatsiyasi ularning tovarlari yoki xizmatlari. Muhim nuqtalardan biri - mahsulotlar bilan yaxshi mo'ljallangan ochilish sahifasi. Ochilish sahifasi deb ataladi, uning yaratilishi haqida biz batafsilroq gaplashamiz va tayyor sahifa kodlarini olamiz.
Uchish sahifasi nima? Bu odamlar odatda reklamani bosgandan so'ng tushadigan sahifadir. U bitta taklif uchun yaratilgan: mahsulot, xizmat yoki obuna. Samarali ochilish sahifasi muvaffaqiyatli onlayn marketingning asosidir. Mahsulot bozorda eng yaxshisi bo'lishi mumkin, reklamalar mukammallikka erishiladi, ammo yaxshi ochilish sahifasi bo'lmasa, urinishlar 100% natija bermaydi. Bu tashrif buyuruvchilarga nima taklif qilinayotgani va nima uchun ular buni xohlashlari kerakligini aytadi. Shoshilinchlik hissi tez qaror qabul qilishga va foydalanuvchining mijoz toifasiga o'tishiga yordam beradi.
Landingni qanday yaratish kerak? Javob matn terish qobiliyatida ekanligiga ishonish noto'g'ri. Yaxshi ochilish sahifasi - bu maqsadlar, matn, dizayn va kod bo'yicha yaxshi muvofiqlashtirilgan ish natijasidir. Misollari quyida keltirilgan ochilish sahifasi yangi boshlanuvchilarga tartib bilan ishlash asoslarini o'rganishga yordam beradi, ammo konvertatsiya matnlari va maqsadli auditoriya tushunchasini almashtirmaydi. Bundan tashqari, ularni turli xil narsalar bilan yaratishingiz mumkin ochilish sahifasi dizaynerlari.
Shunday qilib, ochilish sahifasini yaratishdan oldin o'zingizdan so'rang:
Siz barcha kerakli ma'lumotlarni taqdim etishingiz kerak, lekin potentsial mijozni haydab chiqarish va haydash uchun emas.
Ishga kirishishdan oldin HTML va CSS-ni qisqacha ko'rib chiqamiz. Ularning qanday ishlashini tushunish qo'nish yaratishga yordam beradi.
HTML- saytlarni vizuallashtirish uchun brauzerni belgilash tili. U tarkibni belgilaydigan burchakli qavslar ichiga olingan teglar yordamida yoziladi.
Teg ochiladi (<>) va tiqma atrofida () yopadi:
<тег>mazmuniтег>
Nuqtalarni moslashtirish uchun atributlar nomdan keyin qo'shiladi:
<тег атрибут="значение">mazmuniтег>
CSS - HTML elementlarini qanday joylashtirishni belgilaydi. Selektorlar, xususiyatlar va qiymatlardan iborat:
#selektor (xususiyat: qiymat;)
Selektor html-dagi ma'lum bir teg nomiga mos keladi. Qiymatlarni o'zgartirish va xususiyatlarni qo'shish uning ko'rinishini moslashtiradi. Bir xil HTML-ga turli xil CSS uslublarini qo'llash orqali turli sahifalar yaratishingiz mumkin.
Tezkor tartibga solish uchun biz bootstrapga asoslangan minimal dizayndagi shablondan foydalanamiz. Bu butun dunyoda tartibni tezlashtirish uchun qo'llaniladigan o'z selektorlariga ega tizim.
Kamtar ko'rinadi.
Ushbu baliqdan bir necha bosqichda har qanday lazzat uchun sayt yaratiladi.
Jilddagi katalog tuzilishi:
1-qadam: Sarlavhadan foydalanish
Sarlavha va sarlavhalar taklifning qiymatini aniq ko'rsatishga yordam beradigan asosiy joylardir.
Saytning nomi va nomini o'zgartiring. Bu erda matn terish qobiliyati talab qilinmaydi - sizning matningiz ekranda sariq rang bilan belgilangan joylarda yoziladi.
Qadam 2. Qisqartirish - konvertatsiyaning singlisi. Imtiyozlar va tariflarni qo'shish
Sizga 4 ta bo'lim kerak bo'ladi:
Keling, asosiy tarkibning "asosiy" qismini loyihalashtiramiz, unga kerakli bo'limlarni kiritamiz:
…..
…..
…..
…..
Nuqtalar o'rniga to'lg'azish bilan to'ldiring.
Imtiyozlar bo'limi ushbu kodni talab qiladi:
Afzalliklar
Sed diam nonummy
Elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Vizual tarkib:
Hozircha u bema'ni ko'rinadi, ammo vahima uchun hech qanday sabab yo'q, biz davom etamiz.
Narxlarni yozing. Tarkib birinchi bosqichga o'xshash o'zgaradi. "Tariflar" sinfi va uchta tarif bilan umumiy tavsif.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim weniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Tarif rejalari
oyiga / kishi boshiga
oyiga / kishi boshiga
oyiga / kishi boshiga
Shunga o'xshaydi.
Kelajakdagi ochilish sahifasining ko'rinishi bizni qiziqtirmasa ham - biz quyida uslublarni o'zgartirish misollarini ko'rib chiqamiz.
3-qadam: Signallarga ishoning va harakatga chaqiring
Maqsadli signallardan foydalanish tashrif buyuruvchilarga brendning ishonchli ekanligini ko'rsatadi. Signallar ko'p shakllarga ega bo'lishi mumkin, ammo klassiklar mijozlarning sharhlari.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua. Ut enim ad minimal veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo:
Mijozlarning sharhlari
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea ea commodo."
Harakatga chaqiruvni sozlang.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minimal vaniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo oqibati:
Bugun buyurtma berishda foyda oling
Sharhlar potentsial mijozlarga mahsulotni sotib olishga qaror qilishda yordam beradi. Aniqlik uchun bizga avatarlar kerak, shuning uchun biz ularni darhol joyiga yozamiz - har bir tirnoq ostida.
Mijoz nomi.
4-qadam: Tarmoq integratsiyasi va mobil qurilmalarga mos
Gridni amalga oshirish uchun bizga Bootstrap konteynerlari kerak. Ruxsat etilgan ustun segmentlarining umumiy soni 12 ta ekanligini yodda tutish kerak. Sinf kontentni ko'rsatish kengligini belgilaydi. Ushbu tayyor panjaraning afzalligi shundaki, konteynerlar moslashuvchanlikni hisobga olgan holda ishlab chiqilgan va darhol qo'llanilishi mumkin. mobil qurilmalar. Rasmiy veb-saytda batafsil tavsif. Tarmoq shunday ko'rinadi.
"Asosiy" ning tarkibi idishga o'raladi. Buning uchun uning yuqori qismida shunday yozilgan:
Agar siz blokni ekranning butun kengligiga sig'dirishni istasangiz, u holda konteyner ichiga joylashtiriladi. Bu erda jumbotron va harakatga chaqiruv bo'ladi.
Bir-birining ustiga qo'yilishi kerak bo'lgan barcha elementlar chiziq ajratgichlar bilan o'raladi.
Endi biz yuklash panjarasiga e'tibor qaratgan holda ustunlar kengligini sozlashimiz mumkin. O'rashdan so'ng, plomba ekranning chetlariga yopishishni to'xtatdi, toza chuqurliklar paydo bo'ldi.
col-lg-4 ustun sinfidan foydalanib, narxlarni ketma-ket o'rnating. Qatorlar ichida endi o'rash uchun alohida divlarni yozish shart emas, ularni bo'sh joy bilan ajratilgan mavjudlari bilan birlashtira olasiz.
Analogiya bo'yicha, biz sharhlar va imtiyozlar bo'limi uchun ustunlarni o'rnatamiz. Agar siz elementni yon tomonga siljitmoqchi bo'lsangiz, col-lg-offset-2 ofset ustun sinfidan foydalaning. Oxiridagi raqam qancha asosiy ustunlar siljishini aniqlaydi.
5-qadam. Shriftlar va piktogrammalar
Biz Google Shrift sarlavhalari uchun shriftlarni qo'llaymiz. Tanlanganda, import yorlig'ini oching va undan ma'lumotlarni main.css fayliga nusxalang. Shuningdek, biz yangi shrift qo'llaniladigan faylga sarlavha tanlash moslamalarini qo'shamiz.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* sarlavhalar uchun shrift importi */
.navbar-brend,
h1,
h2,
h3,
h4,
h5,
h6(
font-family: "Roboto Condensed", sans-serif; /* Google shrift chiqishi */
}
Aniqlik uchun, afzalliklarga matn markazi va bootstrap to'plamidagi FontAwesome piktogrammalariga ega bo'lgan sinf kiradi.
Bu tayyorgarlikni yakunlaydi.
Biz uchta eng mashhur turdan foydalanamiz: taklif bilan, ariza bilan va ortga hisoblash hisoblagichi bilan. Tartib tugallangandan so'ng, shablon effektlar bilan to'ldiriladi.
Birinchi ekran qoplanishi uchun asosiy korpus fonini va to'ldirishni o'rnating.
Jumbotron (
fon: #f5f5f5 url(../img/fon.jpg) yuqori markaz takrorlanmaydi;
maksimal kenglik: 100%
to'ldirish ustki qismi: 250px;
to'ldirish-pastki: 200px
matnni tekislash: markaz;
}
Jumbotron sarlavhasining o'lchamini h2 dan h1 ga o'zgartiring. Keyinchalik, biz o'zgartirilishi kerak bo'lgan elementlar uchun uslublarni belgilaymiz.
Keling, piktogrammalardan boshlaylik.
Foyda i(
rang: #cac4c4;
}
Funt belgisidan keyin rang belgilanadi. Html rang jadvallari yoki rasm muharriri yordamida o'zingizning variantingizni tanlashingiz mumkin.
Bo'lim sarlavhalari uchun chekinish
bo'lim h2 (
to'ldirish ustki qismi: 30px;
pastki chet: 25px;
}
Tariflarning ko'rinishini tartibga keltirdik. Qulaylik uchun biz nuqta bo'yicha tanlamoqchi bo'lgan elementlar uchun o'z sinflarimizni yaratamiz.
oyiga / kishi boshiga
Va juda ko'p CSS. Qaysi joylar uchun bo'limlar mas'ul, bu sharhlarda yoziladi - /* yulduzcha bilan qiyshiq chiziqlar orasida */
/* =========Tarif uslublari======== */
/* tarifning umumiy ko'rinishi */
.pricing_element(
fon: #f2f2f2;
pozitsiya: nisbiy;
displey: -webkit-flex;
displey: flex;
moslashuvchan yo'nalish: ustun;
align-elementlar: stretch;
matnni tekislash: markaz;
-webkit-flex: 0 1 330px;
moslashuvchan: 0 1 330px;
to'ldirish: 2em 3em;
chegara: 1em
rang: #262b38;
kursor: standart;
toshib ketish: yashirin;
}
/* bosish orqali fonni o'zgartirish */
.pricing_item: suring (
rang: #444;
fon: #daebef;
}
/* har bir tarifda individual narx belgisi */
.pricing_element:birinchi farzand .narxi (
fon: #9ba9b5;
}
.pricing_element:nth-child(2) .narx (
fon: #1f6098;
}
/* keng ekranlarda, toʻldirish va tarifning oʻrta ustunini ajratib koʻrsatish */
@media ekrani va (min-kengligi: 66,250em) (
.pricing_element(
chegara: 1,5em0;
}
.featured(
z-indeks: 10;
chegara: 0;
shrift hajmi: 1.15em
}
}
/* sarlavha */
.pricing_element h3(
shrift o'lchami: 2em
chegara: 0,5em 0 0;
rang: #1d211f;
}
/* narx yorlig'ini qo'llab-quvvatlash */
.narx(
shrift o'lchami: 2em
shrift vazni: qalin;
rang: #fff;
pozitsiya: nisbiy;
z-indeks: 100;
chiziq balandligi: 95px;
kengligi: 100px
balandligi: 100px;
chegara: 1.15em avtomatik 1em;
chegara radiusi: 50%
fon: #77a5cc;
-webkit-o'tish: rang 0,3s, fon 0,3s;
o'tish: rang 0,3s, fon 0,3s;
}
/* valyuta */
.valyuta(
shrift o'lchami: 0,5em
vertikal tekislash: super;
}
/* jumlaning aniqlanishi */
.jumla(
shrift vazni: qalin;
chegara: 0 0 1em 0;
to'ldirish: 0 0 0,5em;
rang: #2a6496;
}
/* ro'yxat */
.pricing_item ul (
shrift o'lchami: 0,95em
chegara: 0;
to'ldirish: 1,5em 0,5em 2,5em
matnni tekislash: chapga;
}
/* ro‘yxat elementlari */
.pricing_item li(
to'ldirish: 0,15em0;
}
/* tarif buyurtma tugmasi */
.pricing_item tugmasi(
shrift vazni: qalin;
yuqori chegara: avtomatik;
to'ldirish: 1em 2em;
rang: #fff;
chegara radiusi: 5px
fon: #428bca;
-webkit-o'tish: fon-rang 0,3s;
o'tish: fon rangi 0,3s;
}
/* tugmani bosish orqali rangni o'zgartirish */
.pricing_item tugmasi: kursorni suring,
.pricing_item tugmasi:fokus(
fon rangi: #285e8e;
}
/* tarif foni*/
.bg-2 (
fon: #dddddd;
}
Natija
Mijozlarning sharhlari. Keling, ularga chiroyli ko'rinish beraylik, joyni belgilaymiz.
/* =========Tasdiqlash uslublari======== */
guvohliklar (
to'ldirish: 4em0;
matnni tekislash: markaz;
}
.guvohlar .avatar img (
chegara radiusi: 50%
float: chap;
displey: inline;
o'ng chekka: 1em;
kengligi: 65px
balandligi: 65px;
pastki chet: 30px;
}
.guvohlar .avatar p(
matnni tekislash: chapga;
to'ldiruvchi ustki: 1em;
rang: #5d5d5d;
Shrift og'irligi: 900
}
Harakatga oxirgi qo'ng'iroq va altbilgini bezash uchun qoladi.
/* Harakat */
.action(
fon: #476177;
minimal balandlik: 180px;
kengligi: 100%
to'ldirish: 4em0;
matnni tekislash: markaz;
}
.action h2(
rang: #fff;
shrift og'irligi: 300
}
.actionp(
rang: #fff;
matn soyasi: 0 1px 2px rgba(0, 0, 0, .2);
shrift o'lchami: 1,2em
}
.action .konteyner(
yuqori chegara: 3em;
}
/* Altbilgi */
altbilgi(
fon: #333333;
to'ldirish: 1em0;
matnni tekislash: o'ngga;
}
altbilgi p(
rang: #fff;
chiziq balandligi: 1;
matnni o'zgartirish: katta harf;
shrift o'lchami: 0,7em
tepalik chegarasi: 0,5em;
}
Altbilgi tugmasi o'rnatilgan bootstrap sinfi btn-default bilan belgilanadi.
Biz shablonni jonlantiramiz. Biz bo'limlar uchun silliq aylantirish va tugmalarni, shuningdek, birinchi ekranda matn animatsiyasini amalga oshiramiz.
Ishga o'tish uchun biz bo'lim sinflarining bir qismini id bilan almashtiramiz - imtiyozlar va tariflar uchun. Va biz tugmalarga id ga havolalar yozamiz. Ekran - sariq marker bilan ta'kidlangan narsaga biriktirilgan narsa.
Tugmalar uchun chekinishlarni o'rnating - jbutton. Bosishni aylantirish ishlaydi, lekin juda keskin.
Silliq o'tishlar javascript yoki jQuery yordamida yaratiladi. Ikkinchisi sukut bo'yicha Bootstrap shablonlariga ulangan.
Aylantirish endi silliq.
Animate.css yordamida matnga animatsiya qo'shish ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Bu tayyor ochiq manba, uni har qanday saytda ishlatish mumkin. Biz github faylini css papkasiga joylashtiramiz va yo'lni yozamiz.
Bu yerda effektlarni tanlang: https://daneden.github.io/animate.css/. Biz fadeInDown ni tanladik. Kodda shunday yozilgan:
Endi sahifa yuklanganda yoki yangilanganda matn jonlantiriladi. Tayyor.
Tashrifchiga qancha ko'p shakl maydonlari taklif qilinsa, ularni to'ldirish ehtimoli shunchalik kam bo'ladi. Faqat minimal talab qilinadigan ma'lumotlarni so'rang.
analogiya bo'yicha yig'ilgan. Biz fon va ranglarni o'zgartiramiz. Va, albatta, biz shakl qo'shamiz.
dan boshlaylik parallaks .
Jumbotron fonini shaffofga o'zgartiring:
fon: shaffof;
Skriptni boshning ichiga kiriting:
Tanadagi birinchi qator parallaks konteyneridir:
Va CSS-da uning xatti-harakati:
bgparallax(
fon: url(/../img/fon.jpg) takrorlash;
pozitsiyasi: qattiq;
kengligi: 100%
balandligi: 300%;
yuqori: 0;
chap: 0;
z-indeks: -1;
}
Parallaks tayyor. Ammo kodga va yangi fonga o'zgartirishlar kiritish ranglar sxemasini qayta belgilashni talab qiladi.
Menyuni qorong'i qilish:
navbar-standart(
fon rangi: #333;
chegara rangi: #444;
rang: quyuq kulrang;
chegara radiusi: 0
}
Navbar-standart .navbar-nav > .active > a, .navbar-standart .navbar-nav > .active > a:hover, .navbar-standart .navbar-nav > .active > a:focus (
rang: quyuq kulrang;
fon rangi: rgba(0, 0, 0, 0,5);
}
Jumbotrondagi jumlani yangisiga - shakl kodi bilan almashtiramiz:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Va tashqi ko'rinishini belgilang
/* shakl */
.headform-list(
ro'yxat uslubi turi: yo'q;
chiziq balandligi: 26px;
Shrift og'irligi: 400
to'ldirish: 0px
pastki chet: 40px
}
.bosh shakli(
toshib ketish: yashirin;
pozitsiya: nisbiy;
fon rangi: rgba(0,0,0,4);
to'ldirish: 35px 40px;
chegara radiusi: 8px
}
kiritish, tugma, tanlash, matn maydoni (
kengligi: 100%
pastki chet: 10px;
}
.headform-list li .fa (
pozitsiyasi: mutlaq;
yuqori: 0px;
chap: 0px;
kengligi: 42px
shrift o'lchami: 24px;
matnni tekislash: markaz;
}
.headform-list li (
pozitsiya: nisbiy;
min-balandligi: 38px;
padding-chap: 62px;
pastki chet: 20px
}
.jumbotronp(
rang: #fff;
shrift o'lchami: 16px;
shrift uslubi: kursiv;
}
Jumbotron matni ham bu yerga keldi, chunki u o'zgartirishni talab qildi.
Biz tariflarni o'zgartiramiz.
/* tarifning umumiy ko'rinishi */
.pricing_element(
fon rangi: rgba(0,0,0,4); /* qator o'zgartirildi */
chegara radiusi: 4px /* qator o'zgartirildi */
pozitsiya: nisbiy;
displey: -webkit-flex;
displey: flex;
-webkit-flex-yo'nalishi: ustun;
moslashuvchan yo'nalish: ustun;
-webkit-align-elementlar: cho'zish;
align-elementlar: stretch;
matnni tekislash: markaz;
-webkit-flex: 0 1 330px;
moslashuvchan: 0 1 330px;
to'ldirish: 2em 3em;
chegara: 1em
rang: #f2f2f2; /* qator o'zgartirildi */
kursor: standart;
toshib ketish: yashirin;
quti soyasi: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* bosish orqali fonni o'zgartirish */
.pricing_item: suring (
rang: #444;
fon: #ddd; /* qator o'zgartirildi */
}
Endi ular shunday ko'rinadi - shaffof fon va yumaloq burchaklar.
Shablon tayyor.
Yana jumbotronni to'ldirishni o'zgartiramiz va oldingi shablonga o'xshab, yangi fon uchun shablonni qayta ranglaymiz. Hisoblagich skriptini ulaymiz:
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Uslublar faylida shaklning pastki radiusini olib tashlang, tugmani yodga keltiring.
Bundan tashqari, menyu yangi fonda o'zgartirildi va jumbotrondagi matnlar uslubi o'zgartirildi - oldingi misolga o'xshash. Natija.
Pastki qism
Bu Landing Page misollarini yakunlaydi, lekin kod ko'proq ishlashni talab qiladi.
Ochilish sahifasi Ferrari kabi tez va yaxshi bo'lishi kerak - sahifani yuklash vaqti chiqish tezligiga katta ta'sir qiladi. Tasvirlarni optimallashtirish, maksimal samaradorlik uchun tayyor skriptlar va uslublar hajmini minimallashtirish.
Darsda sizga haqiqiy mijozlarni jalb qilishga yordam beradigan yaxshi ochilish sahifalarini yaratish misollari keltirilgan va siz yangi narsalarni o'rganasiz. Like bosing va repost qiling. Ko'rishguncha.
Darsda taqdim etilgan barcha manbalarni tayyor sahifalar sifatida yuklab olish uchun tugmalardan birini bosing ijtimoiy qal'a uni ochish va havolani olish uchun.
Hurmat bilan, Galiulin Ruslan.
Yangi mahsulotni tezda ishga tushirish, uni LP sahifasi yoki mobil ilovasi yordamida targ'ib qilish yoki foydalanuvchilarni axborot byulleteniga ro'yxatdan o'tishga / obuna bo'lishga undash uchun tayyor ochilish sahifasi shablonlari kerak. "Ochilish sahifasi" uchun qulaylik va aqlli tartib bilan foydalanish qulayligi juda muhimdir. Zamonaviy sotiladigan ochilish sahifasi shablonlari yuqori konvertatsiyaga ega moslashuvchan veb-sayt yaratish imkoniyatini hisobga olgan holda ishlab chiqilgan.
Bootstrap 3.1.1 tomonidan quvvatlangan ultra zamonaviy HTML5 mavzusi. 4 ta tartib bilan birga keladi: bitta/koʻp peyjer, navigatsiya paneli imkoniyatlari. Engil parallaks aylantirish effekti mobil va organik SEO (SEO) ochilish sahifasi mavzusiga birlashtirilgan.
Veb va mobil ilovalar uchun Html ochilish sahifasi shablonini oson ishlab chiqarishga qaratilgan. U tez yuklanadi va haqiqiy html, CSS kodiga ega. Bir peyjerning yuqori qismida, bilan aloqa shakli.
CSS3 effektlari bilan bitta sahifali HTML5 ochilish sahifasi shabloni. U Bootstrap 3-da qurilgan uch ustunli ramkaga ega. iOS/Android ilovalarini sotish uchun javob beradi. Shablon 2 ta maketni (parallaksli va parallakssiz), Ajax kontakt shakllarini, PrettyPhoto lightbox va 5 ta rang sxemasini o'z ichiga oladi. Sozlash oson: olti burchakli kodlarni o'zgartiring va tegishli elementlar yangi rangga bo'yaladi. PSD kiritilgan.
8 ta rang variantini, tasvirlar uchun variantlarni taklif qiluvchi zamonaviy, Retina-ga tayyor mobil ilova shablonlari / .
Ko'p maqsadli tekis uslubdagi ochilish sahifasi shabloni 3 ta indeks varianti, 6 ta rang sxemasi bilan birga keladi. Shablon twitter bootstrap3, PHP aloqa formasi skriptida yaratilgan va yuklangan.
Tuhmat startaplar va kompaniyalar uchun ideal, professionallar yoki individual loyihalar uchun mos. Bootstrap va HTML5/CSS3 bilan javob beruvchi dizayn sezgir slayder, tab slayderi, axborot byulletenini ro'yxatdan o'tkazish shakli va boshqalarni o'z ichiga oladi.
Ajoyib funksionallikka ega oqlangan, toza va minimalistik HTML5 / CSS3 ochilish sahifasi shabloni. Shablon “Tez orada” sahifasi uchun moʻljallangan (tez orada ishga tushadi), ilova sahifasi va koʻrgazmali sayt yaratish uchun ideal.
Maxsus qo'nish uchun javob beruvchi shablon voqealar. Uning ostida bo'limlar, tijorat videosi, tadbirlar jadvali, mehmonlar ro'yxati mavjud.
Appreative - bu qisqacha ma'lumot uchun mo'ljallangan moslashuvchan shablon. Har xil turdagi vazifalar uchun javob beradi.