Jak stworzyć piękną, dostosowaną stronę logowania do swojej witryny

Strona 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ększych problemów.

Większość najlepszych stron logowania jest prosta, mają minimalistyczny styl bez reklam i chwytów marketingowych; tylko formularz logowania 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 dołączoną do szablonu narzędzia do tworzenia witryn. Większość kreatorów i szablonów stron internetowych (WordPress, Weebly, Shopify, Joomla i inne) zawiera gotowe szablony, które wystarczy edytować, aby spełniały Twoje potrzeby.
• Możesz także użyć prostych wtyczek i motywów, aby utworzyć stronę logowania. Wtyczki są dobre, ponieważ pozwalają dostosować stronę logowania za pomocą kliknięcia przycisku. Mogą z nich korzystać zarówno nowicjusze, jak i doświadczeni projektanci stron internetowych.

Metoda, którą wybierzesz, aby dostosować stronę logowania do witryny, będzie zależała 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ć jaki 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: poradź sobie ze znacznikami HTML, rozmieść różne elementy formularza logowania i na koniec nadaj styl różnym elementom, aby wyglądały atrakcyjnie.

znaczniki HTML

Tutaj dodasz proste znaczniki HTML, aby utworzyć właściwy formularz. Część HTML składa się z kontenera, samego formularza i kilku innych danych wejściowych. Wpisując poprawnie kod, będziesz mógł stworzyć prosty formularz logowania z częścią nazwy użytkownika, częścią hasła, checkboxem i przyciskiem logowania. Elementy nie są jednak dobrze ułożone.

Pozycjonowanie elementów

Następnie możesz stylizować różne części 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 strony logowania zgodnie ze swoimi specyfikacjami. Najpierw musisz określić podstawowe elementy, takie jak kolor czcionki, a następnie umieścić formularz na środku strony, aby zachować równowagę. Tutaj możesz dodać dowolny kolor czcionki, niezależnie od tego, co uważasz za piękne. Zawsze jednak wskazane jest, aby forma pozostała prosta, aby nie wprowadzać w błąd 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 formularz może nadal wyglądać niepewnie i możesz go ulepszyć, dodając trochę stylu strukturalnego. Aby to zrobić, zacznij od upewnienia się, że elementy Twojego formularza logowania nie są zgniecione i czytelne. Możesz dodać następujący kod, aby zapewnić porządek w 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 z dobrze rozmieszczonymi różnymi elementami. Musisz jednak nadać styl różnym obszarom wejściowym formularza logowania, aby wyglądały jeszcze lepiej. Tutaj określisz kolor, rozmiar czcionki, dodasz trochę wypełnienia, marginesy, szerokość różnych elementów i inne podstawowe informacje, takie jak kolor, który pojawia się po najechaniu myszką lub kliknięciu elementu. Dodaj poniższy kod.

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 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 wyrafinowanie. Formularz logowania jest gotowy, ale nadal możesz go upiększyć, dodając kody stylów CSS. Proces można rozpocząć od zaokrąglenia rogów pojemnika, a następnie nałożenia na niego cienia, aby poprawić jego wygląd i wydobyć wrażenie głębi. Aby to zrobić, wprowadź poniższy kod 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 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 nadaniu stylu kontenerowi możesz teraz stylizować różne obszary wejściowe za pomocą podobnego kodu. Dodaj poniższy kod, a obszary wprowadzania 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ł fantastycznie, ale wciąż możesz wprowadzić więcej stylów, 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 swojego 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 Twojej sekcji przesyłania będzie wyglądał jak ten poniżej, a zmienisz kolor przycisku logowania i inne aspekty, a będziesz mieć 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ć kolejne elementy i zaśmiecać stronę, możesz dodać logo swojej firmy i pojedynczy obraz. Odwiedzający są zwykle 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 wciąż piękna i kuszą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.

Pola logowania jQuery

Skrzynki logowania jQuery były używane w wielu witrynach internetowych i zawsze wyglądają na innowacyjne i znalazły drogę do projektów formularzy logowania do witryn New Age. 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 swojej 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 danych logowania w celu przyznania lub odmowy dostępu. Dzięki jQuery łatwo jest dodać link rejestracyjny tuż pod polem logowania. To sprawia, że ​​proces jest płynniejszy i zapewnia użytkownikowi płynne działanie. 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 używania HTML i CSS do tworzenia i stylizowania strony logowania, pole logowania tutaj musi 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 wygląda pięknie. 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 Kreatora witryn

Najlepszym przyjaznym dla początkujących sposobem na stworzenie atrakcyjnego formularza logowania jest skorzystanie z szablonów formularzy logowania kreatora stron internetowych. Tutaj nie musisz znać się na kodowaniu, a nawet nie musisz mieć żadnej innej strony internetowej; formularze logowania są tworzone za pomocą kliknięcia przycisku. 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 i wystarczy kliknąć pole, aby je edytować. Po edycji każdego pola kliknij przycisk zakładkę ustawień i zdecydować, co ma się stać po zalogowaniu się odwiedzającego; możesz skierować go na określony adres URL.

Po utworzeniu formularza utwórz nową stronę dla formularza logowania. Pojawi się edytor i u góry kliknij „dodaj formularz”. Pojawi się wyskakujące okienko i możesz wybrać właśnie utworzony formularz. Możesz kontynuować edycję strony, aby lepiej odpowiadała Twoim potrzebom, lub możesz ją 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 internetowych 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ł udostępnić szablon logowania lub motyw, za darmo lub w wersji premium, ale może on nie spełniać Twoich potrzeb. Na szczęście istnieje wiele motywów i wtyczek stron trzecich, szczególnie dla WordPress. Motywy są jak szablony dla całej witryny, które wprowadzają różne style, a dzięki 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 z ulubioną stroną logowania. Dobrą rzeczą jest to, że w przypadku większości motywów możesz zapoznać się z funkcjami przed instalacją. Motywy kosztują od 2 USD do ponad 100 USD. Motywy, podobnie jak szablony kreatorów stron internetowych, można łatwo edytować. Możesz zmienić kolory, czcionki i rozmiary projektu według własnych upodobań i upodobań.

Motywy mogą pochodzić z narzędzia do tworzenia witryn, motywów premium lub mogą pochodzić od zewnętrznych programistów, 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 na podstawie budżetu i potrzeb.

Wszyscy twórcy stron internetowych będą mieli wtyczki do wyboru; niezależnie od tego, czy używasz Weebly, Joomla czy WordPress, istnieje wiele motywów. Aby utworzyć stronę logowania za pomocą wtyczki, przejdź do pulpitu nawigacyjnego, aby wyświetlić listę dostępnych wtyczek dla narzędzia do tworzenia 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ć tak samo prosta, jak i atrakcyjna. W niedawnej przeszłości obserwowano różne projekty stron logowania. Wybierz tylko metodę tworzenia strony logowania, z którą czujesz się komfortowo; nie wybieraj kodowania, jeśli nie jesteś dobrze zorientowany w kodach. Możesz uzyskać pomoc projektową od profesjonalisty, ale jeszcze lepiej możesz uzyskać pomoc w zaprojektowaniu strony logowania.

Ludzie używali również loginów społecznościowych. Tutaj pozwalasz odwiedzającym logować 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 styl strony logowania do witryny; bez zaśmiecania go i bez pomijania szczegółów.