Ngày 27 / Tiết 3 / Thời lượng 30 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Chúng là các điều chỉnh nhỏ, ít dùng hơn, nhưng bạn cứ tìm hiểu, cần thiết thì áp dụng.
1. Scroll To Top
Đây là tính năng được bật mặc định của theme Astra: ở các bài viết dài, khi bạn đọc kéo xuống thì sẽ xuất hiện nút ở góc dưới bên tay phải, người dùng có thể click vào để lên đầu trang luôn (còn gọi là nút về đầu trang):
Để chỉnh cái này bạn vào Astra > Customize > Global > Scroll To Top:
- Enable Scroll to Top: mặc định bật, nếu bạn muốn tắt thì gạt sang trái, và nút sẽ không xuất hiện nữa.
- Display On: dùng để điều chỉnh nút hiển thị ở đâu, Desktop (nghĩa là chỉ máy bàn), Mobile (nghĩa là chỉ di động), còn mặc định nút hiện cả ở máy bàn và di động (Desktop + Mobile).
- Postion: vị trí của nút, mặc định bên phải (Right), và bạn cũng nên sử dụng tùy chọn này.
- Icon Size là kích cỡ của nút, mặc định 15px. Tôi thấy mặc định này hơi nhỏ, có thể điều chỉnh lên 20px.
Bạn chuyển sang tab Design để thay đổi màu sắc cho nút:
Ở đây nó có 2 phần điều chỉnh:
- Icon Color: chính là màu của biểu tượng dấu nhọn trỏ lên trên, gồm màu ở trạng thái thường (normal), và màu khi hover chuột qua đó. Mặc định đang là màu trắng cho cả 2 trạng thái.
- Background Color: là màu nền của nút, cũng gồm hai phần, là màu nền ở trạng thái thường và màu nền khi hover. Mặc định đang là màu xanh cho cả 2 trạng thái.
Màu trắng cho Icon khá ổn rồi nên tôi không thay đổi gì, tôi chỉ chỉnh màu nền để nó đỡ nổi bật quá:
Bạn có thể thử 2 mã màu: #545454AB và #333333DE lần lượt cho màu ở trạng thái thường và màu khi hover.
2. Thêm các link mạng xã hội của bạn vào phần footer (chân trang web)
Bạn vào Appearance > Customize > Footer Builder > Copyright, sau đó nhìn sang phải, rồi click vào hình chữ nhật cuối cùng:
Một khung chọn hiện lên, bạn click vào Social:
Bạn sẽ thấy nút mạng xã hội được đưa vào chân trang:
Ở đây chúng ta cần thay đổi 2 thứ:
- Cập nhật thêm các mạng xã hội khác (ví dụ YouTube) và loại bỏ các mạng xã hội bạn không dùng (ví dụ Twitter).
- Thêm link cụ thể kênh mạng xã hội của bạn.
Để làm điều đó bạn click vào Social, rồi nhìn sang cột trái, click vào dấu x để loại bỏ mạng xã hội không dùng:
Để thêm một mạng xã hội nào đó thì bạn click vào mũi tên xổ xuống chỗ Benhance, rồi chọn mạng xã hội cụ thể từ danh sách đó, ví dụ tôi chọn YouTube, sau đó nhấn Add Social Icon để thêm vào:
Phần tiếp theo, chúng ta sẽ cập nhật đường link cho các mạng xã hội. Để làm vậy bạn click vào mạng xã hội bạn muốn thêm liên kết:
Một menu xổ ra, bạn nhập URL mạng xã hội của bạn vào, trong trường hợp của tôi là Facebook thì tôi có thể nhập URL Facebook cá nhân hoặc fanpage, group của mình:
Bạn thậm chí có thể đổi sang icon khác cho mạng xã hội nếu muốn bằng cách click vào mũi tên xổ xuống chỗ Icon, tìm kiếm với từ khóa tương ứng với mạng xã hội đó, nó sẽ cho ra các icon (biểu tượng) đang có sẵn, rồi bạn click chọn icon nào thấy thích:
Tiếp tục, bạn lại click vào (các) mạng xã hội khác và thêm link cho nó:
Ngay bên dưới có thêm 2 tùy chọn:
- Show Label: để hiển thị tên mạng xã hội ngay bên cạnh biểu tượng của nó. Bạn cứ click thử sẽ hiểu rõ ngay.
- Alignment: để căn lề, mặc định được căn giữa, bạn có thể chỉnh căn trái hoặc phải nếu muốn.
Để điều chỉnh sâu hơn nữa, bạn click sang tab DESIGN:
- Color Type: Custom có kiểu mặc định màu đen tối giản (hoặc bạn còn có thể tùy chỉnh màu theo ý thích, chỗ Icon Color,..), nếu bạn muốn các icon có màu sắc chuẩn của các mạng xã hội thì nhấn vào Official:
Lựa chọn nào tốt hơn? Custom hay Official? Cái này tùy quan điểm mỗi người, Custom có thể sẽ giúp nó ăn nhập vào thiết kế của website hơn, nhưng Official lại giúp nó có màu sắc đúng với tông màu chính thức.
Ở bên dưới nữa là các tùy chọn khác như:
- Icon Size: điều chỉnh kích cỡ của icon.
- Icon Spacing: điều chỉnh khoảng cách giữa các icon.
- Icon Background Space: điều chỉnh lề của icon với các thành phần khác.
- Font Size: nếu bạn để tên mạng xã hội đi kèm, thì phần này dùng để điều chỉnh kích cỡ font cho văn bản đó.
Nếu bạn muốn mạng xã hội ở trên dòng thông báo bản quyền (chỗ website được tạo bởi…) thì quay ra khung bên phải, bạn bấm giữ Social rồi kéo nó sang trái:
Kết quả:
Cuối cùng bạn nhấn Publish để chính thức cập nhật cài đặt cho website.