Divi 플러그인 하이라이트: Divi Toolbox

Divi Toolbox는 일반적으로 CSS, JavaScript, PHP 또는 많은 개별 플러그인이 필요한 많은 새로운 효과를 Divi에 추가하는 타사 플러그인입니다. 이 효과는 사용하기 쉽고 사용자 정의할 수 있으며 Divi 웹사이트에 군중 사이에서 눈에 띄기 위해 약간의 반짝임을 부여합니다.

효과에는 사이트 전체의 변경 사항, 새로운 모바일 메뉴, 입자 배경, 바닥글, 위젯, 스타일 지정, 애니메이션, 머리글, 탐색, 새 블로그 레이아웃, 새 위치의 Divi 레이아웃, 로그인 화면 사용자 정의, 팝업 등이 포함됩니다. 테마 사용자 정의 도구에 새로 추가된 기능으로 많은 기능에 스타일을 지정할 수 있습니다. Divi Toolbox는 Extra 또는 Divi Builder 플러그인에서 작동하지 않습니다.

Divi Toolbox 일반 설정

Divi 대시보드 메뉴에 Divi Toolbox 옵션 화면이 추가되었습니다. 여기에서 설정이 가능하지만 조정은 커스터마이저에서 이루어집니다.

일반 설정에는 전역 머리글 스타일, 로그인 페이지 사용자 지정, 프로젝트 숨기기, SVG 파일 유형 업로드 허용, 사용자 지정 브라우저 스크롤바, 404 페이지 설정(레이아웃 선택 및 머리글 및 바닥글 숨기기) 및 소셜 아이콘 설정(스타일 지정 활성화, 다음에서 열기)이 포함됩니다. 새 탭 및 더 많은 아이콘 추가).

더 많은 소셜 아이콘을 추가하면 9개의 추가 소셜 네트워크에 대한 URL을 입력할 수 있는 필드가 열립니다.

여기에서 내가 활성화한 설정을 조정할 수 있는 사용자 지정 프로그램의 일반 탭이 있습니다. 설정에는 제목과 글꼴, 브라우저 스크롤바, 로그인 화면이 포함됩니다. 이 예에서는 h1 및 본문 텍스트를 약간 조정하고 스크롤 막대에 스타일을 추가했습니다. 소셜 아이콘도 추가했습니다.

로그인 화면의 경우 변경한 다음 로그아웃하거나 다른 브라우저에서 화면을 확인해야 합니다.

다음은 배경 이미지, 로고를 추가하고 필드와 텍스트의 크기와 색상을 변경한 후의 로그인 화면입니다. 변경할 때 화면을 볼 수 없기 때문에 약간의 조정이 필요합니다.

Divi Toolbox 헤더 설정

헤더 설정은 메뉴에 스타일을 추가하고, 사용자 정의 드롭다운 메뉴를 활성화하고, CTA 메뉴 버튼을 추가하고, 고정 메뉴의 로고를 변경하고, 겹치는 로고를 활성화하고, 홈 페이지에서 탐색하기 전에 Divi 레이아웃을 추가하고, 전후에 레이아웃을 추가합니다. 다른 페이지에서 탐색.

CTA 메뉴 버튼을 사용하면 CTA를 첫 번째 또는 마지막 메뉴 항목에 적용하거나 사용자 정의 클래스를 적용할 수 있습니다. CSS 및 추가 위치에 대한 지침을 제공합니다.

다음은 헤더에 대한 사용자 정의입니다. 메뉴 위에 레이아웃을 추가했습니다(이 예에서는 단지 텍스트 모듈이지만 원하는 경우 전체 레이아웃을 추가할 수 있음). 겹치는 로고에는 그림자 효과가 있는 사각형 상자가 있습니다. 로고 크기를 200에서 140으로 변경하고 소셜 아이콘을 메인 메뉴로 옮겼습니다. CSS 효과를 볼 수 있도록 서비스 메뉴 항목 위로 마우스를 가져갑니다.

Divi 도구 상자 바닥글 설정

바닥글 설정에는 고정 바닥글, 바닥글 표시, 메뉴 및 위젯 사용자 지정, 맨 위로 이동 버튼 사용자 지정(사용자 지정 버튼 링크 옵션 추가), 바닥글 레이아웃 전후 추가가 포함됩니다.

