Divi 플러그인 하이라이트: Divi Sensei Before After 슬라이더

전후 슬라이더는 방문자가 두 이미지를 비교할 수 있는 좋은 방법입니다. 이름에서 알 수 있듯이 체중 감량, 수정된 이미지, 장식된 방, 페인트칠한 자동차 등과 같이 무언가가 변경되기 전후의 이미지가 될 수 있습니다. 물론 이전보다 훨씬 더 유용합니다. 그리고 사진 후. 그래픽, 제품, 휴가지 등을 비교하는 데 사용할 수 있습니다.

이 기사에서는 Divi Builder의 전후 슬라이더 모듈인 Divi Sensei Before and After Slider를 살펴보고 이 모듈이 무엇을 할 수 있는지 확인하고 Divi에 이 타사 플러그인이 필요한지 결정하는 데 도움을 드립니다. 공구 상자.

Divi Sensei 슬라이더 모듈 전후

Divi Sensei Before and After 플러그인을 정상적으로 업로드하고 설치합니다. 세 가지는 통과할 설정이 없습니다. 플러그인을 업로드하고 활성화하면 Divi Builder에 Sensei Before and After Slider라는 새 모듈이 추가된 것을 볼 수 있습니다.

모듈은 왼쪽에 비포 이미지를, 오른쪽에 애프터 이미지를 표시합니다. 중앙에 슬라이더 막대가 표시되어 사용자가 한쪽에서 다른 쪽으로 잡아 밀 수 있습니다. 이미지 위로 마우스를 가져가면 레이블 전후가 표시되고 오버레이가 추가됩니다. 이러한 각 요소에 대한 디자인 제어 권한이 있습니다.

슬라이더의 기능과 옵션을 살펴보겠습니다. 이 예에서는 Unsplash.com의 이미지를 사용하고 있습니다.

콘텐츠 탭

콘텐츠 탭을 사용하면 비포 이미지, 애프터 이미지 및 레이블을 추가할 수 있습니다. 이 예에서는 동일한 이미지의 두 가지 다른 버전을 추가하여 전후 이미지를 생성했습니다. 이것은 보정된 사진의 결과를 표시하는 데 유용합니다. 옵션에는 표준 링크, 배경 및 관리자 레이블 설정도 포함됩니다.

또한 레이블 전후의 텍스트를 변경할 수 있는 필드를 제공합니다. 레이블을 표시하기 위해 이미지 위로 마우스를 가져갑니다. 기본적으로 마우스 오버 시에만 표시되지만 변경할 수 있습니다.

디자인 탭

디자인 탭에는 슬라이더, 레이블 및 오버레이에 대한 설정이 포함되어 있습니다. 크기 조정, 간격, 테두리, 상자 그림자, 필터, 변환 및 애니메이션에 대한 표준 설정도 포함됩니다.

슬라이더

슬라이더 설정을 사용하면 수평과 수직 사이에서 슬라이더 방향을 선택하고 시작 오프셋을 설정하여 슬라이더가 시작되는 이미지 위치를 결정하고 슬라이더, 핸들, 핸들 배경 및 핸들 아이콘의 색상을 변경할 수 있습니다. 위의 예에서 이러한 각 설정을 조정했습니다.

라벨

레이블의 경우 항상 표시하거나 호버링할 때만 표시하도록 하고 배경과 글꼴을 조정할 수 있습니다. 배경색에는 단색 및 불투명도 조정이 포함됩니다. 배경을 개별적으로 조정할 수 있지만 텍스트 색상을 개별적으로 조정할 수는 없습니다. 글꼴을 선택하고 크기, 스타일, 정렬, 선 높이를 변경하고 그림자를 추가하는 등의 작업을 수행할 수도 있습니다. line-height는 배경 크기를 설정합니다.

위의 예에서는 배경색과 글꼴 색상을 지정하고 글꼴 크기를 변경했으며 줄 높이 크기를 변경했습니다. 또한 사용자가 이미지 위로 마우스를 가져가지 않고도 볼 수 있도록 항상 표시되도록 설정했습니다.

위에 까는 것

오버레이는 기본적으로 활성화되어 있습니다. 비활성화하고 색상을 조정하고 불투명도를 조정할 수 있습니다. 기본 색상은 불투명도가 50%인 검정색입니다.

이 예에서 파란색을 선택하고 불투명도를 50%로 유지했습니다. 호버링하는 동안 이미지가 보이도록 하는 것이 가장 좋은 것 같습니다. 밝은 색상 또는 어두운 색상을 사용할지 여부와 설정하는 불투명도는 이미지의 색상과 오버레이 사용 방법에 따라 결정됩니다.

이 예에서는 흑백 색 구성표를 사용했습니다. 오버레이 및 레이블 텍스트는 흰색이고 슬라이더 요소는 검은색입니다. 나는 그들을 어둡게하기 위해 레이블 배경의 불투명도를 줄였습니다. 기본 크기로 두었습니다.

Divi Sensei 전후 슬라이더 예

