Các thanh chân trang cố định có thể là một cách thuận tiện để giữ thông tin quan trọng trên Website ở nền trước khi người dùng tương tác với nội dung trang của bạn trên bất kỳ thiết bị nào.
Như với Divi, thanh chân trang thường tồn tại dưới dạng phần tử tĩnh ở cuối trang sau nội dung chân trang chính. Chúng bao gồm những thứ như văn bản bản quyền và các biểu tượng truyền thông xã hội.
Tuy nhiên, nếu bạn không ẩn nội dung của thanh chân trang ở cuối trang, bạn có thể tạo thanh chân trang tùy chỉnh nổi ở cuối màn hình trong khi người dùng cuộn.
Trong hướng dẫn này, chúng tôi sẽ thiết kế một thanh chân trang cố định được cá nhân hóa hoàn toàn bằng cách sử dụng trình tạo chủ đề Divi. Điều này sẽ hữu ích cho bạn để giữ cho những phần nội dung nhỏ nhưng quan trọng đó luôn trong tầm mắt.
Kết quả có thể
Dưới đây là tổng quan về thanh chân trang cố định mà chúng tôi sẽ thiết kế.
Cách thêm mẫu thanh chân trang cố định để tải xuống trên trang Divi của bạn
CẢNH BÁO!: 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 thanh 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ủ đề của 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 “Tạo chân trang tùy chỉnh” từ danh sách thả xuống.
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 "Build From Scratch".
Phần 2: Tạo thanh chân trang cố định
Bây giờ chúng ta đang chỉnh sửa từ trình chỉnh sửa bố cục mẫu, chúng ta có thể bắt đầu thiết kế thanh chân trang cố định. Sau khi hoàn tất, bạn sẽ có một thanh chân trang cố định với ba cột là nội dung đã sẵn sàng.
Thêm bố cục ba cột vào dòng
Đầu tiên, thêm bố cục ba cột vào hàng.
Chiều cao phần
Khi ba cột được thêm vào, hãy cung cấp chiều cao xác định cho phần. Điều này rất quan trọng để tạo khoảng trống ở cuối trang nơi điện thoại cố định cuối cùng sẽ kết thúc. Chúng tôi cũng sẽ xóa phần đệm trên và dưới mặc định.
Để đặt chiều cao và phần đệm, hãy mở cài đặt phần và cập nhật các mục sau:
- Chiều cao: 85px
- Đệm: cao 0px, thấp 0px
Cài đặt dòng
Bây giờ phần của chúng tôi đã sẵn sàng, chúng tôi đã sẵn sàng tùy chỉnh hàng để phục vụ như một thanh chân trang cố định. Mở cài đặt hàng, sau đó cập nhật thông tin sau:
bối cảnh
- Màu nền: # 1a1e36
Kích thước và khoảng cách
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
- Đệm: 0px lên, 0px xuống, 3% trái, 3% phải
CSS tùy chỉnh
Mặc dù hàng được cố định, chúng tôi muốn chiều cao của hàng khớp với chiều cao của phần mẹ để khoảng trống ở cuối trang chứa hàng đúng cách. Và, chúng tôi muốn đảm bảo rằng nội dung của hàng luôn được căn chỉnh theo chiều dọc. Để thực hiện việc này, hãy thêm CSS tùy chỉnh sau vào phần tử chính của hàng:
Văn phòng
chiều cao: kế thừa! quan trọng; hiển thị: flex; align-items: centre;
Điện thoại
chiều cao: kế thừa! quan trọng; hiển thị: khối;
Định vị cố định
Để làm cho đường thẳng cố định sao cho nó nổi ở cuối màn hình, chúng ta cần tạo cho nó một vị trí cố định ở vị trí trung tâm dưới cùng như sau:
- Vị trí: cố định
- Vị trí: trung tâm thấp hơn
Phần 2: Tạo nội dung của thanh chân trang cố định
Tại thời điểm này, chúng ta có một thanh chân trang ở vị trí cố định đã sẵn sàng cho nội dung. Chúng tôi có thể thêm bất kỳ nội dung nào chúng tôi muốn vào mỗi cột trong số ba cột. Nhưng vì đây là "thanh" chân trang được giới hạn chiều cao 85 pixel nên chúng ta cần giới hạn số lượng nội dung. Vì lý do này, chúng tôi sẽ thêm một menu nhỏ có biểu tượng động và 4 mục menu trong cột 1. Trong cột 2, chúng tôi sẽ thêm văn bản bản quyền với năm hiện tại động. Trong cột 3, chúng tôi sẽ thêm ba biểu tượng theo dõi mạng xã hội.
Thêm một menu vào cột 1
Trong cột 1, thêm một mô-đun menu.
Chọn menu
Sau đó chọn một trong các menu mà bạn đã tạo trên Website. Đảm bảo giữ các mục menu ở mức 4 hoặc ít hơn.
Thêm logo trang web dưới dạng nội dung động
Đối với menu biểu trưng, chúng tôi sẽ thêm biểu trưng của trang web một cách tự động. Nhấp vào biểu tượng “Sử dụng nội dung động” trong khi di chuột qua khu vực xem trước biểu trưng. Sau đó chọn Biểu trưng của trang web từ danh sách thả xuống.
Gỡ bỏ nền
Sau đó, xóa nền menu mặc định để nó trong suốt.
Thiết kế thực đơn
Tại thời điểm này, chúng tôi đã sẵn sàng thêm một số thiết kế vào menu. Đối với thiết kế này, chúng tôi sẽ giữ cho nó đơn giản và nhỏ gọn. Cập nhật các thông số thiết kế sau:
- Menu phông chữ: Cầu vượt
- Màu văn bản menu: # b59c61
- Hình ảnh màu nâu đỏ: 100%
- Chiều cao logo tối đa: 50px
Thêm văn bản bản quyền vào cột 2
Khi menu đã được đặt, hãy chuyển đến cột 2 để thêm văn bản bản quyền.
Thêm một mô-đun văn bản
Thêm một mô-đun văn bản mới vào cột 2.
Tự động thêm ngày hiện tại với trước và sau văn bản
Ở đây, chúng ta sẽ sáng tạo với nội dung động để hiển thị năm hiện tại trong văn bản bản quyền. Điều này sẽ đảm bảo rằng năm sẽ được cập nhật tự động cho vòng đời của trang web.
Để thực hiện việc này, hãy nhấp vào biểu tượng “Sử dụng nội dung động” và chọn “Ngày hiện tại” từ danh sách.
Trong cửa sổ bật lên Ngày hiện tại, cập nhật các thông tin sau:
- Trước:
- 01
Copyright ©
- Sau:
- 01
| Tous Droits Reservés
- Định dạng ngày : tùy chỉnh
- Định dạng ngày tùy chỉnh : 20 năm
Định dạng văn bản
Cập nhật thiết kế văn bản và lề như sau:
- Phông chữ: Cầu vượt
- Màu văn bản: # b59c61
- Sắp xếp văn bản: trung tâm
- Lề (chỉ dành cho điện thoại): 10 pixel ở trên cùng, 10 pixel ở dưới cùng
Điều này hỗ trợ văn bản bản quyền.
Thêm các biểu tượng theo dõi phương tiện truyền thông xã hội vào cột 3
Trong cột 3, thêm một mô-đun theo dõi phương tiện truyền thông xã hội.
Thêm mạng xã hội
Trên tab Nội dung, thêm các mạng xã hội cần thiết vào trang web. Đối với thiết kế này, chúng tôi sử dụng ba trong số chúng.
Cài đặt theo dõi phương tiện truyền thông xã hội
Tiếp theo, cập nhật cài đặt thiết kế cho tất cả các biểu tượng theo dõi phương tiện truyền thông xã hội như sau:
- Căn chỉnh mô-đun: thẳng (máy tính để bàn và máy tính bảng), trung tâm (điện thoại)
- Màu biểu tượng: # 1a1e36
- Sử dụng kích thước biểu tượng tùy chỉnh: CÓ
- Kích thước phông chữ biểu tượng: 16px (máy tính để bàn và máy tính bảng), 14px (điện thoại)
Cập nhật cài đặt phương tiện truyền thông xã hội
Để cập nhật thiết kế của biểu tượng mạng xã hội riêng lẻ, hãy mở cài đặt cho mạng đầu tiên và cập nhật những điều sau:
- Màu nền: #ffffff
- Đệm: 8 pixel ở bên phải, 8 pixel ở bên trái
- Các góc được làm tròn: 8px
Mở rộng cài đặt phương tiện truyền thông xã hội cho mọi người
Sau đó mở menu cài đặt bổ sung cho mạng đầu tiên và chọn " Mở rộng kiểu mặt hàng " trong danh sách. Trong cửa sổ bật lên Mở rộng Kiểu, chọn Mở rộng Kiểu trong " Cột này "Và bấm vào Mở rộng .
Điều này sẽ mở rộng thiết kế đến phần còn lại của các biểu tượng trong cột.
cuối cùng suy nghĩ
Thêm một thanh chân trang cố định có ý nghĩa trong một số trường hợp. Chiều cao của quầy bar đủ nhỏ để không làm rối mắt hoặc chiếm quá nhiều diện tích trên thiết bị di động. Và nó cung cấp cho bạn khả năng thêm các CTA quan trọng để có chuyển đổi tốt hơn và trải nghiệm người dùng mượt mà hơn.
Đối với thiết kế này, khoảng trống ở cuối trang được tạo bằng cách đặt chiều cao cố định cho phần và sau đó cho phép dòng cố định kế thừa chiều cao của phần (mặc dù nó được cố định).
Các nguồn lực khác
Dưới đây là danh sách ressources bổ sung có thể giúp bạn tạo trong thiết kế trang web của mình với Divi.
- Cách tạo trang đăng nhập tùy chỉnh trên Divi
- Cách thêm mô-đun điều hướng độ rộng đầy đủ trên Divi
- Cách tạo thanh trượt toàn màn hình trên Divi
- Cách thêm bộ đếm tròn trên Divi
