Tùy chỉnh Header và Footer cho theme Newspaper

10726 lượt xem09/12/2016 Học thiết kế web Wordpress, Kiến thức
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Theme Newspaper là một trong những theme có Panel tùy chỉnh sâu và phức tạp bậc nhất trong số các Theme mình đã dùng. Có thể nói, gần như 90% trong số những người dùng Newspaper tại Việt Nam chưa thực sự hiểu hết mọi tính năng trong Theme Panel này.

Bởi vì nó phức tạp và có quá nhiều thành phần để tùy chỉnh. Các bạn phải lưu ý những tính năng nào thực sự cần thiết thì enable. Không thì disable nhé! (Nặng lắm đó).

theme panel newspaper
Theme panel của Giao diện Newspaper

Tùy chỉnh Header

Header style:

Có tới 12 kiểu hiển thị Menu. Đa phần mình thấy nó không ấn tượng lắm! Ngoại trừ cái số 7 là kiểu hiển thị menu truyền thống mà nhiều website ở Việt Nam đang dùng. Đó là hiển thị Menu có Logo ngang ở góc trái, đối diện là thanh Menu và icon tìm kiếm ở bên phải.

Top bar:

Mình khuyên các bạn nên để Disable. Chỉ Enable trong trường hợp website của bạn có nhiều đề mục cần show cho độc giả mà thanh Menu chính không hiển thị được hết, bạn có thể cho phép hiện Menu và các thành phần khác ở Top bar (thường là các website tin tức có quá nhiều chuyên mục nhỏ). Các thành phần nhỏ trong Top bar cũng khá dễ hiểu,  mình không cần phải hướng dẫn nhiều phần này.

top bar
Một ví dụ về Menu chính và Menu được hiển thị trên Top bar

Main Menu:

Main Menu chứa các tùy chỉnh cấu hình cho thanh Menu chính của các bạn, các bạn nên cấu hình Main Menu như sau:

main-menu

  • Header Menu: Chọn Menu bạn muốn hiển thị làm Menu chính.
  • Mega Menu Preloader: Tùy chọn này cho phép bạn hiển thị nội dung của phần menu con sẽ xổ xuống từ thanh Menu chính. Nên chọn: No Preloading nhé!
  • Sticky Menu: Chọn tùy chọn này nếu bạn muốn Menu chính sẽ luôn nổi trên website dù bạn trượt thanh kéo xuống đến đâu. Nên chọn: Always Sticky nhé!
  • Logo on Sticky Menu: Cho phép bạn chọn logo hiển thị trên Sticky Menu. Nên chọn: Mobile logo (Logo rút gọn, bản nhỏ hơn logo chính).
menu
Ví dụ về Logo trên Header Menu
sticky menu
Ví dụ về Logo trên Stiky Menu (Mobile logo)

Logo & Favicon:

  • Logo upload và Retina Logo upload: Bạn tải logo cho website, nhớ chọn file ảnh của logo định dạng .png nhé!
  • Favicon: là hình ảnh sẽ hiển thị ngay góc trái của tab trên trình duyệt như ví dụ dưới đây. Bạn upload hình ảnh logo .png kích thước khoảng 20×20 pixel là ok rồi.
favicon
Ví dụ về favicon cho các website
  • Logo Alt Attribute: Nhập dòng mô tả cho logo của bạn, dòng này không hiển thị trên trang web mà chỉ có tác dụng trong SEO thôi.
  • Logo Title Attribute: Nhập tên cho logo của bạn, dòng này sẽ hiển thị khi bạn rê chuột vào logo và giữ chuột khoảng 2s như hình dưới:
logo title attribute
logo title attribute
  • Text logo và Text Logo Tagline: Bạn nhập đầy đủ và chính xác nội dung vào hai mục này nhé! Những thông tin này sẽ hiển thị trên website nếu bạn chọn Menu kiểu số 9, 10 và 11.

Logo for Mobile

  • Logo Bobile & Retina Logo Mobile: Bạn upload logo lên cho phiên bản di động nhé!
  • iOS Bookmarklet: Bạn upload logo hoặc hình ảnh bất kỳ lên để nó hiển thị trong Bookmarklet của trình duyệt safari trên hệ điều hành iOS.

