Divi 플러그인 하이라이트: Ultimate Divi Builder 애드온

Divi Builder Addons는 고급 웹사이트에서 사용하는 많은 jQuery 스크립트를 Divi Builder에 추가하는 타사 플러그인입니다. 원하는 스크립트를 토글하고 CSS 클래스를 Divi Builder 모듈에 추가하기만 하면 됩니다. 사용하기 쉽고 많은 기능과 애니메이션이 포함되어 있습니다.

Ultimate Divi Builder 애드온 메뉴

정상적으로 플러그인을 업로드하고 활성화합니다. Ultimate Divi Builder Addons라는 대시보드 메뉴에 새로운 메뉴 항목이 추가되었습니다. 이것을 클릭하면 왼쪽 창에 많은 기능이 있는 화면이 열립니다. 그들 중 하나를 클릭하면 오른쪽 창에 토글과 정보가 표시됩니다. 오른쪽 창에는 일부 효과에 대한 CSS 클래스도 포함되어 있으며 사용 방법을 보여줍니다. 다른 것들은 색상, 이미지 크기, 지속 시간 등과 같은 더 많은 기능과 옵션을 위한 다중 토글을 포함합니다. 기본적으로 모두 비활성화되어 있습니다.

보라색으로 표시된 기능은 활성화되고 회색으로 표시된 기능은 비활성화됩니다. 위의 예에서 기능에는 CSS 클래스뿐만 아니라 다른 옵션도 포함되어 있습니다. 특정 기능을 사용하는 방법에 대해 필요한 모든 정보는 해당 기능을 클릭하면 오른쪽 창에 표시됩니다.

기능은 다음과 같습니다.

• 사용자 정의 스크롤바
• DoSlide 수평
• 페이드 인 뷰
• 텍스트 뒤집기
• 아래로 스크롤할 때 Divi 테마 헤더 숨기기
• jQuery 페이지 뒤집기 세로 스크롤
• jQuery 페이지 뒤집기 수평 스크롤
• jQuery 스크롤 흐름
• 제이쿼리 스크롤FX
• jQuery 스크롤 트리거
• jQuery 끝 페이지 상자
• Effect1 스크롤 중 헤더 로드
• Effect2를 스크롤하는 동안 헤더 로드
• Effect3를 스크롤하는 동안 헤더 로드
• Effect4를 스크롤하는 동안 헤더 로드
• 계시자 애니메이션
• ScrollMagic 응답 시간
• 스크롤 공개
• StickyStack: jQuery 스태킹 효과
• 스크롤 윈도우
• 슈퍼 간단한 텍스트 회전기/티커
• 와우 애니메이션

Ultimate Divi Builder 애드온 예제

다음은 Divi 레이아웃과 함께 사용할 때 기능의 몇 가지 예입니다.

사용자 정의 스크롤바

사용자 정의 스크롤 막대를 사용하면 콘텐츠에 스크롤 막대를 배치할 수 있습니다. 8가지 다른 효과가 있습니다. 효과를 사용하려는 섹션, 행 또는 모듈의 CSS 클래스 필드에 CSS 클래스를 붙여넣습니다. 여기서는 Esports 레이아웃의 텍스트 모듈 콘텐츠에 맞춤 스크롤바 효과를 추가했습니다.

이제 스크롤바가 호버에 나타나므로 스크롤하여 동일한 공간에서 더 많은 콘텐츠를 볼 수 있습니다. 이것은 효과 1입니다. 라이브 사이트에서 다른 디자인을 가지고 있습니다. 눈에 띄도록 배경을 밝게 했습니다.

이것은 효과 3입니다. 슬라이드의 상단과 하단에 화살표를 추가합니다.

효과 5는 핸들을 선에서 점으로 변경하고 화살표 스타일을 변경합니다.

텍스트 뒤집기

