Cara Membuat Landing Page dengan WordPress dari Awal

Laman landas adalah laman web yang dirancang terutama untuk menarik perhatian pengunjung dan detailnya – seperti alamat email – melalui formulir prospek. Iklan tersebut dirancang untuk menargetkan audiens tertentu bergantung pada produk yang Anda pasarkan.

Halaman arahan juga bisa menjadi halaman pemerasan yang digunakan untuk mengarahkan lalu lintas ke situs web utama. Anda dapat memiliki halaman arahan sebanyak yang Anda inginkan di situs Anda. Faktanya, semakin banyak halaman arahan yang Anda miliki, semakin banyak prospek yang mungkin Anda peroleh.

Misalnya, jika Anda memasarkan produk baru melalui kampanye email, Anda dapat mengalihkan lalu lintas dari kampanye email yang Anda targetkan ke halaman arahan produk yang dirancang khusus. Hal yang sama berlaku untuk promosi apa pun yang Anda lakukan melalui email atau cara lain. Kuncinya adalah membuat halaman arahan unik untuk setiap kampanye yang Anda luncurkan.

Dasar-dasar Halaman Arahan

Tidak ada aturan tertulis mengenai seperti apa tampilan atau tampilan halaman arahan. Namun, setelah bertahun-tahun bereksperimen dengan berbagai gaya laman landas, saya sampai pada kesimpulan bahwa aspek-aspek penting tertentu harus dipertimbangkan saat merancang laman landas. Inilah empat teratas:

  1. Kekhususan: Saat mendesain laman landas, spesifikkan apa yang Anda tawarkan. Anda juga harus tahu apa untungnya bagi Anda. Misalnya, jika Anda menawarkan info gratis saat pengguna mendaftar di halaman arahan Anda. Apa manfaatnya bagi Anda?
  2. Manfaat: Istilah pemasaran terbaik dapat menarik perhatian pengunjung. Namun jika Anda tidak menjelaskan dengan jelas manfaatnya, konversi Anda mungkin rendah. Halaman arahan yang baik harus jelas tentang bagaimana pengguna akan mendapatkan keuntungan dari penawaran tersebut.
  3. Urgensi: Kata-kata di laman landas Anda harus menciptakan kesan mendesak. Jelaskan mengapa pengunjung halaman harus menerima tawaran Anda sekarang, bukan nanti.
  4. Konversi: Sekarang Anda telah menarik perhatian pengunjung dan berhasil meyakinkan mereka tentang penawaran hebat Anda. Jadi bagaimana mereka mendapatkannya? Halaman arahan Anda harus membuat konversi prospek sesederhana mungkin.

Membuat Halaman Arahan Dengan WordPress

WordPress menawarkan banyak cara untuk membuat halaman arahan yang menakjubkan. Saya akan membahas dua opsi yang dapat Anda gunakan untuk membuat halaman landing, serta opsi ketiga yang kami rekomendasikan hanya untuk developer atau pengguna WordPress tingkat lanjut yang memiliki pengetahuan coding.

1. Cara Membuat Landing Page dengan Tema WordPress

Ada banyak sekali tema WordPress yang dirancang khusus untuk membuat halaman landing. Tema satu halaman ini sering kali menyertakan fitur-fitur hebat seperti pengguliran lokal, penggeser yang menarik, kotak fitur, dan banyak lagi untuk memudahkan pembuatan halaman arahan Anda sendiri. Berikut adalah beberapa favorit kami.

Tema WordPress Zerif Pro

Zerif Pro adalah versi premium dari tema WordPress bisnis satu halaman Zerif lite yang sangat populer. Dengan opsi yang mudah digunakan untuk membuat situs web profesional seperti bagian halaman seret dan lepas, pembuat halaman Asal Situs, warna yang dapat disesuaikan, penggeser, dan banyak lagi, ini merupakan opsi yang bagus untuk halaman landing Anda.

Tema WordPress Total

Tentu saja Total Tema WordPress (yang mencakup 40+ demo mulai cepat) adalah pilihan yang sangat baik terutama untuk laman landas. Tema ini menampilkan lebih dari 500 opsi desain Penyesuai tema langsung (warna, font, lebar halaman, dll), pembuat halaman seret & lepas ujung depan, 100 elemen pembuat halaman, jenis posting khusus (untuk staf, portofolio, dan testimonial), header yang dapat disesuaikan dan footer ditambah banyak lagi. Tidak ada yang tidak dapat Anda bangun dengan Total.