Tùy chỉnh Footer

Phần tùy chỉnh Footer của theme Newspaper cũng khá đơn giản. Quan trọng nhất vẫn là việc bạn chọn được bố cục footer (template) rồi điền các thông tin cần thiết thôi.

footer setting
footer setting

Footer Settings:

Cho phép bạn thực hiện các thao tác tùy chỉnh footer như bố cục, thông tin liên hệ, mạng xã hội, bản quyền,…

Footer template:

Bạn có thể lựa chọn các kiểu hiển thị cho Footer. Có tới 14 kiểu hiển thị khác nhau cho bạn chọn. Tuy nhiên, mình vẫn thường dùng kiểu số 9 hoặc 14 để có thể tùy chỉnh nội dung tùy ý cho từng cột footer. Đối với một số Footer template khác, bạn có thể phải kết hợp sử dụng cả Widger mới tạo được Footer ưng ý nhé!

Instargram:

Mục này cho phép bạn kết nối với Instargram để hiển thị hình ảnh nổi bật ở phần dưới của Footer. Tắt mục này nếu các bạn không có nhu cầu.

Footer Info Content:

  • Footer Logo & Footer Retina  Logo: Bạn được phép tải logo lên để hiển thị ở cột 1 của Footer như phần khoanh màu vàng trong hình dưới:
footer
Một bố cục của Footer
  • Logo ALT Attribute & Logo Title Attribute: Cũng nhập giống như ở phần Header đã nói ở trên.
  • Footer text: Phập nội dung hiển thị ngay bên dưới Logo của cột 1 Footer như phần khoanh màu cam ở hình trên.
  • Your email: Nhập địa chỉ email liên hệ. Tuy nhiên, theo mình thấy, nếu nhập email vào ô này thì khi hiển thị, email được sắp xếp mình nó một dòng, hơi khác biệt so với phần text bên trên. Do đó, không cần nhập vào ô này.
  • Show Social Icon: Bạn có thể nhập các link kết nối với các mạng xã hội để hiển thị biểu tượng mạng xã hội như phần khoanh màu xanh lá ở hình trên.

Footer Background:

  • Footer background: Cho phép bạn tùy chỉnh ảnh nền cho phần footer. Mình khuyên các bạn không nên dùng background vì trang web sẽ load nặng hơn, chỉ đề màu nền cho footer là ổn nhất.
  • Repeat, Size, Position và Backround Opacity: mấy phần này chỉ sử dụng được khi bạn upload background cho footer, cũng khá dễ hiểu nên mình không đề cập nữa.

Sub Footer Setting:

  • Show Sub-footer: Cho phép bạn lựa chọn ẩn hay hiện footer phụ của trang web như hình bên dưới:
sub-footer
Tùy chọn cho phép bạn hiện thanh Sub-Menu ở cuối chân trang
  • Footer Copyright Text: Nhập thông tin bản quyền của website (Ví dụ: Giuseart.com 2016-2017)
  • Copyright symbol: Cho phép hiển thị biểu tượng bản quyền.
  • Footer Menu: Bạn có thể lựa chọn một Menu bất kỳ để hiển thị ở Sub-footer như thanh menu của mình ở hình trên.

Lời kết

Như vậy, chúng ta đã thực hiện xong các tùy chỉnh cho Header và Footer trong theme Newspaper rồi. Chúc các bạn làm website đẹp và ưng ý với giao diện này nhé!