슬라이더를 사용할 수 있는 방법과 Divi 레이아웃 내에서 슬라이더가 어떻게 보이는지에 대한 몇 가지 예를 살펴보겠습니다. 저는 Unsplash의 이미지와 Divi에 내장된 무료 Divi 레이아웃에서 사용할 수 있는 이미지를 사용하고 있습니다. 이동하면서 사용하고 있는 Divi 레이아웃을 식별하겠습니다.

그래픽 비교

이를 위해 Divi Video Game 레이아웃 팩의 디자인 요소를 사용했습니다. 오버레이를 비활성화하고 슬라이더 요소를 녹색으로 변경했으며 레이블이 항상 표시되도록 했습니다. 레이블의 배경은 파란색입니다. 글꼴 크기를 늘리고 색상을 변경하고 Rubik 글꼴 패밀리를 사용하고 글꼴 두께를 중간으로 만들고 모두 대문자로 만들었습니다. 이러한 게임 시스템을 소유하거나 플레이한 경험이 있고 이러한 합성 그래픽 비교가 존재할 수 없는 이유를 알고 있다면 감사합니다.

이것이 레이아웃 내에서 보이는 방식입니다. 두 개의 서로 다른 게임기의 그래픽에 대한 이 모형과 같은 비교를 수행하는 데 탁월합니다.

포트폴리오 전후 서비스

이 예는 리노베이션이 완료되기 전과 후에 방의 아이디어를 모방합니다. 두 이미지의 크기가 다른 경우 큰 이미지의 크기를 사용하고 작은 이미지는 간격을 표시합니다. 높이나 너비를 동일하게 배치하고 나머지는 빈 공간으로 채웁니다. 이 예에서 오른쪽 이미지는 왼쪽 이미지보다 짧습니다. 동일한 크기의 이미지가 더 잘 작동하지만 동일한 크기에 가까운 이미지에서도 여전히 잘 작동합니다.

홈 개선 레이아웃 팩에서 색상과 글꼴을 추가했습니다. 다음은 레이아웃의 일부 내에서 보이는 방법입니다.

오버레이를 사용하면 다음과 같습니다. 이전 이미지를 더 많이 보여주기 위해 슬라이더를 한쪽으로 옮겼습니다.

참고로 애프터 이미지를 더 많이 보여드리기 위해 손잡이를 이동한 이미지입니다.

제품 비교

이 예에서는 Tea Shop 레이아웃의 3개의 차 이미지를 3개의 DS B&A 슬라이더로 교체합니다. 버튼과 슬라이더 컨트롤에 레이아웃의 색상을 사용하고 있습니다. 중간 슬라이더는 수직으로 설정되어 있습니다. 오버레이는 불투명도가 감소된 레이아웃의 색상을 사용합니다.

레이아웃 내에서 보이는 방법은 다음과 같습니다. 이는 여러 제품, 여러 위치, 여러 색상의 시각적 세부 정보를 비교하는 데 탁월하며, 옵션이 있는 것과 없는 것으로 표시할 여러 옵션이 있는 제품 등입니다.

위치 비교

이 예에서는 슬라이더를 사용하여 두 위치를 비교하고 있습니다. 그것들은 비슷할 필요가 없습니다. 단지 이런저런 이유로 비교할 수 있는 것뿐입니다. 슬라이더와 레이블에 대한 레이아웃과 레이블에 대한 글꼴을 추가했습니다. 또한 나머지 이미지와 구별되도록 상자 그림자를 추가했습니다.

레이아웃의 색상을 사용하여 Siteseeing 레이아웃 팩 내에서 보이는 방법은 다음과 같습니다. 이것은 두 이미지가 같은 것 또는 유사한 것의 전후일 필요가 없다는 것을 보여주는 좋은 예입니다. 이것은 결혼식 장소, 휴양지 등을 보여주는 좋은 방법으로 구매자가 결혼식장, 휴가지 등을 선택하는 데 도움이 됩니다.

구입

Divi 마켓플레이스에서 Divi Sensei Before and After Slider를 구입할 수 있습니다. 비용은 무제한 웹사이트 사용과 1년 지원 및 업데이트에 대해 $5입니다. 이 가격에는 30일 환불 보장이 포함되어 있습니다.

마무리 생각

Divi Sensei Before and After Slider는 간단한 모듈입니다. 예를 들어 슬라이더에는 너비 컨트롤이 없고 레이블에는 테두리, 상자 그림자, 그라디언트 등이 포함되지 않지만 설정을 통해 추가한 모든 레이아웃의 스타일에 쉽게 맞출 수 있습니다. 가격과 기능면에서 설정 수준이 이해가 되며 원하는 디자인을 쉽게 얻을 수 있었습니다.

모든 컨트롤이 직관적이어서 지침이 필요하다는 생각은 한 번도 해본 적이 없습니다. 이미지에 다른 대체 태그를 사용하여 SEO를 개선할 수도 있습니다. Divi 웹사이트에서 사용할 전후 슬라이더에 관심이 있다면 Divi Sensei Before and After Slider를 고려해 볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi Sensei Before and After Slider를 사용해 보셨습니까? 아래 의견에서 그것에 대해 어떻게 생각하는지 알려주십시오.

Elvetica/Shutterstock.com을 통한 주요 이미지