Ngăn kéo dưới cùng là những bổ sung hữu ích cho bất kỳ Website, vì chúng lưu trữ nội dung bổ sung mà người dùng có thể dễ dàng truy cập. Ngăn chân trang là nơi chứa nội dung web (như phần Divi) có thể mở và đóng bằng cách nhấp vào nút hoặc di chuột qua chúng. Nó giống như có một kho lưu trữ nhỏ cho nội dung cao cấp.
Trong hướng dẫn này, chúng tôi sẽ thiết kế ngăn chân trang nổi trong Divi. Chúng tôi sẽ thêm ngăn kéo chân trang vào khu vực chân trang chung của mẫu trang web để ngăn chân trang có thể truy cập được trên toàn trang web với nội dung chân trang bình thường.
Với quy trình chúng tôi sẽ sử dụng, bất kỳ phần Divi nào (và nội dung của nó) đều có thể được chuyển đổi thành ngăn kéo chân trang trong vài phút.
Cách thêm mẫu ngăn kéo chân trang vào trang web Divi của bạn
Việc thêm mô hình này sẽ thay thế mô hình mẫu trang web theo mặc định (nếu bạn có) trên trang Divi của bạn. Chúng tôi khuyên bạn nên thêm nó vào một trang web thử nghiệm để bạn không làm rối tung bất cứ thứ gì trên một trang web đang hoạt động.
Để tự nhập mẫu ngăn chân trang cố định Website, giải nén tệp zip tải xuống để truy cập tệp JSON.
Sau đó, chuyển đến bảng điều khiển WordPress và đi tới Divi> Theme Builder.
Sau đó nhấp vào biểu tượng tính di động ở trên cùng bên phải của trang.
Trong cửa sổ tính di động, hãy chọn tệp JSON bạn vừa giải nén và chọn tùy chọn “Tải xuống bản sao lưu trước khi nhập”, chỉ trong trường hợp trước đó bạn đã có thứ gì đó trong mẫu trang web mặc định mà bạn không muốn ghi đè.
Sau đó bấm vào nút Nhập.
Cuối cùng, lưu các thay đổi vào trình tạo chủ đề và hiển thị trang trực tiếp để xem thanh chân trang cố định.
Bây giờ đến phần hướng dẫn, được không?
Phần 1: Thêm chân trang toàn cục
Trình tạo chủ đề Divi cho phép bạn thay thế chân trang mặc định bằng chân trang mới bằng cách cập nhật mẫu trang web mặc định.
Để tạo chân trang toàn cục, hãy chuyển đến bảng điều khiển WordPress và đi tới Divi> Trình tạo chủ đề. Sau đó nhấp vào không gian “Thêm chân trang chung” bên trong Mẫu trang web mặc định.
Sau đó, chọn tùy chọn "Build Global Footer" từ danh sách thả xuống.
Thêm bố cục được xác định trước vào bố cục chân trang toàn cầu
Thao tác này sẽ triển khai Trình chỉnh sửa bố cục mô hình, nơi bạn sẽ ngay lập tức được nhắc với ba lựa chọn về cách bạn muốn bắt đầu xây dựng. Chọn tùy chọn "Chọn một bố cục xác định trước".
Trong cửa sổ bật lên Tải từ Thư viện, hãy tìm bố cục trang đích văn phòng phẩm. Sau đó nhấp vào "Sử dụng bố cục này".
Xóa nội dung không mong muốn khỏi bố cục
Khi bố cục được tải trong trình chỉnh sửa, hãy mở hộp bật lên Lớp bằng cách nhấp vào biểu tượng lớp trong menu cài đặt. Sau đó, xóa tất cả các phần của bố cục ngoại trừ hai phần cuối cùng.
Di chuyển và dán nhãn hai phần
Sau khi các phần được xóa, bạn sẽ có hai phần, một phần có tiêu đề "Chân trang" và phần còn lại có tiêu đề "Cách hoạt động". Di chuyển phần "Chân trang" lên đầu bố cục.
Thay đổi từ ngữ trong phần dưới để đọc “Ngăn kéo chân trang”. Đây sẽ là phần chúng tôi sẽ sử dụng làm nội dung của ngăn kéo chân trang của chúng tôi.
Phần 2: Tạo ngăn kéo chân cố định
Bây giờ chúng ta đã chỉ định một trong các phần làm footer và phần kia làm ngăn footer, chúng ta đã sẵn sàng để bắt đầu xây dựng ngăn footer cố định của mình. Hãy bắt đầu bằng cách tạo biểu tượng blurb mà chúng ta sẽ sử dụng để chuyển đổi ngăn chân trang.
Tạo nút ngăn kéo chân trang
Thêm một dòng mới
Trong phần chân trang dưới cùng, thêm một hàng mới vào một cột.
Gắn nhãn cho hàng mới là "Nút ngăn kéo" vì đây là hàng sẽ chứa nút được sử dụng để chuyển đổi mở và đóng ngăn kéo. Sau đó di chuyển dòng lên đầu phần.
Hàng đệm
Trước khi thêm một mô-đun, hãy mở cài đặt hàng và cập nhật phần đệm như sau:
- Đệm: cao 0px, thấp 0px
Phần đệm
Sau đó mở cài đặt trong phần "Ngăn kéo chân trang" và cập nhật phần đệm như sau:
Để tạo nút có thể nhấp để chuyển đổi ngăn chân trang, chúng tôi sẽ sử dụng mô-đun làm nổi bật với một biểu tượng. Và, chúng tôi sẽ tạo cho nó một hình giọt nước độc đáo bằng cách kết hợp hình vuông của thùng chứa Blurb pod với biểu tượng hình tròn.
Đây là cách.
Thêm một mô-đun Blurb
Thêm một mô-đun văn bản trình bày vào dòng "Nút ngăn kéo" ở đầu phần.
Nội dung / biểu tượng Blurb
Tiếp theo, xóa nội dung tiêu đề và nội dung mặc định và chọn biểu tượng mũi tên trỏ đến góc trên cùng bên trái (xem ảnh chụp màn hình). Chúng tôi đang sử dụng biểu tượng xoay một phần vì chúng tôi sẽ xoay nó sau.
Thiết kế Blurb
Sau đó đưa ra văn bản trình bày như sau:
- Màu nền: # 081540
Sau đó cập nhật các thông số thiết kế như sau:
- Màu biểu tượng: #eeeeee
- Biểu tượng hình tròn: CÓ
- Màu vòng tròn: # 081540
- Sử dụng kích thước phông chữ biểu tượng: CÓ
- Kích thước phông chữ biểu tượng: 17 pixel
Kích thước văn bản trình bày
Bây giờ cung cấp cho mô-đun chiều cao và chiều rộng như sau:
- Chiều rộng: 30px
- Chiều cao: 30px
Điều này sẽ làm cho biểu tượng hình tròn tràn vào vùng chứa văn bản để tạo ra hình giọt nước.
Vị trí Blurb
Sau đó cung cấp cho văn bản trình bày một vị trí tuyệt đối ở trung tâm trên cùng của phần.
- Vị trí: Tuyệt đối
- Địa điểm: Trung tâm hàng đầu
Cài đặt chuyển đổi Blurb
Bây giờ chúng ta có thể sử dụng các tùy chọn biến đổi để xoay blurb / icon lên và đặt nó ngay trên vùng chứa phần. Bây giờ khi chúng ta ẩn phần đó trong cửa sổ trình duyệt, biểu tượng sẽ vẫn hiển thị / có thể nhấp được.
Cập nhật các mục sau:
- Chuyển đổi Dịch trục X: -50%
- Chuyển đổi phép tịnh tiến trục Y: -250%
- Biến đổi trục quay Z: -45 độ
Sau đó, xóa hoạt ảnh biểu tượng mặc định:
- Hình ảnh / Biểu tượng Hoạt hình: Không có Hoạt hình
Chúng tôi sẽ sử dụng JQuery để chuyển đổi ngăn kéo, vì vậy chúng tôi cần nhắm mục tiêu văn bản / biểu tượng như một phần tử có thể nhấp với một lớp CSS mà chúng tôi sẽ sử dụng sau này trong mã. Thêm lớp CSS sau:
- Lớp CSS: ngăn kéo mục tiêu
Cài đặt phần ngăn kéo chân trang
Bây giờ chúng ta sẽ ẩn phần "Ngăn kéo chân trang" bằng cách sử dụng tùy chọn chuyển đổi dịch. Mở cài đặt phần và cập nhật phần sau:
- Chuyển đổi Dịch trục Y: 100%
Cái hay của việc sử dụng phép biến đổi ở đây là các giá trị phần trăm dựa trên kích thước thực của mục. Do đó, 100% trên trục Y sẽ tương đối trực tiếp với chiều cao của phần (cho biết nó là gì tại bất kỳ thời điểm nào). Nói cách khác, phần tử sẽ được di chuyển xuống khoảng cách chính xác như chiều cao của chính nó.
Để đưa "Ngăn kéo chân trang" trở lại chế độ xem, chúng tôi sẽ cần đảo ngược bản dịch chuyển đổi mà chúng tôi vừa thêm vào phần. Để làm điều này, chúng tôi sẽ cần nhắm mục tiêu phần tử có lớp CSS và vô hiệu hóa chuyển đổi bản dịch bằng cách nhấp vào biểu tượng (đưa toàn bộ phần trở lại vị trí ban đầu).
Thêm một lớp CSS vào phần ngăn kéo chân trang
Trong tab nâng cao, thêm lớp CSS sau:
- Lớp CSS: has-Transform
Phần ngăn kéo chân cố định vị trí
Bước cuối cùng, chúng ta cần cố định ngăn footer để nó (có biểu tượng) nổi ở cuối cửa sổ trình duyệt.
Cập nhật vị trí của phần "Ngăn kéo chân trang" như sau:
- Vị trí: cố định
- Vị trí: phía dưới bên trái
- Chỉ số Z: 13
Tắt nội dung di động
Bởi vì bạn sẽ có một số lượng hạn chế nội dung ngăn kéo chân trang phù hợp với cả máy tính bảng và điện thoại (do chiều cao màn hình hạn chế), bạn sẽ cần phải tắt / ẩn các mục không cần thiết khỏi màn hình. Trong ví dụ này, chúng ta sẽ ẩn hàng giữa của bố cục phần.
Mở cài đặt từ hàng thứ hai đến hàng cuối cùng trong phần “Ngăn kéo chân trang”. Trong tab nâng cao, hãy cập nhật tùy chọn hiển thị để tắt dòng trên điện thoại và máy tính bảng.
Thêm mã tùy chỉnh
Để thêm chức năng nhấp và chuyển đổi trong ngăn chân trang, chúng ta cần thêm CSS và JQuery tùy chỉnh vào trang. Để thực hiện việc này, hãy tạo một mô-đun mã mới trong mô-đun Blurb được sử dụng cho nút.
Sau đó dán đoạn mã sau vào vùng mã:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Lưu thay đổi
Hãy nhớ lưu bố cục trước khi thoát khỏi trình chỉnh sửa.
Cũng lưu các thay đổi trong trình tạo chủ đề.
Kết quả cuối cùng
Bây giờ chúng ta có thể truy cập bất kỳ trang nào của bạn Website để xem kết quả cuối cùng.
cuối cùng suy nghĩ
Hy vọng ngăn kéo chân trang nổi sẽ giúp ích cho bạn khuyến khích nội dung một cách vui vẻ và dễ tiếp cận. Giống như bất kỳ ngăn kéo nào, bạn có thể lấp đầy nó bằng bất cứ thứ gì bạn có thể nghĩ ra.
Tài nguyên khác
Dưới đây là danh sách các hướng dẫn có thể giúp bạn hoàn thành nhiều hơn với các tính năng bên trong của Divi.
- Cách tạo hộp công cụ chủ đề trên Divi
- Cách tạo phần quảng cáo hoạt hình trên Divi
- Cách tùy chỉnh lưới trên Divi
Dịch từ: Elegant Themes
