fbpx
Tự thiết kế website

Dùng Customize để tuỳ biến Header, Footer & Style wordpress

Bài 7 trong series Tự thiết kế website bằng WordPress, chúng ta sắp về đích rồi & chỉ còn một số cài đặt nữa trước khi website hoàn thiện.

Đó chính là sử dụng tuỳ biến Customize trong WP để hoàn thiện các phần như Header & Footer , Style và Menu của web.

Tuỳ biến Header wordpress

Header là gì? Header chính là tên gọi chung của phần đầu trang web, bao gồm:

  • Top bar menu ( Thanh Header trên cùng )
  • Header main ( Thanh header chính ở giữa )
  • Herder bottom ( Thanh Header ở dưới )

Hãy vào Giao diện > Tuỳ Biến > Header

Đây chính là phần để tuỳ chỉnh 3 thanh header, trong hình là phần Header Bottom mình hiện đang không bỏ gì vào nên nó không xuất hiện.

Website demo của mình đang hiện bỏ phần Top bar đi vì không cần sử dụng tới. Nếu bạn thích có thể thêm vào nhé.

Bây giờ mình sẽ hướng dẫn các bạn các phần tử nhỏ để tuỳ biến phần Header nhé!

  • HTML 1,2,3,4,5 : Đây là phần để thêm nội dung chữ
  • Top bar menu, Main menu : Đây là các menu xuất hiện, mình sẽ hướng dẫn chi tiết ở phần dưới.
  • Newstetter : Phần gửi thư
  • Social icon, search icon, Nav icon : Những icon mạng xã hội, icon tìm kiếm, icon menu dành cho giao diện điện thoại
  • Search form : Thanh tìm kiếm
  • Account, Cart, Checkout Button : Những phần này chỉ cần thiết ở những website bán hàng, không cần thiết cho blog
  • Button 1, 2 : Các nút bấm để chèn liên kết vào

Trong từng phần khi click vào sẽ hiện ra trang tuỳ chính của nó, hoặc bạn có thể bấm Shift + Click chuột vào phần xem trước trên web để tuỳ chỉnh.

Mình sẽ chỉ để lại Logo,  Main Menu, phần menu thì tí nữa khi mình cài đặt menu thì mới hiển thị được.

 

Lưu ý!!!

Tất cả ảnh tải lên wordpress đều phải chỉnh thành kích thước đầy đủ, bấm lưu rồi sau đó mới đổi lại kích thước khác để giữ được độ nét của tấm ảnh.

 

Logo & Site Identity

Sau khi xong phần Header hãy bấm quay trở lại và vào phần Logo & site indentity, đây là phần bạn có thể tuỳ chỉnh tên và khẩu hiệu của web, bên cạnh đó là logo của website.

Như vậy là tạm xong phần Header, bây giờ hãy tiếp tục tới phần Footer nhé

Tuỳ biến Footer wordpress

Footer là gì? Đây là phần chân trang web, hiển thị ở cuối cùng trang web.

Bạn có thể xem tấm hình dưới đây để dễ hình dung:

Đây chính là phần chân trang Footer của website mình, thường phần này sẽ dùng để để lại thông tin liên hệ, thể hiện các chuyên mục cũng như bài viết.

Và một vài thông tin ngoài như Fanpage, Google Map hoặc một ưu đãi gì đó.

Tương tự như Header, Footer cũng chia ra làm 3 tầng khác nhau hiển thị theo thứ tự từ trên xuống:

  • Footer 1
  • Footer 2
  • Absolute Footer

Tuỳ chỉnh Footer 1

Ở đây sẽ có những phần như Columns để chọn có bao nhiêu cột xuất hiện, mình thường để là 3 hoặc 4.

Nếu website chứa có nhiều mục thì nên để là 3.

Đến đây chúng ta cần phải cài đặt các Widget vào Footer của mình, tương tự như ở Sidebar trong bài 5, hãy cài trước 2 mục là Danh mục nội dung và Bài viết liên quan.

Trong mục Widget ở trên > chọn Edit Footer Widget > Chọn Footer 1 ( Nếu có thông báo gì cứ bấm đồng ý để tới được giao diện Footer )

Tiếp tục gỡ bỏ các khối không cần thiết, trong trường hợp này là mục Archives, để lại Categories và thêm mục Flatsome Recent Posts.

Ấn vào tiêu đề từng mục để đổi thành tiếng việt.

Ở cột số 3 mình sẽ thêm các Social Icon vào, hãy bấm dấu cộng để thêm Tiêu đề và tiếp tục bấm dấu cộng để thêm cái Social icon.

 

Hãy giữ phím Shift và chọn Tiêu đề với Social Icon > Chọn dấu 3 chấm ở dưới > Chọn Nhóm để gôm 2 phần tử lại chung 1 cột.

Footer 2 mình sẽ tạm bỏ qua vì hiện không có quá nhiều thông tin.

 

Tuỳ chỉnh Absolute Footer

Phần này chính là thanh màu đen cuối trang web, thường sẽ để thể hiện bản quyền của website bên tay trái và những phương thức thanh toán bên tay phải cho web bán hàng.

Quay lại phần Footer đề điều chỉnh phần này nhé, mình đã chỉnh backgroud color để màu nền thành đen và sửa chữ lại 1 xíu là Demo DR.

Bây giờ phần tiếp theo mà cần tuỳ chỉnh chính là tông màu của website, font chữ và kích thước chữ…

Tuỳ chỉnh Style wordpress

Vào Style > Color

Tông màu yêu thích của mình là xanh dương, nên mình sẽ chỉnh cả Primary Color & Secondary Color thành màu xanh, lúc này các nút bấm trên web sẽ tự động chuyển thành màu xanh.

Font chữ mặc định của Flatsome nhìn hơi cứng, nên mình sẽ đổi thành font Montseratt mình hay dùng.

Thoát khỏi Color và vào mục Typography

Ở đây sẽ có phần chỉnh font chữ của Base (đoạn text), Headline ( Tiêu đề), Navigation ( Mục menu), Alt Font. Mình sẽ đổi tất cả thành Montseratt.

Lúc này bạn đã thấy font chữ toàn website đã được thay đổi. Bạn có thể tự chọn font yêu thích của riêng mình nhé ^^

Cài đặt menu cho website wordpress

Còn phần cuối cùng sẽ là để thể hiện Menu của web.

Vào Giao diện > Menu

Nhập thông tin menu mới như trên ảnh rồi bấm Tạo trình đơn nhé!

Thêm những phần cần thiết như Trang chủ, các Chuyên mục bạn muốn vào.

Ở cuối mỗi thanh có dấu mũi tên thả xuống, bạn có thể đổi Trang chủ 2 thành Trang chủ, sau đó bấm lưu Menu là được.

Quay lại trang chủ để tận hướng thành quả nha.

Nếu là đến bước này bạn làm đúng, website của bạn sẽ giống như web Demo của mình https://demo.digitalbyrick.com/

Phù, vậy là đã kết thúc bài 7 của quá trình làm website, chỉ còn một bài cuối cùng nữa chính là cài đặt thêm những Plugin cần thiết nhất trong WP để hoàn thiện 100% website nhé.

<< Bài 7 : Dùng Customize để tuỳ biến Header, Footer & Style wordpress

>> Bài 8 : 11 Plugin wordpress cần thiết nên cài đặt

Đánh giá 5 sao nếu thấy bài viết hữu ích nhé ^^
[Tổng: 2]