Popper.js를 사용하여 Divi에서 동적 팝오버(플로팅 메뉴)를 빌드하는 방법

popper.js 라는 라이브러리에 대해 들어본 적이 있습니까? 이 라이브러리를 사용하면 JavaScript에서 팝오버를 만들 수 있습니다. 팝오버를 사용하는 것은 특히 특정 요소(버튼, 링크 등)에 대한 추가 정보를 표시하는 데 도움이 되기 때문에 요즘 매우 일반적입니다. 동적 팝오버를 고려하는 이유는 주로 화면의 피사체 위치와 관련하여 올바른 위치에 표시되도록 하기 위함입니다. 구체적으로, 피사체가 화면 하단인 경우 상단에 팝오버가 표시됩니다. 화면 상단에 있으면 팝오버가 하단 등에 표시됩니다.

이 튜토리얼에서는 버튼을 클릭할 때 동적 팝오버(플로팅 메뉴)를 생성하기 위해 Divi에서 Popper.js의 기능을 활용할 것입니다. 이렇게 하면 누구나 Divi 요소를 사용하여 팝오버를 만들어 버튼 클릭 후 콘텐츠를 표시할 수 있습니다. 또한 사용자가 상호 작용할 때 가장 이상적인 가시성을 유지하기 위해 위치를 조정하므로 팝오버가 동적인지 확인합니다. 당신의 페이지.

다음은 이러한 팝오버의 위치를 보여주는 그림입니다.

이를 달성하려면 사용자 정의 CSS와 JavaScript가 필요합니다. 그러나 우리는 여전히 Divi Builder의 강력한 디자인 기능에 의존하여 모든 Divi 요소를 사용하여 팝오버를 생성할 수 있습니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

시작합시다!

플로팅 메뉴 미리보기

다음은 이 튜토리얼에서 디자인할 플로팅 메뉴에 대한 간략한 설명입니다. 사용자가 브라우저 크기를 스크롤하거나 변경함에 따라 플로팅 메뉴의 위치가 어떻게 동적으로 변경되는지 확인할 수 있습니다. 또한 해당 참조(또는 이 경우 버튼)를 동적으로 가리키도록 배치된 작은 화살표도 놓치지 마십시오.

Divi에서 Popper.js로 팝오버 만들기

이전에 말했듯이 Divi에서 popper.js를 사용하여 팝오버 주제(버튼)를 클릭할 때 표시되는 동적으로 배치된 팝오버를 만들 것입니다. Divi를 사용하면 플로팅 메뉴와 버튼을 쉽게 만들 수 있습니다. 그런 다음 나중에 두 작업을 조화롭게 만드는 데 필요한 코드를 추가할 것입니다.

그 부분

따라서 기본적으로 준비된 일반 섹션에 고객 ID를 추가하는 것으로 시작하겠습니다. 섹션 설정을 열고 다음 ID를 추가합니다.

• CSS ID: 팝퍼 섹션

Divi Row로 Popper Popover 만들기

다음으로 섹션에 1열 행을 추가합니다. 이 행은 버튼을 클릭할 때 팝업되는 Popper 팝오버 요소가 됩니다.

행 설정을 열고 다음과 같이 스타일을 업데이트합니다.

• 배경색: #333333

• 거터 폭: 2
• 폭: 100%
• 최대 너비: 500px
• 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px
• 둥근 모서리: 10px

이 행은 팝퍼 팝오버 요소가 되므로 코드에서 선택기로 사용할 CSS ID를 추가해야 합니다. 또한 오버플로에서 가시성이 유지되는지 확인해야 합니다(둥근 모서리로 숨겨져 있음).

고급 탭으로 이동하여 다음을 업데이트합니다.

• CSS ID: 팝업 팝업
• 수평 오버플로: 표시
• 수직 오버플로: 표시

Popover Row에 콘텐츠를 추가하자

원하는 내용으로 플로팅 메뉴를 채우기 위해 원하는 모듈을 행에 추가할 수 있습니다. 이 예에서는 팝오버 내에 나타나는 사용자 정의 메뉴 역할을 하는 행에 몇 개의 버튼을 추가할 것입니다.

시작하려면 행의 열에 버튼 모듈을 추가하십시오.

이제 버튼에 스타일을 추가해 보겠습니다. 다음과 같이 버튼 설정을 업데이트합니다.

• 버튼 정렬: 중앙
• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 테두리 너비: 1px
• 버튼 테두리 색상: #555555
• 버튼 테두리 반경: 10px
• 버튼 아이콘: 스크린샷 참조
• 여백: 위쪽 20px, 아래쪽 20px, 왼쪽 20px, 오른쪽 20px
• 패딩: 위쪽 0.5em, 아래쪽 0.5em, 왼쪽 2em, 오른쪽 2em

