Hộp công cụ Divi là một plugin bổ sung nhiều hiệu ứng mới cho Divi thường yêu cầu CSS, JavaScript, PHP hoặc nhiều plugin riêng lẻ. Các hiệu ứng rất dễ sử dụng, tùy chỉnh và mang lại cho bạn Website Tạo thêm sự lấp lánh để nổi bật giữa đám đông.

Các hiệu ứng bao gồm các thay đổi trên toàn bộ trang web, menu di động mới, hình nền hạt, chân trang, tiện ích con, kiểu, hoạt ảnh, tiêu đề, điều hướng, bố cục blog mới, Bản trình bày Divi ở các vị trí mới, tùy chỉnh màn hình đăng nhập, cửa sổ bật lên, v.v. Nhiều tính năng có thể được tùy chỉnh với các bổ sung mới cho tùy biến chủ đề. Hộp công cụ Divi không hoạt động với plugin Extra hoặc Divi Builder.

Cài đặt chung của Hộp công cụ Divi

cài đặt hộp công cụ divi.png

Màn hình tùy chọn Hộp công cụ Divi được thêm vào menu bảng điều khiển Divi. Cài đặt được bật ở đây, nhưng các điều chỉnh được thực hiện trong tùy biến.

Các thiết lập chung bao gồm kiểu tiêu đề chung, trang đăng nhập tùy chỉnh, ẩn dự án, quyền tải lên các loại tệp SVG, thanh cuộn trình duyệt tùy chỉnh, cài đặt trang 404 (chọn bố cục và ẩn đầu trang và chân trang) và các biểu tượng xã hội (kích hoạt kiểu, mở tệp). tab mới và thêm nhiều biểu tượng).

hộp công cụ divi tham số chung.png

Thêm biểu tượng xã hội sẽ mở ra một trường nơi bạn có thể nhập URL của 9 mạng xã hội bổ sung.

thêm mạng xã hội divi.png

Đây là tab Chung của tùy biến, nơi tôi có thể điều chỉnh các cài đặt mà tôi đã bật. Cài đặt bao gồm tiêu đề và phông chữ, thanh cuộn của trình duyệt và màn hình đăng nhập. Trong ví dụ này, tôi đã thực hiện một số điều chỉnh đối với văn bản và nội dung h1, đồng thời thêm kiểu dáng vào thanh cuộn. Tôi cũng đã thêm nhiều biểu tượng xã hội hơn.

tùy chỉnh hộp công cụ divi.png

Đối với màn hình đăng nhập, bạn sẽ cần thực hiện các thay đổi của mình và sau đó đăng xuất hoặc xem màn hình trong một trình duyệt khác.

màn hình đăng nhập tùy chỉnh divi.png

Đây là màn hình đăng nhập của tôi sau khi thêm hình nền, logo và thay đổi kích thước, màu sắc của các trường và văn bản. Cần một chút tinh chỉnh vì bạn không thể nhìn thấy màn hình khi thực hiện các thay đổi của mình.

Cài đặt tiêu đề Hộp công cụ Divi

cài đặt tiêu đề divi.png

Các thiết lập cú đội đầu thêm kiểu vào menu, kích hoạt menu thả xuống tùy chỉnh, thêm nút menu CTA, thay đổi logo trên docker, kích hoạt logo lớp phủ và thêm bố cục Divi trước khi duyệt trang chủ, cũng như 'một định dạng trước và sau. duyệt các trang khác.

cấu hình thanh công cụ divi.png

Nút menu CTA cho phép bạn áp dụng CTA cho mục menu đầu tiên hoặc cuối cùng hoặc áp dụng một lớp tùy chỉnh. Nó cung cấp CSS và hướng dẫn về nơi để thêm nó.

tùy biến tiêu đề divi.png

Đây là tùy biến cho tiêu đề. Tôi đã thêm một bố cục phía trên menu (trong ví dụ này, nó chỉ là một mô-đun văn bản, nhưng bạn có thể thêm một bố cục đầy đủ nếu muốn). Biểu trưng chồng lên nhau có hình hộp vuông với hiệu ứng đổ bóng. Tôi đã thay đổi kích thước logo từ 200 thành 140 và chuyển các biểu tượng xã hội vào menu chính. Tôi đang di chuột qua mục menu Dịch vụ để bạn có thể thấy hiệu ứng CSS.

Cài đặt chân trang trong Hộp công cụ Divi

cài đặt chân trang divi.png

Cài đặt chân trang bao gồm chân trang dính, chân trang hiển thị, tùy chỉnh menu và widget, tùy chỉnh nút Back to Top (thêm tùy chọn liên kết nút tùy chỉnh) và thêm trước và sau khi bố trí chân trang.

tùy chỉnh chân trang divi.png

Trong ví dụ này, tôi đã thay đổi phông chữ tiêu đề và phông chữ menu thành tất cả các chữ hoa và tăng khoảng cách. Tôi cũng đã điều chỉnh màu khi di chuột và thêm một biểu tượng bên cạnh văn bản di chuột. Tôi đã thêm một bố cục sau bố cục. Điều này sử dụng một chân trang được tiết lộ (đó là lý do tại sao văn bản nằm sau mô-đun văn bản ở trên).

