მზა სადესანტო გვერდების html შაბლონები. სადესანტო გვერდის შაბლონები

29.08.2019

გამარჯობა. ერთგვერდიანი საიტები კვლავ პოპულარულია და კარგი მიზეზის გამო. მათ აქვთ მთელი რიგი უპირატესობები სრულფასოვან მრავალგვერდიან საიტებთან შედარებით. ერთგვერდიან ვებსაიტზე (ასევე ცნობილია, როგორც სადესანტო გვერდი), ადამიანი კონცენტრირდება ერთ იდეაზე, ერთ პროდუქტზე, რაც საშუალებას აძლევს მას შეისწავლოს თქვენი შეთავაზება ყურადღების გაფანტვის გარეშე და უფრო მზად არის დატოვოს მოთხოვნა.

”კარგი,” ამბობ შენ, ”მე გადავწყვიტე გავმეკეთებინა სადესანტო გვერდი, მაგრამ პროგრამირების არაფერი მესმის.” და ეს არ არის პრობლემა. ახლა უამრავი ინსტრუმენტია პროფესიონალური ვებსაიტის შესაქმნელად კოდის გათხრების გარეშე. ერთ-ერთი მათგანია პოპულარული CMS WordPress WPBackery ან Elementor კონსტრუქტორით.

ამ სტატიაში მე შემოგთავაზეთ WordPress-ის სადესანტო გვერდის მაგარი შაბლონები, რომლებიც შესაფერისია ბიზნესისთვის, საქონლის გაყიდვისთვის, სააგენტოებისთვის, ფრილანსერებისთვის და ნებისმიერი სხვა თემისთვის. ყოველივე ამის შემდეგ, ასეთი შაბლონები შეიძლება და უნდა იყოს მორგებული, რათა მოერგოს საკუთარ თავს და თქვენს შეთავაზებას.

ბევრი შაბლონი იყენებს მოდურ ზარებს და სასტვენებს, როგორიცაა პარალაქსის ეფექტები, ბრტყელი დიზაინი, სრულეკრანიანი ფოტოები და ვიდეოები. მობილური მოწყობილობებისთვის ადაპტაცია შედის თითოეულ შაბლონში.

საკმარისია დისკუსია, მოდით შევხედოთ შერჩევას!

პ.ს. თუ გსურთ უფრო დეტალურად გაიგოთ რა არის Landing page, მაშინ სად განვიხილეთ ეს კითხვა დეტალურად და მოვიყვანე სადესანტო გვერდის 27 მაგალითი.

40 პრემიუმ შაბლონის შერჩევა CMS WordPress1-ზე სადესანტო გვერდის შესაქმნელად. ხიდი

ჩემთვის ეს საუკეთესო შაბლონია, რადგან მას აქვს 376+ დემო ვერსია სხვადასხვა თემებზე. ამ შაბლონით შეგიძლიათ სრულიად განსხვავებული ემოციების გადმოცემა. ძლიერი და ინტუიციური.

ამ წარმოუდგენელ თემას აქვს კონფიგურირებადი სლაიდერი, სრულად კონფიგურირებადი სათაურები, მეგა მენიუები, ვიდეო ფონი, ფიქსირებული ან წებოვანი სათაური, სხვადასხვა სათაურის ლოგოები, ინტერაქტიული ელემენტები, 7 სხვადასხვა პორტფელის განლაგება და მრავალი სხვა, რაც იძლევა გაუთავებელ შესაძლებლობებს.

გააკეთეთ თქვენი პროდუქტის ან შეთავაზების უნიკალური პრეზენტაცია. ტექსტში არის ვიზუალური ინსტრუქციები და ასევე ვიდეო ინსტრუქციები.

2. The7

შაბლონების მოწინავე და უნიკალური სისტემა საშუალებას გაძლევთ არა მხოლოდ შექმნათ სადესანტო გვერდი, არამედ მოაწყოთ იგი პროექტის მთავარ ვებსაიტში დამატებითი პარამეტრების გარეშე. შაბლონში შეგიძლიათ იპოვოთ მრავალი მზა სტილი ბლოკებისთვის, რომლებიც მოთხოვნადია სადესანტო გვერდებზე - გუნდის პრეზენტაცია, გალერეა, პორტფოლიო. ასევე ხელმისაწვდომია გვერდის წინასწარ ჩატვირთვის ულამაზესი ეფექტები.

სხვათა შორის, The7 ახლა ჩემს ბლოგზეა.

3.BeTheme

Betheme არის ყველაზე დიდი შაბლონი ფუნქციონალურობისა და წინასწარ დაყენებული განლაგების ვარიანტების რაოდენობით. დღეს ამ თემაზე დაფუძნებული 400+ დემო სადესანტო გვერდია, შეგიძლიათ აირჩიოთ ნებისმიერი და მოერგოთ თქვენს საჭიროებებს. Betheme-ზე მზა სადესანტო გვერდები აქტიურად იყენებენ:

გადახვევის ეფექტები - პარალაქსიდან დიზაინის ელემენტების ანიმაციურ ტრანსფორმაციამდე
სრული ეკრანის ფონური ვიდეოები
"სოციალური" ღილაკები
ანიმაციური მრიცხველები
ონლაინ განაცხადის ფორმები
პორტფელის სექციები
განყოფილება "ჩვენი თანამშრომლები"

კიდევ რამდენიმე დემო:

თემის განახლებები ხდება ავტომატურად, დანამატის განახლება ხდება ღილაკის დაჭერით. დემო საიტები იყენებენ Revolution Slider-ს. შაბლონი გთავაზობთ გვერდის განლაგების 5 ვარიანტს, 20 მორგებულ სათაურს, შეუზღუდავი რაოდენობის სტილებს Google რუკებისთვის და ბევრ თანამედროვე ხატულას.

Muffin Builder ინსტრუმენტი დაგეხმარებათ შექმნათ ნებისმიერი დიზაინი ვებ დეველოპმენტის ცოდნის გარეშე. თუ სასურველია, შეგიძლიათ დაამატოთ css წესები და js სკრიპტები ძირითადი შაბლონის კოდზე გავლენის გარეშე.

შერჩევა თემაზე:

Ronneby-ს აქვს მაღალი შესრულება და გაფართოებული პარამეტრების პანელი. შაბლონს დაემატა საუკეთესო პრემიუმ დანამატები WordPress-ის სადესანტო გვერდების შესაქმნელად. შაბლონის შემქმნელები განსაკუთრებულ ყურადღებას აქცევენ მომხმარებლის მხარდაჭერას - ნებისმიერ კითხვას პასუხობენ სწრაფი პასუხით, სადაც აღწერილია, თუ როგორ უნდა მოგვარდეს პრობლემა. თემა უკვე ლოკალიზებულია ორ ენაზე, მაგრამ მას თან ერთვის მთარგმნელობითი ფაილებიც, რაც საშუალებას გაძლევთ მოაწყოთ საიტების მრავალენოვანი მხარდაჭერა.

კიდევ ერთი დემო მაგალითი:

5. იუპიტერი

მოქნილი და ამავდროულად ადვილად მოსარგებელი შაბლონი. მოყვება 72 ე.წ სკინი, ყველა შესაძლო თემაზე. მოსახერხებელი ადმინი. პანელი, დამწყებთათვისაც კი გაუადვილდება გვერდის შემქმნელის და პარამეტრების გაგება.

არსებობს მოსახერხებელი გაკვეთილები 240 გვერდით და 20 ვიდეო გაკვეთილებით, თუ როგორ გახადოთ თქვენი ვებსაიტი საოცარი!)

იუპიტერის შაბლონი ასევე ადაპტირებულია SEO-სთვის. Google PageSpeed ტესტები აჩვენებს კარგ შედეგებს, რაც ნიშნავს, რომ საძიებო სისტემებს მოეწონებათ თქვენი საიტი.

შაბლონი არის სუფთა, მოწესრიგებული და იყენებს მაღალი ხარისხის ტიპოგრაფიას. ვიზუალური ეფექტების გამოყენების გამო, როგორიცაა პარალაქსი, თემა გამოდის ცოცხალი და ძალიან სასიამოვნოა ასეთი საიტის ყურება.

6.ვუდმარტი

WordPress-ის ერთ-ერთი უდიდესი კოლექცია. შაბლონები იწერება პროფესიონალი ვებ პროგრამისტების მიერ, ხოლო დიზაინები შედგენილია ვიზუალური და UX გადაწყვეტილებების კვალიფიციური სპეციალისტების მიერ. ამის წყალობით, თქვენ შეგიძლიათ უსაფრთხოდ დააინსტალიროთ ნებისმიერი შაბლონი, თითოეული მზად არის გამოსაყენებლად კომპიუტერზე, მობილურ ტელეფონზე, ტაბლეტზე. პრემიუმ დანამატები შედის:

WPBackery

სლაიდერის რევოლუცია

შესანიშნავი ადაპტაცია WooCommerce-თან (ონლაინ მაღაზია)

7.ბრუკლინი

ბრუკლინს აქვს 16 დემო სკინი სხვადასხვა თემებზე. გვერდების თანამედროვე სტილი, სურათებისა და შრიფტების კომბინაცია ელეგანტურობას მატებს ნებისმიერ საიტს, სადაც ეს თემაა დაინსტალირებული. პორტფელის ბლოკი ლამაზად არის შექმნილი. შაბლონი შესანიშნავია სააგენტოებისა და ბიზნეს კომპანიებისთვის. შაბლონები დამზადებულია მუქ ფერებში, რაც იძლევა თავდაჯერებულობას და შთააგონებს ნდობას. შაბლონი საპასუხოა და მშვენივრად გამოიყურება ყველა მოწყობილობაზე.

