WordPress에서 슬라이더 효과로 전후 이미지를 표시하는 방법

귀하가 피트니스 블로거이고 신체 변화의 전후 이미지를 공유하여 청중에게 영감을 주고 싶다고 가정해 보겠습니다. 이미지를 나란히 배치하는 것보다 전후 이미지 슬라이더를 사용하여 차이를 표시할 수 있다면 오히려 멋질 것입니다.

기다리다! 전후 이미지 슬라이더 란 무엇입니까?

하나의 이미지를 다른 이미지 위에 쌓고 대화형 슬라이더를 사용하여 이미지를 표시하는 이미지 슬라이더입니다. 슬라이더가 수평으로 이동하면 슬라이더가 맨 오른쪽으로 이동하면 첫 번째 이미지가 표시되고 왼쪽으로 이동하면 두 번째 이미지가 표시됩니다.

이러한 슬라이더는 두 개의 유사한 이미지를 비교하는 데 유용합니다. 따라서 사진 작가, 미용사, 디자이너, 의사 및 치과 의사와 같은 많은 전문가에게 유용할 수 있습니다.

WordPress 사용자이고 웹 사이트에서 어떻게 사용할 수 있는지 궁금하다면 올바른 위치에 있습니다. 이 기사에서는 웹 사이트에서 슬라이더 효과를 사용하여 전후 이미지를 추가하는 방법을 공유합니다.

더 이상 고민하지 않고 시작하겠습니다.

YouTube 채널 구독

비포 애프터 이미지 슬라이더를 추가하는 방법

웹 페이지에 전후 이미지 슬라이더를 추가할 수 있는 많은 무료 및 프리미엄 플러그인이 있습니다.

그러나 이 기사에서는 Twenty20 Image Before After 플러그인을 사용할 것입니다. 나중에 인기 있는 무료 및 프리미엄 대안도 언급하겠습니다.

플러그인 전후에 Twenty20 이미지 설치

Twenty20은 무료 플러그인이며 WordPress 플러그인 저장소에서 사용할 수 있습니다. 게시물, 페이지 및 사이드바에 전후 이미지 슬라이더를 추가할 수 있습니다. 또한 Elementor 및 WPBakery와 같은 인기 있는 페이지 빌더를 지원합니다.

이 플러그인을 설치하려면 플러그인 -> 새로 추가로 이동하여 Twenty20 Image Before-After를 검색합니다. 플러그인을 찾으면 설치하고 활성화하기만 하면 됩니다.

게시물 또는 페이지에 전후 이미지 추가

Twenty20 플러그인은 설정 페이지와 함께 제공되지 않습니다. 따라서 플러그인을 설치한 후 더러운 작업을 시작할 수 있습니다.

이제 WordPress 5.0 업데이트 후 Classic 또는 Gutenberg 편집기를 사용 중일 수 있습니다. 이 플러그인이 두 편집기에서 어떻게 작동하는지 보여드리겠습니다.

구텐베르크 편집자

Twenty20 플러그인에는 아직 블록이 없지만, 단축 코드 기능을 사용하고 단축 코드 블록에 코드를 추가할 수 있습니다.

단축 코드의 예를 살펴보겠습니다.

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Before” after=”After” hover=”false”]

각 매개변수를 설명하겠습니다.

• img1 – 여기에 첫 번째 이미지의 이미지 ID(이미지 URL 아님)를 추가해야 합니다.
• img2 – 두 번째 이미지의 ID(이미지 URL 아님)를 추가합니다.
• 방향 – 슬라이더를 수평 방향으로 할지 수직 방향으로 할지 결정할 수 있습니다. 따라서 값은 수평 또는 수직이 됩니다.
• offset – 오프셋 값은 0.1에서 1 사이여야 합니다.
• align – 전후 이미지의 정렬을 결정합니다. 값은 없음, 왼쪽 또는 오른쪽이 될 수 있습니다.
• 너비 – 이미지의 너비는 백분율 또는 픽셀 단위일 수 있습니다.
• before – 여기에 before 이미지의 캡션을 추가할 수 있습니다.
• After – After 이미지의 캡션을 추가합니다.
• hover – 이 매개변수는 마우스 이동 시 슬라이더를 이동할지 여부를 결정합니다. true 또는 false 값을 허용합니다.

이미지의 ID를 찾는 방법을 모르십니까? WordPress 대시보드의 왼쪽 사이드바에서 미디어 -> 라이브러리로 이동하여 이미지를 클릭합니다. 이제 웹 브라우저의 주소 표시줄을 확인하십시오.

