Hazır şablonlar açılış sayfaları html. Açılış sayfası şablonları

Selamlar sevgili okurlarım. Bugün bunun hakkında konuşacağız teknik noktalarürünlerimizin veya hizmetlerimizin satış dönüşümünü artırabiliriz. Biri önemli noktalar iyi düşünülmüş Açılış sayfası mallarla. 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 yönlendirildiği sayfadır. Tek bir teklif için oluşturulmuştur: ürün, hizmet veya abonelik. Etkili bir açılış sayfası, başarılı çevrimiçi pazarlamanın temel taşıdır. Ürün piyasanın en iyisi olabilir, reklamlar mükemmel hale getirilir, ancak iyi bir açılış sayfası olmadan çabalar %100 sonuç vermez. Ziyaretçilere neyin teklif edildiğini ve bunu neden istemeleri gerektiğini anlatır. Aciliyet duygusu, hızlı karar almaya ve kullanıcının müşteri kategorisine geçişine katkıda bulunur.

Bir Çıkarma nasıl oluşturulur? Cevabın dizgi yeteneğinde yattığına 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 yer alacak olan açılış sayfası, yeni başlayanların düzen ile çalışmanın temellerini öğrenmesine yardımcı olacak, ancak dönüşüm metinlerinin ve hedef kitleyi anlamanın yerini almayacaktır. Bunları çeşitli Açılış sayfası oluşturucularını kullanarak da oluşturabilirsiniz.

Bu nedenle, bir açılış sayfası oluşturmadan önce kendinize şunu sorun:

• Bir kişi açılış sayfasına girdikten sonra ne yapacak? Bir şey satın alacak mı? Formu doldurun? Bültene abone olmak ister misiniz? Dönüşüm oranınızı izlemeden ö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, dalkavukluğun 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 olasılığı da o kadar artar.

Hepsi teklif edilmeli gerekli bilgi, ancak potansiyel bir müşteriyi bunaltmak ve uzaklaştırmak için yeterli değil.

İşimize geçmeden önce HTML ve CSS'ye hızlıca bir göz atalım. Nasıl çalıştıklarını anlamak bir iniş oluşturmaya yardımcı olacaktır.

HTML, web sitelerini oluşturmak için kullanılan bir tarayıcı işaretleme dilidir. İçine eklenen etiketler kullanılarak yazılmıştır köşeli ayraçlar, içeriği tanımlayan.

Etiket, doldurmanın etrafında açılır () ve kapanır ():

içerik

Nokta özelleştirmesi için addan sonra nitelikler eklenir:

içerik

CSS - nasıl konumlandırılacağını belirler HTML öğeleri. Seçicilerden, özelliklerden ve değerlerden oluşur:

#selector (özellik: değer;)

Seçici, html'deki belirli bir etiketin adıyla eşleşir. Değerleri değiştirerek ve özellikler ekleyerek düzenlenir dış görünüş. Aynı HTML'ye farklı CSS stilleri uygulayarak farklı sayfalar oluşturabilirsiniz.

Hızlı düzen için, önyüklemeyi temel alan minimal tasarıma sahip bir şablon kullanacağız. Bu, düzeni hızlandırmak için tüm dünyada kullanılan, kendi seçicileri olan bir sistemdir.

Mütevazı görünüyor.

Bu balıktan birkaç aşamada her zevke uygun bir alan oluşturulur.

Bir klasördeki dizin yapısı:

• index.html: Bu düzenleyeceğimiz ana dosyadır.
• /assets: işte yardımcı dosyalar:
• /css: dizin önyükleme ve simge stillerini içerir. Düzenlenecek dosya main.css'dir.
• /img: web sitesi görselleri için klasör.
• /yazı tipleri: simge yazı tipleri.
• /js: javascript dosyalarını önyükleme.

Adım 1: Başlığı Kullanma

Başlık ve alt başlıklar, teklifin değerini net bir şekilde aktarmaya yardımcı olacak önemli yerlerdir.

