Gutenberg를 사용하여 WordPress에서 팝업을 만드는 방법

인터넷을 탐색하다가 갑자기 팝업이 나타난 적이 있나요? 웹 페이지를 방문할 때 오버레이로 나타나는 팝업 창. 

가끔 이런 팝업은 매우 유용할 수 있고, 유용한 정보나 좋은 거래를 제공할 수 있습니다. 아니면, 약간 성가시고 방해가 될 수도 있습니다.

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

따라서 사용자를 귀찮게 하지 않으면서도 관심을 끌 수 있는 적절한 팝업을 만드는 것이 중요합니다.

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

웹사이트의 팝업은 무엇인가요?

팝업은 일반적으로 오버레이로 웹 페이지에 나타나는 작은 창으로, 사용자의 주의를 끌기 위해 사용됩니다. 이러한 창에는 프로모션 광고, 구독 제안, 알림 또는 행동 촉구와 같은 다양한 형태의 콘텐츠가 포함될 수 있습니다. 

팝업은 종종 페이지에 들어가거나 나가거나, 버튼을 클릭하여 닫거나, 양식을 작성하는 것과 같은 상호작용이 필요합니다. 팝업은 페이지의 나머지 부분과 구별되도록 설계되어 즉각적인 참여를 유도합니다.

사람들은 보통 언제 웹사이트에서 팝업을 사용하나요?

팝업은 사용자 참여 및 전환과 관련된 특정 목표를 달성하는 데 가장 일반적으로 사용됩니다. 사람들이 웹사이트에서 팝업을 사용하는 몇 가지 일반적인 시나리오는 다음과 같습니다.

• 에게 리드를 포착하다 또는 이메일 목록을 구축하다 구독하면.
• 독점적인 거래를 홍보하세요, 할인, 기간 한정 특가 등을 제공합니다.
• 새로운 제품을 발표하다, 기능 또는 주요 업데이트.
• 제공하다 중요 공지 방문자에게 경고합니다. 
• 방문자에게 다음을 요청하세요. 계정에 가입하다 웹사이트에서.
• 에게 피드백을 수집하다 또는 설문조사를 실시하다 청중들 사이에서.
• 보여주다 쿠키 동의 또는 개인 정보 정책 공고.
• 사용자를 구동합니다 이벤트에 등록하다, 웨비나 또는 워크숍.

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

Gutenberg에서 WordPress 팝업을 만드는 방법

Gutenberg 블록 편집기를 사용하여 WordPress에 팝업을 추가하는 방법에 대한 이 튜토리얼 가이드의 핵심 부분으로 넘어가겠습니다.

기본 Gutenberg 편집기에는 팝업 빌더가 제공되지 않습니다. 따라서 블록 편집기에 WordPress 팝업 플러그인을 선택해야 합니다. 이 튜토리얼에서는 GutenKit 플러그인을 사용했습니다.

GutenKit는 블록 편집기 플러그인입니다 Gutenberg를 위해 특별히 디자인된 팝업 빌더와 함께 제공됩니다. 이 팝업 빌더를 사용하면 Gutenberg에서 팝업을 만드는 것이 그 어느 때보다 쉬워졌습니다.

WordPress 편집기에서 Gutenberg 팝업을 만드는 단계별 과정은 다음과 같습니다.

Gutenberg용 WordPress 팝업 플러그인을 설치하고 활성화하세요

GutenKit 팝업 빌더를 설치하려면 웹사이트에 GutenKit 블록 편집기 플러그인을 설치해야 합니다. 웹사이트에서 팝업 빌더를 원활하게 사용하는 데 필요한 플러그인과 테마는 다음과 같습니다.

☑️필수 플러그인:

• GutenKit 무료 버전
• 또는, GutenKit 프로 버전

☑️ 테마: 안녕하세요 블록 테마 또는 WordPress 블록 테마.

GutenKit 플러그인을 설치한 후 다음으로 이동하세요. GutenKit > 모듈. 찾기 팝업 빌더 그리고 설치하다 button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