გლუვი და მარტივი შაბლონი, რომელიც არავის დატოვებს გულგრილს. მაღალი ხარისხის ტიპოგრაფია და ინტერფეისის ელემენტები ამ შაბლონს შესანიშნავად აქცევს. სხვადასხვა ცნობილი კონკურსებისა და რეიტინგების ნომინანტი და გამარჯვებული, როგორიცაა awwwards. აქვს 30-ზე მეტი სკინი სხვადასხვა თემის ასარჩევად

არა მხოლოდ ვებგვერდი, არამედ სურათებიც ადაპტირებულია მობილური მოწყობილობებისთვის, რათა უფრო მოსახერხებელი გამოიყურებოდეს ვიზიტორებისთვის.

9. H-კოდი

შაბლონი ახალია, მაგრამ უკვე დაამტკიცა. მას აქვს 8 თემა (მრავალგვერდიანი, სადესანტო, კორპორატიული, პორტფოლიო, ბლოგი, ელექტრონული კომერცია, სტატიები) თითოეულში 3-12 სკინით. სილამაზისა და სისუფთავის გარდა, ამ შაბლონს უბრალოდ აქვს სხვადასხვა ვიჯეტებისა და ელემენტების არსენალი. თქვენ შეგიძლიათ გახადოთ თქვენი სადესანტო გვერდი ლამაზი და ფუნქციონალური. გჭირდებათ სლაიდერი? გთხოვთ. აჩვენო პორტფოლიო, მიმოხილვები, უპირატესობები? Და ეს არის.

10. მშობლიური

Native არის ძლიერი ინსტრუმენტი სტარტაპის პოპულარიზაციისთვის. თემებზე დაფუძნებული WordPress სადესანტო გვერდის შაბლონები იყენებენ სხვადასხვა პარალაქსურ ეფექტებს საიტის სემანტიკურ ბლოკებს შორის გადასაადგილებლად. გაფართოებული დოკუმენტაცია და ვიდეო გაკვეთილები დაეხმარება ახალ CMS მომხმარებლებს სწრაფად გააცნობიერონ ადმინისტრაციის პანელის ფუნქციონირება. Visual Composer, Layer Slider და Slider Revolution მოდულები შედის, როგორც უფასო აპლიკაცია შაბლონთან ერთად.

11. გამორჩეული

Salient არის მრავალმხრივი თემა საპასუხო დიზაინით, რომელსაც ხშირად ირჩევს . პრემიუმ ტიპოგრაფია და პარალაქსური ეფექტები, რომლებიც გამოჩნდება გვერდის გადახვევისას, ხელს უწყობს სადესანტო გვერდის შთაბეჭდილების გაუმჯობესებას. კადრების სიჩქარის ოპტიმიზაცია უზრუნველყოფს გლუვ ანიმაციურ გადასვლებს შინაარსის ბლოკებს შორის. შაბლონი იყენებს გამოსახულების ადაპტირებულ ზომებს, რაც ეხმარება გვერდების სწრაფად ჩატვირთვას და დაზოგავს ტრაფიკს.

12. ძვირფასი ქვები

TheGem არის თანამედროვე თემა კრეატიული პროექტებისთვის, SEO ოპტიმიზირებულია და ავსებს "პასუხისმგებლო" განლაგებას. გვერდების მსუბუქი წონა, მათი ჩატვირთვის სიჩქარე და გააზრებული UX გარანტიას იძლევა შაბლონის მაღალ შესრულებას. თუ თქვენ გჭირდებათ თქვენი ბიზნესის პოპულარიზაცია სადესანტო გვერდის გამოყენებით, ღირს ამ შაბლონის ყიდვა, თუმც მხოლოდ SEO მეგობრული კოდის გამო, რომელიც უზრუნველყოფს მაღალ პოზიციებს Google-ის შედეგებში. სადესანტო გვერდების 11 ხელმისაწვდომი დემო ვერსია ითვალისწინებს სხვადასხვა პროექტების საჭიროებებს.

TheGem-ზე ვებსაიტის დიზაინის ელემენტები მორგებულია Visual Composer მოდულის გამოყენებით. სადესანტო ბლოკებში დიდი რაოდენობით შინაარსის ჩვენება (პორტფოლიო, მიმოხილვები, სერვისები) ორგანიზებულია ჩატვირთვის საშუალებით - ავტომატური ან „ღილაკით“, ასევე ჩანართების გადართვის სლაიდერის საშუალებით. შაბლონი გთავაზობთ ანიმაციის 6 ვარიანტს სექციის კომპონენტების ჩასატვირთად, რომლებიც გამოჩნდება სადესანტო გვერდის შინაარსის გადახვევისას. შინაარსის ბლოკების ფონი შეიძლება იყოს ვიდეოები vimeo-დან და youtube-დან ან ამოღებული საიტის ფაილური სისტემიდან html5-ის გამოყენებით.

13. მარკეტინგი პრო

Marketing Pro არის შაბლონი, რომელიც შექმნილია კონვერტაციის, მარკეტინგისა და SEO-ს გათვალისწინებით. მასზე განთავსებული 9 დემო საიტიდან თითოეული იქმნება კონკრეტული მარკეტინგული ნიშის მახასიათებლების გათვალისწინებით. როგორც ბონუსი ადაპტური სადესანტო გვერდის დიზაინისთვის, არის სტილიზებული შაბლონები ღონისძიების ორგანიზაციის ბლოკებისთვის.

Oshine არის ყველაზე გაყიდვადი კრეატიული თემები. ლამაზი დიზაინითა და ძლიერი ფუნქციონირებით, ეს შაბლონი შეიძლება გამოყენებულ იქნას კრეატიული პროექტებისა და ბიზნესის სადესანტო გვერდების შესაქმნელად. ორმოცდაათი მოდული საიტის გარეგნობის მორგებისთვის, რომელთაგან თითოეული საგულდაგულოდ არის შემუშავებული, ხელს უწყობს იდეალური შედეგების მიღებას. ოფცია „გაუქმება/გამეორება“ და გარკვეული მოქმედებებისთვის „ცხელი კლავიშების“ მინიჭების შესაძლებლობა ამარტივებს დაყენების პროცესს.

15. ჯეველინი

Jevelin არის შაბლონი პრემიუმ საპასუხო დიზაინით, რომელიც აადვილებს სადესანტო გვერდების და ერთგვერდიანი საიტების შექმნას Wordpress-ზე. თემა ხელს შეუწყობს პროექტის დაწყებას მოკლე დროში. მრავალფეროვანი პერსონალიზაციის ხელსაწყოების წყალობით - 9 სათაურის ვარიანტი სხვადასხვა განლაგებაში, 40 უნიკალური ელემენტი, რომელთაგან თითოეული შეიძლება ინდივიდუალურად იყოს სტილიზებული, ჩაშენებული ფუნქციონალობა სოციალურ ქსელებში რეპოსტების ორგანიზებისთვის, პორტფელის განყოფილების დიზაინის 6 სტილის გადაწყვეტა - სკინების მორგება არის უფრო სწრაფად, ვიდრე ოდესმე.

16. კალიუმი

კალიუმი არის თემა, რომელსაც მიმართავენ სხვადასხვა პროფესიული სფეროს წარმომადგენლები, რათა მიიღონ ვებსაიტი მათი სერვისების პოპულარიზაციისთვის. კალიუმზე ვებ-გვერდის დიზაინში განსაკუთრებული აქცენტი კეთდება ტიპოგრაფიაზე - ამაზე პასუხისმგებელია შრიფტების მართვის სპეციალიზებული ბიბლიოთეკა. შაბლონს შეუძლია გამოიყენოს 4000 შრიფტი - Google, Typekit, Font Squirrel, პრემიუმი და საბაჟო (ატვირთული მომხმარებლის მიერ).

17. შემომავალი

Inbound არის შაბლონი, რომელსაც შეუძლია ხელი შეუწყოს აპლიკაციების, ელექტრონული წიგნების, ვიდეო კურსების და მსგავსი პროდუქტების ერთგვერდიანი საიტების შექმნას. დიზაინის პერსონალიზაცია ხდება ვიზუალური სადესანტო გვერდის გენერატორის Landing Page Builder-ის გამოყენებით. შაბლონი ასევე საშუალებას გაძლევთ გამოყოთ მინი განყოფილება სადესანტო გვერდის ფორმატში თითოეულ დაწინაურებულ პროდუქტზე ერთი საიტის ფარგლებში და შეიძლება გამოიყენოთ WooCommerce-ში პროდუქტის კატეგორიის სექციებისთვის.

18. ხელუხლებელი

Intact არის მრავალფუნქციური თემა, რომელიც შექმნილია თქვენი ონლაინ ბიზნეს პრობლემების გადაჭრაში. იგი მოიცავს თანამედროვე სადესანტო გვერდის ისეთ მნიშვნელოვან კომპონენტებს, როგორიცაა: „სატარიფო გეგმები“ და „კომპანიის თანამშრომლები“ ბლოკები, სლაიდერი მიმოხილვებით, თემატური ხატების ნაკრები, გამოწერის ფორმები და ონლაინ კონსულტანტი.