Sitenin başlığını ve adını değiştirin. Burada dizgi yeteneği gerekli değildir - metniniz ekranda sarı ile vurgulanan yerlere yazılır.

Adım 2. Kısalık, dönüşümün kız kardeşidir. Avantaj ve Fiyat Ekleme

4 bölüme ihtiyacınız olacak:

• avantajları;
• oranlar;
• incelemeler;
• eylem çağrısı.

Ana içeriğin gerekli bölümleri ekleyeceğimiz “ana” bölümünü tasarlayalım:

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

Nokta yerine dolguyu doldurun.

Avantajlar bölümü bu kodu gerektirecektir:

Avantajları
Hızlı

Güvenilir

Sed diam anne olmayan

Elit, sed diam nomy

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, conectetuer 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

Görsel içerik:

Şu ana kadar özensiz görünüyor ama paniğe gerek yok, devam ediyoruz.

Oranları yazın. İçerik ilk adıma benzer şekilde değişir. Genel açıklama“tarifeler” sınıfı ve üç tarife ile.

Tarife planları

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Erat volutpat. Enim ve minimum düzeyde olsa da, bu egzersizin her türlü sonucuyla birlikte yapılması gereken bir şey yok.

aylık/kişi başı

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

aylık/kişi başı

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

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üyle ilgilenmiyoruz ancak aşağıda değişen stil örneklerini ele alacağız.

3. Adım: Sinyallere ve harekete geçirici mesajlara güvenin

Hedef sinyallerinin kullanılması ziyaretçilere markanın güvenilir olduğunu gösterir. Sinyaller alınabiliyor Farklı türde, ancak klasikler müşteri incelemeleridir.

Musteri degerlendirmeleri

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco emek nisi ut aliquip her zamanki gibi:

Bir harekete geçirici mesaj oluşturun.

Bugün sipariş verirken yararlanın

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Erat volutpat. Ut wisi enim ad minim veniam, quis nostrud egzersizi ile birlikte her şeyden önce bir sonuç elde etmek için çaba sarfediyoruz:

İncelemeler potansiyel müşterilerin bir ürünü satın almaya karar vermesine yardımcı olur. Açıklık sağlamak için avatarlara ihtiyacımız var, bu yüzden bunları hemen her alıntının altına yazacağız.

Müşteri Adı.

Adım 4: Şebeke Entegrasyonu ve Mobil Uyumluluk

Izgarayı uygulamak için Bootstrap konteynerlerine ihtiyacımız var. İzin verilen sütun segmentlerinin toplam sayısının 12 olduğunu unutmamak önemlidir. Sınıf, içerik görüntüleme genişliğini tanımlar. Bu hazır ızgaranın avantajı, kapların uyarlanabilirlik göz önünde bulundurularak tasarlanması ve hemen uygulanabilir olmasıdır. mobil cihazlar. Detaylı Açıklama resmi sitede. Ağ buna benziyor.

“Ana” içeriği bir kaba sarılacaktır. Bunu yapmak için üst kısmında yazılmıştır:

… .

Bloğun ekranın tüm genişliğine sığmasını istiyorsanız içine konteyner yerleştirilir. Burada bir jumbotron ve bir eylem çağrısı olacak.

Üst üste istiflenmesi gereken tüm elemanlar sıra ayırıcılarla sarılacaktır.

Artık önyükleme ızgarasına odaklanarak sütunların genişliğini ayarlayabiliriz. Sardıktan sonra dolgu ekranın kenarlarına yapışmayı bıraktı ve düzgün girintiler ortaya çıktı.

Col-lg-4 sütun sınıfını kullanarak fiyatları arka arkaya ayarlayın. Satırların içinde, sarma için ayrı div'ler yazmaya artık gerek yok, bunları boşlukla ayrılmış mevcut div'lerle birleştirebilirsiniz.

Benzer şekilde incelemeler ve faydalar bölümü için sütunlar belirledik. Öğeyi yana taşımak istiyorsanız col-lg-offset-2 ofset sütun sınıfını kullanın. Sondaki sayı kaç temel sütunun kaydırılacağını belirler.

