Thiết lập header (đầu trang)

Để bắt đầu thức hiện thì việc đầu tiên bạn cần đăng nhập vào website. Nếu bạn đã đăng nhập rồi thì truy cập vào quản trị website của bạn bằng cách đến trang sitemeta.net > tài khoản > website của tôi. Bạn có thể xem hướng dẫn đăng nhập vào trang quản trị website tại đây.

Hoặc truy cập nhanh bằng cách gõ tên miền miễn phí hoặc tên miền tuy chỉnh và thêm /wp-admin.

Ví dụ:

• Tên miền miễn phí của website tôi là webdemo.sitemeta.net thì tôi sẽ gõ webdemo.sitemeta.net/wp-admin lên thanh địa chỉ website của trình duyệt. Sau đó ấn Enter.
• Tên miền tùy chỉnh của website tôi là webdemo.com thì tôi sẽ gõ webdemo.com/wp-admin lên thanh địa chỉ website của trình duyệt. Sau đó ấn Enter.

---

Ở đây, SiteMeta đã thiết lập header sẵn cho bạn với 3 vùng menu lần lượt là before header, header, after header. Và được hiển thị như bên dưới:

Bạn có thể quản lý các vùng header tại SiteMeta Builder > Bố cục

Và bạn sẽ thấy có 3 bố cục đã được tạo. Đối với After header và Before header tôi để Type là Part, đối với Header tôi để Type là Header.

Sự khác biệt giữa type Header và type Part

• Type Header: Có thể cho type Header là đại diện của một khu vực lớn ở đầu trang web. Nếu trang web chỉ có type header nhưng không có part thì trang web hiển thị đúng với cấu trúc website.
• Type Part: Có thể cho type Part là các phần nhỏ bên trong một đại diện nào đó (có thể là Header, Footer hoặc Post,…). Đối với part của header thì như là thêm một vùng nào đó vào header để giúp phân chia dễ dàng hơn.

Ví dụ:

Khi tôi thiết lập cho header ở dạng rê chuột kéo trang xuống thì header sẽ chạy theo. Nếu tôi không chia part thì nguyên cụm header sẽ chạy theo khi tôi kéo trang.

Và nếu tôi chia cụm thông tin liên hệ + mạng xã hội bên trên thành 1 part riêng biệt được gắn với type Header thì khi tôi kéo trang, chỉ Header chạy theo.

Như vậy, chúng ta đã phân biệt được giữa type Header và type Part rồi. Cũng như tại sao chúng ta nên dùng Part trong 1 vùng lớn. Đương nhiên, tùy trường hợp thuộc ý tưởng website của bạn mà quyết định có dùng Part hay không nhé!

Hướng dẫn tạo mới Type Header

Hiện tại SiteMeta đã tạo sẵn cho bạn 3 bố cục Before header (Part) – Header – After header (Part) rồi. Trường hợp website của bạn chưa có bố cục Header mong muốn hoặc muốn tạo thêm một bố cục type Header khác để thay thế thì bạn làm như sau:

Trong menu SiteMeta Builder > Bố cục, bạn click Add New

Điền tên bố cục (ở đây tôi đã có Header rồi nên sẽ đặt tên là Header 2), chọn kiểu Themer Layout và Layout header. Sau đó click Add Themer Layout.

Sau đó đến trang thiết lập cơ bản của Type Header và bạn sẽ thấy có các nhóm như sau:

• SiteMeta Builder
• Themer Layout Settings
• Danh mục SiteMeta Builder
• Ảnh đại diện

Đầu tiên bạn cần thiết lập mục Themer Layout Settings trước, bởi vì nhóm này sẽ quyết định Header của bạn sẽ hiển thị ra sao trên website. Các mục trong nhóm này lần lượt là:

