Templat halaman arahan yang indah. Templat halaman arahan

Halo. Situs satu halaman masih populer, dan untuk alasan yang bagus. Mereka memiliki sejumlah keunggulan dibandingkan situs multi-halaman lengkap. Di situs satu halaman (juga dikenal sebagai halaman arahan), seseorang berkonsentrasi pada satu ide, satu produk, yang memungkinkan dia mempelajari penawaran Anda tanpa gangguan dan lebih bersedia untuk meninggalkan permintaan.

“Oke,” Anda berkata, “Saya memutuskan untuk menjadikan diri saya halaman arahan, tetapi saya tidak mengerti apa pun tentang pemrograman.” Dan itu tidak menjadi masalah. Sekarang ada banyak alat untuk membuat website profesional tanpa menggali kodenya. Salah satunya adalah CMS WordPress yang populer dengan konstruktor WPBackery atau ELementor.

Pada artikel ini saya telah menyediakan template landing page WordPress keren yang cocok untuk bisnis, penjualan barang, agensi, freelancer dan topik lainnya. Lagi pula, templat seperti itu dapat dan harus disesuaikan agar sesuai dengan diri Anda dan penawaran Anda.

Banyak templat menggunakan fitur-fitur trendi, seperti efek paralaks, desain datar, foto dan video layar penuh. Adaptasi untuk perangkat seluler disertakan di setiap template.

Cukup pembahasannya, yuk simak pilihannya!

hal. Jika anda ingin mengetahui lebih detail apa itu Landing page, maka dimana saya membahas pertanyaan ini secara detail dan memberikan 27 contoh landing page.

Semua template disajikan dari toko online populer ThemeForest. Anda dapat melihat koleksi lainnya.

Pilihan 40 template premium untuk membuat halaman arahan di CMS WordPress1. Menjembatani

Bagi saya, ini adalah template teratas karena memiliki 376+ demo tentang berbagai topik. Dengan template ini Anda dapat menyampaikan emosi yang sangat berbeda. Kuat dan intuitif.

Tema luar biasa ini memiliki penggeser yang dapat disesuaikan, tajuk yang sepenuhnya dapat disesuaikan, menu mega, latar belakang video, tajuk tetap atau melekat, logo tajuk berbeda, elemen interaktif, 7 tata letak portofolio berbeda, dan banyak lagi, memungkinkan kemungkinan tak terbatas.

Buat presentasi unik tentang produk atau penawaran Anda. Ada instruksi visual dalam teks dan juga instruksi video.

2. The7

Sistem templat canggih dan unik yang memungkinkan Anda tidak hanya membuat halaman arahan, tetapi juga tanpa halaman arahan pengaturan tambahan mengintegrasikannya ke situs web proyek utama. Dalam template Anda dapat menemukan banyak gaya siap pakai untuk blok yang diminati di halaman arahan - presentasi tim, galeri, portofolio. Efek pramuat halaman yang indah juga tersedia.

Omong-omong, The7 sekarang ada di blog saya.

3.Jadilah Tema

Betheme adalah templat terbesar dalam hal fungsionalitas dan jumlah opsi tata letak prasetel. Saat ini, ada lebih dari 400+ halaman arahan demo berdasarkan tema ini, Anda dapat memilih salah satu dan menyesuaikannya dengan kebutuhan Anda. Halaman arahan siap pakai di Betheme secara aktif menggunakan:

• efek bergulir - dari paralaks hingga transformasi animasi elemen desain
• video latar belakang layar penuh
• tombol "sosial".
• penghitung animasi
• formulir aplikasi online
• bagian portofolio
• bagian "Karyawan kami"

Beberapa demo lagi:

Pembaruan tema dilakukan secara otomatis, pembaruan plugin dilakukan dengan satu sentuhan tombol. Situs demo menggunakan Revolution Slider. Templat ini menawarkan 5 opsi tata letak halaman, 20 tajuk khusus, jumlah gaya tak terbatas untuk peta Google, dan banyak ikon gaya.

Alat Muffin Builder akan membantu Anda membuat desain apa pun tanpa pengetahuan apa pun tentang pengembangan web. Jika diinginkan, Anda dapat menambahkan aturan css dan skrip js tanpa memengaruhi kode template utama.

Ronneby menampilkan kinerja tinggi dan panel opsi yang diperluas. Plugin premium terbaik untuk membuat halaman arahan WordPress telah ditambahkan ke template. Pengembang template memberikan perhatian khusus pada dukungan pengguna - setiap pertanyaan dijawab dengan jawaban cepat yang menjelaskan cara memecahkan masalah. Tema ini sudah dilokalkan untuk dua bahasa, tetapi file terjemahan juga dilampirkan padanya, memungkinkan Anda mengatur dukungan multibahasa untuk situs.

Contoh demo lainnya:

5. Yupiter

Templat yang fleksibel dan sekaligus mudah disesuaikan. Termasuk 72 apa yang disebut skin, pada semua topik yang memungkinkan. Admin yang nyaman. panel, bahkan seorang pemula pun akan mudah memahami pembuat dan pengaturan halaman.

Ada tutorial praktis dengan 240 halaman dan 20 video tutorial tentang cara membuat situs web Anda luar biasa!)

Template Jupiter juga disesuaikan untuk SEO. Tes Google PageSpeed ​​​​menunjukkan hasil yang baik, yang berarti mesin pencari akan menyukai situs Anda.

Templatnya bersih, rapi, dan menggunakan tipografi berkualitas tinggi. Karena penggunaan efek visual seperti paralaks, tema menjadi hidup dan sangat menyenangkan untuk dilihat di situs seperti itu.

6.WoodMart

Salah satu koleksi WordPress terbesar. Templat ditulis oleh pemrogram web profesional, dan desain dibuat oleh spesialis berkualifikasi dalam solusi visual dan UX. Berkat ini, Anda dapat menginstal templat apa pun dengan aman, masing-masing siap digunakan di komputer Anda, telepon genggam, tablet. Termasuk plugin premium:

WPBackery

Revolusi Penggeser

Adaptasi luar biasa dengan WooCommerce (toko online)

7.Brooklyn

Brooklyn memiliki 16 demo skin dengan tema berbeda. Gaya halaman yang modern, kombinasi gambar dan font menambah keanggunan situs mana pun tempat tema ini dipasang. Blok portofolio dirancang dengan indah. Templat ini cocok untuk agensi dan perusahaan bisnis. Templat dibuat dalam warna gelap, yang memberikan kepercayaan diri dan menginspirasi kepercayaan. Templatnya responsif dan tampak bagus di semua perangkat.

Templat yang halus dan mudah yang tidak akan membuat siapa pun acuh tak acuh. Tipografi dan elemen antarmuka berkualitas tinggi membuat template ini terlihat cantik. Nominasi dan pemenang berbagai kompetisi dan pemeringkatan ternama, seperti awwwards. Memiliki lebih dari 30+ skin dengan tema berbeda untuk dipilih

Tidak hanya website, gambarnya juga disesuaikan dengan perangkat mobile agar terlihat lebih nyaman bagi pengunjung.

9. Kode-H

Templatenya baru, tapi sudah terbukti. Ini memiliki 8 tema (multi-halaman, arahan, perusahaan, portofolio, blog, e-commerce, stub) dengan masing-masing 3-12 skin. Selain keindahan dan kerapiannya, template ini juga memiliki gudang widget dan elemen yang berbeda. Anda dapat membuat halaman arahan Anda cantik dan fungsional. Butuh penggeser? Silakan. Tampilkan portofolio, ulasan, manfaat? Dan itu benar.

10. Asli