19. კომეტა

Comet არის სრულად პასუხისმგებელი პიქსელებით სრულყოფილი შაბლონი Visual Composer-ისთვის და . მომხმარებლებს სთავაზობენ 5 სკინს სადესანტო გვერდებისთვის, რომლებიც ახორციელებენ შემდეგ ეფექტებს: ტექსტის სლაიდერი, პარალაქსი, ფონური ვიდეო - იმპორტირებული youtube-დან ან ჩაშენებული html5-ში, ანიმაციური მასშტაბის სლაიდერი. ახალი მომხმარებლები ადვილად გაიგებენ თემის პარამეტრებს WordPress-ის სადესანტო გვერდების შექმნისას - ინსტრუქციები და ვიდეო გაკვეთილები ხელმისაწვდომია ონლაინ.

20. LeadEngine

უნივერსალური WordPress თემა, რომელსაც აქვს ყველაფერი, რაც გჭირდებათ სადესანტო გვერდის შესაქმნელად:

200 ბლოკი შაბლონში „აწყობისთვის“ ნებისმიერი თანმიმდევრობით;
ადაპტირება ნებისმიერ ეტაპზე;
35 სრულად დაპროექტებული გვერდი - შეგიძლიათ უბრალოდ შეცვალოთ ტექსტი და ფოტოები;
ჩამოტვირთვის მაღალი სიჩქარე - საშუალოზე 94%-ით უფრო სწრაფი.

განვითარების დიზაინის შეფასება შესაძლებელია შეძენამდე. ვიზუალურ რედაქტორში იცვლება ფერის სქემები და პარამეტრები. ავტორები გპირდებიან მხარდაჭერას ნებისმიერ დროს.

დეველოპერი გთავაზობთ ვებსაიტის შაბლონს სხვადასხვა თემაზე - მშენებლობიდან ვეტერინარულ სერვისებამდე. მარტივი და ეფექტური სადესანტო გვერდები დაგეხმარებათ პოტენციურ კლიენტებს მიაწოდოთ თქვენი უპირატესობები, სამუშაო პირობები და სხვა საჭირო დეტალები. დიზაინი რეაგირებს და კარგად გამოიყურება ყველა მოწყობილობაზე, Retina მონიტორებიდან მობილურ გაჯეტებამდე. არსებობს დანამატები პორტფოლიოს, გახსნის საათებისთვის, კალენდრისთვის, ასევე მორგებული ხატულებისთვის.

22. ინკუბატორი

"იდეალური თემა სტარტაპისთვის", - ამბობენ ავტორები მათი განვითარების შესახებ. 2019 წლის მსუბუქი, მინიმალისტური დიზაინი შესაფერისია ონლაინ მაღაზიებისთვის, ივენთების სააგენტოებისთვის და მრავალი სხვა ტიპის ბიზნესისთვის სავიზიტო ბარათებისთვის ან უფრო ფართომასშტაბიან პროექტში შემდგომი განვითარებისთვის. შედის:

ვიზუალური დიზაინერი - დეტალების შეცვლა ონლაინ;
მობილური ადაპტირება;
WooCommerce არის საუკეთესო ონლაინ მაღაზიის მოდული;
ნებისმიერი ენის მხარდაჭერა.

23. Phlox Pro

მრავალ შაბლონიანი შაბლონი ოცდაათი დემოს საშუალებით, რომელშიც მხოლოდ სასურველი ტექსტის ჩანაცვლება შეგიძლიათ. ისინი ასევე გვთავაზობენ 90-ზე მეტ შაბლონს სლაიდერებისა და ეფექტებისთვის და 130-ზე მეტ ვარიანტს ცალკეული გვერდებისთვის. მოყვება 9 ძირითადი დანამატი, რომელიც სასარგებლო იქნება სავიზიტო ბარათის ვებსაიტის ან უფრო დიდი რესურსის პოპულარიზაციისთვის. ეს ყველაფერი ფასდაკლებულია, ამჟამად ხელმისაწვდომია $30. ერთ-ერთი ყველაზე პოპულარული შაბლონი სადესანტო გვერდებისთვის.

24. პორტო

კიდევ ერთი მრავალ შაბლონის დიზაინერი სადესანტო გვერდებისა და სავიზიტო ბარათებისთვის. გაასუფთავეთ კოდი უსასრულო რაოდენობის ვარიანტებით სათაურებისა და ქვედა კოლონტიტულის არჩევისთვის პროგრამირების სწავლის საჭიროების გარეშე. უამრავი დიზაინი, რომელთა ელემენტები ადვილად ცვალებადია ქსელის მოდულის წყალობით. გაფართოებული ძიების საშუალებით ადვილია ერთგვერდიანი საიტიდან სრულფასოვან მაღაზიად გადაქცევა. მხარდაჭერა ყოველთვის მზადაა უპასუხოს კითხვებს.

შეიძლება დაგაინტერესოთ:

25.XTRA

იაფი და პოპულარული მრავალ შაბლონი სადესანტო, რომელიც განსხვავდება:

პროფესიონალი დიზაინერის ბლანკები - მხოლოდ 55 ცალი;

სწრაფი რეაგირება ოპტიმიზაციის გამო;

პერსონალიზაცია drag and drop მეთოდის გამოყენებით;

200-ზე მეტი ბლოკი შინაარსისთვის;

1000-ზე მეტი ვარიანტი.

პროფესიონალური ვებსაიტები ნებისმიერ თემაზე, რომლებიც შეგიძლიათ უბრალოდ დააინსტალიროთ დაწკაპუნებით და გამოიყენოთ. თანამედროვე დიზაინები, რომლებიც არ არის მოსაწყენი და გამოიყურება სუფთა და ლამაზი.

26. გამზ

„ახალი თაობის მრავალ თარგი“ თამამი განცხადებაა, მაგრამ სწორედ ამას ამბობენ ავტორები თავიანთ პროდუქტზე. მხოლოდ 35 დოლარად შეგიძლიათ მიიღოთ:

200 სადესანტო გვერდი ლამაზი „ევროპული“ დიზაინით;
WooCommerce და გაფართოებული შეკვეთის ფორმები;
ინსტალაცია წუთში;
პორტფოლიოს პარამეტრები, სლაიდერები.

Elementor ვიზუალური რედაქტორის მოდული მართლაც განახლებულია უახლესი ვერსიით და ძალიან მარტივი გამოსაყენებელია.

27. კიდობანი

"საუკეთესო 9500-ს შორის", აღნიშნავენ დეველოპერები. შაბლონი ფოკუსირებულია ადამიანებზე, რომლებსაც არასდროს გაუკეთებიათ კოდირება. დიზაინის პერსონალიზაცია ხორციელდება ვიზუალური დიზაინერის მოდულის Elementor-ის გამოყენებით, რომელიც საშუალებას გაძლევთ იმუშაოთ ერთი-ერთზე რეჟიმში, მესამე მხარის ინსტალაციების გამოყენების გარეშე და დაუყოვნებლივ გამოიყენოთ 300 შაბლონიდან ერთ-ერთი სრულად მოქმედი ფუნქციონალი. მოსახერხებელი და სწრაფი დაყენება.

28.ამედეო

ლამაზი დიზაინი უჩვეულო ფერის სქემით. აქცენტი კეთდება არა მხოლოდ ელეგანტურ დიზაინზე, რადგან შემოთავაზებულია შეძენა კომპლექტში:

WooCommerce მოდული ონლაინ მაღაზიისთვის;

გაფართოებული საკონტაქტო ფორმების მოდული;

გადახვევის ეფექტების შერჩევა სხვადასხვა სტილში;

ანიმაციების შერჩევა.

სუფთა და ნათელი WordPress შაბლონი სავიზიტო ბარათებისა და ონლაინ შოპინგისთვის. მაღაზიის რეჟიმში არის პროდუქტის მახასიათებლების პარამეტრები და მოძებნეთ ისინი.

29. ბოლგე

საყვარელი სადესანტო გვერდების არჩევანი თანამედროვე, ელეგანტურ ბრტყელ სტილში. ელემენტების ხელით დახატვა საშუალებას მოგცემთ გამოირჩეოდეთ და დაიმახსოვროთ პოტენციურ კლიენტებს. ფასში შედის ძირითადი დანამატები და ვიჯეტები - ვიზუალური რედაქტორიდან პარალაქსის ეფექტამდე ფონის ან პორტფოლიოს განთავსებისთვის. თქვენ შეგიძლიათ დააკონფიგურიროთ სხვადასხვა ხედები დესკტოპის ვერსიებში და ადაპტაცია ჩართულია ნაგულისხმევად.

30. მაკოტო

რამდენიმე გადაწყვეტა დიზაინერებისთვის, ფოტოგრაფებისთვის, მხატვრებისთვის. პორტფოლიოს გამოქვეყნებისთვის სასარგებლო წინასწარ დაყენებები საშუალებას მოგცემთ დაიცვათ იგი კოპირებისგან და ჩატვირთოთ როგორც მომხმარებელი ხედავს, რაც დაზოგავს დატვირთვის დროს. ვიდეოს მარტივი ჩამოტვირთვა. არის ბლოგინგის ვარიანტი. მომზადებულია ინფოგრაფიკის განთავსების ელემენტები. ვიზუალური დიზაინერი დაგეხმარებათ მარტივად დააკონფიგურიროთ ყველა დეტალი.

