Cách Thay Đổi Logo, Thiết Kế Giao Diện Website Một Cách Dễ Dàng

Cách thay đổi logo, hình ảnh, màu sắc, bố cục, nội dung giao diện trang chủ chính của website bạn, đơn giản, bằng việc kéo thả, tùy biến website, thiết kế theo phong cách riêng của bạn.

Đăng nhập quản trị website

Đầu tiên: Bạn đăng nhập vào quản trị website của bạn. Sau đó! ra giao diện trang chủ chính của bạn, bằng cách nhập địa chỉ website của bạn. Ví dụ: hanastore.com.vn

Hình minh họa đăng nhập quản trị website hanastore.com.vn

Tùy biến & Sửa trang

Bây giờ bạn cần quan tâm đến cho mình 2 mục chính.Tùy biến và Sửa trang để chỉnh sửa toàn bộ nội dung giao diện trang chủ website theo ý muốn của bạn.

Tùy biến và Sửa trang

Tính năng Tùy biến

- Tính năng Tùy biến cho phép bạn thay đổi các thông tin: Tiêu đề, Phong cách, Blog, WooCommerce, Cách trình bày, Chân trang, Các trang, Danh mục đầu tư, Menu, Widget, Cài đặt trang chủ, Đăng lại, Thông báo, CSS bổ sung,... Tuy nhiên, trong bài viết này We9s sẽ hướng dẫn bạn thay đổi 1 số thông tin cơ bản, nhưng quan trọng. Từ đó, bạn áp dụng công thức có thể chỉnh sửa các danh mục khác bằng cách làm tương tự.

- Bạn nhấn vào chữ.Tùy biến website sẽ tự động nhảy sang mục chỉnh sửa như hình bên dưới.

Hình ảnh minh họa Tùy biến giao diện trang chủ website

Logo & Site Identity.(Biểu trưng & Nhận dạng Trang web)

- Thay đổi Tên website, Khẩu hiệu, Logo, Biểu tượng site có 2 cách.

Cách 1:

- Bạn di chuyển vào hình ảnh logo sẽ hiện ra mục LOGO, tiếp theo bạn nhấn vào LOGO sẽ hiện ra phần chỉnh sửa Tùy biến > Header | Logo & Site Identity (Biểu trưng & Nhận dạng Trang web). Ở phần này! cho phép bạn chỉnh sửa: Tên website | Khẩu hiệu website | Logo image (thay đổi ảnh logo) |.Biểu tượng site (thay đổi ảnh icon logo). Sau khi thay đổi xong các mục như ý bạn, bước cuối cùng bạn nhấn vào chữ Đăng ở phía trên cùng là xong.

Hướng dẫn thay đổi tên website, khẩu hiệu, logo

Cách 2:

- Nhấn vào:.Tùy biến > Header.>.Logo & Site Identity sẽ ra hiện ra phần Thay đổi website, Khẩu hiệu, Logo, Biểu tượng site

Tùy biến > Header

Tùy biến > Header > Logo & Site Identity

Phần thay đổi thông tin

Tính năng Sửa trang

- Tính năng Sửa trang cho phép bạn thay đổi: Nội dung, Hình ảnh, Bố cục trang web...

- Bạn nhấn trực tiếp vào chữ Sửa trang.chờ vài giây sẽ hiện ra giao diện minh họa như hình bên dưới:

Giao diện minh họa Tính năng Sửa trang website

Cách thay đổi hình ảnh

- Bạn nhấn trực tiếp vào hình ảnh muốn thay. Website sẽ tự dẫn bạn đến phần Image (Ảnh). Chọn tiếp >.Change media (Thay đổi phương tiện).rồi ⇧Tải ảnh.cần thay lên. Sau khi hoàn thành xong các bước, bạn tìm phía cuối có chữ Apply (Ứng dụng) nhấn vào chữ Apply (Ứng dụng), tiếp tục nhấn chữ Update (Cập nhật). Như vậy là bạn đã hoàn thành xong phần thay đổi hình ảnh, kiểm tra bằng cách truy cập vào trang chủ chính của website bạn.

