სადესანტო გვერდის შაბლონი საყელო ფორმებით. სადესანტო გვერდის შაბლონები. სადესანტო გვერდი: კოდების მაგალითები წინადადებით, პარალაქსით და ექიმით
ცალმხრივი საიტი მოსახერხებელია ბიზნესმენებისთვის, რადგან მისი აშენება შესაძლებელია ერთ დღეში. იაკშჩო მიიღეთ შაბლონი ცალმხრივი ვებსაიტისთვისროგორც ხედავთ, თქვენ შეგიძლიათ შექმნათ ვებსაიტი თქვენი კომპანიისთვის მინიმალური თანხით, რადგან თქვენ მოგიწევთ მხოლოდ ჰოსტინგის გადახდა. კლიენტისთვის ცალმხრივი გვერდი მოხერხებულია, რადგან ყველა ინფორმაცია წარმოდგენილია მაქსიმალურად მოწესრიგებულად და სტრუქტურირებულად, არაფრის უხერხულობის გარეშე. როგორც კლიენტებისთვის სარგებელი, ცალმხრივი საიტები ხშირად აჩვენებენ უფრო მაღალ კონვერტაციის მაჩვენებელს, ვიდრე სხვა ტიპის საიტები.
როგორ ავირჩიოთ ცალმხრივი შაბლონი?
- გარეგანი სახე. დიზაინი შექმნილია კომპანიის დახვეწილ სტილთან მუშაობისთვის. ინტერფეისში არასაჭირო ფერების საჭიროება არ არის. თუმცა, ზოგიერთ პასტელ ტონს დიდი ხანია სურდათ ხელოსნები, ამიტომ სიკაშკაშე და კრეატიულობა მცირდება.
- „ვაგა“. ანიმაციურმა დიზაინმა, მოძრავმა ბანერებმა, „მნიშვნელოვანმა“ ელემენტებმა, სლაიდერებმა შეიძლება გახადონ საიტი იმდენად მიმზიდველი, რომ ის უფრო მაღალი იყოს, ვიდრე კონკურენტები.
- ბლოკების რაოდენობა და მათი მორგების შესაძლებლობა. შაბლონის არჩევამდე, დარწმუნდით, რომ დაადგინეთ რომელი ბლოკებია საჭირო მინიმუმამდე, რათა არ გადააჭარბოთ გვერდს. შაბლონის მცდელობისას ახსენით, როგორ შეგიძლიათ მოაწყოთ ბლოკები და შეცვალოთ ისინი ადგილებზე.
- ბრაუზერის ჯვარედინი თავსებადობა და ხილვადობა ადაპტური დიზაინისაშუალებას გაძლევთ მნიშვნელოვნად გააფართოვოთ პოტენციური კლიენტების აუდიტორია. ასე რომ, წაართვით მათ ყველაფერი დანარჩენი ადაპტური შაბლონებიცალმხრივი.
წარმოთქმადი ცალმხრივი შაბლონები უფასოდ
როგორ აპირებდით თქვენი კომპანიისთვის ფულის გამომუშავებას? სადესანტო გვერდი, ჩამოტვირთეთ შაბლონიხელმისაწვდომია ჩვენს ვებგვერდზე. ჩვენ ყურადღებით ვამოწმებთ ყველა შაბლონს ვირუსებზე, ასე რომ თქვენ არ უნდა ინერვიულოთ ინფიცირებულ ფაილზე. ყველა სადესანტო გვერდის შაბლონებიჩვენი კატალოზი მტანჯველია მიმდინარე დიზაინი, თავად ვიკონანია სხვადასხვა სტილის. ბლოკების რაოდენობის კორექტირების, ფერის სქემების და სხვა ფუნქციების შეცვლის შესაძლებლობა დაგეხმარებათ შექმნათ უნიკალური, ორიგინალური ვებსაიტი მარტივი შაბლონის საფუძველზე.
გთხოვთ, ჩამოტვირთოთ შაბლონები ცალმხრივი ვებსაიტებისთვის
მოზიდვის მსურველთა მთავარი პრობლემა სადესანტო გვერდის შაბლონი უფასოდ, ვირუსების დიდი რაოდენობაა და უფასო შაბლონები. ამიტომ ძალიან მნიშვნელოვანია იცოდეთ უსაფრთხო და სანდო საიტი. გთხოვთ დაგვიკავშირდეთ, რათა გულმოდგინედ ვიყოთ უსაფრთხოებაზე. გარდა ამისა, ჩვენ გაგახარებთ ყველაზე ფართო ასორტიმენტით HTML შაბლონებიცალმხრივი, ჩამოტვირთვაროგორც შეგიძლია ახლავე!
წაიკითხეთ მეტი ტექსტი...მე ვფრინავ, ჩემო ძვირფასო მკითხველო. დღეს ჩვენ ვისაუბრებთ ტექნიკური პუნქტები, დამატებითი დახმარებისთვის შეგვიძლია გავზარდოთ გაყიდვების კონვერტაციამათი საქონელი და მომსახურება. ერთ-ერთი მნიშვნელოვანი პუნქტი ნათლად არის გააზრებული სადესანტო მხარესაქონლისგან. ასე ჰქვია სადესანტო გვერდის შექმნის შესახებ, რაზეც ვისაუბრებთ და გვერდების მზა კოდები.
რა არის სადესანტო გვერდი? მეორეს მხრივ, ადამიანები ჩვეულებრივ ხარჯავენ ფულს მას შემდეგ, რაც ზეწოლას განიცდიან სისულელეში. იგი იქმნება ერთი წინადადებით: საქონელი, მომსახურება და წინასწარ გადახდა. ეფექტური სადესანტო გვერდი წარმატებული ონლაინ მარკეტინგის გარე ქვაა. პროდუქტი შეიძლება იყოს საუკეთესო ბაზარზე, შეიძლება იყოს სრულყოფილებამდე მიყვანა, მაგრამ სათანადო სადესანტო გვერდის გარეშე შეიძლება 100%-იანი შედეგი არ იყოს. ვონი უხსნის მომვლელებს, თუ რა ხდება და რისი აღმოფხვრა შეიძლება მათ სურთ. სიახლეებიდან გამომდინარე, გადაწყვეტილება მომხმარებლისთვის კლიენტზე გადაცემის შესახებ სწრაფად მიიღება.
როგორ შევქმნათ სადესანტო გვერდი? არასწორია იმის გათვალისწინება, რომ დადასტურება არის საჭირო დროს. კარგი სადესანტო გვერდი არის მიზნებზე, ტექსტზე, დიზაინსა და კოდზე ფრთხილად მუშაობის შედეგი. სადესანტო გვერდი, რომლის მაგალითები უფრო დაბალი იქნება, დაეხმარება დამწყებთათვის დაეუფლონ განლაგების სამუშაოს საფუძვლებს, მაგრამ არ შეცვალოს კონვერტაციის ტექსტები და სამიზნე აუდიტორიის გაგება. თქვენ ასევე შეგიძლიათ შექმნათ ისინი სხვადასხვა დახმარებით სადესანტო გვერდის დიზაინერები.
ასე რომ, სანამ ცხრილებს გადაატრიალებთ, ჰკითხეთ საკუთარ თავს:
- რისი შოვნა შეუძლიათ ადამიანებს სადესანტო გვერდზე დაჯდომის შემდეგ? Რა გემართება? გჭირდებათ ფორმის შევსება? რატომ გამოიწერეთ ბიულეტენი? პირველი ნაბიჯი არის კონვერტაციის კურსის განსაზღვრა მკაფიო მიზნების მისაღწევად.
- ვინ არიან ჩემი კონკურენტები? ნამდვილად არსებობს სამი საკვები: ვინ, რამდენად წარმატებულები არიან ისინი და როგორ შეიძლება მათი მიღწევების მიღწევა? იმიტაცია ტყის ყველაზე დიდი ფორმაა. თუ კონკურენტები შეწყვეტენ იმას, რასაც აკეთებენ, გაიმეორეთ ეს მათ ვებსაიტზე.
- ვინ არის ჩემი აუდიტორია? რაც უფრო კარგად გესმით თქვენი ნიშა და სამიზნე აუდიტორია, მით მეტია შანსი იმისა, რომ თქვენი ძალისხმევა ანაზღაურდება.
აუცილებელია ყველა საჭირო ინფორმაციის მიწოდება, მაგრამ არა პოტენციური კლიენტის დახრჩობა ან განდევნა.
გამოიყენეთ სადესანტო გვერდი + კოდირება დუმებისთვის
სანამ მარჯვნივ გადავალთ, მოდით გადავხედოთ HTML და CSS-ს. გთხოვთ, გაიგოთ, როგორ მუშაობს სუნი, დაგეხმარებით სადესანტოში.
HTML- ბრაუზერის ახალი განლაგება ვებსაიტის ვიზუალიზაციისთვის. დარეგისტრირდით დამატებითი ტეგებისთვის, განლაგებისთვის კანჭის ტაძრები, როგორ გულისხმობენ ადგილს?
თეგი იხსნება (<>) და დახურეთ () შევსების მახლობლად:
<тег>სამაგიეროდтег>
წერტილი-პუნქტიანი კორექტირებისთვის, სახელის შემდეგ ემატება შემდეგი ატრიბუტები:
<тег атрибут="значение">სამაგიეროდтег>
CSS ნიშნავს როგორ განთავსდეს იგი HTML ელემენტები. ამომრჩეველთა ჯამი, ავტორიტეტები და ღირებულებები:
#სელექტორი (ძალა: ღირებულება;)
სელექტორი მიუთითებს კონკრეტული ტეგის სახელს HTML-ში. მოცემული ავტორიტეტების მნიშვნელობის შეცვლით რეგულირდება გარეგანი სახე. თქვენ შეგიძლიათ შექმნათ განსხვავებული გვერდები, სხვადასხვა CSS სტილი და თუნდაც HTML.
5 კობო
შვედური განლაგებისთვის ჩვენ გამოვიყენებთ თარგს მინიმალური დიზაინით, რომელიც დაფუძნებულია bootstrap-ზე. ამ სისტემას აქვს ძლიერი სელექტორები, რომლებიც გამოიყენება მთელ მსოფლიოში განლაგების დასაჩქარებლად.
მოკრძალებულად გამოიყურება.
ამ თევზისგან რამდენიმე ეტაპად იქმნება შესანიშნავი გემოვნების ადგილი.
მამის დირექტორია სტრუქტურა:
- index.html: ეს არის მთავარი ფაილი, რომლის რედაქტირებაც შესაძლებელია.
- /აქტივები: დამატებითი ფაილები განთავსებულია აქ:
- /css: დირექტორია, რომელიც შეიცავს ჩატვირთვის სტილებს და ხატებს. ფაილი, რომლის რედაქტირება შესაძლებელია არის main.css.
- /img: საქაღალდე ვებსაიტის სურათებისთვის.
- /ფონტები: ხატის შრიფტები.
- /js: bootstrap javascript ფაილები
Krok 1: Vikoristannya ტიტული
სათაური და ქვესათაურები არის ძირითადი პუნქტები, რომლებიც გვეხმარება მეტყველების მნიშვნელობის მკაფიო ფორმით გადმოცემაში.
შეცვალეთ საიტის სათაური და სახელი. აქ არ არის საჭირო ჭკვიანური აკრეფა - თქვენ წერთ ტექსტს იმ ადგილებში, რომლებსაც ეკრანზე ხედავთ.
Krok 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. U 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 ლორემი ipsum
ტარიფი No2
$20
თვეში / ადამიანზე
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 ლორემი ipsum
ტარიფი No3
$30
თვეში / ადამიანზე
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 ლორემი ipsum
ეს ასე გამოიყურება.
მიუხედავად იმისა, რომ ჩვენ არ გვაწუხებს მომავალი სადესანტო გვერდის ამჟამინდელი სახე, ქვემოთ განვიხილავთ სტილის შეცვლის მაგალითებს.
Croc 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."
მოდით დავაყენოთ "დააწკაპუნეთ თარიღისთვის".
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Usi wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
ისარგებლეთ, თუ დღეს გააფორმებთ კონტრაქტს
ვიდეოები დაეხმარება პოტენციურ მომხმარებლებს შეაქოონ თავიანთი გადაწყვეტილება პროდუქტის შეძენის შესახებ. საჭირო ავატარების სიზუსტისთვის მათ ადგილზე დავწერთ - კანის ციტატის ქვეშ.
კლიენტის სახელი.
Croc 4: ინტეგრაცია ქსელთან და მობილური მეგობრული
ქსელის განსახორციელებლად, ჩვენ გვჭირდება Bootstrap კონტეინერები. მნიშვნელოვანია გვახსოვდეს სწორი სვეტის სეგმენტების საერთო რაოდენობა – 12. კლასი განსაზღვრავს შინაარსის ჩვენების სიგანეს. ამ მზა ბადის უპირატესობა ის არის, რომ კონტეინერები დაზღვეულია ადაპტაციის უზრუნველსაყოფად და ადვილად გამოსაყენებელია. მობილური მოწყობილობები. ანგარიშის აღწერაოფიციალურ ვებგვერდზე. ბადე ასე გამოიყურება.
"მთავარის" ნაცვლად მას ახვევენ კონტეინერში. რისთვისაც ზემოთ წერია შემდეგი:
თუ საჭიროა ბლოკმა ეკრანის მთელ სიგანეზე დაიფაროს, მაშინ კონტეინერი შუაშია ჩასმული. აქ იქნება ჯუმბოტრონი და მოქმედებისკენ მოწოდება.
ყველა ელემენტი, რომელიც მოითხოვს განთავსებას ერთმანეთზე მაღლა, შეფუთულია მწკრივის გამყოფებში.
სვეტები ახლა შეიძლება დარეგულირდეს სიგანეში, ორიენტირებული ჩატვირთვის ბადეზე. მას შემდეგ, რაც დამწვარი შიგთავსი ეკრა ეკრანის კიდეებს, გაჩნდა სუფთა ღიობები.
ფასები ნაჩვენებია ზედიზედ, col-lg-4 სვეტების კლასის მიხედვით. სტრიქონების შუაში მწკრივი აღარ არის სავალდებულო დასაწვავად okremi divi-ის დანიშვნა, შესაძლებელია მისი შერწყმა ხილულებთან უფსკრულით.
ანალოგიის შემდეგ, ჩვენ ვაყენებთ სვეტებს გამოსავლებისა და გადარიცხვების გამოყოფისთვის. თუ საჭიროა ubik ელემენტის განადგურება, არჩეულია ოფსეტური სვეტების კლასი col-lg-offset-2. ბოლო რიცხვი მიუთითებს რამდენი ძირითადი სვეტი განადგურდება.
Krok 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 visnovok */
}
რეცეპტების სიზუსტისთვის, კლასი 3 დედაჩემს დაგიძახებტექსტის ცენტრის და FontAwesome ხატები ჩატვირთვის ნაკრებიდან.
ამ დროს მზადება მთლიანად დასრულებულია.
სადესანტო გვერდი: კოდების მაგალითები წინადადებით, პარალაქსით და ექიმით
ვიკორისტოვს აქვს სამი ყველაზე პოპულარული ტიპი: წინადადებით, ფორმით და დიარეის სამკურნალოდ. განლაგების სამყაროში შაბლონი განახლდება ეფექტებით.
მაგალითი 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 ლორემი ipsum
მე ბევრი CSS. რა სახის ადგილს წარმოადგენს ნაკვეთები, მითითებულია კომენტარებში - /* სიტყვებსა და ვარსკვლავს შორის */
/* =========ტარიფის სტილები======== */
/* ტარიფის ფარული ხედი */
.pricing_item(
ფონი: #f2f2f2;
პოზიცია: ნათესავი;
ჩვენება: -webkit-flex;
ჩვენება: flex;
flex-direction: სვეტი;
align-items: მონაკვეთი;
ტექსტის გასწორება: ცენტრში;
-webkit-flex: 0 1330px;
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;
ხაზის სიმაღლე: 95px;
სიგანე: 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;
}
ქვედა კოლონტიტულის ღილაკები ენიჭება bootstrap კლასს 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: ფორმის და პარალაქსის ეფექტი
რაც უფრო მეტ ველს შეიყვანთ, მით ნაკლებია მათი შევსების ალბათობა. მოითხოვეთ მხოლოდ მინიმალურად საჭირო ინფორმაცია.
მოძებნეთ ანალოგი. შეცვალეთ ფონი და ფერი. მესმის, დავამატებ ფორმას.
Მოდი გავაკეთოთ ეს პარალაქსი .
შეცვალეთ ჯუმბოტრონის ფონი ინსაითზე:
ფონი: გამჭვირვალე;
თავის შუაში ჩავსვით სკრიპტი:
მოათავსეთ კონტეინერი პარალაქსისთვის პირველ რიგში სხეულის გვერდით:
და CSS-ში ეს ქცევაა:
ბგპარალაქსი (
ფონი: url(/../img/fon.jpg) გამეორება;
პოზიცია: ფიქსირებული;
სიგანე: 100%;
სიმაღლე: 300%;
ზედა: 0;
მარცხენა: 0;
z-ინდექსი: -1;
}
პარალაქსი მზად არის. თუ ცვლილებები შეიტანება კოდში და ახალ ფონზე, ფერი გადაეცემა.
Robimo მენიუ მუქი:
ნავიგატორი - ნაგულისხმევი (
ფონის ფერი: #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-left: 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 1330px;
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. U wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autom vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis on vero eros et accumsan et just odio dignissim qui blandit praesent du luptatum zzril delenit.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
სტილის ფაილში ვირჩევთ ფორმის ქვედა რადიუსს და ვარეგულირებთ ღილაკს.
მენიუ დამატებით შეიცვალა ახალი მიზნით და შეიცვალა ჯუმბოტრონზე ტექსტების სტილი - წინა კონდახის ანალოგიის მიხედვით. შედეგი.
ქვედა ნაწილი
ამ ეტაპზე სრულდება სადესანტო გვერდის აპლიკაცია და კოდი ემატება დამატებით რობოტებს.
სადესანტო გვერდი შეიძლება იყოს სიურპრიზი, როგორც Ferrari - საიტის ყურადღების საათს შეიძლება დიდი შემოდინება შოუებში. სურათების ოპტიმიზაცია, მზა სკრიპტებისა და სტილის ზომის შემცირება მაქსიმალური ეფექტურობისთვის.
გაკვეთილზე მოცემულია კარგი სადესანტო გვერდების შექმნის მაგალითები, რომლებიც დაგეხმარებათ რეალური კლიენტების მოყვანაში და თქვენ ისწავლით რაიმე ახალს. მოვიწონოთ და გამოვაქვეყნოთ. Მანამდე.
გაკვეთილზე წარმოდგენილი ყველა შაბათ-კვირის გადმოსაწერად დასრულებული გვერდების ხედში დააწკაპუნეთ ერთ-ერთ ღილაკზე სოციალური ციხე , შეტყობინების გასახსნელად და გასაუქმებლად.
გალიულინ რუსლანთან მიმართებაში.
საგანი სადესანტო გვერდინაკაწრებზე ნახმარი. მინდა, რომ სადესანტო გვერდებზე ბუმი ცოტა ხნით შემცირდეს, მაგრამ სადესანტო გვერდები ჯერ კიდევ ჩნდება. მათ უშვებს ყველა, ვინც არ არის ძალიან ზარმაცი, რადგან მათთვის ბიზნესი არ არის და ეს აშკარად პროგრამული უზრუნველყოფის განვითარებაა. არ მინდა ვიმუშაო, უბრალოდ ვფლანგო, მაგრამ მსურს რამდენიმე გროშის შოვნა. არც ისე მნიშვნელოვანია, რა მიზნებს მიჰყვებით, მნიშვნელოვანია, რომ ყველამ უნდა გაიგოს ამბავი. მსურს პროფესიონალებთან კონსულტაციები და სხვა მიზეზების გამო, მე თვითონ შევქმნა საკუთარი Landing Page. ეს მოგება ეძღვნება სხვებს.
ხალხი, ვისაც სჯეროდა შექმენით საიტი თავად, მათ შეუძლიათ დაიწყონ განვითარება ნულიდან, ან შექმნან მზა, მიუხედავად იმისა, რომ ისინი არ საჭიროებენ რაიმე სპეციალურ ცოდნას დეველოპერისგან. საკმარისია HTML და CSS-ის საბაზისო ცოდნა, მხოლოდ ის, რასაც სკოლაში ისწავლით. საჭმელი ისევ აქ არის. ვიკორისტოვათი გადახდილი ჩი ბეზკოშტოვნი? რა თქმა უნდა, ფასიანი ბევრად უფრო ნათელი იქნება და, რა თქმა უნდა, აჩვენებს უფრო მაღალ კონვერტაციებს. უკატალო იქნება ნაკლებად ლამაზი, ნაკლებად დამუშავებული მარკეტინგის, განლაგებისა და დიზაინის თვალსაზრისით.
ეს მოგება მოდის bezkoshtovnyh სუფთა HTML-ზე სადესანტო გვერდისთვის. თავდაპირველად კოლექცია 40 პოზიციისგან შედგებოდა, მაგრამ მას შემდეგ, რაც ქურთუკი გადააგდე და ამ ნიმუშებით ახალი იერით აღფრთოვანდი, ფრაგმენტების უმეტესი ნაწილის ამოღება ავირჩიე, ინტერნეტში მოთლოხად მომეჩვენა და ისევ მოლოხს და ასე შემდეგ. ჩვენ დავკარგეთ ყველაზე ღირსეული შაბლონები, რომელთა გამოყენებაც შეგვეძლო. ისინი წავიდნენ სადესანტო გვერდის შაბლონებისხვადასხვა თემებისთვის, ვფიქრობ, მობილური მოწყობილობებისთვის LP მნიშვნელოვანია. სუნი ძალიან მჟავე აღმოჩნდა.
ადრე, ჩვენ უკვე გავაკეთეთ არჩევანი უფასო სადესანტო გვერდის შაბლონებიდან. სუნი სიმღერის თემას უკავშირდებოდა. ამჯერად გადავწყვიტე შემექმნა კრებულის თემა, რომელსაც პირდაპირ არ მივუდგებოდი.
უფასო HTML სადესანტო გვერდის შაბლონების სხვა არჩევანი:
გამოსვლის წინ. თუ რაიმე მიზეზით გსურთ ამ შაბლონების გადატანა Wordpress-ის ძრავზე, მაშინ ამ მიზეზით მე ვმუშაობდი დანამატების მიღებაზე Wordpress-ზე სადესანტო გვერდის შესაქმნელად. შეგიძლიათ სცადოთ მათი ვიკორისტები. შესაძლებელია, ღირს საათების დაზოგვა. მე ნამდვილად არ მინდა რაიმე კონკრეტულ აზრთან გამკლავება, ამიტომ უბრალოდ სუფთა HTML-ის ამოღება მჭირდება მარტივი LP-სთვის.
სხვა. ნამდვილად თქვენია, HTML სადესანტო გვერდის 20 უფასო შაბლონი.
Appi - შაბლონი ფონური ვიდეოთი
კიდევ ერთი სადესანტო გვერდის შაბლონი მობილური აპისთვის სრული ეკრანის ფონური ვიდეოთი. გარდა ვიდეოფონის მქონე შაბლონისა, რომელიც ქვემოთ იქნება ნაჩვენები, ძალიან ნათელია, თუნდაც კონკრეტულ თემაზე მორგებული.ბუკუ
უფასო HTML შაბლონი მშენებლობისთვის სადესანტო გვერდი წიგნების გასაყიდად. ვიკონანიუმი ბრტყელ სტილში მწვანე ტონებში. ეს შესანიშნავი ანიმაციაა.საცალო ვაჭრობა ასევე გთავაზობთ PSD ფორმატში გამომავალი კოდების უსასყიდლოდ შეძენას.
სადესანტო გვერდი კავის გასაყიდად
HTML სადესანტო გვერდის შაბლონი Cavi-ს გასაყიდად. განლაგების დიზაინი და განხორციელება ისეთივე მარტივია, როგორც ეს ხდება. ელემენტების მთავარი ანიმაცია არის გვერდის გადახვევა. ყველაფერი რბილ ტონებშია დაწერილი. იდეალურად შეეფერება კავას მიწოდებაში ჩართულ ორგანიზაციებს. თუმცა, ეს შაბლონი ადვილად შეიძლება შეიცვალოს თქვენი თემისთვის, სურათების ჩანაცვლებით.Landing Zero - დაშვება ფონური ვიდეოთი
უფასო HTML შაბლონი ფონური ვიდეოთიუნივერსალური თემები. ნებისმიერი სპეციალობის ფრილანსერი, იქნება ეს ფოტოგრაფი თუ დიზაინერი, შესაფერისია პორტფოლიოს შესაქმნელად.ძნელია იპოვოთ კატების გარეშე შაბლონები ფონური ვიდეოებით. მოდით გადმოვწეროთ.
თქვენ შეგიძლიათ პირველ ეკრანზე ვიდეო ჩაანაცვლოთ საკუთარით და თუ ასეთი რამ არ არის, შეგიძლიათ უყუროთ უფასო ვიდეო ფიდზე. ადრე შევქმენი ვიდეო მარაგების სია ლეგალური ვიდეოებით.
ჩაერთო
კიდევ ერთი უნივერსალური ადაპტური ცალმხრივი გვერდი Bootstrap-ზე. გვერდი შესაფერისია პროდუქტის მარტივი პრეზენტაციისთვის. სტრუქტურა გვთავაზობს Apple-ის პროდუქტების საპრეზენტაციო მხარეს.სადესანტო გვერდი კაფესთვის ან რესტორნისთვის
ზვიჩნი რუნეტის ჩვეულებრივი კორისტუვაჩისთვის Catless Landing Page შაბლონი ნაგავსაყრელის ფორმითპირველ ეკრანზე. შექმნილია ბარის, რესტორნის, კაფეს ან რაიმე კულინარიული თემის დასაჯდომი ადგილის შესაქმნელად. დამატებითი განაცხადის ფორმის გამოყენებით, შეგიძლიათ დაჯავშნოთ მაგიდა მითითებული საათის განმავლობაში.ოლეოზი
ძალიან მკაფიო, ადაპტირებული, იაფი და ახალი მობილური აპლიკაციისთვის. სადესანტო გვერდის დანერგვა Bootstrap ჩარჩოზე. არსებობს სამი ფერის ვარიანტი: ღია ლურჯი, ღია მწვანე და იასამნისფერი. თუმცა, ის არც თუ ისე მკაცრია თავის საგანთან დაკავშირებით, ცხადია, მისი მარტივად გადამუშავება შესაძლებელია თქვენს საჭიროებებზე.Take - უკატა ცალმხრივი
ისევ გირეკავ უფასო ცალმხრივი html შაბლონიმობილური აპლიკაციისთვის. თუმცა, ეს დიზაინი ძალიან მაგარი და უნიკალურია. ვგულისხმობ, უნიკალური. მცველების უმეტესობა არ არის მობილური დანამატების დეველოპერები, ამიტომ მათ უნდა მოერგოს ყველაფერი საკუთარ თემას.ფუდი
უფასო ერთგვერდიანი HTML5 შაბლონი სადესანტო გვერდისთვისკაფეები, რესტორნები და როგორი მაღაზიები. შაბლონი სრული ეკრანის ფონით პარალაქსის ეფექტის გამოყენებით.ეს არის ბლოკები, როგორიცაა: მენიუები, დაკავშირებული თემები, კლიენტის პროფილები და ბლოკების სტანდარტული ნაკრები, რომელშიც შეგიძლიათ განათავსოთ უპირატესობები და სხვა.