Gutenberg 블록을 사용하여 WordPress용 팝업 디자인

이제 다음으로 이동하세요. GutenKit > 팝업 그리고 클릭 새로운 팝업 만들기 팝업을 만들 편집기를 엽니다.

그런 다음 편집기에서 블록을 사용하여 팝업을 만들 수 있습니다.

GutenKit 팝업 빌더를 사용하면 모든 Gutenberg 블록을 사용하여 팝업을 디자인할 수 있습니다. 

65개 이상의 GutenKit 블록과 18개 이상의 모듈을 사용해 귀하의 사이트에 현대적이고 세련된 팝업을 디자인할 수 있습니다.

여기에는 팝업에 블록, 제목, 문단, 버튼, 이미지, 심지어 비디오까지 포함되어 있어 사용자 정의가 매우 쉽습니다. 

미리 디자인된 템플릿으로 Gutenberg 팝업 만들기

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

기성 디자인을 가져오려면

1. Gutenberg용 팝업 빌더 편집기.
2. 다음을 클릭하세요. 템플릿 라이브러리 단추.
3. 패턴을 선택하세요 도서관에서.

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

스마트 조건을 사용하여 귀하의 웹사이트에 Gutenberg 팝업을 표시하세요

You have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

거기에서 간단히 클릭하세요  + 조건 추가 button and set the rules for where you want your popup to be displayed. It’s that easy!

GutenKit 팝업 빌더를 사용하면 포함 및 제외 조건을 설정할 수 있습니다.

• 포함 조건: 포함 조건을 사용하면 전체 웹사이트, 특정 페이지 또는 보관 페이지에 팝업을 추가할 수 있습니다.
• 제외 조건: 제외 조건을 사용하면 사이트에서 팝업을 표시하지 않을 위치를 결정할 수 있습니다.

스마트 조건을 사용하여 웹사이트에 팝업을 표시하는 방법은 다음과 같습니다.

전체 웹사이트에 Gutenberg 팝업 표시

귀하의 웹사이트의 모든 페이지에 팝업을 표시하려면 

👉 1 단계: 팝업에 대한 새로운 조건을 추가합니다.

👉 2 단계: "포함" 조건을 선택하세요.

👉 3단계: 모든 페이지에 팝업을 표시하려면 "전체 사이트"를 선택하세요.

특정 페이지에서 팝업 표시를 거부합니다.

There might be times when you don’t want popups to appear on certain pages. You can do it with 들어오지 못하게 하다 정황. 

👉 1단계: 팝업에 대한 새로운 조건을 추가합니다.

👉 2단계: "제외" 조건을 선택하세요.

👉 3단계: "단수"를 선택하세요.

👉 4단계: 팝업이 나타나지 않도록 제외할 페이지를 선택하세요.

특정 페이지에만 팝업을 표시합니다.

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉 1단계: 팝업에 대한 새로운 조건을 추가합니다.

👉 2단계: "포함" 조건을 선택하세요.

👉 3단계: "단수"를 선택하세요.

👉 4단계: 팝업을 표시할 페이지를 선택하세요.

또한 팝업이 다른 페이지에 나타나지 않도록 하려면 다음을 추가할 수 있습니다. 제외 조건, 전체 사이트를 선택하여 팝업이 웹사이트 전체에 표시되는 것을 제한합니다.

아카이브 페이지의 WordPress 팝업

조건을 설정하여 모든 WordPress 보관 페이지에 팝업을 표시할 수도 있습니다. 이를 위해, 조건 추가 > 포함 > 보관 > 보관 선택 페이지.

반면, 특정 보관 페이지에 팝업이 표시되지 않도록 하려면 제외 조건을 설정할 수 있습니다. 동일한 단계를 따르기만 하면 됩니다. 조건 추가 > 제외 > 보관 > 보관 선택 페이지.

Gutenberg 팝업을 어떻게, 언제 트리거할지 결정

웹사이트 페이지에 팝업이 어떻게 나타나는지에 대한 완전한 제어권이 있습니다. 팝업이 페이지 로드 시, 종료 의도 시 또는 상호 작용 후에 나타날지 결정할 수 있습니다.