- Lưu ý: Thay đổi các hình ảnh khác cũng tương tự, bằng cách nhấn trực tiếp vào hình ảnh bạn muốn thay đổi, sau đó tải lên và lưu lại là xong!

Cách thay đổi hình ảnh banner

Và đây là kết quả sau khi We9s thực hiện thay đổi hình ảnh banner (xem hình minh họa bên dưới)

- Một lưu ý nhỏ: Khi bạn thực hiện thay đổi hình ảnh banner hay bất kì một hình ảnh khác trên website. Bạn cần phải thay đổi kích thước hình ảnh trùng với kích thước hình ảnh mẫu. Như hình dưới bạn có thể thấy We9s thay đổi hình ảnh. Nhưng không tùy chỉnh kích thước, cho nên bố cục web sẽ bị thu lại hoặc tăng lên theo kích thước hình ảnh của bạn tải lên. Và đây cũng là cách bạn có thể sáng tạo, tùy chỉnh đơn giản về bố cục website, bằng cách chỉnh kích thước hình ảnh to, nhỏ, theo ý đồ riêng của bạn.

Kết quả sau khi We9s thực hiện thay đổi banner

Trường hợp khác:

- Khi bạn nhấn vào chữ Sửa trang, nhưng vẫn không thay đổi được hình ảnh, nội dung. Thì bạn tiếp tục di chuyển tới những vị trí như; Nội dung, hình ảnh cần sửa sẽ hiện ra chữ UX BUILDER, bạn nhấn trực tiếp vàoUX BUILDER để chỉnh sửa và thay đổi hình ảnh, nội dung tương tự như hướng dẫn trên nhé!

Chỉnh sửa Ux Builder

Cách thay đổi bố cục

- Bạn Nhấn trực tiếp vào chữ Sữa trang xong. Website sẽ hiện ra phần thiết kế website (xem hình minh họa dưới).

Nhấn trực tiếp vào Sữa trang website sẽ tự động điều hướng đến giao diện chỉnh sửa trang như hình mẫu

- Bạn di chuyển vào những đường giới hạn chiều dài, rộng, trái, phải, trên, dưới xung quanh hình ảnh, webside sẽ hiển thị ra đường thẳng có dấu + (xem hình ảnh minh họa bên dưới).

Dấu cộng chiều dài ở phía trên hình ảnh

Dấu cộng chiều dài ở phía dưới hình ảnh

Dấu cộng bên trái và phải hình ảnh

- Khi bạn nhấn vào dấu + website sẽ hiện ra phần thiết kế được dựng sẳn bên góc trái màng hình của bạn (xem hình minh họa bên dưới).

Cách tự thiết kế website, sáng tạo theo phong cách riêng của bạn

- Có rất nhiều danh mục đầy đủ cần có của một trang website cho phép bạn sáng tạo theo ý thích của mình.

Danh mục thiết kế shop

Danh mục thiết kế nội dung

- Và còn nhiều mục khác nữa, bạn hãy tự khám phá nhé!

Hướng dẫn áp dụng vào thiết kế website

- Cách thiết kế bố cục website: nhấn trực tiếp vào ô có chữ Row

Cách thiết kế bố cục website

- Khi bạn nhấn vào Row trang web sẽ nhảy sang, thêm phần chỉnh sửa phân chia bố cục: Mặc định mục này khi nhấn vào sẽ hiện ra 3 cột tương ứng với 3 mục nội dung hay ý đồ mà bạn muốn thêm vào. Bạn có thể chọn bằng cách nhấn vào mục 2 cột website sẽ hiện ra 2 cột, tương tự bạn chọn mục 4 cột website sẽ tự phân chia 4 cột. Bạn có thể thử chọn từng mục bên phần công cụ để hiểu hơn về website nhé.

Bố cục website 3 cột

Bố cục website 2 cột

Bố cục website 4 cột

Thêm các yếu tố vào bố cục đã tạo

- Ở đây! We9s tạo mục 2 cột trái lớn.

