Thiết Kế Trang Chủ Website – Tự Học Thiết Kế Website: Bài28

Trang chủ chính là bộ mặt của website và cũng là mặt tiền online của doanh nghiệp bạn. Nó như phòng khách trong ngôi nhà của chúng ta nên trong website, chúng ta phải thiết kế trang chủ website cẩn thận, tỉ mĩ. Không có một quy chuẩn nào cho trang chủ của trang web nhưng nó cũng cần nói lên được bạn đang kinh doanh gì, bạn là ai và thương hiệu của bạn như thế nào.

Phương hướng thiết kế trang chủ website đơn giản

Ở mỗi giao diện, chúng ta có demo trang chủ khác nhau và cách thiết kế cũng khác nhau. Để chỉnh sửa trang chủ bạn cần đăng nhập vào trang quản trị > Trang > Trang chủ (home). Để chọn một trang bất kỳ làm trang chủ, bạn phải vào Cài đặt > Đọc > Phần trang chủ bạn cần chọn 1 trang trong danh sách để làm trang chủ.

cách chỉnh sửa trang chủ của trang web

Chọn Trang chủ trong cài đặt (Click xem ảnh lớn)

Phương hướng để chúng ta thiết kế đơn giản nhất là chọn 1 trong số các trang bạn thấy thích hợp nhất làm trang chủ. Sau đó dựa vào demo những phần có sẵn trong đó để đưa ra ý tưởng của riêng bạn. Sau đó từ trên xuống dưới từ trái sang phải chúng ta bám sát vào ý tưởng mà thiết kế lại (cá nhân hóa) thành trang chủ bạn mong muốn.

Các bước thiết lập trang chủ cho website

Chọn demo phù hợp và lên ý tưởng thiết kế

Việc đầu tiên để tự học thiết kế website dễ dàng hơn, bạn cần mở file hướng dẫn sử dụng giao diện như những bài trước. Tìm các hướng dẫn có liên quan để tham khảo. Trong số các trang chủ mà demo cung cấp cho chúng ta, hãy chọn 1 trang bạn thấy phù hợp nhất để sử dụng. Bước này chúng ta đã thực hiện trong bài chọn và thiết lập trang.

Từ demo trang chủ đã chọn, bạn cần lên ý tưởng bằng trí tưởng tượng của bạn và dựa vào đó sửa đổi từng phần. Nếu bạn khó tưởng tượng thì có thể quan sát từng phần, nảy ra ý tưởng tới đâu chúng ta thiết kế tới đó.

Tùy mỗi giao diện và mỗi plugin hỗ trợ khác nhau mà có cách chỉnh sửa khác nhau. Ngoài ra bạn cũng cần vận dụng CSS để chỉnh sửa thêm cho đẹp.

Thiết kế nội dung hoặc chỉnh sửa theo ý tưởng của bạn

Nếu trang chủ bạn có sidebar thì chúng ta nên để đó, chỉnh sửa nội dung hoàn chỉnh trước, sau đó mới đến sidebar. Dưới đây mình sẽ hướng dẫn sử dụng các plugin phục vụ chỉnh sửa trang chủ. Nếu bạn muốn thiết kế 1 trang hoàn toàn mới thì bạn sẽ mất rất nhiều thời gian vừa làm vừa xem lại kết quả. Chúng ta sẽ dựa vào demo có sẵn mà chỉnh sửa sẽ nhanh và hiệu quả hơn.

Chú ý các nội dung phù hợp ở cột bên phải

Ảnh dưới đây là các nội dung thường dùng ở cột bên phải, bạn cần chú ý để biết đúng cách thiết kế trang chủ website.

bố cục trang chủ wordpress

Các cài đặt ở cột phải và phần thuộc tính trang là quan trọng nhất (Click xem ảnh lớn)

Xem lại cài đặt trong page option

Thường một số giao diện sẽ có hỗ trợ page option phía dưới trình tạo trang. Bạn xem có các cài đặt phù hợp như page title, tag, sidebar, menu,…

 

bố cục trang chủ wordpress

Page option cũng có các cài đặt cần thiết (Click xem ảnh lớn)

Chỉnh sửa Yoast SEO để SEO trang chủ

Đây là bước quan trọng để SEO trang chủ, trang chủ sẽ có nhiệm vụ gánh các trang khác và sản phẩm, bài viết trong website lên top theo, nên hãy nhớ thiết lập các chỉ mục yêu cầu trong Yoast SEO  ngay bên dưới.

