요소와 함께 WordPress에 Lightbox를 추가하는 방법

LightBox 기능을 WordPress 웹 사이트에 통합하면 방문자가 시각적 컨텐츠에 참여하는 방식을 변환 할 수 있습니다. 이 우아한 솔루션은 고품질 이미지를 보여주고, 매혹적인 갤러리를 만들고, 사용자 경험을 방해하지 않고 세부 제품 정보를 제시하는 데 적합합니다. 실제로 사용자 경험을 새로운 높이로 향상시킬 수 있습니다.

포트폴리오를 표시하려는 사진 작가이든 제품 세부 정보를 전시하려는 전자 상거래 사이트 소유자이든 Lightbox 기능은 훌륭한 옵션이 될 수 있습니다. 귀하의 사이트가 Elementor와 함께 구축 된 경우 Lightbox를 추가하는 것은 한 걸음 떨어져 있습니다.

이 기사에서는 요소와 함께 WordPress에서 LightBox를 추가하는 방법에 대한 포괄적 인 단계별 안내서를 제공합니다. 이 강력한 도구를 최대한 활용하려면 끝까지 읽으십시오!

WordPress의 Lightbox 란 무엇입니까?

라이트 박스는 팝업 오버레이입니다. 웹 사이트에 이미지, 비디오 및 기타 미디어 영상을 더 크고 집중적으로 볼 수 있습니다. 사용자가 관련 버튼, 링크 또는 썸네일을 클릭 할 때마다 LightBox 기능은 첨부 된 비주얼을 더 큰 뷰로 보여 주면서 배경을 어둡게합니다.

내용을 강조하는 데 도움이됩니다. 이 기능은 갤러리, 포트폴리오 및 제품 디스플레이에 이상적이며 자세히 살펴볼 수 있습니다. Lightbox 기능을 통합하면 시각적 콘텐츠를 매력적으로 만듭니다. 또한 청중이 오랫동안 웹 사이트를 유지하게합니다.

웹 사이트에 Lightbox를 추가 할 때의 이점

튜토리얼로 뛰어 들기 전에 아래 논의 된 지점에서 LightBox 기능을 웹 사이트에 추가하는 주요 이점을 간략하게 살펴보십시오.

• 향상된 사용자 경험

라이트 박스는 웹 사이트 탐색 세션을 방해하지 않고 사용자에게 컨텐츠를 보여줍니다. 방문객은 다른 웹 사이트 요소 위에 나타나기 때문에 추천 콘텐츠에 집중할 수 있습니다. 사용자 경험을 향상시키는 비밀을 탐구하십시오.

• 개선 된 시각적 매력

라이트 박스는 웹 사이트를 사용자에게 더 매력적으로 보이게하는 부드러운 애니메이션과 현대적인 레이아웃을 사용합니다. 이것은 웹 사이트를보다 전문적으로 만듭니다.

• 이미지 및 비디오에 대한 쉬운 탐색

Lightboxes를 사용하면 사용자가 원활한 탐색과 간절한 전환으로 단일 페이지에서 멀티미디어 항목을 볼 수 있습니다. 미디어 파일로 고통 받고 있다면 HappyMedia를 사용하여 미디어 라이브러리 및 파일을 관리하십시오.

• 참여와 상호 작용을 증가시킵니다

Lightboxes는 사용자가 시각적 컨텐츠를 더 잘 볼 수 있도록 도와 주므로 웹 사이트를 더 많이 탐색 할 수 있습니다. 그들의 세션이 증가하면 긍정적 인 신호를 검색 엔진에 전달할 수 있습니다.

• 더 나은 콘텐츠 프레젠테이션을 허용합니다

Lightboxes는 웹 페이지를 바쁘게 보이게하지 않고 콘텐츠를 더 잘 표시하는 데 도움이됩니다. 제품 사진과 함께 차트 및 이벤트 컬렉션과 같은 컨텐츠를 제시하는 데 좋습니다.

요소와 함께 WordPress에 Lightbox를 추가하는 방법

우리는 이제 튜토리얼 부분에 있습니다. 이 섹션에서는 요소와 함께 WordPress에서 LightBox를 추가하는 방법을 보여줍니다. 자습서를 시작하려면 다음 플러그인이 사이트에 설치되어 활성화되어야합니다.

• 요소
• Happyaddons

HappyAddons는 Elementor 플러그인의 두드러진 부가 제품입니다. 130 개 이상의 추가 위젯과 수십 가지 기능이있어 웹 사이트를 더욱 아름답게하는 데 도움이됩니다. 그들이 사이트에 준비되면 아래 설명 된 자습서를 시작하십시오.

단계 01 : Lightbox 위젯을 캔버스로 끌어다 놓습니다.

Elementor Canvas와 함께 게시물이나 페이지를 엽니 다. 요소 패널에서 Lightbox 위젯을 찾으십시오. 캔버스로 드래그하고 떨어 뜨립니다.

기본적으로 Lightbox 위젯은 캔버스에 버튼으로 추가됩니다.

단계 02 : 라이트 박스 유형을 선택하십시오

위젯에는 버튼 과 이미지 의 두 가지 Lightbox 유형이 제공됩니다. 위젯에 원하는 라이트 박스 유형을 선택하십시오. 이 튜토리얼의 경우 버튼 유형으로 진행됩니다.

