플러그인 없이 WordPress에서 팝업을 만드는 방법은 무엇입니까?

게시 됨: 2022-12-14

팝업은 웹사이트 구조에서 유용한 옵션입니다. 그들은 다양한 크기, 모양 및 색상으로 제공됩니다. 때로는 동영상, GIF 이미지, JPG 이미지 또는 클릭 유도문안이 있는 간단한 텍스트입니다.

그것이 무엇이든 웹사이트와 통합해야 합니다. 이제 플러그인 없이 WordPress에서 팝업을 만드는 방법을 살펴보겠습니다.

목차

  • 팝업이란 무엇입니까?
  • 왜 팝업을 사용합니까?
    • 청중의 관심을 끌기
    • 이메일 주소 얻기
    • 사람들이 행동을 취하도록 격려하기
    • 사은품
    • 버려진 카트
    • 소셜 미디어 프로모션
    • 설문 조사 실시
  • 플러그인 없이 WordPress에서 팝업을 만드는 두 가지 방법은 무엇입니까?
    • 타사 애플리케이션 또는 웹사이트 사용
  • 코드 사용
  • 마지막 생각들

팝업이란 무엇입니까?

팝업은 웹사이트를 로드한 후 웹사이트 뷰어의 화면에 표시되는 창입니다. 일반적으로 마케팅 서비스에 사용되며 사용자에게 무언가를 요청합니다.

모든 웹사이트 소유자가 자신의 웹사이트에 팝업이 있기를 원하는 것은 아닙니다. 이는 사용자에게 성가신 것처럼 보일 수 있으며 일부는 위험을 감수하고 싶지 않습니다. 반면에 팝업에는 웹사이트 및 마케팅 활동에 대한 특정 기능이 있습니다.

왜 팝업을 사용합니까?

청중의 관심을 끌기

자랑하고 싶은 신제품이 있거나 관심이 필요한 블로그의 최근 글이 있다면 팝업으로 노출할 수 있습니다. 사용자는 팝업을 보고 닫을 수밖에 없습니다. 바로 앞에 있는 무언가를 클릭하는 것이 훨씬 더 유혹적입니다.

이메일 주소 얻기

메일은 고객과 소통하는 좋은 방법입니다. 이메일 마케팅은 디지털 마케팅에서 가장 수익성이 높은 방법 중 하나로 간주됩니다.

청중이 팝업 상자에 이메일 주소를 입력하면 이를 마케팅 활동에 사용하거나 고객에게 유익한 이메일을 보낼 수 있습니다.

사람들이 행동을 취하도록 격려하기

할인 캠페인이 있습니까? 한정판매인가요? 팝업에서 이를 언급하면 ​​청중에게 훨씬 더 빨리 메시지를 전달할 수 있습니다.

또한 팝업의 비디오 또는 GIF 버전은 사용자가 사진을 클릭하도록 추가로 촉구하는 긴박감을 만들 수 있습니다.

사은품

또 다른 효과적인 마케팅 전략은 청중을 위한 경품을 준비하는 것입니다. 이 경품을 사용하여 그들의 관심과 이메일 주소를 모두 얻을 수 있습니다.

이러한 경품 중 일부는 무료 전자책, 할인 코드, 특별 행사 및 제품 샘플이 될 수 있습니다. 팝업에 경품을 언급하면 ​​나머지는 저절로 강압됩니다.

버려진 카트

버려진 카트는 온라인 비즈니스에서 처리해야 하는 가장 성가신 문제 중 하나입니다. 사람들은 장바구니에 항목을 추가한 다음 잊어버립니다.

팝업을 사용하여 해당 항목을 예약했으며 카드가 곧 만료됨을 사람들에게 상기시킬 수 있습니다. 이것은 고객이 구매를 하도록 밀어붙일 필요가 있는 긴박감을 만들 것입니다.

소셜 미디어 프로모션

웹 사이트를 소셜 미디어 플랫폼에 연결하는 것은 이미 페이지 상단 또는 하단에 있는 버튼을 통해 이루어집니다. 그러나 원인을 더 강조하고 싶다면 팝업을 사용하여 Instagram, Facebook, LinkedIn 또는 Twitter에서 최신 게시물을 쉽게 광고할 수 있습니다.

설문 조사 실시

