Açılış şablonları. Açılış sayfası şablonları

» Serbest iniş sayfa şablonları WordPress - TOP 30

Bu makalede özellikle ele alınacak en iyi iniş Size uygun olabilecek WordPress şablonları. Hepsinde tasarımın ekran görüntüsü ve demo sürümü yer alacak, böylece temayı değerlendirebilir ve beğenirseniz hemen indirebilirsiniz.

Çoğu zaman WordPress için açılış sayfası şablonları bir ücret karşılığında dağıtılır, ancak sizin için topladım en iyi ve ücretsiz Aramanızı kolaylaştırmak için bu makalede.

fazla çaba harcamadan bir web sitesi oluşturmanıza yardımcı olacak tek sayfalık bir temadır. Öte yandan profesyonelce çizilmiş bir tasarıma, paralaks kaydırmaya sahip ve bu da bu temayı “güzel” olarak adlandırmamızı sağlıyor. Bu şablon yeni başlayanlar ve küçük işletmeler için uygundur.

çok işlevli bir WordPress temasıdır. Canlı bir arayüz, klasik paralaks efekti ve temayı izlemeyi daha da keyifli hale getiren diğer animasyonları içerir. Zerif Lite, kod açısından da iyi yazılmış, tarayıcılar arası bir temadır.

Alhena Lite, çevrimiçi mağazanızı kolayca kurmanıza olanak tanıyan WooCommerce eklentisiyle tamamen entegre olan ücretsiz bir kurumsal WordPress temasıdır.

- bu saf, basit iş Tamamen duyarlı ve popüler özelliklerin çoğunu içeren tema kolay yaratım alan.

Palmas, kişisel veya moda blogu çalıştırmak için uygun, açık renklerde yapılmış modern bir temadır. Bu şablon ayrıca Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache ve diğerleri gibi eklentileri de destekler.

Brasserie, restoran, kafe veya mutfak sitesi için mükemmel olan basit bir WordPress şablonudur. Animasyon efektlerinin yanı sıra içerir çok sayıda işlevsellik.

XT Corporate lite, küçük bir ürün veya hizmete uygun, basit ve minimalist bir temadır.

açık renklerde yapılmış hoş bir temadır. Çeşitli animasyonlar ve görsel olarak büyüleyici geçişler ve paralaks efekti içerir. Ayrıca Freesia Empire, Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress ve WooCommerce gibi eklentileri destekler.

küçük veya orta ölçekli işletmelerin tanıtımına uygun bir konudur. Çok sayıda işlev ve eklenti içerir. tam kontrol iniş yapısı.

çok yönlü bir konudur ve büyük miktar işlevsellik. Uyarlanabilir, tüm öğeler paralaks efektiyle canlandırılmıştır. Tek sayfanın özelleştirilmesi kolaydır ve değişiklikleri gerçek zamanlı olarak görüntülemenize olanak tanır. Mevcut açılış teması aynı zamanda çok sayıda temel WordPress eklentisini de desteklemektedir.

FotoGraphy, fotoğrafçılara veya tasarımcılara uygun bir açılış sayfasıdır. Basitlik ve çok sayıda işlevin varlığı, onu daha da ölçeklenebilir ve özelleştirilebilir hale getirir.

İntegral Tema, yaratıcılar, işletme sahipleri veya acenteler için uygun, tek sayfalık bir paralaks temasıdır. Kurulumu yalnızca birkaç dakikanızı alacaktır.

Square, her türlü web sitesi için kullanılabilecek minimalist bir temadır. Küçük ve orta ölçekli işletmeler için en uygunudur. Square, birçok popüler WordPress eklentisi için yapılandırılmıştır ve ayrıca SEO açısından optimize edilmiştir.

Canlandırmak yüksek kaliteli bir temadır. Kaliteyi ve güzelliği tek şişede birleştirdiği için buna premium derdim. Ayrıca birçok popüler eklentiyi de destekler ve özelleştirilmesi kolaydır.

Latte fotoğrafçılar için bir şablondur. Portföyünüzü yeterince gösterebilmeniz ve kendinizden bahsedebilmeniz için her şeye sahiptir. Kurulum birkaç tıklamayla gerçekleşir.

Pazartesi, bir iş veya serbest çalışan için uygun, zarif bir temadır. Çok sayıda özellik, ekstra ve eklentiyle birlikte gelir.

İş Dünyası iş konularıyla ilgili bir şablondur. Stil ve kaliteyi birleştirir. İş dünyası kişisel, kurumsal veya fotoğrafçı web sitesi için de özelleştirilebilir. Yetenekleri, ondan istediğiniz hemen hemen her şeyi yapmanızı sağlar.

- Açık renklerde yapılmış hoş bir temadır. Küçük ve orta ölçekli işletmelerin yanı sıra kişisel bir web sitesi için mükemmeldir. İçinde istediğiniz her şeyi özelleştirebilirsiniz. Bu şablonu daha da iyi ve çekici kılan birçok özellik ve ekleme var.

Onetone, internette "Ben"i sunmaya uygun (portfolyonuzu gösterin ve/veya kendiniz hakkında konuşun) WordPress için tek sayfalık bir şablondur.

