cach-chinh-sua-giao-dien-website

Cách chỉnh sửa giao diện website đơn giản với CSS trong Theme Editor

Được đăng trong: Kinh nghiệm thiết kế website
Bởi 94now
Nhiều hơn từ tác giả này

Giao diện website thu hút, đẹp mắt sẽ tạo được ấn tượng với người dùng. Với một số mẫu giao diện nhất định, bạn cần thay đổi các yếu tố như font chữ, màu chữ, nội dung footer theo ý của mình. Bài viết sau đây sẽ hướng dẫn bạn một số cách chỉnh sửa giao diện website đơn giản với CSS trong Theme Editor.  

Giao diện website là gì?

Giao diện được hiểu là hình thức bên ngoài, sự trình bày. Giao diện website chính là sự sắp xếp các vị trí, màu sắc, hình ảnh và bố cục của website. Giao diện đẹp, chuyên nghiệp và điều hướng dễ dàng sẽ thu hút và tạo ấn tượng cho người xem, mang lại trải nghiệm tối ưu cho khách hàng.  

Cách chỉnh sửa giao diện website đơn giản với CSS trong Theme Editor

Trong bài viết này, 94now sẽ hướng dẫn bạn chỉnh sửa giao diện trong theme Editor với một số bước như thay đổi font chữ, nội dung footer, Việt hóa các chữ Tiếng Anh. Cùng tìm hiểu chi tiết các bước thay đổi giao diện sau đây nhé. 

Thay đổi font chữ giao diện

Trước tiên, bạn cần kiểm tra thuộc tính trên trình duyệt thông qua việc nhấn "Kiểm tra" hoặc "F12". Sau khi kiểm tra, bảng mã nguồn Wordpress sẽ hiển thị bao gồm 1 khung màu xanh và màu đỏ. Khung màu xanh sẽ là nội dung trong file .css (màu sắc, font chữ...), khung màu đỏ là nội dung trong file .php (quy định các tính năng, cấu trúc...) của đối tượng đó. Khung màu đỏ sẽ chứa tên của các đối tượng cần chỉnh sửa. 

Để chỉnh sửa font chữ, bạn cần chỉnh sửa title của Section đi làm các thuộc tính css như:

  • Font - weight: Độ đậm của font chữ
  • Letter - spacing: Khoảng cách giữa các ký tự của font chữ
  • Text - transform: Định dạng font chữ như đậm, nghiêng, viết thường, viết hoa
  • Font - size: Kích thước font chữ
  • Margin: Khoảng cách của đối tượng so với lề.

Sau đó vào Giao diện - Sửa (Editor) và chọn file Style.css (ver.xxxx), copy và paste tên của font chữ cần chỉnh sửa vào khung tìm kiếm. Chỉnh sửa các thông số theo ý mình và nhấn Lưu lại để thay đổi.

chinh-sua-giao-dien-web

Thay đổi nội dung footer cho giao diện

Thực hiện theo các bước sau để thay đổi nội dung Footer: 

  • Bước 1: Copy hết đoạn nội dung ở Footer
  • Bước 2: Vào giao diện, rồi đến Sửa (Editor) và tìm đến Footer.php
  • Bước 3: Copy hết đoạn nội dung ở Footer và Paste vào khung tìm kiếm hoặc nhấn tổ hợp phím Ctrl + F. 
  • Bước 4: Chỉnh sửa nội dung theo ý của mình hoặc bỏ hết đoạn <div class=”ht-site-info”>….</div>.

Chỉ với 5 bước đơn giản trên đây, bạn đã có thể thay đổi nội dung Footer theo ý muốn của mình một cách nhanh chóng, dễ dàng. 

Việt hóa các chữ Tiếng Anh trong Theme

Với trường hợp một số từ trong giao diện vẫn chưa được dịch hết hoàn toàn thì bạn cần phải chỉnh sửa để hoàn thiện giao diện. Để chỉnh sửa thì bạn cần phân tích và kiểm tra để biết rằng các cụm từ này nằm ở file nào trong Editor. 

Sau đó, chọn Giao diện, tiếp đó là Editor và chọn file Front page để chỉnh sửa. Copy paste cụm từ cần dịch vào khung tìm kiếm, sửa lại thành tiếng Việt và nhấn Enter, lưu lại để thiết lập thay đổi. Lưu ý khi xóa cụm từ cần dịch ra và thay bằng tiếng Việt, cẩn thận không xóa thêm bất cứ ký tự nào nữa để tránh xảy ra các lỗi giao diện. 

Trong bài viết này, 94now sẽ chỉ đề cập đến một số thao tác chỉnh sửa giao diện website nhất định như thay đổi font chữ, nội dung footer và Việt hóa các chữ tiếng Anh. Các cách này vô cùng đơn giản nên dù bạn là những dân chuyên hay gà mờ về công nghệ thì cũng có thể thực hiện một cách dễ dàng. 

4 năm trước