단계 03 : 표시 할 콘텐츠 유형을 선택하십시오.

Lightbox 위젯을 사용하면 이미지 또는 비디오 컨텐츠를 표시 할 수 있습니다. 아래 표시된 옵션에서 표시 할 콘텐츠 유형을 선택하십시오.

비디오 옵션이 선택되면 YouTube, Vimeo 및 Self Hosted 의 세 가지 소스에서 비디오 컨텐츠를 추가 할 수 있습니다.

YouTube 또는 Vimeo 소스를 선택한 경우 아래에 첨부 된 스크린 샷에 표시된 각 상자에 원하는 비디오 링크를 추가 할 수 있습니다.

Lightbox의 이미지 유형을 활성화하고 이미지를 업로드 할 수도 있습니다.

단계 04 : 라이트 박스 버튼에 사본을 추가합니다

버튼을 실제로 의미있게 만들고 사용자가 클릭 할 수있는 적절한 사본을 작성하십시오.

단계 05 : Lightbox 위젯의 설정을 구성합니다

위의 것 외에도 다른 옵션을 사용하여 위젯을 최적화하십시오. 예를 들어, 중앙에서 또는 아름답게 보이는 곳에 정렬하십시오.

단계 06 : Lightbox 위젯의 양식화

이제 스타일 탭 에 오십시오. 이 탭에서 위젯의 패딩, 테두리 유형, 테두리 반경, 상자 그림자, 타이포그래피, 색상 및 배경색을 사용자 정의 할 수 있습니다. 필요에 따라 직접 수행하십시오.

단계 7 : 라이트 박스를 미리 봅니다

버튼을 클릭합니다. 라이트 박스가 아래에 첨부 된 비디오 클립처럼 보이면 괜찮습니다. 우리의 Lightbox가 절대적으로 잘 작동한다는 것을 알 수 있습니다.

08 단계 : LightBox 위젯 모바일 응답을 만듭니다

요소 패널의 바닥 글에서 응답 모드 아이콘을 클릭하십시오. 이것은 다른 화면 크기 사이를 전환 할 수있는 옵션으로 캔버스의 상단 막대가 나타납니다.

다른 화면 크기 사이에서 캔버스를 전환하여 위젯이 모든 장치에서 좋아 보이는지 확인하십시오. 특정 화면 크기에서는 좋지 않은 경우 화면 크기에 대해서만 사용자 정의 할 수 있습니다.

따라서 Elementor 플러그인을 사용하여 WordPress에서 LightBox를 만들 수 있습니다.

WordPress에서 Lightbox를 만드는 데 고려해야 할 사항

이 튜토리얼을 즐겼기를 바랍니다. 이제이 섹션에서는 WordPress에서 LightBox를 만들 때 고려해야 할 사항을 다루어 최상의 결과를 얻을 수 있습니다.

• 라이트 박스의 목적

이미지, 비디오, 양식 또는 갤러리 표시와 같은 Lightbox에서 필요한 Lightbox 기능을 결정하십시오. 웹 사이트 목표를 달성하고 방문자의 요구를 충족시키는 데 도움이되는 콘텐츠를 계획하십시오.

• 이미지를 압축합니다

무거운 이미지를 추가하면 웹 속도가 느려질 수 있습니다. 따라서 Lightbox에 추가하기 전에 모든 이미지를 압축하십시오. HappyMeida를 사용하여 미디어 파일을 압축하십시오.

• Alter Text를 추가하십시오

이미지에 대체 텍스트를 추가하면 Lightbox 이미지의 SEO 점수가 증가 할 수 있습니다. 또한 Lightbox 버튼 또는 링크에 매력적인 사본을 추가하십시오.

• 기능을 종료합니다

출구 기능은 사용자 경험에 중요합니다. 눈에 보이는 버튼을 보여주고 닫아서 Lightbox를 종료 할 수있는 쉬운 방법을 사용자에게 제공하십시오.

• 테스트 및 문제 해결

다양한 인터넷 브라우저, 장치 및 디스플레이 크기에서 Lightbox가 어떻게 수행되는지 확인하여 모든 플랫폼에서 작동하는지 확인하십시오. 테스트와 실험없이 게시하지 마십시오.

결론

라이트 박스는 메인 페이지 위에 오버레이에 미디어를 표시하여 사용자 참여를 향상시킵니다. 이를 통해 방문자는 탐색하지 않고 콘텐츠에 집중할 수 있습니다. Lightboxes를 만들기 위해 WordPress.org에 사용할 수있는 수많은 플러그인이 있지만 Elementor는 가장 간단하고 가장 사용자 친화적 인 옵션 중 하나로 두드러집니다. Page Builders의 팬이라면 Elementor는 확실히 고려할 가치가 있습니다.

Lightbox 위젯 외에도 Happyaddons 플러그인이 제공하는 다양한 기능과 위젯을 탐색 할 수도 있습니다. 이 강력한 도구를 사용하면 웹 사이트에 더 많은 기능을 추가하여보다 역동적이고 대화식으로 만들 수 있습니다.

이 튜토리얼이 도움이된다면, 우리는 당신의 의견을 듣고 싶습니다! 아래의 의견 상자에서 귀하의 생각이나 질문을 자유롭게 공유하십시오.