32. გამწვანება

დეველოპერებმა შექმნეს საინტერესო "მწვანე" დიზაინი გამწვანების სერვისებისთვის, მებაღეობის დახმარებისა და ეკო თემებისთვის. თუმცა, სამუშაო ნაწილი შეიძლება გამოყენებულ იქნას სხვა მიზნებისთვის. ლამაზი ხატები, სუფთა Google შრიფტები, შესანიშნავი რეაგირება და გარეგნობა, მათ შორის Retina მოწყობილობებზე, გულისხმობს WordPress თემების ფართო გამოყენებას.

33. Crowdmerc

დამზადებულია WordPress-ის უახლესი ვერსიისთვის. შაბლონი მუდმივად განახლდება. ონლაინ მაღაზიის ფუნქციონირება უზრუნველყოფილია მოწინავე მოძიებისა და შეკვეთისთვის მოსახერხებელი მოდულის საშუალებით. ასევე არის წინასწარ დაყენებული მოვლენები, კალენდარული თარიღები და ჩანაწერები. გამოიყენეთ Elementor ახალი გვერდების შესაქმნელად. მხარს უჭერს ნებისმიერ დამატებით დანამატს.

34. Creedence

კრეატიული "მუსიკალური" თემა მნახველებს დაამახსოვრდებათ მისი ნათელი დიზაინით და საიტის მფლობელი დაინტერესდება:

სადესანტო გვერდებისა და შიდა გვერდების განვითარება - რესურსის განვითარების შეუზღუდავი შესაძლებლობა;
ერთი დაწკაპუნებით ინსტალაცია;
WYSIWYG დაყენება;
მუსიკის, ვიდეოს, სლაიდერის ეფექტების დამატების შესაძლებლობა.

გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო! ამ სტატიაში შევარჩიე 10 HTML Landing Page შაბლონი (ერთგვერდიანი საერთო ენაზე), რომლებიც, ჩემი აზრით, უფრო წარმატებული და მაღალი კონვერტაციის კოეფიციენტია. ერთხელ, როდესაც დავიწყე სადესანტო გვერდების შექმნა (4 წლის წინ), დიდად არ ვიყავი მხატვარი და ამიტომ ვეძებდი შაბლონებს. ბუნებრივია, ირგვლივ მხოლოდ სამომხმარებლო საქონელი, სამშენებლო ნაკრები და ფასიანი შაბლონები იყო. ახლა, რა თქმა უნდა, ეს საკითხი უფრო მარტივია, არსებობს მრავალი გონივრული შაბლონი სხვადასხვა თემაზე, მაგრამ მაინც, თქვენ უნდა ნახოთ.

თქვენს ყურადღებას მოვიყვან 10 HTML ერთგვერდიან შაბლონს. ვერ ვიტყვი, რა მიზეზით თვლის G Chrome ბრაუზერს, რომ ფაილები შეიცავს ვირუსებს ან შეიცავს არასასურველ პროგრამულ უზრუნველყოფას (ასეთი ფაილები არასდროს მქონია და არ მაქვს), Google-ის მონაცემთა ბაზაში არ არის ნიშანი იმისა, რომ საიტი სანქციების ქვეშაა. ფაილები შემოწმდა საიმედო და ფართოდ გავრცელებული virustotal სერვისის მიერ. მე ჯერ კიდევ უნდა გავარკვიო ეს. თუ ვერ დაგარწმუნე, თავად გადაამოწმე ფაილები. დავდებ პირველი ფაილის სკრინშოტს, დანარჩენი თავად შეამოწმეთ.

მე ვასწორებ ამ სტატიას 2016 წლის 29 ივლისს. მე არ წავშალე ზემოთ ნათქვამი, თუმცა ახლა G Chrome არ თვლის ჩემს საიტს და ფაილებს უსაფრთხოების საფრთხედ. როგორ გავაკეთე ეს და რა სერვისი გამოვიყენე, დავწერ ერთ-ერთ შემდეგ სტატიაში.

2. კიდევ ერთი სადესანტო გვერდი „ვიდეო მეთვალყურეობა“. ლამაზი დიზაინი, pop-up ფორმების ანიმაცია, შესანიშნავი გალერეა pop-up აღწერილობით, მიმოხილვები;

3. თარგი „კარების მონტაჟი“. მარტივი და თემატური დიზაინი, უკუკავშირის ფორმა, მიმოხილვები;

4. თარგი „საერთაშორისო ტვირთის გადაზიდვა“. ლამაზი დიზაინი, გამოხმაურების ფორმები, დროის ათვლა სლაიდერით, აქტივობის აღწერა ამომხტარ ფანჯრებში;

5. თარგი „ტვირთის ტრანსპორტირება“. შესანიშნავი თემატური დიზაინი, გამოხმაურება და შეკვეთის ფორმები, ანიმაციები;

6. თარგი „საბაჟო სამზარეულოები“. თემატური დიზაინი, უკუკავშირის ფორმები, ათვლა სლაიდერით, აღწერილობები ამომხტარ ფანჯრებში;

7. კიდევ ერთი შაბლონი "Custom Kitchens". დიზაინს აქვს მინიმალიზმი, უკუკავშირის ფორმები, გალერეა;

8. თარგი „ბინებისა და ოფისების შეკეთება და გაფორმება“. ლამაზი და მარტივი დიზაინი, გამოხმაურების ფორმები, მიმოხილვები;

9. შაბლონი „წამწამები“. კარგი დიზაინი, გამოხმაურების ფორმები, ფასების სია, გალერეა;

10. თარგი „ავტოდილერის აღდგენა“. ლამაზი დიზაინი, ნავიგაცია სლაიდერის, გალერეის, გამოხმაურების ფორმის სახით;

ვიმედოვნებ, რომ თქვენთვის საინტერესო რამ იპოვნეთ და გამოიყენეთ შაბლონები.

თუ თქვენ გაქვთ რაიმე შეკითხვა ან გჭირდებათ დახმარება, დაწერეთ სტატიის კომენტარებში, მე ვუპასუხებ ყველას, მე დავეხმარები ყველას.

ერთგვერდიანი ვებგვერდი მოსახერხებელია ბიზნესმენებისთვის, რადგან მისი შექმნა ფაქტიურად ერთ დღეშია შესაძლებელი. თუ ჩამოტვირთავთ მზა ერთგვერდიანი ვებსაიტის შაბლონს, შეგიძლიათ შექმნათ ვებსაიტი თქვენი კომპანიისთვის მინიმალური თანხით, რადგან თქვენ მხოლოდ ჰოსტინგის გადახდა მოგიწევთ. კლიენტისთვის ერთგვერდიანი ვებგვერდი მოსახერხებელია, რადგან მასზე არსებული ყველა ინფორმაცია წარმოდგენილია მაქსიმალურად მოკლედ და სტრუქტურირებული, ზედმეტი არაფერია. მომხმარებლისთვის მოხერხებულობის გამო, ერთგვერდიანი ვებსაიტები ხშირად აჩვენებენ კონვერტაციის უფრო მაღალ მაჩვენებელს, ვიდრე სხვა ტიპის საიტები.

როგორ ავირჩიოთ ერთგვერდიანი შაბლონი?

გარეგნობა. მიზანშეწონილია დიზაინის გაკეთება კომპანიის ზოგად სტილში. ინტერფეისს არ უნდა ჰქონდეს ძალიან შეუთავსებელი ფერები. თუმცა, მომხმარებლები დიდი ხანია დაიღალნენ პასტელი ფერებით, ამიტომ მისასალმებელია სიკაშკაშე და კრეატიულობა.

"წონა". ანიმაციურმა დიზაინმა, მბჟუტავ ბანერებმა, „მძიმე“ ელემენტებმა, სლაიდერებმა შეიძლება საიტი ისე გადაიტვირთოს, რომ კონკურენტებზე მეტი დრო დასჭირდეს გახსნას.

ბლოკების რაოდენობა და მათი მორგების შესაძლებლობა. შაბლონის არჩევამდე გადაწყვიტეთ ზუსტად რომელი ბლოკებია საჭირო მინიმუმამდე, რათა არ გადაიტვირთოთ გვერდი. შაბლონის ცდისას გაარკვიეთ, შესაძლებელია თუ არა ბლოკების ამოღება და შეცვლა.

ჯვარედინი ბრაუზერის ფუნქციონირება და ადაპტირებული დიზაინი მნიშვნელოვნად გააფართოვებს პოტენციური კლიენტების აუდიტორიას. ამიტომ, დარწმუნდით, რომ აირჩიეთ მხოლოდ საპასუხო ერთგვერდიანი შაბლონები.

ჩვენ გთავაზობთ ერთგვერდიან შაბლონებს უფასოდ

თუ გადაწყვეტთ შექმნათ Landing Page თქვენი კომპანიისთვის, შეგიძლიათ ჩამოტვირთოთ შაბლონი ჩვენს ვებსაიტზე. ჩვენ ყურადღებით ვამოწმებთ ყველა შაბლონს ვირუსებზე, ასე რომ თქვენ არ უნდა ინერვიულოთ ინფიცირებული ფაილის ჩამოტვირთვაზე. ჩვენს კატალოგში ყველა სადესანტო გვერდის შაბლონს აქვს თანამედროვე დიზაინი, დამზადებულია სხვადასხვა სტილში. ბლოკების რაოდენობის კორექტირების, ფერის სქემის და სხვა ფუნქციების შეცვლის შესაძლებლობა დაგეხმარებათ შექმნათ უნიკალური, ორიგინალური ვებსაიტი მარტივი შაბლონის საფუძველზე.

