Selamlar! Sizinle Denis Gerasimov, site sitesi ve hala uyarlanabilir ve modernken bir açılış sayfasını nasıl oluşturacağınız hakkında konuşacağız. Videonun metin sürümünü görüntülüyorsunuz.
Gelecekteki inişimiz için bazı gereksinimler belirleyelim:
Hızlı, yani hızlı bir şekilde yüklendi. Bu nedenle, HTML ve CSS'de kendimiz yapacağız.
uyarlanabilir, yani ekranlara göre ayarlanmış farklı cihazlar. Açılış sayfamıza PC, tablet, akıllı telefon vb. cihazlardan erişilebilmesi için. ve tüm cihazlarda güzel ve rahat görünüyordu.
Modern, yani üzerine bir kaydırıcı yerleştirebilir, çeşitli kalıcı pencereler veya bazı açılır pencere ipuçları.
Güzel. Yani açılış sayfamızda organik görünecek simgeler ve düğmeler ekleyebiliriz.
Modern ve güzel bir açılış sayfasını kendiniz nasıl oluşturabilirsiniz?
En azından gerekli temel bilgi html ve css, yani html yapısını değiştirmek için en az bir css sınıfını nasıl ekleyeceğinizi hayal etmelisiniz. dış görünüş. eğer bu konuda biraz zorluk çekiyorsan sana tavsiye edebilirim ücretsiz kurslar Evgeny Popov'dan (metnin sonunda ⇓ bulabileceğiniz sunumdaki indirme bağlantıları), birkaç ders içeren, izledikten sonra ne olduğunu anlamaya başlayacaksınız (bağlantı).
Önyükleme çerçevesi belgelerini okuyun. Çerçeveyi kendiniz seçebilirsiniz. Bu, sitemize kolayca gömülebilen stil kümeleri ve java betikleri içeren özel bir çerçevedir ve çok organik görünürler. Ayrıca responsive bir tasarım oluşturmamızı sağlayacak bir petek yapısı içermektedir.
Site yapısını seçin. Yani, gelecekteki sitemizin çerçevesinin nasıl görüneceğini hayal edin. Örneğin, üstte bir başlık, sözde başlık olmasını istiyoruz, ardından bir tür resim ve bir abonelik formu yerleştirilir. Bu yapıyı, çerçeveyi oluşturmamız gerekiyor.
Site yapısını oluşturmak için yapıcıyı kullanın. Yapıcı şu adreste bulunur: www.
düzen.
iletişim, onunla, özel beceri ve bilgi olmadan bile sitenin yapısını oluşturabilirsiniz.
Ortaya çıkan yapıyı bir bilgisayara indirin ve tasarımını değiştirin. Hazır iniş bundan sonra güvenle sunucuya yükleyebilirsiniz.
hadi uygulamaya geçelim
Benim tarafımdan oluşturulan iniş örneğinde lp..Direct. Bootstrap, kullanabileceğiniz simgeler gibi çeşitli tasarım öğeleri içerir. Ayrıca, yukarıdan veya aşağıdan kapatılabilen kalıcı açılır pencereler yapabileceğiniz çeşitli java betikleri içerir. Bu, prensipte kötü çalışmayan, iyi bir dönüşüme sahip olan en basit iniş örneğidir.
Belgelere bir göz atalımönyükleme
Önyükleme çerçevesi şu adresten indirilebilir: www.
getbootstrap.
iletişim. Bu ürün Twitter'ın yaratıcılarındandır. Bu çerçeve sürekli gelişmektedir ve şu an en son sürümü 3.3.4'tür. Bir siteyi ona bağlamak için bu arşivi indirmeniz ve belirli satırları yazmanız gerekir. HTML Kodu. Sonuç olarak, css'ye, bileşenlere, javascript'e erişebileceksiniz. Önyüklemeyi indirmeden, CDN teknolojisini kullanarak, yalnızca koda belirli satırlar yazarak da bağlayabilirsiniz. Bu teknoloji, ziyaretçinize fiziksel olarak en yakın sunucuyu seçer ve ondan stil dosyaları veya java betikleri yükler. Bu, açılış sayfanızın yüklenmesini hızlandırır. Bu durumda, bu kod simge durumuna küçültülür.
Bootstrap'i bağladıktan sonra sete erişebileceksiniz. css stilleri. 12 kolondan oluşan Izgara Sistem petek yapıya sahiptir. Bu sütunların nasıl oluşturulduğunu anlamanız gerekir. Diyelim ki sitenizde 2 sütun olmasını istiyorsunuz. Biri sayfanın 2/3'ünü, diğeri 1/3'ünü kaplar. Örneğin, büyük bir sütuna bir resim eklemek istiyorsunuz ve daha küçük bir formda doldurmak için. Bunu yapmak için, bir satır yazmanız, içinde stil 8 olan bir sütun ve önyükleme web sitesinde belirtilen 4'lü bir sütun yazmanız gerekir. İhtiyacınız olan stilleri yazdıktan sonra sitenizi mobil cihazdan ziyaret ettiğinizde ikinci sırada gelen sütun aşağı iniyor. Nihayetinde, senin tasarım duyarlı hale gelir. Üç eşit sütunlu bir yapı istiyorsanız, o zaman 12'yi 3'e bölmeniz ve zaten sayfa kodunda 4 rakamıyla kodu yazmanız gerekir. Ve benzeri.
Petek yapı ile çalışırken kafanız karışmasın diye, size yapılandırıcıda iş sağladım. www.layoutit.com. Tasarımcı ile daha detaylı çalışmayı bir sonraki yazıda yayınlayacağım.
Bootstrap ayrıca açılış sayfanız için seçebileceğiniz ve koda yazabileceğiniz bir dizi farklı başlık stili içeren Tipografi dosyaları içerir. Bu bölümün içinde Hizalama sınıfları da vardır, örneğin metnin ortalanmasını istiyorsanız, belirli kodu kopyalayıp iniş koduna yapıştırmanız yeterlidir. Listeler dosyaları ve çok daha fazlası da vardır. ile tablolar oluşturabilirsiniz. farklı stiller Tablolar bölümünde, Formlar formları (formları bir sütunda, bir satırda, ek karakterler içeren bir form, tüm satırda bir form vb. yapabilirsiniz). Düğmeler bölümünde, açılış sayfanızdaki düğmelerin stillerini seçebilirsiniz. Düğmelerin rengini, boyutunu, etkin veya etkin olmayan düğmeleri ayarlayabilirsiniz. Görüntüler bölümünde, görüntü stillerini ayarlayabilirsiniz. Örneğin, görüntüyü yuvarlak yapmak için belirli bir kod girmeniz gerekir. Yardımcı Sınıflar bölümünde metin rengini, metin arka planını vb. değiştirebilirsiniz.
Ayrıca glif simgeleri gibi çeşitli bileşenlere de erişebiliyoruz. Siteye herhangi bir simge eklemek için belirli bir yayılma sınıfı (yayılma sınıfı) belirtmeniz gerekir. Her bir ikonun görselinin altında, kodun alınması için hangi sınıfın yazılması gerektiği yazmaktadır. istenen görüntü açılış sayfanızda. Açılır menülere, Düğme gruplarına, Navs navigasyonuna ve daha fazlasına da erişebilirsiniz. Tüm bu özellikleri, bootstrap sitesi sayfasının sağ tarafındaki listede bölümlere göre görüntüleyebilirsiniz.
JavaScript'e erişim, formların eklenebileceği kipler oluşturmamızı sağlar. Bu pencereler aynı zamanda petek yapıda olup her türlü mobil cihaza uyum sağlayabilmektedir. Java betiklerinde çalışan çeşitli düğmeler, açılır listeler ve diğer işlevleri de ekleyebilirsiniz.
Bu, bootstrap ve yapısına küçük bir girişti. Bir sonraki makalede, iniş yapısını, gelecekteki inişimizin uyarlanabilir yapısı olan özel bir kurucuda oluşturacağız.
Selamlar sevgili okurlarım. Bugün hakkında konuşacağız teknik noktalar, hangi ile artırabiliriz satış dönüşümü onların mal veya hizmetleri. Biri önemli noktalar iyi düşünülmüş Açılış sayfası mal ile. Oluşturulması hakkında daha fazla konuşacağımız ve hazır sayfa kodlarını 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şturulur: ürün, hizmet veya abonelik. Etkili bir açılış sayfası, başarılı çevrimiçi pazarlamanın temel taşıdır. Ürün piyasadaki en iyisi olabilir, reklamlar mükemmel hale getirilir, ancak iyi bir açılış sayfası olmadan çabalar% 100 sonuç vermez. Ziyaretçilere neyin sunulduğunu ve neden onu istemeleri gerektiğini söyler. Aciliyet duygusu, hızlı karar vermeye ve kullanıcının müşteri kategorisine geçişine katkıda bulunur.
İniş 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. Aşağıda örnekleri verilecek olan açılış sayfası, yeni başlayanların mizanpajla çalışmanın temellerini öğrenmesine yardımcı olacak, ancak dönüşüm metinlerinin ve hedef kitleyi anlamanın yerini almayacaktır. Bunları ayrıca çeşitli açılış sayfası tasarımcıları.
Bir açılış sayfası oluşturmadan önce kendinize şu soruyu sorun:
Bir kişi açılış sayfasına girdikten sonra ne yapacak? Bir şey satın alacak mı? Formu doldurun? Bültene abone misiniz? Dönüşüm oranınızı izlemeden önce net hedefler belirleyin.
Rakiplerim kimler? Aslında bunlar üç soru: kimler, ne kadar başarılılar ve başarıları nasıl uygulanabilir? Taklit, dalkavukluğun en içten şeklidir. Rakipler işe yarayan şeyi yapıyorsa, sitenizde tekrarlayın.
İzleyicim kim? Nişinizi ve hedef kitlenizi ne kadar iyi anlarsanız, çabalarınızın karşılığını alma olasılığı o kadar artar.
Gerekli tüm bilgileri sunmanız gerekir, ancak potansiyel bir müşteriyi bunaltacak ve uzaklaştıracak kadar değil.
Bir açılış sayfası oluşturma + aptallar için kodlama örnekleri
İşe başlamadan ö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- sitelerin görselleştirilmesi için tarayıcı biçimlendirme dili. içine alınmış etiketler kullanılarak yazılmıştır. açılı ayraçlar, içeriği tanımlayan.
Etiket açılır (<>) ve dolgunun etrafını () kapatır:
<тег>içerikтег>
Nokta özelleştirme için, özellikler adından sonra eklenir:
<тег атрибут="значение">içerikтег>
CSS - nasıl konumlandırılacağını belirler HTML öğeleri. Seçiciler, özellikler 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ştirmek ve özellikler eklemek görünümünü ayarlar. Aynı HTML'ye farklı CSS stilleri uygulayarak farklı sayfalar oluşturabilirsiniz.
5 ilk adım
Hızlı düzen için, önyüklemeye dayalı 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 site 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örüntüleri için klasör.
/yazı tipleri: simge yazı tipleri.
/js: önyükleme 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ı olacak kilit 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, din değiştirmenin kız kardeşidir. Avantajlar ve Oranlar 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:
…..
…..
…..
…..
Noktalar yerine doldurma ile doldurun.
Faydalar bölümü şu kodu gerektirecektir:
Avantajlar
Hızlı
Güvenilir
Sed diam nonummy
karlı
Elit, sed diam nonummy
teknik olarak
Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy
Güvenilir
Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy
karlı
Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy
teknik olarak
Lorem ipsum dolor sit amet, conctetuer adipiscing
Güvenilir
Lorem ipsum dolor sit amet, conctetuer adipiscing
karlı
Lorem ipsum dolor sit amet, conctetuer adipiscing
Görsel içerik:
Şimdiye kadar özensiz görünüyor ama paniğe kapılmak için bir neden 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, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim and minimum veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat.
1 numaralı Tarife
$10
aylık/kişi başı
Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek
Lorem ipsum dolor
10 Lorem ipsum
tarife №2
$20
aylık/kişi başı
Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek
Lorem ipsum dolor
10 Lorem ipsum
Tarife No.3
$30
aylık/kişi başı
Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek
Lorem ipsum dolor
10 Lorem ipsum
Öyle görünüyor.
Gelecekteki açılış sayfasının görünümüyle ilgilenmiyor olsak da, aşağıda değişen stil örneklerini ele alacağız.
3. Adım: Güven sinyalleri ve harekete geçirici mesaj
Hedef sinyallerinin kullanılması, ziyaretçilere markanın güvenilir olduğunu gösterir. Sinyaller alınabilir Farklı türde, ancak klasikler müşteri incelemeleridir.
Musteri degerlendirmeleri
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. En az ve en az maliyetle egzersiz yapmak, her zaman mümkün olan en kısa sürede çalışır:
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo."
Bir harekete geçirici mesaj ayarlayın.
Bugün sipariş verirken yararlanın
Lorem ipsum dolor sit amet, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minimum veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat:
Yorumlar, potansiyel müşterilerin bir ürünü satın almaya karar vermesine yardımcı olur. Netlik için avatarlara ihtiyacımız var, bu yüzden onları hemen her alıntının altına yazacağız.
Müşteri Adı.
4. Adım: Şebeke Entegrasyonu ve Mobil Dostu
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 düşünülerek tasarlanmış olması ve hemen uygulanabilir olmasıdır. mobil cihazlar. Detaylı Açıklama resmi sitede Ağ böyle görünüyor.
"Ana" içeriği bir kaba sarılacaktır. 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, içine kap yerleştirilir. Burada bir jumbotron ve harekete geçirici mesaj olacak.
Üst üste istiflenmesi gereken tüm elemanlar çizgi 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ı, düzgün girintiler belirdi.
col-lg-4 sütun sınıfını kullanarak fiyatları arka arkaya ayarlayın. Satır satırlarının içinde, kaydırma için ayrı div'ler yazmaya artık gerek yok, bunları bir boşlukla ayırarak mevcut olanlarla birleştirebilirsiniz.
Benzer şekilde, incelemeler ve avantajlar bölümü için sütunlar belirledik. Elemanı 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 Yazı Tipi başlıkları için yazı tipleri 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 ekleriz.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* başlıklar için içe aktarma yazı tipi */ .navbar markası, h1, h2, h3, h4, h5, h6( yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif; /* Google yazı tipi çıktısı */ }
Anlaşılır olması için avantajlar, metin merkezi adını söyleyen bir sınıf ve önyükleme setinden FontAwesome simgeleridir.
Bu hazırlığı tamamlar.
Açılış sayfası: teklif, paralaks ve sayaç içeren kod örnekleri
En popüler üç türü kullanıyoruz: bir teklifle, bir formla ve bir geri sayım sayacıyla. Düzen tamamlandığında, şablon efektlerle desteklenecektir.
Örnek 1: bir teklifle
Ana gövde arka planını ve dolguyu ilk ekranı kaplayacak şekilde ayarlayın.
Jumbotron ( arka plan: #f5f5f5 url(../img/fon.jpg) üst orta tekrarsız; maksimum genişlik: %100 üst dolgu: 250px; alt dolgu: 200px metin hizalama: merkez; }
Jumbotron başlığının boyutunu h2'den h1'e değiştirin. Ardından, değiştirilmesi gereken öğeler için stilleri yazıyoruz.
Simgelerle başlayalım.
Faydaları ben( 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: 30px; kenar boşluğu: 25 piksel; }
Tarifelerin görünümünü sıraya koyduk. Kolaylık sağlamak için noktasal olarak seçmek istediğimiz öğeler için kendi sınıflarımızı oluşturuyoruz.
1 numaralı Tarife
$ 10
aylık/kişi başı
Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek
Lorem ipsum dolor
10 Lorem ipsum
Ve bir sürü CSS. Bölümlerin hangi yerlerden sorumlu olduğu yorumlarda - /* eğik çizgiler arasında yıldızlarla yazılır */
/* =========Tarif stilleri======== */ /* Genel form tarife */ .pricing_item( arka plan: #f2f2f2; konum: göreli; ekran: -webkit-flex; ekran:esnek;
}
/* tıklamada arka planı değiştir */ .pricing_item: üzerine gelin ( renk: #444; arka plan: #daebef; }
/* her tarifede ayrı fiyat etiketi */ .pricing_item:ilk-çocuk .price ( arka plan: #9ba9b5; }
.pricing_item:nth-child(2) .price ( arka plan: #1f6098; }
/* geniş ekranlarda, tarifenin orta sütununu doldurma ve vurgulama */ @medya ekranı ve (min. genişlik: 66.250em) ( .pricing_item( marj: 1.5em0; }
.özellikli( 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; }
/* fiyat etiketi desteği */ .fiyat( yazı tipi boyutu: 2em yazı tipi ağırlığı: kalın; renk: #fff; konum: göreli; z-endeksi: 100; satır yüksekliği: 95px; genişlik: 100 piksel yükseklik: 100 piksel; marj: 1,15em otomatik 1em; sınır yarıçapı: %50 arka plan: #77a5cc; -webkit geçişi: renkli 0,3 saniye, arka plan 0,3 saniye; geçiş: renkli 0,3 saniye, arka plan 0,3 saniye; }
/* para birimi */ .para birimi( yazı tipi boyutu: 0.5em dikey hizalama: süper; }
/* cümlenin inceltilmesi */ .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: sola; }
/* liste öğeleri */ .pricing_item li( dolgu: 0.15em0; }
/* tarife sipariş butonu */ .pricing_item düğmesi( yazı tipi ağırlığı: kalın; kenar boşluğu üst: otomatik; dolgu: 1em 2em; renk: #fff; sınır yarıçapı: 5 piksel arka plan: #428bca; -webkit-geçişi: arka plan rengi 0,3 saniye; geçiş: arka plan rengi 0,3 saniye; }
/* buton tıklandığında rengi değiştir */ .pricing_item düğmesi: üzerine gelin, .pricing_item düğmesi:odak( 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, yeri belirleyelim.
Son harekete geçirme ifadesini ve altbilgiyi süslemek için kalır.
/* Aksiyon */ .aksiyon( arka plan: #476177; minimum yükseklik: 180px; genişlik: %100 dolgu: 4em0; metin hizalama: merkez; }
.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 }
.eylem .kapsayıcı( kenar boşluğu: 3em; }
/* Alt Bilgi */ altbilgi( arka plan: #333333; dolgu: 1em0; metin hizalama: sağ; }
alt bilgi 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,5 cm; }
Altbilgi 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 yumuşak kaydırma ve düğmeler uygulayacağız.
Geçişlerin çalışması için, bölüm sınıflarının bir kısmını faydalar ve tarifeler için id ile değiştireceğiz. Ve butonlara id linkleri yazacağız. Ekran - sarı bir işaretleyici ile vurgulanana eklenenler.
Düğmeler için girintileri ayarlayın - jbutton. Tıklamada 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 sorunsuz.
Animate.css ile metne animasyon ekleme ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Hazır açık kaynak, herhangi bir web sitesinde kullanılabilir. Dosyayı github'dan css klasörüne atıyoruz ve yolu yazıyoruz.
Efektleri buradan seçin: https://daneden.github.io/animate.css/. FadeInDown'u seçtik. Böyle bir kodla yazılmış:
Artık sayfa yüklendiğinde veya yenilendiğinde metin animasyonlu olacaktır. Hazır.
Örnek 2: şekil ve paralaks efekti ile
Bir ziyaretçiye ne kadar çok form alanı sunulursa, onları doldurma olasılığı o kadar düşüktür. Yalnızca minimum gerekli bilgileri isteyin.
benzetme yoluyla bir araya getirilmiştir. Arka planları ve renkleri değiştireceğiz. Ve tabii ki bir form ekleyeceğiz.
Şimdi böyle görünüyorlar - şeffaf arka plan ve yuvarlatılmış köşeler.
Şablon hazır.
Örnek 3: geri sayım sayacı ile
Yine jumbotronun dolgusunu değiştiriyoruz ve şablonu önceki şablona benzeterek yeni bir arka plan için yeniden boyuyoruz. Sayaç betiğini bağlarız:
HTML
zaman beklemez
Lorem ipsum dolor sit amet, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim and minimum veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore ab feugiat nulla facilisis at vero eros et acumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy.
Stil dosyasında, formun alt yarıçapını kaldırın, düğmeyi akla getirin.
Ek olarak, önceki örneğe benzer şekilde menü yeni bir arka plan altında yeniden renklendirildi ve jumbotrondaki metinlerin stili değiştirildi. Sonuç.
Alt kısım
Bu, Açılış Sayfası örneklerini tamamlar, ancak kodun üzerinde daha fazla çalışılması gerekir.
Açılış sayfası bir Ferrari gibi hızlı ve iyi olmalıdır - sayfa yükleme süresinin hemen çıkma oranları üzerinde büyük etkisi vardır. Maksimum verimlilik için görüntüleri optimize edin, hazır komut dosyalarının ve stillerin boyutunu en aza indirin.
Ders, size gerçek müşteriler getirmenize yardımcı olacak iyi açılış sayfaları oluşturmaya ilişkin örnekler sunar ve siz de yeni bir şeyler öğrenirsiniz. Beğenip tekrar paylaşalım. Yakında görüşürüz.
Derste sunulan tüm kaynakları hazır sayfalar olarak indirmek için butonlardan birine tıklayınız. sosyal kale açmak ve bağlantıyı almak için.