Як створити красиву персоналізовану сторінку входу для свого веб-сайту
Сторінка входу, як і цільова сторінка веб-сайту, дуже важлива для власників бізнесу, які хочуть конвертувати трафік. Як і цільова сторінка, сторінка входу має бути складною, щоб відвідувачі могли просто вказати свої дані без особливих зусиль.
Більшість найкращих сторінок входу є простими, вони мають мінімалістичний стиль без реклами та маркетингових трюків; лише форма входу з фоновим зображенням або двома.
Є кілька різних способів створення сторінок входу, які залучають відвідувачів і заохочують їх повернутися.
- Якщо ви добре вмієте кодувати (прості HTML і CSS ), ви зможете створити просту, але привабливу сторінку входу з кількома основними кодами.
- Для новачків простіше налаштувати сторінку входу, яка постачається разом із шаблоном конструктора веб-сайтів. Більшість конструкторів веб-сайтів і шаблонів (WordPress, Weebly, Shopify, Joomla та інші) постачаються з готовими шаблонами, і все, що вам потрібно зробити, це відредагувати їх відповідно до ваших потреб.
- Ви також можете використовувати прості плагіни та теми для створення сторінки входу. Плагіни хороші тим, що вони дозволяють налаштувати сторінку входу одним натисканням кнопки. Ними можуть користуватися як новачки, так і досвідчені веб-дизайнери.
Спосіб, який ви виберете для налаштування сторінки входу на веб-сайт, визначатиметься вашим рівнем навичок. Хоча кодування може бути хорошим методом для однієї людини, інша може не знати, де який код розмістити. Плагіни хороші, але деякі є преміум-класу.
Читайте далі, щоб дізнатися, як створити та налаштувати красиву сторінку входу.
Використовуйте простий HTML/CSS
Створення та налаштування форми входу в HTML і CSS виконується в три прості кроки: робота з розміткою HTML, розміщення різних елементів форми входу і, нарешті, стиль різних елементів, щоб вони виглядали привабливо.
HTML-розмітка
Тут ви додасте прості теги HTML, щоб створити фактичну форму. Частина HTML складається з контейнера, самої форми та кількох інших вхідних даних. Правильно ввівши код, ви зможете створити просту форму входу з частиною імені користувача, частиною пароля, прапорцем і кнопкою входу. Компоненти, однак, розташовані неправильно.
<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>Розташування елементів
Потім ви можете стилізувати різні частини форми, додавши простий код, як наведений нижче. Це розмістить різні компоненти в різних положеннях.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Після цього ви можете розмістити різні елементи вашої сторінки входу відповідно до ваших специфікацій. По-перше, вам потрібно буде вказати основні елементи, такі як колір шрифту, а потім розташувати форму в центрі сторінки для балансу. Тут ви можете додати будь-який колір шрифту, який вам подобається, будь-який, який ви вважаєте красивим. Однак завжди бажано переконатися, що форма залишається простою, щоб не заплутати відвідувачів.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}На цьому етапі форма все ще може виглядати хитко, і ви можете покращити її, додавши трохи структурного стилю. Для цього почніть із того, що елементи вашої форми входу не здавлені разом і їх легко читати. Ви можете додати наступний код, щоб забезпечити акуратність вашої форми.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Ваша форма входу тепер виглядатиме простою та майже завершеною з різними елементами, добре розташованими. Однак вам потрібно стилізувати різні області введення вашої форми входу, щоб вони виглядали ще краще. Тут ви вказуєте колір, розмір шрифту, додаєте відступи, поля, ширину різних елементів та інші основи, такі як колір, який з’являється, коли ви наводите курсор миші або клацаєте елемент. Додайте код нижче.
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;
}Оскільки ви хочете, щоб ваша сторінка входу виглядала ще красивіше, ви можете додати трохи більше налаштувань, щоб кнопка входу та прапорець виглядали трохи стильно. Додайте наступний код.
#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;
}Стилізуйте елементи форми
На цьому етапі елементи добре розташовані та виглядають досить вишукано. Форма входу готова, але ви все ще можете зробити її трохи красивішою, додавши коди стилю CSS. Ви можете розпочати процес, зробивши контейнер округлими кутами, а потім надавши йому тіні, щоб покращити його вигляд і створити відчуття глибини. Для цього введіть цей код нижче в область контейнера.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Додавши наведений вище код до області контейнера, код контейнера виглядатиме так, як показано нижче:
#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 );Після того як ви налаштували стиль контейнера, тепер ви можете стилізувати різні області введення за допомогою подібного коду. Додайте наведений нижче код, і ваші області введення виглядатимуть набагато краще, ніж на початку.
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;
}Тепер весь код введення пароля буде виглядати так, як показано нижче. Форма для входу виглядатиме приголомшливо, але ви можете зробити ще більше стилів, щоб покращити зовнішній вигляд вашої форми.
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;
}Тепер вам потрібно зробити так, щоб кнопка входу виглядала краще та виразніше. Для цього введіть наведений нижче код у розділі надсилання вашого коду.
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;
}Весь код вашого розділу надсилання виглядатиме так, як наведено нижче, і ви змінили колір кнопки входу та інші аспекти, і у вас буде проста форма входу, як наведена нижче.
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;
}Форма входу виглядає добре. Бажано залишити таку просту форму. Замість того, щоб додавати інші елементи та захаращувати сторінку, ви можете додати логотип вашої компанії та одне зображення. Відвідувачі зазвичай відволікаються на велику кількість деталей. Отже, ви захочете мати сторінку входу на веб-сайт, яка є максимально простою, але все ще красивою та привабливою, щоб відвідувачі поверталися знову. Ви можете взяти приклади форм для входу з деяких популярних веб-сайтів, таких як Snoggle News, Dropbox, Freshbooks, MailChimp і Theidealist тощо. Такі веб-сайти, як Google і Facebook, також використовують мінімалістичний стиль, і їхні сторінки входу виглядають чудово лише з формою входу, логотипом компанії та кількома іншими деталями.
Ящики входу jQuery
Скриньки входу jQuery використовувалися на багатьох веб-сайтах, і вони завжди виглядають інноваційними та знайшли свій шлях до дизайну форм входу на веб-сайти нового віку. Вони виглядають просто, але стильно. На відміну від минулого, сьогодні вхід відбувається на простій сторінці, і вам не потрібно турбуватися про будь-які невдачі jQuery.
За допомогою jQuery ви можете створити кнопку входу на домашній сторінці свого веб-сайту, яка спрямовуватиме ваших відвідувачів на сторінку входу на основі jQuery. Форма містить виклик Ajax і використовує зовнішній сценарій PHP для перевірки облікових даних для входу, щоб надати або заборонити доступ. За допомогою jQuery легко додати реєстраційне посилання під вікном входу. Це робить процес більш плавним і дозволяє користувачеві працювати без проблем. Вашим відвідувачам буде легко знайти сторінку реєстрації/реєстрації на вашому веб-сайті. Ви також можете використовувати те саме вікно входу для доступу до свого облікового запису.
Подібно до того, як ви використовуєте HTML і CSS для створення та оформлення сторінки входу, вам потрібно, щоб вікно входу говорило трохи про ваш бізнес таким чином, щоб не захаращувати сторінку. Форма входу, яку ви створюєте за допомогою jQuery, проста і виглядає красиво. Однак вам потрібно буде додати зображення або просто логотип вашої компанії, щоб зробити його більш привабливим. Сторінки входу мають бути зручними для користувачів.
Конструктор веб-сайтів, шаблони форм входу
Найкращий зручний для початківців спосіб створити привабливу форму входу — це шаблони форм входу розробника веб-сайтів. Тут вам не потрібно знати програмування, і вам навіть не потрібно коли-небудь створювати будь-який інший веб-сайт; форми входу створюються одним натисканням кнопки. Конструктори веб-сайтів, такі як Weebly і WordPress, пропонують безкоштовні та преміум-форми.
Щоб створити сторінку входу, встановіть плагіни форми, а потім відвідайте сторінку налаштувань шаблону/плагіна, щоб налаштувати його на свій смак. У WordPress вам потрібно буде встановити WPForms, а потім ввести код покупки для підтвердження. Відвідайте сторінку налаштувань і натисніть Addons. Тут ви можете додати будь-який елемент, який хочете. Натисніть Аддон реєстрації користувача, і все готово.
Натисніть «Створити нову сторінку», а потім виберіть форму «вхід користувача». З’явиться шаблон із усіма попередньо створеними полями, і все, що вам потрібно зробити, це клацнути поле, щоб відредагувати його. Після редагування кожного поля клацніть на вкладку налаштувань і вирішуйте, що має відбуватися після входу відвідувача; ви можете спрямувати його за певною URL-адресою.
Після створення форми створіть нову сторінку для форми входу. З’явиться редактор, у верхній частині якого натисніть «додати форму». З’явиться спливаюче вікно, і ви зможете вибрати форму, яку ви щойно створили. Ви можете продовжувати редагувати сторінку, щоб краще відповідати своїм потребам, або можете зберегти та опублікувати. Ви можете додати власний логін, який ви щойно створили, як віджет на бічній панелі свого веб-сайту.
При роботі з шаблонами входу, наданими конструктором веб-сайтів, процес більш-менш такий самий; встановіть шаблон, відредагуйте його на свій смак, створіть нову сторінку та вставте створену форму. Це рекомендовано тим, хто новачок у дизайні веб-сайтів.
Сторонні теми та плагіни
Теми
Можливо, ваш розробник веб-сайтів надав шаблон або тему для входу безкоштовно чи платно, але він може не відповідати вашим потребам. На щастя, існує багато сторонніх тем і плагінів спеціально для WordPress. Теми схожі на шаблони для всього веб-сайту, які містять різні стилі, і з більшістю з них ви зможете отримати стильну та привабливу сторінку входу; Тема впливає не лише на сторінку входу, а й на інші аспекти вашого веб-сайту.
Вам потрібно буде вибрати тему зі сторінкою входу, яка вам подобається. Хороша річ у тому, що з більшістю тем ви можете ознайомитися з функціями перед встановленням. Теми коштують від 2 доларів до понад 100 доларів. Теми, як і шаблони веб-конструктора, легко редагувати. Ви можете змінити кольори дизайну, шрифти та розміри на свій смак і смак.
Теми можуть бути від вашого конструктора веб-сайтів, преміум-тем або сторонніх розробників, таких як Themeforest.
Плагіни
Плагіни прості; на відміну від тем, які впливають майже на всі аспекти вашого веб-сайту, існують плагіни для різних аспектів вашого веб-сайту. Отже, ви можете встановити плагін, щоб створити форму входу або реєстраційну форму. Плагіни доступні безкоштовно, а деякі є преміальними; виберіть один на основі вашого бюджету та ваших потреб.
Усі конструктори веб-сайтів матимуть плагіни на вибір; Незалежно від того, використовуєте ви Weebly, Joomla або WordPress, існує багато тем. Щоб створити сторінку входу за допомогою плагіна, відвідайте інформаційну панель, щоб переглянути список доступних плагінів для вашого конструктора веб-сайтів. Установіть потрібний плагін, і ви перейдете на сторінку оформлення замовлення, де ви сплачуєте за плагін.
Після встановлення плагіна вам буде запропоновано відредагувати різні елементи; клацніть кожен елемент для редагування, а потім натисніть зберегти зміни. Створіть нову сторінку та додайте форму, створену за допомогою плагіна.
Висновок
Сторінка входу має бути простою настільки ж, наскільки вона має бути привабливою. Нещодавно ми спостерігали різні дизайни сторінок входу. Вибирайте лише той спосіб створення сторінки входу, який вам зручний; не вибирайте кодування, якщо ви погано розбираєтеся в кодах. Ви можете отримати допомогу в розробці від професіонала, але ще краще, ви можете отримати допомогу в розробці вашої сторінки входу.
Люди також використовували соціальні логіни. Тут ви дозволяєте відвідувачам входити за допомогою даних своїх облікових записів у соціальних мережах, таких як Facebook або Twitter. Це також хороший варіант, оскільки він досить простий, а також підвищує присутність вашого бізнесу в соціальних мережах і ефективність. Ви можете перевірити сторінки входу на популярних веб-сайтах, щоб дізнатися, як оформити сторінку входу на свій сайт; не захаращуючи його та не пропускаючи деталей.