- Bạn nhấn trực tiếp vào chữ Thêm các yếu tố di chuyển vào chính giữa sẽ hiện ra dấu +

Bố cục trái lớn

- Sau khi bạn nhấn vào dấu + website sẽ hiển thị quay trở lại phần Thêm nội dung cho phép bạn thêm hình ảnh, văn bản và còn rất nhiều, bạn có thể thử thiết kế demo từng cái.

Có nhiều mục thiết kế sáng tạo

- Ví dụ: We9s chọn mục Hình ảnh.

Thêm các yếu tố thiết kế

- Tiếp theo website sẽ nhảy sang mục tải hỉnh ảnh lên. Bạn nhấn vào chữ Chọn phương tiện (tiếng Anh: Select Media) bạn tải hình ảnh lên và lưu lại sẽ ra được kết quả như bạn mong muốn.

Tải ảnh lên bố cục website

- Kết quả hoàn thiện.

Kết quả tạo bố cục và thêm hình ảnh hoàn thiện

- Tiếp tục thiết kế bố cục còn lại. Ở đây! We9s chọn mục Text để thêm chữ vào bố cục còn lại. Cách làm tương tự phần trên.

Thêm yếu tố Text vào bố cục website

- Khi bạn nhấn vào Text website sẽ tiếp tục nhảy sang phần chọn mục Text sáng tạo, trọng mục này có rất nhiều kiểu sáng tạo về chữ khác nhau, bạn có thể tùy chọn cho phù hợp với website, theo sở thích của bạn.

Đoạn văn không có tiêu đề

- Ví dụ chọn một mục khác; ở mục này chúng ta thấy có một đoạn văn bản được thêm vào có thêm tiêu đề và phụ đề

Đoạn văn có dòng tiêu đề, phụ đề

Cách thay đổi nội dung

- Bạn nhấn trực tiếp vào nội dung sẽ hiện ra phần chỉnh sữa chữ ở bên trái màng hình.

- Lưu ý: bạn cần chọn những chữ trùng mới nội dung, sau đó bạn xóa đi, thay thế lại chữ khác theo ý bạn, có những mã code, bạn không hiểu thì để nguyên vậy không được xóa, tránh bị lỗi ở mục này.

Thay đổi nội dung chữ trên giao diện website

Chỉnh chữ bằng cách đơn giản hơn:

- Bạn nhấn vào Mở trình soạn thảo văn bản (tiếng Anh: Open Text Editor) sẽ hiện ra phần thay đổi văn bản (xem hình minh họa bên dưới).

Thay đổi nội dung website theo cách đơn giản

- Ở phần chỉnh sửa này giúp bạn chỉnh sửa đơn giản hơn, bạn có thể chỉnh tiêu đề to lên, thay đổi màu sắc tiêu đề, viết chữ in đậm, in nghiên, căn lề chữ trái, giữa, phải, thêm các kí tự, chèn link,...

- Để lưu lại nội dung đã chỉnh sửa: bạn bấm vào chữ.✔ĐƯỢC RỒI. Tiếm theo tìm.chữ:.Ứng dụng (Apply).nhấn vào chữ.Ứng dụng (Apply), tiếp tục nhấn chữ.Cập nhật.(Update).

Kết luận: Trong bài viết (blog) này! We9s hướng dẫn cho bạn các cơ bản về chỉnh sửa website: Thay đổi Logo, thay đổi hình ảnh banner, thay đổi nội dung website. Từ đó! bạn có thể tìm hiểu thêm, bằng cách chỉnh sửa tương tự trong mục Tùy biến & Sửa trang để thay đổi, tùy biến các mục khác theo sở thích cá nhân, tạo website theo phong cách riêng của bạn.

Các bài viết sau sẽ được We9s hướng dẫn chi tiết, thiết kế website nâng cao. Hãy theo dõi chúng tôi sẽ được đọc những bài viết mới nhất. Vui lòng để lại bình luận dưới bài viết để We9s Team hỗ trợ bạn các vấn đề thắc mắc, mọi thứ liên quan đến website.