Tôi đã tạo kiểu cho nút đầu trang để hiển thị văn bản. Nó có hiệu ứng đổ bóng và tôi đã điều chỉnh vị trí của nó. Tôi để lại các màu mặc định. Tôi đã căn giữa văn bản dưới cùng và các biểu tượng xã hội. Đối với hiệu ứng di chuột, tôi đã chọn Grow (nó cũng bao gồm thu nhỏ, di chuyển lên, xuống, chao đảo, nhịp tim, jello và xung).

Cài đặt cho Divi Toolbox Mobile

cài đặt hộp công cụ cho mobile.png

Các thiết lập di động bao gồm một trường để nhập điểm ngắt menu trên thiết bị di động (chiều rộng chính xác của màn hình khi menu thay đổi từ máy tính để bàn sang thiết bị di động), kiểu tùy chỉnh, chỉnh sửa biểu trưng, ​​chọn hiệu ứng nhấp vào biểu tượng bánh hamburger , thu gọn menu con lồng nhau và kích hoạt. một số lớp CSS. Các lớp CSS cho phép bạn đảo ngược các cột và văn bản ở giữa, mô-đun và các nút.

Divi-Toolbox-Mobile-Settings-for mobile.png

Đây là bản xem trước của trang trong Google Chrome có tính năng Phản hồi được chọn. Ngay sau khi tôi lấy kích thước màn hình xuống dưới 980px, nó sẽ thay đổi thành biểu tượng di động mà tôi đã chọn và thêm menu hamburger có hình động mà tôi đã chọn.

menu di động anim.png

Trong màn hình này, tôi đang tạo kiểu cho màu nền, màu nền di chuột và menu hamburger menu trên thiết bị di động. Tôi đã thay đổi văn bản của các mục menu chính thành chữ hoa và để nguyên tiêu chuẩn văn bản CTA. Tôi cũng đã thay đổi nền cho mục menu CTA. Bạn cũng có thể điều chỉnh kích thước menu và biểu tượng.

Cài đặt blog Hộp công cụ Divi

cài đặt blog divi toolbox.png

Các thông số của  Blog của chúng tôi. cho phép bạn tùy chỉnh thanh bên và tiện ích con, meta bài đăng, trang lưu trữ và danh mục, chọn bố cục (từ 6 tùy chọn), ẩn thanh bên lưu trữ và tùy chỉnh văn bản nút Đọc thêm.

Đối với các bài đăng đơn lẻ, bạn có thể chọn bố cục thanh bên, ẩn tiêu đề bài đăng, thêm hộp tác giả, thêm liên kết trước và sau, thêm bài đăng liên quan và tùy chỉnh hình thức của các bình luận. Bạn cũng có thể thêm bố cục điều hướng bài đăng tùy chỉnh vào các bài đăng đơn lẻ, lưu trữ, danh mục, trang tác giả và trang kết quả tìm kiếm.

tùy chỉnh sự xuất hiện của blog divi.png

Đối với trang blog, tôi đã thêm hiệu ứng đổ bóng vào thanh bên, thay đổi phông chữ và kiểu dáng, tạo kiểu cho hộp tìm kiếm và tăng kích thước của đường viền. Nó sử dụng bố cục xen kẽ và tôi đã tùy chỉnh văn bản cho nút đọc thêm.

kết quả tùy biến giao diện blog divi.png

Ví dụ này là bố cục 6. Tôi đã tùy chỉnh lại màu chữ cho phần meta và thêm màu di chuột. Tôi cũng đã tùy chỉnh nền cho nút Tìm hiểu thêm.

thay đổi phông chữ của nội dung blog divi.png

Các bài đăng trên blog cá nhân cho phép bạn tùy chỉnh từng mục bạn đã thêm trong cài đặt blog. Trong màn hình này, tôi tùy chỉnh các bài viết được liên kết, các liên kết tiếp theo và trước đó, cũng như khu vực tác giả. Bạn kiểm soát tất cả văn bản, màu sắc, bóng, v.v.

phần tùy chỉnh bình luận divi.png

Trong ví dụ này, tôi đang tùy chỉnh hình thức của các bình luận. Bạn kiểm soát màu trường (tiêu điểm và không tiêu điểm), đường viền, văn bản, màu sắc, nút, v.v. Tôi đã thay đổi màu nền của nút, màu tiêu điểm của trường, thêm đường viền cho trường và thay đổi bán kính.

Giấy phép hộp công cụ Divi

Bạn có sự lựa chọn giữa hai cấp giấy phép :

  • Giấy phép thông thường (được sử dụng cho một dự án) - € 49,00
  • Giấy phép mở rộng (để sử dụng cho các dự án không giới hạn) - € 169,00

Những gì bạn phải nhớ

Tôi rất ấn tượng với số lượng tính năng và cài đặt trong plugin này. Tôi đặc biệt thích thực tế là nó có thể thêm các bài viết tương tự, các liên kết trước đó và tiếp theo cũng như khu vực tác giả vào các bài đăng trên blog không được tạo bằng trình tạo Divi. Thanh cuộn cũng là một điểm nhấn hay.

Bạn có thể truy cập một số cài đặt trong mô-đun Divi, chẳng hạn như văn bản tiêu đề, nhưng nó cung cấp nhiều chi tiết hơn cho các cài đặt đó. Tôi muốn thêm một số chỉnh sửa (ví dụ: hiệu ứng bóng cho khu vực nhận xét, nhiều tùy chọn biểu trưng hơn, vị trí biểu tượng mạng xã hội, v.v.).

Nếu bạn muốn thêm một tấn hiệu ứng mới vào Divi theo cách đơn giản nhất có thể, Divi Toolbox đáng để đi đường vòng.