Adım 5. Yazı Tipleri ve Simgeler

Google Font başlıkları için fontlar uyguluyoruz. Seçildiğinde, içe aktarma sekmesini açın ve buradaki verileri main.css dosyasına kopyalayın. Ayrıca yeni yazı tipinin uygulandığı dosyaya başlık seçicileri de ekliyoruz.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* başlıklar için yazı tipini içe aktar */
.navbar markası,
h1,
h2,
h3,
h4,
h5,
h6(
yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif; /* Googlefont çıktısı */
}

Açıklık getirmek gerekirse, avantajları, önyükleme kümesindeki metin merkezi ve FontAwesome simgelerine sahip bir sınıftır.

Bu hazırlığı tamamlar.

En popüler üç türü kullanıyoruz: teklifli, formlu ve geri sayım sayaçlı. Düzen tamamlandıkça şablon efektlerle desteklenecektir.

Ana gövde arka planını ve dolgusunu ilk ekranı kaplayacak şekilde ayarlayın.

Jumbotron (
arka plan: #f5f5f5 url(../img/fon.jpg) üst orta tekrarsız;
maksimum genişlik: %100
üst dolgu: 250 piksel;
alt dolgu: 200 piksel
metin hizalama: ortala;
}

Jumbotron başlığının boyutunu h2'den h1'e değiştirin. Daha sonra değiştirilmesi gereken öğelerin stillerini belirliyoruz.

Simgelerle başlayalım.

Faydaları i(
renk: #cac4c4;
}

Pound işaretinden sonra bir renk belirtilir. Html renk tablolarını veya bir resim düzenleyiciyi kullanarak kendi seçeneğinizi belirleyebilirsiniz.

Bölüm başlıkları için girinti

bölüm h2 (
üst dolgu: 30 piksel;
kenar boşluğu alt: 25 piksel;
}

Tarifelerin görünümünü sıraladık. Kolaylık olması açısından noktasal olarak seçmek istediğimiz öğeler için kendi sınıflarımızı oluşturuyoruz.

Tarif No.1
$10

aylık/kişi başı

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Ve bir sürü CSS. Bölümlerin hangi yerlerden sorumlu olduğu açıklamalarda yazılır - /* eğik çizgiler arasında yıldız işaretiyle */

/* =========Tarif stilleri======== */
/* Genel form tarife */
.pricing_item(
arka plan: #f2f2f2;
konum: göreceli;
ekran: -webkit-flex;
ekran:esnek;

esnek yön: sütun;

öğeleri hizala: uzat;
metin hizalama: ortala;
-webkit-flex: 0 1 330px;
esnek: 0 1 330 piksel;
dolgu: 2em 3em;
marj: 1 em
renk: #262b38;
imleç: varsayılan;
taşma: gizli;

}
/* tıklandığında arka planı değiştir */
.pricing_item:hover (
renk: #444;
arka plan: #daebef;
}
/* her tarifede ayrı fiyat etiketi */
.pricing_item:ilk çocuk .price (
arka plan: #9ba9b5;
}
.pricing_item:n'inci-çocuk(2) .price (
arka plan: #1f6098;
}
/* geniş ekranlarda tarifenin orta sütununun doldurulması ve vurgulanması */
@media ekranı ve (minimum genişlik: 66.250em) (
.pricing_item(
marj: 1,5 em0;
}
.özellikli(
z-endeksi: 10;
kenar boşluğu: 0;
yazı tipi boyutu: 1,15em
}
}
/* başlık */
.pricing_item h3(
yazı tipi boyutu: 2em
marj: 0,5em 0 0;
renk: #1d211f;
}
/* fiyat etiketi desteği */
.fiyat(
yazı tipi boyutu: 2em
yazı tipi ağırlığı: kalın;
renk: #fff;
konum: göreceli;
z-endeksi: 100;
satır yüksekliği: 95 piksel;
genişlik: 100 piksel
yükseklik: 100 piksel;
kenar boşluğu: 1,15 em otomatik 1 em;
sınır yarıçapı: %50
arka plan: #77a5cc;
-webkit geçişi: renk 0,3 sn, arka plan 0,3 sn;
geçiş: renkli 0,3 sn, arka plan 0,3 sn;
}
/* para birimi */
.para birimi(
yazı tipi boyutu: 0,5em
dikey hizalama: süper;
}
/* cümlenin iyileştirilmesi */
.cümle(
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,15em0;
}
/* tarife sipariş butonu */
.pricing_item düğmesi(
yazı tipi ağırlığı: kalın;
üst kenar boşluğu: otomatik;
dolgu: 1em 2em;
renk: #fff;
kenarlık yarıçapı: 5px
arka plan: #428bca;
-webkit geçişi: arka plan rengi 0,3 sn;
geçiş: arka plan rengi 0,3 sn;
}
/* butona tıklandığında rengi değiştir */
.pricing_item düğmesi: üzerine gelin,
.pricing_item düğmesi:odaklanma(
arka plan rengi: #285e8e;
}
/* tarife geçmişi*/
.bg-2 (
arka plan: #dddddd;
}

