Làm đẹp giao diện Website WordPress 5.0 bằng cách tối ưu font chữ

• 

Bạn có biết rằng việc làm đẹp giao diện Website WordPress không chỉ đơn giản là hình thức. Nó còn giúp bạn tăng trải nghiệm người dùng trên Website của bạn. Trải nghiệm người dùng tốt sẽ giữ chân khách hàng lâu hơn trên Web. Nếu khách hàng có trải nghiệm không tốt trên Website WordPress thì 88% sẽ không quay trở lại

Hôm nay Ryan sẽ chia sẻ với bạn về cách nâng cao trải nghiệm người dùng trên Website WordPress

Trải nghiệm người dùng trên Website WordPress

Trải nghiệm người dùng là gì?

User Experience – Trải nghiệm người dùng hay tên viết tắt là UX. Trải nghiệm người dùng được định nghĩa như là một trải nghiệm tổng thể. Trải nghiệm này có được khi bạn sử dụng một Website WordPress

Hãy nhớ lại một trải nghiệm gần đây nhất mà bạn có được khi truy cập vào một Website. Nếu Website WordPress có một giao diện người dùng tuyệt vời thì chúng ta thường coi nó là điều hiển nhiên. Một sự mặc định, nó là phải như vậy. Tiếp đó chúng ta chỉ sử dụng nó, lục tìm những thứ chúng ta đang cần tìm kiếm. Và cứ thế bạn trải nghiệm toàn bộ hoặc một phần Website WordPress đó

Tuy nhiên nếu bạn truy cập vào một Website WordPress có một giao diện tồi thì sao? Bạn sẽ cảm thấy thất vọng về nó. Cảm thấy thiếu kiên nhẫn khi cứ phải cắm mặt vào đọc những dòng chữ bé li ti. Rồi nội dung không được định dạng. Đoạn văn tràn cả sang 2 bên. Rồi tệ nhất là quảng cáo Pop-up bung ra liên tục. Nói chung là đọc thấy mệt quá! Thoát cho nhanh!

Những trải nghiệm đó sẽ lưu giữ trong một thời gian thật là dài dài. Mỗi lần bạn nhớ tới website đó bạn sẽ có một cảm xúc tiêu cực

UX phụ thuộc những yếu tố nào?

• 

Trải nghiệm người dùng trên website phụ thuộc rất nhiều các yếu tố khác nhau. Có thể liệt kê ra các yếu tố đó như là:

• Tốc độ tải trang
• Themes sử dụng cho Website WordPress có thân thiện với thiết bị di động không
• Nội dung nhất quán của toàn bộ các chủ đề
• Font chữ sử dụng trên toàn bộ Website WordPress
• Tối ưu hình ảnh trên trang
• …

Ryan sẽ đi từng chủ đề một để giúp bạn tối ưu trải nghiệm người dùng trên trang. Trong khuôn khổ bài viết này Ryan sẽ giúp bạn tối ưu font chữ trên website

Trên bất cứ một Website WordPress nào thì tỷ lệ nội dung đều chiếm trên 50%. Và nội dung theo bạn được biểu đạt bằng gì? Tất nhiên rồi, đó chính là chữ viết. Với việc tối ưu font chữ bạn có thể đạt được hiệu quả lớn để làm đẹp giao diện Website

Kiến thức hay dành cho bạn: Vì sao giao diện Blog quyết định thành bại của một Business Online

Tại sao nên bắt đầu với font chữ để tăng trải nghiệm người dùng

Để bắt đầu xây dựng một Website WordPress bạn sẽ bắt tay vào công việc sáng tạo nội dung trước. Nội dung ở đây trên Website WordPress chính là các bài viết. Một bài viết để thuận lợi cho SEO thì trung bình có độ dài khoảng trên 2,000 từ

Và khi mới bắt tay vào xây dựng Website WordPress bạn sẽ chưa thực sự có nhiều kỹ năng xử lý đồ họa. Bởi vậy việc tối ưu font chữ trước tiên sẽ giúp bạn làm đẹp giao diện Website. Tăng trải nghiệm cho khách truy cập giúp bạn đem về nhiều hơn những fan trung thành

Tối ưu font chữ để làm đẹp giao diện Website WordPress

Xu hướng trình bày font chữ trên Website WordPress năm 2019

Đã qua rồi thế hệ website 1.0, cái thời mà mọi website đều ngập tràn thông tin. Mọi khoảng trống trên website đều được cố gắng lấp đầy bởi mọi thứ có thể. Một website như vậy sẽ làm bạn cảm thấy bị ngộp khi truy cập

Bạn nghĩ sao về một trải nghiệm như thế này:

• 

