Cara Membuat Halaman Login Khusus yang Indah untuk Situs Web Anda
Diterbitkan: 2017-08-10Halaman login, seperti halnya halaman arahan situs web, sangat penting bagi pemilik bisnis yang ingin mengonversi lalu lintas. Sama seperti halaman arahan, halaman login harus canggih agar pengunjung hanya memberikan detail mereka tanpa banyak kerumitan.
Sebagian besar halaman login terbaik sangat mudah, mereka menggunakan gaya minimalis tanpa iklan dan gimmick pemasaran; hanya formulir masuk dengan satu atau dua gambar latar belakang.
Ada beberapa cara berbeda untuk membuat halaman login yang merayu pengunjung dan mendorong mereka untuk kembali.
- Jika Anda pandai coding, (HTML dan CSS sederhana), Anda harus dapat membuat halaman login yang sederhana namun menarik dengan beberapa kode dasar.
- Untuk pemula, lebih mudah untuk menyesuaikan halaman login yang disertakan dengan template pembuat situs web. Sebagian besar pembuat dan templat situs web, ( WordPress , Weebly , Shopify , Joomla , dan lainnya) hadir dengan templat siap pakai, dan yang perlu Anda lakukan hanyalah mengeditnya untuk memenuhi kebutuhan Anda.
- Anda juga dapat menggunakan plugin dan tema sederhana untuk membuat halaman login. Plugin bagus karena memungkinkan Anda untuk menyesuaikan halaman login Anda dengan mengklik tombol. Mereka dapat digunakan oleh pemula serta desainer web berpengalaman.
Metode yang Anda pilih untuk menyesuaikan halaman login situs web Anda akan ditentukan oleh tingkat keahlian Anda. Meskipun pengkodean mungkin merupakan metode yang baik untuk satu orang, orang lain mungkin tidak tahu di mana harus meletakkan kode yang mana. Plugin bagus, tetapi ada juga yang premium.
Baca terus untuk mengetahui bagaimana Anda dapat membuat dan menyesuaikan halaman login yang indah.
Gunakan HTML/CSS Sederhana
Membuat dan menyesuaikan formulir login dalam HTML dan CSS dilakukan dalam tiga langkah mudah: menangani markup HTML, memposisikan elemen yang berbeda dari formulir login, dan terakhir, menata elemen yang berbeda agar terlihat menarik.
Markup HTML
Di sini, Anda akan menambahkan tag HTML sederhana untuk membuat formulir sebenarnya. Bagian HTML terdiri dari wadah, formulir itu sendiri, dan beberapa input lainnya. Dengan memasukkan kode dengan benar, Anda akan dapat membuat formulir login sederhana dengan bagian nama pengguna, bagian kata sandi, kotak centang, dan tombol masuk. Namun, komponennya tidak diatur dengan baik.
<div id="container"> <form> <label for="username">Username:</label> <input type="text" id="username" name=" username"> <label for="password">Password:</label> <input type="password" id="password" name ="password"> <div id="lower"> <input type="checkbox"><label for="checkbox ">Keep me logged in</label> <input type="submit" value="Login"> </div> </form> </div>
Memposisikan Elemen
Anda kemudian dapat menata berbagai bagian formulir dengan menambahkan kode sederhana seperti di bawah ini. Ini akan menempatkan komponen yang berbeda di posisi yang berbeda.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}
Setelah ini, Anda dapat memposisikan berbagai elemen halaman login Anda sesuai spesifikasi Anda. Pertama, Anda perlu menentukan elemen dasar, seperti warna font dan kemudian memposisikan formulir di tengah halaman Anda untuk keseimbangan. Di sini, Anda dapat menambahkan warna font apa pun yang Anda suka, apa pun yang Anda anggap indah. Namun, selalu disarankan untuk memastikan bahwa bentuknya tetap sederhana agar tidak membingungkan pengunjung.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}
Pada titik ini, bentuknya mungkin masih terlihat miring, dan Anda dapat membuatnya lebih baik dengan menambahkan sedikit gaya struktural. Untuk melakukan ini, mulailah dengan memastikan bahwa elemen formulir login Anda tidak terjepit dan mudah dibaca. Anda dapat menambahkan kode berikut untuk memastikan kerapian pada formulir Anda.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}
Formulir login Anda sekarang akan terlihat sederhana dan hampir lengkap dengan berbagai elemen yang diposisikan dengan baik. Namun, Anda perlu menata berbagai area input formulir login Anda agar terlihat lebih baik. Di sini, Anda akan menentukan warna, ukuran font, menambahkan beberapa padding, margin, lebar elemen yang berbeda dan dasar-dasar lainnya seperti warna yang muncul saat Anda mengarahkan mouse atau mengklik elemen. Tambahkan kode di bawah ini.
p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue" , Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}
Karena Anda ingin halaman login Anda terlihat lebih cantik, Anda dapat menambahkan sedikit penyesuaian untuk membuat tombol login dan kotak centang terlihat sedikit gaya. Tambahkan kode berikut.
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}
Gaya Elemen Formulir
Pada titik ini, elemen diposisikan dengan baik dan terlihat cukup canggih. Formulir login sudah siap tetapi Anda masih bisa membuatnya sedikit lebih indah dengan menambahkan kode gaya CSS. Anda dapat memulai prosesnya dengan membuat sudut membulat pada wadah, lalu memberinya bayangan untuk menyempurnakan tampilannya dan menonjolkan kesan mendalam. Untuk melakukannya, masukkan kode di bawah ini ke area container.
background: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
Menambahkan kode di atas ke area kontainer akan membuat kode kontainer terlihat seperti di bawah ini:
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
Setelah Anda memberi gaya pada wadah, Anda sekarang dapat menata area input yang berbeda dengan kode yang serupa. Tambahkan kode di bawah ini, dan area input Anda akan terlihat jauh lebih bagus daripada di awal.
border: 1 px solid #c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5 px 3px rgba( 190 , 190 , 190 , .4 ), 0 0 0 5px #f5f7f8; }
Sekarang seluruh kode input kata sandi akan terlihat seperti di bawah ini. Formulir login akan terlihat luar biasa, tetapi masih ada lebih banyak gaya yang dapat Anda lakukan untuk menyempurnakan tampilan formulir Anda lebih jauh.
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}
Anda sekarang perlu membuat tombol login terlihat lebih baik dan berbeda. Untuk melakukannya, masukkan kode di bawah ini pada bagian kirim kode Anda.
font-size: 14 px; font-weight: bold; color: #fff; background-color: #acd6ef; /*IE fallback*/ background-image: -webkit-gradient(linear, left top, left bottom, from (#acd6ef), to(# 6ec2 e8)); background-image: -moz-linear-gradient( top left 90deg, #acd6ef 0 %, # 6ec2e8 100%); background-image: linear-gradient(top left 90 deg, #acd6ef 0%, # 6 ec2e8 100 %); border-radius: 30px; border: 1px solid # 66add6; box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ), inset 0 1px 0 rgba( 255 , 255 , 255 , .5 ); cursor: pointer; }
Seluruh kode bagian kiriman Anda akan terlihat seperti di bawah ini dan Anda akan mengubah warna tombol login dan aspek lainnya, dan Anda akan memiliki formulir login sederhana seperti di bawah ini.
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}
Formulir login sekarang terlihat bagus. Dianjurkan untuk meninggalkan formulir yang sederhana. Alih-alih menambahkan elemen lain dan mengacaukan halaman, Anda dapat menambahkan logo bisnis Anda dan satu gambar. Pengunjung cenderung terganggu oleh begitu banyak detail. Ergo, Anda pasti ingin memiliki halaman login website yang sesederhana mungkin namun tetap cantik dan menarik sehingga membuat pengunjung kembali lagi. Anda dapat mengambil contoh formulir login dari beberapa situs web populer seperti Snoggle News , Dropbox , Freshbooks , MailChimp dan Theidealist antara lain. Situs web seperti Google dan Facebook juga menggunakan gaya minimalis, dan halaman login mereka terlihat bagus hanya dengan formulir login, logo perusahaan, dan beberapa detail lainnya.
Kotak Masuk jQuery
Kotak Masuk jQuery telah digunakan di sejumlah besar situs web, dan mereka selalu terlihat inovatif dan telah menemukan jalan mereka ke dalam desain formulir masuk situs web zaman baru. Mereka terlihat sederhana namun bergaya. Tidak seperti di masa lalu, login saat ini terjadi di halaman yang sederhana dan Anda tidak perlu khawatir dengan kemunduran jQuery.
Dengan jQuery, Anda dapat membuat tombol login di beranda situs web Anda, yang mengarahkan pengunjung Anda ke halaman login yang didukung oleh jQuery. Formulir berisi panggilan Ajax dan menggunakan skrip PHP eksternal untuk memverifikasi kredensial login untuk memberikan atau menolak akses. Dengan jQuery, mudah untuk menambahkan tautan pendaftaran tepat di bawah kotak masuk. Ini membuat proses lebih lancar dan memungkinkan pengguna mendapatkan pengalaman yang mulus. Pengunjung Anda akan mudah menemukan halaman pendaftaran/pendaftaran di situs web Anda. Anda juga dapat menggunakan kotak masuk yang sama untuk mengakses akun Anda.
Sama seperti ketika Anda menggunakan HTML dan CSS untuk membuat dan menata halaman login Anda, Anda perlu memiliki kotak login di sini yang berbicara sedikit tentang bisnis Anda dengan cara yang tidak mengacaukan halaman. Formulir login yang Anda buat dengan jQuery sederhana dan terlihat cantik. Namun, Anda perlu menambahkan gambar atau hanya logo bisnis Anda agar lebih menarik. Halaman login harus ramah pengguna.
Templat Formulir Masuk Pembuat Situs Web
Cara ramah pemula terbaik untuk membuat formulir masuk yang menarik adalah melalui templat formulir masuk pembuat situs web. Di sini, Anda tidak perlu tahu pengkodean, dan Anda bahkan tidak perlu pernah membuat situs web lain; formulir login dibuat dengan mengklik tombol. Pembuat situs web seperti Weebly dan WordPress menawarkan formulir freemium dan premium.
Untuk membuat halaman login, instal plugin formulir dan kemudian kunjungi halaman pengaturan template/plugin untuk menyesuaikannya sesuai keinginan Anda. Di WordPress, Anda akan diminta untuk menginstal WPForms dan kemudian memasukkan kode pembelian Anda untuk memverifikasi. Kunjungi halaman pengaturan dan klik Addons. Di sini, Anda dapat menambahkan elemen apa pun yang Anda inginkan. Klik Addon Pendaftaran Pengguna, dan Anda siap melakukannya.
Klik "Buat halaman baru" dan kemudian pilih formulir "login pengguna". Sebuah templat akan muncul dengan semua bidang yang telah dibuat sebelumnya, dan yang perlu Anda lakukan hanyalah mengeklik bidang untuk mengeditnya. Setelah mengedit setiap bidang, klik pada tab pengaturan dan putuskan apa yang akan terjadi setelah pengunjung masuk; Anda dapat mengarahkan mereka ke URL tertentu.
Setelah Anda membuat formulir, buat halaman baru untuk formulir masuk. Editor akan muncul dan di atasnya, klik "tambahkan formulir." Sebuah popup akan muncul, dan Anda dapat memilih formulir yang baru saja Anda buat. Anda dapat terus mengedit halaman untuk memenuhi kebutuhan Anda dengan lebih baik, atau Anda dapat menyimpan dan menerbitkannya. Anda dapat menambahkan login khusus yang baru saja Anda buat sebagai widget di bilah sisi situs web Anda.
Saat berhadapan dengan template login yang disediakan oleh pembuat situs web, prosesnya kurang lebih sama; instal template, edit sesuai keinginan Anda, buat halaman baru dan masukkan formulir yang Anda buat. Ini direkomendasikan bagi mereka yang baru dalam desain situs web.
Tema dan Plugin Pihak Ketiga
Tema
Pembuat situs web Anda mungkin telah menyediakan templat atau tema masuk, gratis atau premium, tetapi mungkin tidak memenuhi kebutuhan Anda. Untungnya, ada banyak tema dan plugin pihak ketiga terutama untuk WordPress. Tema seperti template untuk seluruh situs web yang menghadirkan gaya yang berbeda dan dengan sebagian besar dari mereka, Anda akan bisa mendapatkan halaman login yang bergaya dan menarik; tema tidak hanya berdampak pada halaman login tetapi juga aspek lain dari situs web Anda.
Anda harus memilih tema dengan halaman login yang Anda sukai. Hal baiknya adalah dengan sebagian besar tema, Anda dapat melakukan tur fitur sebelum menginstal. Tema berharga antara $2 dan hingga lebih dari $100. Tema, seperti halnya template pembuat web, mudah diedit. Anda dapat mengubah warna desain, font dan ukuran sesuai dengan keinginan dan selera Anda.
Tema bisa dari pembuat situs web Anda, tema premium, atau bisa dari pengembang pihak ketiga seperti Themeforest .
Plugin
Plugin sederhana; tidak seperti tema yang memengaruhi hampir semua aspek situs web Anda, ada plugin untuk berbagai aspek situs web Anda. Ergo, Anda dapat menginstal plugin hanya untuk membuat formulir login atau formulir pendaftaran. Plugin tersedia secara gratis dan ada juga yang premium; pilih salah satu berdasarkan anggaran dan kebutuhan Anda.
Semua pembuat situs web akan memiliki plugin untuk Anda pilih; apakah Anda menggunakan Weebly , Joomla atau WordPress , ada banyak tema. Untuk membuat halaman login menggunakan plugin, kunjungi dasbor Anda untuk melihat daftar plugin yang tersedia untuk pembuat situs web Anda. Instal plugin yang Anda inginkan dan Anda akan dibawa ke halaman checkout tempat Anda membayar plugin.
Setelah menginstal plugin, Anda akan diminta untuk mengedit elemen yang berbeda; klik pada setiap elemen untuk mengedit dan kemudian klik simpan perubahan. Buat halaman baru dan tambahkan formulir yang telah Anda buat menggunakan plugin.
Kesimpulan
Halaman login harus sederhana dan juga harus menarik. Desain halaman login yang berbeda telah disaksikan di masa lalu. Hanya pilih metode pembuatan halaman login yang Anda sukai; jangan memilih kode jika Anda tidak berpengalaman dengan kode. Anda bisa mendapatkan bantuan desain dari seorang profesional, tetapi lebih baik lagi, Anda bisa mendapatkan bantuan merancang halaman login Anda.
Orang-orang juga telah menggunakan login sosial. Di sini, Anda membiarkan pengunjung login dengan detail akun media sosial mereka seperti Facebook atau Twitter. Ini juga merupakan pilihan yang baik karena cukup sederhana dan juga meningkatkan kehadiran dan kinerja media sosial bisnis Anda. Anda dapat memeriksa halaman login situs web populer untuk mendapatkan wawasan tentang cara menata halaman login situs web Anda; tanpa mengacaukannya dan tanpa meninggalkan detail.