Salam, para pembaca yang budiman. Hari ini kita akan membicarakannya poin teknis, yang dengannya kita dapat meningkatkannya konversi penjualan barang atau jasa mereka. Salah satu poin penting dipikirkan dengan baik halaman arahan dengan barang. Yang disebut halaman arahan, tentang pembuatannya akan kita bicarakan lebih lanjut dan dapatkan kode siap halaman.

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, tetapi tanpa halaman arahan yang baik, upaya tersebut tidak akan memberikan 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 pada 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 macam desainer halaman arahan.

Oleh karena itu, sebelum berkreasi halaman arahan, tanyakan pada diri Anda:

• 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: 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.

Kami perlu menawarkan segalanya informasi yang diperlukan, namun tidak sampai menekan dan mengusir calon klien.

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 memposisikan elemen HTML. Terdiri dari penyeleksi, properti, dan nilai:

#selector (properti: nilai;)

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

Untuk tata letak cepat Kami 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:

• indeks.html: Ini berkas 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;
• ajakan 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

Elit, diam-diam tidak enak

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

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

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, pembentuk 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.

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

per bulan/per orang

• Lorem ipsum dolor sit amet, pembentuk adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Ini terlihat seperti ini.

Meskipun kami tidak tertarik dengan tampilan laman landas di masa mendatang, kami akan mempertimbangkan contoh perubahan gaya di bawah.

Langkah 3: Sinyal Kepercayaan dan Ajakan Bertindak

Penggunaan sinyal yang ditargetkan menunjukkan kepada pengunjung bahwa merek tersebut dapat dipercaya. Sinyal dapat diterima berbagai jenis, tapi yang klasik adalah ulasan 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:

Mari kita tetapkan ajakan bertindak.

Dapatkan keuntungan jika Anda memesan hari ini

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

Ulasan akan membantu klien potensial mengambil keputusan untuk membeli suatu produk. Untuk lebih jelasnya, kami memerlukan avatar, jadi kami akan segera menuliskannya di tempatnya - 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. Deskripsi rinci di situs web 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,
h2,
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.

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

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;
padding-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

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

/* =========Gaya tarif======== */
/* pandangan 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. Mari kita terapkan 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 mulus tercipta ketika bantuan 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 sudah siap sumber terbuka, ini 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.

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 melakukan perubahan pada kode dan latar belakang baru memerlukan penugasan ulang skema warna.

Membuat menu menjadi gelap:

Navbar-default (
warna latar belakang: #333;
warna batas: #444;
warna: abu-abu gelap;
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 gelap;
warna latar belakang: rgba(0, 0, 0, 0.5);
}

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

Halaman Arahan mengubah pengunjung menjadi klien
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: 26 piksel;
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: 8 piksel;
}
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 mereka terlihat seperti ini - latar belakang transparan dan sudut membulat.

Templatnya sudah siap.

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, pembentuk 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.