3.6/5 - (5 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: NinhBinhWeb là thương hiệu chuyên thiết kế website, thành viên nhỏ xinh của GiuseArt, nếu bạn cần làm website, xem qua các mẫu websitetại đây.

Rất cám ơn bạn đã quan tâm, hy vọng có cơ hội được hợp tác với bạn!

Bài viết mới cập nhật:

Các sản phẩm phù hợp với nhà thiết kế đồ họa

Dưới đây là một số thiết bị phù hợp mình sưu tầm và đánh giá tích cực, bạn có thể tham khảo:

Bảng Vẽ Wacom Intuos S Wacom CTL- 4100

1.500.000đPhù hợp cho các bạn tập vẽ trên máy tính bằng bút wacom, hàng chính hãng rẻ đẹp và chất lượng tốt.
Xem chi tiết sản phẩm

Card đồ họa Máy tính AMD HD6770 (4G)

1.089.000đNâng cấp card đồ họa máy tính của bạn để máy chạy tác vụ nặng khỏe hơn, render hình ảnh thiết kế mượt hơn
Card tăng giá mạnh, giá này ngon

Giá Treo Màn Hình Máy Tính/ Tay Treo Màn Hình

355.000đArm treo màn hình máy tính xịn xò, cải tạo bàn làm việc của bạn trông gọn gàng và khoa học hơn nhiều
Nhận mã giảm giá 40%

Màn hình Xiaomi 27 inch 2K, màn hình 75hz

2.490.000đMàn hình xịn buộc phải có nếu muốn ngồi máy tính lâu không lo đau mắt, màn hình Xiaomi thì xịn khỏi bàn rồi, 2K xịn xò
Xem chi tiết sản phẩm

Giá đỡ màn hình Riser Bền với 4 USB

425.000đGiá đỡ trang trí màn hình máy tính, phù hợp cho các bạn decor góc làm việc trông hiện đại và gọn gàng hơn!
Xem chi tiết sản phẩm

MÀN HÌNH CŨ - Dell 24 + 27 Inch Full HD 2k UltrSharp

3.890.000đCon màn hình mình dùng 8 năm rồi vẫn xịn, màn UltraSharp của Dell thì khỏi phải bàn nhiều, ngồi 8 tiếng không đau mắt
Xem chi tiết sản phẩm

Đầu đọc thẻ nhớ đa năng: SD, TF, USB

55.000đCóp file qua lại giữa thẻ nhớ với máy tính rất tiện lợi, lúc nào mình cũng phải thủ sẵn sàng kẻo lúc có việc không thấy đâu
Giá rẻ chốt luôn

Sim 4G 1 Năm Data 500Gb/Tháng

500.000đDùng mạng nhiều nên đi ra ngoài không có mạng là không chịu được, mình sắm con sim chạy cả năm full 4G không lo gì
4G cả năm khỏi lăn tăn

Chuột không dây câm Logitech M331

369.000đMình đang dùng hằng ngày đây, chuột nhỏ mà có võ, và đặc biệt là nó im lặng, không kêu tạch tạch khi bấm!
Làm đêm phải sắm

Đồ gia dụng linh tinh nhưng hay

Dưới đây là một số đồ linh tinh mình đã từng sủ dụng và đánh giá tích cực, bạn có thể tham khảo:

Ly Giữ Nhiệt Iced Americano Inox 304 Đúc Liền Khối Cao Cấp Có Nắp Đậy Tặng ống hút inox

45.000đRa quán nét thấy họ hay xài về tìm mua bằng được, hàng xịn, bỏ đá đặt cạnh bàn làm việc từ sáng đến trưa vẫn y nguyên
Mua sản phẩm ngay

Gối tựa cổ cao cấp, tựa cổ, chống mỏi cổ mỏi lưng phù hợp cho các bạn ngồi nhiều

228.000đNGồi máy tính nhiều là cơ thể phản đối ngay, mình sắm gối tựa cổ về đỡ mỏi nhức hơn hẳn.
Xem sản phẩm

Máy Chiếu Mini Siêu Nét KAW K560 Siêu Rẻ, Full HD, Kết Nối Máy Tính, Điện Thoại

1.900.000đMình mua máy chiếu về chiếu lên trần nhà cho con xem lúc chuẩn bị đi ngủ, xem hoạt hình vui
Xem sản phẩm

Quạt Tích Điện Lồng Sắt SIEGIS Quạt Để Bàn 10 Cell 2 Cấp Độ Gió Siêu Mát Động Cơ Khoẻ Độ Bền Cao

225.000đNhà có máy khoan pin nên mua thân quạt này về chạy được luôn, mình mua về chuyên dùng khi đi vệ sinh, mùa hè nóng.
Xem sản phẩm

Sạc Dự Phòng Dung Lượng 20000mah Tích Hợp Sạc Từ Tính, Dây Sạc Đa Năng, Hỗ Trợ Sạc

468.000đSạc dự phòng thì nói chung mỗi người nên có một cái, lúc đi chơi hay bí bách đưa ra sạc rất tiện lợi, hàng xịn nha!
Mua ngay

Ốp điện thoại iphone hở táo 6D viền vuông kính bảo về camera iPhone

25.000đỐp điện thoại giá rẻ thì mua vài cái về thay đổi dần cho bõ côgn ship nha anh em, mình mới dặt 4-5 cái
Mua ngay

Mình mới tập làm vlog, có thể bạn cũng cần

Dưới đây là một số đồ làm vlog mình mới tham khảo và mua về sử dụng, thấy hay nên chia sẻ, các bạn có thể tham khảo:

Chân Quay Máy Ảnh Điện Thoại Tripod 360° - Hỗ Trợ Dùng Điện Thoại Máy Ảnh

249.000đMua cái chân quay về đề quay vlog, khỏi cần nhờ vợ cầm quay chút thì rung rung không dùng được!
Xem sản phẩm

Hộp Chống Ẩm Cho Máy Ảnh 10L + Hạt Hút Ẩm + Ẩm Kế + Khăn lau lens Full Combo

70.000đMua máy ảnh bắt buộc phải có tủ chống ẩm, tủ thì giá cao lắm nên mua tạm hộp chống ẩm, mùa Bắc nồm ẩm nhiều
Xem sản phẩm ngay

Camera Wifi Xoay 360 Độ Thông Minh Full HD 1080P, Hỗ Trợ Thẻ Nhớ, Đàm Thoại 2 Chiều, Báo

229.000đNhà mình mua 3-4 cái để mấy góc coi cả nhà và cả vườn, giá thì rẻ, đi đâu có kết nối wifi cũng xem được!
Giá rẻ nhất sàn

Máy quay cầm tay DJI Pocket 2, quay phim 4K, gimbal 360 độ quay trước sau

8.200.000đBắt đầu quay vlog thì mua con này rất ok, giá rẻ, mua cũ khoảng 4tr thôi, mua mới có bảo hành thì đắt hơn chút.
Nhận mã giảm giá 40%

Gimbal DJI Osmo Mobile SE, DJI Osmo Mobile 7, Osmo Mobile 8 - BH 1 năm - Chính Hãngg

1.899.000đGimbal dành riêng cho điện thoại, quay vlog không lo bị rung hoặc mất nét, hàng chính hãng DJI có bảo hành
Xem chi tiết

Vòng đeo cổ giá đỡ điện thoại hỗ trợ tháo nhanh bằng silicon cao cấp hít magsafe quay chụp video

299.000đCái này để kẹp điện thoại treo trước ngực quay video góc nhìn thức nhất trong lúc 2 tay bận không cầm được điện thaoị
Xem chi tiết

Bộ gối tựa xe hơi công thái học cao cấp, mềm mại êm ái, nâng tầm nội thất xe sang trọng, cá tính

650.000đĐi lại nhiều ngồi ô tô nhức mỏi lưng quá nên mình mua cái gối tựa lưng này, rất êm và thoáng mồ hôi.
Nhận mã giảm giá 20%

Bàn Làm Việc & Học Tập Gấp Gọn ICON ,Khay Đựng Ly, Thiết Kế Đa Năng Cho Laptop Và Sách Vở

98.000đThay đổi góc làm việc chỉ việc mở bàn này ra ngồi làm việc với laptop thì chuẩn bài
Xem sản phẩm

Bàn Làm Việc, Bàn Gaming Nội Thất Măng Chân Sắt nhiều phiên bản, mặt gỗ 1m2,1m, chắc chắn, bền đẹp

400.000đMình không nghĩ là giá lại rẻ thế, có 400K mà được bộ bàn đẹp, decor cũng hợp
Xem sản phẩm

Giới thiệu Host xịn cho anh em!