Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Web Design for WordPress Users

Thiết kế Web dành cho Người dùng WordPress

Thiết kế Web dành cho Người dùng WordPress

Làm chủ thiết kế web WordPress với bố cục đáp ứng, UX, SEO và các kỹ năng thực tế để xây dựng những trang web ấn tượng.

4.7
(31 đánh giá)
466 học viên
Giảng viên
Andrew Williams
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 399.000đ -87%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
10.0 giờ video
73 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 28/05/2026

Bạn sẽ học được gì

Hiểu các nguyên tắc thiết kế web cốt lõi để tạo ra các trang web thân thiện với người dùng và hấp dẫn về mặt thị giác.
Sử dụng hệ thống thị giác (visual hierarchy) và kiểu chữ để cải thiện khả năng đọc và cấu trúc thiết kế.
Áp dụng tâm lý màu sắc và bảng phối màu để tác động đến hành vi và sự thu hút của người dùng.
Triển khai thiết kế đáp ứng bằng Gutenberg và Elementor cho thiết bị di động, máy tính bảng và máy tính để bàn.
Tối ưu hóa cấu trúc trang web, thẻ meta và hình ảnh để cải thiện SEO và khả năng tìm thấy.
Lên kế hoạch và cấu trúc trang web bằng cách xác định mục tiêu, đối tượng mục tiêu và bố cục nội dung.
Xây dựng các tính năng trang web thực tế như header, footer và phần hero.
Thiết kế với Gutenberg FSE và Elementor để tạo các bố cục và mẫu tùy chỉnh.
Thiết lập và quản lý môi trường WordPress cục bộ để thử nghiệm thiết kế an toàn.

Yêu cầu

Kiến thức làm việc tốt về WordPress
Kiến thức làm việc tốt về Gutenberg Editor để theo dõi phần Gutenberg
Kiến thức làm việc tốt về Elementor nếu bạn dự định theo dõi phần Elementor.

Đối tượng phù hợp

Người dùng WordPress thành thạo muốn học Thiết kế Web và áp dụng vào nỗ lực xây dựng trang web của riêng họ.
Người dùng Full Site Editor hoặc người dùng Elementor muốn triển khai các nguyên tắc thiết kế web trong công việc của họ.

Nội dung khóa học

11 phần • 73 bài giảng
1 Giới thiệu về thiết kế web.
2 Giới thiệu: Khóa học & Giảng viên
1 10 Lỗi Thiết kế Hàng đầu Cần Tránh.
2 Bạn nghĩ gì về những trang web này?
3 Các yếu tố thiết kế.
4 Thiết kế tác động như thế nào đến khả năng sử dụng và tỷ lệ chuyển đổi.
5 Điều gì làm cho một trang web trở nên đáng tin cậy hoặc dễ sử dụng.
1 Nhà thiết kế và nhà phát triển.
2 Quy trình Khám phá (The Discovery Process)
3 Sử dụng bảng tính để xác định mục tiêu và đối tượng mục tiêu của trang web.
4 Ví dụ Nhân khẩu học & Ý tưởng Thiết kế
5 Nhờ AI Gợi ý Phông chữ & Màu sắc
1 Lợi ích của môi trường cục bộ.
2 Khởi chạy và vận hành với Local.
3 WordPress Themes - Block themes và traditional themes.
4 Kiến thức Cơ bản về SEO cho WordPress
1 Layout dạng lỏng so với Layout dạng cố định
2 Khoảng cách cải thiện khả năng đọc và sự tập trung như thế nào.
3 Box Model
4 Lý thuyết lưới (Grid Theory)
5 Hệ thống thị giác - Kích thước
6 Hệ thống thị giác - Màu sắc
7 Hệ thống thị giác - Kích thước, Màu sắc và Vị trí
8 Nguyên tắc gần nhau (Proximity)
9 Cân bằng (Balance)
1 Cách Chọn Cặp Phông chữ Tốt
2 Đơn vị kích thước phông chữ (Font units).
3 Kẹp phông chữ (Font Clamps).
4 Cỡ chữ (Font Sizes)
1 Tâm lý của Màu sắc.
2 Mã Hex (Hex codes).
3 Bảng phối màu (Color Schemes).
4 Sử dụng Coolors để tạo bảng màu.
1 Công cụ Wireframe
2 Triển khai Thiết kế trong WordPress
3 Khoảng cách giữa các phần tử được ghép cặp
4 Tạo Tài liệu Tham khảo
1 Cài đặt phông chữ.
2 Cài đặt bảng màu.
3 Thiết lập Global Styles.
4 Khoảng cách giữa các khối
5 Thay đổi Khoảng cách Mặc định của các Phần tử
6 Các phần tử xếp chồng trên thiết bị di động
7 Các phần tử Tự động thay đổi kích thước trên thiết bị di động
8 Căn chỉnh và Chiều rộng
9 Tạo header đáp ứng.
10 Tạo footer đáp ứng.
11 Tạo Mẫu Trang chủ
12 Thêm phần Hero.
13 Hoàn thiện Trang chủ - Phần I
14 Hoàn thiện Trang chủ - Phần II
15 Trang đích (Landing pages).
16 Tiếp theo là gì?
1 Cài đặt phông chữ.
2 Cài đặt bảng màu.
3 Thiết lập Kiểu chữ
4 Thiết lập Global Styles
5 Khoảng cách Mặc định trong Elementor
6 Điểm ngắt (breakpoints) trong Elementor & Những gì Có thể Điều chỉnh
7 Xếp chồng phần tử trên thiết bị di động.
8 Elementor - ẩn các phần tử trên thiết bị cụ thể.
9 Padding & Margin.
10 Tạo header đáp ứng.
11 Tạo footer đáp ứng.
12 Tạo Mẫu Trang chủ.
13 Tạo phần Hero.
14 Tạo phần còn lại của Trang chủ.
15 Trang đích.
16 Tiếp theo là gì?
1 Kiểm tra khả năng tiếp cận (Accessibility audit).
2 Danh sách kiểm tra khi ra mắt.
3 20 Mẹo Thiết kế Web Hàng đầu
4 Bài giảng bổ sung

