워드프레스 엘리멘터 페이지 빌더 팝업 만들기

워드프레스 정보를 제공하는 블로그 Avada 2022. 4. 11. 00:38 • 댓글: 개

워드프레스에는 다양한 팝업 플러그인이 있습니다. Popup Maker와 같은 무료 플러그인을 사용하면 버튼 클릭 시 팝업이 표시되도록 할 수 있습니다. 이 글에서는 엘리멘터 페이지 빌더의 팝업 기능에 대해 살펴보겠습니다. 엘리멘터를 사용하는 경우 팝업 플러그인 없이 다양한 기능의 팝업을 만들 수 있습니다.

참고로 순수 CSS로도 팝업(라이트박스)을 구현할 수 있습니다. CSS를 사용할 경우 사이트 속도에 영향을 미치지 않으므로 좋은 방법일 수 있습니다. 또한, 드래그 앤 드롭 방식으로 쉽게 팝업이나 플로팅 요소(퀵메뉴)를 만들고 싶은 경우 Brave Popup 플러그인을 사용할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 팝업 만들기

Elementor 페이지 빌더에서 버튼 클릭 시 팝업이 표시되도록 하는 방법에 대해 살펴보겠습니다. 페이지 로드, 페이지 스크롤 시, 특정 CSS 선택자에 도달할 때 또는 페이지를 떠날 때 팝업을 표시하는 방법은 아래의 "페이지 로드 또는 페이지 스크롤 시 팝업 표시하기" 섹션을 참고해보세요.

기본적인 개념은 팝업 템플릿을 만들어서 버튼 클릭 시 팝업 템플릿을 팝업으로 표시하는 것입니다. 이 방법을 이용하려면 엘리멘터 프로가 있어야 합니다.

1. 먼저 팝업 템플릿을 만듭니다. 알림판 > 템플릿에서 새로 추가를 클릭합니다.

2. 템플릿 유형 선택 팝업이 표시되면 작업할 템플릿 유형 선택 필드에서 Popup을 선택하고 템플릿 이름 필드에 적절한 이름을 지정합니다.

3. 라이브러리의 팝업(Popups) 섹션에서 적절한 팝업을 선택합니다.

4. 마음에 들면 오른쪽 상단의 삽입 (Insert) 버튼을 클릭하여 로드합니다.

5. 로드한 팝업을 적절히 수정합니다. 수정은 엘리멘터를 사용하여 이루어집니다.

6. 수정이 완료되었다면 왼쪽 하단의 발행 (Publish) 버튼을 클릭하여 발행합니다.

7. Publish Settings (발행 설정) 팝업 창이 표시되면 하단의 Save & Close를 클릭하여 저장합니다. (자세한 팝업 템플릿 조건 지정 방법은 아래의 "페이지 로드 또는 페이지 스크롤 시 팝업 표시하기" 부분을 참고해보세요.)

8. 이제 팝업을 표시할 페이나 템플릿(예: 헤더 또는 푸터 템플릿)에서 버튼을 추가합니다. 엘리먼츠에서 '버튼'을 검색하여 '버튼' 요소를 원하는 곳으로 끌어다 놓도록 합니다.

9. 버튼을 삽입한 후에 버튼 편집 패널에서 링크 부분의 Dynamic 아이콘(아래에 표시됨)을 클릭합니다.

10. Actions > Popup을 선택합니다.

11. 그러면 아래와 같이 링크 섹션에 Popup이 지정됩니다. Popup 부분을 클릭합니다.

12. 팝업 템플릿을 선택합니다. 방금 전에 만들었던 팝업 템플릿을 선택하도록 합니다.

13. 페이지를 저장합니다. 이제 버튼을 클릭하면 팝업이 표시됩니다.

페이지 로드 또는 페이지 스크롤 시 팝업 표시하기

팝업 템플릿을 만든 다음 저장할 때 조건을 지정하여 팝업을 표시할 위치(예: 특정 페이지, 전체 사이트, 아카이브 페이지, 특정 카테고리 페이지, 상점 페이지 등)를 지정하고 팝업을 트리거할 조건(예: 페이지 로드, 페이지 스크롤, 특정 요소에 도달할 경우에 로드 등)을 지정할 수 있습니다.

아래 그림에서는 팝업이 전면 페이지(Front Page)에 표시하도록 설정하는 예를 보여줍니다.