데이터는 비즈니스를 구축할 수 있는 빌딩 블록입니다. 따라서 청중과 잠재 고객에 대한 정보가 많을수록 미래를 더 잘 계획하고 서비스를 제공할 수 있습니다. 귀하의 제품에 대한 고객의 연령, 직업 또는 선호도에 대한 간단한 설문 조사를 수행하는 것은 어떻습니까?

플러그인 없이 WordPress에서 팝업을 만드는 두 가지 방법은 무엇입니까?

웹사이트 팝업을 만드는 가장 간단한 방법은 WordPress 기본 플러그인을 사용하는 것입니다. 그러나 이러한 플러그인은 악명이 높으며 웹사이트 속도를 저하시킬 수 있습니다.

그렇기 때문에 많은 웹 사이트 관리자가 그러한 플러그인을 WordPress 플랫폼에 추가하는 것을 꺼리고 가능한 한 최소한으로 계속합니다. 그럼에도 불구하고 플러그인 없이 워드프레스에서 팝업을 생성하는 방법에는 두 가지가 있습니다. 한 번 보자:

타사 애플리케이션 또는 웹사이트 사용

1. 팝업스마트

PopupSmart는 속도나 로딩 시간에 영향을 주지 않고 혁신적인 팝업을 디자인하고 웹 사이트에 추가할 수 있는 온라인 툴킷입니다. PopupSmart로 얻는 최종 결과는 웹사이트에 추가해야 하는 한 줄의 코드이며 거기에 팝업이 있습니다.

이 플랫폼에는 여러 가지 지불 계획이 있으며 각 지불 계획은 다음과 같은 특정 기능을 제공합니다.

무료 무료 · 1 팝업
· 웹사이트 1개
· 5000 페이지뷰
· 알림 팝업
· 이메일 수집 팝업
· 양식 수집 팝업
· x초 후
· 종료 의도
· 활동 센서
· 스크롤을 내린 후
· 특정 페이지 탐색
· 신규 vs. 복귀
· 브라우징 언어
· 쿠키 값 타겟팅
· 지리적 위치
· HTML 타겟팅
· Amazon AWS를 통한 %99.99 가동 시간
· AdBlock 및 GDPR 안전
· SEO 및 Google 불만사항
· 이메일 지원
기초적인 $24/월 · 다음과 같은 모든 무료 기능:
· 무제한 팝업
· 무제한 웹사이트
· 100,000 페이지뷰
· 분석
· AI 스마트 모드
· 하위 계정
· 15분 이내 채팅 지원
· 8시간 이내 이메일 지원
· 쿠폰 팝업
· 쿠키 동의 팝업
· 추천 팝업
· 포기 카트 알림 팝업
· 게임화 팝업
· 전화 캠페인
· 트래픽 소스
· 표시 빈도
· 운영 체제
· 우선 고객 지원
찬성 $66/월 · 모든 기본 기능에 추가:
· 500,000 페이지뷰
고급의 $108/월 · 모든 기능 플러스:
· 1,000,000 페이지뷰
· CRO 컨설팅
· 전담 CRO 전문가

PopupSmart를 사용하여 WordPress에서 팝업을 만드는 단계:

  • PopupSmart 웹 사이트에 가입하십시오. 가입 절차를 진행하거나 Google 계정을 통해 간단히 로그인할 수 있습니다.
popupSmart = 가입 프로세스를 사용하여 플러그인 없이 WordPress에서 팝업 만들기
  • 새 팝업 만들기 버튼을 클릭하여 팝업 만들기 프로세스를 시작합니다.
새 팝업 만들기
  • 열리는 다음 창에서 팝업에 대해 염두에 두고 있는 목적을 선택해야 합니다. 옵션은 다음과 같습니다. 이메일 목록 늘리기, 공지 사항 표시, 쿠키 법률 준수, 전화 통화 증가, 제품 홍보 및 양식 제출 수집.
PopupSmart 팝업 목적
  • 다음 단계에서는 캠페인 이름, 도메인 및 하위 도메인을 제공하라는 메시지가 표시됩니다.
팝업 캠페인 생성
  • 디자인 페이지에서 레이아웃, 팝업 유형, 성공 팝업 및 광고 티저를 선택하라는 메시지가 표시됩니다.
Popup스마트 디자인 페이지
  • 커스터마이징 메뉴에서 제목, 설명, 이미지, 개인 정보 보호 정책, 텍스트 입력, 이메일 입력을 선택하고 계정을 생성합니다.