Hiện tại người dùng phải tiếp nhận quá nhiều thông tin trên quá nhiều kênh tin tức và mạng xã hội. Một Website nếu có giao diện thoáng đãng và sạch đẹp sẽ trở nên cuốn hút hơn với người dùng

Mặt khác Website được trình bày với bố cục thoáng đãng sẽ giúp người dùng tập trung hơn vào nội dung. Xu hướng hiện nay các trang thông tin trên thế giới đều trình bày bố cục website rất thông thoáng. Trong bài viết này chúng ta có thể lấy trang tin CNN làm một ví dụ cụ thể

Như bạn có thể thấy hình dưới bố cục của trang tin tức CNN có lối trình bày rất dễ nhìn. Khi bạn đọc nội dung trên trang tin tức này không có cảm giác rối mắt

• 

Đây cũng là xu hướng chung chủ đạo của các website và blog. Trong khuôn khổ bài viết này Ryan sẽ phân tích và lấy luôn trang CNN làm ví dụ để bạn dễ hình dung

Đừng bỏ qua: Top các giải pháp tăng tốc độ tải trang Website WordPress

Cài đặt ứng dụng check font chữ trên các Website

Cách nhanh nhất để bạn trình bày và làm đẹp giao diện website là hãy học hỏi các website lớn. Những website lớn thường có đội ngũ chuyên trách để chăm sóc giao diện người dùng. Bạn nên học hỏi những ” ông lớn” đó. Chắc chắn giao diện website của bạn sẽ chuyên nghiệp và bắt mắt hơn với người dùng

Để phân tích font chữ của giao diện website bạn cần sử dụng trình duyệt Chrome. Tiếp đó hãy cài đặt tiện ích “What font” cho trình duyệt Chrome của bạn. Bạn tải tiện ích mở rộng theo đường link bên dưới

Link cài đặt ứng dụng WhatFont cho Chrome: Link 1 / Link 2

• 

Sau khi cài đặt xong bạn nhìn vào góc trên cùng bên phải màn hình của trình duyệt. Bạn sẽ thấy có biểu tượng của WhatFont. Nào giờ chúng ta đã có công cụ để phân tích trong tay. Việc cần làm bây giờ là truy cập vào trang chủ của CNN

• 

Công thức “bí mật”

Bạn chọn một bài viết bất kỳ ở trên trang CNN. Sau đó nhấn vào biểu tượng WhatFont. Đưa con trỏ chuột lại cửa sổ trình duyệt sau đó nhấn chuột trái vào khoảng trống bất kỳ. O-la-la, Vừng ơi mở ra!

• 

Đây là công thức trình bày font chữ của CNN. Bạn có thể thấy các thông số như sau:

• Font chữ: CNN – 300
• Style: Normal
• Weight: 300
• Kích cỡ chữ (Size): 18px
• Khoảng giãn dòng (Line Height): 30px
• Màu chữ (Color): #262626

Như vậy đây là toàn bộ “bí mật” đằng sau cách trình bày của trang tin tức CNN. Sau đây là những phân tích của Ryan về công thức mà CNN đã sử dụng

Họ sử dụng font chữ bản quyền riêng cho website. Về kích cỡ chữ thì là 18px, đủ to và đủ dễ nhìn cho người dùng. Cỡ chữ này khi hiển thị trên màn hình điện thoại hay PC đều đem đến cảm giác đọc tốt. Khoảng giãn dòng 30px giúp nội dung nhìn thoáng đãng hơn rất nhiều. Tạo sự tập trung của người đọc cho phần nội dung, và không bị rối mắt

Đáng chú ý là phần màu chữ-Color. Bình thường mọi người thường nghĩ rằng màu đen là màu của ký tự chữ viết trên website. Tuy nhiên không phải vậy. nếu sử dụng màu đen kèm cỡ chữ to và đậm sẽ đưa lại trải nghiệm không tốt. Nền trắng và màu chữ đen tuyệt đối sẽ nhanh gây mỏi mắt

• 

Tối ưu font chữ làm đẹp giao diện Website theo công thức có sẵn

Thay đổi độ giãn dòng trong CSS

Như vậy bây giờ bạn đã có trong tay công thức “bí mật” để làm đẹp giao diện website wordpress. Bây giờ bạn cần áp dụng công thức đó để tinh chỉnh giao diện website wordpress của mình

Để quy định hiển thị giãn dòng cho các post khi đăng bài bạn chỉnh sửa như sau. Bạn vào khu vực Appearance>Customize

• 

Trong thanh điều chỉnh bên trái bạn tìm dòng Additional CSS

• 

Bạn tải về đoạn mã sau:

Đoạn mã điều chỉnh độ giãn dòng trong CSS: Link 1 / Link 2

Bạn copy dòng mã và paste vào khu vực Additional CSS> nhấp Publish để thực hiện thay đổi

• 

