Trong video màn hình cuối cùng, chúng tôi đã chụp lại bức ảnh đó từ iStockPhoto về cabin và rừng đầy tuyết. Chúng tôi đã thả nó xuống nền, đằng sau khu vực nội dung chính và thanh bên của tài liệu Photoshop của chúng tôi và nó vừa vặn ở đó, theo kiểu của tiêu đề của các khu vực khác trên trang web. Giữa các video truyền hình, tôi cũng viết một số bản sao cho trang. Tôi đã muốn phát sóng màn hình đó, nhưng viết bản sao là một trong những việc mất nhiều thời gian và thậm chí còn phức tạp hơn việc chỉnh sửa thiết kế. Mặc dù vậy, chúng ta có nói về nó một chút.
Trong Photoshop, tôi đã “giấu” dòng chữ “The Lodge” đằng sau những cái cây bằng cách phóng to một chút khi che ảnh. Tôi đã không thực hiện một công việc siêu chi tiết về nó, nhưng bạn không thực sự phải làm như vậy khi bạn phóng to và hình ảnh cũng sẽ được thu nhỏ trên web.
Chúng tôi tạo một mẫu trang duy nhất chỉ dành cho trang này (page-lodge.php). Sử dụng quy ước nhận xét PHP /* Template Name: The Lodge */thì mẫu đó sẽ hiển thị trong trang thả xuống Mẫu trang của chúng tôi khi tạo một Trang mới trong WordPress. Điều này cung cấp cho chúng tôi tất cả sự kiểm soát mà chúng tôi cần. Chúng tôi có thể chỉnh sửa HTML trong mẫu này và nếu chúng tôi cần CSS duy nhất cho trang này, chúng tôi có thể sử dụng logic có điều kiện và liên kết nó với tệp header.php. Nhìn lại, sẽ hợp lý hơn khi sử dụng tệp functions.php để liên kết CSS duy nhất nhằm giữ cho “view” (header.php) sạch hơn, nhưng đó là điều cần thiết cho lần sau.
Đồ họa nền cho tiêu đề này sẽ được gọi là “Đồ họa anh hùng” - nghĩa là đồ họa lớn (theo nghĩa đen và kích thước phù hợp) quan trọng đối với giao diện / nội dung của trang. Vì chúng tôi đang cố gắng chịu trách nhiệm về hiệu suất (chúng tôi muốn trang web tải nhanh), chúng tôi thực sự không nên cung cấp đồ họa khổng lồ này cho các màn hình nhỏ. Điều này trong CSS dễ dàng hơn nhiều so với HTML. Chúng tôi sử dụng các truy vấn phương tiện “đảo ngược” ( min-widththay vì max-width) để nói “khi màn hình rộng như thế này hoặc rộng hơn, hãy sử dụng hình ảnh này… khi nó thậm chí còn rộng hơn, hãy sử dụng hình ảnh này”, v.v. Theo mặc định, chỉ hình ảnh nhỏ nhất được sử dụng, nhưng hình ảnh đó sẽ bị ghi đè khi trình duyệt rộng hơn yêu cầu trang. Một chút suy nghĩ về thiết bị di động đầu tiên ở đó.
Cuối cùng, chúng tôi có một khung vẽ đẹp (nếu bạn muốn) để làm việc trên tất cả các trang của The Lodge.