გეპატიჟებით ჩამოტვირთოთ ერთგვერდიანი ვებსაიტების შაბლონები

მათი მთავარი პრობლემა, ვინც გადაწყვეტს სადესანტო გვერდის შაბლონის უფასოდ ჩამოტვირთვას, არის ვირუსების და შეცდომების დიდი რაოდენობა უფასო შაბლონებში. ამიტომ, ძალიან მნიშვნელოვანია უსაფრთხო და სანდო საიტის პოვნა. გეპატიჟებით გვესტუმროთ, რადგან ჩვენ ყურადღებით ვაკვირდებით უსაფრთხოებას. გარდა ამისა, ჩვენ გაგახარებთ HTML ერთგვერდიანი შაბლონების ყველაზე ფართო ასორტიმენტით, რომელიც შეგიძლიათ ჩამოტვირთოთ ახლავე!

წაიკითხეთ ტექსტი შემდგომში...

» WordPress-ის სადესანტო გვერდის უფასო შაბლონები - TOP 30

WordPress-ის სადესანტო გვერდის უფასო შაბლონები - TOP 30

კონკრეტულად, ეს სტატია განიხილავს საუკეთესო სადესანტო WordPress შაბლონებს, რომლებიც შეიძლება თქვენთვის შესაფერისი იყოს. ყველა მათგანში შედის სკრინშოტი და დიზაინის დემო ვერსია, ასე რომ თქვენ შეგიძლიათ შეაფასოთ თემა და დაუყოვნებლივ ჩამოტვირთოთ იგი, თუ მოგწონთ.

ძალიან ხშირად, WordPress-ის სადესანტო გვერდის შაბლონები ნაწილდება საფასურით, მაგრამ მე შევაგროვე თქვენთვის საუკეთესო და უფასოამ სტატიაში, რათა გაგიადვილოთ ძებნა.

ასევე შეიძლება დაგაინტერესოთ მათთვის, ვინც ეძებს ჰოსტინგს 1.

არის ერთგვერდიანი თემა, რომელიც დაგეხმარებათ შექმნათ ვებგვერდი დიდი ძალისხმევის გარეშე. მეორეს მხრივ, მას აქვს პროფესიონალურად დახატული დიზაინი, პარალაქსის გადახვევა, რაც საშუალებას გვაძლევს ვუწოდოთ ეს თემა "ლამაზი". ეს შაბლონი განკუთვნილია სტარტაპებისა და მცირე ბიზნესისთვის.

არის მრავალფუნქციური WordPress თემა. მასში შედის ცოცხალი ინტერფეისი, კლასიკური პარალაქსის ეფექტი და სხვა ანიმაციები, რაც თემის ყურებას კიდევ უფრო სასიამოვნოს ხდის. Zerif Lite არის ჯვარედინი ბრაუზერის თემა, რომელიც ასევე კარგად არის დაწერილი კოდის თვალსაზრისით.

3. Alhena Lite

Alhena Lite არის უფასო კორპორატიული WordPress თემა, რომელიც სრულად არის ინტეგრირებული WooCommerce მოდულთან, რომელიც საშუალებას მოგცემთ მარტივად დააყენოთ თქვენი ონლაინ მაღაზია.

არის სუფთა, მარტივი ბიზნეს თემა, რომელიც სრულად რეაგირებს და მოიცავს ბევრ პოპულარულ მახასიათებელს ვებსაიტის შექმნის გასაადვილებლად.

5. პალმასი

Palmas არის ღია ფერებში დამზადებული თანამედროვე თემა, რომელიც შესაფერისია პირადი ან მოდის ბლოგის გასაშვებად. ეს შაბლონი ასევე მხარს უჭერს დანამატებს, როგორიცაა Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache და მრავალი სხვა.

6. ბრასერია

Brasserie არის WordPress-ის მარტივი შაბლონი, რომელიც შესანიშნავია რესტორნის, კაფესა თუ კულინარიული საიტისთვის. მოყვება ანიმაციური ეფექტები, ასევე დიდი რაოდენობით ფუნქციონირება.

7. XT Corporate lite

XT Corporate lite არის მარტივი და მინიმალისტური თემა, რომელიც შესაფერისია მცირე პროდუქტის ან მომსახურებისთვის.

ღია ფერებში შესრულებული სასიამოვნო თემაა. მოიცავს სხვადასხვა ანიმაციას და ვიზუალურად განსაცვიფრებელ გადასვლებს და პარალაქსის ეფექტს. გარდა ამისა, Freesia Empire მხარს უჭერს დანამატებს, როგორიცაა Breadcrumb NavXT, WP-PageNavi, საკონტაქტო ფორმა 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress და WooCommerce.

არის თემა, რომელიც შესაფერისია მცირე თუ საშუალო ბიზნესის პრეზენტაციისთვის. იგი მოიცავს უამრავ ფუნქციას და დანამატს სადესანტო სტრუქტურის სრული მართვისთვის.

10.

არის მრავალმხრივი თემა ბევრი ფუნქციონირებით. ეს არის ადაპტური, ყველა ელემენტი ანიმაციურია პარალაქსის ეფექტით. ერთი გვერდის მორგება მარტივია და საშუალებას გაძლევთ რეალურ დროში ნახოთ ცვლილებები. მიმდინარე სადესანტო თემა ასევე მხარს უჭერს WordPress-ის ძირითადი დანამატების დიდ რაოდენობას.

11. ფოტოგრაფია

FotoGraphy არის სადესანტო გვერდი, რომელიც შესაფერისია ფოტოგრაფებისთვის ან დიზაინერებისთვის. სიმარტივე და დიდი რაოდენობით ფუნქციების არსებობა მას კიდევ უფრო მასშტაბურს და კონფიგურირებადს ხდის.

12. ინტეგრალური თემა

ინტეგრალური თემა არის ერთგვერდიანი პარალაქსის თემა, რომელიც შესაფერისია კრეატიულებისთვის, ბიზნესის მფლობელებისთვის ან აგენტებისთვის. მის დაყენებას მხოლოდ რამდენიმე წუთი დასჭირდება.

13. მოედანი

Square არის მინიმალისტური თემა, რომელიც შეიძლება გამოყენებულ იქნას ნებისმიერი ტიპის ვებსაიტისთვის. ის საუკეთესოდ შეეფერება მცირე და საშუალო ბიზნესს. Square კონფიგურირებულია WordPress-ის მრავალი პოპულარული დანამატისთვის და ასევე არის SEO ოპტიმიზირებული.

14.აცოცხლე

Enliven არის მაღალი ხარისხის თემა. მე მას პრემიუმს დავარქმევ, რადგან ხარისხსა და სილამაზეს ერთ ბოთლში აერთიანებს. ის ასევე მხარს უჭერს ბევრ პოპულარულ დანამატს და მარტივია მისი მორგება.

15. ლატე

ლატე არის შაბლონი ფოტოგრაფებისთვის. მას აქვს ყველაფერი, რათა ადეკვატურად აჩვენოთ თქვენი პორტფელი, ასევე მოუყვეთ თქვენს შესახებ. დაყენება ხდება რამდენიმე დაწკაპუნებით.

16. ორშაბათი

ორშაბათი ელეგანტური თემაა, რომელიც შესაფერისია ბიზნესისთვის ან ფრილანსერისთვის. მას გააჩნია დიდი რაოდენობით ფუნქციები და დამატებები და დანამატები.

17. ბიზნეს სამყარო

Business World არის შაბლონი, რომელიც დაკავშირებულია ბიზნეს თემებთან. ის აერთიანებს სტილს და ხარისხს. ბიზნეს სამყარო ასევე შეიძლება მორგებული იყოს პერსონალური, კორპორატიული ან ფოტოგრაფის ვებსაიტისთვის. მისი შესაძლებლობები საშუალებას გაძლევთ შექმნათ თითქმის ყველაფერი, რაც გსურთ.

18.

- სასიამოვნო თემაა, რომელიც ღია ფერებშია დამზადებული. იდეალურია მცირე და საშუალო ბიზნესისთვის, ასევე პერსონალური ვებსაიტისთვის. თქვენ შეგიძლიათ დააკონფიგურიროთ ყველაფერი, რაც გსურთ მასში. ბევრი ფუნქცია და დამატებაა, რაც ამ შაბლონს კიდევ უფრო უკეთესს და მიმზიდველს ხდის.

19.ონეტონი

Onetone არის ერთგვერდიანი შაბლონი WordPress-ისთვის, რომელიც შესაფერისია „მე“-ს ინტერნეტში წარდგენისთვის (აჩვენეთ თქვენი პორტფოლიო და/ან ისაუბრეთ საკუთარ თავზე).

20. ადექი

Arise არის მინიმალისტური ერთგვერდიანი WordPress შაბლონი, რომელიც შესაფერისია მცირე პროდუქტისთვის ან მცირე ბიზნესისთვის. მასში არაფერია ზედმეტი, მხოლოდ ყველაფერი, რაც ყველაზე მნიშვნელოვანია.

21. ვუტ

Woot არის მინიმალისტური შაბლონი, რომელიც დამზადებულია მუქ ფერებში, ონლაინ მაღაზიის გასაშვებად. ის მუშაობს WooCommerce-თან და ბევრ სხვა პოპულარულ დანამატთან.

