Divi 플러그인 하이라이트: 간편한 슬라이드인

Easy Slide-Ins는 Divi 빌더를 사용하여 슬라이드인(및 팝업)을 만들 수 있는 Divi 및 Extra용 타사 플러그인입니다. 슬라이드인은 Divi Builder로 만들 수 있는 모든 것을 표시할 수 있습니다. 스크롤 비율, 종료 의도, 여러 위치가 있는 버튼 및 CSS 클래스를 사용하여 슬라이드인을 트리거합니다. 여기에는 평생 업데이트와 데모가 포함됩니다.

이 기사에서는 Easy Slide-In을 살펴보고 무엇을 할 수 있고 사용하기 쉬운지 살펴보겠습니다. 플러그인에 포함된 몇 가지 데모도 살펴보겠습니다. 플러그인은 개발자 웹 사이트에서 사용할 수 있습니다.

Easy Slide-In 설치

먼저 파일의 압축을 풉니다. 폴더 안에는 데모, 문서 링크가 있는 파일, Easy Slide-Ins 플러그인이 있습니다.

정상적으로 플러그인을 업로드하고 활성화합니다.

Easy Slide-Ins라는 대시보드에 새로운 메뉴가 추가되었습니다. 이 메뉴를 클릭하고 라이센스 키를 입력하십시오.

라이선스를 활성화하면 슬라이드인을 보고 새 슬라이드인을 만들 수 있는 두 개의 메뉴 항목(모든 항목 및 새로 추가)이 추가됩니다.

새 슬라이드인 만들기

클릭하여 새 슬라이드를 추가하면 Divi Builder를 사용하여 슬라이드인을 만들 수 있는 편집기가 열립니다.

또한 많은 설정이 포함되어 있습니다. 그들은 Divi Builder 아래에 배치됩니다. 왼쪽, 오른쪽, 왼쪽 상단, 오른쪽 상단, 왼쪽 하단, 오른쪽 하단, 상단 표시줄, 하단 표시줄, 왼쪽 사이드바 또는 오른쪽 사이드바에서 위치를 선택합니다. 스크롤 시 자동 트리거로 설정하고 스크롤 양을 선택합니다. 종료 의도에서 열리도록 설정할 수도 있습니다. 배경색, 상자 그림자, 슬라이드인 너비를 설정합니다.

제목을 표시하고 표시할 텍스트를 입력합니다. 제목의 배경 및 텍스트 색상, 글꼴 모음, 크기 및 두께를 선택합니다. 모서리 진원도, 레이블 높이 및 레이블 너비를 설정합니다. 닫기 아이콘을 표시하고 배경 및 아이콘 색상과 아이콘 크기를 선택합니다.

컨트롤은 직관적으로 사용하고 이해할 수 있습니다. 웹 사이트와 일치하도록 레이블 스타일을 지정하고 슬라이드인 작동 방식을 제어할 수 있는 조정이 충분합니다.

선택한 옵션에 따라 다른 기능이 추가되거나 제거됩니다. Box Shadow를 선택했고 이제 수평 및 수직 위치, 흐림 및 확산 강도, 색상에 대한 옵션을 제공합니다.

고급 탭에서는 슬라이드가 표시될 페이지를 선택할 수 있습니다. 모든 페이지, 개별 페이지, 모든 게시물을 선택할 수 있습니다. 특정 장치에서 슬라이드 인을 숨길 수 있습니다.

사용자 정의 필드 탭을 사용하면 페이지나 게시물처럼 사용자 정의 필드를 추가할 수 있습니다.

쉬운 슬라이드 인 예제

이것은 위험 관리 레이아웃의 연락처 페이지입니다. 디자인이 레이아웃에 맞도록 슬라이드인을 만드는 데 사용하고 있습니다. 사이드바 또는 점 탐색을 표시하지 않도록 설정했습니다. 표준 페이지처럼 미리 볼 수 있습니다. 슬라이드 인을 디자인했으면 평소와 같이 게시합니다.

설정에서 레이블을 활성화하고 배경을 검은색으로, 텍스트를 흰색으로 설정했습니다. 기본 텍스트(문의하기)를 유지했습니다. 오른쪽 상단에 표시되도록 설정했습니다. 이것은 기본 높이를 사용하지만 쉽게 변경할 수 있습니다.

레이블을 클릭하면 위험 관리 레이아웃 팩의 문의 양식을 보여주는 화면 위에 표시되는 슬라이드 인이 열립니다. 문의하기 버튼을 다시 클릭하면 슬라이드인이 닫힙니다. 슬라이드인 너비는 500픽셀, 레이블 높이는 150, 레이블 너비는 60으로 설정했습니다.

예제는 상자 그림자를 보여줍니다. 닫기 버튼을 표시하는 오른쪽 사이드바로 위치를 변경했습니다. 레이블과 닫기 버튼의 색상을 변경하고 레이블의 모서리를 더 둥글게 만들었습니다. 또한 슬라이드인 너비를 600픽셀로 설정했습니다.

이를 위해 레이블을 상단 막대 위치로 옮겼습니다. 레이아웃의 색상을 사용하여 너비를 122픽셀, 높이를 40픽셀로 변경했습니다. 이 이미지에서 볼 수 있듯이 레이블은 스크롤 시 제자리에 유지됩니다.

전체 화면으로 열리고 닫기 버튼이 포함되어 있습니다.

이를 위해 왼쪽 사이드바에 새 슬라이드인을 추가했습니다. 사이트와 어울리도록 스타일을 지정하고 레이블 모서리를 제곱했습니다. 50% 레이블 상단 여백을 사용하고 있습니다. 이 여백은 레이블 상단을 화면 높이 중앙에 배치합니다.