Arise, küçük bir ürüne veya küçük işletmeye uygun, minimalist, tek sayfalık bir WordPress şablonudur. İçinde gereksiz hiçbir şey yok, sadece en önemli olan her şey var.

Woot, çevrimiçi bir mağazayı işletmek için koyu renklerde yapılmış minimalist bir şablondur. WooCommerce ve diğer birçok popüler eklentiyle çalışır.

Batı basit tema Bir ajans, küçük işletme veya portföy web sitesi için uygundur. Çok sayıda işlev, ayar ve öğe düzenlemesi içerir.

Anaglyph Lite, bloglama ve çevrimiçi mağazalar için uygun, basit ve zarif bir şablondur. Zaten WooCommerce ve diğer popüler eklentilerle yapılandırılmıştır.

Selamlar sevgili okurlarım. Bugün bunun hakkında konuşacağız teknik noktalar yardımıyla ürün 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 sonra 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 piyasadaki en iyi ürün olabilir, reklamlar mükemmeldir 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.

Açılış Sayfası 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 koordineli çalışmanın sonucudur. Örnekleri aşağıda yer alacak olan açılış sayfaları, yeni başlayanların düzen ile çalışmanın temellerini öğrenmelerine yardımcı olacak, ancak dönüşüm metinlerinin ve hedef kitleyi anlamanın yerini almayacaktır. Bunları çeşitli Açılış Sayfası tasarımcıları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 dolduracak mısınız? Bültene abone olmak ister misiniz? Dönüşüm oranınızı takip etmeden önce net hedefler belirleyin.
• Rakiplerim kimler? Gerçekte bunlar üç sorudur: Kim, ne kadar başarılılar ve başarıları nasıl uygulanabilir? Taklit, dalkavukluğun en samimi şeklidir. Rakipleriniz işe yarayan bir şey yapıyorsa bunu sitenize kopyalayın.
• Hedef kitlem kim? Nişinizi ve hedef kitlenizi ne kadar iyi anlarsanız, çabalarınızın karşılığını alma şansınız o kadar artar.

Herşeyi sunmamız lazım gerekli bilgi, ancak potansiyel bir müşteriyi bastıracak ve uzaklaştıracak kadar değil.

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şturmanıza yardımcı olacaktır.

HTML, web sitesi görselleştirmesine yönelik bir tarayıcı işaretleme dilidir. İçine eklenen etiketler kullanılarak kaydedildi köşeli ayraçlar, içeriği belirleyen.

Etiket dolgunun etrafında açılır () ve kapanır ():

içerik

İnce ayar için addan sonra nitelikler eklenir:

içerik

CSS - nasıl konumlandırılacağını tanımlar 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ştirmek ve özellikler eklemek görünümünü ayarlar. Aynı HTML'ye farklı CSS stilleri uygulayarak birbirinden farklı görünen sayfalar oluşturabilirsiniz.

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

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

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

Klasördeki dizin yapısı:

• index.html: Düzenleyeceğimiz ana dosyadır.
• /assets: yardımcı dosyalar burada bulunur:
• /css: Dizin önyükleme ve simge stillerini içerir. Düzenleyeceğimiz dosya main.css'dir.
• /img: site görselleri için klasör.
• /yazı tipleri: simge yazı tipleri.
• /js: javascript dosyalarını önyükleme.

Adım 1: Üstbilgi Kullanma

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

Sitenin başlığını ve adını değiştirelim. Burada herhangi bir dizgi becerisine sahip olmanıza gerek yok; ekranda sarı ile vurgulanan yerlere kendi metninizi yazıyorsunuz.

Adım 2. Kısalık, dönüşümün kız kardeşidir. Avantajlar ve fiyatlar ekleme

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

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

Ana içeriğin “ana” bölümünde gerekli bölümleri ekleyeceğimiz bir bölüm oluşturalım:

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

Nokta yerine dolguyla doldurun.

Avantajlar bölümü için bu koda ihtiyacınız olacak:

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

Netlik açısından içerik:

Hala özensiz görünüyor ama paniğe gerek yok, devam edelim.

Fiyatları yazıyoruz. İçerik ilk adımda olduğu gibi değişir. Genel açıklama sınıf “tarifeler” 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.

Şimdilik gelecekteki açılış sayfasının görünümüyle ilgilenmiyoruz; aşağıda değişen stil örneklerine bakacağı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 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 eylem çağrısı oluşturalım.

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 ürünü satın almaya karar vermesine yardımcı olacaktır. Netlik sağlamak için avatarlara ihtiyacımız var, bu yüzden onları hemen her alıntının altına yerleştireceğiz.

Müşteri Adı.

Adım 4: Şebeke ve Mobil Dostu Entegrasyon

Izgarayı uygulamak için Bootstrap konteynerlerine ihtiyacımız var. Geçerli sütun segmentlerinin toplam sayısını - 12 - hatırlamak önemlidir. İçerik ekranının genişliğini sınıf belirler. Bu hazır ızgaranın avantajı, kapların uyarlanabilirlik göz önünde bulundurularak tasarlanması ve hemen kullanılabilir olmasıdır. mobil cihazlar. Detaylı açıklama resmi sitede. Izgara şuna benziyor.