Native adalah alat yang ampuh untuk mempromosikan startup. Templat halaman arahan WordPress berdasarkan tema menggunakan berbagai efek paralaks untuk berpindah antar blok semantik situs. Dokumentasi dan tutorial video yang diperluas akan membantu pengguna CMS pemula dengan cepat memahami fungsionalitas panel administrasi. Plugin Visual Composer, Layer Slider, dan Slider Revolution disertakan aplikasi gratis ke templat.

11. Menonjol

Salient adalah tema serbaguna dengan desain responsif yang sering dipilih oleh . Tipografi premium dan efek paralaks yang muncul saat Anda menggulir halaman membantu meningkatkan kesan halaman arahan. Pengoptimalan kecepatan bingkai memastikan transisi animasi yang mulus antar blok konten. Templat ini menggunakan ukuran gambar adaptif, yang membantu halaman dimuat dengan cepat dan menghemat lalu lintas.

12. Permata

TheGem adalah tema modern untuk proyek kreatif, dioptimalkan untuk SEO dan dilengkapi dengan tata letak “responsif”. Berat halaman yang ringan, kecepatan memuat, dan UX yang bijaksana menjamin kinerja template yang tinggi. Jika Anda perlu mempromosikan bisnis Anda menggunakan halaman arahan, ada baiknya membeli template ini, setidaknya karena kodenya yang ramah SEO, yang akan memastikan posisi tinggi di hasil Google. 11 versi demo halaman arahan yang tersedia memperhitungkan kebutuhan beragam proyek.

Elemen desain untuk situs web di TheGem dikustomisasi menggunakan plugin Visual Composer. Tampilan konten dalam jumlah besar di blok arahan (portofolio, ulasan, layanan) diatur melalui pemuatan - otomatis atau "dengan tombol", serta melalui penggeser peralihan tab. Template menyediakan 6 pilihan animasi untuk memuat komponen bagian yang muncul saat menggulir konten halaman arahan. Latar belakang pemblokiran konten dapat berupa video dari vimeo dan youtube atau berasal dari berkas sistem situs menggunakan HTML5.

13. Pemasaran Pro

Marketing Pro adalah template yang dirancang dengan mempertimbangkan konversi, pemasaran, dan SEO. Masing-masing dari 9 situs demo di dalamnya dibuat dengan mempertimbangkan karakteristik ceruk pemasaran tertentu. Sebagai bonus pada desain halaman arahan adaptif, terdapat templat bergaya untuk blok organisasi acara.

Oshine adalah salah satu tema kreatif terlaris. Dengan desain cantik dan fungsionalitas canggih, template ini dapat digunakan untuk membuat halaman arahan untuk proyek dan bisnis kreatif. Lima puluh modul untuk menyesuaikan tampilan situs, yang masing-masing telah dirancang dengan cermat, membantu mendapatkan hasil yang ideal. Opsi “undo/redo” dan kemampuan untuk menetapkan “hotkeys” untuk tindakan tertentu menyederhanakan proses pengaturan.

15. Jevelin

Jevelin adalah template dengan desain responsif premium yang memudahkan pembuatan halaman arahan dan situs satu halaman di Wordpress. Tema ini akan membantu meluncurkan proyek dalam waktu singkat. Berkat berbagai alat penyesuaian - 9 opsi tajuk dalam tata letak berbeda, 40 elemen unik, yang masing-masing dapat ditata secara individual, fungsionalitas bawaan untuk mengatur pengeposan ulang di jejaring sosial, 6 solusi gaya untuk mendesain bagian portofolio - menyesuaikan kulit adalah lebih cepat dari sebelumnya.

16. Kalium

Kalium adalah topik yang menjadi tujuan perwakilan dari berbagai bidang profesional untuk mendapatkan situs web untuk mempromosikan layanan mereka. Penekanan khusus dalam desain situs web di Kalium ditempatkan pada tipografi - perpustakaan khusus untuk mengelola font bertanggung jawab untuk itu. Template dapat menggunakan 4000 font - Google, Typekit, Font Squirrel, premium dan custom (diunggah oleh pengguna).

17. Masuk

Inbound adalah template yang dapat memudahkan pembuatan website satu halaman untuk aplikasi, buku elektronik, kursus video dan produk serupa. Kustomisasi desain dilakukan menggunakan generator halaman arahan visual, Pembuat Halaman Arahan. Templat ini juga memungkinkan Anda mengalokasikan bagian mini dalam format halaman arahan untuk setiap produk yang dipromosikan dalam satu situs dan dapat digunakan untuk bagian kategori produk di WooCommerce.

18. Utuh

Utuh adalah tema multi-opsi yang dirancang untuk membantu Anda memecahkan masalah bisnis online Anda. Ini mencakup komponen penting dari halaman arahan modern seperti: blok “ Rencana tarif" dan "Karyawan Perusahaan", penggeser dengan ulasan, kumpulan ikon tematik, formulir berlangganan, konsultan online.

19. Komet

Comet adalah template piksel sempurna yang sepenuhnya responsif untuk Visual Composer dan . Pengguna ditawari 5 skin untuk halaman arahan, yang menerapkan efek berikut: penggeser teks, paralaks, video latar belakang - diimpor dari youtube atau dibangun ke dalam html5, penggeser zoom animasi. Pengguna baru akan dengan mudah memahami pengaturan tema ketika membuat wordpress halaman arahan - instruksi dan pelajaran video tersedia online.

20. Mesin Utama

Tema WordPress universal yang memiliki semua yang Anda perlukan untuk membuat halaman arahan:

• 200 blok untuk “dirakit” menjadi templat dalam urutan apa pun;
• kemampuan beradaptasi pada setiap tahap;
• 35 halaman berdesain lengkap - Anda cukup mengubah teks dan foto;
• kecepatan unduh tinggi - 94% lebih cepat dari rata-rata.

Desain pengembangan dapat dievaluasi sebelum pembelian. Skema dan pengaturan warna diubah di editor visual. Penulis menjanjikan dukungan kapan saja.

Pengembang menawarkan templat situs web dalam berbagai topik - mulai dari konstruksi hingga layanan kedokteran hewan. Sederhana dan pendaratan yang efektif halaman akan membantu Anda menyampaikan manfaat, kondisi kerja, dan detail lain yang diperlukan kepada calon klien. Desainnya responsif dan terlihat bagus di semua perangkat, mulai dari monitor Retina hingga gadget seluler. Ada plugin untuk portofolio, jam buka, kalender, serta ikon khusus.

22. Inkubator

“Tema yang ideal untuk sebuah startup,” kata penulis tentang perkembangannya. Desain ringan dan minimalis tahun 2020 cocok untuk toko online, agen acara, dan banyak jenis bisnis lainnya untuk kartu nama atau pengembangan lebih lanjut menjadi proyek skala besar. Termasuk:

• desainer visual - detail diubah secara online;
• kemampuan beradaptasi seluler;
• WooCommerce adalah plugin toko online terbaik;
• dukungan untuk bahasa apa pun.

23. Phlox Pro

Templat multi-templat dengan tiga puluh demo di mana Anda hanya dapat mengganti teks yang diinginkan. Mereka juga menawarkan lebih dari 90 template untuk slider dan efek, dan lebih dari 130 opsi untuk halaman individual. Termasuk 9 plugin utama yang akan berguna untuk mempromosikan situs kartu nama atau sumber daya yang lebih besar. Semua ini didiskon, saat ini tersedia seharga $30. Salah satu templat halaman arahan paling populer.

24. Pelabuhan