GutenKit 팝업 빌더에서는 웹사이트에서 팝업이 어떻게 트리거될지 선택할 수 있습니다. 콘텐츠 > 오픈 이벤트 블록 편집기에서..

이것은 Gutenberg에서 다양한 유형의 팝업을 개발하는 데 도움이 됩니다. 다음은 다음과 같습니다. 워드프레스 팝업 유형 Gutenberg에서는 GutenKit 팝업 빌더로 디자인할 수 있습니다.

1. 진입 팝업

• 방아쇠: 사용자 브라우저에 페이지가 로드되는 즉시 실행됩니다.
• 목적: 사용자가 웹사이트에 접속하자마자 참여를 유도합니다.
• 사용 사례: 할인 혜택, 이벤트 공지 등으로 사용자를 환영하거나, 즉시 구독을 요청합니다.

💡 트리거하는 방법? Open Event를 “페이지 로드 시”

2. 종료 의도 팝업

• 방아쇠: 사용자가 탭이나 브라우저를 닫으려고 할 때 활성화됩니다.
• 목적: 사용자가 사이트를 떠나기 전에 이를 포착합니다.
• 사용 사례: 할인, 뉴스레터 구독, 특별 할인 혜택을 제공합니다.

💡 트리거하는 방법? Open Event를 “페이지 종료 의도”

3. 스크롤 트리거 팝업

• 방아쇠: 사용자가 페이지를 아래로 스크롤하면 발생합니다.
• 목적: 사용자가 페이지의 특정 부분을 탐색한 후 프로모션 할인 혜택을 제공하거나 피드백을 요청합니다.
• 사용 사례: 추가 콘텐츠, 가입 양식, 기간 한정 특가를 홍보합니다.

💡 트리거하는 방법? Open Event를 “페이지 스크롤됨".

그 후에 “페이지 스크롤 진행률 사용자가 페이지를 아래로 스크롤할 때 팝업이 나타나는 지점을 결정합니다.

4. 사용자 비활성 팝업

• 방아쇠: 사용자가 일정 시간 동안 활동하지 않는 경우.
• 목적: 사이트에서 일정 기간 동안 활동을 하지 않았던 사용자를 다시 참여시킵니다.
• 사용 사례: 사용자에게 특별 할인 혜택을 알려주고, 조치를 취하도록 촉구하거나, 장바구니에 담아둔 품목을 제안합니다.

💡 트리거하는 방법? Open Event를 “비활성 후".

이제 사용자 비활성 시간 사용자가 비활성 상태가 된 후 팝업이 나타나는 시점을 몇 초 내에 결정합니다.

5. 클릭 팝업

• 방아쇠: 페이지의 섹션과 사용자 상호작용을 통해 활성화됩니다.
• 목적: 사용자가 특정 페이지 요소(예: 버튼이나 이미지)를 클릭하면 콘텐츠가 표시됩니다.
• 사용 사례: 주로 제품 세부 정보, 추가 양식 제출 또는 비디오 재생에 사용됩니다.

💡 트리거하는 방법? Open Event를 “사용자 정의 선택기 클릭".

이제 추가하세요 선택자 클래스 섹션에 대해서. 

Gutenberg에서 제공하는 다양한 유형의 WordPress 팝업을 사용하면 목표에 부합하고 사용자 경험을 향상시키는 최상의 형식을 선택할 수 있는 유연성이 확보되어 웹사이트가 더욱 매력적이고 효과적으로 주의를 끌고 전환을 촉진할 수 있습니다.

캠페인에 대한 팝업 활성화 일정을 설정하세요

때때로 팝업을 사용하여 웹사이트에서 캠페인을 홍보합니다. 이제 이러한 캠페인에는 출시를 위한 특정 날짜와 시간이 있습니다. 따라서 팝업을 활성화하려면 그 정확한 타이밍을 맞춰야 합니다.

당신은 그것을 할 수 있습니다 고급 규칙. 

➡️ 1 단계: “ 버튼을 켜기로 전환합니다.일정 날짜 및 시간".