Namun setelah Anda memutuskan tema favorit Anda – instal dan aktifkan! Untuk menambahkan tema baru, buka Penampilan > Tema > Tambah Baru lalu telusuri tema gratis yang mengagumkan dari repositori WordPress.org, atau klik tautan Unggah untuk memasang tema premium atau gratis dari tempat lain.

Membuat Beranda Anda dengan Tema

Dalam contoh ini kami akan menggunakan Zerif Lite dari ThemeIsle, yang bisa Anda dapatkan dari situs web mereka atau dari dashboard WordPress Anda. Instal sederhana dan aktifkan tema untuk memulai.

Sebagian besar tema WordPress satu halaman menggunakan templat halaman “beranda” untuk memudahkan memulai. Untuk menggunakan template, buka Halaman > Tambah Baru, beri nama pada halaman Anda, lalu pilih template halaman dari bagian Atribut Halaman di sidebar. Di Zerif, ini adalah template Halaman Depan. Kemudian publikasikan halaman Anda.

Dengan diterbitkannya laman Beranda, Anda harus menetapkannya sebagai laman depan agar dapat ditampilkan ketika pengunjung mengunjungi URL Anda. Buka saja Pengaturan > Membaca dan pilih halaman yang baru saja Anda buat di bawah Tampilan halaman depan > Halaman statis. Kemudian simpan perubahan Anda.

Sekarang Anda dapat mulai menyesuaikan konten halaman arahan Anda. Zerif Lite menggunakan opsi tema di Penyesuai di bawah opsi “Bagian Halaman Depan” (yang dapat diakses di bawah Penampilan > Sesuaikan). Anda juga dapat mengklik ikon pensil biru untuk mengedit beberapa konten halaman dengan cepat. Setelah selesai, simpan saja dan halaman arahan Anda akan siap digunakan!

Tidak semua tema halaman arahan akan menggunakan Penyesuai WordPress untuk opsi halaman depan Anda. Beberapa tema menggunakan jenis postingan khusus yang akan muncul di dasbor WordPress Anda (biasanya di dekat opsi postingan, media, halaman, dll.), beberapa tema menyertakan elemen seret dan lepas bawaan hanya untuk template beranda, dan tema lainnya menyertakan pembuat halaman (yang kami aku akan membicarakannya selanjutnya). Jika Anda memiliki pertanyaan tentang cara menggunakan tema, lihat dokumentasinya, atau jika tema tersebut merupakan tema premium, hubungi dukungan.

2. Cara Membuat Halaman Arahan dengan Plugin WordPress

Tema memang bagus, tetapi salah satu cara termudah untuk membuat halaman arahan dengan WordPress adalah dengan menggunakan plugin. Ada banyak plugin halaman arahan di luar sana baik yang gratis maupun premium. Semuanya bekerja dengan cara yang kurang lebih sama: biasanya, mereka menawarkan kumpulan templat halaman arahan untuk tujuan berbeda.

Setelah menginstal dan mengaktifkan, Anda dapat mengelola penyesuaian halaman menggunakan halaman pengaturan plugin. Beberapa plugin mengizinkan ekstensi pihak ketiga tempat Anda dapat menambahkan penyesuaian dan fungsionalitas lebih lanjut ke halaman arahan Anda menggunakan kait, filter, dan tindakan. Ada beberapa plugin halaman arahan WordPress yang perlu dipertimbangkan:

  • Laman Landas yang Berkembang
  • Halaman Arahan WordPress
  • Halaman Arahan Gravitasi Paralaks
  • Optimalkan Tekan

Namun kami juga menyarankan untuk mempertimbangkan plugin pembuat halaman umum seperti:

  • Pembuat Halaman Toko Roti WP
  • Pembangun Berang-berang
  • elemen

Favorit pribadi kami adalah WP Bakery Page Builder yang tersedia gratis dengan tema Total WordPress terlaris kami.

Cara Membuat Halaman Arahan dengan Plugin

Untuk menggunakan plugin pembuat halaman, Anda harus menginstal dan mengaktifkan tema yang kompatibel terlebih dahulu. Anda seharusnya tidak mengalami masalah apa pun dengan sebagian besar tema, namun akan lebih baik jika Anda dapat menemukan tema yang dibuat atau diuji secara khusus agar berfungsi dengan plugin pilihan Anda. Dalam contoh kami, kami akan menggunakan WP Bakery Page Builder dengan tema Total, yang akan meminta Anda menginstal dan mengaktifkan plugin yang direkomendasikan.