22. დასავლეთი

West არის მარტივი თემა, რომელიც შესაფერისია სააგენტოს, მცირე ბიზნესის ან პორტფელის ვებსაიტისთვის. იგი მოიცავს დიდი რაოდენობით ფუნქციებს, პარამეტრებს და ელემენტების მოწყობას.

23. ანაგლიფ ლაიტი

Anaglyph Lite არის მარტივი და ელეგანტური შაბლონი, რომელიც შესაფერისია ბლოგინგისთვის და ონლაინ მაღაზიებისთვის. ის უკვე კონფიგურირებულია WooCommerce-ით და სხვა პოპულარული დანამატებით.

24.

მოგესალმებით, ჩემო ძვირფასო მკითხველებო. დღეს ჩვენ ვისაუბრებთ ტექნიკურ ასპექტებზე, რომლითაც შეგვიძლია გავზარდოთ ჩვენი საქონლის ან მომსახურების გაყიდვების კონვერტაცია. ერთ-ერთი მნიშვნელოვანი პუნქტია კარგად შემუშავებული სადესანტო გვერდი პროდუქტებით. ეგრეთ წოდებული სადესანტო გვერდი, რომლის შექმნაზეც მოგვიანებით ვისაუბრებთ და მივიღებთ მზა გვერდების კოდებს.

რა არის სადესანტო გვერდი? ეს არის გვერდი, რომელსაც ადამიანები ჩვეულებრივ ხვდებიან რეკლამაზე დაწკაპუნების შემდეგ. შექმნილია ერთი შეთავაზებისთვის: პროდუქტი, სერვისი ან გამოწერა. ეფექტური სადესანტო გვერდი წარმატებული ონლაინ მარკეტინგის ქვაკუთხედია. პროდუქტი შეიძლება იყოს საუკეთესო ბაზარზე, რეკლამები დახვეწილია, მაგრამ კარგი სადესანტო გვერდის გარეშე, ძალისხმევა არ იძლევა 100% შედეგს. ის ეუბნება ვიზიტორებს, რა არის შეთავაზებული და რატომ უნდა სურდეს მათ ეს. გადაუდებელობის გრძნობა ხელს უწყობს გადაწყვეტილების სწრაფ მიღებას და მომხმარებლის გადასვლას კლიენტის კატეგორიაში.

როგორ შევქმნათ სადესანტო გვერდი? არასწორია იმის დაჯერება, რომ პასუხი მდგომარეობს აკრეფის უნარში. კარგი სადესანტო გვერდი არის კოორდინირებული მუშაობის შედეგი მიზნებზე, ტექსტზე, დიზაინსა და კოდზე. სადესანტო გვერდები, რომელთა მაგალითები ქვემოთ იქნება, დაეხმარება დამწყებთათვის ისწავლონ განლაგებასთან მუშაობის საფუძვლები, მაგრამ არ ჩაანაცვლებენ კონვერტაციის ტექსტებს და სამიზნე აუდიტორიის გაგებას. თქვენ ასევე შეგიძლიათ შექმნათ ისინი სხვადასხვა Landing Page დიზაინერების გამოყენებით.

ასე რომ, სანამ შექმნით სადესანტო გვერდს, ჰკითხეთ საკუთარ თავს:

რას გააკეთებს ადამიანი სადესანტო გვერდზე დაჯდომის შემდეგ? იყიდის რამეს? შეავსებ ფორმას? გამოიწერეთ ბიულეტენი? სანამ თვალყურს ადევნებთ თქვენს კონვერტაციის მაჩვენებელს, დაისახეთ მკაფიო მიზნები.
ვინ არიან ჩემი კონკურენტები? სინამდვილეში, ეს არის სამი კითხვა: ვინ, რამდენად წარმატებულია ისინი და როგორ შეიძლება მათი მიღწევების გამოყენება? იმიტაცია მაამებლობის ყველაზე გულწრფელი ფორმაა. თუ თქვენი კონკურენტები აკეთებენ რაღაცას, რაც მუშაობს, გაიმეორეთ იგი თქვენს საიტზე.
ვინ არის ჩემი აუდიტორია? რაც უფრო კარგად გესმით თქვენი ნიშა და სამიზნე აუდიტორია, მით მეტია შანსი იმისა, რომ თქვენი ძალისხმევა ანაზღაურდება.

თქვენ უნდა შესთავაზოთ ყველა საჭირო ინფორმაცია, მაგრამ არა იმდენად, რომ გადატვირთოთ და განდევნოთ თქვენი პოტენციური კლიენტი.

სადესანტო გვერდის შექმნის მაგალითები + დუმებისთვის კოდირება

სანამ დავიწყებთ, მოდით გადავხედოთ HTML და CSS-ს. იმის გაგება, თუ როგორ მუშაობენ ისინი, დაგეხმარებათ შექმნათ სადესანტო.

HTML არის ბრაუზერის მარკირების ენა ვებსაიტის ვიზუალიზაციისთვის. დაწერილია კუთხური ფრჩხილებში ჩასმული ტეგების გამოყენებით, რომლებიც განსაზღვრავენ შინაარსს.

ტეგი იხსნება () და იხურება () შევსების გარშემო:

შინაარსი

დაზუსტებისთვის, ატრიბუტები ემატება სახელის შემდეგ:

შინაარსი

CSS - განსაზღვრავს როგორ მოვაწყოთ HTML ელემენტები. შედგება სელექტორებისგან, თვისებებისა და მნიშვნელობებისაგან:

#სელექტორი (თვისება: ღირებულება;)

სელექტორი ემთხვევა კონკრეტული ტეგის სახელს html-ში. მნიშვნელობების შეცვლა და თვისებების დამატება არეგულირებს მის გარეგნობას. თქვენ შეგიძლიათ შექმნათ გვერდები, რომლებიც ერთმანეთისგან განსხვავებულად გამოიყურებიან, იმავე HTML-ში სხვადასხვა CSS სტილის გამოყენებით.

5 საწყისი ნაბიჯი

სწრაფი განლაგებისთვის, ჩვენ გამოვიყენებთ მინიმალური დიზაინის მქონე შაბლონს, რომელიც დაფუძნებულია bootstrap-ზე. ეს არის სისტემა თავისი სელექტორებით, რომელიც გამოიყენება მთელ მსოფლიოში განლაგების დასაჩქარებლად.

მოკრძალებულად გამოიყურება.

ამ თევზიდან რამდენიმე ეტაპად იქმნება ვებ-გვერდი ყველა გემოვნებისთვის.

დირექტორია სტრუქტურა საქაღალდეში:

index.html: ეს არის მთავარი ფაილი, რომელსაც ჩვენ ვასწორებთ.
/აქტივები: დამხმარე ფაილები განთავსებულია აქ:
/css: დირექტორია შეიცავს ჩატვირთვის და ხატის სტილებს. ფაილი, რომელსაც ჩვენ შევასწორებთ არის main.css.
/img: საქაღალდე საიტის სურათებისთვის.
/ფონტები: ხატის შრიფტები.
/js: bootstrap javascript ფაილები.

ნაბიჯი 1: სათაურის გამოყენება

სათაური და ქვესათაურები არის ძირითადი ადგილები, რომლებიც ხელს უწყობენ შეთავაზების ღირებულების მკაფიოდ გადმოცემას.

მოდით შევცვალოთ საიტის სათაური და სახელი. აქ თქვენ არ გჭირდებათ აკრეფის უნარი - თქვენ წერთ საკუთარ ტექსტს ეკრანზე ყვითლად გამოკვეთილ ადგილებში.

ნაბიჯი 2. ბრევიტი არის მოქცევის და. შეღავათებისა და განაკვეთების დამატება

დაგჭირდებათ 4 განყოფილება:

უპირატესობები;
განაკვეთები;
მიმოხილვები;
მოქმედებისკენ მოწოდება.

მოდით შევქმნათ ძირითადი შინაარსის განყოფილება "მთავარი", რომელშიც ჩავსვამთ საჭირო სექციებს:

…..
…..
…..
…..

წერტილების ნაცვლად შევსება.

უპირატესობების განყოფილებისთვის დაგჭირდებათ ეს კოდი:

უპირატესობები
Სწრაფი

სანდო

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

შინაარსი სიცხადისთვის:

ჯერ კიდევ დაუდევარი ჩანს, მაგრამ პანიკის საფუძველი არ არის, გავაგრძელოთ.

ჩვენ ვწერთ ფასებს. შინაარსი იცვლება ისევე, როგორც პირველ ეტაპზე. ზოგადი აღწერა "ტარიფების" კლასით და სამი ტარიფით.

სატარიფო გეგმები

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 veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ტარიფი No1
$10

თვეში / ადამიანზე

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

შეკვეთა
ტარიფი No2
$20

თვეში / ადამიანზე

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

შეკვეთა
ტარიფი No3
$30

თვეში / ადამიანზე

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

შეკვეთა

ასე გამოიყურება.

ჯერჯერობით, ჩვენ არ გვაინტერესებს მომავალი სადესანტო გვერდის გარეგნობა - ქვემოთ განვიხილავთ სტილის შეცვლის მაგალითებს.

ნაბიჯი 3: ენდეთ სიგნალებს და მოქმედებისკენ მოწოდებას