Giới thiệu khóa học

Web Design for WordPress Users: Master Visual Design Principles with Gutenberg and Elementor

Are you a WordPress user already familiar with the platform and looking to elevate your web design skills? This comprehensive 9.5-hour course is designed to teach you how to implement essential web design principles using Gutenberg and Elementor, two powerful tools in WordPress. Through 70+ in-depth videos, you’ll learn how to create aesthetically pleasing, functional, and user-friendly websites that are optimized for performance.

Course Overview:

In this course, we don't teach you WordPress, Gutenberg, or Elementor. Instead, we focus on Web Design principles, and then how to implement them on WordPress sites.  We cover everything from typography and color theory to advanced concepts like whitespace, layout, and responsive design. By the end of the course, you'll have the tools and knowledge to create professional-looking websites that perform well on all devices, and you’ll know how to optimize them for search engines.

What You Will Learn:

  • Web Design Fundamentals: Understand the core principles of web design, including what makes a website visually appealing, functional, and trustworthy. Learn how to avoid common mistakes in design that can hinder your site's performance.

  • Designer vs Developer Roles: Learn the distinction between designers and developers, how to identify your target audience, and how to adapt your design decisions, such as color and font choice, to suit the needs of your users.

  • Getting Started with WordPress: Learn how to set up a local development environment, explore WordPress theme options (block vs traditional themes), and grasp SEO basics to make your site visible and discoverable.

  • Whitespace & Layout: Discover how to use spacing effectively, understand the box model and grid theory, and implement visual hierarchy, proximity, and balance for a cleaner, more user-friendly design.

  • Typography Fundamentals: Dive into typography, learning how to pair fonts, adjust font sizes and units, and create a readable and visually cohesive design.

  • Color Theory: Understand the psychology of color, learn about hex codes and color schemes, and master the process of creating a color palette that enhances your design.

  • Planning Core Content Structure: Learn how to wireframe and structure your content, as well as how to create a reference document to keep your design consistent and organized.

  • Responsive Design with Gutenberg & Elementor: Learn how to apply the web design principles you’ve learned to create responsive layouts using both Gutenberg and Elementor. The course includes practical examples where you can follow along as I build templates and complete a homepage for two fictional websites (one with Gutenberg and the other using Elementor).

  • Accessibility and Launch Checklist: Download my checklists to help you audit your site for accessibility and ensure your site is ready for launch with a detailed checklist.


Who is this course for?
This course is ideal for WordPress users who already have basic knowledge of the platform and are looking to improve their design skills. Whether you are a small business owner, a blogger, or someone interested in creating more professional-looking websites, this course will equip you with the knowledge and practical skills to design high-quality websites using WordPress, Gutenberg, and Elementor.

By the end of this course, you'll be able to confidently implement modern web design principles and create user-friendly, visually appealing, and responsive websites using the power of WordPress.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Elementor
Hiển thị tất cả khoá học Ui Ux Design
Hiển thị tất cả khoá học Web Design
Hiển thị tất cả khoá học WordPress
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