Jika tema Anda tidak menyertakan perintah, periksa dokumentasi untuk melihat cara memasang plugin apa pun yang disertakan. Atau jika Anda telah membeli pembuat halaman sendiri, buka Plugin > Tambah Baru > Unggah Plugin untuk menginstal dan mengaktifkan.

Setelah plugin pembuat halaman Anda aktif, buka Halaman > Tambah Baru untuk mulai membuat.

Total kebetulan menyertakan opsi khusus untuk template halaman “Halaman Landing”. Saat membuat halaman, template ini akan menghapus bagian header dan footer untuk Anda (hal ini masuk akal karena area ini lebih cocok untuk situs web multihalaman yang mengharuskan Anda bernavigasi antarhalaman). Pastikan untuk menyimpan halaman Anda jika Anda ingin memilih template.

Dengan halaman Anda siap digunakan, inilah saatnya untuk mulai membangun. Jika menggunakan Visual Composer, Anda sekarang memiliki opsi untuk menggunakan editor backend atau editor frontend langsung. Total sepenuhnya mendukung editor frontend dan kami sangat menyarankan untuk menggunakannya karena Anda dapat melihat setiap elemen saat Anda sedang membangun. Pastikan untuk Perbarui atau Publikasikan halaman Anda setelah Anda selesai mengedit. Jika Anda ingin mempelajari lebih lanjut tentang penggunaan pembuat halaman khusus ini, lihat panduan Komposer Visual kami.

Selanjutnya, Anda harus menyetel halaman depan ke halaman yang baru saja Anda buat (langkah ini mungkin terdengar familiar karena sebagian besar tema mengharuskan Anda mengedit setelan ini). Jadi buka Pengaturan > Bacaan > Tampilan halaman depan > Halaman statis dan pilih beranda baru Anda.

Bonus: Impor Template Siap Pakai

Oh, dan jika Anda menggunakan tema Total WordPress, ada juga opsi untuk mengimpor halaman arahan yang sudah jadi (atau desain situs multihalaman) untuk memulai. Total mencakup banyak sekali impor di Panel Tema > Importir demo.

Klik untuk mulai mengimpor. Total bahkan akan meminta Anda untuk menginstal dan mengaktifkan plugin yang diperlukan untuk demo spesifik yang ingin Anda impor.

Dari sana Anda akan memiliki opsi untuk mengimpor konten XML, gambar, pengaturan penyesuai tema, widget, dan bahkan bilah geser (jika ada). Setelah impor selesai, Anda dapat mengedit dan menyesuaikan halaman sesuai keinginan Anda.

Untuk melakukan perubahan, cukup buka halaman Anda, cari halaman yang ingin Anda edit, arahkan kursor dan klik opsi “Edit dengan Pembuat Halaman”. Ini akan membuka editor front-end. Cukup arahkan dan klik untuk mengedit, lalu klik tombol “perbarui” di bagian atas layar untuk menyimpan perubahan Anda. Ini benar-benar tidak menjadi lebih mudah!

Alat Daring Lainnya

Seperti halnya plugin, ada banyak alat online untuk membuat halaman landing (cukup lakukan penelusuran cepat di Google dan Anda dapat melihatnya sendiri). Ini pada dasarnya berfungsi seperti pembuat situs web WYSIWYG, memungkinkan Anda memilih dan menggunakan komponen antarmuka pengguna untuk menyiapkan halaman arahan dalam waktu singkat. Namun mereka mempunyai keterbatasan dan ada pula yang tidak fleksibel. Halaman yang dirancang dengan baik dan diberi kode tangan seringkali jauh lebih unggul dan jauh lebih fleksibel.

3. Cara Membuat Landing Page dengan Template Halaman WordPress (Lanjutan)

Jika Anda seorang pengembang atau pengguna WordPress berpengetahuan/lanjutan, Anda dapat mengedit tema WordPress Anda saat ini untuk menambahkan templat halaman khusus untuk halaman arahan Anda. Banyak tema WordPress komersial hadir dengan sejumlah templat halaman yang masing-masing memiliki tujuan tertentu. Sebuah tema dapat memiliki satu atau beberapa templat. Meskipun tema berkualitas tinggi menawarkan beberapa templat halaman arahan yang dibuat sebelumnya untuk berbagai tujuan.

