Yeni bir ürünü hızlı bir şekilde başlatmak, bir LP sayfası veya mobil uygulama kullanarak tanıtmak veya kullanıcıları bültene kaydolmaya / abone olmaya motive etmek için hazır açılış sayfası şablonlarına ihtiyaç vardır. Bir "açılış sayfası" için iyi bir düzen ile kullanılabilirlik ve kullanım kolaylığı esastır. Modern satış açılış sayfası şablonları, yüksek dönüşümlere sahip duyarlı bir web sitesi oluşturma yeteneği göz önünde bulundurularak geliştirilmiştir.
Bootstrap 3.1.1 tabanlı ultra modern bir HTML5 teması. 4 düzen ile birlikte gelir: tek / çoklu sayfa, gezinme çubuğu seçenekleri. Organik trafik (SEO) için mobil duyarlı bir açılış sayfası temasına hafif bir paralaks kaydırma efekti entegre edilmiştir.
Web ve mobil uygulamalar için Html açılış sayfası şablonu, kolay olası satış yaratmayı amaçlar. Hızlı yükleme ve geçerli html, css koduna sahiptir. Tek sayfanın üst kısmında, kişi formu kopyalanır.
CSS3 efektli bir sayfa HTML5 açılış sayfası şablonu. Bootstrap 3 üzerine kurulu üç sütunlu bir çerçeveye sahiptir. iOS / Android uygulamalarının satışı için uygundur. Şablon 2 düzen (Paralakslı ve Paralakssız), Ajax iletişim formları, PrettyPhoto ışık kutusu ve 5 renk şeması içerir. Özelleştirmesi kolay: altıgen kodları değiştirin ve ilgili öğeler yeni bir renge boyanacaktır. PSD dahildir.
Modern, Retina'ya hazır mobil uygulama şablonu, 8 renk seçeneği sunar, resim /.
Çok amaçlı düz stil açılış sayfası şablonu, 3 dizin seçeneği, 6 renk şeması ile birlikte gelir. Twitter bootstrap3 ile oluşturulmuş şablon, iletişim ve yükleme formu için PHP betiği dahildir.
Slander, profesyoneller veya bireysel bir proje için uygun olan yeni başlayanlar ve şirketler için idealdir. Bootstrap ve HTML5 / CSS3 ile duyarlı tasarım, duyarlı bir kaydırıcı, sekme kaydırıcısı, haber aboneliği formu ve daha fazlasını içerir.
Harika işlevselliğe sahip zarif, temiz ve minimalist HTML5 / CSS3 açılış sayfası şablonu. Şablon, bir uygulama sayfası ve bir vitrin sitesi oluşturmak için ideal olan Çok Yakında sayfası (yakında kullanıma sunulacak) için tasarlanmıştır.
Özel ürünler için duyarlı iniş şablonu faaliyetler. Ticari video, etkinlik programı, davetli listesi bölümleri vardır.
Tek sayfalık bir web sitesi iş adamları için uygundur çünkü kelimenin tam anlamıyla bir günde yapılabilir. Eğer bir sayfa web sitesi şablonu indir hazır, o zaman sadece barındırma için ödeme yapmanız gerektiğinden, şirketiniz için minimum miktarda bir web sitesi yapabilirsiniz. Müşteri için tek sayfalık bir sayfa uygundur, çünkü üzerindeki tüm bilgiler mümkün olduğunca özlü ve yapılandırılmış olarak sunulur, gereksiz 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.
Şirketiniz için yapmaya karar verirseniz Açılış Sayfası, şablonu indir Web sitemizde. Tüm şablonları virüslere karşı dikkatlice kontrol ediyoruz, 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ıma sahiptir. 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.
İ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. Ayrıca, sizi en geniş ürün yelpazesi ile memnun edeceğiz HTML tek sayfa şablonları, indir ki şu anda yapabilirsiniz!
Metni daha fazla okuyun ...Selam. Tek sayfalı siteler bugün hala popülerdir ve bunun iyi bir nedeni vardır. Tam teşekküllü çok sayfalı sitelere göre bir takım avantajları vardır. Tek sayfalık bir sayfada (açılış sayfası olarak da bilinir), bir kişi tek bir fikre, tek bir ürüne odaklanır, bu da teklifinizi dikkati dağılmadan incelemesine ve bir başvurudan ayrılmaya daha istekli olmasına olanak tanır.
"TAMAM"- diyorsun - "Kendime bir açılış sayfası yapmaya karar verdim ama programlama hakkında hiçbir şey anlamıyorum"... Ve bu bir sorun değil. Artık, kodu incelemeden profesyonel bir web sitesi oluşturmak için birçok araç var. Bunlardan biri, WPBackery veya ELEmentor oluşturucu içeren popüler WordPress CMS'dir.
Bu makalede, iş, mal satışı, ajanslar, serbest çalışanlar ve diğer herhangi bir konu için uygun harika açılış sayfası wordpress şablonları sağladım. Sonuçta, bu tür şablonlar kendiniz ve teklifiniz için özelleştirilebilir ve özelleştirilmelidir.
Birçok şablon, paralaks efektleri, düz tasarımlar, tam ekran fotoğraflar ve videolar gibi modaya uygun zil ve ıslık kullanır. Mobil cihazlar için uyarlama her şablona dahildir.
Yeter tartışma, seçimi izleyelim!
not Açılış sayfasının ne olduğunu daha ayrıntılı bilmek istiyorsanız, o zaman bu soruyu ayrıntılı olarak analiz ettiğim ve 27 açılış sayfası örneği verdiğim yer.
Benim için bu en iyi şablon çünkü çeşitli konularda 376'dan fazla demoya sahip. Bu şablonu kullanarak tamamen farklı duygular iletebilirsiniz. Güçlü ve sezgisel.
Bu inanılmaz tema, özelleştirilebilir bir kaydırıcıya, tamamen özelleştirilebilir başlıklara, mega menülere, görüntülü telefonlara, sabit veya yapışkan başlıklara, başlıklar için çeşitli logolara, etkileşimli öğelere, 7 farklı portföy düzenine ve daha fazlasına sahiptir ve bu da sonsuz olasılıklar sunar.
Ürününüzün veya teklifinizin benzersiz bir sunumunu yapın. Metinde görsel talimatlar ve ayrıca video talimatları vardır.
Yalnızca bir açılış sayfası oluşturmanıza değil, aynı zamanda ek ayarlar olmadan ana proje sitesine entegre etmenize olanak tanıyan gelişmiş ve benzersiz bir şablon sistemi. Şablon, açılış sayfalarında talep edilen birçok hazır blok stili içerir - ekip sunumu, galeri, portföy. Sayfaları önceden yüklemenin güzel efektleri de mevcuttur.
Bu arada The7 artık blogumda.
Betheme, işlevsellik ve önceden ayarlanmış düzen seçeneklerinin sayısı açısından en büyük şablondur. Bugün bu temaya dayalı 400'den fazla demo açılış sayfası var, herhangi birini seçebilir ve ihtiyaçlarınıza göre uyarlayabilirsiniz. Betheme'deki hazır açılış sayfaları aktif olarak kullanılmaktadır:
Birkaç demo daha:
Tema güncellemeleri otomatik olarak yapılır, eklenti güncellemeleri butona tıklanarak yapılır. Demo siteleri Revolution Slider'ı kullanır. Şablon, sayfalar için 5 düzen, 20 özel başlık, Google haritaları için sınırsız stil, birçok şık simge sunar.
Muffin Builder aracı, herhangi bir web geliştirme bilgisi olmadan herhangi bir tasarım oluşturmanıza yardımcı olacaktır. İstenirse, şablonun ana kodunu etkilemeden css kuralları ve js betikleri ekleyebilirsiniz.
Ronneby, yüksek performans ve genişletilmiş seçenekler paneli sunar. WordPress açılış sayfaları oluşturmak için en iyi premium eklentiler şablona eklendi. Şablonun geliştiricileri, kullanıcı desteğine özel önem veriyor - sorunun nasıl çözüleceğini açıklayan herhangi bir soru hızlı bir şekilde yanıtlanmalıdır. Tema zaten iki dil için yerelleştirildi, ancak çeviri dosyaları da ona eklenmiş ve siteler için çok dilli destek düzenlemenize olanak tanıyor.
Başka bir örnek demo:
Esnek ve aynı zamanda özelleştirmesi kolay şablon. Tüm olası temalar için 72 sözde dış görünüm içerir. Uygun yönetici. panel, yeni başlayanlar bile sayfa oluşturucuyu ve ayarları anlamayı kolay bulacaktır.
240 sayfalık kullanışlı öğreticiler ve web sitenizin nasıl harika görünmesini sağlayacak 20 video eğitimi var!)
Jüpiter şablonu aynı zamanda SEO dostudur. Google PageSpeed kontrolleri iyi performans gösterir, bu da arama motorlarının sitenizi seveceği anlamına gelir.
Şablon temiz, derli toplu ve kaliteli tipografi kullanılmıştır. Paralaks gibi görsel efektlerin kullanılması nedeniyle temanın canlı olduğu ortaya çıkıyor ve böyle bir siteye bakmak çok keyifli.
En büyük WordPress koleksiyonlarından biri. Şablonlar profesyonel web programcıları tarafından yazıldı ve tasarımlar nitelikli görsel ve UX uzmanları tarafından çizildi. Bu sayede, her biri bir bilgisayarda, cep telefonunda, tablette kullanıma hazır herhangi bir şablonu güvenle koyabilirsiniz. Dahil edilen premium eklentiler:
Brooklyn'in farklı konularda 16 demo görünümü var. Sayfaların modern stili, resimlerin ve yazı tiplerinin kombinasyonu, bu temaya sahip herhangi bir siteye zarafet katıyor. Portföy bloğu güzelce yürütülür. Şablon ajanslar, ticari şirketler için idealdir. Şablonlar, güven ve güven veren koyu renklerde yapılmıştır. Şablon duyarlı ve tüm cihazlarda harika görünüyor.
Kimseyi kayıtsız bırakmayacak pürüzsüz ve hafif bir şablon. Yüksek kaliteli tipografi ve arayüz öğeleri, bu oyunun şık görünmesini sağlar. awwwards gibi çeşitli tanınmış yarışmaların ve derecelendirmelerin adayı ve kazananı. Aralarından seçim yapabileceğiniz 30'dan fazla farklı temaya sahiptir
Web sitesi yalnızca mobil cihazlara uyum sağlamakla kalmaz, aynı zamanda ziyaretçiler için en uygun görünen görselleri de sunar.
Şablon yenidir, ancak kendini çoktan kanıtlamıştır. 8 temaya (çok sayfalı, açılış, kurumsal, portföy, blog, e-ticaret, taslaklar), her biri 3-12 dış görünüme sahiptir. Güzelliğin ve düzgünlüğün yanı sıra, bu şablon sadece farklı widget'lar ve öğelerden oluşan bir cephaneliğe sahiptir. İnişinizin güzel ve işlevsel görünmesini sağlayabilirsiniz. Kaydırıcıya mı ihtiyacınız var? Lütfen. Portföy, incelemeler, faydalar gösterilsin mi? Ve budur.
Native, bir girişimi teşvik etmek için güçlü bir araçtır. Tema tabanlı WordPress açılış sayfası şablonları, sitenin anlamsal blokları arasında hareket etmek için çeşitli paralaks efektleri kullanır. Genişletilmiş belgeler ve eğitim videoları, acemi CMS kullanıcılarının yönetim panelinin işlevselliğini hızla anlamasına yardımcı olacaktır. Visual Composer, Layer Slider ve Slider Revolution eklentileri, şablona ücretsiz bir uygulama olarak gelir.
Salient, duyarlı bir tasarıma sahip çok yönlü bir temadır ve popüler bir seçimdir. Sayfayı aşağı kaydırırken birinci sınıf tipografi ve paralaks efektleri, açılış sayfası deneyimini geliştirmeye yardımcı olur. Kare hızı optimizasyonu, içerik blokları arasında sorunsuz animasyon geçişleri sağlar. Şablon, hızlı sayfa yüklemeye ve trafik tasarrufuna katkıda bulunan uyarlanabilir görüntü boyutlarını kullanır.
TheGem, SEO için optimize edilmiş ve duyarlı bir düzen ile tamamlanan yaratıcı projeler için modern bir temadır. Sayfaların düşük ağırlığı, yüklenme hızları ve iyi düşünülmüş UX, şablonun yüksek performansını garanti eder. Bir açılış sayfası kullanarak işletmenizi tanıtmanız gerekiyorsa, bu şablonu en azından Google arama sonuçlarında üst sıralarda yer alacak seo dostu kodu nedeniyle satın almalısınız. Açılış sayfalarının mevcut 11 demo versiyonu, çeşitli projelerin ihtiyaçlarını dikkate alır.
TheGem'deki site için tasarım öğeleri, Visual Composer eklentisi kullanılarak yapılandırılır. Açılış sayfası bloklarında (portföy, incelemeler, hizmetler) büyük miktarda içeriğin görüntülenmesi, yükleme - otomatik veya "düğme ile" ve ayrıca sekmeler arasında geçiş yapmak için bir kaydırıcı aracılığıyla düzenlenir. Şablon, açılış sayfasının içeriğini kaydırırken görünen bölüm bileşenlerini yüklemek için 6 animasyon seçeneği sunar. İçerik bloklarının arka planı, vimeo ve youtube'dan videolar olabilir veya html5 kullanılarak sitenin dosya sisteminden alınabilir.
Marketing Pro, dönüşüm, pazarlama ve seo düşünülerek tasarlanmış bir şablondur. Üzerindeki 9 demo sitesinin her biri, belirli bir pazarlama nişinin özellikleri göz önünde bulundurularak oluşturulmuştur. Duyarlı açılış sayfası tasarımına bir bonus, etkinlik düzenleme blokları için stilize şablonlardır.
Oshine, en çok satan yaratıcı temalardan biridir. Harika bir tasarım ve güçlü işlevsellik ile bu şablon, yaratıcı projeler ve iş için açılış sayfaları oluşturmak için kullanılabilir. Her biri mükemmel sonuçları elde etmenize yardımcı olmak için özenle hazırlanmış elli özelleştirme modülü. "Geri al / yinele" seçeneği ve belirli eylemleri "kısayol tuşlarına" ayarlama yeteneği, yapılandırma sürecini basitleştirir.
Jevelin, açılış sayfası ve tek sayfalık wordpress siteleri oluşturmayı kolaylaştıran birinci sınıf bir duyarlı tasarım şablonu. Konu, projenin kısa sürede başlatılmasına yardımcı olacaktır. Çeşitli özelleştirme araçları sayesinde - farklı düzenlerde 9 başlık seçeneği, her biri ayrı ayrı şekillendirilebilen 40 benzersiz öğe, sosyal ağlarda yeniden gönderileri düzenlemek için yerleşik işlevsellik, portföy bölümü için 6 stil çözümü - görünümleri özelleştirme her zamankinden daha hızlı...
Kalium, çeşitli profesyonel alanların temsilcilerinin hizmetlerini tanıtacak bir web sitesi almak için başvurdukları bir konudur. Kalium site tasarımında tipografiye özel bir vurgu yapılır - bundan yazı tiplerini yönetmek için özel bir kitaplık sorumludur. Şablon 4000 yazı tipi kullanabilir - Google, Typekit, Font Squirrel, premium ve özel (kullanıcı tarafından yüklenir).
Inbound, uygulamalar, e-kitaplar, video kursları ve benzer ürünler için tek sayfalık siteler oluşturmayı kolaylaştıran bir şablondur. Tasarım özelleştirmesi, açılış sayfalarının Açılış Sayfası Oluşturucu görsel oluşturucusu kullanılarak yapılır. Şablon ayrıca, tanıtılan her ürüne bir site içinde açılış sayfası biçiminde bir mini bölüm tahsis edilmesine olanak tanır ve WooCommerce'deki ürün kategorisi bölümleri için kullanılabilir.
Intact, internet iş ihtiyaçlarınızı çözmenize yardımcı olmak için tasarlanmış çok seçenekli bir temadır. Modern bir açılış sayfasının şu önemli bileşenlerini içerir: "Tarife planları" ve "Şirket çalışanları" blokları, incelemeleri olan bir kaydırıcı, tematik simge kümeleri, abonelik formları, çevrimiçi danışman.
Comet, Visual Composer ve için tamamen duyarlı piksel mükemmel bir şablondur. Kullanıcılara, aşağıdaki efektlerin uygulandığı açılış sayfaları için 5 dış görünüm sunulur: metin için kaydırıcı, paralaks, arka plan videosu - youtube'dan içe aktarılır veya html5'e gömülür, hareketli yakınlaştırma kaydırıcısı. Yeni kullanıcılar, wordpress açılış sayfaları oluştururken tema ayarlarını kolayca bulabilir - talimatlar ve video eğitimleri çevrimiçi olarak mevcuttur.
Bir açılış sayfası oluşturmak için ihtiyacınız olan her şeye sahip çok yönlü bir WordPress teması:
Geliştirme tasarımı satın almadan önce değerlendirilebilir. Görsel düzenleyicide renk şemaları ve ayarlar değiştirilir. Yazarlar her zaman destek sözü verirler.
Geliştirici, inşaattan veterinerlik hizmetlerine kadar farklı konularda bir web sitesi şablonu sunar. Basit ve etkili açılış sayfaları, avantajlarınızı, çalışma koşullarınızı ve diğer gerekli ayrıntıları potansiyel müşterilere iletmenize yardımcı olacaktır. Tasarım duyarlı ve Retina monitörlerden mobil cihazlara kadar tüm cihazlarda iyi görünüyor. Portföy, çalışma saatleri, takvim ve özel simgeler için eklentiler var.
Yazarlar, geliştirmeleri hakkında “Yeni başlayanlar için ideal bir tema” diyor. 2019'un hafif minimalist tasarımı, çevrimiçi mağazalar, etkinlik ajansları ve bir kartvizit veya daha büyük bir projeye daha fazla geliştirme için diğer birçok iş türü için uygundur. Dahil:
Yalnızca istediğiniz metni değiştirebileceğiniz otuz demo içeren çoklu şablon şablonu. Ayrıca kaydırıcılar ve efektler için 90'dan fazla şablon, ayrı sayfalar için 130'dan fazla seçenek sunarlar. Bir kartvizit sitesini veya daha büyük bir kaynağı tanıtmak için kullanışlı olacak 9 temel eklenti dahildir. Tüm bunlar indirimli, şimdi 30 dolara satılıyor. En popüler açılış sayfası şablonlarından biri.
Açılış sayfaları ve kartvizitler için başka bir çoklu şablon tasarımcısı. Programlama öğrenmeye gerek kalmadan üstbilgi ve altbilgi seçmek için sonsuz sayıda seçenekle temiz kod. "Grid" eklentisi sayesinde öğeleri kolayca değiştirilebilen birçok tasarım. Gelişmiş arama ile tek sayfalık bir siteden tam teşekküllü bir mağazaya kolayca dönüştürün. Destek her zaman soruları yanıtlamaya hazırdır.
Aşağıdakilerden farklı olan, iniş için ucuz ve popüler çoklu şablon:
Herhangi bir konuda profesyonel siteler, bir tıklama ile kolayca yükleyebilir ve kullanabilirsiniz. "Sıkıcı" olmayan, taze ve güzel görünen modern tasarımlar.
“Yeni nesil çoklu şablon” cesur bir ifadedir, ancak yazarlar ürünleri hakkında böyle söylüyor. Sadece 35 $ karşılığında şunları alabilirsiniz:
Elementor görsel düzenleyici eklentisi gerçekten en son sürüme güncellendi ve kullanımı çok kolay.
"9500 arasında en iyisi" - geliştiricilere dikkat edin. Şablon, hiç kodlama yapmamış kişilere odaklanır. Tasarımın özelleştirilmesi, bire bir modda çalışmanıza, üçüncü taraf ayarları kullanmamanıza ve 300 şablondan birinin tam çalışma işlevselliğini hemen kullanmanıza izin veren görsel eklenti yapıcı Elementor kullanılarak gerçekleştirilir. Kurulumu kolay ve hızlı.
Alışılmadık bir renk düzeninde güzel tasarım. Vurgu sadece zarif tasarıma değil, bir sette satın alınması önerildi:
Kartvizitler ve çevrimiçi alışveriş için temiz ve anlaşılır WordPress şablonu. Mağaza modunda, ürün özellikleri için ayarlar vardır, bunlara göre arama yapın.
Modern, şık, düz bir tarzda sevimli açılış sayfalarından oluşan bir seçki. Elle çizilmiş öğeler, potansiyel müşterilerin öne çıkmasına ve hatırlanmasına yardımcı olacaktır. Fiyata, görsel bir düzenleyiciden bir arka plan veya portföy yerleştirmek için bir paralaks etkisine kadar ana eklentiler ve widget'lar dahildir. Masaüstü ve mobil sürümlerde farklı bir görünüm özelleştirebilirsiniz, uyarlanabilirlik varsayılan olarak verilmiştir.
Tasarımcılar, fotoğrafçılar, sanatçılar için çeşitli çözümler. Portföy yerleştirme için kullanışlı ön ayarlar, kopyalamaya karşı koruma sağlamanıza, kullanıcı göz atarken yüklemenize ve bu da yükleme süresinden tasarruf etmenize olanak tanır. Kolay video indirme. Blog yazmak için bir seçenek var. Infographics yerleştirmek için öğeler hazırlanır. Görsel tasarımcı, tüm ayrıntıları kolayca özelleştirmenize yardımcı olacaktır.
Sadece 29 $ karşılığında çok amaçlı bir iniş paketi şunları elde eder:
Kodlama gerektirmez, temel iletişim formu eklentileri ve kaydırıcı kurulumları vardır. WooCommerce için entegrasyona hazır.
Geliştiriciler, peyzaj hizmetleri, bahçe yardımı ve eko-temalar için ilginç bir "yeşil" tasarım yaptılar. Ancak, boşluk başka amaçlar için kullanılabilir. Güzel simgeler, temiz Google yazı tipleri, Retina cihazları da dahil olmak üzere mükemmel yanıt verme ve görünüm, WordPress temasının yaygın olarak kullanıldığını gösterir.
WordPress'in en son sürümü için yapılmıştır. Şablon sürekli güncellenmektedir. Çevrimiçi mağazanın işlevselliği, gelişmiş arama ve sipariş için uygun eklenti sayesinde sağlanır. Ayrıca etkinlikler, takvim tarihleri ve kayıt için ön ayarlar vardır. Elementor tarafından yeni sayfalar oluşturmak için kullanılır. Herhangi bir ek eklentiyi destekler.
Yaratıcı "müzikal" tema, parlak tasarımıyla ziyaretçiler tarafından hatırlanacak ve site sahibi şunlarla ilgilenecek:
Eğitim, daha gelişmiş UX ile eski e-Öğrenim temasının geliştirilmiş bir versiyonudur ve eğitim İnternet kaynakları için tasarlanmıştır: çevrimiçi kurslar ve eğitim kurumlarının web siteleri. Şablon çekici bir tasarıma sahiptir ve eğitim süreci için gerekli olan kapsamlı işlevsellik sağlar.
Bunlardan biri, ürün tanıtımına odaklanan açılış sayfaları oluşturmak için yaratıcı bir temadır. Şablonun ön ucu html5 üzerinde yapılır ve bootstrap 3, MailChimp ve Contact Form 7 onunla entegre edilebilir.UX temasının geliştiricileri benzer birçok projeyi inceledi ve bunun sonucunda kullanıcılara hazır WordPress açılış sayfası verildi. iş projeleri için önemli olan tüm araçlara sahip şablonlar.
Total, birçok projeye uygun bir şablondur. Sayfaları oluştururken şunları kullanır: sürükle ve bırak yöntemi, sınırsız renk şemaları, gerçek zamanlı özelleştirme, kullanımı kolay premium kaydırıcılar. Temanın demo siteleri arasında 11 farklı proje için açılış sayfası şablonları bulunmaktadır.
Stockholm, kullanım ömrü boyunca en çok satan 30 WordPress temasından biridir. Bir temayla çalışırken, sitenin tamamı veya tek tek öğeleri için bir renk şeması ayarlamasına, 600 Google yazı tipinden herhangi birini uygulamasına, seçenekleri ve farklı demo sitelerinin bloklarını birleştirmesine izin verilir. Bir iş projesi için hazır bir çözüme ihtiyaç duyan kullanıcılar, açılış sayfası şablonlarını web sitesi oluşturucu bölümünden hemen yükleyerek indirebilir.
Başka bir demo seçeneği:
Açılış sayfalarınızın benzersiz ve modern olacağı 70'den fazla widget. Google yazı tipleri, Infographics, SEO'ya uyum, temiz kod, uygun portföyler oluşturma bu şablonun avantajlarından sadece birkaçı. Araziler, kelimenin tam anlamıyla, sıradan sürükle ve bırak yöntemiyle tam anlamıyla bir mozaik gibi bir araya getirilebilir. Açıklama sayfasında açıklayıcı örnekler görebilirsiniz.
Demo sitelerini görüntülerken hepsini kullanmak istersiniz.
Tema Açılış sayfası deliklere sürtündü. 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 kaybedilen bir hareket olsa bile, herkes tarafından piyasaya sürüldü. Biri 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. Birisi profesyonellerden sipariş verecek ve birileri bir nedenden ötürü kendi Açılış Sayfaları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 gerektirmediği 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 ücretsiz mi kullanmalıyım? Tabii ki, ücretli olan çok daha kaliteli olacak ve muhtemelen daha yüksek dönüşümler gösterecektir. Ücretsiz olan 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 bakarak, 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 kalır. Seçim şunları içerir: açılış sayfası şablonlarıçok çeşitli konulardan oluşur, ancak nedense mobil uygulamalar için LP hakimdir. En yüksek kalitede oldukları ortaya çıktı.
Daha önce bir dizi ücretsiz Açılış Sayfası şablonu yapmıştık. Belirli bir konuya uyarlandılar. Bu sefer herhangi 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, bu konuda bir keresinde Wordpress'te bir Açılış Sayfası oluşturmak için bir dizi eklenti yaptım. Onları kullanmayı deneyebilirsiniz. Belki bu çok zaman kazandıracaktır. Her ne kadar kişisel olarak, basit bir LP için saf HTML yeterli olduğundan, bunu yapmanın pek bir anlamı görmüyorum.
Yani. İşte 20 Ücretsiz HTML Açılış Sayfası Şablonu.
Selamlar sevgili okurlarım. Bugün, yardımı ile artırabileceğimiz teknik noktalardan bahsedeceğiz. satış dönüşümü onların mal veya hizmetleri. Önemli noktalardan biri, ürünlerle birlikte 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 reklamı tıkladıktan sonra geldikleri sayfadır. Tek bir teklif için oluşturuldu: bir ürün, hizmet veya abonelik. Etkili bir açılış sayfası, başarılı internet pazarlamasının temel taşıdır. Ürün piyasanın en iyisi olabilir, reklamlar kusursuzdur, ancak iyi bir açılış sayfası olmadan çabalar sonucun %100'ünü vermez. Ziyaretçilere neyin teklif edildiğini ve neden 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.
Açılış Sayfası nasıl oluşturulur? Cevabın dizgi yeteneğinde yattığına inanmak yanlış. İyi bir açılış sayfası, hedefler, metin, tasarım ve kod üzerinde iyi koordine edilmiş çalışmanın sonucudur. Örnekleri aşağıda olacak olan açılış sayfaları, yeni başlayanların mizanpajla çalışmanın temellerini öğrenmelerine yardımcı olacak, ancak dönüşüm metinlerinin ve hedef kitlenin anlaşılmasının yerini almayacak. Bunları çeşitli kullanarak da oluşturabilirsiniz. inşaatçılar Açılış sayfası.
Bu nedenle, bir açılış sayfası oluşturmadan önce kendinize şunu sorun:
İhtiyacınız olan tüm bilgileri sunmanız gerekir, ancak potansiyel bir müşteriyi bunaltmak ve uzaklaştırmak için yeterli değildir.
İş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- web sitesi görselleştirmesi için tarayıcı biçimlendirme dili. İçeriği tanımlayan köşeli parantez içine alınmış etiketler kullanılarak yazılmıştır.
Etiket açılır (<>) ve dolgunun çevresini () kapatır:
<тег>içerikтег>
Nokta atışı ayarı için, isimden sonra aşağıdaki nitelikler eklenir:
<тег атрибут="значение">içerikтег>
CSS - HTML öğelerinin nasıl düzenleneceğini tanımlar. Seçiciler, özellikler 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ştirerek ve özellikler ekleyerek görünümü düzenlenir. Aynı HTML'ye farklı CSS stilleri uygulayarak farklı sayfalar oluşturabilirsiniz.
Hızlı bir düzen için, önyüklemeye dayalı minimal bir tasarıma sahip bir şablon kullanacağız. 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.
Klasördeki dizin yapısı:
Adım 1: Başlığı kullanma
Başlık ve alt başlıklar, teklifin değerini açıkça iletmeye yardımcı olacak 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.
Adım 2. Kısalık, dönüşümün kız kardeşidir. Avantajlar ve oranlar ekleme
4 bölüm alacaktır:
Gerekli bölümleri ekleyeceğimiz ana içeriğin “ana” bölümünü tasarlayalım:
…..
…..
…..
…..
Noktalar yerine dolgu ile doldurun.
Faydalar bölümü bu kodu gerektirecektir:
Avantajlar
Sed diam mumyasız
Elit, sed diam nonmy
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, conectetuer adipiscing
Lorem ipsum dolor sit amet, conectetuer adipiscing
Lorem ipsum dolor sit amet, conectetuer adipiscing
Netlik için içerik:
Her ne kadar özensiz görünse de paniğe mahal yok, devam ediyoruz.
Fiyatları yazıyoruz. İçerik, ilk adımdakiyle aynı şekilde değişir. "Tarifeler" sınıfı ve üç tarife ile genel açıklama.
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 egzersiz ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Tarife planları
aylık / kişi başı
aylık / kişi başı
aylık / kişi başı
Ö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
Hedeflenen sinyallerin kullanılması, ziyaretçilere markanın güvenilir olduğunu gösterir. Sinyaller birçok şekilde olabilir, ancak klasikler müşteri incelemeleridir.
Lorem ipsum dolor sit amet, consectetur adipisicing seçkin, sed do eiusmod tempor incididunt ut emek ve dolore magna aliqua. Ut enim ad minim veniam, quis nostrud egzersiz ullamco Laboris nisi ut aliquip ex ea commodo:
Musteri degerlendirmeleri
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut emek ve dolore magna aliqua. Ut enim ad minim veniam, quis nostrud egzersiz ullamco Laboris nisi ut aliquip ex ea commodo. "
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut emek ve dolore magna aliqua. Ut enim ad minim veniam, quis nostrud egzersiz ullamco Laboris nisi ut aliquip ex ea commodo. "
Bir harekete geçirici mesaj oluşturalım.
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 egzersiz ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Bugün sipariş verirken yararlanın
İncelemeler, potansiyel müşterilerin bir ürünü satın alma kararı vermelerine yardımcı olacaktır. Anlaşılır olması 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ı enjekte etmek için Bootstrap kapsayıcılarına ihtiyacımız var. İzin verilen sütun segmentlerinin toplam sayısını hatırlamak önemlidir - 12. Sınıf, içerik ekranının genişliğini belirler. Bu hazır şebekenin avantajı, kapsayıcıların yanıt verme yeteneği göz önünde bulundurularak tasarlanması ve mobil cihazlara hemen uygulanabilir olmasıdır. Resmi web sitesinde ayrıntılı açıklama. Izgara böyle görünüyor.
“Main” in içeriğini bir kaba saracağız. Bunu yapmak için üst kısımda 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 jambotron ve harekete geçirici mesaj olacak.
Üst üste konumlandırılması gereken tüm elemanları çizgi ayırıcılarla sarıyoruz.
Artık sütunların genişliğini, önyükleme ızgarasına odaklanarak 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 belirledik. Satır satırlarının içinde, sarma için artık ayrı divalar yazmaya gerek yok, bunları boşlukla ayrılmış mevcut divalarla birleştirebilirsiniz.
Benzetme yoluyla, incelemeler ve faydalar bölümü için sütunlar oluşturduk. Bir öğeyi yana taşımak istiyorsanız, col-lg-offset-2 offset 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ı tipleri uygulayacağız. Seçtiğinizde, 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 yazı tipi içe aktarma * /
.navbar-marka,
h1,
h2,
h3,
h4,
h5,
h6 (
font ailesi: "Roboto Condensed", sans-serif; / * Googlephone çıkışı * /
}
Anlaşılır olması için, kendi kendini açıklayıcı adı metin merkezi olan bir sınıf ve önyükleme kümesinden FontAwesome simgeleri kaydedilir.
Bu, hazırlığı tamamlar.
En popüler üç türü kullanıyoruz: teklifle, formla ve geri sayım sayacıyla. Siz yazarken, şablon efektlerle tamamlanacaktır.
Ana gövde ve dolgu için arka planı ilk ekranı kaplayacak şekilde ayarlayın.
Jumbotron (
arka plan: # f5f5f5 url (../ img / fon.jpg) üst merkez tekrarsız;
maksimum genişlik: %100;
üst dolgu: 250 piksel;
alt dolgu: 200 piksel;
metin hizalama: merkez;
}
Jambotronun başını h2'den h1'e yeniden boyutlandırın. Ardından, değiştirilmesi gereken öğelerin stillerini yazıyoruz.
Simgelerle başlayalım.
faydaları ben (
renk: # cac4c4;
}
Hash işaretinden sonra bir renk belirtilir. Html renk tabloları veya bir resim düzenleyici kullanarak 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ıraya koyuyoruz. Kolaylık sağlamak için, noktasal olarak vurgulamak istediğimiz öğeler için kendi sınıflarımızı oluşturuyoruz.
aylık / kişi başı
Ve bir sürü CSS. Sitelerin sorumlu olduğu yerler yorumlarda belirtilmiştir - / * yıldız işaretiyle eğik çizgiler arasında * /
/ * ========= Tarif stilleri ======== * /
/ * tarifenin genel görünümü * /
.pricing_item (
arka plan: # f2f2f2;
pozisyon: göreceli;
ekran: -webkit-flex;
ekran: esnek;
esnek yön: sütun;
hizalama öğeleri: streç;
metin hizalama: merkez;
-webkit-flex: 0 1 330 piksel;
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: üzerine gelin (
renk: # 444;
arka plan: #daebef;
}
/ * her tarifedeki fiyat etiketinin ayrı altlığı * /
.pricing_item: birinci ç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 (
kenar boşluğu: 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;
kenar boşluğu: 0,5em 0 0;
renk: # 1d211f;
}
/ * etiket altlığı * /
.fiyat (
yazı tipi boyutu: 2em;
yazı tipi ağırlığı: kalın;
renk: #fff;
pozisyon: 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,15em otomatik 1em;
sınır yarıçapı: %50;
arka plan: # 77a5cc;
-webkit-geçiş: renk 0.3s, arka plan 0.3s;
geçiş: renk 0,3 sn, arka plan 0,3 sn;
}
/* para birimi */
.para birimi (
yazı tipi boyutu: 0,5em;
dikey hizalama: süper;
}
/ * cümle açıklaması * /
.cümle (
yazı tipi ağırlığı: kalın;
marj: 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.15em 0;
}
/ * oran emri düğmesi * /
.pricing_item düğmesi (
yazı tipi ağırlığı: kalın;
üst kenar boşluğu: otomatik;
dolgu: 1em 2em;
renk: #fff;
sınır yarıçapı: 5 piksel;
arka plan: # 428bca;
-webkit-geçiş: arka plan rengi 0.3s;
geçiş: arka plan rengi 0,3 sn;
}
/ * düğmeye basıldığında renk değişimi * /
.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, yerini belirleyelim.
/ * ========= Görüş stilleri ======== * /
referanslar (
dolgu: 4em 0;
metin hizalama: merkez;
}
.testimonials .avatar resmi (
sınır yarıçapı: %50;
yüzer: sol;
ekran: satır içi;
kenar-sağ: 1em;
genişlik: 65 piksel;
yükseklik: 65 piksel;
kenar boşluğu-alt: 30 piksel;
}
.testimonials .avatar p (
metin hizalama: sola;
üst dolgu: 1em;
renk: # 5d5d5d;
yazı tipi ağırlığı: 900;
}
Geriye kalan tek şey, son harekete geçirici mesajı ve altbilgiyi süslemek.
/ * Eylem * /
.eylem (
arka plan: # 476177;
minimum yükseklik: 180 piksel;
genişlik: %100;
dolgu: 4em 0;
metin hizalama: merkez;
}
.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;
}
.action .container (
kenar boşluğu: 3em;
}
/ * Altbilgi * /
altbilgi (
arka plan: # 333333;
dolgu: 1em 0;
metin hizalama: sağa;
}
altbilgi p (
renk: #fff;
satır yüksekliği: 1;
metin dönüştürme: büyük harf;
yazı tipi boyutu: 0.7em;
üst kenar boşluğu: 0,5em;
}
Altbilgi düğmesine btn-varsayılan yerleşik önyükleme sınıfı atanmıştır.
Şablonu canlandırmak. İlk ekranda metin animasyonunun yanı sıra bölümler için yumuşak kaydırma ve düğmeler tanıtacağız.
Geçişlerin çalışması için, faydalar ve tarifeler için bazı bölüm sınıflarını id ile değiştireceğiz. Ve butonlara kimliğe bağlantılar atayacağız. Ekran - sarı bir işaretleyici ile vurgulanana ne eklenir.
Düğmeler için dolguyu ayarlayın - jbutton. Basıldığında kaydırma çalışıyor, ancak çok ani.
Javascript veya jquery kullanılarak yumuşak geçişler oluşturulur. İkincisi, varsayılan olarak Bootstrap şablonlarına bağlıdır.
Kaydırma şimdi pürüzsüz.
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. Github'daki dosyayı css klasörüne yerleştirin ve yolu yazın.
Efektleri burada seçiyoruz: https://daneden.github.io/animate.css/... fadeInDown'ı seçtik. Kodda şöyle yazılıyor:
Artık sayfa yüklenirken veya yenilenirken metin canlandırılacaktır. Hazır.
Bir ziyaretçiye ne kadar çok form alanı sunulursa, onları doldurma olasılıkları o kadar az olur. Yalnızca ihtiyacınız olan minimum bilgileri isteyin.
Analoji ile toplanmıştır. Arka planları ve renkleri değiştireceğiz. Ve elbette, şekli ekleyelim.
İle başlayalım paralaks .
Jumbotron arka planını şeffaf olarak değiştirin:
arka plan: şeffaf;
Kafanın içine betiği ekleyeceğiz:
Gövdedeki ilk satır paralaks için kapsayıcıdır:
Ve CSS'de davranışı:
Bgparalaks (
arka plan: url (/../ img / fon.jpg) tekrar;
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;
sınır rengi: # 444;
renk: koyu gri;
sınır yarıçapı: 0;
}
Navbar-default .navbar-nav> .active> a, .navbar-default .navbar-nav> .active> a: vurgulu, .navbar-default .navbar-nav> .active> a: odak (
renk: koyu gri;
arka plan rengi: rgba (0, 0, 0, 0,5);
}
Jumbotron'daki cümleyi yenisiyle değiştiriyoruz - form koduyla:
Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy.
Ve görünümü reçete ediyoruz
/ * biçim * /
.headform listesi (
liste stili türü: yok;
satır yüksekliği: 26 piksel;
yazı tipi ağırlığı: 400;
dolgu: 0 piksel;
kenar boşluğu-alt: 40 piksel;
}
.baş formu (
taşma: gizli;
pozisyon: göreceli;
arka plan rengi: rgba (0,0,0, .4);
dolgu: 35px 40px;
sınır yarıçapı: 8 piksel;
}
giriş, düğme, seç, metin alanı (
genişlik: %100;
kenar boşluğu-alt: 10 piksel;
}
.headform-list li .fa (
pozisyon: mutlak;
üst: 0 piksel;
sol: 0 piksel;
genişlik: 42 piksel;
yazı tipi boyutu: 24 piksel;
metin hizalama: merkez;
}
.headform listesi li (
pozisyon: göreceli;
minimum yükseklik: 38 piksel;
sol dolgu: 62 piksel;
kenar boşluğu-alt: 20 piksel;
}
.jumbotron p (
renk: #fff;
yazı tipi boyutu: 16 piksel;
yazı tipi stili: italik;
}
Jambotron'un metni de değişiklik talep ettiği için buraya geldi.
Tarifeleri yeniden renklendiriyoruz.
/ * tarifenin genel görünümü * /
.pricing_item (
arka plan rengi: rgba (0,0,0, .4); / * satır değişti * /
sınır yarıçapı: 4 piksel; / * satır değişti * /
pozisyon: göreceli;
ekran: -webkit-flex;
ekran: esnek;
-webkit-flex-yön: sütun;
esnek yön: sütun;
-webkit-align-items: streç;
hizalama öğeleri: streç;
metin hizalama: merkez;
-webkit-flex: 0 1 330 piksel;
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: üzerine gelin (
renk: # 444;
arka plan: #ddd; / * satır değişti * /
}
Şimdi böyle görünüyorlar - şeffaf arka plan ve yuvarlatılmış köşeler.
Şablon hazır.
Jambotronun dolgusunu tekrar değiştirin ve şablonu, önceki şablona benzeterek yeni arka plana uyacak şekilde yeniden renklendirin. Sayaç betiğini bağlarız:
HTML
Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy.
Stil dosyasında şeklin alt yarıçapını kaldırın, düğmede ince ayar yapın.
Ek olarak, menü yeni arka plan için yeniden boyandı ve jambotron'daki metinlerin stili - önceki örneğe 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şturmaya ilişkin örnekler sunar ve yeni bir şey öğreneceksiniz. Beğenip yeniden yayınlıyoruz. Yakında görüşürüz.
Derste sunulan tüm kaynakları hazır sayfalar şeklinde indirmek için butonlardan birine tıklayınız. sosyal kale açmak ve bir bağlantı almak için.
Saygılarımla, Galiulin Ruslan.
İlgili Makaleler: | |
En iyi spor açılış sayfaları
Yenileri çekmeniz gerekiyorsa, Fitness açılış sayfası harika bir çözümdür ... Klasör simgeleri nereden indirilir ve nasıl yüklenir
Birçok kullanıcı, kişisel bilgilerini kişiselleştirmeye özel önem veriyor ... VKontakte kuralları Sosyal ağ VKontakte kullanım kuralları
İnternetteki herhangi bir kaynak veya forumun kendi kuralları vardır. Onlara ihtiyaç var... |