Web Siteniz İçin Güzel Bir Özel Giriş Sayfası Nasıl Oluşturulur

Giriş 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 sunabilmeleri 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 biçimlendirin.

HTML İşaretlemesi

Burada, asıl formu oluşturmak için basit HTML etiketleri ekleyeceksiniz. HTML kısmı bir kap, formun kendisi 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ş.

[xhtml]
<div id="konteyner">
<form>
<label for="username">Kullanıcı adı:</label>
<input type="text" id="kullanıcı adı" name="
kullanıcı adı">
<label for="password">Şifre:</label>
<input type="password" id="password" adı
="şifre">
<div id="alt">
<input type="onay kutusu"><label for="onay kutusu
">Oturumumu açık tut</label>
<input type="gönder" value="Giriş">
</div>
</form>
</div>
[/xhtml]

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.

[css]
html, gövde {
genişlik: %100;
yükseklik: %100;
yazı tipi ailesi: "Helvetica Neue" , ​​Helvetica, sans
-serif;
renk: # 444 ;
-webkit-font-smoothing: kenar yumuşatma;
arka plan: #f0f0f0;
}
[/css]

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.

[css]
#konteyner {
pozisyon: sabit;
genişlik: 340 piksel;
yükseklik: 280 piksel;
üst: %50;
sol: %50;
üst kenar boşluğu: -140 piksel;
sol kenar boşluğu: -170 piksel;
}
[/css]

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.

[css]
form {
kenar boşluğu: 0 otomatik;
üst kenar boşluğu: 20 piksel;
}
etiket {
renk: # 555 ;
ekran: satır içi blok;
sol kenar boşluğu: 18 piksel;
üst dolgu: 10 piksel;
yazı tipi boyutu: 14 piksel;
}
[/css]

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.

[css]
baba {
yazı tipi boyutu: 11 piksel;
renk: #aaa;
Sağa çık;
üst kenar boşluğu: -13 piksel;
sağ kenar boşluğu: 20 piksel;
}
pa: fareyle üzerine gelin {
renk: # 555 ;
}
girdi {
yazı tipi ailesi: "Helvetica Neue" , ​​Helvetica,
sans Serif;
yazı tipi boyutu: 12 piksel;
anahat: yok;
}
girdi[tür=metin],
giriş[tür=şifre] {
renk: # 777 ;
sol dolgu: 10 piksel;
kenar boşluğu: 10 piksel;
üst kenar boşluğu: 12 piksel;
sol kenar boşluğu: 18 piksel;
genişlik: 290 piksel;
yükseklik: 35 piksel;
}
[/css]

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.

[css]
#daha düşük {
arka plan: #ecf2f5;
genişlik: %100;
yükseklik: 69 piksel;
üst kenar boşluğu: 20 piksel;
}
giriş[tür=onay kutusu] {
sol kenar boşluğu: 20 piksel;
üst kenar boşluğu: 30 piksel;
}
.Kontrol {
sol kenar boşluğu: 3 piksel;
}
girdi[tür=gönder] {
Sağa çık;
sağ kenar boşluğu: 20 piksel;
üst kenar boşluğu: 20 piksel;
genişlik: 80 piksel;
yükseklik: 30 piksel;
}
[/css]

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. Bunun için aşağıdaki kodu konteyner alanına girin.

[css]
arka plan: #fff;
sınır yarıçapı: 3 piksel;
kenarlık: 1px düz #ccc;
kutu gölgesi: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
[/css]

Yukarıdaki kodun kapsayıcı alanına eklenmesi, kapsayıcı kodunun aşağıdaki gibi görünmesini sağlayacaktır:

[css]
#konteyner {
pozisyon: sabit;
genişlik: 340 piksel;
yükseklik: 280 piksel;
üst: %50;
sol: %50;
üst kenar boşluğu: -140 piksel;
sol kenar boşluğu: -170 piksel;
arka plan: #fff;
sınır yarıçapı: 3 piksel;
kenarlık: 1px düz #ccc;
kutu gölgesi: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
[/css]

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.

[css]
kenarlık: 1 piksel katı #c7d0d2;
sınır yarıçapı: 2 piksel;
kutu gölgesi: iç metin 0 1.5 piksel 3 piksel rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}
[/css]

Ş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.

[css]
giriş[tür=şifre] {
renk: # 777 ;
sol dolgu: 10 piksel;
kenar boşluğu: 10 piksel;
üst kenar boşluğu: 12 piksel;
sol kenar boşluğu: 18 piksel;
genişlik: 290 piksel;
yükseklik: 35 piksel;
kenarlık: 1 piksel katı #c7d0d2;
sınır yarıçapı: 2 piksel;
kutu gölgesi: iç metin 0 1.5 piksel 3 piksel rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}
[/css]

Ş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.

[css]
yazı tipi boyutu: 14 piksel;
yazı tipi ağırlığı: kalın;
renk: #fff;
arka plan rengi: #acd6ef; /*IE geri dönüşü*/
arka plan resmi: -webkit-gradient(doğrusal,
sol üst, sol alt, (#acd6ef), ile(# 6ec2 arası
e8));
arka plan resmi: -moz-doğrusal-gradyan(
sol üst 90deg, #acd6ef %0, # 6ec2e8 %100);
arka plan görüntüsü: doğrusal gradyan (sol üst
90 derece, #acd6ef %0, # 6 ec2e8 %100);
sınır yarıçapı: 30 piksel;
kenarlık: 1 piksel katı # 66add6;
kutu gölgesi: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
ek 0 1px 0 rgba( 255 , 255 , 255 , .5 );
imleç: işaretçi;
}
[/css]

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.

[css]
girdi[tür=gönder] {
Sağa çık;
sağ kenar boşluğu: 20 piksel;
üst kenar boşluğu: 20 piksel;
genişlik: 80 piksel;
yükseklik: 30 piksel;
yazı tipi boyutu: 14 piksel;
yazı tipi ağırlığı: kalın;
renk: #fff;
arka plan rengi: #acd6ef; /*IE geri dönüşü*/
arka plan resmi: -webkit-gradient(doğrusal,
sol üst, sol alt, (#acd6ef), ile(# 6ec2 arası
e8));
arka plan resmi: -moz-doğrusal-gradyan(
sol üst 90deg, #acd6ef %0, # 6ec2e8 %100);
arka plan görüntüsü: doğrusal gradyan (sol üst
90 derece, #acd6ef %0, # 6 ec2e8 %100);
sınır yarıçapı: 30 piksel;
kenarlık: 1 piksel katı # 66add6;
kutu gölgesi: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
ek 0 1px 0 rgba( 255 , 255 , 255 , .5 );
imleç: işaretçi;
}
[/css]

Giriş formu şimdi iyi görünüyor. Formu bu kadar basit bırakmanız tavsiye edilir. Başka öğeler eklemek ve sayfayı karıştırmak 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ından örnekler 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 reddetmek için oturum açma kimlik bilgilerini doğrulamak için harici bir PHP komut dosyası kullanır. jQuery ile, oturum açma 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ı bulmayı kolay 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 gerek yok, hatta başka bir web sitesi oluşturmuş olmanı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ı oturum açma” 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 gezebilirsiniz. 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 için 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ş yapmasına izin veriyorsunuz. 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.