Meskipun demikian, Anda dapat membuat halaman arahan Anda sendiri dari templat halaman kosong. Anda hanya memerlukan beberapa keterampilan CSS dan kemampuan desain. Untuk tujuan ilustrasi, saya akan membuat halaman arahan sederhana menggunakan template halaman kosong dalam tema <i>TwentyThirteen. Saya hanya akan menempatkan judul besar yang menarik bersama dengan tombol besar pada templat halaman kosong.

Harap perhatikan bahwa metode ini ideal jika Anda membuat laman landas yang akan memiliki domain khusus – yaitu tidak akan menjadi bagian dari situs web utama Anda. Multisite tidak memberi Anda banyak fleksibilitas dalam desain tetapi domain khusus memberi Anda kebebasan untuk membongkar tema sesuka Anda tanpa mengkhawatirkan halaman lain.

Catatan: Kami hanya merekomendasikan opsi ini untuk pengembang atau pengguna WordPress tingkat lanjut yang merupakan pembuat kode berpengetahuan dan berpengalaman. Jika Anda baru menggunakan WordPress, kami sangat menyarankan untuk tetap menggunakan tema dan plugin saat membuat halaman landing Anda.

Langkah 1: Buat folder tema anak

Karena saya akan membuat perubahan pada tema lain, penting untuk memulai dengan membuat tema anak. Dengan cara ini setiap perubahan pada tema tidak akan hilang ketika tema inti diperbarui.

Untuk memulai, pertama-tama Anda harus terhubung ke situs web Anda melalui FTP dan membuat folder baru untuk tema anak Anda di direktori wp-content/themes Anda. Kami menyarankan untuk menambahkan “anak” di akhir tema yang sedang Anda edit (misalnya dua puluh tiga belas anak atau sesuatu serupa yang Anda kenal). Di sinilah Anda akan menambahkan file baru untuk membuat perubahan pada tema inti Anda.

Langkah 2: Buat file style.css baru untuk tema anak Anda

Buka folder tema anak yang baru saja Anda buat dan tambahkan file baru bernama style.css (ini akan menjadi stylesheet baru Anda). Selanjutnya, di dashboard WordPress Anda, buka Penampilan > Editor. Di jendela editor, Anda akan melihat stylesheet default tema terbuka.

Dengan menggunakan file tema asli sebagai panduan, buatlah bagian judul untuk file style.css tema anak Anda yang baru saja Anda buat, yang mungkin terlihat seperti ini:

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen WordPress theme
Version: 1.0.0
*/

Setelah stylesheet baru Anda siap, langkah berikutnya adalah memuat stylesheet induk dengan mengantrekannya.

Langkah 3: Buat file function.php untuk tema anak Anda

Saat Anda mengaktifkan tema anak, situs web Anda tidak akan memuat gaya apa pun, jadi Anda sebaiknya memuat lembar gaya tema induk Anda. Untuk melakukan hal ini, buatlah file kosong baru bernama functions.php di folder tema anak Anda. Kemudian tambahkan kode berikut:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentythirteen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentythirteenchild-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Ini akan memuat gaya tema anak yang Anda edit setelah stylesheet tema induk Anda. Anda sekarang memiliki tema anak yang berfungsi untuk tema Dua Puluh Tiga Belas – saatnya melakukan perubahan!

Langkah 4: Sesuaikan gaya Anda

Dengan tema anak Anda yang siap digunakan, Anda dapat mulai menyesuaikan halaman arahan Anda. Pertama, Anda mungkin ingin menghapus navigasi utama karena Anda membuat halaman arahan. Untuk melakukan hal ini, tambahkan kode berikut ke file style.css tema anak Anda (Catatan: nama elemen navigasi Anda mungkin berbeda dengan nama kami. Untuk menemukan nama elemen, Anda dapat menggunakan alat pemeriksa browser Anda atau periksa file header.php):

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

Jika Anda melihat situs Anda sekarang, navigasinya hilang. Sebagai gantinya, kami akan menyisipkan tombol CTA besar yang akan mengalihkan ke halaman pendaftaran dan kemudian ke situs web utama.

Selanjutnya kita cukup menyesuaikan header situs (h1) di stylesheet dengan mengubah ukuran font. Header situs diidentifikasi oleh kelas .site-title . Sekali lagi, periksa kembali tema Anda untuk melihat nama elemen yang digunakan header Anda karena mungkin berbeda dengan yang ada di contoh. Untuk memperbesar ukuran font, tambahkan baris terakhir kode ini ke stylesheet tema anak Anda:

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