이 예에서는 헤더와 메뉴 글꼴을 모두 대문자로 변경하고 간격을 늘렸습니다. 또한 호버 색상을 조정하고 호버 시 텍스트 옆에 아이콘을 추가했습니다. 바닥글 레이아웃 뒤에 레이아웃을 추가했습니다. 이것은 노출된 바닥글을 사용합니다(이것이 텍스트가 그 위의 텍스트 모듈 뒤에 있는 이유입니다).

텍스트를 표시하도록 맨 위로 이동 버튼의 스타일을 지정했습니다. 그림자 효과가 있고 위치를 조정했습니다. 색상은 기본값으로 두었습니다. 하단 텍스트와 소셜 아이콘을 중앙에 배치했습니다. 호버 효과의 경우 성장을 선택했습니다(축소, 위로 이동, 아래로 이동, 흔들림, 하트비트, 젤로 및 펄스도 포함됨). 효과를 볼 수 있도록 Facebook 아이콘 위로 마우스를 가져갑니다.

Divi Toolbox 모바일 설정

모바일 설정에는 모바일 메뉴 중단점(메뉴가 데스크탑에서 모바일로 변경될 때의 정확한 화면 너비)을 입력하는 필드, 사용자 정의 스타일, 로고 변경, 햄버거 아이콘 클릭 효과 선택, 중첩된 하위 메뉴 축소 및 활성화가 포함됩니다. 여러 CSS 클래스 CSS 클래스를 사용하면 열을 뒤집고 텍스트, 모듈 및 버튼을 가운데에 맞출 수 있습니다.

반응형이 선택된 Google 크롬의 페이지를 살펴보겠습니다. 화면 크기를 980픽셀 미만으로 가져오자마자 내가 선택한 모바일 아이콘으로 변경되고 내가 선택한 애니메이션이 있는 햄버거 메뉴가 추가되었습니다.

이 화면에서는 모바일 메뉴의 배경색, hover 배경색, 햄버거 메뉴의 스타일을 지정하고 있습니다. 기본 메뉴 항목의 텍스트를 모두 대문자로 변경하고 CTA 텍스트 표준을 그대로 두었습니다. CTA 메뉴 항목의 배경도 변경했습니다. 메뉴와 아이콘 크기를 조정할 수도 있습니다.

Divi Toolbox 블로그 설정

블로그 설정을 사용하면 사이드바 및 위젯, 포스트 메타, 아카이브 및 카테고리 페이지를 사용자 정의하고, 레이아웃(6개 옵션 중에서)을 선택하고, 아카이브 사이드바를 숨기고, 더 읽기 버튼 텍스트를 사용자 정의할 수 있습니다.

단일 게시물의 경우 사이드바 레이아웃을 선택하고, 게시물 제목을 숨기고, 작성자 상자를 추가하고, 이전 및 다음 링크를 추가하고, 관련 게시물을 추가하고, 댓글 양식을 사용자 지정할 수 있습니다. 단일 게시물, 아카이브, 카테고리, 작성자 페이지 및 검색 결과 페이지로 이동한 후 사용자 정의 레이아웃을 추가할 수도 있습니다.

블로그 페이지의 경우 사이드바에 그림자 효과를 추가하고 글꼴과 스타일을 변경하고 검색 상자에 스타일을 지정하고 테두리 크기를 늘렸습니다. 그것은 대체 레이아웃을 사용하고 더 읽기 버튼 텍스트를 사용자 정의했습니다.

이 예는 레이아웃 6입니다. 메타 글꼴 색상을 다시 사용자 정의하고 호버 색상을 추가했습니다. 또한 더 읽기 버튼 배경을 사용자 정의했습니다.

개별 블로그 게시물을 사용하면 블로그 설정에 추가한 각 요소를 사용자 지정할 수 있습니다. 이 화면에서는 관련 게시물, 다음 및 이전 링크, 작성자 상자를 사용자 지정합니다. 모든 텍스트, 색상, 그림자 등을 제어할 수 있습니다.