➡️ 2단계: 설정 시간 팝업을 활성화하고 싶을 때.

➡️ 3단계: 다음을 선택하세요. 날짜 팝업 캠페인 출시.

WordPress용 GutenKit 팝업 빌더를 선택해야 하는 이유는 무엇입니까?

그만큼 GutenKit 팝업 빌더 Gutenberg 블록 편집기와 완벽하게 통합되어 사용자에게 직관적이고 고도로 사용자 정의 가능한 경험을 제공하기 때문에 WordPress에서 팝업을 만드는 데 가장 적합한 선택으로 돋보입니다. WordPress 사이트에 적합한 솔루션인 이유는 다음과 같습니다.

✅ 원활한 Gutenberg 통합:

GutenKit is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ 빠른 설정을 위한 사전 디자인된 템플릿:  

   GutenKit에는 브랜드 스타일에 맞게 쉽게 사용자 정의할 수 있는 다양한 전문적으로 디자인된 팝업 템플릿이 제공됩니다. 이러한 템플릿은 시간과 노력을 절약하여 팝업을 처음부터 만들고 싶지 않지만 세련되고 현대적인 디자인을 원하는 사람들에게 시작점을 제공합니다.

✅ 고급 디스플레이 규칙: 

GutenKit를 사용하면 팝업이 언제, 어디에 나타나는지 완벽하게 제어할 수 있습니다. 팝업을 표시하려는 페이지에 따라 정확한 표시 조건을 설정할 수 있습니다. 

이를 통해 방해가 되지 않으면서도 참여도를 높여서 팝업이 가장 최적의 순간에 표시됩니다.

✅ 다중 트리거 옵션:

GutenKit는 페이지 로드 시, 시간 지연 후, 스크롤 시 또는 사용자가 페이지를 종료하려고 할 때 등 팝업을 표시하기 위한 여러 가지 트리거 옵션을 제공합니다. 

사용자가 특정 요소와 상호 작용할 때 팝업을 트리거하여 사용자 여정을 완벽하게 제어할 수도 있습니다.

✅ 유연한 사용자 정의

GutenKit 팝업 빌더를 사용하면 애니메이션, 스타일, 타이포그래피, 색상 등 팝업을 광범위하게 사용자 정의할 수 있습니다. 

더욱 고급 스타일을 적용하기 위해 사용자 정의 CSS를 추가함으로써 팝업이 웹사이트의 고유한 디자인과 브랜딩에 맞게 구성되도록 할 수도 있습니다.

✅ 반응형 및 모바일 최적화 

GutenKit로 만든 팝업은 완벽하게 반응하고 모바일 친화적이어서 어떤 기기에서든 팝업이 멋지게 보입니다. 입장 및 퇴장 애니메이션, 배경 스타일, 오버레이 색상 등으로 모양을 사용자 지정할 수 있습니다.

✅ 가볍고 성능 지향적 

다른 많은 팝업 플러그인과 달리 GutenKit는 가볍고 성능에 최적화되도록 설계되었습니다. 

즉, 팝업으로 인해 사이트 속도가 느려질까 걱정할 필요가 없으며, 이는 사용자 경험과 SEO에 모두 중요합니다.

마무리

이러한 단계를 따르면 WordPress 사이트에서 팝업을 쉽게 빌드하고 표시할 수 있습니다. GutenKit 팝업 빌더를 사용하면 동적 팝업을 WordPress 사이트에 쉽게 통합하여 청중과 효과적으로 소통할 수 있습니다. 

이 가이드에서 통찰력을 얻고 다양한 팝업 전략을 실험하여 사이트의 잠재력을 극대화하세요!

팝업 빌더와 마찬가지로 GutenKit는 65개 이상의 블록, 18개 이상의 모듈, 500개 이상의 준비된 디자인을 제공하여 Gutenberg 블록 편집기에서 고급 페이지 빌더 경험을 제공합니다. 오늘 GutenKit를 설치하고 WordPress에서 꿈의 웹사이트를 구축하기 시작하세요.