WordPress에서 경고 상자를 만드는 방법
게시 됨: 2023-02-12귀하의 웹사이트 방문자 수는 많지만 가입 또는 전환이 원하는 것보다 낮다면 귀하는 혼자가 아닙니다. 트래픽을 늘리는 데 도움이 되는 수많은 리소스가 있지만 트래픽이 사이트에서 올바른 조치를 취하도록 하는 것은 또 다른 이야기입니다.
한 가지 가능한 해결책은 경고 상자를 사용하는 것입니다. 이는 WordPress 사이트에서 전환율을 크게 높일 수 있는 강력하고 간단한 도구입니다. 또한 이 기능을 생성하고 사용자 지정하기가 매우 쉽습니다.
이 문서에서는 경고 상자가 무엇이고 왜 사용해야 하는지에 대해 설명합니다. 그런 다음 WordPress에서 나만의 알림 상자를 만드는 방법을 보여 드리겠습니다. 다이빙하자!
경고 상자란 무엇입니까?
경고 상자는 소리 그대로입니다. 방문자에게 어떤 일이 발생했음을 알리기 위해 웹 사이트에 표시되는 경고입니다. 이 기능은 '팝업'으로 더 잘 알고 계실 것입니다.
WordPress의 경고 상자는 일반적으로 두 가지 형식 중 하나를 취합니다. 화면에 나타나는 팝업 또는 페이지 상단을 따라 실행되는 막대('hello bar'라고도 함)를 볼 수 있습니다.
경고 상자를 만드는 이유는 무엇입니까?
경고 상자는 일반적으로 사이트에서 발생하는 중요한 일을 사용자에게 알리는 데 사용됩니다. 예를 들어 WordPress 경고 상자를 사용하여 방문자가 다른 방법으로는 볼 수 없는 제품의 특별 판매 또는 일련의 추천 게시물에 대해 알릴 수 있습니다.
이 기능의 또 다른 일반적인 용도는 방문자 이메일 주소를 캡처하는 것입니다. 많은 WordPress 경고 상자 플러그인은 사용자가 사이트에서 커서를 이동할 때(예: 탭을 닫거나 뒤로 버튼을 누르기 위해) 팝업되도록 설정할 수 있습니다.
이러한 '마지막 순간' 알림은 방문자가 떠나기 전에 연락처 세부 정보를 캡처하여 향후 전환으로 이어질 수 있는 좋은 방법이 될 수 있습니다. 이러한 알림은 매우 효과적일 수 있습니다. 최고 성능의 팝업은 전환율이 9% 이상입니다. 즉, 구현하려는 노력을 기울일 가치가 있습니다.
플러그인으로 경고 상자 만들기
WordPress 플러그인 덕분에 나만의 경고 상자를 만드는 것이 간단합니다. 강력한 (무료) Popup Maker 플러그인을 사용하여 모든 단계를 안내해 드립니다.
1단계: 플러그인 다운로드(예: Popup Maker)
가장 먼저 해야 할 일은 전용 플러그인을 선택하는 것입니다. 위에서 언급했듯이 무료 Popup Maker 플러그인은 잘 검토되었으며 확실한 선택입니다.
이 도구를 설치하려면 WordPress 대시보드로 이동하여 Plugins > Add New 로 이동합니다. "팝업 메이커"를 검색하면 첫 번째 항목이어야 합니다.
그런 다음 지금 설치를 클릭합니다. 설치가 완료되면 활성화 를 선택하여 플러그인을 활성화하는 것을 잊지 마십시오. Popup Maker 자체는 무료이지만 일부 기능을 사용하려면 프리미엄 플랜이 필요합니다.
2단계: 팝업 만들기
Popup Maker가 설치되면 WordPress 사이드바에 플러그인 이름을 딴 새 항목이 표시됩니다 . 모든 팝업 목록을 열려면 클릭하십시오. 처음에는 비어 있지만 곧 해결하려고 합니다.
팝업을 생성하려면 화면 상단의 새 팝업 추가를 클릭합니다. 그러면 WordPress 편집기가 열립니다.
이 화면을 방문하면 팝업을 만드는 방법을 보여주는 자습서가 나타납니다. 가장 먼저 해야 할 일은 나중에 팝업을 식별할 수 있도록 이름을 입력하는 것입니다.
그런 다음 팝업에 제목으로 표시될 선택적 제목을 입력할 수 있습니다. 메인 편집기 필드에는 팝업에 표시할 내용을 입력할 수도 있습니다. 간단한 문의 양식을 만들려는 경우 미리 정의된 단축 코드를 사용할 수도 있습니다.
이러한 단축 코드는 도구 모음의 Popup Maker 로고가 있는 새 버튼 아래에 있습니다.
구독 양식을 클릭하여 이메일 캡처를 위한 기본 연락처 양식을 삽입하십시오. 양식을 클릭하고 편집 버튼을 선택하여 필드 및 개인 정보 고지 사항에 대한 텍스트를 사용자 지정할 수 있습니다. 텍스트 외에도 스타일 및 레이아웃에 대한 여러 가지 옵션이 있습니다.
3단계: 팝업에 대한 트리거 구성
팝업 양식이 생성되면 다음 단계는 트리거를 구성하는 것입니다. 경고 상자가 나타나는 시기를 결정합니다.
팝업 편집기 화면에서 팝업 설정 까지 아래로 스크롤하고 목록에서 트리거를 선택합니다. 그런 다음 새 트리거 추가를 클릭합니다.
기본 Popup Maker 플러그인에는 Open , Time Delay/Auto Open 및 Form Submission 의 세 가지 옵션이 있습니다. 프리미엄 요금제를 사용 중인 경우 종료 의도를 트리거로 선택할 수도 있습니다. 사용자가 사이트를 떠나려고 할 때 팝업을 표시하려는 경우 사용할 수 있는 옵션입니다.
타겟팅 탭에서 알림 상자가 표시되는 페이지를 조정할 수도 있습니다. 특정 페이지 또는 장치 유형이 경고를 보지 않도록 제외하려면 이 설정을 사용자 지정해야 합니다.
4단계: 경고 상자 스타일 지정
마지막으로 사이트 테마에 더 잘 맞도록 새 알림 상자의 모양을 변경할 수 있습니다. 팝업 설정 영역에서 디스플레이 를 선택합니다. 여기에서 팝업이 화면에 표시되는 위치(상단 표시줄 포함)를 변경하고 크기와 위치를 설정하고 사용 가능한 여러 테마 중 하나를 선택할 수 있습니다.
완료되면 게시 버튼을 선택하여 변경 사항을 저장하고 팝업을 활성화하십시오.
플러그인 없이 알림 상자 만들기
플러그인을 사용하지 않으려면 약간의 코드와 약간의 그리스를 사용하여 경고 상자를 직접 만들 수도 있습니다. header.php 파일을 편집하고 사이트에 일부 CSS를 추가해야 합니다. 이 예에서는 페이지 상단에 알림 표시줄을 만듭니다.
1단계: header.php 파일 편집
가장 먼저 해야 할 일은 header.php 파일에 코드를 추가하는 것입니다. 워드프레스 테마 편집기를 사용하여 액세스할 수 있습니다. 대시보드에서 모양 > 테마 편집기 로 이동합니다. 그런 다음 오른쪽 사이드바에서 테마 헤더(header.php)를 선택합니다.
<head> 섹션 끝에 있는 파일에 다음 코드를 복사하여 붙여넣습니다.
<div class="alertbar">All items 20% off!</div>
이 추가 후 파일은 다음과 같습니다.
그러면 "모든 품목 20% 할인!"이라는 메시지가 표시됩니다. 알림 표시줄에서 원하는 대로 텍스트를 사용자 지정할 수 있습니다.
2단계: 사용자 지정 CSS 추가
마지막으로 CSS(Cascading Style Sheets)를 사용하여 알림 스타일을 지정해야 합니다. WordPress 사용자 지정 프로그램을 사용하여 CSS를 추가할 수 있습니다.
그렇게 하려면 WordPress 대시보드로 이동하여 모양 > 사용자 지정으로 이동합니다. 이렇게 하면 사용자 정의 프로그램에서 사이트가 열립니다. 사이드바에서 추가 CSS 를 선택합니다. 이렇게 하면 사용자 지정 CSS를 입력할 수 있는 코드 상자가 열립니다.
텍스트 필드에 다음 코드를 붙여넣습니다.
.alertbar {
background-color: #A9A9A9;
color: #FFFFFF;
display: block;
line-height: 45px;
height: 50px;
position: relative;
text-align: center;
text-decoration: none;
top: 0px;
width: 100%;
z-index: 100;
}
경고는 다음과 같습니다.
위의 코드는 흰색 텍스트가 있는 짙은 회색 막대를 생성하지만 테마에 맞게 색상과 크기를 조정할 수 있습니다. 완료되면 게시를 클릭하여 변경 사항을 저장합니다.
WP 엔진으로 사이트 향상
이메일 가입을 늘리고 싶거나 특별 제안에 대해 방문자에게 알리는 간단한 방법이 필요한 경우 알림 상자는 우아하고 효과적인 솔루션입니다. WordPress 사이트에 하나를 구현하면 전환율을 크게 높일 수 있습니다.
Popup Maker와 같은 WordPress 플러그인으로 경고 상자를 구현할 수 있습니다. 약간의 CSS를 사용하여 비교적 쉽게 직접 코딩할 수도 있습니다. 어느 쪽이든 가입 및 전환을 늘리도록 설계된 맞춤형 알림을 받게 됩니다.
사이트를 더욱 향상시키고 싶다면 전용 WordPress 호스팅 계획을 확인하십시오!