중요: 행의 가장자리(절대 위치 포함)에 배치해야 하는 화살표(분할선 사용)를 추가하기 때문에 행 간격을 사용하는 대신 모듈에서 여백을 사용하여 간격을 만듭니다. 행 또는 열 패딩은 화살표를 가장자리에서 밀어냅니다.

이제 다음 사용자 정의 CSS 스니펫을 기본 요소에 추가하여 버튼이 열/행의 전체 너비에 걸쳐 있도록 해야 합니다.

display: block !important

이제 버튼을 두 번(또는 그 이상) 복제하여 메뉴 팝오버에 버튼을 몇 개 더 추가할 수 있습니다.

팝오버 화살표 만들기

Popper.js는 팝오버와 함께 화살표 위치 지정을 지원합니다. 화살표를 작성하려면 행의 마지막 버튼 아래에 새 구분선을 추가하십시오.

디바이더 설정에서 디바이더를 표시하지 않으려면 선택하세요. 그런 다음 고급 탭에서 다음 CSS ID를 추가합니다.

• CSS ID: 팝업 화살표

나중에 사용자 정의 외부 CSS를 사용하여 화살표의 스타일을 지정하고 위치를 지정합니다.

팝오버 버튼(또는 참조) 만들기

팝퍼 팝오버의 두 가지 핵심 요소는 팝오버 요소(또는 팝퍼)와 팝오버가 연결되는 주제를 포함합니다. 모든 Divi 요소를 팝오버를 생성하는 참조로 사용할 수 있지만 이 예에서는 버튼을 사용합니다.

Popper 주제 생성 : 버튼

버튼을 만들기 전에 팝오버 행 아래에 새로운 1열 행을 추가해야 합니다.

그런 다음 행에 새 버튼 모듈을 추가합니다.

다음과 같이 몇 가지 기본 스타일로 버튼 설정을 업데이트합니다.

• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #a043e8
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 10px

그런 다음 나중에 버튼을 대상으로 지정하고 팝오버 참조로 사용할 수 있도록 필요한 CSS ID를 추가합니다.

• CSS ID: 팝업 버튼

코드를 추가하자

이제 팝오버와 버튼이 완료되었으므로 마법을 일으키는 코드를 추가할 준비가 되었습니다.

이렇게 하려면 두 번째 행의 참조 버튼 모듈 아래에 코드 모듈을 추가합니다.

코드가 작동하려면 페이지 하단에 있는 것이 중요합니다.

먼저 CSS를 추가하겠습니다.

코드 내용 상자에서 CSS를 HTML로 래핑하는 데 필요한 스타일 태그를 추가합니다. 그런 다음 style 태그 사이에 다음 CSS를 복사하여 붙여넣습니다.

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

다음으로 CDN(https://unpkg.com/@popperjs/core@2)에서 Popper.js를 가져오는 스크립트를 추가하여 popper.js 라이브러리에 액세스해야 합니다. 끝 스타일 태그 아래에 다음 스크립트를 코드 상자에 붙여넣습니다.

라이브러리를 가져오려면 스크립트 태그 내에서 다음 src를 사용하십시오.

src="https://unpkg.com/@popperjs/core@2"

다음과 같이 표시되어야 합니다.

이제 Popper.js를 사용할 코드를 추가하기 전에 Popper.js를 가져올 것입니다. 따라서 Popper.js를 가리키는 스크립트 다음에 필요한 스크립트 태그를 추가하여 추가해야 하는 Javascript를 래핑합니다. 그런 다음 script 태그 사이에 다음 Javascript를 붙여넣습니다.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

그게 다야! 우리는 모두 끝났습니다. 이제 최종 결과를 확인해보자.

최종 결과 미리보기

이 튜토리얼의 결과를 보려면 팝업 팝오버의 위치 지정 마법을 테스트하기 위해 스크롤 공간을 만들어야 합니다.

이렇게 하려면 섹션 설정을 열고 다음과 같이 여백을 추가합니다.

• 여백: 80vh 상단, 80vh 하단

기능은 다음과 같습니다.

사용자가 브라우저 크기를 스크롤하거나 변경함에 따라 팝오버(및 화살표)의 위치가 어떻게 동적으로 변경되는지 확인하십시오.

요약

Divi에서 popper.js를 사용하여 팝오버를 생성하려면 상당한 양의 Javascript에 의존해야 하지만 결과는 그만한 가치가 있습니다. 팝오버의 동적 위치는 모든 웹사이트에 도움이 되는 훌륭한 UI 구성 요소입니다. 그것에 대해 어떻게 생각하세요? 이미 시도 했습니까? 알려주십시오.