Divi Toolbox는 플러그인입니다 일반적으로 CSS, JavaScript, PHP 또는 많은 개별 플러그인이 필요한 Divi에 많은 새로운 효과를 추가합니다. 효과는 사용하기 쉽고, 사용자 정의하고, 원하는 대로 설정할 수 있습니다. 사이트 웹 군중 속에서도 눈에 띄도록 반짝임을 더해보세요.
효과에는 사이트 전체의 변경 사항, 새로운 모바일 메뉴, 입자 배경, 바닥 글, 위젯, 스타일, 애니메이션, 머리글, 탐색, 새 블로그 레이아웃, 새로운 위치의 Divi 프레젠테이션, 로그인 화면 사용자 지정, 팝업 등 테마 커 스터 마이저에 새로 추가 된 기능으로 많은 기능을 커스터마이즈 할 수 있습니다. Divi Toolbox는 Extra 또는 Divi Builder 플러그인에서 작동하지 않습니다.
Divi Toolbox의 일반 설정
Divi Toolbox 옵션 화면이 Divi 대시 보드 메뉴에 추가됩니다. 여기에서 설정이 활성화되지만 조정은 커 스터 마이저에서 이루어집니다.
설정 일반 글로벌 헤더 스타일, 사용자 정의 로그인 페이지, 프로젝트 숨기기, SVG 파일 유형 업로드 권한, 사용자 정의 브라우저 스크롤 막대, 404 페이지 설정 (레이아웃 선택 및 숨기기 머리글 및 바닥 글) 및 소셜 아이콘 (스타일 활성화, 파일 열기). 새 탭 및 더 많은 아이콘 추가).
소셜 아이콘을 추가하면 9 개의 추가 소셜 네트워크의 URL을 입력 할 수있는 필드가 열립니다.
여기에 탭이 있습니다 일반 활성화 한 설정을 조정할 수 있습니다. 설정에는 헤더 및 글꼴, 브라우저 스크롤 막대 및 로그인 화면이 포함됩니다. 이 예에서는 h1 텍스트와 본문을 약간 조정하고 스크롤 막대에 스타일을 추가했습니다. 나는 또한 더 많은 소셜 아이콘을 추가했습니다.
로그인 화면의 경우 변경 한 다음 다른 브라우저에서 화면을 로그 아웃하거나 확인해야합니다.
다음은 배경 이미지, 로고를 추가하고 필드와 텍스트의 크기와 색상을 변경 한 후 로그인 화면입니다. 변경하는 동안 화면을 볼 수 없으므로 약간의 조정이 필요합니다.
Divi Toolbox 헤더 설정
설정 헤더 메뉴에 스타일 추가, 사용자 정의 드롭 다운 메뉴 활성화, CTA 메뉴 버튼 추가, 도커의 로고 변경, 오버레이 로고 활성화 및 홈 페이지 탐색 전에 Divi 레이아웃 추가뿐만 아니라 '전후 서식. 다른 페이지 탐색.
CTA 메뉴 버튼을 사용하면 첫 번째 또는 마지막 메뉴 항목에 CTA를 적용하거나 사용자 정의 클래스를 적용 할 수 있습니다. CSS 및 추가 위치에 대한 지침을 제공합니다.
다음은 헤더에 대한 사용자 정의입니다. 메뉴 위에 레이아웃을 추가했습니다 (이 예제에서는 텍스트 모듈이지만 원하는 경우 전체 레이아웃을 추가 할 수 있음). 겹치는 로고에는 그림자 효과가있는 사각형 상자가 있습니다. 로고 크기를 200에서 140으로 변경하고 소셜 아이콘을 메인 메뉴로 이동했습니다. CSS 효과를 볼 수 있도록 Services 메뉴 항목 위로 마우스를 가져갑니다.
Divi Toolbox의 바닥 글 설정
바닥 글 설정에는 고정 바닥 글, 바닥 글 표시, 메뉴 및 위젯 사용자 정의, 맨 위로 이동 버튼 사용자 정의 (사용자 정의 버튼 링크 옵션 추가) 및 레이아웃 전후 추가 바닥 글.
이 예에서는 헤더 및 메뉴 글꼴을 대문자로 변경하고 간격을 늘 렸습니다. 또한 호버 색상을 조정하고 호버 텍스트 옆에 아이콘을 추가했습니다. 레이아웃 뒤에 레이아웃을 추가했습니다. 이것은 공개 된 바닥 글을 사용합니다 (텍스트가 위의 텍스트 모듈 뒤에있는 이유입니다).
텍스트를 표시하기 위해 페이지 상단 버튼의 스타일을 지정했습니다. 그림자 효과가 있고 위치를 조정했습니다. 기본 색상은 그대로 두었습니다. 하단 텍스트와 소셜 아이콘을 중앙에 배치했습니다. 호버 효과의 경우 성장을 선택했습니다 (축소, 위, 아래, 흔들림, 하트 비트, 젤로 및 맥박도 포함).
Divi Toolbox Mobile 설정
설정 모바일 모바일 메뉴 중단 점 (메뉴가 데스크톱에서 모바일로 변경 될 때 화면의 정확한 너비), 사용자 정의 스타일, 로고 편집, 햄버거 아이콘 선택 클릭 효과를 입력하는 필드 포함 , 중첩 된 하위 메뉴를 축소하고 활성화합니다. 여러 CSS 클래스. CSS 클래스를 사용하면 열과 가운데 텍스트, 모듈 및 버튼을 반전 할 수 있습니다.
다음은 페이지 미리보기입니다. 구글 반응형이 선택된 Chrome입니다. 화면 크기를 980픽셀 이하로 잡자마자 내가 선택한 모바일 아이콘으로 바뀌었고, 내가 선택한 애니메이션이 담긴 햄버거 메뉴가 추가됐다.
이 화면에서는 배경색, 호버 배경색, 모바일 메뉴 햄버거 메뉴를 스타일링하고 있습니다. 메인 메뉴 항목의 텍스트를 대문자로 변경하고 CTA 텍스트 표준을 그대로 두었습니다. CTA 메뉴 항목의 배경도 변경했습니다. 메뉴 및 아이콘 크기를 조정할 수도 있습니다.
블로그 설정 Divi Toolbox
매개 변수 블로그 사이드 바 및 위젯, 포스트 메타, 아카이브 및 카테고리 페이지 사용자 정의, 레이아웃 선택 (6 개 옵션), 아카이브 사이드 바 숨기기 및 버튼 텍스트 사용자 정의 가능 더 읽어보세요.
단일 게시물의 경우 사이드바 레이아웃 선택, 게시물 제목 숨기기, 작성자 상자 추가, 이전 및 다음 링크 추가, 관련 게시물 추가 및 형태 의견의. 또한 단일 게시물, 아카이브, 범주, 작성자 페이지 및 검색 결과 페이지에 사용자 지정 탐색 후 레이아웃을 추가할 수 있습니다.
블로그 페이지의 경우 사이드 바에 그림자 효과를 추가하고 글꼴과 스타일을 변경하고 검색 상자의 스타일을 지정하고 테두리 크기를 늘 렸습니다. 교대 레이아웃을 사용하고 더 읽기 버튼의 텍스트를 사용자 정의했습니다.
이 예제는 레이아웃 6입니다. 메타 섹션의 글꼴 색상을 다시 사용자 정의하고 호버 색상을 추가했습니다. 또한 자세히 알아보기 버튼의 배경도 사용자 정의했습니다.
개별 블로그 게시물을 사용하면 블로그 설정에서 추가 한 각 항목을 사용자 정의 할 수 있습니다. 이 화면에서는 관련 기사, 다음 및 이전 링크, 작성자 영역을 사용자 정의합니다. 모든 텍스트, 색상, 그림자 등을 제어합니다.
이 예에서는 형태 의견의. 필드 색상(포커스 및 비포커스), 테두리, 텍스트, 색상, 버튼 등을 제어합니다. 버튼의 배경색, 필드의 포커스 색상을 변경하고 필드에 테두리를 추가하고 반지름을 변경했습니다.
Divi Toolbox 라이센스
두 가지 중에서 선택할 수 있습니다. 면허 :
- 일반 라이선스 (프로젝트에 사용)-€ 49,00
- 확장 라이선스 (무제한 프로젝트에 사용)-€ 169,00
기억해야 할 것
이 플러그인의 많은 기능과 설정에 깊은 인상을 받았습니다. 특히 Divi 빌더로 작성되지 않은 블로그 게시물에 유사한 기사, 이전 및 다음 링크, 작성자 영역을 추가 할 수 있다는 사실이 마음에 듭니다. 스크롤 막대도 좋은 터치입니다.
헤더 텍스트와 같은 Divi 모듈의 몇 가지 설정에 액세스 할 수 있지만 해당 설정에 대한 자세한 정보를 제공합니다. 몇 가지 추가 조정 (예 : 댓글 영역의 그림자 효과, 더 많은 로고 옵션, 소셜 미디어 아이콘 위치 등)을 추가하고 싶습니다.
가장 쉬운 방법으로 Divi에 수많은 새로운 효과를 추가하려면 Divi Toolbox를 우회하십시오.