Perancang multi-templat lainnya untuk halaman arahan dan kartu nama. Kode bersih dengan pilihan tak terbatas untuk memilih header dan footer tanpa perlu mempelajari pemrograman. Banyak sekali desain yang elemennya mudah diganti berkat plugin grid. Sangat mudah untuk mengubah dari situs satu halaman menjadi toko lengkap melalui pencarian lanjutan. Dukungan selalu siap menjawab pertanyaan.

25. Eko

Multi-template pendaratan yang murah dan populer, yang berbeda:

blanko desain profesional;

respon cepat karena optimasi;

metode pengaturan seret dan lepas menjatuhkan;

lebih dari 200 blok untuk konten.

Situs web profesional tentang topik apa pun yang dapat Anda instal dengan mudah hanya dengan satu klik dan gunakan. Desain modern, yang tidak “membosankan” dan terlihat segar serta indah.

26. Jalan

“Multi-templat generasi baru” adalah pernyataan yang berani, tetapi itulah yang dikatakan penulis tentang produk mereka. Hanya dengan $35 Anda bisa mendapatkan:

• 200 halaman arahan dengan desain “Eropa” yang indah;
• WooCommerce dan formulir pemesanan lanjutan;
• instalasi dalam satu menit;
• pengaturan untuk portofolio, penggeser.

Plugin editor visual Elementor memang telah diperbarui versi terbaru dan sangat mudah digunakan.

27. Tabut

“Yang terbaik di antara 9500,” catat para pengembang. Templatenya berfokus pada orang yang belum pernah melakukan coding. Kustomisasi desain dilakukan menggunakan plugin desainer visual Elementor, yang memungkinkan Anda bekerja dalam mode satu-ke-satu, tanpa menggunakan instalasi pihak ketiga dan segera gunakan fungsionalitas yang berfungsi penuh dari salah satu dari 300 templat. Nyaman dan cepat untuk diatur.

28.Amedeo

Desain cantik dengan skema warna yang tidak biasa. Penekanannya tidak hanya pada desain ramping, karena ditawarkan untuk dibeli sebagai satu set:

Plugin WooCommerce untuk toko online;

plugin formulir kontak tingkat lanjut;

pilihan efek gulir dalam gaya berbeda;

pilihan animasi.

Templat WordPress yang bersih dan jelas untuk kartu nama dan belanja online. Dalam mode toko, ada pengaturan karakteristik produk dan pencariannya.

29. Bolge

Pilihan halaman arahan lucu dalam gaya datar yang modern dan elegan. Menggambar elemen secara manual akan membuat Anda menonjol dan diingat oleh calon klien. Harga sudah termasuk plugin dan widget dasar - mulai dari editor visual hingga efek paralaks untuk menempatkan latar belakang atau portofolio. Anda dapat menyesuaikan tampilan berbeda di desktop dan versi seluler, kemampuan beradaptasi diberikan secara default.

30.Makoto

Beberapa solusi untuk desainer, fotografer, seniman. Preset yang berguna untuk memposting portofolio akan memungkinkan Anda melindunginya dari penyalinan dan memuatnya saat pengguna melihatnya, sehingga menghemat waktu pemuatan. Pengunduhan video mudah. Ada opsi untuk blogging. Elemen penempatan infografis sudah disiapkan. Perancang visual akan membantu Anda mengonfigurasi semua detail dengan mudah.

32. Lansekap

Para pengembang telah membuat desain “hijau” yang menarik untuk layanan lansekap, bantuan berkebun, dan tema lingkungan. Namun, benda kerja tersebut dapat digunakan untuk keperluan lain. Ikon yang indah, font Google yang bersih, respons yang luar biasa, dan penampilan, termasuk pada perangkat Retina, menyiratkan meluasnya penggunaan tema WordPress.

33. Crowdmerc

Dibuat di bawah versi terbaru WordPress. Templat ini terus diperbarui. Fungsionalitas untuk toko online disediakan melalui plugin yang nyaman untuk pencarian dan pemesanan lanjutan. Ada juga preset untuk acara, tanggal kalender, dan rekaman. Elementor digunakan untuk membuat halaman baru. Mendukung plugin tambahan apa pun.

34. Kepercayaan

Tema “musikal” yang kreatif akan diingat oleh pengunjung karena desainnya yang cerah, dan pemilik situs akan tertarik pada:

• perkembangan halaman arahan dan halaman internal- peluang tak terbatas untuk pengembangan sumber daya;
• instalasi satu klik;
• pengaturan WYSIWYG;
• kemampuan untuk menambahkan musik, video, efek penggeser.

36.Pendidikan

Pendidikan adalah versi perbaikan dari tema eLearning lama dengan UX yang lebih canggih dan ditujukan untuk sumber daya online pendidikan: kursus online dan situs web lembaga pendidikan. Templat ini memiliki desain yang menarik dan menyediakan fungsionalitas komprehensif yang diperlukan untuk proses pendidikan.

37. Satu

Salah satunya adalah tema kreatif untuk membuat halaman arahan dengan penekanan pada promosi produk. Bagian depan templat dibuat pada html5 dan bootstrap 3, MailChimp dan Formulir Kontak 7 dapat diintegrasikan dengannya. Pengembang tema UX mempelajari banyak proyek serupa, sebagai hasilnya pengguna menerima template yang sudah jadi Halaman arahan WordPress, yang berisi semua alat penting untuk proyek bisnis.

38. Jumlah

Total adalah template yang cocok untuk banyak proyek. Saat membuat halaman, ia menggunakan: metode drag-and-drop, skema warna tak terbatas, penyesuaian waktu nyata, penggeser premium yang mudah digunakan. Di antara situs demo tema, terdapat templat halaman arahan untuk 11 proyek berbeda.

39. Stockholm

Stockholm adalah salah satu dari 30 template WordPress terlaris sejak awal. Saat bekerja dengan tema, Anda dapat mengatur skema warna untuk keseluruhan situs atau elemen individualnya, menggunakan salah satu dari 600 font Google, dan menggabungkan opsi dan blok dari berbagai situs demo. Pengguna yang membutuhkan solusi siap pakai untuk proyek bisnis dapat mengunduh templat halaman arahan dan segera menginstalnya dari bagian pembuat situs web.

Opsi demo lainnya:

40. Dinamis Besar-besaran

Lebih dari 70+ widget yang menjadikan halaman arahan Anda unik dan modern. Font Google, infografis, adaptasi SEO, kode bersih, pembuatan portofolio yang nyaman - ini hanyalah sebagian dari kelebihan template ini. Pendaratan, dalam arti harfiah, dapat dirangkai secara harfiah seperti mosaik, cukup dengan menyeret dan melepaskan. Pada halaman deskripsi Anda dapat melihat contoh visual.

Saat melihat situs demo, Anda ingin menggunakan semuanya.

» Templat WordPress halaman arahan gratis - TOP 30

Templat WordPress halaman arahan gratis - TOP 30

Secara khusus, artikel ini akan membahasnya pendaratan terbaik Templat WordPress, yang mungkin cocok untuk Anda. Semuanya akan menyertakan tangkapan layar dan versi demo desain sehingga Anda dapat mengevaluasi tema dan segera mengunduhnya jika Anda menyukainya.

Sangat sering, templat halaman arahan untuk WordPress didistribusikan dengan biaya tertentu, tetapi untuk Anda saya telah mengumpulkannya terbaik dan gratis di artikel ini untuk memudahkan pencarian Anda.

Anda mungkin juga tertarik dengan Bagi mereka yang mencari hosting 1.

adalah tema satu halaman yang akan membantu Anda membuat situs web tanpa banyak usaha. Di sisi lain, ia memiliki desain yang digambar secara profesional, pengguliran paralaks, yang memungkinkan kami menyebut tema ini “indah”. Template ini cocok untuk startup dan usaha kecil.