PopupSmart 제목 및 설명
  • 다음 메뉴에서 예약, 청중, 방문자 행동, 방문자 장치 및 방문 빈도와 같은 기타 옵션을 사용자 정의할 수 있습니다.
팝업스마트 스케줄링 메뉴
  • 마지막으로 팝업을 게시할 시간입니다. 팝업에 사용할 URL을 확인하면 임베드 코드를 받게 됩니다.
플러그인 없이 WordPress에 팝업을 표시하도록 PopupSmart 게시
  • 이 코드를 복사하고 WordPress 계정의 테마 편집기로 이동합니다. 내비게이션 바에서 footer.php를 찾으십시오.
  • </body> 태그 앞에 임베드 코드를 붙여넣고 코드를 업데이트합니다.
  • 프로세스가 올바르게 완료되었는지 확인하려면 PopupSmart 창으로 돌아가서 다음을 누르십시오.
  • 새 창은 코드가 웹사이트에 추가되었는지 확인하고 청중에게 어떻게 보일지 미리보기를 보여줍니다.

2. 엘리멘터

elementor 플러그인에서 플러그인 없이 WordPress에서 팝업 만들기

Elementor는 웹 사이트 페이지의 요소를 세그먼트로 나누고 각 요소(섹션)를 개별적으로 편집하고 사용자 지정할 수 있는 웹 생성기입니다. Elementor의 또 다른 훌륭한 기능은 간단한 드래그 앤 드롭 제스처를 사용하여 웹 페이지를 디자인할 수 있다는 것입니다. 또한 Elementor에는 팝업 메이커와 같은 독점 기능을 갖춘 프로 계획이 있습니다.

테마 + 에디터 + 호스팅 $79/년 · Google Cloud Platform 기반 호스팅
· Cloudflare의 SSL 및 CDN
· 월 방문수: 100K
· 대역폭/월: 100GB
· 저장공간: 20GB
· 무료 맞춤형 도메인 연결
· 100개 이상의 미리 디자인된 웹사이트
· Hello 테마 및 WP 사전 설치
· 끌어서 놓기, 코드 편집기 없음
· 프리미엄 지원

언급한 바와 같이 Elementor에는 플러그인 없이 웹 사이트에 대한 팝업을 생성할 수 있는 내장 팝업 메이커가 있습니다. 이를 수행하는 단계는 다음과 같습니다.

  • Elementor를 사용하여 팝업을 만들려면 웹사이트의 아무 페이지나 열고 CTRL + E 를 눌러야 합니다. 이렇게 하면 Elementor 파인더가 열립니다.
  • 검색 상자에 새 팝업 추가를 입력합니다. 새 탭에서 팝업 빌더를 열어야 하므로 CTRL 키를 누르고 생성기를 클릭해야 합니다.
  • 팝업 템플릿을 생성할 수 있는 창입니다. 이 템플릿에는 이름이 필요하므로 이름을 입력하십시오.
Elementor로 팝업 만들기
  • Elementor에는 사용할 수 있는 미리 만들어진 팝업 템플릿 라이브러리가 있습니다. 필요에 맞는 템플릿을 찾으면 설치를 클릭하여 얻을 수 있습니다.
Elementor 2로 팝업 만들기
  • 그렇지 않은 경우 나만의 템플릿을 만들 수 있으므로 라이브러리를 종료하고 크리에이터 페이지로 이동합니다.
Elementor로 팝업 만들기
  • 먼저 팝업 설정을 해야 합니다. 왼쪽 하단에서 설정 메뉴를 선택하고 팝업의 너비와 길이를 선택합니다.
Elementor로 팝업 만들기
  • 사용자 지정을 위한 다음 옵션은 가로 또는 세로가 될 수 있는 팝업의 위치입니다.
Elementor로 팝업 만들기
  • 그런 다음 오버레이와 닫기 버튼을 숨기거나 표시할지 선택합니다. 또한 텍스트의 종료 및 시작에 대한 애니메이션 형식을 선택하는 옵션이 있습니다.
Elementor 7로 팝업 만들기
  • 스타일 탭에서 배경색, 테두리, 테두리 반경, 상자 그림자, 오버레이의 불투명도, 종료 버튼의 위치, 크기 및 색상과 같은 팝업 디자인을 사용자 지정할 수 있습니다.
