Jak stworzyć piękną, niestandardową stronę logowania do swojej witryny?
Opublikowany: 2017-08-10Strona logowania, podobnie jak strona docelowa witryny, jest bardzo ważna dla właścicieli firm, którzy chcą konwertować ruch. Podobnie jak strona docelowa, strona logowania musi być wyrafinowana, aby odwiedzający mogli po prostu podać swoje dane bez większego wysiłku.
Większość najlepszych stron logowania jest prosta, zastosowano minimalistyczny styl bez reklam i sztuczek marketingowych; wystarczy zalogować się w formularzu z obrazem tła lub dwoma.
Istnieje kilka różnych sposobów tworzenia stron logowania, które przyciągają odwiedzających i zachęcają ich do powrotu.
- Jeśli jesteś dobry w kodowaniu (prosty HTML i CSS), powinieneś być w stanie stworzyć prostą, ale atrakcyjną stronę logowania z kilkoma podstawowymi kodami.
- Nowicjuszom łatwiej jest dostosować stronę logowania, która jest dostarczana z szablonem kreatora witryn. Większość kreatorów i szablonów stron internetowych ( WordPress , Weebly , Shopify , Joomla i inne) zawiera gotowe szablony, a wszystko, co musisz zrobić, to edytować je zgodnie z własnymi potrzebami.
- Możesz także użyć prostych wtyczek i motywów, aby utworzyć stronę logowania. Wtyczki są dobre, ponieważ pozwalają dostosować stronę logowania jednym kliknięciem. Mogą z nich korzystać zarówno nowicjusze, jak i doświadczeni projektanci stron internetowych.
Wybrana przez Ciebie metoda dostosowania strony logowania do witryny będzie zależna od Twojego poziomu umiejętności. Podczas gdy kodowanie może być dobrą metodą dla jednej osoby, inna może nie wiedzieć, gdzie umieścić dany kod. Wtyczki są dobre, ale niektóre są premium.
Czytaj dalej, aby dowiedzieć się, jak stworzyć i dostosować piękną stronę logowania.
Użyj prostego HTML/CSS
Tworzenie i dostosowywanie formularza logowania w HTML i CSS odbywa się w trzech prostych krokach: radzić sobie ze znacznikami HTML, rozmieszczać różne elementy formularza logowania i na koniec, stylizować różne elementy, aby wyglądały atrakcyjnie.
Znacznik HTML
Tutaj dodasz proste znaczniki HTML, aby utworzyć rzeczywisty formularz. Część HTML składa się z kontenera, samego formularza i kilku innych danych wejściowych. Po prawidłowym wpisaniu kodu będziesz mógł stworzyć prosty formularz logowania z częścią nazwy użytkownika, częścią hasła, polem wyboru i przyciskiem logowania. Komponenty jednak nie są dobrze ułożone.
<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>
Pozycjonowanie elementów
Następnie możesz nadać styl różnym częściom formularza, dodając prosty kod, taki jak ten poniżej. Spowoduje to umieszczenie różnych komponentów w różnych pozycjach.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}
Następnie możesz ustawić różne elementy swojej strony logowania zgodnie ze specyfikacją. Po pierwsze, musisz określić podstawowe elementy, takie jak kolor czcionki, a następnie ustawić formularz na środku strony, aby uzyskać równowagę. Tutaj możesz dodać dowolny kolor czcionki, który uważasz za piękny. Jednak zawsze warto zadbać o to, aby formularz pozostał prosty, aby nie dezorientować odwiedzających.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}
W tym momencie forma może nadal wyglądać niepewnie i możesz ją ulepszyć, dodając odrobinę stylu strukturalnego. Aby to zrobić, zacznij od upewnienia się, że elementy formularza logowania nie są ze sobą ściśnięte i są czytelne. Możesz dodać następujący kod, aby zapewnić porządek w swoim formularzu.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}
Twój formularz logowania będzie teraz wyglądał na prosty i prawie kompletny, a różne elementy będą dobrze rozmieszczone. Musisz jednak nadać styl różnym obszarom wejściowym formularza logowania, aby wyglądały jeszcze lepiej. Tutaj będziesz określał kolor, rozmiar czcionki, dodawanie dopełnienia, marginesów, szerokość różnych elementów i inne podstawowe informacje, takie jak kolor, który pojawia się po najechaniu myszą lub kliknięciu elementu. Dodaj kod poniżej.
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;
}
Ponieważ chcesz, aby Twoja strona logowania wyglądała jeszcze piękniej, możesz dodać trochę więcej dostosowań, aby przycisk logowania i pole wyboru wyglądały trochę stylowo. Dodaj następujący kod.
#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;
}
Stylizuj elementy formularza
W tym momencie elementy są dobrze ustawione i wyglądają wystarczająco wyrafinowane. Formularz logowania jest gotowy, ale nadal możesz go upiększyć, dodając kody stylów CSS. Możesz rozpocząć proces od zaokrąglenia rogów pojemnika, a następnie nadanie mu cienia, aby poprawić jego wygląd i wydobyć wrażenie głębi. Aby to zrobić, wprowadź ten kod poniżej do obszaru kontenera.
background: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
Dodanie powyższego kodu do obszaru kontenera sprawi, że kod kontenera będzie wyglądał jak ten poniżej:
#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 );
Po określeniu stylu kontenera możesz teraz stylizować różne obszary wejściowe za pomocą podobnego kodu. Dodaj poniższy kod, a Twoje pola wejściowe będą wyglądać o wiele ładniej niż na początku.
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; }
Teraz cały kod wprowadzania hasła będzie wyglądał jak ten poniżej. Formularz logowania będzie wyglądał niesamowicie, ale wciąż możesz zrobić więcej stylizacji, aby jeszcze bardziej ulepszyć wygląd swojego formularza.
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;
}
Teraz musisz sprawić, by przycisk logowania wyglądał lepiej i wyraźniej. Aby to zrobić, wprowadź poniższy kod w sekcji przesyłania kodu.
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; }
Cały kod sekcji przesyłania będzie wyglądał jak ten poniżej, a zmienisz kolor przycisku logowania i inne aspekty, a otrzymasz prosty formularz logowania, taki jak ten poniżej.
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;
}
Formularz logowania wygląda teraz dobrze. Wskazane jest pozostawienie prostego formularza. Zamiast dodawać inne elementy i zaśmiecać stronę, możesz dodać logo swojej firmy i pojedynczy obraz. Odwiedzający bywają rozpraszani przez tak wiele szczegółów. Ergo, będziesz chciał mieć stronę logowania do witryny, która jest tak prosta, jak to tylko możliwe, ale nadal jest piękna i zachęcająca, aby odwiedzający wracali ponownie. Możesz wziąć przykłady formularzy logowania z niektórych popularnych stron internetowych, takich jak między innymi Snoggle News , Dropbox , Freshbooks , MailChimp i Theidealist . Witryny takie jak Google i Facebook również zastosowały minimalistyczny styl, a ich strony logowania wyglądają świetnie z samym formularzem logowania, logo firmy i kilkoma innymi szczegółami.
Skrzynki logowania jQuery
Skrzynki logowania jQuery były używane w wielu witrynach internetowych, zawsze wyglądają innowacyjnie i znalazły drogę do projektów formularzy logowania do witryn nowej generacji. Wyglądają prosto, ale stylowo. W przeciwieństwie do przeszłości, obecnie logowanie odbywa się na prostej stronie i nie musisz się martwić o żadne niepowodzenia jQuery.
Dzięki jQuery możesz utworzyć przycisk logowania na stronie głównej Twojej witryny, który przekieruje odwiedzających do strony logowania opartej na jQuery. Formularz zawiera wywołanie Ajax i używa zewnętrznego skryptu PHP do weryfikacji poświadczeń logowania w celu przyznania lub odmowy dostępu. Dzięki jQuery łatwo jest dodać link rejestracyjny tuż pod polem logowania. Dzięki temu proces jest płynniejszy i zapewnia użytkownikowi płynne wrażenia. Twoi goście z łatwością odnajdą stronę rejestracji/rejestracji w Twojej witrynie. Możesz również użyć tego samego pola logowania, aby uzyskać dostęp do swojego konta.
Podobnie jak w przypadku korzystania z HTML i CSS do tworzenia i stylizowania strony logowania, pole logowania tutaj mówi trochę o Twojej firmie w sposób, który nie zaśmieca strony. Formularz logowania, który tworzysz za pomocą jQuery, jest prosty i pięknie wygląda. Musisz jednak dodać obraz lub tylko logo swojej firmy, aby było bardziej atrakcyjne. Strony logowania powinny być przyjazne dla użytkownika.
Szablony formularzy logowania do kreatora stron internetowych
Najlepszym przyjaznym dla początkujących sposobem tworzenia atrakcyjnego formularza logowania jest użycie szablonów formularzy logowania kreatora stron internetowych. Tutaj nie musisz znać się na kodowaniu, a nawet nie musisz tworzyć żadnej innej strony internetowej; formularze logowania tworzy się jednym kliknięciem. Twórcy stron internetowych, tacy jak Weebly i WordPress , oferują formularze freemium i premium.
Aby utworzyć stronę logowania, zainstaluj wtyczki formularza, a następnie odwiedź stronę ustawień szablonu/wtyczki, aby dostosować ją do własnych upodobań. W WordPress będziesz musiał zainstalować WPForms , a następnie wprowadzić kod zakupu w celu weryfikacji. Odwiedź stronę ustawień i kliknij Dodatki. Tutaj możesz dodać dowolny element. Kliknij Dodatek do rejestracji użytkownika i gotowe.
Kliknij „Utwórz nową stronę”, a następnie wybierz formularz „logowanie użytkownika”. Pojawi się szablon ze wszystkimi wstępnie utworzonymi polami, a wszystko, co musisz zrobić, to kliknąć pole, aby je edytować. Po edycji każdego pola kliknij zakładkę ustawień i zdecyduj, co ma się stać po zalogowaniu się odwiedzającego; możesz skierować je na określony adres URL.
Po utworzeniu formularza utwórz nową stronę dla formularza logowania. Pojawi się edytor, a na górze kliknij „dodaj formularz”. Pojawi się wyskakujące okienko, w którym możesz wybrać właśnie utworzony formularz. Możesz kontynuować edycję strony, aby lepiej odpowiadała Twoim potrzebom, lub zapisać i opublikować. Możesz dodać niestandardowy login, który właśnie utworzyłeś jako widżet na pasku bocznym swojej witryny.
W przypadku szablonów logowania dostarczonych przez kreatora stron proces jest mniej więcej taki sam; zainstaluj szablon, edytuj go według własnych upodobań, utwórz nową stronę i wstaw utworzony formularz. Jest to zalecane dla tych, którzy są nowicjuszami w projektowaniu stron internetowych.
Motywy i wtyczki stron trzecich
Motywy
Twój twórca witryny mógł dostarczyć szablon lub motyw logowania za darmo lub premium, ale może nie odpowiadać Twoim potrzebom. Na szczęście istnieje wiele motywów i wtyczek innych firm, specjalnie dla WordPressa. Motywy są jak szablony dla całej witryny, które wprowadzają różne style, a przy większości z nich będziesz mógł uzyskać stylową i atrakcyjną stronę logowania; motyw wpływa nie tylko na stronę logowania, ale także na inne aspekty Twojej witryny.
Musisz wybrać motyw ze stroną logowania, którą kochasz. Dobrą rzeczą jest to, że w przypadku większości motywów przed instalacją można zapoznać się z funkcjami. Motywy kosztują od 2 USD do ponad 100 USD. Motywy, podobnie jak szablony kreatora stron internetowych, są łatwe do edycji. Możesz zmieniać kolory, czcionki i rozmiary projektów zgodnie z własnymi upodobaniami i upodobaniami.
Motywy mogą pochodzić z kreatora witryn internetowych, motywów premium lub mogą pochodzić od programistów innych firm, takich jak Themeforest .
Wtyczki
Wtyczki są proste; w przeciwieństwie do motywów, które wpływają na prawie wszystkie aspekty Twojej witryny, istnieją wtyczki dla różnych aspektów Twojej witryny. Ergo, możesz zainstalować wtyczkę, aby utworzyć formularz logowania lub formularz rejestracyjny. Wtyczki są dostępne za darmo, a niektóre są premium; wybierz jeden w oparciu o swój budżet i potrzeby.
Wszystkie kreatory witryn będą miały wtyczki do wyboru; niezależnie od tego, czy korzystasz z Weebly , Joomla czy WordPress , istnieje wiele motywów. Aby utworzyć stronę logowania za pomocą wtyczki, odwiedź swój pulpit nawigacyjny, aby wyświetlić listę dostępnych wtyczek dla Twojego kreatora witryn. Zainstaluj żądaną wtyczkę, a zostaniesz przeniesiony na stronę kasy, na której płacisz za wtyczkę.
Po zainstalowaniu wtyczki zostaniesz poproszony o edycję różnych elementów; kliknij każdy element do edycji, a następnie kliknij Zapisz zmiany. Utwórz nową stronę i dodaj formularz, który utworzyłeś za pomocą wtyczki.
Wniosek
Strona logowania musi być zarówno prosta, jak i atrakcyjna. W niedalekiej przeszłości zaobserwowano różne projekty stron logowania. Wybierz tylko taką metodę tworzenia strony logowania, która Ci odpowiada; nie wybieraj kodowania, jeśli nie jesteś dobrze zaznajomiony z kodami. Możesz uzyskać pomoc projektową od profesjonalisty, ale jeszcze lepiej, możesz uzyskać pomoc w zaprojektowaniu strony logowania.
Ludzie korzystali również z loginów społecznościowych. Tutaj umożliwiasz odwiedzającym logowanie się za pomocą danych konta w mediach społecznościowych, takich jak Facebook lub Twitter. Jest to również dobra opcja, ponieważ jest wystarczająco prosta, a także poprawia obecność i wydajność Twojej firmy w mediach społecznościowych. Możesz sprawdzić strony logowania popularnych witryn, aby uzyskać wgląd w stylizację strony logowania do witryny; bez zaśmiecania i bez pomijania szczegółów.