Membuat web sales page dengan wordpress

Agar promosi produk secara online bisa lebih menarik dan meyakinkan pembeli, maka perlu menggunakan sales page, yaitu halaman website yang berisi promosi dan ajakan untuk membeli produk tertentu. Biasanya berupa produk digital, software atau ebook, tapi bisa juga berupa produk fisik.

Halaman sales page harus membuat pengunjung fokus pada materi promosi yang berisi serangkaian tulisan yang dirancang sedemikian rupa untuk menggiring setiap pengunjung ke dalam proses penjualan. Sejak pertama kali pengunjung datang ke web, sampai dia memutuskan untuk mengklik tombol ORDER adalah tugas sales page. Ibarat salesman yang bekerja mempresentasikan produk siang dan malam selama 24 jam non stop.

Jadi, pengantar atau promosi yang memikat, desain yang profesional adalah kunci utama web sales page. Ah, tapi saya tidak akan membahas cara membuat sales letter atau materi promosinya. Saya hanya mau share cara membuat halaman sales page dengan wordpress, dengan kata lain membuat template wordpress untuk sales page.

Kenapa mesti pakai wordpress, kita tahu wordpress merupakan CMS gratis terbaik abad ini, dukungan dan update dari pengembang serta ketersediaannya ribuan plugin yang menambah kemampuan wordpress dari hanya sekedar mesin blog biasa.

Cara membuat templatenya saya bagi menjadi dua:

1. Template yang berdiri sendiri – menggunakan wordpress hanya untuk salespage

2. Template halaman khusus – halaman sales page di blog yang sudah live dengan template tertentu

Untuk point yang pertama, minimal membuat dua file saja, yaitu index.php dan style.css. Walaupun file index.php nya berisi kode HTML dengan table (tanpa CSS) atau berisi HTML sekaligus CSS, tapi tetap saja membutuhkan file style.css untuk aktivasi template tersebut.

Langkah => buat folder dengan nama theme yang anda sukai misalnya wpsales.

Buat file index.php , copy kode di bawah ini di bagian paling atas (bagian header)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php if (is_home () ) { bloginfo('name'); }
elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); }
elseif (is_single() ) { single_post_title();}
elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title();}
else { wp_title('',true); } ?></title>

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />

<?php wp_head(); ?>
</head>

Masukan code html desain websitenya (sebelumnya anda harus menyiapkan desain), atau copy contoh di bawah ini dan taruh di bagian tengah (bagian content)

<body>
<div>

<?php if (have_posts()) : ?>    
<?php while (have_posts()) : the_post(); ?>
<h1>
<?php the_title(); ?>             
</h1>
<?php the_content('Read the rest of this entry &raquo;'); ?>  
                
<?php endwhile; ?>
<?php endif; ?>

Selanjutnya copy kode di bawah ini untuk bagian paling bawah (bagian footer)

<div> &copy; Copyright 2012 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All Rights Reserved    
</div>
</div>

<?php wp_footer(); ?> 
</body>
</html>

Buat file style.css , jika desain yang anda buat memakai table (tanpa CSS, misal dari Frontpage/Dreamweaver), maka anda cukup memasukan nama theme di file style tersebut

/*
Theme Name: wpsalespage
Theme URI: 
Description: custom theme for sales page
Author: Tom
Author URI: http://muhutomo.com
*/

Jika anda memakai contoh desain saya di atas, silahkan copy kode di bawah ini dan masukan ke file stye tersebut

/* begin Page */

* {
	margin: 0;
	padding: 0;
}
body {
	background: #0e5086 url(http://3.bp.blogspot.com/-XiKrQbNAZ7c/UGZruIoeVGI/AAAAAAAAAdM/fundjOsw8G8/s1600/background.jpg) center repeat-y;
	font-size: 62.5%;
	font-family: Verdana, Arial;
}
p {margin-bottom:10px;}

.Left {
	float: left;
}
.Right {
	float: right;
}
.Clear {
	clear: both;
}
.Justify {
	text-align: justify;
}
.HalfWidth {
	width: 50%;
}
.DashedBorder {
	border: 4px dashed #ff0000;
}
.SolidBorder {
	border: 1px solid #222;
}
.SolidBackground {
	background-color: #eee;
}
.YellowBackground {
	background-color: #efe5bc;
}

.Padding {
	padding: 10px;
}

.Red {
	color: #ff0000;
}
.Highlighted {
	background-color: #ffff00;
	font-weight: bold;
}
.Centered {
	text-align: center;
	margin: 0 auto;
	width: 75%;
}
.Large {
	font-size: 1.4em;
	padding-bottom: 20px;
}
.Bold {
	font-weight: bold;
}

.Position {
	width: 600px;
	margin: 20px auto;
	background-color: #fff;
	font-size: 1.3em;
	padding: 20px;
	padding-bottom: 10px;
}
h1 {
	font-size: 1.8em;
	font-color: red;
	padding-bottom: 20px;
	text-transform: capitalize;
}
h2 {
	font-size: 1.4em;
	color: darkblue;
	padding: 10px 0 10px 0;
}
a {
	font-weight: bold;
}
ol {
	padding-left: 30px;
}
a {
	color: #093c7b;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.Footer {
	text-align: center;
	margin-top: 20px;
}

Langkah terakhir yaitu upload theme-nya lalu aktifkan, buat satu posting berisi materi sales pagenya

