Bỏ qua đến nội dung chính

Cách tạo ngăn kéo hoạt hình trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Ngăn kéo chân trang là phần bổ sung hữu ích cho bất kỳ trang web nào 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 kéo chân trang là nơi chứa nội dung web (như phần Divi) có thể được mở và đóng bằng cách nhấp vào một nút hoặc di chuột qua nó. Nó giống như có một ít dự trữ cho nội dung cao cấp.

Trong hướng dẫn này, chúng ta sẽ thiết kế một ngăn kéo chân trang nổi trong Divi. Chúng tôi sẽ thêm ngăn chân trang vào khu vực chân trang tổng thể của mẫu trang web để ngăn chân trang có thể truy cập trên toàn trang 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ẫu này sẽ thay thế mẫu trang web 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 đang hoạt động.

Để nhập mô hình ngăn kéo chân cố định vào trang web của riêng bạn, hãy 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', đề phòng trường hợp trước đó bạn đã có thứ gì đó trong mẫu trang web mặc định mà bạn chưa có. không muốn thay thế.

Sau đó bấm vào nút Nhập.

Nhập mô hình divi

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.

Lưu các thay đổi bố cục divi

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.

Lựa chọn trình chỉnh sửa Divi

Sau đó, chọn tùy chọn "Build Global Footer" từ danh sách thả xuống.

Thêm chân trang mô hình divi

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".

Chọn divi mô hình cấu trúc sẵn

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".

Sử dụng mô hình divi

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.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Xóa phần không cần thiết

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.

Chân trang Divi

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.

Sửa đổi nhãn chân trang divi

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.

ngăn kéo chân cố định

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.

Lựa chọn bố cục divi

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
Khoảng cách divi confiuration

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:

Cấu hình giãn cách phần Divi

Để 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.

Ngăn kéo footer divi
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.

Chọn biểu tượng ngăn kéo chân trang divi
Thiết kế Blurb

Sau đó đưa ra văn bản trình bày như sau:

  • Màu nền: # 081540
Sửa đổi nền divi

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
Tùy chỉnh nút blurb divi
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:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • 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.

Chỉnh sửa thiết kế nút divi
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
Sửa đổi vị trí nút divi
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
Nút quay lại divi

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
Xác định một bộ chọn divi

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ó.

Biến đổi phần divi

Để đư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
Thêm lớp có divi chuyển đổi

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
Sửa đổi vị trí trên góc divi

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.

Ẩn phần trên thiết bị di động

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.

Kiểm soát phần divi khả năng hiển thị

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.

Thêm mã mô-đun

Sau đó dán đoạn mã sau vào vùng mã:

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

.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 );   
Thêm mô-đun mã divi

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.

Lưu sửa đổi divi

Cũng lưu các thay đổi trong trình tạo chủ đề.

Lưu thay đổi

Kết quả cuối cùng

Bây giờ chúng ta có thể vào bất kỳ trang nào trên trang web của bạn để 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 giúp bạn quảng cáo nội dung một cách thú 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ó với 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.

Dịch từ: Elegant Themes

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
0 cổ phiếu
cổ phiếu
tweet
Enregistrer