მიზნობრივი სიგნალების გამოყენება ვიზიტორებს მიანიშნებს, რომ ბრენდი სანდოა. სიგნალებს შეიძლება მრავალი ფორმა ჰქონდეს, მაგრამ კლასიკური არის მომხმარებელთა გამოხმაურება.

მომხმარებელთა მიმოხილვები

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

მოდით დავაყენოთ მოწოდება მოქმედებისკენ.

ისარგებლეთ დღეს შეკვეთით

შეუკვეთე ახლავე!

მიმოხილვები დაეხმარება პოტენციურ მომხმარებლებს გადაწყვიტონ პროდუქტის შეძენა. სიცხადისთვის, ჩვენ გვჭირდება ავატარები, ასე რომ, ჩვენ დაუყოვნებლივ მოვათავსებთ მათ ადგილზე - თითოეული ციტატის ქვეშ.

Კლიენტის სახელი.

ნაბიჯი 4: ინტეგრაცია Grid და Mobile Friendly-თან

ქსელის განსახორციელებლად, ჩვენ გვჭირდება Bootstrap კონტეინერები. მნიშვნელოვანია გვახსოვდეს სწორი სვეტის სეგმენტების საერთო რაოდენობა - 12. კლასი განსაზღვრავს შინაარსის ჩვენების სიგანეს. ამ წინასწარ დამზადებულ ქსელში კარგია ის, რომ კონტეინერები შექმნილია რეაგირების გათვალისწინებით და დაუყოვნებლივ გამოსაყენებელია მობილურ მოწყობილობებზე. დეტალური აღწერა ოფიციალურ ვებგვერდზე. ბადე ასე გამოიყურება.

"მთავარის" შიგთავსი შეფუთული იქნება კონტეინერში. ამისათვის ზევით წერია შემდეგი:

… .

თუ თქვენ გჭირდებათ ბლოკი, რომ მოერგოს ეკრანის მთელ სიგანეს, მაშინ კონტეინერი ჩასმულია შიგნით. აქ ეს იქნება ჯუმბოტრონი და მოქმედებისკენ მოწოდება.

ჩვენ შევახვევთ ყველა ელემენტს, რომელიც მოითხოვს ერთმანეთზე განთავსებას ხაზის გამყოფებით.

ახლა ჩვენ შეგვიძლია დავარეგულიროთ სვეტების სიგანე, ფოკუსირება ჩატვირთვის ბადეზე. შეფუთვის შემდეგ, შიგთავსმა შეწყვიტა ეკრანის კიდეებზე მიწებება და გაჩნდა სუფთა ჩაღრმავები.

ჩვენ ვაყენებთ ფასებს ზედიზედ სვეტის კლასის col-lg-4 გამოყენებით. მწკრივის ხაზების შიგნით აღარ არის საჭირო შეფუთვისთვის ცალკეული დისკების დაწერა, ისინი შეიძლება გაერთიანდეს არსებულებთან, რომლებიც გამოყოფილია ინტერვალით.

ანალოგიით, ჩვენ დავაყენეთ სვეტები მიმოხილვებისა და უპირატესობების განყოფილებისთვის. თუ ელემენტის გვერდზე გადატანა გჭირდებათ, გამოიყენეთ ოფსეტური სვეტის კლასი col-lg-offset-2. ბოლო რიცხვი განსაზღვრავს რამდენი ბაზის სვეტით მოხდება ცვლა.

ნაბიჯი 5. შრიფტები და ხატები

ჩვენ ვახორციელებთ Google Font-ის სათაურის შრიფტებს. არჩევისას გახსენით იმპორტის ჩანართი და დააკოპირეთ მისგან მონაცემები main.css ფაილში. ჩვენ ასევე ვამატებთ სათაურის სელექტორებს ფაილს, რომლისთვისაც გამოიყენება ახალი შრიფტი.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* სათაურებისთვის შრიფტის იმპორტი */
.navbar-ბრენდი,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont გამომავალი */
}

სიცხადისთვის, უპირატესობებს აღწერს კლასი თვითახსნადი სახელწოდებით text-center და FontAwesome ხატებით bootstrap ნაკრებიდან.

ამ ეტაპზე მომზადება მთლიანად დასრულებულია.

სადესანტო გვერდი: კოდების მაგალითები შეთავაზებით, პარალაქსით და მრიცხველით

ჩვენ ვიყენებთ სამ ყველაზე პოპულარულ ტიპს: წინადადებით, ფორმით და უკუმთვლელი მრიცხველით. განლაგების პროგრესირებასთან ერთად, შაბლონს დაემატება ეფექტები.

მაგალითი 1: წინადადებით

მოდით დავაყენოთ ძირითადი ნაწილისა და ბალიშის ფონი ისე, რომ პირველი ეკრანი დაიფაროს.

ჯამბოტრონი (
ფონი: #f5f5f5 url(../img/fon.jpg) ზედა ცენტრი არ განმეორდეს;
მაქსიმალური სიგანე: 100%;
padding-top: 250px;
padding-bottom: 200px;
ტექსტის გასწორება: ცენტრი;
}

მოდით შევცვალოთ ჯუმბოტრონის სათაურის ზომა h2-დან h1-მდე. შემდეგი, ჩვენ ვწერთ სტილებს იმ ელემენტებისთვის, რომლებიც უნდა შეიცვალოს.

დავიწყოთ ხატებით.

სარგებელი მე (
ფერი: #cac4c4;
}

ჰეშის ნიშნის შემდეგ მითითებულია ფერი. თქვენ შეგიძლიათ აირჩიოთ თქვენი საკუთარი ვარიანტი html ფერის ცხრილების ან გამოსახულების რედაქტორის გამოყენებით.

შეწევა განყოფილების სათაურებისთვის

სექცია h2 (
padding-top: 30px;
ზღვარი-ქვედა: 25 პიქსელი;
}

ჩვენ ვაწესრიგებთ ტარიფების იერსახეს. მოხერხებულობისთვის, ჩვენ ვქმნით საკუთარ კლასებს იმ ელემენტებისთვის, რომლებიც გვინდა კონკრეტულად გამოვყოთ.

ტარიფი No1
$10

თვეში / ადამიანზე

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

შეკვეთა

და ბევრი CSS. რა ადგილებზეა პასუხისმგებელი სექციები, მითითებულია კომენტარებში - /* ვარსკვლავით ხაზებს შორის */

/* =========ტარიფის სტილები======== */
/* ტარიფის ზოგადი ხედი */
.pricing_item(
ფონი: #f2f2f2;
პოზიცია: ნათესავი;
ჩვენება: -webkit-flex;
ჩვენება: flex;

flex-direction: სვეტი;

align-items: მონაკვეთი;
ტექსტის გასწორება: ცენტრი;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
ზღვარი: 1em;
ფერი: #262b38;
კურსორი: ნაგულისხმევი;
გადინება: დამალული;

}
/* შეცვალეთ ფონი, როდესაც დააჭირეთ */
.pricing_item:hover (
ფერი: #444;
ფონი: #daebef;
}
/* ინდივიდუალური ფასის ფონი თითოეულ ტარიფში */
.pricing_item:first-child .price (
ფონი: #9ba9b5;
}
.pricing_item:nth-child(2).price (
ფონი: #1f6098;
}
/* ფართო ეკრანებზე შუა ტარიფის სვეტი არის ჩაღრმავებული და მონიშნულია */
@media ეკრანი და (წთ. სიგანე: 66.250 ემ) (
.pricing_item(
ზღვარი: 1.5em 0;
}
.გამორჩეული(
z-ინდექსი: 10;
ზღვარი: 0;
შრიფტის ზომა: 1.15em;
}
}
/* სათაური */
.pricing_item h3 (
შრიფტის ზომა: 2em;
ზღვარი: 0.5em 0 0;
ფერი: #1d211f;
}
/* ფასის ტეგის ფონი */
.ფასი(
შრიფტის ზომა: 2em;
შრიფტის წონა: თამამი;
ფერი: #fff;
პოზიცია: ნათესავი;
z-ინდექსი: 100;
ხაზის სიმაღლე: 95 პიქსელი;
სიგანე: 100px;
სიმაღლე: 100px;
ზღვარი: 1.15em auto 1em;
საზღვარი-რადიუსი: 50%;
ფონი: #77a5cc;
-webkit-transition: ფერი 0.3s, ფონი 0.3s;
გარდამავალი: ფერი 0.3s, ფონი 0.3s;
}
/* ვალუტა */
.ვალუტა(
შრიფტის ზომა: 0.5em;
ვერტიკალური გასწორება: სუპერ;
}
/* წინადადების განმარტება */
.სასჯელი (
შრიფტის წონა: თამამი;
ზღვარი: 0 0 1em 0;
padding: 0 0 0.5em;
ფერი: #2a6496;
}
/* სია */
.pricing_item ul (
შრიფტის ზომა: 0.95em;
ზღვარი: 0;
padding: 1.5em 0.5em 2.5em;
ტექსტის გასწორება: მარცხნივ;
}
/* ნივთების სია */
.pricing_item li (
padding: 0.15em 0;
}
/* შეკვეთის შეკვეთის ღილაკი */
ღილაკი .pricing_item(
შრიფტის წონა: თამამი;
margin-top: auto;
padding: 1em 2em;
ფერი: #fff;
საზღვარი-რადიუსი: 5px;
ფონი: #428bca;
-webkit-transition: background-color 0.3s;
გარდამავალი: ფონის ფერი 0.3s;
}
/* ფერის შეცვლა ღილაკზე დაჭერისას */
ღილაკი .pricing_item:hover,
ღილაკი .pricing_item:focus (
ფონის ფერი: #285e8e;
}
/* ტარიფის ფონი*/
.bg-2 (
ფონი: #dddddd;
}