2.

adalah tema WordPress multifungsi. Ini mencakup antarmuka yang dinamis, efek paralaks klasik, dan animasi lainnya yang membuat tampilan tema menjadi lebih menyenangkan. Zerif Lite adalah tema lintas-browser yang juga ditulis dengan baik dari segi kode.

3. Alhena Lite

Alhena Lite adalah tema WordPress perusahaan gratis yang terintegrasi penuh dengan plugin WooCommerce untuk memudahkan Anda mengatur toko online.

4.

adalah tema bisnis yang bersih dan sederhana yang sepenuhnya responsif dan mencakup banyak fitur populer untuk memudahkan pembuatan situs web.

5. pohon palem

Palmas adalah tema modern yang dibuat dengan warna terang, cocok untuk menjalankan blog pribadi atau fashion. Template ini juga mendukung plugin seperti Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache dan masih banyak lainnya.

6. Restoran Brasserie

Brasserie adalah template WordPress sederhana yang cocok untuk restoran, kafe, atau situs kuliner. Termasuk efek animasi, serta sejumlah besar fungsi.

7. XT Perusahaan ringan

XT Corporate lite adalah tema sederhana dan minimalis yang cocok untuk produk atau layanan kecil.

8.

adalah tema menyenangkan yang dibuat dengan warna-warna terang. Termasuk berbagai animasi dan transisi visual yang menakjubkan serta efek paralaks. Selain itu, Freesia Empire mendukung plugin seperti Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress dan WooCommerce.

9.

merupakan topik yang cocok untuk presentasi usaha kecil atau menengah. Itu termasuk jumlah yang banyak fungsi dan tambahan untuk pengelolaan lengkap struktur pendaratan.

10.

adalah tema serbaguna dengan banyak fungsi. Ini adaptif, semua elemen dianimasikan dengan efek paralaks. Satu halaman mudah untuk disesuaikan dan memungkinkan Anda melihat perubahan secara real time. Tema arahan saat ini juga mendukung sejumlah besar plugin dasar WordPress.

11. Fotografi

FotoGraphy merupakan landing page yang cocok untuk fotografer atau desainer. Kesederhanaan dan kehadiran sejumlah besar fungsi menjadikannya lebih terukur dan dapat disesuaikan.

12. Tema Integral

Tema Integral adalah tema paralaks satu halaman yang cocok untuk materi iklan, pemilik bisnis, atau agen. Anda hanya perlu beberapa menit untuk menyiapkannya.

13. Kotak

Square adalah tema minimalis yang dapat digunakan untuk semua jenis website. Ini paling cocok untuk usaha kecil dan menengah. Square dikonfigurasi untuk banyak plugin WordPress populer dan juga dioptimalkan untuk SEO.

14.Meramaikan

Meramaikan adalah tema berkualitas tinggi. Saya menyebutnya premium, karena memadukan kualitas dan keindahan dalam satu botol. Ini juga mendukung banyak plugin populer dan mudah untuk disesuaikan.

15. Latte

Latte adalah template untuk fotografer. Ia memiliki segalanya sehingga Anda dapat menampilkan portofolio Anda secara memadai, serta menceritakan tentang diri Anda. Penyiapan dilakukan dalam beberapa klik.

16. Hari Senin

Monday adalah tema elegan yang cocok untuk bisnis atau freelancer. Muncul dengan sejumlah besar fitur, tambahan, dan add-on.

17. Dunia Usaha

Dunia Bisnis adalah template yang berhubungan dengan topik bisnis. Ini menggabungkan gaya dan kualitas. Dunia bisnis juga dapat disesuaikan untuk website pribadi, perusahaan atau fotografer. Kemampuannya memungkinkan Anda membuat hampir semua hal yang Anda inginkan darinya.

18.

- Ini adalah tema menyenangkan yang dibuat dengan warna terang. Ini sempurna untuk usaha kecil dan menengah, serta untuk situs web pribadi. Anda dapat menyesuaikan apa pun yang Anda inginkan di dalamnya. Banyak fitur dan tambahan yang membuat template ini semakin bagus dan menarik.

19.Satu nada

Onetone adalah template satu halaman untuk WordPress yang cocok untuk menampilkan “Saya” di Internet (tunjukkan portofolio Anda dan/atau bicarakan tentang diri Anda).

20. Bangkitlah

Arise adalah template WordPress satu halaman minimalis yang cocok untuk produk kecil atau bisnis kecil. Tidak ada yang berlebihan di dalamnya, hanya yang terpenting saja.

21. Wah

Woot adalah template minimalis yang dibuat dengan warna gelap untuk menjalankan toko online. Ia bekerja dengan WooCommerce dan banyak plugin populer lainnya.

22. Barat

West adalah tema sederhana yang cocok untuk situs web agensi, bisnis kecil, atau portofolio. Ini mencakup sejumlah besar fungsi, pengaturan dan pengaturan elemen.

23. Anaglif Lite

Anaglyph Lite adalah template sederhana dan elegan yang cocok untuk blogging dan toko online. Itu sudah dikonfigurasi dengan WooCommerce dan plugin populer lainnya.

24.

adalah tema bagus yang dibuat dengan warna gelap dipadukan dengan elemen berwarna, cocok untuk mempresentasikan bisnis, portofolio, atau produk Anda. Setelah mengikuti tautan, klik “Unduh sekarang” di blok BeOnePage Lite dan Anda akan mengunduh versi gratis topik ini.

25.

adalah template satu halaman yang termasuk dalam kategori: fitnes, yoga, pilates, klub kesehatan, dan masih banyak lagi lainnya. dll. Gaya dibuat dalam warna gelap, lintas-browser, adaptif dan berfungsi di semua perangkat.

26. Aglee Lite

Aglee Lite adalah template perusahaan sederhana yang dirancang dengan warna abu-abu muda dan biru. Tema ini sangat cocok untuk startup atau usaha kecil.

27.

adalah tema bisnis yang kuat dan fungsional. Ini memiliki editor praktis yang memungkinkan Anda melihat perubahan secara real time. Wimpie Lite kompatibel lintas-browser, responsif, dan mudah memuat halaman.

28.

- Ini serbaguna Tema WordPress, yang dibuat dengan warna terang dan cocok untuk situs bisnis, portofolio pribadi, atau blog.

Templat halaman arahan yang sudah jadi diperlukan untuk meluncurkan produk baru dengan cepat, mempromosikannya menggunakan halaman LP atau aplikasi seluler, atau memotivasi pengguna untuk mendaftar/berlangganan buletin. Untuk halaman arahan, kenyamanan dan kemudahan penggunaan dengan tata letak yang tepat sangatlah penting. Templat halaman arahan penjualan modern dikembangkan dengan tujuan untuk membuat situs web responsif dengan tingkat konversi tinggi.

Demo | Crossway – Templat Halaman Arahan Startup

Tema HTML5 ultra-modern berdasarkan Bootstrap 3.1.1. Dilengkapi dengan 4 tata letak: opsi bilah navigasi tunggal/multi-halaman. Efek pengguliran paralaks ringan diintegrasikan ke dalam tema laman landas, disesuaikan untuk lalu lintas seluler dan organik (SEO).

Demo | titik persegi

Templat halaman arahan HTML untuk web dan aplikasi seluler, ditujukan untuk menghasilkan prospek yang mudah. Memiliki pemuatan cepat dan html yang valid, kode css. Di bagian atas halaman satu halaman terdapat formulir kontak duplikat dengan .

Demo | Templat Halaman Arahan Responsif Primo

