블로그

워드프레스에 맞춤형 배너를 추가하는 방법

마지막 업데이트 날짜: 
워드프레스에 맞춤형 배너를 추가하는 방법

무언가를 판매하거나 이메일 목록을 늘리기 위해 워드프레스를 사용하고 있다면, 페이지 상단의 배너는 매우 유용할 수 있습니다. 사람들이 가장 먼저 눈에 띄는 부분인 경우가 많기 때문에, 시즌 할인을 알리거나, 신제품을 소개하거나, 무료 다운로드를 제공하여 이메일 주소를 수집하기에 좋은 위치입니다. 

워드프레스는 배너를 만드는 기본 기능을 제공하며, 배너 전용 블록이 없기 때문에 구텐베르크(Gutenberg) 사용자 정의 배너는 주로 커버(Cover) 블록을 제목 및 버튼과 결합하는 방식으로 만들어집니다. 링크가 포함된 간단한 공지사항이라면 이러한 옵션으로 충분합니다. 하지만 배너가 페이지에 묻혀 그대로 스크롤되지 않고 클릭을 유도하기를 원한다면, 조금 다른 방법이 필요할 수 있습니다.

이러한 기본 블록은 배너 자체 내에 판매용 카운트다운 타이머나 이메일 수집 필드가 없기 때문에 상호작용적인 기능을 수행할 수 없습니다. (HTML 및 CSS 코드를 작성하지 않고) 이러한 요소가 포함된 배너를 만들려면 두 가지 방법 중 하나를 선택해야 합니다. 전용 배너 플러그인을 설치하거나, 무료 호스팅 위젯을 사용하여 해당 임베드 코드를 ‘사용자 정의 HTML’ 블록에 붙여넣을 수 있습니다.

카운트다운이나 가입 양식이 포함된 사용자 정의 배너를 워드프레스에 추가하고 싶은 블로거, 퍼블리셔 또는 우커머스(WooCommerce) 상인이라면 이 글을 계속 읽어보세요. 이 가이드에서는 플러그인을 시작으로 위젯에 이르기까지 워드프레스에 배너를 추가하는 방법을 다룹니다.

옵션 1: 전용 워드프레스 배너 플러그인 설치하기

워드프레스의 표준적인 접근 방식은 저장소에서 플러그인을 설치하는 것입니다. 수십 개의 배너 및 알림 표시줄 플러그인을 사용할 수 있으며, 플러그인을 활성화하면 블록 편집기가 아닌 대시보드에서 캠페인을 구성할 수 있습니다.

플러그인을 사용하여 워드프레스에 배너를 추가하는 방법은 다음과 같습니다.

  1. 워드프레스 대시보드에서 **플러그인**으로 이동하여 배너 또는 알림 표시줄 플러그인을 검색한 다음 **지금 설치**를 클릭하고 **활성화**합니다.
  2. Hello Bar 팝업 빌더 플러그인 페이지 스크린샷
  1. 왼쪽 사이드바에서 플러그인의 새 메뉴 항목을 찾습니다. 즉시 나타나지 않으면 대시보드를 새로 고침하세요. 배너를 활성화한 다음 텍스트, 이미지, 색상 및 대상 URL을 추가합니다.
  2. 배너를 표시할 페이지나 게시물을 선택하고, 일정 또는 타겟팅 규칙을 설정하고, 변경 사항을 저장한 다음, 라이브 사이트를 확인하여 제대로 보이는지 확인합니다.

무료 버전은 포함된 기능이 매우 다양하며, 카운트다운 타이머, 타겟팅 규칙, 프로모션에서 타사의 로고 제거 등 배너를 가치 있게 만드는 프리미엄 기능을 사용하려면 종종 결제가 필요합니다.

예를 들어, 헬로 바(Hello Bar)의 무료 플랜은 단일 표시줄로 제한되며 업그레이드하지 않으면 헬로 바 브랜딩이 유지됩니다. 유료 플랜은 연간 청구 기준 월 29달러부터 시작합니다. 옵틴몬스터(OptinMonster)에는 무료 등급이 있지만 캠페인 유형과 트래픽 제한은 월 7달러에서 49달러의 유료 플랜에 따라 확장됩니다. 그리고 아이스그램(Icegram)의 프리미엄 플랜은 연간 129달러부터 시작합니다. 

또한 플러그인은 연결자 역할만 하고 회사의 클라우드 대시보드에서 캠페인을 편집하므로, 이러한 플러그인 중 일부는 해당 서비스의 자체 계정을 요구하기도 합니다. 본인의 사이트에서만 작업하는 것을 선호한다면 알아두는 것이 좋습니다.

옵션 2: 무료 대화형 배너 위젯 추가하기 (권장)

카운트다운, 쿠폰 코드 또는 이메일 필드가 있는 배너를 원하지만 이를 위해 프리미엄 플러그인에 비용을 지불하고 싶지 않다면, 워드프레스용 무료 배너 위젯이 필요를 충족해 줄 것입니다. 시각적 빌더에서 배너를 구성하고 임베드 코드를 복사하여 구텐베르크의 ‘사용자 정의 HTML’ 블록에 붙여넣기만 하면 됩니다.