Sonuç

Musteri degerlendirmeleri. Onlara düzgün bir görünüm verelim, yerini belirleyelim.

/* =========Bağlantı stilleri======== */
referanslar (
dolgu: 4em0;
metin hizalama: ortala;
}
.referanslar .avatar img (
sınır yarıçapı: %50
şamandıra: sol;
ekran: satır içi;
sağ kenar boşluğu: 1em;
genişlik: 65 piksel
yükseklik: 65 piksel;
kenar boşluğu alt: 30 piksel;
}
.referanslar .avatar p(
metin hizalama: sol;
dolgu üst: 1em;
renk: #5d5d5d;
yazı tipi ağırlığı: 900
}

Son harekete geçirici mesajı ve altbilgiyi süslemeye devam ediyor.

/* Aksiyon */
.aksiyon(
arka plan: #476177;
minimum yükseklik: 180 piksel;
genişlik: %100
dolgu: 4em0;
metin hizalama: ortala;
}
.eylem h2(
renk: #fff;
yazı tipi ağırlığı: 300

}
.actionp(
renk: #fff;
metin gölgesi: 0 1px 2px rgba(0, 0, 0, .2);
yazı tipi boyutu: 1,2em
}
.action .konteyner(
üst kenar boşluğu: 3em;
}
/* Altbilgi */
altbilgi(
arka plan: #333333;
dolgu: 1em0;
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
üst kenar boşluğu: 0,5em;
}

Alt bilgi düğmesine yerleşik önyükleme sınıfı btn-default atanır.

Şablonu canlandırıyoruz. İlk ekranda metin animasyonunun yanı sıra bölümler için düzgün kaydırma ve düğmeler uygulayacağız.

Geçişlerin işe yaraması için bölüm sınıflarının bir kısmını avantajlar ve tarifeler için kimlikle değiştireceğiz. Ve butonlara id linklerini yazacağız. Ekran - sarı işaretleyiciyle vurgulanan şeye eklenen şey.

Düğmeler için girintileri ayarlayın - jbutton. Tıklamayla kaydırma işe yarıyor, ancak çok aniden.

Yumuşak 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 sorunsuz.

Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) kullanarak metne animasyon ekleme. Hazır açık kaynak, herhangi bir web sitesinde kullanılabilir. Github'dan aldığımız dosyayı css klasörüne atıp yolunu yazıyoruz.

Efektleri buradan seçiyoruz: https://daneden.github.io/animate.css/ . FadeInDown'u seçtik. Bu şekilde kodla yazılmıştır:

Artık sayfa yüklendiğinde veya yenilendiğinde metin canlandırılacaktır. Hazır.

Bir ziyaretçiye ne kadar çok form alanı sunulursa, bunları doldurma olasılıkları da o kadar azalır. Yalnızca gerekli olan minimum bilgileri isteyin.