Simpan dan segarkan halaman Anda. Anda akan melihat judul yang lebih besar:

Langkah 5: Buat templat halaman kosong dan beri nama <i>front-page.php

Di editor WordPress, klik Page Template (page.php) untuk melihat kodenya. Salin baris pertama hingga get_header() yang seharusnya serupa dengan ini:

<?php
/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

Buka editor kode dan buat file baru bernama front-page.php  Tempelkan baris yang Anda salin pada langkah sebelumnya. Simpan file baru ini di folder tema anak Anda.

Mengapa halaman depan.php? Karena ini akan menjadi halaman depan statis, Anda ingin memastikan bahwa halaman tersebut selalu dipilih dan ditampilkan terlebih dahulu dan front-page.php memiliki prioritas tertinggi dalam hierarki template WordPress). Selain itu, Anda juga boleh menyisipkan footer (menggunakan fungsi get_footer()) ke dalam file templat Anda. Saya telah menghilangkannya.

Hapus baris pertama di bagian komentar dan ganti dengan nama template – kami menyebutnya Laman Landas Saya.

Simpan perubahannya. Jika Anda mencoba melihat situs Anda sekarang, Anda akan disambut oleh halaman kosong dengan hanya header yang dimodifikasi. Itulah template front-page.php. Itu kosong karena kami belum memasukkan konten apa pun.

Langkah 6: Masukkan markup konten khusus untuk halaman arahan

Sekarang kita telah mengedit header dan membuat template halaman kosong, sekarang saatnya menambahkan konten sebenarnya ke halaman arahan. Yang tersisa hanyalah menempatkan tombol besar kita ke dalam template halaman depan kita yang baru. Cukup tempelkan kode ini ke file Anda dan simpan. Itu hanya tautan yang dibungkus dengan div dan itu saja.

/**
* Template Name: My Landing Page
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that other 'pages' on your WordPress site will use a different template. 
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>

    <div class="landing-page">
        <a href="#" class="button"> Big button here</a>
    </div>

Saat Anda melihat situs Anda, Anda akan melihat judul yang baru saja kami sisipkan ke bagian konten halaman bersama dengan teks link untuk tombolnya:

Sekarang saatnya menghidupkan halaman dengan gaya CSS. Buka <i>Penampilan > Editor. Klik pada <i>Stylesheet untuk membuka file <i>style.css untuk diedit. Rekatkan kode ini dan simpan:

/*
Theme Name: TwentyThirteenChild
Theme URI:
Description: A child theme for the default Twenty Thirteen theme
Version: 1.0.0
*/

/*Custom styling for landing page*/

body .navbar { display: none; }

body .site-title { font-size: 90px; }

.landing-page {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.button {
    display: block;
    width: 50%;
    background: #FF6600;
    border: 2px solid #FF8533;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font: bold 3.2em/100px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 100px auto auto auto;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 3px 3px rgba(255, 255, 255, 0.2);
}

a.button { text-decoration: none }

a.button:hover {
    color: #fff;
    background: #FF8533;
    background: -webkit-linear-gradient(top, #FF8533, #FF8533);
    background: -moz-linear-gradient(top, #FF8533, #FF8533);
    background: -o-linear-gradient(top, #FF8533, #FF8533);
    background: -ms-linear-gradient(top, #FF8533, #FF8533);
    background: linear-gradient(top, #FF8533, #FF8533);
}

Halaman Anda sekarang akan terlihat seperti ini:

Selamat! Anda baru saja membuat halaman arahan khusus menggunakan WordPress. Meskipun Anda mungkin tidak akan menggunakannya dalam kehidupan nyata karena ini sangat mendasar, namun idenya adalah untuk menunjukkan kepada Anda cara melakukannya menggunakan templat halaman. Anda dapat mengedit halaman mana pun dengan tema apa pun dan membuat halaman arahan khusus dengan cara ini.

Kesimpulan

Kami telah melihat tiga cara umum untuk membuat halaman arahan WordPress. Kami sangat merekomendasikan menggunakan tema atau plugin. Namun jika Anda ingin menggunakan cara DIY, pastikan untuk memoles keterampilan coding Anda terlebih dahulu.

Apakah Anda menggunakan halaman arahan untuk kampanye pemasaran Anda? Bisakah Anda berbagi pengalaman, kesuksesan, atau tantangan yang Anda temukan selama ini? Saya ingin mendengar semuanya!