Jform 배너 위젯은 구텐베르크 블록이 처리할 수 없는 요소를 관리합니다. 단색, 그라데이션, 이미지 또는 YouTube나 Vimeo 동영상을 배경으로 사용할 수 있으며, CTA 버튼, 텍스트 링크, 쿠폰 코드, 카운트다운 타이머 또는 이메일 수집 양식을 추가할 수 있습니다. 원하는 경우 배너 전체를 클릭할 수 있도록 만들 수도 있습니다.

위젯을 사용하여 워드프레스에 배너를 추가하는 방법은 다음과 같습니다.

  1. Jform 워크스페이스 페이지에서 **만들기**를 클릭하고 **웹사이트 위젯**을 선택한 다음 “배너”를 검색하고 **위젯 사용**을 클릭합니다.
  2. Jform 웹사이트 위젯 디렉토리의 배너 검색 결과
  1. 배너 스타일을 선택하고 카운트다운, 쿠폰, 가입 양식, 버튼 등 캠페인에 필요한 요소를 추가합니다.
  2. 사용자 정의 캠페인 콘텐츠 및 설정이 있는 배너 위젯 편집기
  1. 배경, 색상 및 레이아웃을 설정하고, 가로 또는 세로 보기를 선택하고, 너비, 여백 및 모서리 반경을 조정하고, 배너를 모든 장치에 표시할지 아니면 데스크톱 또는 모바일에만 표시할지 결정합니다.
  2. 여행 프로모션 배너의 모양을 사용자 정의하기 위한 스타일 설정
  1. **게시**를 클릭한 다음 **임베드** 섹션에서 **코드 복사**를 클릭합니다. **플랫폼** 메뉴에는 워드프레스 전용 임베딩 지침도 있습니다.
  2. 복사할 준비가 된 코드가 있는 Jform 배너 임베드 섹션
  1. 구텐베르크 편집기에서 **+** 아이콘을 클릭하여 블록을 추가하고 **사용자 정의 HTML**을 검색하여 선택합니다. **HTML 편집**을 클릭하고 임베드 코드를 붙여넣은 다음 **업데이트** 및 **저장**을 클릭합니다.
  2. 워드프레스 구텐베르크 편집기에서 임베드된 배너를 표시하는 '사용자 정의 HTML' 블록

나중에 배너를 편집할 때는 기능을 잠금 해제하기 위해 요금제를 업그레이드할 필요 없이 위젯을 열기만 하면 됩니다. 더 세밀하게 제어하고 싶다면 사용자 정의 CSS도 사용할 수 있으며, Jform은 해당 선택기(selectors)를 위젯에만 적용하여 스타일링이 페이지의 다른 요소에 영향을 미치지 않도록 합니다.

스마트 서버리스 위젯으로 워드프레스 사이트 강화하기

배너는 별도의 프리미엄 플러그인 구독 없이 워드프레스 사이트에 추가할 수 있는 여러 요소 중 하나입니다. Jform의 무료 웹사이트 위젯 디렉토리에는 다음을 포함하여 150개 이상의 옵션이 있습니다.

  • 워드프레스 알림 표시줄 대안으로 작동하여 플러그인을 완전히 건너뛰고 페이지 상단의 얇은 알림 띠 역할을 하는 공지 표시줄 위젯
  • 일반적으로 프리미엄 전환 플러그인에 포함되어 제공되는 이탈 의도 및 가입 제안을 위한 팝업 위젯
  • 페이지 빌더 애드온 없이 플랜을 시각적으로 구성하는 가격표 위젯

각 위젯은 배너 위젯과 동일한 방식으로 ‘사용자 정의 HTML’ 블록을 통해 임베드되므로, 페이지에 요소를 하나 더 추가할 때마다 플러그인, 계정 및 연간 갱신 비용을 추가할 필요가 없습니다.

크리에이터, 퍼블리셔 또는 우커머스(WooCommerce) 상인으로서 여러분의 예산은 임시 배너를 표시하기 위한 연회비가 아니라 비즈니스를 성장시키고 홍보할 가치가 있는 콘텐츠를 만드는 데 사용되어야 합니다. Jform 배너 위젯은 번거로움 없이 카운트다운, 쿠폰 및 가입 필드를 제공하며, 프로모션이나 이벤트를 알리는 대신 정보를 수집해야 할 때는 워드프레스 양식도 동일한 방식으로 작동합니다.

이 글은 기본적인 구텐베르크 블록에 의존하거나 무거운 플러그인을 설치하지 않고 카운트다운이나 리드 수집 양식이 포함된 풍부하고 대화형인 프로모션 배너를 임베드하려는 워드프레스 사이트 소유자, 블로거 및 우커머스(WooCommerce) 상인을 위한 것입니다.

코멘트 보내기:

Jform Avatar
이 사이트는 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

Podo Comment 첫 번째 댓글을 남겨주세요.