benzetme yoluyla bir araya getirilmiştir. Arka planları ve renkleri değiştireceğiz. Ve elbette bir form ekleyeceğiz.

Paralaksla başlayalım.

Jumbotron arka planını şeffaf olarak değiştirin:

arka plan: şeffaf;

Komut dosyasını kafanın içine yerleştirin:

$(pencere).scroll(function(e)(
paralaks();
});
paralaks()(
var kaydırılan = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Gövdedeki ilk satır paralaks kabıdır:

Ve CSS'de davranışı şöyledir:

bgparalaks(
arka plan: url(/../img/fon.jpg) tekrarla;
konum: sabit;
genişlik: %100
yükseklik: %300;
üst:0;
sol:0;
z-endeksi: -1;
}

Paralaks hazır. Ancak kodda değişiklik yapmak ve yeni arka plan renk şemasının yeniden atanmasını gerektirir.

Menüyü koyulaştırma:

gezinme çubuğu-varsayılan(
arka plan rengi: #333;
kenarlık rengi: #444;
renk: koyu gri;
sınır yarıçapı: 0
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
renk: koyu gri;
arka plan rengi: rgba(0, 0, 0, 0,5);
}

Jumbotron'daki cümleyi yenisiyle - form koduyla - değiştiriyoruz:

Açılış sayfası ziyaretçileri müşteriye dönüştürüyor
Quisque tincidunt dui auguesuspendisse lorem vel diam consectetur posuere posuere posueret mauris araç tortor honcus vulputate massa.

• 
  
  
  


• 
  

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

  
  

Ve görünüşü reçete et

/* biçim */
.headform-listesi(
liste stili türü: yok;
satır yüksekliği: 26 piksel;
yazı tipi ağırlığı: 400
dolgu: 0px
kenar boşluğu alt: 40 piksel
}
.kafa formu(
taşma: gizli;
konum: göreceli;
arka plan rengi: rgba(0,0,0,.4);
dolgu: 35 piksel 40 piksel;
kenarlık yarıçapı: 8px
}
giriş, düğme, seç, metin alanı (
genişlik: %100
kenar boşluğu alt: 10 piksel;
}
.headform-list li .fa (
konum: mutlak;
üst: 0 piksel;
sol: 0 piksel;
genişlik: 42 piksel
yazı tipi boyutu: 24 piksel;
metin hizalama: ortala;
}
.headform-list li (
konum: göreceli;
minimum yükseklik: 38 piksel;
sol dolgu: 62px;
kenar boşluğu alt: 20 piksel
}
.jumbotronp(
renk: #fff;
yazı tipi boyutu: 16 piksel;
yazı tipi stili: italik;
}

Jumbotronun metni de değişiklik gerektirdiğinden buraya geldi.

Oranları değiştiriyoruz.

/*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-direction: sütun;
esnek yön: sütun;
-webkit-hizalama-öğeleri: uzatma;
öğeleri hizala: uzat;
metin hizalama: ortala;
-webkit-flex: 0 1 330px;
esnek: 0 1 330 piksel;
dolgu: 2em 3em;
marj: 1 em
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);
}
/* tıklandığında arka planı değiştir */
.pricing_item:hover (
renk: #444;
arka plan: #ddd; /* satır değişti */
}

Şimdi şöyle görünüyorlar - şeffaf arka plan ve yuvarlatılmış köşeler.

Şablon hazır.

Yine jumbotronun dolgusunu değiştiriyoruz ve önceki şablona benzeterek yeni bir arka plan için şablonu yeniden boyuyoruz. Sayaç komut dosyasını bağlarız:

HTML





Zaman beklemiyor
Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Erat volutpat. Enim ve minimum düzeyde olsa da, bu egzersizin her türlü sonucuyla birlikte yapılması gereken bir şey yok. Duis autem vel eum iriure dolor in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui mülayim praesent luptatum zzril delenit augue duis dolore te feugait nulla facili si.

• 
  

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

  
  


• 
  

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