텍스트 뒤집기는 틱틱 인트로 애니메이션을 만드는 텍스트 입력 효과입니다. 5가지 효과가 있습니다. 이 예에서는 법률 보조원 레이아웃에 텍스트 뒤집기를 추가했습니다. 이것은 첫 번째 Flipping Text 타이핑 효과입니다. 한 번에 한 글자씩 입력합니다. 사용할 수 있는 여러 클래스가 있습니다. 각각 다른 속도로 입력합니다.

제이쿼리 스크롤플로우

jQuery Scroll Flow는 행 또는 모듈에 스크롤 애니메이션을 추가합니다. 5개의 애니메이션이 있습니다. 모든 모듈에 함께 영향을 미치도록 Paralegal 레이아웃의 행에 이것을 추가했습니다. 행에 있는 모듈 중 하나에만 추가하여 이미 있는 나머지 콘텐츠와 맞도록 제자리에 밀어넣을 수도 있습니다.

행으로 스크롤하면 콘텐츠가 표시되기 시작합니다. 정상보다 작고 불투명도가 배경이 보일 정도로 낮게 설정되어 있습니다.

조금 더 스크롤하면 전체 너비와 불투명도로 드러날 때까지 콘텐츠의 크기와 불투명도가 증가합니다. 위로 스크롤하면 다시 감소합니다. 이것은 동일한 위치에 남아 있지만 다른 여러 클래스가 있으므로 크기와 불투명도를 조정하면서 오른쪽, 왼쪽에서 밀어 넣거나 위 또는 아래로 밀어넣을 수 있습니다.

제이쿼리 스크롤FX

jQuery ScrollFX는 텍스트의 크기를 조정하고 배경 불투명도를 변경합니다. scrollfx 클래스가 섹션에 추가됩니다. 이 섹션의 모듈은 스크롤할 때와 화면에 있을 때 정상적으로 표시됩니다.

스크롤하면 섹션의 콘텐츠 크기가 줄어들고 불투명도도 줄어듭니다.

jQuery 스크롤 트리거

jQuery 스크롤 트리거는 페이지 스크롤 시 모듈을 슬라이드합니다. 섹션에 스크롤 트리거 클래스를 추가합니다. 리조트 레이아웃입니다. 클래스가 추가되면 배경 이미지가 자동으로 옆으로 이동됩니다.

이미지, 버튼, 텍스트 등을 포함한 모든 콘텐츠는 해당 섹션에 도달하면 제자리에 슬라이드됩니다.

그리고 모든 것이 제자리에 놓이면 진정됩니다.

jQuery 끝 페이지 상자

jQuery End Page Box는 화면 하단에 있는 상자를 배치합니다. 섹션 끝에 있는 텍스트 모듈에 코드를 추가하여 생성됩니다.

이렇게 하면 화면 하단에 표시되는 상자가 추가되고 각 섹션에 대해 지정한 다른 콘텐츠가 표시되도록 변경됩니다.

여기 다음 섹션이 있습니다. 상자는 다른 방향에서 또는 각 섹션에 대해 다른 애니메이션으로 안팎으로 슬라이드합니다.

스크롤하는 동안 헤더 로드

스크롤하는 동안 헤더 로드는 메뉴에 귀하가 본 페이지의 양을 표시하는 막대를 추가합니다. CSS 클래스가 필요하지 않습니다. 스크롤 막대의 색상을 사용자 지정할 수 있습니다. 4가지 스타일 중에서 선택할 수 있습니다.

이것은 효과 1입니다. 화면 상단에 스크롤 라인을 추가합니다. 스크롤하면 크기가 커져 방문자가 본 페이지의 양을 보여줍니다.

이것은 효과 2입니다. 훨씬 더 넓은 막대를 표시합니다.

이것은 효과 3입니다. 스크롤하면 세로로 커져 로고의 높이를 차지합니다. 그리 크지는 않지만 여전히 스크롤링 효과를 보여줍니다.

효과 4는 로고의 너비를 사용합니다.

계시자

Revealator는 섹션, 행 또는 모듈에 스크롤 트리거 애니메이션을 추가합니다. 40개에 가까운 옵션이 있습니다. Bakery 레이아웃에 광고 문구를 추가하고 있습니다. 광고 문구는 해당 컨테이너가 화면에 완전히 표시될 때까지 누락됩니다.