Elementor 8로 팝업 만들기
  • 그런 다음 고급 탭으로 이동합니다. 이 탭은 스크롤 비활성화를 포함하여 몇 가지 추가 팝업 동작 옵션을 제공합니다.
Elementor로 팝업 만들기
  • 이제 팝업을 디자인할 차례입니다. 페이지 중앙에 있는 더하기 기호를 클릭하여 팝업 구조를 선택합니다.
  • 위젯 메뉴에서 팝업에 제목을 추가하고 원하는 제목을 입력합니다.
  • 다양한 섹션, 이미지, 제목 및 설명을 추가하고 원하는 대로 모든 크기와 서체를 사용자 지정할 수 있습니다.
Elementor 12로 팝업 만들기
  • 디자인이 준비되면 클릭 유도 문안 버튼을 팝업에 추가하고 대상을 리디렉션하려는 페이지에 연결하십시오. 사용자가 마우스를 가져갈 때 다른 배경을 표시하도록 가리키기 옵션을 변경할 수도 있습니다.
Elementor 13으로 팝업 만들기
  • 팝업이 모바일 반응형인지 확인하려면 화면 왼쪽 하단의 반응형 메뉴를 클릭하고 모바일을 선택하면 됩니다. 패널을 숨기면 모바일 버전 팝업의 전체 미리보기를 볼 수 있습니다.
Elementor 15로 팝업 만들기
  • 모두 완료되면 게시를 클릭하고 조건을 설정합니다. 이러한 조건은 팝업을 표시할 웹 사이트 섹션을 결정합니다. 홈페이지에만 표시되도록 설정하거나 여러 페이지에 표시하도록 선택할 수 있습니다.
Elementor 16으로 팝업 만들기
  • 트리거 메뉴에서 팝업이 표시되는 데 걸리는 시간과 팝업을 클릭하거나 닫는 조건을 선택할 수 있습니다.
Elementor 17로 팝업 만들기
  • 그런 다음 단일 청중에게 팝업이 표시되는 횟수를 선택할 수 있는 고급 옵션이 있습니다. 모든 것이 원하는 대로 되면 저장을 클릭하고 종료할 수 있습니다.
Elementor 18로 팝업 만들기
  • 마지막으로 팝업을 다시 보고 싶은 청중을 위해 화면 측면에 버튼을 유지하여 팝업 보기를 선택적으로 표시하도록 선택할 수 있습니다. 이 기능은 링크의 동적 탭에서 설정됩니다.
Elementor 19로 팝업 만들기

코드 사용

전문 개발자이고 HTML, CSS 및 JavaScript 코드 작업 경험이 있는 경우 코드를 사용하여 플러그인 없이 WordPress에서 팝업을 만들고 웹 사이트 테마에 삽입할 수 있습니다. 그런 다음 코드가 준비되면 WordPress 관리 창을 열고 코드를 페이지 하단의 HTML 블록에 붙여넣기만 하면 됩니다.

코드를 입력할 수 있는 다른 위치는 WordPress 대시보드의 테마 편집기입니다. 이 경우 맨 아래에 있는 functions.php 파일에 코드를 붙여넣어야 합니다. 모든 팝업 설정을 코드에 입력하는 것을 잊지 마십시오.

이러한 설정에는 다음이 포함됩니다. 팝업을 몇 번 표시해야 합니까? 페이지에 들어간 후 얼마나 걸립니까? 팝업 이미지와 텍스트는 무엇입니까? 그리고 사용자가 리디렉션되어야 하는 URL은 무엇입니까?

마지막 생각들

방문 페이지에서 팝업을 사용하면 다양한 용도로 사용할 수 있습니다. 그러나 웹 사이트에서 청중을 짜증나게 하는 것과 팝업으로 보고 싶은 것을 제공하는 것 사이에는 미묘한 차이가 있습니다. 따라서 청중과 그들이 좋아하는 것과 싫어하는 것에 대해 가능한 한 많은 데이터를 수집해야 합니다.

또한 플러그인 수를 줄여 웹사이트를 최대한 가볍고 빠르게 유지해야 합니다. 이것이 플러그인 없이 워드프레스에서 팝업을 만드는 방법을 아는 것이 필수적인 이유입니다. 이 문서의 정보를 사용하여 웹사이트에 전문가 수준의 팝업을 디자인하고 게시할 수 있습니다.

이 게시물이 도움이 되셨나요?