Nguyễn Minh Hùng Blog

  • Cảm ơn trái tim
  • Review tùm lum
  • Sản phẩm linh tinh
  • Dành cho website
Bạn đang ở: Trang chủ / Sản phẩm linh tinh / Trang web Genetic – Dựng toàn trang bằng Gutenberg

Trang web Genetic – Dựng toàn trang bằng Gutenberg

Tháng Năm 12, 2022

XEM DEMO

Có lẽ chỉ người quen thân thiết như anh Duy (CEO Genetic) mới đủ kiên nhẫn chờ đợi mình hoàn thành trang web này trong 2 tháng và để mình thỏa sức làm những thứ mình cho rằng tốt nhất.

Điều gì làm nên đặc biệt?

1. Đi theo quy trình logic

Những ngày đầu làm web, mình sẽ chọn theme có bố cục sẵn phù hợp nhất rồi sau đó tùy biến lại. Nó vẫn đẹp và khác biệt. Tuy nhiên quy trình này có gì đó sai sai.

Mình nghĩ rằng quy trình đúng phải là quy trình đi từ nội dung rồi mới tới cái đẹp.

  • Tìm hiểu về sản phẩm/dịch vụ và mục tiêu hàng đầu của công ty/thương hiệu
  • Nghiên cứu SEO (từ khóa, đối thủ)
  • Vẽ ra cây thư mục và hệ thống liên kết nội bộ
  • Vẽ ra giấy ý tưởng thiết kế trang chủ và các trang thành viên
  • Cài theme trắng tinh và dùng khối Gutenberg để dựng lên giao diện.
Lien Ket Noi Bo Website

2. Gutenberg toàn trang

Ngày trước mình là tín đồ của trình tạo trang Elementor. Nó đẹp, dễ tạo giao diện và còn nhanh nhẹ theo tiêu chuẩn ngày đó.

Hiện giờ Elementor khá cồng kềnh.

Gutenberg là trình soạn thảo nội dung mặc định của Wordpress. Nó phân nội dung thành các khối (block) như khối văn bản, tiêu đề, ảnh, video, nút bấm, cột…

Và vì giao diện được xây từ trình soạn thảo mặc định của Wordpress, nên mình tự tin hơn mỗi khi cập nhật các phiên bản.

Ngoài ra, ưu điểm của Gutenberg chính là tốc độ. Một ưu điểm khiến Trình tạo trang như Elementor, WP Bakery phải khóc thét.

Gutenberg Chay Rat Nhanh
Google Pagespeed Ingisht chấm 95 điểm trên Mobile, 100 điểm trên Desktop
Gutenberg Toc Do
Check từ Gtmetrix

Để có thể làm được cả Header và Footer bằng Block, mình sử dụng theme GeneratePress cùng với plugin Generate Block. Đây là 1 theme siêu nhẹ. Nó nhẹ và gần như trống trơn nên mình có thể làm mọi thứ.

Mình đã vẽ trên giấy và dùng Gutenberg để tạo ra các trang bên dưới (nhấn để xem):

  • Trang chủ
  • Trang danh sách khóa học
  • Trang trung tâm tài nguyên
  • Trang liên hệ
  • Trang lịch khai giảng
  • Trang giới thiệu giảng viên
  • Bài viết Khóa học chi tiết
  • Trang trung tâm hỗ trợ

3. Không dùng nút menu thu nhỏ trên điện thoại

Nghe lạ không. Mọi người chắc đã rất quen với nút 3 gạch ngang (nút Hamburger) để thu nhỏ các mục trong Menu.

Tại sao mình lại không dùng?

Đây là lí do

Avoid Dropdown/Hamburger Menus (Bad Web Design UI)

JOHNNY
header dành riêng cho điện thoại

Để làm được điều này, mình đã tạo ra 1 header dành riêng cho điện thoại.

Thay vì ẩn nó trong nút 3 gạch, mình show những mục nội dung quan trọng nhất ra để người dùng sớm nhìn thấy.

4. Không dùng Slider đầu trang…

…mà chỉ dùng Banner với một thông điệp quan trọng nhất.

Banner Dau Trang

Gần tương tự như lí do không dùng nút Menu thu nhỏ. Người ta sẽ không nhấp vào những gì họ không thấy.

Ngoài ra, slider còn gây sao nhãng cho người dùng.

Đọc bài bên dưới để biết rõ lí do

Image Carousels and Sliders? Don’t Use Them. (Here’s why.)

Peep Laja

5. Style thống nhất

Style Web
Trang Web Genetic

Xác định màu sắc chủ đạo, màu sắc thứ cấp, màu nền. Thống nhất nó ở mọi nơi.

Chọn kiểu bo góc và đổ bóng các đối tượng cần nổi bật như cách mà mình chia sẻ ở bài viết này:

XU HƯỚNG GIAO DIỆN WEB 2022 (THEO CHÂN ÔNG LỚN)

Khích lệ tình thần bằng vote 5 sao

Xếp hạng trung bình 5 / 5. Lượt Vote 7

Leave a Comment · Sản phẩm linh tinh

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

  • Email
  • Facebook
  • Instagram
  • YouTube
Nguyễn Minh Hùng

Yêu thời ông bà anh,
sống đời thản nhiên xanh.

Hiền.
Trong sáng.
Biến thái.

Bài viết tốn sức

Plugin FlyingPress vừa tăng tốc website vừa tăng điểm Pagespeed

Vikunja self-hosted (step by step)

Cách Giảm dung lượng ảnh – Nhẹ hơn, đẹp hơn

Chuyển Docudanang.com.vn từ Vultr sang Amazon Lightsail

Tăng tốc website – Tối ưu hóa Wordpress (Siêu Checklist)

Water, is taught by thirst – Hiểu và dịch thơ

NỘI DUNG CHÍNH

  1. 1. Đi theo quy trình logic
  2. 2. Gutenberg toàn trang
  3. 3. Không dùng nút menu thu nhỏ trên điện thoại
  4. 4. Không dùng Slider đầu trang…
  5. 5. Style thống nhất

logo chữ ký nguyenminhhung“Trưởng thành không phải là sự rành rẽ thói đời, rồi biến hóa bản thân từ đơn giản đến phức tạp.
Trưởng thành chính là từ trong sự phức tạp của cuộc đời vẫn giữ cho bản thân đơn thuần, biết hài lòng và vui vẻ với những điều giản đơn nhất.”

Copyright © 2023 · Genesis Theme | AZDIGI Hosting