Geri bildirim formları içeren açılış sayfası şablonu. Açılış sayfası şablonları. Açılış sayfası: cümle, paralaks ve sayaç ile kod örnekleri
Tek sayfalık bir site işadamları için uygundur çünkü sadece bir günde yapılabilir. Eğer bir bir sayfalık web sitesi şablonu indirin hazır, o zaman şirketiniz için minimum miktarda bir web sitesi yapabilirsiniz, çünkü yalnızca barındırma için ödeme yapmanız gerekir. Müşteri için tek sayfalık bir sayfa kullanışlıdır, çünkü bu sayfadaki tüm bilgiler en kısa ve yapılandırılmış şekilde sunulur, gereksiz hiçbir şey yoktur. Müşteri dostu olmaları nedeniyle, tek sayfalık sayfalar genellikle diğer site türlerinden daha yüksek dönüşümler gösterir.
Tek sayfalık bir şablon nasıl seçilir?
- Görünüm. Tasarımın şirketin genel tarzında tasarlanması arzu edilir. Arayüz çok uyumsuz renklere sahip olmamalıdır. Bununla birlikte, bazı pastel renkler de kullanıcıları uzun süredir sıktı, bu nedenle parlaklık ve yaratıcılık hoş karşılanıyor.
- "Ağırlık". Animasyonlu tasarım, titreyen afişler, "ağır" öğeler, kaydırıcılar siteyi o kadar aşırı yükleyebilir ki, açılması rakiplerinden daha uzun sürer.
- Blok sayısı ve bunları özelleştirme yeteneği. Bir şablon seçmeden önce, sayfayı aşırı yüklememek için en azından tam olarak hangi blokların gerekli olduğuna karar verin. Bir şablon üzerinde deneyerek, blokların kaldırılıp değiştirilemeyeceğini öğrenin.
- Çapraz tarayıcı uyumluluğu ve duyarlı tasarım, potansiyel müşterilerin kitlesini büyük ölçüde genişletecektir. Bu nedenle, yalnızca seçtiğinizden emin olun duyarlı tek sayfa şablonları.
Teklif ediyoruz ücretsiz bir sayfa şablonu
Şirketiniz için yapmaya karar verirseniz Açılış Sayfası, indirme şablonu Web sitemizde. Tüm şablonları dikkatlice virüslere karşı kontrol ederiz, böylece virüslü bir dosyayı indirmekten korkmazsınız. Herşey açılış sayfası şablonları Kataloğumuzda çeşitli stillerde yapılmış modern bir tasarım var. Blok sayısını ayarlama, renk düzenini değiştirme ve diğer işlevler, basit bir şablona dayalı benzersiz bir orijinal web sitesi oluşturmanıza yardımcı olacaktır.
Sizi tek sayfalık web sitesi şablonlarını indirmeye davet ediyoruz
İndirmeye karar verenlerin asıl sorunu açılış sayfası şablonu ücretsiz, ücretsiz şablonlarda çok sayıda virüs ve hatadır. Bu nedenle güvenli ve güvenilir bir web sitesi bulmak çok önemlidir. Güvenliği dikkatle izlediğimiz için sizi bizi ziyaret etmeye davet ediyoruz. Ek olarak, sizi en geniş ürün yelpazesiyle memnun edeceğiz hTML tek sayfa şablonları, indirme şu anda yapabilirsin!
Metni daha fazla okuyun ...Selamlar sevgili okurlarım. Bugün artırabileceğimiz teknik noktalardan bahsedeceğiz. satış dönüşümü malları veya hizmetleri. Önemli noktalardan biri, ürünlerin bulunduğu iyi düşünülmüş bir açılış sayfasıdır. Oluşturulması hakkında daha fazla konuşacağımız ve hazır sayfa kodları alacağımız sözde açılış sayfası.
Açılış sayfası nedir? Bu, insanların genellikle bir reklama tıkladıktan sonra geldikleri sayfadır. Tek bir teklif için oluşturulmuştur: ürün, hizmet veya abonelik. Etkili bir açılış sayfası, başarılı internet pazarlamasının temel taşıdır. Ürün piyasadaki en iyisi olabilir, reklamlar mükemmeldir, ancak iyi bir açılış sayfası olmadan çabalar sonucun% 100'ünü vermez. Ziyaretçilere neyin teklif edildiğini ve neden istemeleri gerektiğini anlatıyor. Aciliyet duygusu, hızlı karar vermeye ve kullanıcının bir müşteri kategorisine geçişine katkıda bulunur.
Açılış Sayfası nasıl oluşturulur? Cevabın dizgi yeteneğinde olduğuna inanmak yanlıştır. İyi bir açılış sayfası, hedefler, metin, tasarım ve kod üzerinde iyi koordine edilmiş çalışmanın sonucudur. Örnekleri aşağıda verilecek olan açılış sayfaları, yeni başlayanların düzen ile çalışmanın temellerini öğrenmesine yardımcı olacak, ancak dönüşüm metinlerinin ve hedef kitle anlayışının yerini almayacak. Bunları çeşitli kullanarak da oluşturabilirsiniz. yapıcılar Açılış sayfası.
Bu nedenle, bir açılış sayfası oluşturmadan önce kendinize şunları sorun:
- Açılış sayfasına tıkladıktan sonra bir kişi ne yapacak? Bir şey alacak mı? Formu doldur? Haber bültenine abone ol? Dönüşüm oranınızı takip etmeden önce net hedefler belirleyin.
- Rakiplerim kimler? Aslında üç soru var: kim, ne kadar başarılılar ve başarıları nasıl uygulanabilir? Taklit, pohpohlamanın en samimi şeklidir. Rakipler işe yarayan şeyi yapıyorsa, bunu sitenizde tekrarlayın.
- Hedef kitlem kim? Nişinizi ve hedef kitlenizi ne kadar iyi anlarsanız, çabalarınızın karşılığını alma şansı o kadar artar.
İhtiyacınız olan tüm bilgileri sunmanız gerekir, ancak potansiyel bir müşteriyi bunaltmak ve uzaklaştırmak için yeterli değil.
Açılış sayfası oluşturma örnekleri + aptallar için kodlama
İşe başlamadan önce HTML ve CSS'ye hızlıca bir göz atalım. Nasıl çalıştıklarını anlamak, bir açılış sayfası oluşturmanıza yardımcı olacaktır.
HTML - siteleri görselleştirmek için bir tarayıcı biçimlendirme dili. İçeriği tanımlayan açılı parantez içine alınmış etiketler kullanılarak yazılmıştır.
Etiket açılır (<>) ve dolgunun etrafını kapatır ():
<тег>içerikтег>
Yer tespiti için, addan sonra özellikler eklenir:
<тег атрибут="значение">içerikтег>
CSS - HTML öğelerinin nasıl düzenleneceğini tanımlar. Seçicilerden, özelliklerden ve değerlerden oluşur:
# seçici (özellik: değer;)
Seçici, html'deki belirli bir etiketin adıyla eşleşir. Değerleri değiştirmek ve özellikler eklemek, görünümünü kontrol eder. Aynı HTML'ye farklı CSS stilleri uygulayarak farklı sayfalar oluşturabilirsiniz.
5 ilk adım
Hızlı bir düzen için, önyüklemeye dayalı minimal tasarıma sahip bir şablon kullanacağız. Yerleşimi hızlandırmak için tüm dünyada kullanılan kendi seçicilere sahip bir sistemdir.
Mütevazı görünüyor.
Bu balıktan birkaç aşamada her zevke uygun bir alan oluşturulur.
Klasördeki dizin yapısı:
- index.html: Bu, düzenleyeceğimiz ana dosyadır.
- / varlıklar: yardımcı dosyalar burada bulunur:
- / css: dizin, önyükleme ve simge stillerini içerir. Düzenlenecek dosya main.css dosyasıdır.
- / img: site resimleri için klasör.
- / fonts: Simge yazı tipleri.
- / js: bootstrap için javascript dosyaları.
1. Adım: Başlığı kullanma
Başlık ve alt başlıklar, teklifin değerini net bir şekilde iletmeye yardımcı olan kilit noktalardır.
Sitenin başlığını ve adını değiştirelim. Burada, dizgi yeteneği gerekli değildir - metniniz ekranda sarı ile vurgulanan yerlere yazılır.
2. Adım. Brevity, din değiştirmenin kardeşidir. Avantaj ve oran ekleme
4 bölüm alacaktır:
- avantajlar;
- oranları;
- yorumlar;
- eylem çağrısı.
Gerekli bölümleri ekleyeceğimiz ana içerik bölümünü "ana" tasarlayalım:
…..
…..
…..
…..
Nokta yerine dolgu ile dolduruyoruz.
Avantajlar bölümü bu kodu gerektirecektir:
Faydaları
Hızlı
Dürüst
Sed diam umumi
Karlı
Elit, sed diam nonummy
Teknik olarak
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Dürüst
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Karlı
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Teknik olarak
Lorem ipsum dolor sit amet, consectetuer adipiscing
Dürüst
Lorem ipsum dolor sit amet, consectetuer adipiscing
Karlı
Lorem ipsum dolor sit amet, consectetuer adipiscing
Netlik için içerik:
Özensiz görünse de paniğe gerek yok, devam ediyoruz.
Fiyatları biz belirliyoruz. İçerik, ilk adımdaki gibi değişir. Sınıf "tarifeleri" ve üç tarife ile genel açıklama.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. En az ve en az veniam, quis nostrud exerci tation ullamcorper suscipit lobortis, ex ea commodo results.
Tarife planları
Tarife numarası 1
$10
aylık / kişi başı
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem Ipsum
Tarife numarası 2
$20
aylık / kişi başı
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem Ipsum
Tarife numarası 3
$30
aylık / kişi başı
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem Ipsum
Öyle görünüyor.
Gelecekteki açılış sayfasının görünümü ile ilgilenmesek de, aşağıda değişen stil örneklerini ele alacağız.
3. Adım: Güven Sinyalleri ve Harekete Geçirici Mesaj
Hedeflenen sinyallerin kullanılması, ziyaretçilere markanın güvenilir olduğunu gösterir. Sinyaller farklı şekillerde olabilir, ancak klasik olan müşteri incelemeleridir.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and dolore magna aliqua. Ut enim ad minim veniam, quis nostrud egzersiz ullamco labouris nisi ut aliquip ex ea commodo:
Musteri degerlendirmeleri
"Lorem ipsum dolor sit amet, consectetur adipising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud egzersiz ullamco emek, ex ea commodo. "
"Lorem ipsum dolor sit amet, consectetur adipising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud egzersiz ullamco emek, ex ea commodo. "
Bir harekete geçirici mesaj oluşturalım.
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 results:
Bugün sipariş verirken yararlanın
İncelemeler, potansiyel müşterilerin bir ürün satın almaya karar vermesine yardımcı olacaktır. Açıklık sağlamak için avatarlara ihtiyacımız var, bu yüzden onları hemen yerine yazacağız - her alıntıya.
Müşteri Adı.
Adım 4: Şebeke Entegrasyonu ve Mobil Dostu
Izgarayı enjekte etmek için Bootstrap konteynerlerine ihtiyacımız var. İzin verilen sütun segmentlerinin toplam sayısını hatırlamak önemlidir - 12. Sınıf, içerik görüntüsünün genişliğini belirler. Bu hazır şebekenin avantajı, konteynerlerin duyarlılık dikkate alınarak tasarlanması ve mobil cihazlara hemen uygulanabilir olmasıdır. Resmi web sitesinde ayrıntılı açıklama. Izgara şuna benziyor.
"Main" içeriğini bir kaba saracağız. Bunu yapmak için üst kısmında şöyle yazılmıştır:
Bloğun ekranın tüm genişliğine sığmasını istiyorsanız, konteyner içine yerleştirilir. Burada bir jambotron ve bir eylem çağrısı olacak.
Üst üste konumlandırmayı gerektiren tüm öğeleri çizgi ayırıcılarla sarmalıyoruz.
Artık önyükleme ızgarasına odaklanarak sütunların genişliğini ayarlayabiliriz. Sarmadan sonra, dolgu ekranın kenarlarına yapışmayı bıraktı ve düzgün girintiler belirdi.
Col-lg-4 sütun sınıfını kullanarak fiyatları arka arkaya belirliyoruz. Satır satırlarının içinde, artık kaydırmak için ayrı divalar yazmaya gerek yoktur, bunları bir boşlukla ayrılmış mevcut olanlarla birleştirebilirsiniz.
Benzetme yaparak, incelemeler ve avantajlar bölümü için sütunlar oluşturuyoruz. Bir öğeyi yana kaydırmanız gerekirse, col-lg-offset-2 ofset sütun sınıfını kullanın. Sondaki sayı, kaydırmanın kaç temel sütun alacağını belirler.
Adım 5. Yazı tipleri ve simgeler
Google Yazı tipi başlıkları için yazı tiplerini uygulayacağız. Seçtiğinizde, içe aktarma sekmesini açın ve buradan veriyi main.css dosyasına kopyalayın. Yeni yazı tipinin uygulandığı dosyaya başlık seçiciler de ekliyoruz.
@import "https://fonts.googleapis.com/css?family\u003dRoboto+Condensed" / * başlıklar için yazı tipi içe aktarma * /
.navbar marka,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; / * Googlephone çıkışı * /
}
Netlik sağlamak için, kendi kendini açıklayan bir metin merkezi adı olan bir sınıf ve önyükleme setinden FontAwesome simgeleri kaydedilir.
Bu, hazırlığı tamamlar.
Açılış sayfası: cümle, paralaks ve sayaç ile kod örnekleri
En popüler üç türü kullanıyoruz: bir teklif, bir form ve bir geri sayım sayacı ile. Siz yazdıkça, şablon efektlerle tamamlanacaktır.
Örnek 1: bir cümle ile
Ana gövde ve dolgunun arka planını ilk ekranı kaplayacak şekilde ayarlayalım.
Jumbotron (
arkaplan: # f5f5f5 url (../ img / fon.jpg) üst merkez yineleme yok;
maksimum genişlik:% 100;
padding-top: 250px;
alt dolgu: 200px;
metin hizalama: merkez;
}
Jambotron başını h2'den h1'e yeniden boyutlandırın. Ardından, değiştirilmesi gereken elemanların stillerini yazıyoruz.
Simgeler ile başlayalım.
Faydalar i (
renk: # cac4c4;
}
Hash işaretinden sonra bir renk belirtilir. Tercihinizi html renk tabloları veya bir görüntü düzenleyici kullanarak seçebilirsiniz.
Bölüm başlıkları için girinti
bölüm h2 (
padding-top: 30px;
kenar boşluğu alt: 25px;
}
Tarifelerin görünümünü düzenliyoruz. Kolaylık sağlamak için, nokta olarak vurgulamak istediğimiz öğeler için kendi sınıflarımızı oluşturuyoruz.
Tarife numarası 1
$10
aylık / kişi başı
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem Ipsum
Ve çok fazla CSS. Sitelerin sorumlu olduğu yerler yorumlarda - / * yıldız işaretli eğik çizgiler arasında * /
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Tarif stilleri \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
/ * tarifenin genel görünümü * /
.pricing_item (
arkaplan: # f2f2f2;
konum: göreceli;
ekran: -webkit-flex;
ekran: esnek;
esnek yön: sütun;
hizalama öğeleri: uzatma;
metin hizalama: merkez;
-webkit-flex: 0 1 330px;
esnek: 0 1 330 piksel;
dolgu: 2em 3em;
kenar boşluğu: 1em;
renk: # 262b38;
imleç: varsayılan;
taşma: gizli;
}
/ * basıldığında arka planı değiştir * /
.pricing_item: fareyle üzerine gelme (
renk: # 444;
arka plan: #daebef;
}
/ * her tarifede fiyat etiketinin münferit alt tabakası * /
.pricing_item: birinci-çocuk .price (
arka plan: # 9ba9b5;
}
.pricing_item: nth-child (2) .price (
arka plan: # 1f6098;
}
/ * geniş ekranlarda, tarifenin orta sütununu girintiler ve vurgular * /
@media ekranı ve (min-genişlik: 66.250em) (
.pricing_item (
kenar boşluğu: 1.5em 0;
}
.featured (
z-endeksi: 10;
kenar boşluğu: 0;
yazı tipi boyutu: 1.15em;
}
}
/ * başlık * /
.pricing_item h3 (
yazı tipi boyutu: 2em;
kenar boşluğu: 0.5em 0 0;
renk: # 1d211f;
}
/ * etiket altlığı * /
.price (
yazı tipi boyutu: 2em;
yazı tipi ağırlığı: kalın;
renk: #fff;
konum: göreceli;
z-endeksi: 100;
satır yüksekliği: 95px;
genişlik: 100px;
yükseklik: 100px;
marj: 1.15em otomatik 1em;
kenarlık yarıçapı:% 50;
arka plan: # 77a5cc;
-webkit geçişi: renk 0.3s, arka plan 0.3s;
geçiş: renk 0.3s, arka plan 0.3s;
}
/ * para birimi * /
.para birimi (
yazı tipi boyutu: 0.5em;
dikey hizalama: süper;
}
/ * cümle açıklaması * /
.sentence (
yazı tipi ağırlığı: kalın;
kenar boşluğu: 0 0 1em 0;
dolgu: 0 0 0.5em;
renk: # 2a6496;
}
/ * liste * /
.pricing_item ul (
yazı tipi boyutu: 0.95em;
kenar boşluğu: 0;
dolgu: 1.5em 0.5em 2.5em;
metin hizalama: sol;
}
/ * öğeleri listele * /
.pricing_item li (
dolgu: 0.15em 0;
}
/ * oran sırası düğmesi * /
.pricing_item düğmesi (
yazı tipi ağırlığı: kalın;
margin-top: otomatik;
dolgu: 1em 2em;
renk: #fff;
kenarlık yarıçapı: 5px;
arka plan: # 428bca;
-webkit geçişi: arka plan rengi 0.3s;
geçiş: arka plan rengi 0.3s;
}
/ * düğmeye basıldığında renk değişimi * /
.pricing_item düğmesi: fareyle üzerine gelme,
.pricing_item düğmesi: odak (
arka plan rengi: # 285e8e;
}
/ * tarife arka planı * /
.bg-2 (
arkaplan: #dddddd;
}
Sonuç
Musteri degerlendirmeleri. Onlara düzgün bir bakış atalım, yeri belirleyelim.
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d Referans stilleri \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
referanslar (
dolgu: 4em 0;
metin hizalama: merkez;
}
.testimonials .avatar img (
kenarlık yarıçapı:% 50;
şamandıra: sol;
ekran: satır içi;
sağ kenar boşluğu: 1em;
genişlik: 65px;
yükseklik: 65px;
kenar boşluğu alt: 30px;
}
.testimonials .avatar p (
metin hizalama: sol;
padding-top: 1em;
renk: # 5d5d5d;
yazı tipi ağırlığı: 900;
}
Son harekete geçirici mesaj ve altbilgi süslemeye bırakılmıştır.
/ * Aksiyon * /
.aksiyon (
arka plan: # 476177;
minimum yükseklik: 180 piksel;
genişlik:% 100;
dolgu: 4em 0;
metin hizalama: merkez;
}
.action h2 (
renk: #fff;
yazı tipi ağırlığı: 300;
}
.action p (
renk: #fff;
metin gölgesi: 0 1px 2px rgba (0, 0, 0, .2);
yazı tipi boyutu: 1.2em;
}
.action .container (
kenar boşluğu: 3em;
}
/ * Altbilgi * /
altbilgi (
arka plan: # 333333;
dolgu: 1em 0;
metin hizalama: sağ;
}
altbilgi p (
renk: #fff;
satır yüksekliği: 1;
metin dönüşümü: büyük harf;
yazı tipi boyutu: 0.7em;
kenar boşluğu: 0.5em;
}
Altbilgi düğmesine btn-default yerleşik önyükleme sınıfı atanmıştır.
Şablonu canlandırmak. Bölümler için yumuşak kaydırma ve düğmelerin yanı sıra ilk ekranda metin animasyonu sunacağız.
Geçişlerin çalışmasını sağlamak için, bazı bölüm sınıflarını id ile değiştireceğiz - faydalar ve tarifeler için. Ve id bağlantılarını düğmelere atayacağız. Ekran - sarı bir işaretle vurgulanana ekli.
Düğmelere doldurmayı ayarla - jbutton. Basıldığında kaydırma çalışıyor, ancak çok aniden.
Düzgün geçişler, javascript veya jquery kullanılarak oluşturulur. İkincisi, varsayılan olarak Bootstrap şablonlarına bağlıdır.
Kaydırma artık düzgün.
Animate.css kullanarak metne animasyon ekleme ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Bu hazır bir açık kaynaktır, herhangi bir sitede kullanılabilir. Dosyayı github'dan css klasörüne yerleştirin ve yolu yazın.
Efektleri burada seçiyoruz: https://daneden.github.io/animate.css/... FadeInDown'ı seçtik. Kodda şu şekilde yazılmıştır:
Şimdi, sayfa yüklendiğinde veya yenilendiğinde, metin canlandırılacaktır. Bitti.
Örnek 2: şekil ve paralaks efektli
Bir ziyaretçiye ne kadar çok form alanı sunulursa, onları doldurma olasılıkları o kadar düşük olur. Yalnızca ihtiyacınız olan minimum bilgileri isteyin.
Benzetme yoluyla toplanmıştır. Arka planları ve renkleri değiştireceğiz. Ve tabii ki şekli ekleyelim.
İle başlayalım paralaks .
Jumbotron arka planını şeffaf olarak değiştirin:
arka plan: şeffaf;
Kafanın içine komut dosyasını ekleyeceğiz:
Vücuttaki ilk satır, paralaks için kaptır:
Ve CSS'de davranışı:
Bgparallax (
arkaplan: url (/../ img / fon.jpg) tekrarla;
pozisyon: sabit;
genişlik:% 100;
yükseklik:% 300;
üst: 0;
sol: 0;
z-endeksi: -1;
}
Paralaks hazır. Ancak kodda ve yeni arka planda değişiklik yapmak, renk şemasının yeniden atanmasını gerektirir.
Menüyü karanlık yapmak:
Navbar varsayılanı (
arka plan rengi: # 333;
kenarlık rengi: # 444;
renk: koyu gri;
kenarlık yarıçapı: 0;
}
Navbar-default .navbar-nav\u003e .active\u003e a, .navbar-default .navbar-nav\u003e .active\u003e a: hover, .navbar-default .navbar-nav\u003e .active\u003e a: focus (
renk: koyu gri;
arka plan rengi: rgba (0, 0, 0, 0.5);
}
Jumbotron'daki cümleyi yenisiyle değiştiriyoruz - form kodu ile:
Açılış Sayfası ziyaretçileri müşterilere dönüştürür
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.
Ve görünüşü yazıyoruz
/ * form * /
.headform-list (
liste stili türü: yok;
satır yüksekliği: 26px;
yazı tipi ağırlığı: 400;
dolgu: 0px;
kenar boşluğu alt: 40px;
}
.headform (
taşma: gizli;
konum: göreceli;
arka plan rengi: rgba (0,0,0, .4);
dolgu: 35px 40px;
kenarlık yarıçapı: 8px;
}
giriş, düğme, seç, metin alanı (
genişlik:% 100;
kenar boşluğu alt: 10px;
}
.headform-list li .fa (
konum: mutlak;
üst: 0px;
sol: 0px;
genişlik: 42px;
yazı tipi boyutu: 24px;
metin hizalama: merkez;
}
.headform-list li (
konum: göreceli;
min-yükseklik: 38px;
sol dolgu: 62px;
kenar boşluğu alt: 20px;
}
.jumbotron p (
renk: #fff;
yazı tipi boyutu: 16px;
yazı tipi stili: italik;
}
Değişiklik talep ettiği için Jambotron'un metni de buraya geldi.
Tarifelerin yeniden renklendirilmesi.
/ * tarifenin genel görünümü * /
.pricing_item (
arka plan rengi: rgba (0,0,0, .4); / * satır değişti * /
kenarlık yarıçapı: 4px; / * satır değişti * /
konum: göreceli;
ekran: -webkit-flex;
ekran: esnek;
-webkit-flex-yönü: sütun;
esnek yön: sütun;
-webkit-hizalama öğeleri: genişletme;
hizalama öğeleri: uzatma;
metin hizalama: merkez;
-webkit-flex: 0 1 330px;
esnek: 0 1 330 piksel;
dolgu: 2em 3em;
kenar boşluğu: 1em;
renk: # f2f2f2; / * satır değişti * /
imleç: varsayılan;
taşma: gizli;
kutu gölgesi: 0 0 15px rgba (0, 0, 0, 0.05);
}
/ * basıldığında arka planı değiştir * /
.pricing_item: fareyle üzerine gelme (
renk: # 444;
arka plan: #ddd; / * satır değişti * /
}
Şimdi şuna benziyorlar - şeffaf arka plan ve yuvarlak köşeler.
Şablon hazır.
Örnek 3: geri sayım sayacı ile
Jambotronun dolgusunu tekrar değiştirin ve şablonu yeni arka planla önceki şablonla benzer şekilde eşleşecek şekilde yeniden boyayın. Sayaç komut dosyasını bağlarız:
HTML
Zaman bitiyor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. En az enim ve en az veniam, quis nostrud exerci tation ullamcorper suscipit lobortis, ex ea commodo results. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie resultat, vel illum dolore eu feugiat nulla facilisis at vero eros et akümantasyon ve odio dignissim qui blandit praesent luptatum zzril delenit teugue duis dolore
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Stil sayfasında, şeklin alt yarıçapını kaldırın ve düğmeyi değiştirin.
Ek olarak, menü yeni bir arka plan için yeniden boyandı ve jambotron'daki metinlerin stili önceki örnekle benzer şekilde değiştirildi. Sonuç.
Alt kısım
Bu, Açılış Sayfası örneklerini tamamlar, ancak kod ek çalışma gerektirir.
Açılış sayfasının bir Ferrari gibi hızlı ve iyi olması gerekir - sayfa yükleme sürelerinin hemen çıkma oranları üzerinde büyük etkisi vardır. Maksimum verimlilik için görüntüleri optimize edin, bitmiş komut dosyalarının ve stillerin boyutunu en aza indirin.
Ders, size gerçek müşteriler kazandırmanıza yardımcı olacak iyi açılış sayfaları oluşturmanın örneklerini sunar ve yeni bir şeyler öğrenirsiniz. Seviyoruz ve yeniden yayınlıyoruz. Yakında görüşürüz.
Derste sunulan tüm kaynakları hazır sayfalar şeklinde indirmek için düğmelerden birine tıklayın. sosyal kale açmak ve bir bağlantı almak için.
Saygılarımla, Galiulin Ruslan.
Konu Açılış sayfası deliklere sürtülmüş. Açılış sayfalarındaki patlama biraz azalmış olsa da, açılış sayfaları hala talep görüyor. Bu, iş dünyasındaki nişleri için açıkça kaybedici bir hareket olsa bile, herkes tarafından ve çeşitli şekillerde piyasaya sürülürler. Biri bunu sadece oynamak için, biri de para kazanmak için yapıyor. Ancak hangi hedefleri takip ettiğiniz o kadar önemli değil, önemli olan herkesin bir sayfa geliştirmesi gerekecek. Biri profesyonellerden sipariş verecek ve biri şu ya da bu nedenle kendi Açılış Sayfasını oluşturmaya başlayacak. Bu koleksiyon ikincisine adanmıştır.
Karar veren insanlar kendin bir web sitesi oluştur, geliştirmeye sıfırdan başlayabilirler veya özel geliştirme bilgisi gerektirmedikleri için hazır olanları kullanabilirler. Okulda öğretildiği gibi temel bir HTML ve CSS bilgisi yeterlidir. Burada yine soru ortaya çıkıyor. Ücretli mi yoksa ücretsiz mi kullanmalıyım? Tabii ki, ücretli olan çok daha kaliteli olacak ve muhtemelen daha yüksek dönüşümler gösterecektir. Ücretsiz, daha az güzel, pazarlama, düzen ve tasarım açısından daha az ayrıntılı olacaktır.
Bu koleksiyon sadece bir Açılış Sayfası oluşturmak için saf HTML'de ücretsiz... Başlangıçta, seçim 40 pozisyondan oluşuyordu, ancak sabah uyanıp bu şablonlara yeni bir gözle baktığımda, açıkçası çöp olduğu ve internette çok fazla çöp olduğu için çoğunu silmeye karar verdim. En azından üzerine bir şeyler inşa edebileceğiniz en değerli şablonlar kaldı. Seçim şunları içerir: açılış sayfası şablonları , ancak bazı nedenlerden dolayı mobil uygulamalar için LP hakimdir. En yüksek kalitede oldukları ortaya çıktı.
Daha önce ücretsiz Açılış Sayfası şablonlarından bir seçim yaptık. Belirli bir konuya göre uyarlandılar. Bu sefer hiçbir yöne ait olmayan prefabrik bir konu yapmaya karar verdim.
Ücretsiz HTML Açılış Sayfası şablonlarının diğer koleksiyonları:
Bu arada. Herhangi bir nedenle, bu şablonları Wordpress motoruna çekmek istiyorsanız, o zaman bu konuda Wordpress'te bir Açılış Sayfası oluşturmak için bir dizi eklenti seçtim. Onları kullanmayı deneyebilirsiniz. Belki bu çok zaman kazandırır. Kişisel olarak, bunu yapmanın pek bir anlamını görmüyorum, çünkü saf HTML basit bir LP için yeterli.
Yani. İşte 20 Ücretsiz HTML Açılış Sayfası Şablonu.
Appi - Arka Plan Video Şablonu
Tam ekran arka plan videosuna sahip mobil uygulama için başka bir Açılış Sayfası şablonu. Aşağıda verilecek olan video arka planlı şablonun aksine, bu, belirli bir konu için keskinleştirilmiş olmasına rağmen çok daha iyidir.Bukku
Oluşturulacak ücretsiz HTML şablonu Açılış Sayfası kitap satıyor... Yeşil tonlarında düz stilde yapılmıştır. Bazı eğlenceli animasyonlar var.Ayrıca geliştirici, PSD formatında ücretsiz indirilebilecek kaynaklar sağlar.
Açılış Sayfası Kahve Satışı
Kahve Açılış Sayfası Şablonu... Düzenin tasarımı ve uygulaması çok ilginç. Sayfayı kaydırırken öğelerin animasyonu var. Her şey yumuşak renklerde yapılır. Kahve dağıtan kuruluşlar için mükemmeldir. Ancak bu şablon, resimleri değiştirerek temanıza uyacak şekilde kolayca değiştirilebilir.Landing Zero - Arka plan videosu olan açılış sayfası
Video Arkaplanlı Ücretsiz HTML Şablonu evrensel konular. İster fotoğrafçı ister tasarımcı olsun, herhangi bir uzmanlık alanında serbest çalışan bir portföy oluşturmak için uygundur.Genel olarak, arka plan videosu içeren ücretsiz şablonlar bulmak zordur. Öyleyse indirin.
İlk ekrandaki video kendi videonuzla değiştirilebilir ve video yoksa ücretsiz video stoğundan indirebilirsiniz. Daha önce yasal videolar içeren video stoklarının bir listesini vermiştim.
Tut
Başka bir çok yönlü bootstrap ile duyarlı bir sayfa... Sayfa, basit bir ürün sunumu için uygundur. Yapı, Apple ürünlerinin sunum sayfasına benzer.Bir kafe veya restoran için Açılış Sayfası
Sıradan bir runet kullanıcısı için alışılmış kepçe Formlu Ücretsiz Açılış Sayfası Şablonu ilk ekranda. Bar, restoran, kafe veya mutfak temalı herhangi bir şey için bir açılış sayfası oluşturmak üzere keskinleştirildi. Başvuru formunu kullanarak belirli bir süre için bir masa ayırtabilirsiniz.Oleoz
Çok yüksek kaliteli, duyarlı, ücretsiz, ancak yine bir mobil uygulama için. Açılış Sayfası, Bootstrap çerçevesi kullanılarak uygulanır. Üç renk seçeneği vardır: açık mavi, açık yeşil ve mor. Bununla birlikte, temasına o kadar sıkı bir şekilde uyarlanmamıştır, bu nedenle, size uyacak şekilde kolayca yeniden yapılabilir.Take ücretsiz bir sayfalık web sitesidir
Ve yine başka ücretsiz bir sayfalık html şablonu bir mobil uygulama için. Ancak tasarımı çok ilginç ve sıradışı. Eşsiz bile diyebilirim. Gönderiyi ziyaret edenlerin çoğu mobil uygulamaların geliştiricisi değildir, bu nedenle her şeyi temanıza uyacak şekilde yeniden yapmanız gerekecektir.Foodee
Ücretsiz Bir Sayfa HTML5 Açılış Sayfası Şablonu cafe, restaurant veya bir çeşit lokanta. Tam ekran arka planı ve Paralaks efektleri olan şablon.Menü, yaklaşan etkinlikler, müşteri incelemeleri ve avantaj sağlayabileceğiniz standart bir blok kümesi gibi bloklar vardır.