위의 예에서 URL에서 item = 50을 볼 수 있습니다. 따라서 50은 특정 이미지의 ID입니다.

괜찮아! 이제 Twenty20 단축 코드를 사용하는 방법을 알았으므로 전후 이미지 슬라이더를 추가하려는 게시물이나 페이지를 생성(또는 편집)합니다. 그런 다음 새 블록을 추가하고 단축 코드 위젯을 검색합니다.

위의 예에서 사용한 코드를 복사하여 단축 코드 상자에 붙여넣고 요구 사항에 따라 조정합니다.

그게 다야 이제 게시물(또는 페이지)을 미리 보고 제대로 작동하는지 확인할 수 있습니다.

클래식 편집기

클래식 편집기를 사용하는 경우 플러그인을 설치한 후 새 버튼 Add Twenty 20이 표시됩니다. 해당 버튼을 클릭하면 두 개의 이미지를 선택하라는 팝업 창이 열립니다.

두 개의 이미지를 선택하고 삽입을 클릭하면 단축 코드 생성에 대한 세부 정보를 묻는 새 창이 열립니다.

설정이 완료되면 단축 코드 삽입 버튼을 클릭할 수 있습니다.

나중에 이 단축 코드를 변경할 수도 있습니다. 구텐베르크 편집기 섹션의 예를 따르기만 하면 됩니다.

사이드바에 전후 이미지 추가

Twenty20 플러그인을 사용하면 웹사이트 사이드바에 비포 애프터 이미지를 추가할 수도 있습니다. 그것은 당신을 위해 멋진 작업을 수행하는 위젯과 함께 제공됩니다.

모양 -> 위젯으로 이동하십시오. 이제 Twenty20 위젯을 찾아 사이드바 영역으로 끕니다. 이 위젯의 ​​설정은 이전 섹션과 유사합니다. 단지 전후 이미지를 선택(또는 업로드)하기 위한 두 개의 추가 버튼이 있습니다.

완료되면 위젯 설정을 저장한 다음 웹사이트를 확인합니다. 간단하지 않습니까?

일부 대체 플러그인

간단하고 무료인 Twenty20 플러그인을 좋아하지만 다른 것을 선호할 수도 있습니다. 따라서 이 플러그인에 대한 몇 가지 무료 및 프리미엄 대안을 공유하기로 결정했습니다.

1. Divi의 비포 + 애프터 이미지

Divi 사용자라면 Before + After Images for Divi 플러그인이 가장 적합합니다. 가볍고 반응이 빠르며 지연 로딩을 지원합니다. 웹사이트에 전후 이미지를 추가하는 데 도움이 되는 새 모듈을 만듭니다. 이 무료 플러그인은 Divi Builder 플러그인, Divi 테마 및 Elegant Themes의 기타 테마와 함께 작동합니다.

가격 – 무료 | 추가 정보

2. 다목적 비포 애프터 슬라이더

다목적 Before After 슬라이더는 터치와 스와이프가 가능한 프리미엄 플러그인입니다. 필요에 따라 각 이미지 슬라이더를 조정할 수 있고 단축 코드를 사용할 필요가 없는 사용하기 쉬운 관리자 패널이 함께 제공됩니다. 비포 애프터 이미지를 무제한으로 생성하여 게시물, 페이지 및 사이드바에 사용할 수 있습니다.

가격 – $18 | 추가 정보

3. 스마트 비포 애프터 뷰어

Smart Before After Viewer는 반응이 빠르고 터치 친화적인 프리미엄 플러그인입니다. 그것은 당신이 전후 이미지에 사용자 정의 레이블 텍스트를 추가할 수 있습니다. 번거로움 없이 라벨의 위치와 색상을 변경할 수 있습니다. 이 플러그인을 사용하면 한 페이지에 여러 이미지를 추가할 수도 있습니다.

가격 – $18 | 추가 정보

미주

전후 이미지 슬라이더는 두 개의 동일한 이미지 간의 차이점을 표시하는 좋은 방법입니다. 그리고 이 튜토리얼에 따라 WordPress 사이트에서 이러한 슬라이더를 사용할 수 있습니다.

이 기사에서 언급한 플러그인을 사용해 본 적이 있습니까? 또는 이를 달성하는 데 적합한 특정 플러그인을 제안하시겠습니까? 의견 섹션에서 알려주십시오.

__/Shutterstock.com을 통한 추천 이미지