Templat arahan HTML5 satu halaman dengan efek CSS3. Ini memiliki bingkai tiga kolom, dibuat di Bootstrap 3. Cocok untuk menjual aplikasi iOS/Android. Templat mencakup 2 tata letak (dengan dan tanpa Paralaks), Bentuk Ajax kontak, lightbox PrettyPhoto dan 5 skema warna. Mudah untuk disesuaikan: ubah kode hex dan elemen terkait akan diwarnai dengan warna baru. PSD disertakan.

Demo | Hype – Halaman Arahan Aplikasi

Templat aplikasi seluler yang modern dan siap Retina menawarkan 8 pilihan warna, pilihan gambar/.

Demo | Harus Mendapatkan Halaman Arahan Serbaguna

Templat halaman arahan gaya datar serbaguna hadir dengan 3 opsi indeks, 6 skema warna. Templat dibuat di twitter bootstrap3, disertakan skrip PHP formulir kontak dan unduhan.

Demo | Fitnah – Halaman Arahan Bootstrap HTML5 Responsif

Fitnah adalah pilihan ideal untuk startup dan perusahaan, cocok untuk profesional atau proyek individu. Desain responsif dengan Bootstrap dan HTML5/CSS3 disertakan penggeser adaptif, penggeser tab, formulir berlangganan berita, dll.

Demo | Appster – Templat Halaman Arahan Aplikasi Paling Bersih

Cloud – Halaman Arahan Aplikasi yang Mudah Digunakan

Templat halaman arahan HTML5/CSS3 yang elegan, bersih, dan minimalis dengan fungsionalitas luar biasa. Templat ini dirancang untuk halaman Segera Hadir (segera diluncurkan), ideal untuk membuat halaman aplikasi dan situs etalase.

Demo | OnEvent – ​​​​Halaman Landing Acara Khusus

Templat pendaratan adaptif untuk spesial. acara. Memiliki bagian untuk, video komersial, jadwal acara, daftar tamu.

Tema Halaman Arahan sudah benar-benar usang. Meskipun lonjakan jumlah halaman arahan telah sedikit mereda, permintaan akan halaman arahan masih tetap ada. Mereka diluncurkan oleh semua orang, meskipun untuk ceruk bisnis mereka, hal ini jelas merupakan langkah yang merugi. Beberapa orang melakukannya hanya untuk bermain, dan yang lain melakukannya untuk menghasilkan uang. Tapi tidak begitu penting tujuan apa yang Anda kejar, yang penting setiap orang membutuhkan pengembangan halaman. Beberapa akan memesan dari para profesional, sementara yang lain, karena satu dan lain hal, akan mulai membuat Halaman Arahan mereka sendiri. Koleksi ini didedikasikan untuk yang terakhir.

Orang yang memutuskan untuk membuat website sendiri dapat memulai pengembangan dari awal, atau dapat menggunakan yang sudah jadi, karena tidak memerlukan pengetahuan khusus dalam pengembangannya. Cukup pengetahuan dasar HTML dan CSS, yang mereka ajarkan di sekolah. Di sini kembali muncul pertanyaan. Haruskah saya menggunakan yang berbayar atau gratis? Tentu saja, yang berbayar akan memiliki kualitas yang jauh lebih tinggi, dan mungkin akan menunjukkan konversi yang lebih tinggi. Yang gratis akan kurang indah, kurang rumit dalam hal pemasaran, tata letak, dan desain.

Pilihan ini terdiri dari yang gratis dalam HTML murni untuk Penciptaan pendaratan Halaman. Awalnya seleksinya terdiri dari 40 posisi, namun ketika saya bangun di pagi hari dan melihat template ini dengan pandangan segar, saya memutuskan untuk menghapus sebagian besar, karena sejujurnya itu sampah, dan sudah banyak. sampah di Internet. Hanya templat yang paling layak yang tersisa di mana Anda setidaknya dapat membuat sesuatu. Pilihannya mencakup templat halaman arahan untuk berbagai topik, tetapi, untuk beberapa alasan, piringan hitam untuk aplikasi seluler mendominasi. Ternyata kualitasnya paling tinggi.

Sebelumnya, kami telah membuat pilihan dari template Landing Page gratis. Mereka disesuaikan dengan tema tertentu. Kali ini saya memutuskan untuk membuat kumpulan topik yang bukan milik arah mana pun.

Koleksi templat Halaman Arahan HTML gratis lainnya:

Omong-omong. Jika karena alasan tertentu Anda ingin menarik template ini ke mesin Wordpress, maka pada topik ini saya pernah membuat pilihan plugin untuk membuat Landing Page di Wordpress. Anda dapat mencoba menggunakannya. Ini mungkin menghemat banyak waktu. Meskipun, secara pribadi, saya tidak melihat ada gunanya melakukan ini, karena HTML murni sudah cukup untuk LP sederhana.

Jadi. Kami memberi perhatian Anda 20 templat Halaman Arahan HTML gratis.

Appi - Templat dengan video latar Templat Halaman Arahan lain untuk aplikasi seluler dengan video latar belakang layar penuh. Berbeda dengan template dengan latar belakang video yang akan diberikan di bawah ini, template ini memiliki kualitas yang jauh lebih tinggi, meskipun disesuaikan dengan tema tertentu.

Template HTML BukkuFree untuk membuat Landing Page untuk menjual buku. Dibuat dalam gaya datar dengan warna hijau. Ada beberapa animasi yang menghibur.
Pengembang juga menyediakan sumber dalam format PSD untuk diunduh gratis.

Halaman Arahan untuk menjual kopi Templat Halaman Arahan HTML untuk menjual kopi. Desain dan implementasi tata letaknya sangat menarik. Ada animasi elemen saat menggulir halaman. Semuanya dilakukan dalam warna-warna lembut. Sempurna untuk organisasi yang mengantarkan kopi. Namun, template ini dapat dengan mudah dibuat ulang sesuai tema Anda dengan mengganti gambarnya.

Landing Zero - Mendarat dengan video latar Template HTML gratis dengan video latar belakang bertema universal. Cocok untuk membuat portofolio bagi pekerja lepas dengan spesialisasi apa pun, baik itu fotografer atau desainer.
Sama sekali, templat gratis Sulit untuk menemukan yang memiliki video latar belakang. Jadi mari kita unduh.
Video di layar pertama dapat diganti dengan milik Anda sendiri, dan jika tidak ada, Anda dapat mendownloadnya dari stok video gratis. Daftar stok video dengan video legal sudah saya sediakan tadi.

EngageSatu halaman responsif universal lainnya di Bootstrap. Halaman ini cocok untuk presentasi produk sederhana. Strukturnya mengingatkan pada halaman presentasi produk Apple.

Halaman Arahan untuk kafe atau restoran Templat Halaman Arahan gratis yang akrab bagi rata-rata pengguna Runet dengan formulir pengambilan di layar pertama. Dirancang untuk membuat halaman arahan untuk bar, restoran, kafe, atau apa pun yang bertema kuliner. Dengan menggunakan formulir aplikasi, Anda dapat memesan meja untuk waktu tertentu.

OleoseKualitas sangat tinggi, adaptif, gratis, tetapi sekali lagi untuk aplikasi seluler. Landing Page diimplementasikan pada framework Bootstrap. Ini memiliki tiga pilihan warna: biru muda, hijau muda dan ungu. Namun, ini tidak terlalu disesuaikan dengan temanya, sehingga dapat dengan mudah dibuat ulang sesuai kebutuhan Anda.

