Giới thiệu

Trong bài học này, chúng ta sẽ tạo và tùy chỉnh đầu trang và chân trang. Các giao diện khối cho phép chúng ta xây dựng toàn bộ trang web bằng cách sử dụng các khối, bao gồm các trang, bài viết, mẫu và các phần mẫu. Chúng ta đã khám phá việc lồng các khối và sử dụng các mẫu khối. Trong buổi học này, tôi sẽ tạo và tùy chỉnh đầu trang và chân trang của trang web của mình bằng cách sử dụng các mẫu có sẵn từ giao diện của tôi. Các mẫu đầu trang và chân trang cung cấp một nền tảng vững chắc để bắt đầu, và hầu hết bố cục đã được hoàn thành cho bạn.

Trang chủ tĩnh và trang bài viết

Trước khi bắt đầu, tôi muốn lưu ý rằng tôi đang sử dụng giao diện khối Twenty Twenty-Four. Nếu tôi vào Cài đặt, Đọc, bạn sẽ thấy rằng tôi đã đặt một trang chủ tĩnh và trang bài viết. Và vì tôi đã làm điều này, nếu chúng ta vào mục trang và mở trang chủ, chúng ta sẽ thấy rằng trang chủ đã được gán vào mẫu trang mặc định, giống như các trang khác trong menu điều hướng của tôi.

Các mẫu đầu trang và chân trang

Hãy bắt đầu. Chúng ta sẽ vào Trình soạn thảo trang web, nơi chúng ta có thể chỉnh sửa và cập nhật các mẫu của mình. Lưu ý rằng tại thời điểm này, tất cả các mẫu của chúng ta đều chia sẻ cùng một đầu trang và chân trang. Vì vậy, nếu chúng ta mở mẫu trang, chẳng hạn, chúng ta sẽ thấy nó giống như mẫu 404 và mẫu bài viết đơn. Điều này có nghĩa là nếu chúng ta tùy chỉnh phần mẫu đầu trang và chân trang hiện tại, nó sẽ tự động cập nhật tất cả các mẫu mà nó có. Nhưng nếu tôi thay thế đầu trang hoặc chân trang trên một mẫu, tôi sẽ cần phải thay thế nó thủ công trên tất cả các mẫu khác mà tôi sẽ sử dụng nó.

Thêm một mẫu đầu trang

Không chần chừ nữa, tôi sẽ mở mẫu trang và bắt đầu tùy chỉnh đầu trang và chân trang. Hãy bắt đầu với đầu trang và mở Chế độ xem danh sách. Tôi muốn thay thế đầu trang, vì vậy tôi sẽ nhấp vào ba dấu chấm dọc và sau đó chọn Thay thế đầu trang. Bây giờ, tôi có thể chọn từ một loạt các mẫu có sẵn từ giao diện của mình. Tôi sẽ chọn Đầu trang bên trong hình nền toàn chiều rộng. Sau khi chọn, tôi sẽ bắt đầu chỉnh sửa. Tôi sẽ đảm bảo chọn khối Bìa và sau đó thay thế hình nền bằng một hình ảnh tôi đã tải lên thư viện media của mình. Tiếp theo, tôi sẽ chọn khối Logo Trang Web và tải lên một hình ảnh trong suốt mà tôi đã lưu làm logo trong thư viện media của mình. Sau đó, tôi sẽ chọn lại khối Bìa, mở Kiểu và thay đổi độ mờ thành không vì tôi đã chọn một hình ảnh sáng. Sau khi hoàn tất, tôi sẽ chọn khối Tiêu đề Trang Web và chọn một màu văn bản tối hơn. Sau đó, tôi sẽ nhấp vào ba dấu chấm dọc bên cạnh Kiểu chữ, chọn Họ font và chọn một font mới. Tôi cũng muốn phóng to tiêu đề trang, vì vậy tôi sẽ đặt kích thước tùy chỉnh.

Sau đó, chúng ta có thể chuyển sang khối Điều hướng. Một khi khối Điều hướng được chọn, tôi sẽ mở Kiểu, thay đổi màu văn bản, thay đổi họ font và phóng to menu điều hướng của mình bằng cách đặt kích thước tùy chỉnh. Bước cuối cùng tôi muốn là thêm một số đệm xung quanh khối Hàng của mình. Vì vậy, tôi sẽ mở Kiểu và các kích thước bên dưới và thêm nhiều đệm hơn để tạo thêm không gian xung quanh văn bản. Và sau đó đầu trang mới của chúng ta đã hoàn tất. Bước tiếp theo là lưu và sau đó cập nhật các mẫu khác của tôi với đầu trang mới này mà tôi đã tạo bằng cách sử dụng các mẫu. Vì vậy, ví dụ, hãy mở mẫu 404 của chúng ta và thay thế đầu trang. Bây giờ bạn sẽ thấy nó dưới phần: Các phần mẫu hiện có. Chúng ta có thể lưu và sau đó thực hiện theo cùng quy trình cho tất cả các mẫu liên quan khác.

Tùy chỉnh một mẫu chân trang

Bây giờ, chúng ta có thể quay lại mẫu trang và chuyển sang chân trang. Trong trường hợp này, tôi sẽ không thay thế chân trang; tôi chỉ đơn giản là cập nhật mẫu hiện có, và sau đó nó sẽ tự động cập nhật trên tất cả các mẫu khác. Đầu tiên, tôi sẽ phóng to khối Logo Trang Web và thêm khẩu hiệu trang web của tôi vào khối Khẩu hiệu Trang Web dưới tiêu đề trang web. Bây giờ, chúng ta có thể chuyển sang ba cột bên phải. Tôi sẽ chọn tiêu đề của khối giữa và thay đổi nó thành Liên Kết Nhanh. Sau đó, tôi sẽ chọn khối Điều hướng đã được thêm với nội dung mẫu. Trong cài đặt thanh bên bên cạnh Menu, tôi sẽ nhấp vào ba dấu chấm dọc và chọn điều hướng đầu trang. Tôi cũng sẽ mở tab cài đặt và kiểm tra lại rằng định hướng là dọc. Bây giờ, chúng ta có thể chuyển sang cột tiếp theo; lần này, tôi sẽ thay thế nội dung mẫu bằng một menu điều hướng mới. Vì vậy, tôi sẽ nhấp vào Tạo menu mới và sau đó chọn trang chính sách bảo mật mà tôi đã tạo và trang điều khoản và điều kiện. Trong cột cuối cùng, tôi sẽ đảm bảo cập nhật các liên kết đến các nền tảng mạng xã hội của mình. Hiện tại, có nội dung mẫu; do đó, tôi sẽ thay thế dấu thăng bằng liên kết đúng. Và bây giờ chân trang của tôi đã hoàn tất, nhưng tôi có thể thực hiện thêm các chỉnh sửa. Sau khi lưu, chúng ta có thể chuyển sang các mẫu khác của mình, ví dụ như mẫu 404, và chúng ta sẽ thấy rằng chân trang được cập nhật tự động. Đây là chế độ xem của giao diện khi tôi truy cập trang liên hệ của mình.

Kết luận

Tôi tin rằng các mẫu đầu trang và chân trang sẽ giúp bạn một khởi đầu và cung cấp cho bạn một nền tảng vững chắc cho thiết kế đầu trang và chân trang của bạn.

4.2 – Tạo và tùy chỉnh đầu trang và chân trang

You must be logged in to access this course