이 예에서는 주석 양식을 사용자 지정합니다. 필드의 색상(포커스 및 비포커스 모두), 테두리, 텍스트, 색상, 버튼 등을 제어할 수 있습니다. 버튼 배경색, 필드의 초점 색상을 변경하고, 필드에 테두리를 추가하고, 변경했습니다. 반지름.

Divi Toolbox 모듈 설정

모듈 탭은 마우스를 따라 움직이는 호버 효과를 추가하는 설정을 제공하고 슬림한 이메일 옵트인(세 가지 다른 옵션에 대해 CSS를 제공함), 보조 버튼(새로운 사용자 정의 레이어를 추가함) 및 많은 조정을 추가합니다.

트윅에는 아코디언 및 토글 모듈용 애니메이션 삼각형 아이콘, 가격표의 수평 하단 테두리 및 패딩 제거, 평가의 콘텐츠 아래로 세로 이미지 이동, 수평 스크롤바 숨기기, 세로로 열을 정렬하고 높이를 변경하기 위한 CSS 추가가 포함됩니다. 모든 요소를 ​​해당 뷰포트 높이의 100%로 조정합니다.

다음은 슬림 이메일 옵트인을 살펴보겠습니다. 모든 필드를 한 줄에 배치합니다. 이 예에서는 보조 버튼도 사용합니다. CSS 클래스를 추가한 버튼에만 이러한 변경 사항이 적용됩니다. CSS 클래스를 사용한다는 것은 이제 두 개의 전역 버튼 스타일이 있음을 의미합니다.

Divi Toolbox 추가 설정

추가 탭에는 프리로더, 팝업, 파티클 배경, 3D 틸트 효과 및 모듈에 대한 시차 스크롤이 포함됩니다.

선택할 수 있는 12개의 프리로더가 있습니다. 원하는 경우에만 홈 페이지에 나타나도록 하고 전환 유형과 속도를 선택할 수 있습니다. 선택기 화면에 프리로더의 애니메이션이 표시됩니다. 테마 사용자 정의 도구에서 추가로 사용자 정의할 수 있습니다.

메뉴 항목, 버튼, 텍스트 링크 등의 링크로 팝업을 트리거합니다. 원하는 만큼 만들 수 있습니다. 팝업에 대해 미리 만들어진 레이아웃을 선택합니다. 사용자 정의 도구에서 배경 및 닫기 버튼을 사용자 정의하십시오.

이것은 움직이는 입자입니다. 색상, 모양, 입자 수, 속도, 크기, 선 크기, 불투명도 및 상호 작용을 완벽하게 제어할 수 있습니다. 입자에 대한 두 개의 CSS ID가 있어 두 가지 다른 디자인을 가질 수 있습니다.

다음은 틸트 기능을 살펴보겠습니다. 기울기, 원근감, 배율, 속도 및 눈부심을 조정할 수 있습니다. 섹션, 행 또는 모듈에 추가합니다.

Divi 도구 상자 라이선스

두 가지 라이선스 중에서 선택할 수 있습니다.

• 일반 라이선스(하나의 프로젝트에 사용) – €49.00
• 확장 라이선스(무제한 프로젝트에 사용) – €169.00

마무리 생각

나는 이 플러그인이 가지고 있는 많은 기능과 설정에 깊은 인상을 받았습니다. 특히 Divi 빌더로 작성하지 않은 블로그 게시물에 관련 게시물, 이전 및 다음 링크, 작성자 상자를 추가하는 것이 마음에 듭니다. 스크롤바도 좋은 터치입니다.

헤더 텍스트와 같이 Divi 모듈에서 얻을 수 있는 몇 가지 설정이 있지만 이는 해당 설정에 대한 자세한 정보를 제공합니다. 몇 가지 조정이 더 추가되었으면 합니다(예: 댓글 상자의 그림자 효과, 더 많은 로고 옵션, 소셜 미디어 아이콘 배치 등).

가능한 가장 쉬운 방법으로 Divi에 수많은 새로운 효과를 추가하는 데 관심이 있다면 Divi Toolbox를 살펴볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi Toolbox를 사용해 보셨습니까? 아래 의견에 귀하의 경험에 대해 알려주십시오.

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