Ambil - situs web satu halaman gratis dan lagi template HTML satu halaman gratis lainnya untuk aplikasi seluler. Namun desainnya sangat menarik dan tidak biasa. Saya bahkan akan mengatakan unik. Sebagian besar pengunjung pos jaga bukanlah pengembang aplikasi seluler, jadi Anda harus mengulang semuanya agar sesuai dengan tema Anda.

Foodee Template HTML5 satu halaman gratis untuk membuat halaman arahan untuk kafe, restoran, atau sejenis restoran. Templat dengan gambar latar layar penuh dan efek Paralaks.
Ada blok seperti: menu, acara mendatang, ulasan pelanggan, dan serangkaian blok standar di mana Anda dapat menempatkan keuntungan, dll.

PUTIH Saya menganggap template ini sebagai semacam kerangka html untuk membuat situs web satu halaman. Itu tidak disesuaikan dengan topik apa pun, jadi semuanya ada di tangan Anda. Ada dukungan untuk video latar belakang layar penuh. Selain itu, ia memiliki serangkaian blok standar, tipikal untuk situs web satu halaman.

Templat Cyprass cocok untuk membuat Halaman Arahan untuk perusahaan Digital mana pun: studio web, tim pekerja lepas, atau sejenisnya. Ia memiliki semua sumber daya yang diperlukan untuk ini: portofolio dengan filter berdasarkan pekerjaan, berbagai diagram lingkaran, tab, penggeser... Selain itu, ini mendukung video latar belakang di layar pertama.

Salam, para pembaca yang budiman. Hari ini kita akan berbicara tentang aspek teknis yang dapat kita gunakan untuk meningkatkan konversi penjualan barang atau jasa kita. Satu dari poin penting dipikirkan dengan baik halaman arahan dengan barang. Yang disebut halaman arahan, yang pembuatannya akan kita bicarakan nanti dan mendapatkan kode halaman yang sudah jadi.

Apa itu halaman arahan? Ini adalah halaman yang biasanya dibuka orang setelah mengklik iklan. Dibuat untuk satu penawaran: produk, layanan, atau langganan. Halaman arahan yang efektif adalah landasan pemasaran online yang sukses. Produknya mungkin yang terbaik di pasar, iklannya disempurnakan, namun tanpa halaman arahan yang baik, upaya tersebut tidak akan membuahkan hasil 100%. Ini memberi tahu pengunjung apa yang ditawarkan dan mengapa mereka menginginkannya. Rasa urgensi berkontribusi pada pengambilan keputusan yang cepat dan transisi pengguna ke kategori klien.

Bagaimana cara membuat Halaman Arahan? Adalah keliru untuk percaya bahwa jawabannya terletak pada kemampuan mengeset. Halaman arahan yang baik adalah hasil kerja terkoordinasi mengenai tujuan, teks, desain, dan kode. Halaman arahan, contohnya di bawah, akan membantu pemula mempelajari dasar-dasar bekerja dengan tata letak, tetapi tidak akan menggantikan teks konversi dan pemahaman audiens target. Anda juga dapat membuatnya menggunakan berbagai desainer Halaman Arahan.

Oleh karena itu, sebelum berkreasi halaman arahan, bertanya pada diri sendiri:

• Apa yang akan dilakukan seseorang setelah mendarat di halaman landing? Apakah dia akan membeli sesuatu? Apakah Anda akan mengisi formulirnya? Berlangganan buletin? Sebelum Anda melacak tingkat konversi Anda, tetapkan sasaran yang jelas.
• Siapa pesaing saya? Pada kenyataannya, ada tiga pertanyaan yang muncul: siapa, seberapa sukses mereka, dan bagaimana pencapaian mereka dapat diterapkan? Meniru adalah bentuk sanjungan yang paling tulus. Jika pesaing Anda melakukan sesuatu yang berhasil, tirulah hal tersebut di situs Anda.
• Siapa audiens saya? Semakin baik Anda memahami niche dan target audiens Anda, semakin besar peluang usaha Anda membuahkan hasil.

Anda perlu menawarkan semua informasi yang diperlukan, tetapi jangan terlalu banyak sehingga Anda kewalahan dan membuat klien potensial Anda menjauh.

Contoh pembuatan halaman arahan + coding untuk boneka

Sebelum kita mulai, mari kita lihat sekilas HTML dan CSS. Memahami cara kerjanya akan membantu Anda membuat arahan.

HTML adalah bahasa markup browser untuk visualisasi situs web. Ditulis menggunakan tag yang diapit tanda kurung sudut yang mendefinisikan konten.

Tag membuka () dan menutup () di sekitar isian:

isi

Untuk menyempurnakan, atribut ditambahkan setelah nama:

isi

CSS - mendefinisikan cara mengatur elemen HTML. Terdiri dari penyeleksi, properti, dan nilai:

#selector (properti: nilai;)

Pemilih cocok dengan nama tag tertentu di html. Mengubah nilai dan menambahkan properti akan menyesuaikan tampilannya. Anda dapat membuat halaman yang terlihat berbeda satu sama lain dengan menerapkan gaya CSS berbeda ke HTML yang sama.

5 langkah awal

Untuk tata letak cepat, kita akan menggunakan template dengan desain minimal berdasarkan bootstrap. Ini adalah sistem dengan penyeleksinya sendiri, yang digunakan di seluruh dunia untuk mempercepat tata letak.

Itu terlihat sederhana.

Dari ikan ini dibuat website untuk setiap selera dalam beberapa tahap.

Struktur direktori dalam folder:

• index.html: Ini adalah file utama yang akan kita edit.
• /assets: file tambahan terletak di sini:
• /css: Direktori berisi gaya bootstrap dan ikon. File yang akan kita edit adalah main.css.
• /img: folder untuk gambar situs.
• /font: ikon font.
• /js: file javascript bootstrap.

Langkah 1: Menggunakan Header

Judul dan subjudul adalah tempat utama yang membantu menyampaikan nilai penawaran dengan jelas.

Mari kita ubah judul dan nama situsnya. Di sini Anda tidak perlu memiliki keahlian mengetik apa pun - Anda menulis teks Anda sendiri di tempat yang disorot dengan warna kuning di layar.

Langkah 2. Ringkasnya adalah saudara dari pertobatan. Menambahkan manfaat dan tarif

Anda membutuhkan 4 bagian:

• keuntungan;
• tarif;
• ulasan;
• panggilan untuk bertindak.

Mari kita buat bagian dari konten utama "utama", di mana kita akan memasukkan bagian-bagian yang diperlukan:

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

Isi dengan isian, bukan titik.

Untuk bagian manfaat Anda memerlukan kode ini:

Keuntungan
Cepat

Dapat diandalkan

Sed diam tidak enak

Menguntungkan

Elit, diam-diam tidak enak

Secara teknis

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

Dapat diandalkan

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

Menguntungkan

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

Secara teknis

Lorem ipsum dolor sit amet, consectetuer adipiscing

Dapat diandalkan

Lorem ipsum dolor sit amet, consectetuer adipiscing

Menguntungkan

Lorem ipsum dolor sit amet, consectetuer adipiscing

Konten untuk kejelasan:

Masih terlihat ceroboh, tapi tidak ada alasan untuk panik, ayo lanjutkan.

Kami menuliskan harga. Konten berubah dengan cara yang sama seperti pada langkah pertama. gambaran umum dengan kelas “tarif” dan tiga tarif.

Rencana tarif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Dengan sedikit racun, latihan yang kita lakukan ullamcorper suscipit lobortis tidak akan keluar dari komodo yang diakibatkannya.

Tarif No.1
$10

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Memesan
Tarif No.2
$20

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Memesan
Tarif No.3
$30

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Memesan