선택한 클래스에 따라 화면에 애니메이션이 표시됩니다. 이것은 페이드, 왼쪽 회전, 오른쪽 회전, 왼쪽 슬라이드, 오른쪽 슬라이드, 위로 슬라이드, 아래로 슬라이드, 확대 및 축소를 포함한 많은 애니메이션 옵션이 있습니다.

스크롤 매직 섹션 와이프

Scroll Magic Section Wipes는 스크롤할 때 화면에서 콘텐츠를 지우는 애니메이션을 만듭니다. 나는 이것이 모든 효과 중에서 가장 좋아하는 것 같아요. 섹션에 추가됩니다.

해당 섹션이 화면에 완전히 표시되면 제자리에 고정되고 다음 섹션이 그 위로 스크롤됩니다. 이것을 많은 섹션에 추가하여 전체 페이지에 대한 흥미로운 스크롤 방법을 만들 수 있습니다. 모든 섹션이 겹치도록 하려면 StickyStack 기능에 관심이 있을 것입니다.

스크롤 공개

Scroll Reveal은 스크롤에 모듈을 표시합니다. 17가지 애니메이션 중에서 선택하세요. 섹션, 행 또는 모듈에 추가할 수 있습니다. 하단의 섹션은 스크롤 시 리더 쪽으로 확대됩니다.

이것은 효과 1f입니다. 스크롤하면 행이 제자리에 고정됩니다.

StickyStack: jQuery 스태킹 효과

StickyStack: jQuery Stacking Effect는 패널이 뷰포트의 상단에 도달할 때 패널을 스택합니다. 즉, 스크롤할 때 모든 섹션이 화면에서 정지되고 다음 섹션이 스크롤되어 겹쳐집니다. 결과는 스크롤에서 놀랍습니다. 이것은 위험 관리 레이아웃입니다.

다음은 같은 페이지의 다른 섹션입니다. 겹치는 부분이 완벽하게 작동합니다.

슈퍼 간단한 텍스트 회전기/티커

Super Simple Text Rotator/Ticker를 사용하면 텍스트에 마크업을 추가하고 여러 단어를 회전할 수 있습니다. 5가지 애니메이션 스타일이 있습니다. 이것은 Simple과 Customizable이라는 단어 사이에서 순환하고 있습니다.

여기에서 회전하여 두 번째 단어를 표시합니다. 두 단어 모두 페이드 인 및 아웃.

Ultimate Divi Builder 애드온 가격

Ultimate Divi Builder Addons는 무제한 웹사이트에서 사용할 수 있으며 평생 업데이트가 포함된 $59입니다. 업데이트는 종종 새로운 기능을 추가합니다. 데모를 무료로 사용해 보고 마음에 드는지 확인할 수 있습니다.

• DiviBuilderAddons.com에서 Ultimate Divi Builder 애드온을 구입할 수 있습니다.

마무리 생각

Ultimate Divi Builder Addons는 많은 것을 제공하며 기능과 애니메이션을 개발하는 데 많은 시간을 절약할 수 있습니다. 포함된 기능의 수와 사용 편의성에 깊은 인상을 받았습니다.

일부는 이 기사를 큰 GIF로 채우지 않고는 표시하기가 더 어렵습니다. 예를 들어 Wow Animation에는 선택할 수 있는 애니메이션이 75개 있으며 지연, 지속 시간, 거리 및 반복 횟수를 변경할 수 있습니다.

플러그인을 사용하려면 CSS 클래스를 섹션, 행 또는 모듈에 편안하게 붙여넣을 수 있어야 합니다. 다행히도 이것은 수행하기 쉽고 CSS 클래스에 붙여넣기에 대한 Divi 문서에 많은 정보가 있습니다.

Divi에 많은 기능과 애니메이션을 추가하는 쉬운 방법에 관심이 있다면 Ultimate Divi Builder Addons를 확인해 볼 가치가 있습니다.

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

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