Untuk point yang kedua ini membuat template halaman (bukan template wordpress), dan kali ini saya contohkan menambahkan template halaman sales page dalam theme yang sedang anda pakai.

Langkah pertama, buatlah file php dengan nama misalnya sales-page.php

Beri nama templatenya, dengan mengcopy kode di bawah ini dan taruh di bagian paling atas pada file sales-page.php


<?php
/*
Template Name: Sales Page
*/
?>

Copy contoh kode desain di bawah ini dan letakan di bawah kode tersebut di atas

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php if (is_home () ) { bloginfo('name'); }
elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); }
elseif (is_single() ) { single_post_title();}
elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title();}
else { wp_title('',true); } ?></title>

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />

<?php wp_head(); ?>
</head>

<body>
<div>

<?php if (have_posts()) : ?>    
<?php while (have_posts()) : the_post(); ?>
<h1>
<?php the_title(); ?>             
</h1>
<?php the_content('Read the rest of this entry &raquo;'); ?>  
                
<?php endwhile; ?>
<?php endif; ?>
<div> &copy; Copyright 2012 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All Rights Reserved    
</div>
</div>

<?php wp_footer(); ?> 
</body>
</html>

Upload ke folder theme yang sedang dipakai

Copy code CSS ini dan taruh di file style.css


/* begin Page */

* {
	margin: 0;
	padding: 0;
}
body {
	background: #0e5086 url(http://3.bp.blogspot.com/-XiKrQbNAZ7c/UGZruIoeVGI/AAAAAAAAAdM/fundjOsw8G8/s1600/background.jpg) center repeat-y;
	font-size: 62.5%;
	font-family: Verdana, Arial;
}
p {margin-bottom:10px;}

.Left {
	float: left;
}
.Right {
	float: right;
}
.Clear {
	clear: both;
}
.Justify {
	text-align: justify;
}
.HalfWidth {
	width: 50%;
}
.DashedBorder {
	border: 4px dashed #ff0000;
}
.SolidBorder {
	border: 1px solid #222;
}
.SolidBackground {
	background-color: #eee;
}
.YellowBackground {
	background-color: #efe5bc;
}

.Padding {
	padding: 10px;
}

.Red {
	color: #ff0000;
}
.Highlighted {
	background-color: #ffff00;
	font-weight: bold;
}
.Centered {
	text-align: center;
	margin: 0 auto;
	width: 75%;
}
.Large {
	font-size: 1.4em;
	padding-bottom: 20px;
}
.Bold {
	font-weight: bold;
}

.Position {
	width: 600px;
	margin: 20px auto;
	background-color: #fff;
	font-size: 1.3em;
	padding: 20px;
	padding-bottom: 10px;
}
h1 {
	font-size: 1.8em;
	font-color: red;
	padding-bottom: 20px;
	text-transform: capitalize;
}
h2 {
	font-size: 1.4em;
	color: darkblue;
	padding: 10px 0 10px 0;
}
a {
	font-weight: bold;
}
ol {
	padding-left: 30px;
}
a {
	color: #093c7b;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.Footer {
	text-align: center;
	margin-top: 20px;
}

Login ke dasboard wordpress, buat halaman baru untuk sales page , di sebelah kanan editor ada page template, pilih sales page , klik publish

Jika halaman sales page tersebut ingin tampil sebagai halaman depan, klik menu setting – reading , di bagian front page displays pilih static page – pilih halaman baru tersebut sebagai front page

Ini hanya tutorial dan contoh yang sangat sederhana, anda bisa improvisasi dan mengembangkan sendiri.

Tidak mau ribet? Silahkan download templatenya di sini

Kalau ada pertanyaan monggo tinggalkan komentar….


8 responses to “Membuat web sales page dengan wordpress”

  1. Wah bagus sekali ilmunya, semoga memberi nilai postif untuk para pembisnis internet di Indonesia dan semoga makin sukses…. Salam kenal.

  2. saya sudah download, terus gimana cara penggunaannya yah mas

    • Tom says:

      maksudnya penggunaan gimana ya? itu kan template wordpress, tinggal upload lalu aktifkan, selanjutnya bikin posting materi sales page

      cara upload theme, login ke dashboard, menu appearance – theme – install theme – upload

      shortcut url => http://rizkyzone.com/wp-admin/theme-install.php?tab=upload

  3. Pandu says:

    bang.. aku coba donlod templat,trus upload di wordpres kok gagal,
    kenapa ya bang?

    • Tom says:

      yang gagal itu uploadnya, atau mengaktifkan theme nya? upload via dashboard admin atau via cpanel/FTP? beritahu aku bro gagalnhya gmn?
      makasih udah mampir ke blogku :)

      • Pandu says:

        Unpacking the package…

        Installing the theme…

        The package could not be installed. The theme is missing the <code>style.css</code> stylesheet.

        Theme install failed……..itu bank upload via dasboard admin

        • Tom says:

          theme ini kan diupload => http://muhutomo.com/wp-content/uploads/2012/09/wpsales.zip ?

          jadi yg diupload file wpsales.zip kan? kalau itu yg diupload kok aneh ya, itu dijamin bisa, udah saya coba kok.

          secara logika peringatan erornya itu karna file style.css tidak ditemukan (The theme is missing the style.css stylesheet), sedangkan dalam file wpsales.zip itu sudah terdapat file style.css dan index.php, syarat minimal template wordpress.

          hmmmm mungkin uploadnya kurang sempurna, atau filenya zip nya rusak

Leave a Reply