Sepertinya itu.

Untuk saat ini, kami tidak tertarik dengan tampilan halaman arahan di masa mendatang - kami akan melihat contoh perubahan gaya di bawah.

Langkah 3: Sinyal Kepercayaan dan Ajakan Bertindak

Penggunaan sinyal yang ditargetkan menunjukkan kepada pengunjung bahwa merek tersebut dapat dipercaya. Bentuk sinyal bisa bermacam-macam, namun bentuk klasiknya adalah umpan balik pelanggan.

Ulasan Pelanggan

Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod tempor incididunt ut labore dan dolore magna aliqua. Dengan sedikit racun, yang merupakan latihan ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exeritation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exeritation ullamco laboris nisi ut aliquip ex ea commodo."

Mari kita tetapkan ajakan bertindak.

Dapatkan keuntungan jika Anda memesan hari ini

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Dengan sedikit racun, latihan yang kita lakukan ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Pesan sekarang!

Ulasan akan membantu calon pelanggan memutuskan untuk membeli produk. Untuk kejelasan, kami memerlukan avatar, jadi kami akan segera menempatkannya - di bawah setiap kutipan.

Nama Klien.

Langkah 4: Integrasi Grid dan Mobile Friendly

Untuk mengimplementasikan grid, kita memerlukan container Bootstrap. Penting untuk mengingat jumlah segmen kolom yang valid - 12. Kelas menentukan lebar tampilan konten. Keuntungan dari grid siap pakai ini adalah bahwa kontainer dirancang dengan mempertimbangkan kemampuan beradaptasi dan dapat segera digunakan perangkat seluler. Detil Deskripsi di situs resmi. Gridnya terlihat seperti ini.

Isi “utama” akan dibungkus dalam wadah. Untuk melakukan ini, berikut ini ditulis di atas:

… .

Jika Anda membutuhkan blok agar sesuai dengan seluruh lebar layar, maka wadah dimasukkan ke dalam. Ini akan menjadi sebuah ledakan besar dan seruan untuk bertindak.

Kami akan membungkus semua elemen yang memerlukan penempatan di atas satu sama lain dengan pemisah garis.

Kita sekarang dapat menyesuaikan lebar kolom, dengan fokus pada grid bootstrap. Setelah dibungkus, isiannya berhenti menempel di tepi layar dan muncul lekukan rapi.

Kami menetapkan harga berturut-turut menggunakan kelas kolom col-lg-4. Di dalam baris baris, tidak perlu lagi menulis div terpisah untuk membungkusnya; mereka dapat digabungkan dengan div yang sudah ada dan dipisahkan dengan spasi.

Dengan analogi, kami menyiapkan kolom untuk bagian ulasan dan manfaat. Jika Anda perlu memindahkan elemen ke samping, gunakan kelas kolom offset col-lg-offset-2. Angka di ujung menentukan berapa banyak kolom dasar yang akan terjadi pergeseran.

Langkah 5. Font dan Ikon

Kami menerapkan font judul Google Font. Jika dipilih, buka tab impor dan salin data dari tab tersebut ke file main.css. Kami juga menambahkan pemilih judul ke file yang menggunakan font baru.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* impor font untuk judul */
.navbar-merek,
jam1,
jam2,
jam3,
jam4,
jam5,
jam6 (
font-family: "Roboto Kental", sans-serif; /* Keluaran Googlefont */
}

Untuk kejelasan, kelebihannya dijelaskan oleh kelas dengan nama pusat teks yang cukup jelas dan ikon FontAwesome dari set bootstrap.

Pada titik ini persiapan telah selesai sepenuhnya.

Halaman arahan: contoh kode dengan penawaran, paralaks, dan penghitung

Kami menggunakan tiga tipe paling populer: dengan kalimat, formulir, dan penghitung mundur. Saat tata letak berlangsung, template akan dilengkapi dengan efek.

Contoh 1: dengan kalimat

Mari kita atur latar belakang bagian utama dan padding sehingga layar pertama tertutup.

Jumbotron (
latar belakang: #f5f5f5 url(../img/fon.jpg) tengah atas tanpa pengulangan;
lebar maksimal: 100%;
padding-atas: 250px;
bantalan-bawah: 200 piksel;
perataan teks: tengah;
}

Mari kita ubah ukuran header jumbotron dari h2 menjadi h1. Selanjutnya, kita menulis gaya untuk elemen yang perlu diubah.

Mari kita mulai dengan ikonnya.

Manfaat saya(
warna: #cac4c4;
}

Setelah tanda pagar, warna ditentukan. Anda dapat memilih opsi Anda sendiri menggunakan tabel warna html atau editor gambar.

Indentasi untuk judul bagian

bagian h2 (
padding-atas: 30px;
margin-bawah: 25 piksel;
}

Kami sedang merapikan tampilan tarif. Untuk kenyamanan, kami membuat kelas kami sendiri untuk elemen yang ingin kami soroti secara spesifik.

Tarif No.1
$10

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Memesan

Dan banyak CSS. Tempat apa yang menjadi tanggung jawab bagian tersebut dinyatakan dalam komentar - /* antara garis miring dengan tanda bintang */

/* =========Gaya tarif======== */
/* bentuk umum tarif */
.harga_barang(
latar belakang: #f2f2f2;
posisi: relatif;
tampilan: -webkit-flex;
tampilan: fleksibel;

arah fleksibel: kolom;

menyelaraskan-item: regangkan;
perataan teks: tengah;
-webkit-flex: 0 1 330 piksel;
fleksibel: 0 1 330 piksel;
bantalan: 2em 3em;
margin: 1em;
warna: #262b38;
kursor: bawaan;
meluap: tersembunyi;

}
/* mengubah latar belakang saat diklik */
.pricing_item:hover (
warna: #444;
latar belakang: #daebef;
}
/* latar belakang label harga individual di setiap tarif */
.pricing_item:anak pertama .price (
latar belakang: #9ba9b5;
}
.pricing_item:n-anak(2).harga (
latar belakang: #1f6098;
}
/* pada layar lebar kolom tarif tengah diindentasi dan disorot */
@layar media dan (lebar minimum: 66.250em) (
.harga_barang(
margin: 1,5em 0;
}
.fitur(
indeks-z: 10;
margin: 0;
ukuran font: 1,15em;
}
}
/* judul */
.pricing_item h3 (
ukuran font: 2em;
margin: 0,5em 0 0;
warna: #1d211f;
}
/* latar belakang label harga */
.harga(
ukuran font: 2em;
berat font: tebal;
warna: #fff;
posisi: relatif;
indeks-z: 100;
tinggi garis: 95px;
lebar: 100 piksel;
tinggi: 100 piksel;
margin: 1,15em otomatis 1em;
radius perbatasan: 50%;
latar belakang: #77a5cc;
-transisi webkit: warna 0,3 detik, latar belakang 0,3 detik;
transisi: warna 0,3 detik, latar belakang 0,3 detik;
}
/* mata uang */
.mata uang(
ukuran font: 0,5em;
perataan vertikal: super;
}
/* klarifikasi usulan */
.kalimat (
berat font: tebal;
margin: 0 0 1em 0;
bantalan: 0 0 0,5em;
warna: #2a6496;
}
/* daftar */
.pricing_item ul (
ukuran font: 0,95em;
margin: 0;
bantalan: 1,5em 0,5em 2,5em;
perataan teks: kiri;
}
/* Daftar item */
.pricing_item li (
bantalan: 0,15em 0;
}
/* tombol menilai pesanan */
Tombol .pricing_item(
berat font: tebal;
margin-atas: otomatis;
bantalan: 1em 2em;
warna: #fff;
radius batas: 5px;
latar belakang: #428bca;
-transisi webkit: warna latar 0,3 detik;
transisi: warna latar belakang 0,3 detik;
}
/* berubah warna saat tombol ditekan */
Tombol .pricing_item: arahkan kursor,
Tombol .pricing_item:fokus (
warna latar belakang: #285e8e;
}
/* latar belakang tarif*/
.bg-2 (
latar belakang: #dddddd;
}

