Web Siteniz İçin Güzel Bir Özel Giriş Sayfası Nasıl Oluşturulur
Yayınlanan: 2017-08-10Giriş sayfası, tıpkı bir web sitesinin açılış sayfası gibi, trafiği dönüştürmek isteyen işletme sahipleri için çok önemlidir. Tıpkı açılış sayfası gibi, giriş sayfasının da ziyaretçilerin ayrıntılarını fazla güçlük çekmeden sağlamaları için karmaşık olması gerekir.
En iyi giriş sayfalarının çoğu basittir, hiçbir reklam ve pazarlama hilesi içermeyen minimalist bir stil kullanmışlardır; sadece bir veya iki arka plan resmi ile formda oturum açın.
Ziyaretçileri cezbeden ve onları geri gelmeye teşvik eden giriş sayfaları oluşturmanın birkaç farklı yolu vardır.
- Kodlama konusunda iyiyseniz (basit HTML ve CSS), birkaç temel kodla basit ama çekici bir giriş sayfası oluşturabilmelisiniz.
- Yeni başlayanlar için, web sitesi oluşturucu şablonuyla birlikte gelen oturum açma sayfasını özelleştirmek daha kolaydır. Çoğu web sitesi oluşturucu ve şablon ( WordPress , Weebly , Shopify , Joomla ve diğerleri) hazır şablonlarla birlikte gelir ve tek yapmanız gereken bunları ihtiyaçlarınızı karşılayacak şekilde düzenlemektir.
- Bir giriş sayfası oluşturmak için basit eklentiler ve temalar da kullanabilirsiniz. Eklentiler iyidir çünkü bir düğmeye tıklayarak giriş sayfanızı özelleştirmenize izin verirler. Yeni başlayanlar ve deneyimli web tasarımcıları tarafından kullanılabilirler.
Web sitesi giriş sayfanızı özelleştirmek için seçeceğiniz yöntem, beceri seviyenize göre belirlenecektir. Kodlama bir kişi için iyi bir yöntem olabilirken, bir başkası hangi kodu nereye yerleştireceğini bilemeyebilir. Eklentiler iyidir, ancak bazıları premiumdur.
Güzel bir giriş sayfasını nasıl oluşturabileceğinizi ve özelleştirebileceğinizi öğrenmek için okumaya devam edin.
Basit HTML/CSS Kullanın
HTML ve CSS'de bir oturum açma formu oluşturmak ve özelleştirmek üç kolay adımda yapılır: HTML işaretlemesiyle ilgilenin, oturum açma formunun farklı öğelerini konumlandırın ve son olarak, farklı öğeleri çekici görünmeleri için stillendirin.
HTML İşaretlemesi
Burada, asıl formu oluşturmak için basit HTML etiketleri ekleyeceksiniz. HTML kısmı bir kapsayıcıdan, formun kendisinden ve birkaç diğer girdiden oluşur. Kodu doğru girerek, kullanıcı adı bölümü, şifre bölümü, onay kutusu ve giriş düğmesi ile basit bir giriş formu oluşturabileceksiniz. Bununla birlikte, bileşenler iyi düzenlenmemiş.
<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>
Elemanları Konumlandırma
Daha sonra aşağıdaki gibi basit bir kod ekleyerek formun farklı kısımlarını şekillendirebilirsiniz. Bu, farklı bileşenleri farklı konumlara yerleştirecektir.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}
Bundan sonra, giriş sayfanızın farklı öğelerini özelliklerine göre konumlandırabilirsiniz. Öncelikle, yazı tipi rengi gibi temel öğeleri belirtmeniz ve ardından denge için formu sayfanızın ortasına yerleştirmeniz gerekecektir. Burada, güzel olduğunu düşündüğünüz herhangi bir yazı tipi rengini ekleyebilirsiniz. Ancak, ziyaretçilerin kafasını karıştırmamak için formun basit kalmasını sağlamak her zaman tavsiye edilir.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}
Bu noktada, form hala hantal görünebilir ve biraz yapısal stil ekleyerek daha iyi hale getirebilirsiniz. Bunu yapmak için, giriş formunuzun öğelerinin birbirine ezilmediğinden ve kolayca okunabilir olduğundan emin olarak başlayın. Formunuza bu düzgünlüğü sağlamak için aşağıdaki kodu ekleyebilirsiniz.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}
Oturum açma formunuz şimdi basit görünecek ve iyi konumlandırılmış farklı öğelerle neredeyse eksiksiz görünecek. Ancak, daha da iyi görünmeleri için giriş formunuzun çeşitli giriş alanlarını biçimlendirmeniz gerekir. Burada, renk, yazı tipi boyutu, bazı dolgu ekleme, kenar boşlukları, farklı öğelerin genişliği ve farenizi üzerine getirdiğinizde veya bir öğeye tıkladığınızda görünen renk gibi diğer temel bilgileri belirteceksiniz. Aşağıdaki kodu ekleyin.
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;
}
Giriş sayfanızın daha da güzel görünmesini istediğiniz için, giriş düğmesinin ve onay kutusunun biraz şık görünmesini sağlamak için biraz daha özelleştirme ekleyebilirsiniz. Aşağıdaki kodu ekleyin.
#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;
}
Form Öğelerini Stillendirin
Bu noktada, elemanlar iyi konumlandırılmış ve yeterince sofistike görünüyor. Giriş formu hazır ama yine de CSS stil kodları ekleyerek onu biraz daha güzel hale getirebilirsiniz. Konteynerin köşelerini yuvarlatarak ve ardından görünümünü geliştirmek ve derinlik hissi ortaya çıkarmak için bir gölge vererek işleme başlayabilirsiniz. Bunu yapmak için aşağıdaki kodu konteyner alanına girin.
background: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
Yukarıdaki kodun kapsayıcı alanına eklenmesi, kapsayıcı kodunun aşağıdaki gibi görünmesini sağlayacaktır:
#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 );
Kapsayıcıyı biçimlendirdikten sonra, artık farklı giriş alanlarını benzer bir kodla biçimlendirebilirsiniz. Aşağıdaki kodu ekleyin ve giriş alanlarınız başlangıçta olduğundan çok daha güzel görünecek.
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; }
Şimdi tüm şifre giriş kodu aşağıdaki gibi görünecektir. Giriş formu harika görünecek, ancak formunuzun görünümünü daha da geliştirmek için yapabileceğiniz daha fazla stil var.
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;
}
Şimdi giriş düğmesinin daha iyi ve farklı görünmesini sağlamalısınız. Bunu yapmak için, kodunuzun gönder bölümüne aşağıdaki kodu girin.
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; }
Gönderim bölümünüzün tüm kodu aşağıdaki gibi görünecek ve giriş butonunun rengini ve diğer özelliklerini değiştirmiş olacaksınız ve aşağıdaki gibi basit bir giriş formunuz olacak.
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;
}
Giriş formu şimdi iyi görünüyor. Formu bu kadar basit bırakmanız tavsiye edilir. Başka öğeler eklemek ve sayfayı karmaşık hale getirmek yerine, işletmenizin logosunu ve tek bir resmi ekleyebilirsiniz. Ziyaretçilerin dikkati çok fazla ayrıntı tarafından dikkati dağıtma eğilimindedir. Dolayısıyla, olabildiğince basit ama yine de güzel ve ziyaretçileri tekrar geri getiren cazip bir web sitesi giriş sayfasına sahip olmak isteyeceksiniz. Snoggle News , Dropbox , Freshbooks , MailChimp ve Theidealist gibi bazı popüler web sitelerinden giriş formları örnekleri alabilirsiniz. Google ve Facebook gibi web siteleri de minimalist stili kullanıyor ve giriş sayfaları sadece bir giriş formu, şirket logosu ve birkaç başka ayrıntıyla harika görünüyor.
jQuery Giriş Kutuları
jQuery Oturum Açma Kutuları çok sayıda web sitesinde kullanılmıştır ve her zaman yenilikçi görünmektedirler ve yeni çağ web sitesi oturum açma formu tasarımlarında kendilerine yer bulmuşlardır. Basit ama şık görünüyorlar. Geçmişten farklı olarak, günümüzde oturum açma basit bir sayfada gerçekleşir ve herhangi bir jQuery aksiliği konusunda endişelenmenize gerek yoktur.
jQuery ile web sitenizin ana sayfasında, ziyaretçilerinizi jQuery destekli oturum açma sayfasına yönlendiren bir oturum açma düğmesi oluşturabilirsiniz. Form, Ajax çağrısını içerir ve erişim vermek veya erişimi reddetmek için oturum açma kimlik bilgilerini doğrulamak için harici bir PHP komut dosyası kullanır. jQuery ile giriş kutusunun hemen altına bir kayıt bağlantısı eklemek kolaydır. Bu, süreci daha sorunsuz hale getirir ve kullanıcıya sorunsuz bir deneyim sağlar. Ziyaretçileriniz web sitenizdeki kayıt/kayıt sayfasını kolayca bulacaktır. Hesabınıza erişmek için aynı oturum açma kutusunu da kullanabilirsiniz.
Tıpkı giriş sayfanızı oluşturmak ve biçimlendirmek için HTML ve CSS kullandığınızda olduğu gibi, buradaki giriş kutusunun, sayfayı karıştırmayacak şekilde işiniz hakkında biraz konuşmasını sağlamanız gerekir. jQuery ile oluşturduğunuz giriş formu basit ve güzel görünüyor. Ancak, daha çekici hale getirmek için bir resim veya yalnızca işletme logonuzu eklemeniz gerekir. Giriş sayfaları kullanıcı dostu olmalıdır.
Web Sitesi Oluşturucu Giriş Formu Şablonları
Çekici bir oturum açma formu oluşturmanın yeni başlayanlar için en uygun yolu, web sitesi oluşturucunun oturum açma formu şablonlarıdır. Burada kodlama bilmenize, hatta başka bir web sitesi oluşturmanıza bile gerek yok; Giriş formları bir düğmeye tıklanarak oluşturulur. Weebly ve WordPress gibi web sitesi oluşturucuları, ücretsiz ve premium formlar sunar.
Oturum açma sayfasını oluşturmak için, form eklentilerini yükleyin ve ardından beğeninize göre özelleştirmek için şablonun/eklentin ayarlar sayfasını ziyaret edin. WordPress'te, WPForms'u yüklemeniz ve ardından doğrulamak için satın alma kodunuzu girmeniz gerekecektir. Ayarlar sayfasını ziyaret edin ve Eklentiler'e tıklayın. Burada, istediğiniz herhangi bir öğeyi ekleyebilirsiniz. Kullanıcı Kaydı Eklentisi'ne tıklayın ve hazırsınız.
“Yeni sayfa oluştur”a tıklayın ve ardından “kullanıcı girişi” formunu seçin. Tüm alanları önceden oluşturulmuş bir şablon görünür ve tek yapmanız gereken düzenlemek için bir alana tıklamak. Her alanı düzenledikten sonra, ayarlar sekmesine tıklayın ve bir ziyaretçi oturum açtıktan sonra ne olacağına karar verin; onları belirli bir URL'ye yönlendirebilirsiniz.
Formu oluşturduktan sonra giriş formu için yeni bir sayfa oluşturun. Bir düzenleyici görünecek ve üst kısmında "form ekle"yi tıklayın. Bir açılır pencere belirecek ve az önce oluşturduğunuz formu seçebilirsiniz. İhtiyaçlarınızı daha iyi karşılamak için sayfayı düzenlemeye devam edebilir veya kaydedip yayınlayabilirsiniz. Yeni oluşturduğunuz özel oturum açma bilgilerini web sitenizin kenar çubuğuna bir widget olarak ekleyebilirsiniz.
Web sitesi oluşturucu tarafından sağlanan oturum açma şablonlarıyla uğraşırken, süreç aşağı yukarı aynıdır; şablonu yükleyin, beğeninize göre düzenleyin, yeni bir sayfa oluşturun ve oluşturduğunuz formu ekleyin. Bu, web sitesi tasarımında yeni olanlar için önerilir.
Üçüncü Taraf Temaları ve Eklentileri
Temalar
Web sitesi oluşturucunuz ücretsiz veya premium olarak bir oturum açma şablonu veya teması sağlamış olabilir, ancak ihtiyaçlarınızı karşılamayabilir. Neyse ki, özellikle WordPress için çok sayıda üçüncü taraf teması ve eklentisi var. Temalar, tüm web sitesi için farklı stiller getiren şablonlar gibidir ve çoğu ile şık ve çekici bir giriş sayfası elde edebileceksiniz; tema yalnızca giriş sayfasını değil, aynı zamanda web sitenizin diğer yönlerini de etkiler.
Sevdiğiniz bir giriş sayfası olan bir tema seçmeniz gerekecek. İşin iyi yanı, çoğu temada yüklemeden önce özellikleri gezebilmenizdir. Temalar 2 $ ile 100 $'dan fazla olan her şeye mal olur. Web oluşturucu şablonları gibi temaları düzenlemek kolaydır. Tasarım renklerini, yazı tiplerini ve boyutlarını beğeninize ve zevkinize göre değiştirebilirsiniz.
Temalar, web sitesi oluşturucunuzdan, premium temalardan veya Themeforest gibi üçüncü taraf geliştiricilerden olabilir.
Eklentiler
Eklentiler basittir; Web sitenizin neredeyse tüm yönlerini etkileyen temaların aksine, web sitenizin farklı yönleri için eklentiler vardır. Ergo, sadece bir giriş formu veya kayıt formu oluşturmak için bir eklenti yükleyebilirsiniz. Eklentiler ücretsiz olarak mevcuttur ve bazıları premiumdur; bütçenize ve ihtiyaçlarınıza göre birini seçin.
Tüm web sitesi kurucuları, aralarından seçim yapabileceğiniz eklentilere sahip olacaktır; Weebly , Joomla veya WordPress kullanıyor olsanız da çok sayıda tema var. Bir eklenti kullanarak bir giriş sayfası oluşturmak için, web sitesi oluşturucunuz için mevcut eklentilerin listesini görüntülemek üzere kontrol panelinizi ziyaret edin. İstediğiniz eklentiyi yükleyin ve eklenti için ödeme yapacağınız bir ödeme sayfasına yönlendirileceksiniz.
Eklentiyi kurduktan sonra, farklı öğeleri düzenlemeniz istenecektir; düzenlemek için her bir öğeye tıklayın ve ardından değişiklikleri kaydet'e tıklayın. Yeni bir sayfa oluşturun ve eklentiyi kullanarak oluşturduğunuz formu ekleyin.
Çözüm
Bir giriş sayfasının çekici olması gerektiği kadar basit olması gerekir. Yakın geçmişte farklı giriş sayfası tasarımlarına tanık olunmuştur. Yalnızca rahat olduğunuz oturum açma sayfası oluşturma yöntemini seçin; Kodlar konusunda bilginiz yoksa kodlamayı seçmeyin. Bir profesyonelden tasarım yardımı alabilirsiniz, ancak daha da iyisi, giriş sayfanızı tasarlama konusunda yardım alabilirsiniz.
İnsanlar ayrıca sosyal girişleri kullandılar. Burada ziyaretçilerin Facebook veya Twitter gibi sosyal medya hesap bilgileriyle giriş yapmalarına izin verirsiniz. Bu, yeterince basit olduğunu ve aynı zamanda işletmenizin sosyal medyadaki varlığını ve performansını geliştirdiğini göz önünde bulundurarak iyi bir seçenektir. Popüler web sitelerinin giriş sayfalarına göz atarak web sitenizin giriş sayfanızı nasıl şekillendireceğiniz konusunda fikir edinebilirsiniz; karışıklık yaratmadan ve ayrıntıları atlamadan.