• Sticky : Giúp cho header chạy theo khi kéo trang
• Sticky breakpoint (hiển thị khi Sticky là yes) : Giúp header nhỏ lại và chạy theo khi kéo trang
• Shrink (hiển thị khi Sticky là yes) : Đặt điều kiện hiển thị trên các thiết bị. Ví dụ bạn có thể chỉ cho header chạy theo khi kéo trang trên thiết bị laptop hoặc máy tính bàn thôi, còn điện thoại và máy tính bản thì không kích hoạt chức năng này. Đây là chức năng linh động mà bạn có thể sử dụng tùy theo ý tưởng website của bạn.
• Overlay : Có thiết lập header trong suốt hay không?
• Background (hiển thị khi Overlay là yes) : Nếu bạn chọn là transparent thì header của bạn sẽ trong suốt hoàn toàn, dù bạn có cố gắng thay đổi màu sắc của header thì nó vẫn trong suốt không có màu. Nhưng nếu bạn đặt thành Default thì header sẽ ở kiểu là trong suốt nhưng bạn có thể đổ màu sắc cho nó.
• Location : Bạn có thể thiết lập header hiện thị ở bất cứ trang nào bạn muốn. Ở đây tôi đã thiết lập là Entire Site (hiển thị ở tất cả các tràng).
• Rules : Bạn có thể đặt điều kiện hiển thị cho header tại đây. Đây là một chức năng nâng cao và tôi sẽ nói phần này ở bài hướng dẫn khác trong chuyên mục Tips Nâng Cao. Và bạn sẽ gần như không cần sử dụng mục này, trừ khi bạn đang cố gắng làm một ý tưởng nào đó phức tạp.

Sau khi thiết lập xong Themer Layout Settings, bạn có thể click nút Đăng.

Tại sao tôi lại đăng vội như vậy?

–> Trong hướng dẫn này tôi muốn mọi thứ thật cơ bản và đơn giản. Đối với 3 nhóm còn lại thì sau khi click nút đăng, chúng ta sẽ chỉ làm việc với nhóm SiteMeta Builder. Còn 2 nhóm Danh mục và Ảnh đại diện nó dành cho gói dịch vụ Agency khi bạn cần lưu lại mẫu giao diện header để sử dụng lại cho các dự án website sau. Và trong phần dành cho Agency này tôi sẽ nói ở một bài viết khác sâu hơn.

Ok, click nút Đăng xong, thì chúng ta có thể bắt đầu click vào Mở SiteMeta Builder để tiến hành thiết kế một giao diện header theo ý tưởng của bạn.

Hướng dẫn thiết kế giao diện cho Type Header

Trong phần này, tôi nghĩ sẽ tốt hơn nếu tôi trình bày hướng dẫn là một video. Video này tôi đã đăng trên kênh Youtube của SiteMeta Editor và kết nối hiển thị ngay bên dưới.

Vì video khá dài nên tôi chia thành 2 video lần lượt là thiết kế giao diện cho Type header và Type Part (before header).

Hướng dẫn tạo mới Type Part (before header)

Việc tạo type part cho header cũng giống như tạo type header, các bạn truy cập SiteMeta Builder > Bố cục. Sau đó click Add new.

Điền tên bố cục (ở đây tôi đã có Before Header rồi nên sẽ đặt tên là Before Header 2), chọn kiểu Themer Layout và thay vì ở type Header layout là Header thì ở Part Layout là Part. Sau đó click Add Themer Layout.

Tiếp đến ở mục thiết lập, chọn Position (vị trí hiển thị) là Before header.  Có nghĩa là giao diện này sẽ hiển thị trước giao diện type header đã tạo trước đó (hay còn gọi là hiển thị bên trên header).

Tại Location, vẫn chọn Entire Site để hiển thị trên tất cả các trang.

Sau đó click Đăng.

Cuối cùng, click vào Mở SiteMeta Builder để bắt đầu thiết kế Part Before Header theo ý tưởng riêng của mình. Dưới đây là một đoạn video về thiết kế part before header theo ý tưởng riêng của tôi.

Chúc bạn thành công!