შედეგი

მომხმარებელთა მიმოხილვები. მოდით მივცეთ მათ სისუფთავე და მიუთითოთ მათი ადგილმდებარეობა.

/* ========= ჩვენების სტილი======== */
ჩვენებები (
padding: 4em 0;
ტექსტის გასწორება: ცენტრი;
}
ჩვენებები .avatar img (
საზღვარი-რადიუსი: 50%;
float: მარცხენა;
ჩვენება: inline;
margin-right: 1em;
სიგანე: 65px;
სიმაღლე: 65px;
ზღვარი-ქვედა: 30 პიქსელი;
}
.ჩვენებები .avatar p (
ტექსტის გასწორება: მარცხნივ;
padding-top: 1em;
ფერი: #5d5d5d;
შრიფტის წონა: 900;
}

რჩება მხოლოდ ბოლო მოწოდების და ქვედა კოლონტიტულის გაფორმება.

/* მოქმედება */
.მოქმედება(
ფონი: #476177;
მინ-სიმაღლე: 180px;
სიგანე: 100%;
padding: 4em 0;
ტექსტის გასწორება: ცენტრი;
}
.მოქმედება h2 (
ფერი: #fff;
შრიფტის წონა: 300;

}
.მოქმედება p(
ფერი: #fff;
ტექსტი-ჩრდილი: 0 1px 2px rgba(0, 0, 0, .2);
შრიფტის ზომა: 1.2em;
}
.მოქმედება .კონტეინერი (
margin-top: 3em;
}
/* ქვედა კოლონტიტული */
ქვედა კოლონტიტული (
ფონი: #333333;
padding: 1em 0;
ტექსტის გასწორება: მარჯვნივ;
}
ქვედა კოლონტიტული p (
ფერი: #fff;
ხაზის სიმაღლე: 1;
ტექსტი-ტრანსფორმაცია: დიდი;
შრიფტის ზომა: 0.7em;
margin-top: 0.5em;
}

ქვედა კოლონტიტულის ღილაკს ენიჭება ჩაშენებული ჩატვირთვის კლასი btn-default.

შაბლონის გაცოცხლება. ჩვენ შემოგთავაზებთ გლუვ გადახვევას და ღილაკებს სექციებისთვის, ასევე ტექსტის ანიმაციას პირველ ეკრანზე.

სამუშაოზე გადასვლისთვის, ჩვენ შევცვლით სექციის ზოგიერთ კლასს ID-ით - შეღავათებისა და ტარიფებისთვის. და ჩვენ დავამატებთ ID-ის ბმულებს ღილაკებზე. სკრინშოტი - რა არის მიმაგრებული რაზე, მონიშნულია ყვითელი მარკერით.

ჩვენ დავაყენეთ ღილაკების შეწევა - jbutton. დაჭერისას გადახვევა მუშაობს, მაგრამ ძალიან მკვეთრად.

გლუვი გადასვლები იქმნება Javascript-ის ან jquery-ის გამოყენებით. ეს უკანასკნელი ნაგულისხმევად დაკავშირებულია Bootstrap შაბლონებთან.

გადახვევა ახლა გლუვია.

ტექსტში ანიმაციის დამატება Animate.css-ის გამოყენებით (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). ეს არის მზა ღია კოდი, მისი გამოყენება შესაძლებელია ნებისმიერ ვებსაიტზე. მოათავსეთ ფაილი Github-დან css საქაღალდეში და მიუთითეთ გზა.

ჩვენ ვირჩევთ ეფექტებს აქ: https://daneden.github.io/animate.css/. ჩვენ არჩეული გვაქვს fadeInDown. კოდში ასე წერია:

ახლა, როდესაც გვერდი იტვირთება ან განახლდება, ტექსტი ანიმაციური იქნება. მზადაა.

მაგალითი 2: ფორმისა და პარალაქსის ეფექტით

რაც უფრო მეტი ფორმის ველი იქნება წარმოდგენილი ვიზიტორზე, მით ნაკლებია მისი შევსების ალბათობა. მოითხოვეთ მხოლოდ მინიმალური საჭირო ინფორმაცია.

იგი აწყობილია ანალოგიით. ჩვენ შევცვლით ფონს და ფერს. და, რა თქმა უნდა, ჩვენ დავამატებთ ფორმას.

დავიწყოთ პარალაქსით.

მოდით შევცვალოთ ჯუმბოტრონის ფონი გამჭვირვალეზე:

ფონი: გამჭვირვალე;

სათავეში ჩავსვამთ სკრიპტს:

$(ფანჯარა).გადახვევა(ფუნქცია(ე)(
პარალაქსი();
});
პარალაქსის ფუნქცია ())(
var scrolled = $(ფანჯარა).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

სხეულში პირველი ხაზი არის კონტეინერი პარალაქსისთვის:

და CSS-ში მისი ქცევა არის:

ბგპარალაქსი (
ფონი: url(/../img/fon.jpg) გამეორება;
პოზიცია: ფიქსირებული;
სიგანე: 100%;
სიმაღლე: 300%;
ზედა: 0;
მარცხენა: 0;
z-ინდექსი: -1;
}

პარალაქსი მზად არის. მაგრამ კოდში ცვლილებების შეტანა და ახალი ფონი მოითხოვს ფერის სქემის გადანაწილებას.

მენიუს ბნელის გაკეთება:

ნავიგატორი - ნაგულისხმევი (
ფონის ფერი: #333;
საზღვარი-ფერი: #444;
ფერი: მუქი ნაცრისფერი;
საზღვარი-რადიუსი: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
ფერი: მუქი ნაცრისფერი;
ფონის ფერი: rgba(0, 0, 0, 0.5);
}

ჩვენ ვცვლით წინადადებას jumbotron-ში ახლით - ფორმის კოდით:

Landing Page აქცევს ვიზიტორებს მომხმარებლებად
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

და ჩვენ ვიწერთ გარეგნობას

/* ფორმა */
.headform-list(
list-style-type: none;
ხაზის სიმაღლე: 26px;
შრიფტის წონა: 400;
padding: 0px;
ზღვარი-ქვედა: 40 პიქსელი;
}
.თავის ფორმა(
გადინება: დამალული;
პოზიცია: ნათესავი;
ფონის ფერი: rgba(0,0,0,.4);
padding: 35px 40px;
საზღვარი-რადიუსი: 8px;
}
შეყვანა, ღილაკი, არჩევა, ტექსტური არე (
სიგანე: 100%;
ზღვარი-ქვედა: 10 პიქსელი;
}
.headform-list li .fa (
პოზიცია: აბსოლუტური;
ზედა: 0px;
მარცხენა: 0px;
სიგანე: 42px;
შრიფტის ზომა: 24px;
ტექსტის გასწორება: ცენტრი;
}
.headform-list li (
პოზიცია: ნათესავი;
მინ-სიმაღლე: 38px;
padding-მარცხნივ: 62px;
ზღვარი-ქვედა: 20 პიქსელი;
}
ჯუმბოტრონი პ (
ფერი: #fff;
შრიფტის ზომა: 16px;
შრიფტის სტილი: დახრილი;
}

ჯუმბოტრონის ტექსტიც აქ დასრულდა, რადგან ცვლილებებს ითხოვდა.

ჩვენ ვცვლით ტარიფებს.

/* ტარიფის ზოგადი ხედი */
.pricing_item(
ფონის ფერი: rgba(0,0,0,.4); /* ხაზი შეიცვალა */
საზღვარი-რადიუსი: 4px; /* ხაზი შეიცვალა */
პოზიცია: ნათესავი;
ჩვენება: -webkit-flex;
ჩვენება: flex;
-webkit-flex-direction: სვეტი;
flex-direction: სვეტი;
-webkit-align-items: მონაკვეთი;
align-items: მონაკვეთი;
ტექსტის გასწორება: ცენტრი;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
ზღვარი: 1em;
ფერი: #f2f2f2; /* ხაზი შეიცვალა */
კურსორი: ნაგულისხმევი;
გადინება: დამალული;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* შეცვალეთ ფონი, როდესაც დააჭირეთ */
.pricing_item:hover (
ფერი: #444;
ფონი: #ddd; /* ხაზი შეიცვალა */
}

ახლა ისინი ასე გამოიყურება - გამჭვირვალე ფონი და მომრგვალებული კუთხეები.

შაბლონი მზად არის.

მაგალითი 3: უკუმთვლელი მრიცხველით

ჩვენ კვლავ ვცვლით ჯუმბოტრონის შევსებას და თარგს ვაფერადებთ ახალ ფონს, წინა შაბლონის მსგავსად. დააკავშირეთ მრიცხველის სკრიპტი:

HTML

დრო არ ელოდება
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 veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum fazril delenit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

var myCountdown1 = ახალი Countdown((
დრო: 86400 * 3, // 86400 წამი = 1 დღე
სიგანე: 300
სიმაღლე: 60
, rangeHi: "day"
, სტილი: "Flip" //

მზა სადესანტო გვერდების html შაბლონები. სადესანტო გვერდის შაბლონები

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

თქვენი კომენტარი (სურვილისამებრ):