“Ana” içeriği bir kaba sarılacaktır. Bunu yapmak için üstte aşağıdakiler yazılır:

… .

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

Üst üste yerleştirilmesi gereken tüm elemanları çizgi ayırıcılarla saracağız.

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 belirliyoruz. Satır satırlarının içinde artık sarma için ayrı div'ler yazmaya gerek yok; bunlar boşlukla ayrılmış mevcut div'lerle birleştirilebilir.

Benzer şekilde, incelemeler ve faydalar bölümü için sütunlar oluşturduk. Bir öğeyi yana taşımanız gerekiyorsa col-lg-offset-2 ofset sütun sınıfını kullanın. Sondaki sayı, kaydırmanın kaç temel sütunda gerçekleşeceğini belirler.

Adım 5. Yazı Tipleri ve Simgeler

Google Font başlık yazı tiplerini uyguluyoruz. Seçildiğinde, içe aktarma sekmesini açın ve buradaki verileri main.css dosyasına kopyalayın. Ayrıca yeni yazı tipinin kullanıldığı dosyaya başlık seçiciler 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 sağlamak amacıyla, avantajlar, kendi kendini açıklayan metin merkezi adı ve önyükleme kümesinden FontAwesome simgeleri içeren bir sınıfla açıklanmaktadır.

Bu noktada hazırlık tamamen tamamlanmıştır.

En popüler üç türü kullanıyoruz: cümleli, formlu ve geri sayım sayaçlı. Düzen ilerledikçe şablon efektlerle desteklenecektir.

Ana kısmın arka planını ve dolguyu ilk ekranı kaplayacak şekilde ayarlayalım.

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

Jumbotron başlık boyutunu h2'den h1'e değiştirelim. Daha sonra değiştirilmesi gereken elemanların stillerini yazıyoruz.

Simgelerle başlayalım.

Faydaları i(
renk: #cac4c4;
}

Hash 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 alt: 25 piksel;
}

Tarifelerin görünümünü düzenliyoruz. Kolaylık sağlamak amacıyla, özellikle vurgulamak 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 belirtilmiştir - /* 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: 1em;
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 tarifedeki ayrı fiyat etiketi arka planı */
.pricing_item:ilk çocuk .price (
arka plan: #9ba9b5;
}
.pricing_item:n'inci-çocuk(2).price (
arka plan: #1f6098;
}
/* geniş ekranlarda ortadaki tarife sütunu girintili ve vurguludur */
@media ekranı ve (minimum genişlik: 66.250em) (
.pricing_item(
marj: 1,5em 0;
}
.ö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 arka planı */
.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;
}
/* teklifin açıklanması */
.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,15em 0;
}
/* oran sıralama 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 basıldığı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 ve yerlerini belirtelim.

/* =========Bağlantı stilleri======== */
referanslar (
dolgu: 4em 0;
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;
}

Geriye kalan tek şey son harekete geçirici mesajı ve alt bilgiyi süslemek.

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

}
.eylem p(
renk: #fff;
metin gölgesi: 0 1px 2px rgba(0, 0, 0, .2);
yazı tipi boyutu: 1,2em;
}
.eylem .konteyner (
üst 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;
üst kenar boşluğu: 0,5em;
}

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

Şablonu hayata geçirmek. İlk ekranda metin animasyonunun yanı sıra bölümler için yumuşak kaydırma ve düğmeler sunacağız.

İşe geçişlerde, bazı bölüm sınıflarını avantajlar ve tarifeler için kimlikle değiştireceğiz. Ve düğmelere kimliğe bağlantılar ekleyeceğiz. Ekran görüntüsü - Neyin neye bağlı olduğu, sarı bir işaretleyiciyle vurgulanmıştır.

Düğmeler için girintiler ayarladık - jbutton. Basıldığında 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. Bu hazır açık kaynak, herhangi bir web sitesinde kullanılabilir. Dosyayı Github'dan css klasörüne yerleştirin ve yolu belirtin.

Efektleri buradan seçiyoruz: https://daneden.github.io/animate.css/. FadeInDown'u seçtik. Kodda şu şekilde 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ığı da o kadar az olur. Yalnızca gerekli minimum bilgileri isteyin.

Benzetme yoluyla bir araya getirilir. Arka planları ve renkleri değiştireceğiz. Ve elbette bir şekil ekleyeceğiz.

Paralaksla başlayalım.

Jumbotronun arka planını şeffaf olarak değiştirelim:

arka plan: şeffaf;

Kafanın içine betiği ekleyeceğiz:

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

Vücuttaki ilk satır paralaks için bir kaptı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ümü reçete ediyoruz

/* biçim */
.headform-list (
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;
}
.jumbotron p (
renk: #fff;
yazı tipi boyutu: 16 piksel;
yazı tipi stili: italik;
}

Jumbotronun metni de değişiklik talep ettiği için burada sona erdi.

Tarifeleri 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: 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);
}
/* 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ğlayın:

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 facilisi.

• 
  

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

  
  


• 
  

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