왼쪽에서 열립니다. 픽셀 너비를 1000으로 지정하여 화면을 많이 덮습니다. 메뉴가 뉴스레터 슬라이드인으로 가려져도 연락처 슬라이드인은 맨 위에 계속 표시됩니다.

슬라이드인은 버튼 트리거 클래스를 제공합니다. 버튼과 함께 사용하여 슬라이드인을 열 수 있습니다.

클래스를 복사하여 버튼의 CSS 클래스 필드에 붙여넣습니다.

이제 버튼을 클릭하면 슬라이드인이 열립니다. 어디에도 레이블이 필요하지 않지만 슬라이드 인을 배치한 방향에서 슬라이드 인됩니다. 이것은 왼쪽에 배치되었으므로 왼쪽에서 옵니다. 너비를 1000픽셀로 설정했습니다.

쉬운 슬라이드인 데모

다운로드 파일에는 12개의 데모가 포함되어 있습니다. Divi 라이브러리에 업로드할 수 있는 미리 만들어진 레이아웃(JSON 파일)입니다. 일반 레이아웃처럼 Divi 라이브러리로 가져옵니다. 여기에는 스타일이 지정된 모듈이 포함되지만 디자인 설정을 지정해야 합니다. 그 중 몇 가지를 살펴보겠습니다.

종료 의도가 있는 수집 이메일입니다. 여기에는 여러 텍스트 모듈, 문의 양식 및 이미지 모듈이 포함됩니다.

다음은 화면에 표시되는 방식입니다. 여기에 모든 것을 기본값으로 두었으므로 버튼에는 여전히 원본 텍스트, 위치 및 스타일이 표시됩니다.

스크롤 인텐트가 있는 컬렉션 이메일입니다. 여기에는 배경 이미지, 두 개의 텍스트 모듈 및 이메일 모듈이 포함됩니다.

다음은 미리 만들어진 설정을 사용하여 페이지에 표시되는 방식입니다. 이것은 슬라이드 인이 얼마나 반응하는지 보여줍니다(Divi 레이아웃을 보여주기 때문에 정확히 우리가 기대하는 것입니다). 이미지를 더 많이 표시하려면 슬라이드인을 더 넓게 만드십시오.

이것은 방문자 안내입니다. 여기에는 코드 모듈(Google 지도용), 여러 안내문, 텍스트 및 문의 양식이 포함됩니다.

다음은 기본 설정을 사용하여 페이지에 표시되는 방식입니다.

레이블이 있는 프로모션입니다. 여기에는 텍스트 모듈, 여러 가격표 및 버튼이 포함됩니다.

다음은 화면에 표시되는 방식입니다. 슬라이드 인 경우 전체 너비가 표시되도록 800픽셀로 설정했습니다. 레이블을 제거하고 페이지 스크롤이 60%에 도달할 때 표시되도록 설정했습니다.

다음은 Extra로 볼 때와 동일한 레이아웃입니다. Divi와 Extra 모두에서 잘 작동한다는 사실을 알게 되어 기쁩니다.

쉬운 슬라이드 인 가격 및 문서

Easy Slide-Ins는 개발자 웹 사이트에서 사용할 수 있습니다. 두 가지 구매 옵션이 있습니다.

• 단일 사이트 – $27
• 무제한 사이트 – $97

두 라이선스 모두 데모 및 평생 업데이트를 포함합니다.

문서는 개발자 문서 및 지원 페이지에서 제공됩니다. 이 페이지에는 각 포인트를 설명하는 이미지와 함께 각 포인트에 대한 안내가 포함되어 있습니다. 이 페이지에는 이메일 지원 링크도 포함되어 있습니다.

마무리 생각

Easy Slide-Ins를 사용하면 Divi 및 Extra용 슬라이드인 및 팝업을 쉽게 만들 수 있습니다. 나는 사용하기 쉽다는 것을 알았다. 나는 문서가 필요하지 않았지만 필요한 경우 거기에 있습니다. 숨겨진 페이지 요소를 가져오는 흥미로운 방법입니다. 슬라이드인에서는 무엇이든 사용할 수 있으므로 연락처 양식, 뉴스레터 가입, 클릭 유도문안, 비디오, 상점 모듈 등을 표시할 수 있습니다. 단일 모듈 또는 전체 페이지 레이아웃이 될 수 있습니다.

여러 트리거 옵션이 있는 것이 마음에 듭니다. 종료 의도 및 자동 트리거는 이메일 및 CTA 팝업을 만드는 데 적합합니다. 레이블을 클릭하여 여는 것은 페이지의 여러 위치에 레이블을 추가하는 좋은 방법입니다. 한 페이지에 여러 슬라이드를 추가할 수 있고 어떤 페이지에 표시할지 결정할 수 있다는 점이 마음에 듭니다. 버튼에 CSS 클래스를 추가하면 방문자가 정보를 보기로 선택할 때 정보를 표시할 수 있습니다.

프론트 엔드에서 슬라이드 인을 만들 수 있지만 설정에 액세스하는 방법을 보지 못했습니다. 설정이 없으면 레이블을 이동하고 실시간으로 위치를 볼 수 없습니다. 그들을 보려면 페이지를 로드해야 했습니다. 여전히 사용하기 어렵지는 않았지만 약간의 추측이 필요했습니다. 이것은 너무 사소한 것이므로 사용하거나 권장하지 않습니다.

Divi Builder를 사용하여 슬라이드 인을 만드는 간단하고 직관적인 방법을 찾고 있다면 Easy Slide-Ins를 살펴볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi용 Easy Slide-In을 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

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