Hasil

Ulasan pelanggan. Mari kita lihat dengan rapi dan tunjukkan lokasinya.

/* =========Gaya Testimonial======== */
testimonial (
bantalan: 4em 0;
perataan teks: tengah;
}
.testimonial .avatar img (
radius perbatasan: 50%;
mengapung: kiri;
tampilan: sebaris;
margin-kanan: 1em;
lebar: 65 piksel;
tinggi: 65 piksel;
margin-bawah: 30 piksel;
}
.testimonial .avatar p (
perataan teks: kiri;
bantalan atas: 1em;
warna: #5d5d5d;
berat font: 900;
}

Yang tersisa hanyalah menghiasi ajakan bertindak terakhir dan footer.

/* Tindakan */
.tindakan(
latar belakang: #476177;
tinggi minimum: 180 piksel;
lebar: 100%;
bantalan: 4em 0;
perataan teks: tengah;
}
.aksi h2 (
warna: #fff;
berat font: 300;

}
.aksi p(
warna: #fff;
bayangan-teks: 0 1px 2px rgba(0, 0, 0, .2);
ukuran font: 1.2em;
}
.aksi .kontainer (
margin-atas: 3em;
}
/* Catatan kaki */
catatan kaki(
latar belakang: #333333;
bantalan: 1em 0;
perataan teks: kanan;
}
catatan kaki p(
warna: #fff;
tinggi garis: 1;
transformasi teks: huruf besar;
ukuran font: 0,7em;
margin-atas: 0,5em;
}

Tombol footer ditetapkan sebagai kelas bootstrap bawaan btn-default.

Menghidupkan templat. Kami akan memperkenalkan pengguliran halus dan tombol untuk bagian, serta animasi teks di layar pertama.

Agar transisi berfungsi, kami akan mengganti beberapa kelas bagian dengan id - untuk manfaat dan tarif. Dan kami akan menambahkan tautan ke id ke tombol. Tangkapan layar - apa yang dilampirkan pada apa, disorot dengan spidol kuning.

Kami mengatur indentasi untuk tombol - jbutton. Menggulir saat ditekan berfungsi, tetapi sangat tiba-tiba.

Transisi yang mulus dibuat menggunakan javascript atau jquery. Yang terakhir ini terhubung ke template Bootstrap secara default.

Pengguliran sekarang lancar.

Menambahkan animasi ke teks menggunakan Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Ini adalah kode sumber terbuka siap pakai, dapat digunakan di situs web mana pun. Tempatkan file dari Github di folder css dan tentukan pathnya.

Kami memilih efeknya di sini: https://daneden.github.io/animate.css/. Kami telah memilih fadeInDown. Itu tertulis dalam kode seperti ini:

Sekarang ketika halaman dimuat atau di-refresh, teks akan dianimasikan. Siap.

Contoh 2: dengan bentuk dan efek paralaks

Semakin banyak kolom formulir yang disajikan kepada pengunjung, semakin kecil kemungkinan dia untuk mengisinya. Mintalah hanya informasi minimum yang diperlukan.

Itu dirakit dengan analogi. Kami akan mengubah latar belakang dan warna. Dan, tentu saja, kita akan menambahkan bentuknya.

Mari kita mulai dengan paralaks.

Mari kita ubah background jumbotron menjadi transparan:

latar belakang: transparan;

Di dalam head kita akan memasukkan skrip:

$(jendela).gulir(fungsi(e)(
paralaks();
});
fungsi paralaks())(
var digulir = $(jendela).scrollTop();
$(".bgparallax").css("top",-(scroll*0.2)+"px");
}

Baris pertama di badan adalah wadah paralaks:

Dan di CSS perilakunya adalah:

Bgparalaks (
latar belakang: url(/../img/fon.jpg) ulangi;
posisi: tetap;
lebar: 100%;
tinggi: 300%;
atas:0;
kiri:0;
indeks-z: -1;
}

Paralaks sudah siap. Namun membuat perubahan pada kode dan latar belakang baru memerlukan penetapan ulang skema warna.

Membuat menu menjadi gelap:

Navbar-default (
warna latar belakang: #333;
warna batas: #444;
warna: abu-abu tua;
radius batas: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
warna: abu-abu tua;
warna latar belakang: rgba(0, 0, 0, 0.5);
}

Kalimat di jumbotron kita ganti dengan yang baru – dengan kode form :

Landing Page mengubah pengunjung menjadi pelanggan
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

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

  
  

Dan kami meresepkan penampilannya

/* membentuk */
.daftar bentuk kepala (
tipe gaya daftar: tidak ada;
tinggi garis: 26px;
berat font: 400;
bantalan: 0 piksel;
margin-bawah: 40 piksel;
}
.bentuk kepala(
meluap: tersembunyi;
posisi: relatif;
warna latar belakang: rgba(0,0,0,.4);
bantalan: 35px 40px;
radius batas: 8px;
}
masukan, tombol, pilih, area teks (
lebar: 100%;
margin-bawah: 10 piksel;
}
.headform-list li .fa (
posisi: mutlak;
atas: 0 piksel;
kiri: 0 piksel;
lebar: 42 piksel;
ukuran font: 24px;
perataan teks: tengah;
}
.headform-daftar li(
posisi: relatif;
tinggi minimum: 38px;
padding-kiri: 62px;
margin-bawah: 20 piksel;
}
.jumbotron p (
warna: #fff;
ukuran font: 16px;
gaya font: miring;
}

Teks jumbotron juga berakhir di sini, karena menuntut perubahan.

Kami mengubah tarif.

/* gambaran umum tarif */
.harga_barang(
warna latar belakang: rgba(0,0,0,.4); /* baris diubah */
radius batas: 4px; /* baris diubah */
posisi: relatif;
tampilan: -webkit-flex;
tampilan: fleksibel;
-webkit-flex-direction: kolom;
arah fleksibel: kolom;
-webkit-align-items: regangan;
menyelaraskan-item: regangkan;
perataan teks: tengah;
-webkit-flex: 0 1 330 piksel;
fleksibel: 0 1 330 piksel;
bantalan: 2em 3em;
margin: 1em;
warna: #f2f2f2; /* baris diubah */
kursor: bawaan;
meluap: tersembunyi;
bayangan kotak: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* mengubah latar belakang saat diklik */
.pricing_item:hover (
warna: #444;
latar belakang: #ddd; /* baris diubah */
}

Sekarang tampilannya seperti ini - latar belakang transparan dan sudut membulat.

Templatnya sudah siap.

Contoh 3: dengan penghitung mundur

Isian jumbotron kita ubah lagi dan warnai ulang template agar sesuai dengan background baru, mirip dengan template sebelumnya. Hubungkan skrip penghitung:

HTML





Waktu tidak menunggu
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Dengan sedikit racun, latihan yang kita lakukan ullamcorper suscipit lobortis tidak akan keluar dari komodo yang diakibatkannya. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molstie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

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

  
  


• 
  

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

  
  

var myCountdown1 = Hitung Mundur baru((
waktu: 86400 * 3, // 86400 detik = 1 hari
lebar: 300
, tinggi: 60
, rentangHai: "hari"
, gaya: "membalik" //