Với dòng mã thêm vào CSS này bạn đã thay đổi độ giãn dòng cho font chữ. Hãy kiểm tra lại trước và sau khi thêm code xem sự thay đổi diễn ra như thế nào bạn nhé

Thay đổi font chữ trên giao diện website bằng Plugin

Để quy định font chữ trên website wordpress bạn cần sử dụng plugin để hỗ trợ. Bạn tải về plugin “Hỗ trợ đổi font chữ Google” theo link bên dưới

Plugin hỗ trợ đổi font chữ Google: Link 1 / Link 2

Bạn tiến hành cài đặt Plugin bằng cách vào Plugin>Add New. Chọn Upload Plugin bên góc trái màn hình. Bạn trỏ đường dẫn vào file Plugin vừa download về để tiến hành cài đặt

Plugin có thư viện font chữ rất khổng lồ. Bao gồm 877 font, plugin này cho phép bạn dễ dàng thay đổi tùy biến font chữ trên Blog. Bạn có thể tham khảo toàn bộ thư viện font chữ của Google tại ĐÂY

Tùy biến font chữ làm đẹp giao diện website wordpress

Để thay đổi font chữ bạn Active (Kích hoạt) Plugin lên. Tiếp đó vào Appearance>Customize. Lúc này sau khi cài đặt và kích hoạt Plugin thì trong phần Cusomize sẽ xuất hiện thêm tùy chọn Google Font

• 

Plugin cung cấp cho bạn khá nhiều các tùy chọn. Ryan sẽ giới thiệu lần lượt để bạn có thể nắm rõ và sử dụng cho phù hợp

Basic Settings

Đây là các thiết đặt chung nhất để bạn có thể tùy biến. Nếu không cần quá chi tiết thì bạn có thể chỉ cần thiết lập tùy biến font chữ trong phần này là đủ

• Base Typography: Giúp bạn chọn font chữ cho toàn bộ nội dung của website
• Headings Typography: Mục chọn này giúp bạn thay đổi font chữ của các thẻ Heading
• Buttons and Inputs Typography: Đây là nơi quy định font chữ cho các nút – button trên Blog của bạn

Advanced Settings

Nếu bạn muốn can thiệp sâu hơn vào font chữ trên website thì đây là khu vực để bạn làm điều đó

• Branding: Bạn có thể thay đổi font chữ của tiêu đề và phần miêu tả của site
• Navigation: Thay đổi font chữ của thanh điều hướng
• Content: Tại đây bạn có thể thay đổi font chữ cho nội dung và các thẻ Heading. Plugin cho bạn tùy biến font chữ của các thẻ Heading từ H1 đến H6
• Sidebar: đổi font chữ cho sidebar
• Footer: tùy biến font chữ cho footer

Font Loading

Giúp bạn chọn lựa những font chữ sẽ được nạp vào site theo ý muốn

• 

Debugging

Nếu trong quá trình bạn sử dụng Plugin gặp phải lỗi thì bạn tích vô mục này

Thay đổi cỡ chữ và màu chữ bằng trình soạn thảo Gutenberg trong WordPress

Bạn có thể thay đổi cỡ chữ và màu chữ cho content bằng cách tùy biến trong trình soạn thảo Gutenberg. Trong trình soạn thảo Gutenberg, bạn chọn block paragraph muốn chỉnh sửa

• 

Trong khu vực chỉnh sửa bên phải bạn chọn Text Setting để điều chỉnh cỡ font chữ theo ý muốn

Để thay đổi màu chữ của block nội dung đó bạn tiếp tục chọn Color Setting. Trong đó:

• Background Color: Thay đổi màu nền cho đoạn văn
• Text Color: Thay đổi màu chữ của block đã chọn

LỜI KẾT

Thông thường nếu bạn sử dụng một theme bản quyền và có trả phí thì việc can thiệp font chữ sẽ khá dễ dàng. Các tính năng thay đổi font chữ trên website wordpress đã được tích hợp sẵn trong theme. Vì vậy mà công việc làm đẹp giao diện website wordpress sẽ diễn ra rất nhanh chóng

Tuy nhiên nếu bạn sử dụng một theme miễn phí thì sẽ khó khăn hơn đôi chút. Các tính năng can thiệp vào giao diện nói chung, và font chữ nói riêng rất hạn chế trên các theme miễn phí. Bởi vậy bạn sẽ cần các công cụ và cách làm mà Ryan đã giới thiệu phía trên. Hy vọng bài viết cung cấp cho bạn những hiểu biết hữu ích. Bạn hãy chia sẻ những cách làm khác trong mục comment bên dưới để cùng thảo luận nhé

Ryan chúc bạn có một ngày làm việc và học tập hiệu quả!

CHIA SẺ BÀI VIẾT: