많은 사람들이 사이버 먼데이 기간 동안 구독자에게 제공하는 독점 랜딩 페이지 중 하나는 멋진 소프트웨어 릴리스 랜딩 페이지입니다. 이 레이아웃은 훌륭한 삽화와 독자를 놀라게 할 섹션 구분선의 독특한 사용을 특징으로 합니다. 방문자.

사이버 먼데이.jpg

Cyber ​​Monday의 독점 소프트웨어 릴리스 랜딩 페이지를 얻는 방법

이 사용을 시작하기 전에 새로운 Elegant Themes 회원이 되거나 기존 계정을 업그레이드하거나 이미 평생 회원이 되면 얻을 수 있는 독점적인 Cyber ​​Monday 랜딩 페이지에 익숙해져야 합니다. 이미 평생 회원인 경우 회원 영역에 로그인하여 여기에서 모든 독점 페이지를 다운로드할 수 있습니다. 다른 모든 사용자는 튜토리얼의 나머지 부분을 완료하기 전에 아래 버튼을 사용하여 구매하거나 업그레이드해야 합니다.

이미 평생회원이신가요? 지금 팩을 다운로드할 수 있으며 사이버 먼데이 제안에 참여할 필요가 없습니다!

Divi에서 상황에 맞는 데모 비디오를 만드는 방법

회원 영역에서 새 소프트웨어 릴리스 랜딩 페이지를 다운로드하면 아래 내용을 계속 읽을 수 있습니다.

이 자습서의 사용 사례에서는 버튼 클릭으로 비디오 데모를 만드는 방법을 보여줍니다. 클릭 시 표시되는 동영상은 데스크톱과 작은 화면에서 잘 보입니다. 페이지에 직접 비디오를 포함하고 싶지 않지만 방문자.

측량

튜토리얼을 시작하기 전에 다양한 화면 크기의 최종 결과를 살펴 보겠습니다.

최종 결과 divi 비디오 popup.gif

모바일

결과 모바일 동영상 팝업 divi.gif

시작하자!

무료 비디오 팝업 플러그인 사용

플러그인 설치 및 활성화

가장 먼저 할 일은 플러그인 무료 팝업 비디오 . 다음으로 이동하여 이 플러그인을 찾을 수 있습니다. 웹 사이트 워드프레스 > 플러그인 > 새로 추가 > '비디오 팝업' 검색. 이 플러그인을 찾으면 설치하십시오. 완료되면 플러그인을 활성화하십시오.

비디오 팝업.jpg

플러그인 설정

이 플러그인의 일반 설정으로 이동하여 상단에 있는 두 가지 옵션을 활성화하여 계속하십시오.

구성 비디오 popup.jpg

소프트웨어 릴리스 랜딩 페이지를 사용하여 새 페이지 추가

새 페이지 추가 및 활성화 Visual Builder 사용

실천에 옮기기 시작할 때입니다! 새 페이지를 추가하고 페이지 제목을 지정하고 Visual Builder를 즉시 활성화합니다.

새 페이지 만들기 divi.jpg

저장된 레이아웃에서 소프트웨어 릴리스 레이아웃 다운로드

"저장된 레이아웃"으로 이동하여 업로드한 랜딩 페이지를 업로드합니다.

레이아웃 업로드 divi.jpg

재생 버튼의 Blurb 모듈 아래에 텍스트 모듈 추가

보시다시피 페이지에는 원하는 결과를 얻는 데 도움이 되는 재생 버튼이 이미 있습니다. 그러나 이것이 작동하려면 텍스트 모듈을 사용하여 Blurb 모듈에서 디자인을 다시 만들어야 합니다. Blurb 모듈 바로 아래에 새 텍스트 모듈을 추가합니다.

blurb.jpg 모듈 위에 텍스트 추가

콘텐츠 영역에 이미지 추가

텍스트 모듈을 추가했으면 계속해서 " 미디어 추가 미디어 라이브러리에서 재생 버튼을 선택합니다.

Blub divi.jpg 모듈에 미디어 추가

이미지 선택 divi.jpg

콘텐츠 영역에 사본 추가

이미지 바로 아래에 복사본을 추가하여 계속합니다.

중복 모듈 blurb.jpg

텍스트 설정

모듈이 레이아웃과 일치하도록 하려면 모듈의 텍스트 설정에서 가운데 ​​텍스트 방향을 활성화합니다.

중앙 방향 활성화.jpg

기본 링크 텍스트 설정

그에 따라 링크 텍스트 설정도 변경합니다.

  • 링크 글꼴: Cabin
  • 링크 글꼴 두께: 굵게
  • 링크 텍스트 색상: rgba(162,176,193,0.7)
  • 링크 텍스트 크기: 17px
  • 링크 라인 높이: 1.6em

divi 링크 메뉴 디자인.jpg

호버 텍스트 설정

호버에서 링크 텍스트의 색상을 변경합니다.

  • 링크 텍스트 색상: #a2b0c1

divi.jpg 링크의 색상 변경

간격

마지막으로 텍스트 모듈에 음수 위쪽 여백도 추가합니다.

  • 상단 마린: -20vw

상단 여백 설정 divi.jpg

텍스트 모듈 내용에 문맥 읽기 추가

텍스트 편집기로 전환

클릭 시 팝업을 생성하려면 텍스트 모듈 콘텐츠에 사용자 지정 링크를 추가해야 합니다. 텍스트 모듈 콘텐츠 영역으로 돌아가서 텍스트 편집기 모드를 선택합니다.

divi.jpg 텍스트 편집기 모드에서 텍스트 모듈 수정

모든 콘텐츠에 대한 링크 추가

이미지에 링크를 추가하고 복사하여 콘텐츠 영역을 팝업에 연결합니다. 링크 URL을 자신의 URL로 바꾸십시오.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

비디오 divi.jpg와 함께 이미지 링크 추가

재생 버튼에서 Blurb 애드온 제거

이제 Blurb 모듈과 정확히 동일하게 보이는 텍스트 모듈을 만들었으므로 이전에 존재했던 Blurb 모듈을 삭제할 수 있습니다. 이 방법은 사용하는 모든 유형의 레이아웃에 적용할 수 있지만 실제로는 소프트웨어 릴리스 랜딩 페이지를 위한 훌륭한 추가 기능입니다.

사용하지 않는 광고 문구 모듈 divi.jpg 제거

마지막 생각

보시다시피 Video Popup 플러그인을 사용하여 Divi에 팝업을 추가하는 것은 매우 간단합니다. 이를 통해 다음에서 비디오를 프레젠테이션할 수 있습니다. 블로그 콘텐츠에 자동으로 통합할 필요가 없습니다.