Cuối cùng là xem lại thành quả và dùng CSS chỉnh sửa lại cho đúng với yêu cầu.

Hướng dẫn sử dụng plugin kéo thả trang

Chúng ta thường có một số plugin kèm theo giao diện hỗ trợ kéo thả trang như King Composer, Element, Brizy, Visual Composer (WP Bakery),… Thường thấy nhất là Visual composer và Element. Song tất cả chúng đều có cách dùng tương tự nhau, chỉ khác nhau ở giao diện thực hiện. Mình sẽ hướng dẫn sơ lượt về King Composer, bạn có thể tự phát triển ra Visual Composer và cả Element hoặc Brizy.

Để mở trình thiết kế trang, trong giao diện tạo hoặc sửa trang bạn chọn Edit With King Composer.

cách chỉnh sửa trang chủ của trang web

Chọn phần mềm chỉnh sửa trang thích hợp (Click xem ảnh lớn)

Trong giao diện vừa chuyển qua, nếu là trang trống thì chúng ta thêm nội dung bằng các dấu +, còn nếu là trang đã có nội dung thì tất cả các thành phần của King Composer đều được thiết lập tự động bằng demo. Như chúng ta biết, bố cục của website là những cột và dòng sắp xếp theo chiều ngang và chiều dọc.

bố cục trang chủ wordpress

Thiết kế trang chủ website bằng King Composer (Click xem ảnh lớn)

bố cục trang chủ wordpress

1 Trang web mẫu với bố cục thường gặp (Click xem ảnh lớn)

Dựa vào hình trên ta sẽ dùng King Composer để thiết thiết lập theo thứ tự như sau:

bố cục trang chủ wordpress

Bố cục thực tế trong Kinh Composer (Click xem ảnh lớn)

  1. Tạo dòng, chia dòng ra thành từng cột cần thiết, trong tường hợp này là 2 cột.
  2. Trong các cột của dòng trên, ta tạo thêm các dòng nhỏ và chia các dòng đó ra thành những cột cần thiết.
  3. Tương tự vậy ta lại tạo thêm các dòng và cột bên trong nữa để có bố cục theo ý muốn.
  4. Tạo các thuộc tính bên trong các dòng bằng dấu +.

Bảng thuộc tính và các thành phần thường dùng trong King Conposer như sau:

Thiết kế trang chủ website

Bảng thuộc tính và đối tượng của King Composer (Click xem ảnh lớn)

Dựa vào đó chúng ta có thể thêm hoặc bớt các dòng, thuộc tính tùy ý.

Hướng dẫn sử dụng plugin Slider Revolution.

Tùy vào từng phiên bản plugin kèm theo giao diện mà giao diện thiết kế slider của Slider Revolution sẽ khác nhau. Mình sẽ sử dụng phiên bản mới ở thời điểm hiện tại hướng dẫn bạn. Thật ra thì phần này sử dụng khá tương đồng với Microsoft Power Point. Gồm các bước:

Tạo 1 ảnh nền với kích thước tùy chỉnh;

Thêm nội dung (hình ảnh) cho nền;

Thêm các nội dung bên trong như ảnh nhỏ, sản phảm, nút, ký tự,….

Thêm hiệu ứng cho các đối tượng thêm vào;

Sửa thời gian thứ tự hiển thị bên trong thanh timeline;

slider revolution

Giao diện Slider Revolution dùng thiết kế slider, chọn slider để sửa (Click xem ảnh lớn)

cách chỉnh sửa trang chủ của trang web

Các thành phần cần biết trong giao diện cài đặt chung slider (Click xem ảnh lớn)

cách chỉnh sửa trang chủ của trang web

Giao diện ảnh nên, thay đổi ảnh, hiệu ứng ảnh và thêm các đối tượng (Click xem ảnh lớn)

Thiết kế trang chủ website

Khu vực sửa text, hiệu ứng chữ viết và các thuộc tính định dạng chữ (Click xem ảnh lớn)

Tổng kết cách thiết lập trang chủ website

Cách thiết kế trang chủ website đơn giản chỉ là việc bạn lên ý tưởng và biết cách sử dụng plugin tạo slider, plugin xây dựng trang và cài đặt page option là không trang nào có thể làm khó được bạn. Hãy xem video để biết cách thực hiện dễ dàng hơn nhé.

chúc bạn thành công!