Các tiêu đề cuối cùng còn lại đã xuất hiện! Bây giờ chúng tôi có thể hoàn thành chúng và hoàn thành tất cả các tiêu đề tùy chỉnh của chúng tôi. Trong video màn hình này, chúng tôi sẽ làm việc trên các tiêu đề tùy chỉnh cho phần Demo do John Neiner thực hiện.
Điều thú vị là John là họa sĩ minh họa duy nhất cung cấp các tác phẩm nghệ thuật trong Illustrator. Điều đó thật tốt cho chúng tôi trong trường hợp này vì chúng tôi có thể mở rộng nó đến bất kỳ kích thước nào chúng tôi cần với chất lượng đầy đủ. Nhìn lại, có lẽ chúng ta nên để nó vectơ (như SVG) và có lẽ sử dụng dự phòng raster. Nhưng trong video màn hình này, chúng tôi khám phá các tùy chọn lưu raster khác nhau và kết thúc với JPG.webp.
Có một số nhầm lẫn khi lưu trong đó tôi không thể tìm thấy tệp đã lưu vì tôi đang tìm sai tên. Tình hình DUH thế giới thực.
Sau đó, chúng tôi chuyển sang WordPress và lặp lại quy trình của chúng tôi để chuẩn bị các mẫu sẵn sàng để tạo kiểu. Chúng tôi đảm bảo rằng các trang demo tải một tệp CSS đặc biệt chỉ dành cho chúng. Điều đó có nghĩa là thêm logic vào tệp header.php ( is_page_template()) của chúng tôi . Chúng tôi tìm thấy mẫu chính xác cho khu vực trình diễn (sử dụng thử nghiệm cổ điển trong đó chúng tôi thực hiện một thay đổi rõ ràng đối với mẫu và thấy nó được phản ánh trên trang web thực.
Chúng tôi loại bỏ tất cả rác cũ khỏi mẫu đó và đưa nó lên phong cách mới của chúng tôi. Chúng tôi viết một chút đánh dấu cần thiết để trang nằm trong lưới và có vùng tiêu đề chỉ dành cho tiêu đề tùy chỉnh mới này và tất cả những điều đó.
Cuối cùng, chúng tôi áp dụng đồ họa tiêu đề tùy chỉnh của mình làm hình nền cho phần tử trình bao bọc với đủ phần đệm ở trên cùng (dựa trên tỷ lệ phần trăm) để vừa với đồ họa ở trên cùng (có kích thước để vừa vặn). Chúng tôi thậm chí còn đặt một gradient đằng sau hình ảnh mờ dần từ màu xanh lá cây sâu sang màu đen, vì vậy nó giống như bạn đang đi sâu hơn vào đại dương khi bạn cuộn xuống.
Còn nhiều việc phải làm trên trang này, nhưng chúng tôi đã hoàn thành tiêu đề và mẫu ở trạng thái tốt!