Как создать красивую персонализированную страницу входа для вашего сайта
Страница входа, как и целевая страница веб-сайта, очень важна для владельцев бизнеса, которые хотят конвертировать трафик. Как и целевая страница, страница входа должна быть сложной, чтобы посетители могли просто предоставить свои данные без особых хлопот.
Большинство лучших страниц входа просты, они выполнены в минималистском стиле, без рекламы и маркетинговых уловок; просто логин в форме с фоновым изображением или двумя.
Есть несколько различных способов создания страниц входа, которые привлекают посетителей и побуждают их возвращаться.
- Если вы хорошо разбираетесь в программировании (простой HTML и CSS ), вы сможете создать простую, но привлекательную страницу входа с несколькими базовыми кодами.
- Новичкам проще настроить страницу входа, которая поставляется с шаблоном конструктора веб-сайтов. Большинство разработчиков и шаблонов веб-сайтов (WordPress, Weebly, Shopify, Joomla и другие) поставляются с готовыми шаблонами, и все, что вам нужно сделать, это отредактировать их в соответствии с вашими потребностями.
- Вы также можете использовать простые плагины и темы для создания страницы входа. Плагины хороши тем, что позволяют настроить страницу входа одним нажатием кнопки. Их могут использовать как новички, так и опытные веб-дизайнеры.
Метод, который вы выберете для настройки страницы входа на веб-сайт, будет определяться вашим уровнем навыков. В то время как кодирование может быть хорошим методом для одного человека, другой может не знать, где какой код разместить. Плагины хорошие, но некоторые платные.
Читайте дальше, чтобы узнать, как создать и настроить красивую страницу входа.
Используйте простой HTML/CSS
Создание и настройка формы входа в HTML и CSS выполняется в три простых шага: работа с HTML-разметкой, размещение различных элементов формы входа и, наконец, стиль различных элементов, чтобы они выглядели привлекательно.
HTML-разметка
Здесь вы добавите простые теги HTML для создания фактической формы. Часть HTML состоит из контейнера, самой формы и пары других входных данных. Правильно введя код, вы сможете создать простую форму входа с частью имени пользователя, частью пароля, флажком и кнопкой входа. Однако компоненты расположены не лучшим образом.
Расположение элементов
Затем вы можете стилизовать различные части формы, добавив простой код, подобный приведенному ниже. Это поместит различные компоненты в разные положения.
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. Здесь вы можете добавить любой элемент, который вы хотите. Нажмите User Registration Addon, и все готово.
Нажмите «Создать новую страницу», а затем выберите форму «Вход пользователя». Появится шаблон со всеми предварительно созданными полями, и все, что вам нужно сделать, это нажать на поле, чтобы отредактировать его. После редактирования каждого поля нажмите на кнопку на вкладке настроек и решить, что должно произойти после того, как посетитель войдет в систему; вы можете направить их на определенный URL-адрес.
После того, как вы создали форму, создайте новую страницу для формы входа. Появится редактор и в верхней части нажмите «Добавить форму». Появится всплывающее окно, и вы можете выбрать только что созданную форму. Вы можете продолжить редактирование страницы, чтобы лучше соответствовать вашим потребностям, или вы можете сохранить и опубликовать. Вы можете добавить пользовательский логин, который вы только что создали, в качестве виджета на боковой панели вашего веб-сайта.
При работе с шаблонами входа, предоставляемыми конструктором веб-сайтов, процесс более или менее такой же; установите шаблон, отредактируйте его по своему вкусу, создайте новую страницу и вставьте созданную форму. Это рекомендуется для тех, кто новичок в веб-дизайне.
Сторонние темы и плагины
Темы
Ваш конструктор веб-сайтов мог предоставить шаблон или тему входа бесплатно или с премией, но они могут не соответствовать вашим потребностям. К счастью, существует множество сторонних тем и плагинов, специально предназначенных для WordPress. Темы похожи на шаблоны для всего веб-сайта, которые имеют разные стили, и с большинством из них вы сможете получить стильную и привлекательную страницу входа; влияет не только на страницу входа, но и на другие аспекты вашего сайта.
Вам нужно будет выбрать тему со страницей входа, которая вам нравится. Хорошо то, что с большинством тем вы можете ознакомиться с функциями перед установкой. Темы стоят от 2 до 100 долларов. Темы, как и шаблоны веб-конструкторов, легко редактировать. Вы можете изменить цвета дизайна, шрифты и размеры по своему вкусу и вкусу.
Темы могут быть от вашего конструктора веб-сайтов, премиум-темы или могут быть от сторонних разработчиков, таких как Themeforest.
Плагины
Плагины просты; в отличие от тем, которые затрагивают почти все аспекты вашего веб-сайта, существуют плагины для различных аспектов вашего веб-сайта. Следовательно, вы можете установить плагин только для создания формы входа или регистрации. Плагины доступны бесплатно, а некоторые платные; выберите один исходя из вашего бюджета и ваших потребностей.
У всех разработчиков веб-сайтов есть плагины на ваш выбор; независимо от того, используете ли вы Weebly, Joomla или WordPress, существует множество тем. Чтобы создать страницу входа с помощью плагина, перейдите на панель управления и просмотрите список доступных плагинов для вашего конструктора сайтов. Установите нужный плагин, и вы попадете на страницу оформления заказа, где вы оплатите плагин.
После установки плагина вам будет предложено отредактировать различные элементы; нажмите на каждый элемент для редактирования, а затем нажмите сохранить изменения. Создайте новую страницу и добавьте форму, которую вы создали с помощью плагина.
Вывод
Страница входа должна быть простой настолько, насколько она должна быть привлекательной. В недавнем прошлом были замечены различные дизайны страниц входа. Выбирайте только тот метод создания страницы входа, который вам удобен; не выбирайте код, если вы плохо разбираетесь в кодах. Вы можете получить помощь в дизайне от профессионала, но еще лучше, вы можете получить помощь в разработке вашей страницы входа.
Люди также использовали социальные логины. Здесь вы позволяете посетителям войти в систему, используя данные своей учетной записи в социальных сетях, таких как Facebook или Twitter. Это тоже хороший вариант, поскольку он достаточно прост, а также повышает присутствие и эффективность вашего бизнеса в социальных сетях. Вы можете проверить страницы входа на популярные веб-сайты, чтобы получить представление о том, как оформить страницу входа на веб-сайт; не загромождая его и не упуская деталей.