웹사이트를 위한 아름다운 맞춤형 로그인 페이지를 만드는 방법
게시 됨: 2017-08-10웹사이트의 방문 페이지와 마찬가지로 로그인 페이지는 트래픽을 전환하려는 비즈니스 소유자에게 매우 중요합니다. 방문 페이지와 마찬가지로 로그인 페이지도 복잡하지 않고 방문자가 세부 정보만 제공할 수 있도록 정교해야 합니다.
대부분의 최고의 로그인 페이지는 간단하며 광고와 마케팅 기믹이 없는 미니멀리스트 스타일을 사용했습니다. 배경 이미지 한두 개를 사용하여 로그인하면 됩니다.
방문자를 끌어들이고 다시 방문하도록 유도하는 로그인 페이지를 만드는 몇 가지 다른 방법이 있습니다.
- 코딩(단순한 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 를 설치한 다음 확인을 위해 구매 코드를 입력해야 합니다. 설정 페이지를 방문하여 애드온을 클릭하십시오. 여기에서 원하는 요소를 추가할 수 있습니다. 사용자 등록 애드온을 클릭하면 됩니다.
"새 페이지 만들기"를 클릭한 다음 "사용자 로그인" 양식을 선택합니다. 모든 필드가 미리 생성된 템플릿이 표시되며 필드를 클릭하기만 하면 편집할 수 있습니다. 각 필드를 편집한 후 설정 탭을 클릭하고 방문자가 로그인한 후 수행할 작업을 결정합니다. 특정 URL로 안내할 수 있습니다.
양식을 만든 후 로그인 양식에 대한 새 페이지를 만듭니다. 편집기가 나타나고 상단에서 "양식 추가"를 클릭합니다. 팝업이 나타나고 방금 생성한 양식을 선택할 수 있습니다. 필요에 맞게 페이지를 계속 편집하거나 저장하고 게시할 수 있습니다. 방금 생성한 사용자 정의 로그인을 웹사이트 사이드바에 위젯으로 추가할 수 있습니다.
웹 사이트 빌더에서 제공하는 로그인 템플릿을 처리할 때 프로세스는 거의 동일합니다. 템플릿을 설치하고 원하는 대로 편집하고 새 페이지를 만들고 생성된 양식을 삽입합니다. 이것은 웹 사이트 디자인이 처음인 사람들에게 권장됩니다.
타사 테마 및 플러그인
테마
웹 사이트 빌더가 로그인 템플릿이나 테마를 무료 또는 프리미엄으로 제공했을 수 있지만 귀하의 요구 사항을 충족하지 않을 수 있습니다. 운 좋게도 특히 WordPress를 위한 수많은 타사 테마와 플러그인이 있습니다. 테마는 다양한 스타일을 가져오는 전체 웹사이트의 템플릿과 같으며 대부분은 스타일리시하고 매력적인 로그인 페이지를 얻을 수 있습니다. 테마는 로그인 페이지뿐만 아니라 웹사이트의 다른 측면에도 영향을 미칩니다.
원하는 로그인 페이지가 있는 테마를 선택해야 합니다. 좋은 점은 대부분의 테마에서 설치하기 전에 기능을 둘러볼 수 있다는 것입니다. 테마 비용은 $2에서 최대 $100 이상입니다. 웹 빌더 템플릿과 마찬가지로 테마는 편집하기 쉽습니다. 디자인 색상, 글꼴 및 크기를 취향과 취향에 맞게 변경할 수 있습니다.
테마는 웹사이트 빌더, 프리미엄 테마 또는 Themeforest 와 같은 타사 개발자가 제공할 수 있습니다.
플러그인
플러그인은 간단합니다. 웹사이트의 거의 모든 측면에 영향을 미치는 테마와 달리 웹사이트의 다양한 측면에 대한 플러그인이 있습니다. 따라서 로그인 양식이나 등록 양식을 만들기 위해 플러그인을 설치할 수 있습니다. 플러그인은 무료로 제공되며 일부는 프리미엄입니다. 예산과 필요에 따라 하나를 선택하십시오.
모든 웹사이트 빌더에는 선택할 수 있는 플러그인이 있습니다. Weebly , Joomla 또는 WordPress 를 사용하든 수많은 테마가 있습니다. 플러그인을 사용하여 로그인 페이지를 만들려면 대시보드를 방문하여 웹사이트 빌더에 사용할 수 있는 플러그인 목록을 확인하십시오. 원하는 플러그인을 설치하면 플러그인 비용을 지불하는 체크아웃 페이지로 이동합니다.
플러그인을 설치한 후 다른 요소를 편집하라는 메시지가 표시됩니다. 편집할 각 요소를 클릭한 다음 변경 사항 저장을 클릭합니다. 새 페이지를 만들고 플러그인을 사용하여 만든 양식을 추가합니다.
결론
로그인 페이지는 매력적이어야 하는 만큼 단순해야 합니다. 최근에는 다양한 로그인 페이지 디자인이 목격되었습니다. 자신에게 익숙한 로그인 페이지 생성 방법만 선택하십시오. 코드에 정통하지 않은 경우 코딩을 선택하지 마십시오. 전문가로부터 디자인 지원을 받을 수 있지만 더 좋은 방법은 로그인 페이지 디자인에 대한 도움을 받을 수 있다는 것입니다.
사람들은 또한 소셜 로그인을 사용했습니다. 여기에서 방문자가 Facebook 또는 Twitter와 같은 소셜 미디어 계정 세부 정보로 로그인할 수 있습니다. 이것은 충분히 단순하고 비즈니스의 소셜 미디어 존재와 성과를 향상시키는 좋은 옵션입니다. 인기 있는 웹사이트의 로그인 페이지를 확인하여 웹사이트 로그인 페이지의 스타일을 지정하는 방법에 대한 통찰력을 얻을 수 있습니다. 복잡하지 않고 세부 사항을 남기지 않고.