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

10712 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: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

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

Các khóa học thiết kế sáng tạo

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

Học Corel Draw chuyên nghiệp trong 7 ngày

299.000đ

Phù hợp cho các bạn học nghề quảng cáo, vì 80% các cơ sở in ấn quảng cáo vẫn dùng Corel Draw để thiết kế và xuất file in.

Nhận mã giảm giá 40% ngay

Logic Và Thực Hành Thiết Kế UI/UX

599.000đ

Phù hợp cho các bạn học thiết kế website, hiểu về logic và nguyên tắc thiết thiết kế để có giao diện website đẹp

Nhận mã giảm giá 40% - 15 slot cuối

Digital Painting Nhập Môn (Vẽ môi trường)

699.000đ

Học Digital Painting là vẽ tranh trên máy tính, sử dụng chuột hoặc bảng vẽ điện tử. Học cái này rất hay, bán file vẽ tốt lắm

Nhận mã giảm giá 40%

Thiết kế Converpt nhân vật trên Photoshop

299.000đ

Phù hợp cho các bạn bắt đầu học thiết kế nhân vật, hoạt dộng trong lĩnh vực phim hoạt hình 2D hoặc 3D

Nhận mã giảm giá 40%

Adobe Illustrator CC từ cơ bản đến nâng cao

299.000đ

Illustrator buộc phải học nếu bạn muốn theo mảng thiết kế logo, in ấn khổ lớn xuất file vector không bị mờ

Nhận mã giảm giá 40%

Thiết kế Quảng Cáo bằng phần mềm CorelDraw

570.000đ

90% các tiệm quảng cáo in ấn sử dụng Corel Draw, học phần mềm này để thiết kế và xuất file in biển quảng cáo

Nhận mã giảm giá 40%

Thiết kế ấn phẩm truyền thông, bao bì, tem, logo

299.000đ

90% các tiệm quảng cáo in ấn sử dụng Corel Draw, học phần mềm này để thiết kế và xuất file in biển quảng cáo

Nhận mã giảm giá 40%

Chinh Phục Adobe Illustrator cùng Thùy Uyên Training

199.000đ

Thùy Uyên là Designer khá nổi tiếng rồi, bạn search Google ra thông tin liền, đang giảm giá tới 40% khóa học nè bạn!

Nhận mã giảm giá 40%

Trở Thành Designer Chuyên Nghiệp

199.000đ

Khóa học trở thành Designer chuyên nghiệp, giúp bạn nắm bắt được các quy tắc màu sắc, quy chuẩn thiết kế cơ bản

Nhận mã giảm giá 40%

Các khóa học thiết kế website

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

Thành Thạo Thiết Kế Website Bất Động Sản Bằng WordPress

599.000đ

Phù hợp cho các bạn bán bất động sản, tự xây dựng một website bất động sản bằng wordpress với chi phí thấp

Nhận mã giảm giá 40% ngay

Thiết Kế Website Bằng WordPress Không Cần Biết Lập Trình

299.000đ

Wordpress là một hệ quản trị nội dung phổ biến, 80% các website đang sử dụng wordpress, nên học nha bạn

Nhận mã giảm giá 40%

Thiết Kế Website Bán Hàng Và Website Tin Tức Wordpress A-Z Nâng Cao

1.900.000đ

Nguyễn Văn Thế là một lập trình viên có tiếng trong giới thiết kế website, khóa học dễ hiểu và giá trị cao

Nhận mã giảm giá 40%

Thiết Kế Website Wordpress Chuẩn SEO Lên TOP Google

499.000đ

Học thiết kế website chuẩn SEO đưa từ khóa lên TOP của Google để bán hàng là hướng đi cần thiết

Nhận mã giảm giá 40%

Thiết Kế Website Bán Hàng Chuyên Nghiệp, Chuẩn SEO Cho Người Mới

299.000đ

Người mới chưa biết code có thể học khóa này để dựng website kéo thả trực quan

Nhận mã giảm giá 40%

Các khóa học marketing bán hàng

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

Ứng Dụng AI Phát Triển Bản Thân Không Giới Hạn

199.000đ

Tìm hiểu các công cụ AI hỗ trợ công việc tốt nhất hiện nay, giúp phát triển bản thân, nhân đôi năng suất và thu nhập

Nhận mã giảm giá 40% ngay

Ứng dụng AI và Chatgpt Xây dựng thương hiệu và maketing BĐS

599.000đ

Khóa học ứng dụng AI để xây dựng thương hiệu và Marketing lĩnh vực Bất động sản rất hay bạn nên học

Nhận mã giảm giá 40%

Kiếm tiền youtube bằng tạo bài hát với Suno AI

299.000đ

AI Suno giúp bạn tạo một bài hát chỉ với câu lệnh ngôn ngữ tự nhiên, sau đó tạo kênh youtube kiếm tiền

Nhận mã giảm giá 40%

Facebook Coaching - Tự Học Chạy Quảng Cáo Chuyên Nghiệp

399.000đ

Học chạy Facebook Ads về bán hàng cũng rất hiệu quả, mục tiêu học để tối ưu chi phí trên tiền quảng cáo

Nhận mã giảm giá 40%

Khóa Học Youtube AI - Thu nhập 1000$ mỗi tháng

198.000đ

Xây kênh youtube và làm nội dung với Ai, thu hút khách xem và kiếm tiền từ Youtube không thể dễ dàng hơn

Nhận mã giảm giá 40%

Thực Chiến Làm Video Reels Facebook Triệu View & Kiếm Tiền

198.000đ

Xây dựng fanpage hoặc trang cá nhân, bật kiếm tiền, dưng video Reels sau đó kiếm tiền với Facebook dễ dàng

Nhận mã giảm giá 40%

Khóa Học Bán Hàng Shopee Từ A-Z: Bí Mật Nghìn Đơn Dễ Dàng

399.000đ

Khóa học bán hàng trên Shopee từ A-Z, bí quyết của những shop vận hành cả nghìn đơn mỗi tháng

Nhận mã giảm giá 40%

Định Hướng Xây Kênh TikTok - làm video ngắn và kinh doanh

399.000đ

Định hướng xây kênh TikTok cho các bạn, hướng dẫn làm video ngắn và kinh doanh trên nền tảng TikTok

Nhận mã giảm giá 40%

Youtube MasterClass - Tất tần tật bạn cần biết về cách xây dựng 1 kênh Youtube triệu views

399.000đ

Kinh nghiệm của các chuyên gia để xây dựng một kênh Youtube triệu view kiếm tiền rất dễ

Nhận mã giảm giá 40%